vue2实现饼图Pie组件封装

实现如下效果：

效果展示：code.juejin.cn/pen/7226656… 

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

直接给大家上代码：

• 整体代码片段

<template>
    <div ref="echarts" style="width: 100%; height:300px;"></div>
</template>
<script>
/* eslint-disable */
import { setPieOption } from "@/util/pieConfig";

export default {
    name: 'PieDom',
    props: ["categoryList"],
    data() {
        return {}
    },
    mounted() {
        this.$nextTick(() => {
            this.loadBars();
        });
    },
    methods: {
        loadBars() {
            this.$nextTick(function () {
                let myChart = this.$echarts.init(this.$refs.echarts) // 绘制图表
                let text = "聚类各项占比";
                let data = this.categoryList;
                data.map(item => {
                    let _index = +item.name + 1;
                    item.index = item.name;
                    item.name = '类别' + _index;
                    return item;
                });
                let option = setPieOption(text, data);

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    setTimeout(function () {
                        myChart.resize();
                    }, 200)
                });
            });
        }
    }
}
</script>

• 部分代码片段，pieConfig.js

import color from '@/util/colorConfig.js';

// 饼图
export const setPieOption = (text, data) => {
    let newColor = [];
    data.map((item, index) => {
        newColor[index] = color[item.index];
    });

    let option = {
        title: {
            show: false,
            text,
            textStyle: {
                color: '#666',
                fontSize: 16,
                fontWeight: 'normal',
                top: '0',
                left: '30%'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 0,
            align: 'auto',
            top: 'center',
            itemHeight: 8,
            itemWidth: 8,
            itemGap: 20,

            icon: 'circle',
            textStyle: {
                padding: [4, 0],
                rich: {
                    a: {
                        fontSize: 14,
                        width: 'auto'
                        // minWidth: '100'
                    },
                    b: {
                        fontSize: 12,
                        width: 3,
                        color: '#ccc'
                    },
                    c: {
                        fontSize: 14,
                        width: 50,
                        color: '#ccc'
                    },
                    d: {
                        fontSize: 14,
                        width: 40
                    }
                }
            },
            formatter: function (params) {
                // 添加
                let _index,
                    total = 0;
                data.forEach((item, index) => {
                    total += item.value;
                    if (item.name == params) {
                        _index = index;
                    }
                });
                let a = params.length < 15 ? params : params.slice(0, 15) + '...';
                let arr = [
                    '{a|' + a + '}',
                    '{b|' + '|}',
                    '{c|' + ((data[_index].value / total) * 100).toFixed(0) + '%}',
                    '{d|' + data[_index]?.value + '条}'
                ];
                return arr.join('  ');
            }
        },
        color: newColor,
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: '70%',
                center: ['20%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#fff',
                    borderWidth: 2,
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 2, 2, 0.3)'
                    }
                }
            }
        ]
    };
    return option;
};

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

let colorArr = [
    '#4EADFF',
    '#55D9FA',
    '#9CA5E9',
    '#2E98F3',
    '#5FCAD2',
    '#69C97F',
    '#F2CA30',
    '#FFA97A',
    '#DAC4AA',
    '#CF98E9',
    '#F6B4DE',
    '#F37379',
    '#98ACC3',
    '#75E4C1',
    '#BEDC63',
    '#98CFD0',
    '#9B92F1',
    '#26A479',
    '#6068B3',
    '#AE9E42',
    '#D17952'
];

export default colorArr;

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