echart 饼图动画（饼图自动高亮展示）

可以直接粘贴使用 

一：饼图动画效果

 二：动画效果要求

（1）鼠标不移动上去得时候，饼图自动按照顺序高亮

（2）鼠标移入的时候，取消自动高亮展示，只高亮鼠标选中的那一块

（3）鼠标移出的时候，恢复自动高亮的代码

三：代码

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

//1、 创建静态echart表
var option = {
    // 饼图的echart内容，代码太多就不展示
    }
_this.chart.setOption(option)

// 2、鼠标移动上去的时候的高亮动画
this.chart.on('mouseover', function (param) {
        isSet = false
        clearInterval(_this.startCharts)
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
        // 高亮当前图形
        _this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
        // 显示 tooltip
        _this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
})
// 3、自动高亮展示
      var chartHover = function () {
        var dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
        charPie3currentIndex = (charPie3currentIndex + 1) % dataLen
        // 高亮当前图形
        _this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
         // 显示 tooltip
        _this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
      }
      _this.startCharts = setInterval(chartHover, 2000)
// 4、鼠标移出之后，恢复自动高亮
      this.chart.on('mouseout', function (param) {
        if (!isSet) {
          _this.startCharts = setInterval(chartHover, 2000)
          isSet = true
        }
      })