Echarts的轮播实现方案

需求：饼图实现轮播；
场景：电视大屏监控，自动高亮数据，有动画效果，增强页面可视性；
实现：

1. 官网示例

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
    });
}, 1000);

主要运用dispatchAction，主动触发事件。
ECharts 中的事件有两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是 调用 dispatchAction 后触发的事件。每个 action 都会有对应的事件，具体见 action 和 events 的文档。

2. 官网进阶
   官网示例中，触发了高亮和tooltip，此时，用户鼠标悬停，仍然有效。但是如果是饼图中间显示label的话，就会出现用户鼠标悬停的时候label重合。需要进一步处理。

      this.relativeDeviceBar.on('mouseover',(param)=>{
                if(relativeDeviceBarInterval){ //取消轮播
                    clearInterval(relativeDeviceBarInterval);
                    relativeDeviceBarInterval = null;
                }
                this.relativeDeviceBar.dispatchAction({ //取消高亮最后一个主动高亮部分
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: lastIndex,
                });
            });
            this.relativeDeviceBar.on('mouseout',()=>{
                 //重新开始轮播代码
            });

主要用到了ECharts 中的鼠标事件事件：mouseover和mouseout

3. 进一步进阶
   到了这一步，初步完成了需求，但是发现用户鼠标悬停前的那一块，再也无法高亮，查看了下安防之前大屏的地图轮播，也有相同的问题。
   解决方案：

this.relativeDeviceBar.on('mouseover',(param)=>{
                if(relativeDeviceBarInterval){
                    clearInterval(relativeDeviceBarInterval);
                    relativeDeviceBarInterval = null;
                }
                this.relativeDeviceBar.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: lastIndex,
                });
                if(param.dataIndex){ //获取用户悬停的dataIndex，进行高亮
                    this.relativeDeviceBar.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: param.dataIndex,
                    });
                    lastIndex = param.dataIndex;
                }
            });

优化完成。