echarts 饼图轮播

饼环图每项进行轮播

定义 轮播方法。
echarts更多图表行为链接:https://echarts.apache.org/zh/api.html#action

// 轮播
carouselEcharts() {
 /**
     * carouselIndex  当前轮播下标
     * optionDataLength  传入echarts的options数据有几项
     */
// 获取echarts实例
      const myChart = this.$refs.myChart.chart;
      this.dispatTimer = setInterval(() => {
      // 高亮
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.carouselIndex,
        });
        // 取消高亮
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.carouselIndex === 0 ? this.optionDataLength - 1 : this.carouselIndex - 1,
        });
        this.carouselIndex += 1;

        if (this.carouselIndex >= this.optionDataLength) {
          this.carouselIndex = 0;
        }
      }, 3000);
    }

在vue文件中的mounted生命周期中调用

  mounted() {
    this.$nextTick(() => {
      const myChart = this.$refs.myChart.chart;
      this.carouselToolTip();
      // 鼠标移上去时停止轮播
      myChart.on('mouseover', (ev) => {
        clearInterval(this.dispatTimer);
        this.dispatTimer = null;
        // 修复停止轮播时的那一项 鼠标移上去时无响应
        if (ev.dataIndex === this.carouselIndex - 1) {
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: ev.dataIndex,
          });
        } else {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.carouselIndex === 0 ? this.optionDataLength - 1 : this.carouselIndex - 1,
          });
        }
      });
      // 鼠标移出图表时取消当前高亮并停止轮播
      myChart.on('globalout', () => {
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.carouselIndex === 0 ? this.optionDataLength - 1 : this.carouselIndex - 1,
        });
        this.carouselToolTip();
      });
    });
  },