echarts图表自动轮播toolTip,鼠标悬浮则停止
背景:最近做了很多用【echarts】组件写图表的需求,然后需要自动轮播toolTip,以及鼠标移入自动轮播停止,鼠标移出,自动轮播开始等需求。下面是方法的代码:
(function () { let myChart = 开发者根据自己上下文赋值; // 图表 let categoryLength = 开发者根据自己上下文赋值; // 类别数量,类似于图表X轴数据的个数长度 let timers = null; let pos = -1;
// 自动轮播定时器
const initTimer = () => {
pos = -1; if (timers) { clearInterval(timers); } timers = setInterval(() => {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
pos++;
if (pos.value > categoryLength - 1) {
pos.value = 0;
}
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: pos,
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: pos,
});
}, 2000); }; const autoShowTip = () => { initTimer(); }; const stopShowTip = () => { clearInterval(timers); }; // 鼠标悬浮上去时自动轮播停止 let zRender = myChart.getZr(); myChart.on('mouseover', function () { stopShowTip(); }); myChart.on('mouseout', function () { autoShowTip(); }); zRender.on('mousemove', () => { stopShowTip(); }); zRender.on('globalout', () => { autoShowTip(); }); })();