echarts饼图轮播效果

echarts提供的dispatchAction方法可以控制饼图某一段“highlight”’高亮，或“downplay”取消高亮。利用定时器控制饼图循环高亮。

循环好做，主要是鼠标移入饼图也会触发高亮导致冲突，显示效果出现问题。需要同时监听echarts的mouseover事件，鼠标移入做特殊处理。

				var option;
				var ele = document.getElementById("chart");
                echarts.dispose(ele);
                this.chart= echarts.init(ele);
                this.chart.setOption(option);

                var i = 0;
                var looper = () => {
                    i++;
                    if (i == data.length) {
                        i = 0;
                    }
                    this.chart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: i == 0 ? data.length - 1 : i - 1,
                    });
                    this.chart.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: i});
                    return looper;
                };
                this.timer= setInterval(looper(), 3000);

                this.chart.on('mouseover', params => {
                    window.clearInterval(this.timer);
                    //如果鼠标移入正在高亮的数据段时，不取消高亮
                    if (i != params.dataIndex) {
                        this.chart.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: i,
                        });
                    }
                    //鼠标移出后从鼠标位置开始循环
                    i = params.dataIndex;
                });

                this.chart.on('mouseout', params => {
                    this.timer= setInterval(looper(), 3000);
                });