vue2实现饼图Pie组件封装

实现如下效果：

效果展示：https://code.juejin.cn/pen/7226656439941955644

如果不会请移步到官网的栗子，请点击查看

直接给大家上代码：

• 整体代码片段

 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>

• 部分代码片段，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 };

• 颜色配置代码片段，colorConfig.js

 1 let colorArr = [
 2     '#4EADFF',
 3     '#55D9FA',
 4     '#9CA5E9',
 5     '#2E98F3',
 6     '#5FCAD2',
 7     '#69C97F',
 8     '#F2CA30',
 9     '#FFA97A',
10     '#DAC4AA',
11     '#CF98E9',
12     '#F6B4DE',
13     '#F37379',
14     '#98ACC3',
15     '#75E4C1',
16     '#BEDC63',
17     '#98CFD0',
18     '#9B92F1',
19     '#26A479',
20     '#6068B3',
21     '#AE9E42',
22     '#D17952'
23 ];
24
25 export default colorArr;

鉴定完毕，欢迎友友们一起交流学习！！