echarts饼图循环高亮，中间显示详情

效果：
1.间隔两秒轮播高亮
2.鼠标移入 高亮对应项，鼠标移出 继续循环

借鉴了其他大佬的文章，当时太笨了写的着急，没有保存地址，碰到会放上来的。
相关代码：

<div id="typeBar" style="width:95%;height:94%;"></div>

//
export default {
  data() {
    return {
    typeBar: "", //饼图
     }
  }，
  mounted() {
    this.typeBar =this.$echarts.init(document.getElementById("typeBar"));
    this.init();
    setTimeout(() => {
      window.onresize = () => {
             this.typeBar.resize();
      };
    }, 200);
  },
  methods:{
  //请求数据
    typeBarData() {
    //loading效果
      this.typeBar.showLoading({
        text: "loading",
        color: "#23f8ff",
        textColor: "#fff",
        maskColor: "rgba(255, 255, 255, 0)",
        zlevel: 0,
      });
      let params = {
        date: this.paramsDate,
      };
      //请求接口
      spreadApi(params).then((res) => {
        if (res.data.code === 0 || res.data.code === "0") {
        //关闭loading
          this.typeBar.hideLoading();
          let data = res.data.data ? res.data.data : [];
          //
          this.pieActive(data);
        }
      });
    },
        //饼图循环高亮
    pieActive(data) {
      var color = ["#2A86FD", "#21E689", "#FBFF0A", "#F96A0D", "#EB53BE"];
      let option = {
        color: color,
        legend: {
          orient: "horizontal",
          x: "center",
          y: "bottom",
          itemHeight: 13,
          itemWidth: 13,
          selectedMode: false,
          data: ["国内发明", "国内外观设计", "国外发明", "国外外观设计"],
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        calculable: true,
        series: [
        //外层圆
          {
            name: "圆圈",
            type: "pie",
            zlevel: 2,
            silent: true,
            radius: ["58%", "58.5%"],
            center: ["53%", "50%"],
            clockWise: false, //顺时加载
            hoverAnimation: true,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            data: data,//这里赋值
          },
          {
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: true, //鼠标移入变大
            radius: ["40%", "54%"],
            center: ["53%", "50%"],
            zlevel: 1,
            tooltip: {
              show: false,
            },
            label: {
              show: false,
              position: "center",
              color: "#fff",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
                formatter: ["{a|{c}}", "{b|{b}}"].join("\n"),
                rich: {
                  a: { // 中间字的数值样式
                    color: "#0AE79A",
                    fontSize: 32,
                    lineHeight: 40,
                    verticalAlign: "bottom",
                  },
                  b: {// 中间字的名称样式
                    color: "#fff",
                    fontSize: "60%",
                    lineHeight: 24,
                  },
                },
              },
            },
            data: data,
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
              },
            },
          },
        ],
      };
      this.typeBar.setOption(option);
      let index = 0; //高亮所在下标
      let dataLength = option.series[0].data.length; // 当前饼图有多少个扇形
      let mTime = setInterval(() => {
        this.typeBar.dispatchAction({
          type: "downplay",
          seriesIndex: 1, //里层的圆形
          dataIndex: index % dataLength,
        });
        index++;
        this.typeBar.dispatchAction({
          type: "highlight",
          seriesIndex: 1,
          dataIndex: index % dataLength,
        });
      }, 2000);
      //  鼠标划入
      this.typeBar.on("mouseover", (e) => {
        // 停止定时器，清除之前的高亮
        clearInterval(mTime);
        this.typeBar.dispatchAction({
          type: "downplay",
          seriesIndex: 1 //清一下高亮
        });
        this.typeBar.dispatchAction({
          type: "highlight",
          seriesIndex: 1,
          dataIndex: e.dataIndex, //当前鼠标选中的高亮
        });
      });
      this.typeBar.on("mouseout", (e) => {
        clearInterval(mTime);
        this.typeBar.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
          dataIndex: e.dataIndex,
        }); //鼠标移出后先把上次的高亮取消
        mTime = setInterval(() => {
          // 取消高亮指定的数据图形
          this.typeBar.dispatchAction({
            type: "downplay",
            seriesIndex: 1,
            dataIndex: index % dataLength,
          });
          index++;
          // 高亮指定的数据图形
          this.typeBar.dispatchAction({
            type: "highlight",
            seriesIndex: 1,
            dataIndex: index % dataLength,
          });
        }, 2000);
      });
    },
  }
}