vue中echarts饼图实现循环高亮效果

1、首先echarts绘图需要有个盒子来盛它
这就是那个盒子

<div class="echarts" ref='topPie'></div>

在data中注册

echartsPie:'',    // 扇形图实例
      // 扇形图配置
      optionPie:{
        // animation: false,   // 取消动画
        // 提示框组件
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{b} : {c} ({d}%)"
        // },
        //图例组件
        legend: {
          show:false
        },
        color:["#E35D68","#08BA79","#1D77D2"],
        //系列列表,每个系列通过 type 决定自己的图表类型
        series: [
          {
            type: "pie",
            radius: ["70%", "85%"],
            center:["40%","50%"],
            avoidLabelOverlap: false,
            // 标签
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                // 自定义标签
                formatter: [
                  '{num|{d}'+'%}',
                  '{bt|{b}}'
                ].join('\n'),
                rich: {
                  num:{
                    fontSize: '24',
                    lineHeight:'40'
                  },
                  bt: {
                    fontSize: '10'
                  }
                }
              }
            },
            // 视觉引导线隐藏
            labelLine: {
              normal: {
                  show: false
              }
            },
            data: []
          }
        ]
      }

2、然后需要初始化，为了避免每次重新绘图都init一遍，我把初始化放在了vue的生命周期里

 mounted(){
    this.search()    // 这是获取接口数据给echarts赋值的方法
    // 初始化扇形图
    this.echartsPie = this.$echarts.init(this.$refs.topPie)
    // 宽度自适应
    window.addEventListener("resize",() => {
     this.echartsPie.resize()
    })
  }

3、利用echarts的api方法实现饼图循环高亮
写在methods中的方法，可以在echarts绘图完成之后调用

// 饼状图实现循环高亮
    pieActive(){
      let index = -1 //高亮所在下标
      let dataLength = this.optionPie.series[0].data.length   // 当前饼图有多少个扇形
      // 用定时器控制饼图高亮
      this.mTime = setInterval(()=>{
        // 清除之前的高亮
        this.echartsPie.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        })
        index = (index + 1) % dataLength
        // 当前下标高亮
        this.echartsPie.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index
        })
        if (index > dataLength) {
          index = 0
        }
      }, 2000)
      // 鼠标划入
      this.echartsPie.on('mouseover',()=>{
        // 停止定时器，清除之前的高亮
        clearInterval(this.mTime)
        this.echartsPie.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        })
      })
    }

search(){
      this.optionPie.series[0].data = []
      // 赋值，axios调取接口并给echarts的配置项赋值，方法不通用，就不写了
     
          // 绘图
          this.echartsPie.setOption(this.optionPie)
          this.pieActive()
          // 鼠标划出
          this.echartsPie.on('mouseout',()=>{
            this.pieActive()
          })
        }
      })
    }