echarts蚊香图

// 事件处理函数
export default {
    props: {
        // 需要传递的数据
        data: {
            type: Array,
            default() {
                return [{
                    name: '本科及以上',
                    value: 13211
                },
                {
                    name: '高中',
                    value: 42111
                },
                {
                    name: '初中及以下',
                    value: 81711
                }
                ];
            }
        }
    },
    data() {
        return {
            // echarts对象
            myEchart: null,
            // echart的options
            options: {}
        };
    },
    // 创建元素
    mounted() {
        this.init();
    },
    // 销毁
    destroyed() {
        // 销毁图表
        this.destroyedChart();
    },
    methods: {
        // 设置默认参数
        setDefaultOptions(data) {
            const color = ['#4d33d4', '#0090ff', '#ffa200'];
            // 默认的参数
            this.options = {
                color: color,
                grid: {
                    top: '16%',
                    bottom: '62%',
                    left: '33%',
                    containLabel: false
                },
                legend: {
                    show: true,
                    icon: 'circle',
                    itemWidth: 12,
                    itemHeight: 12,
                    bottom: 60,
                    right: 40,
                    textStyle: {
                        fontSize: 18,
                        color: '#cde1ff'
                    }
                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLine: {show: false},
                    axisTick: {show: false},
                    axisLabel: {
                        formatter: function (params) {
                            const item = data[params];
                            return `{value|${item.value}件}{percent|${item.percent}}`;
                        },
                        interval: 0,
                        inside: true,
                        textStyle: {
                            rich: {
                                percent:{
                                    color: '#e6f1ff',
                                    fontSize: 20,
                                    // eslint-disable-next-line no-magic-numbers
                                    padding: [15, 0, 0, 10]
                                },
                                value: {
                                    color: '#e6f1ff',
                                    fontSize: 20,
                                    // eslint-disable-next-line no-magic-numbers
                                    padding: [15, 0, 0, 230]
                                }
                            }
                        },
                        show: true
                    },
                    data: []
                }],
                xAxis: [{show: false}],
                series: []
            };
        },

        /**
         * @description 初始化的方法
         * @name init
         * @return {*} 无
         */
        init() {
            // 更新数据
            this.update(this.data);
        },

        /**
         * @description 刷新图表
         * @return {*} 无
         */
        refresh() {
            if (this.myEchart) {
                this.myEchart.resize();
            }
        },

        /**
         * @description 设置图表的数据
         * @name getChartData
         * @param {object} data 参数
         * @return {*} 无
         */
        update(data) {
            // 先判断数据是否存在
            if (!Array.isArray(data)) {
                return false;
            }
            // 如果不存在echarts
            if (!this.myEchart) {
                // 图表对象
                this.myEchart = window.echarts.init(this.$refs.jsEchart);
                // 绑定resize 事件
                this.bindResizeEvent();
            }
            // 设置默认参数
            this.setDefaultOptions(data);
            // 更新数据
            this.updateData(data);
            // 清空图表
            this.myEchart.clear();
            // 生成图表
            this.myEchart.setOption(this.options);
        },

        // 更新数据对象
        updateData(data) {
            const color = ['#4d33d4', '#0090ff', '#ffa200'];
            let sum = 0;
            const pieSeries = [];
            const lineYAxis = [];

            // 数据处理
            data.forEach((v) => {
                sum = sum + parseInt(v.value, 0);
            });
            const lineData = [
                [
                    {
                        x: '68%',
                        y: 71,
                        // eslint-disable-next-line no-magic-numbers
                        symbolSize: [10, 10],
                        lineStyle: {color: color[0], width:2}
                    },
                    {
                        x: '35%',
                        y: 71,
                        symbolSize: [1, 1]
                    }
                ],
                [
                    {
                        x: '68%',
                        y: 101,
                        // eslint-disable-next-line no-magic-numbers
                        symbolSize: [10, 10],
                        lineStyle: {color: color[1], width:2}
                    },
                    {
                        x: '35%',
                        y: 101,
                        symbolSize: [1, 1]
                    }
                ],
                [
                    {
                        x: '68%',
                        y: 131,
                        // eslint-disable-next-line no-magic-numbers
                        symbolSize: [10, 10],
                        // eslint-disable-next-line no-magic-numbers
                        lineStyle: {color: color[2], width:2}
                    },
                    {
                        x: '35%',
                        y: 131,
                        symbolSize: [1, 1]
                    }
                ]
            ];

            // 图表option整理
            data.forEach((v, i) => {
                pieSeries.push({
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    // eslint-disable-next-line no-magic-numbers
                    radius: [`${65 - i * 15}%`, `${57 - i * 15}%`],
                    center: ['35%', '50%'],
                    label: {show: false},
                    data: [{
                        value: v.value,
                        name: v.name
                    }, {
                        value: sum - v.value,
                        name: '',
                        itemStyle: {color: '#051341'}
                    }],
                    markLine: {
                        silent: true,
                        lineStyle: {normal: {type: 'solid'}},
                        label: {
                            normal: {
                                position: 'start',
                                formatter: function (par) {
                                    return par.name;
                                }
                            }
                        },
                        data: lineData
                    }
                });
                pieSeries.push({
                    name: '',
                    type: 'pie',
                    silent: true,
                    // 顺时加载
                    clockWise: false,
                    z: -1,
                    // 鼠标移入变大
                    hoverAnimation: false,
                    // eslint-disable-next-line no-magic-numbers
                    radius: [`${65 - i * 15}%`, `${57 - i * 15}%`],
                    center: ['35%', '50%'],
                    label: {show: false},
                    data: [{
                        value: 10,
                        itemStyle: {color:'#051341'}
                    }]
                });
                // eslint-disable-next-line no-magic-numbers
                v.percent = sum === 0 ? '0%' : `${(parseInt(v.value, 0) / sum * 100).toFixed(1)}%`;
                lineYAxis.push({
                    value: i,
                    textStyle: {
                        rich: {
                            circle: {
                                color: color[i],
                                // eslint-disable-next-line no-magic-numbers
                                padding: [0, 5]
                            }
                        }
                    }
                });
            });
            this.options.yAxis[0].data = lineYAxis;
            this.options.series = pieSeries;
        },
        // resize 事件处理函数
        resizeHandler() {
            if (this.myEchart) {
                this.myEchart.resize();
            }
        },

        /**
         * @description 绑定resize 事件
         * @name init
         * @return {*} 无
         */
        bindResizeEvent() {
            // 绑定resize事件
            window.fdGlobal.on(window, 'resize', this.resizeHandler);
        },
        // 取消事件绑定
        unbindResizeEvent() {
            // 取消绑定resize事件
            window.fdGlobal.off(window, 'resize', this.resizeHandler);
        },

        /**
         * @description 销毁图表
         * @name destroyedChart
         * @return {*} 无
         */
        destroyedChart() {
            // 如果存在echarts
            if (this.myEchart) {
                // 销毁实例，销毁后实例无法再被使用。
                this.myEchart.dispose();
                this.myEchart = null;
                // 取消事件绑定
                this.unbindResizeEvent();
            }
        }
    }
};