echarts 饼状图入门使用
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', right: 0, top: 'center', itemGap: 20, itemWidth: 8, itemHeight: 8, icon: 'circle', formatter: function (name) { let flag = null; flag = option.series[0].data; for (var i = 0; i < flag.length; i++) { if (flag[i].name === name) { return name + ' ' + flag[i].value; } } } }, series: [ { center: ['20%', '50%'], //设置饼状图位置 type: 'pie', radius: '50%', radius: ['0%', '25%'], //控制饼状图大小,是否空心 data: [ { name: '已处理', value: 123 }, { name: '未处理', value: 200 }, { name: '处理中', value: 232 } ], label: { show: false, position: 'center' }, itemStyle: { // 设置每个数据项的样式 color: function (params) { // 自定义颜色函数 var colorList = ['#29BF8A', '#F1A14C', '#009AFF']; // 自定义颜色列表 return colorList[params.dataIndex]; // 返回对应索引位置的颜色值 } }, labelLine: { show: false // 隐藏引导线 } } ] }; option && myChart.setOption(option);
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2023-03-15 v-for 循环出来的元素,hover的时候对应更换img地址