实现echarts饼图自动切换动画

项目场景：

实现echarts饼图自动切换动画

---

问题描述：

鼠标进入饼图高亮显示后进入其他饼块不会取消上一个饼块高亮。

---

效果

http://yang-jiahui-220.gitee.io/hb_bigdata/index.html

解决方案：

   index= param.dataIndex     

解决文章所述问题记录上一次选中值重新进入时取消高亮

      var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var _this = this;
      var index= 0;

      //此处是echarts实例化 可自行跳过 （实例化开始）
      var chart = this.$echarts.init(document.getElementById("echart1"));
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 0,
          bottom: 20,
          left: "left",
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        grid: {
          x: "-10%",
          y: 40,
          x2: 20,
          y2: 20
        },
        color: ["#09d0fb", "#91CC75", "#95f8fe", "#f9f390", "#ecfeb7"],
        series: [
          {
            type: "pie",
            radius: "75%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              { value: 1548, name: "运行" },
              { value: 535, name: "待机" },
              { value: 510, name: "故障" },
              { value: 634, name: "维修" },
              { value: 735, name: "停机" }
            ],
            label: {
              //标识
              normal: {
                position: "outside",
                formatter: "{b}: {d}%",
                textStyle: {
                  fontSize: 12
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
     
      chart.setOption(option);
      //此处是echarts实例化 可自行跳过 （实例化结束）
    
      // 鼠标移动上去的时候的高亮动画
      chart.on("mouseover", function(param) {
        flag = false;
        clearInterval(_this.startCharts);
        //取消之前高亮图形
        chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
        
        index= param.dataIndex     
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
        
        //高亮当前图形
        chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        });
        //显示tooltip
        chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        });
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function() {
        chart.resize();
      });

      //自动高亮显示
      var chartHover = function() {
      console.log(charPiecurrentIndex) 
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
        index= (index+ 1) % dataLen;
         
        // 高亮当前图形
        chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
        // 显示 tooltip
        chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
      };

      _this.startCharts = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      chart.on("mouseout", function(param) {
        if (!isSet) {
          _this.startCharts = setInterval(chartHover, 2000);
          flag = true;
        }
      });

以上就是解决方案，希望如果有误的地方或者有更好的解决方案劳烦评论这对我很重要，谢谢大家。

下面是我解决该问题时找到的一些关于相关的一些链接，谢谢各位~

echart 饼图动画

echarts API action 之 dispatchAction

Echarts学习之二十三：action图表行为的相关操作