工作的时候遇到一个需要用echarts自动轮播全国地图数据的tooltip,并且鼠标放上去不影响操作的需求,感觉这个功能写出来应该会经常使用,所以来记录一下这部分的代码。
//自动轮播tooltip
var currentIndex = -1;
var tooltip_timer = null;
tooltip_timer = setInterval(function() {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 1000);
myChart.on('mouseout', function() {
tooltip_timer = setInterval(function() {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 1000);
});
myChart.on('mouseover', function() {
clearInterval(tooltip_timer);
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
})
小白第一次做记录贴,不知道这样的注释看不看得懂,希望有看完的人给些意见,谢谢~