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

<template>
    <!-- 按考核周期分布 -->
    <div ref="chart3" :style="myChartStyle"></div>
</template>

<script>

import echarts from 'echarts';
import _ from "lodash"
export default {
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        cycleOptions: {
            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' },
                { c1: '#ede737', c2: '#FF9600' },
            ],
        }
    },

    watch: {  //此处为关键，监听tableData值的变化，进行echarts渲染
        tableData(v) {
            this.initEcharts3(); //值发生改变则渲染一次echarts
        }
    },
    
    computed: {
        // 考核周期分布
        cycleTypeList() {
            let cycleTypeList = _.cloneDeep(this.cycleOptions)
            cycleTypeList = cycleTypeList.filter(item => item.label !== "全部");
            cycleTypeList = cycleTypeList.map(item => ({
                    name: item.label,
                    value: this.tableData.filter(data => data.cycleType == item.value).length,
                })
            )
            return cycleTypeList
        }
    },
    mounted() {
        this.initEcharts3();
    },
    beforeDestroy() {
        if (this.myChart) {
            this.myChart.clear();//清空当前实例，会移除实例中所有的组件和图表
            this.myChart.dispose();//销毁实例，实例销毁后无法再被使用
        }
    },
    methods: {
        initEcharts3() {
            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.cycleTypeList,
                        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.chart3);
            this.myChart.setOption(option);
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });
        },
    }
}
</script>