1、怎么让ECharts的提示框tooltip自动轮播
在用ECharts做大屏或者可视化展示项目的时候,让提示框tooltip自动轮播是比较常见的需求
2、封装一个全局可用的轮询方法
/**
@params dom dom元素
@params chartOption echarts的Option
@params timer 定时器
*/
setTimerToolTips(dom,chartOption,timer){
clearInterval(timer); //清除定时器,防止轮播出现混乱
var index = -1;
timer = setInterval(() => {
dom.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index
});
index = (index + 1) % chartOption.series[0].data.length; //计算索引
dom.dispatchAction({ //Echarts提供的方法
type: "showTip",
seriesIndex: 0,
dataIndex: index
});
dom.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index
});
}, 3000); //每隔3秒轮播一次
}
3、以vue2为例的调用方法
<IEcharts
ref="pie"
:option="pieOption"
:resizable="true"
></IEcharts>
this.timer1 = setTimerToolTips(this.$refs.pie,this.pieOption,this.timer1);