echart 饼图自动高亮

前言：

? ? ? ? 自己的饼图已经创建完成。

效果图

代码：

? ? ?代码很简单就不用做过多的解释，看代码。下面代码直接复制就可以使用。

1.1 echart容器

<div class="echartsbox" style='width: 600px; height: 500px'>
    <div id="gdlxtjEcharts" style="width: 100%; height: 100%;"></div>
</div>

1.2?数据

data() {
    return {
        charPie3currentIndex: 0,        // 工单类型统计-动画
        EchartTime: null,               // 工单类型统计-动画
        gdlxEcharts: null,              // 工单类型统计-Echarts实例
        // 工单类型统计
        gdlxtjData: [
                {
                    name: '离线',
                    value: 125,
                },
                {
                    name: '花屏',
                    value: 230,
                },
                {
                    name: '硬件损坏',
                    value: 105,
                },
                {
                    name: '断电',
                    value: 215,
                },
                {
                    name: '其他',
                    value: 410,
                }
        ],
    }
}

?1.3 代码

methods: {
    // 初始化工单类型统计Echarts
        initgdtypetjEcharts() {
            let _this = this;
            let total = 0;
            for (let i in _this.gdlxtjData) {
                let item = _this.gdlxtjData[i];
                total += item.value * 1;
            }
            this.gdlxEcharts = this.$echarts.init(document.getElementById("gdlxtjEcharts"));
            let options = {
                color: ['#E06C7D', '#BC52F9', '#5A9FF8', '#7FD5A9', '#F4D459'],
                legend: {
                    orient: "vartical",
                    x: "left",
                    top: "center",
                    left: "60%",
                    bottom: "0%",
                    icon: "pin",
                    itemGap: 30,
                    data: ['离线', '花屏', '硬件损坏', '断电', '其他'],
                    // data: this.gdlxtjData.map(item => item.name),
                    textStyle: {
                        rich: {
                            name: {
                                width: 100,
                                color: "#1D1F23",
                                fontWeight: 400,
                                fontSize: 16
                            },
                            num: {
                                color: "#1D1F23",
                                width: 40,
                                fontWeight: 600,
                                align: "left",
                                fontSize: 20
                            },
                        },
                    },
                    formatter: function (name) {
                        for (let i in _this.gdlxtjData) {
                            let item = _this.gdlxtjData[i];
                            if (name == item.name) {
                                return `{name|${item.name}}{num|${((item.value / total).toFixed(2)) * 100 + '%'}}`;
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: "pie",
                        clockwise: true, //饼图的扇区是否是顺时针排布
                        // minAngle: 2, //最小的扇区角度（0 ~ 360）
                        radius: ["40%", "65%"],
                        center: ["30%", "50%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            //图形样式
                            normal: {
                                borderColor: "#ffffff",
                                borderWidth: 6,
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                position: "center",
                                rich: {
                                    text: {
                                        color: "#666",
                                        fontSize: 14,
                                        align: "center",
                                        verticalAlign: "middle",
                                        padding: 8,
                                    },
                                    value: {
                                        color: "#8693F3",
                                        fontSize: 24,
                                        align: "center",
                                        verticalAlign: "middle",
                                    },
                                },
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: 24,
                                },
                            },
                        },
                        data: this.gdlxtjData,
                    },
                ],
            };
            this.gdlxEcharts.setOption(options);
            setTimeout(() => {
                window.addEventListener("resize", () => _this.gdlxEcharts.resize());
            }, 0);

            // 动画
            this.EchartTime = setInterval(() => {
                this.chartHover(options, _this.gdlxEcharts)
            }, 2000);
            // 鼠标移入
            this.gdlxEcharts.on('mouseover', function(param) {
                clearInterval(_this.EchartTime);    // 清除动画
                // 取消之前高亮的图形
                _this.gdlxEcharts.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.charPie3currentIndex
                })
                // 高亮当前图形
                _this.gdlxEcharts.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: param.dataIndex
                })
                // 显示 tooltip
                _this.gdlxEcharts.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: param.dataIndex
                })
            })
            // 鼠标移出
            this.gdlxEcharts.on('mouseout', function() {
                _this.gdlxEcharts.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.charPie3currentIndex
                })
                _this.EchartTime = setInterval(() => {
                    _this.chartHover(options, _this.gdlxEcharts)
                }, 2000);
            })
        },
        // 工单类型统计Echarts自动动画
        chartHover(options, echarts) {
            let dataLen = options.series[0].data.length;
            // 取消之前高亮的图形
            echarts.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: this.charPie3currentIndex
            })
            this.charPie3currentIndex = (this.charPie3currentIndex + 1) % dataLen

            // 高亮当前图形
            echarts.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: this.charPie3currentIndex
            })
            // 显示 tooltip
            echarts.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: this.charPie3currentIndex
            })
        },
}