需求：饼图实现轮播；
场景：电视大屏监控，自动高亮数据，有动画效果，增强页面可视性；
实现：
- 官网示例
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 的文档。
- 官网进阶
官网示例中，触发了高亮和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
- 进一步进阶
到了这一步，初步完成了需求，但是发现用户鼠标悬停前的那一块，再也无法高亮，查看了下安防之前大屏的地图轮播，也有相同的问题。
解决方案：
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;
}
});
优化完成。
