Echarts 实现高亮轮播效果

echarts yekong
drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      const myChart = this.$echarts.init(this.$refs.echarts)
      var option = {
        tooltip: {
          show: true,
          formatter: '{b0}: {c0}辆<br />占比: {d0}%'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['55%', '70%'],
            color: ['#F6B507', '#2A87F4', '#00AFAF'],
            labelLine: {
              show: false,
              normal: {
                length2: 0,
                length: 0,
              }
            },
            label: {
              normal: {
                formatter: '{b|{b}} \n {per|{d}%} ',
                borderColor: 'transparent',
                borderRadius: 2,
                show: false,
                rich: {
                  b: {
                    color: 'rgba(143, 178, 204, 1)',
                    fontSize: FontChart(18),
                    position: 'absolute',
                    top: 20,
                    left: 0,
                  },
                  per: {
                    color: 'rgba(51, 204, 255, 1)',
                    fontSize: FontChart(18),
                    padding: [0, 0, 5, -5]
                  }
                },
                textStyle: {
                  color: '#fff',
                  fontSize: FontChart(18)
                }
              }
            },
            data: [{
              name: '在线',
              value: that.running
            }, {
              name: '7日内离线',
              value: that.offline_7day
            }, {
              name: '7日内在线',
              value: that.online_7day
            }]
          }
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
      var app = {
        currentIndex: -1
      }
      setInterval(function () {
        var dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        app.currentIndex = (app.currentIndex + 1) % dataLen
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
      }, 3000)
    }
喜欢