gdy_pc_8/src/newPerformance/components/PersonalExamine/PieChart2.vue

<template>
    <!-- 按等级分布 -->
    <div ref="chart2" :style="myChartStyle"></div>
</template>

<script>

import echarts from 'echarts';

export default {
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        gradeLevels: {
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
            myChart: null,
            myChartStyle: { width: "100%", height: "300px" },
            colorList: [
                { c1: ' #40d3ff', c2: '#409EFF' }, { c1: ' #ede737', c2: '#FF9600' }, { c1: '#89e398', c2: '#67c23a' },
                { c1: ' #85E9C7', c2: '#00C4CB' }, { c1: ' #f393a9', c2: '#f56c6c' }, { c1: '#e69cf3', c2: '#de43f9' },
            ],
        }
    },

    watch: {  //此处为关键，监听tableData值的变化，进行echarts渲染
        levelStatus(v) {
            this.initEcharts2(); //值发生改变则渲染一次echarts
        }
    },
    
    computed: {
        // 考核等级
        levelStatus() {
            let levelStatus = []
            levelStatus = this.gradeLevels.map(item => ({
                name: item.name, value: this.tableData.filter(data => data.levelName === item.name).length,
            }))
            levelStatus.unshift({ name: "未评分", value: this.tableData.filter(data => !data.levelName).length })
            
            return levelStatus
        },
    },
    mounted() {
        this.initEcharts2();
    },
    beforeDestroy() {
        if (this.myChart) {
            this.myChart.clear();//清空当前实例，会移除实例中所有的组件和图表
            this.myChart.dispose();//销毁实例，实例销毁后无法再被使用
        }
    },
    methods: {
        initEcharts2() {
            const colorList = this.colorList;
            const option = {
                tooltip: {//悬浮提示组件
                    trigger: 'item',
                },
                legend: {
                    show: true,
                    x: 'center',
                    y: 'bottom',
                    icon: "circle",
                    itemWidth: 10,  // 设置宽度
                    itemHeight: 10, // 设置高度
                    itemGap: 30
                },

                series: [
                    {
                        type: "pie",
                        radius: ['40%', '65%'],//小的是内径，大的是外径
                        data: this.levelStatus,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 9,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{b} : {c}'
                                },
                                labelLine: { show: true },
                                color: function (params) {//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: colorList[params.dataIndex].c1 }, { offset: 1, color: colorList[params.dataIndex].c2 }])
                                }
                            }
                        }
                    }
                ]
            };
            this.myChart = this.$echarts.init(this.$refs.chart2);
            this.myChart.setOption(option);
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });
        },
    }
}
</script>