实现如下效果:
如果不会请移步到官网的栗子,请点击查看
直接给大家上代码:
- 整体代码片段
1 <template> 2 <div ref="echarts" style="width: 100%; height:300px;"></div> 3 </template> 4 <script> 5 /* eslint-disable */ 6 import { setPieOption } from "@/util/pieConfig"; 7 8 export default { 9 name: 'PieDom', 10 props: ["categoryList"], 11 data() { 12 return {} 13 }, 14 mounted() { 15 this.$nextTick(() => { 16 this.loadBars(); 17 }); 18 }, 19 methods: { 20 loadBars() { 21 this.$nextTick(function () { 22 let myChart = this.$echarts.init(this.$refs.echarts) // 绘制图表 23 let text = "聚类各项占比"; 24 let data = this.categoryList; 25 data.map(item => { 26 let _index = +item.name + 1; 27 item.index = item.name; 28 item.name = '类别' + _index; 29 return item; 30 }); 31 let option = setPieOption(text, data); 32 33 // 使用刚指定的配置项和数据显示图表。 34 myChart.setOption(option); 35 window.addEventListener('resize', function () { 36 setTimeout(function () { 37 myChart.resize(); 38 }, 200) 39 }); 40 }); 41 } 42 } 43 } 44 </script>View Code
部分代码片段,pieConfig.js
1 import color from '@/util/colorConfig.js'; 2 3 // 饼图 4 export const setPieOption = (text, data) => { 5 let newColor = []; 6 data.map((item, index) => { 7 newColor[index] = color[item.index]; 8 }); 9 10 let option = { 11 title: { 12 show: false, 13 text, 14 textStyle: { 15 color: '#666', 16 fontSize: 16, 17 fontWeight: 'normal', 18 top: '0', 19 left: '30%' 20 } 21 }, 22 tooltip: { 23 trigger: 'item' 24 }, 25 legend: { 26 type: 'scroll', 27 orient: 'vertical', 28 right: 0, 29 align: 'auto', 30 top: 'center', 31 itemHeight: 8, 32 itemWidth: 8, 33 itemGap: 20, 34 35 icon: 'circle', 36 textStyle: { 37 padding: [4, 0], 38 rich: { 39 a: { 40 fontSize: 14, 41 width: 'auto' 42 // minWidth: '100' 43 }, 44 b: { 45 fontSize: 12, 46 width: 3, 47 color: '#ccc' 48 }, 49 c: { 50 fontSize: 14, 51 width: 50, 52 color: '#ccc' 53 }, 54 d: { 55 fontSize: 14, 56 width: 40 57 } 58 } 59 }, 60 formatter: function (params) { 61 // 添加 62 let _index, 63 total = 0; 64 data.forEach((item, index) => { 65 total += item.value; 66 if (item.name == params) { 67 _index = index; 68 } 69 }); 70 let a = params.length < 15 ? params : params.slice(0, 15) + '...'; 71 let arr = [ 72 '{a|' + a + '}', 73 '{b|' + '|}', 74 '{c|' + ((data[_index].value / total) * 100).toFixed(0) + '%}', 75 '{d|' + data[_index]?.value + '条}' 76 ]; 77 return arr.join(' '); 78 } 79 }, 80 color: newColor, 81 series: [ 82 { 83 // name: 'Access From', 84 type: 'pie', 85 radius: '70%', 86 center: ['20%', '50%'], 87 avoidLabelOverlap: false, 88 label: { 89 show: false, 90 position: 'center' 91 }, 92 labelLine: { 93 show: false 94 }, 95 data, 96 itemStyle: { 97 borderRadius: 0, 98 borderColor: '#fff', 99 borderWidth: 2, 100 emphasis: { 101 shadowBlur: 10, 102 shadowOffsetX: 0, 103 shadowColor: 'rgba(0, 2, 2, 0.3)' 104 } 105 } 106 } 107 ] 108 }; 109 return option; 110 };View Code
颜色配置代码片段,colorConfig.js
鉴定完毕,欢迎友友们一起交流学习!!
标签:index,封装,name,color,Pie,item,let,vue2,data From: https://www.cnblogs.com/liushihong21/p/17359459.html