我们在日常工作中会接触到Echart图表相关需求，当我们鼠标移入到图表每个item上时，会有tooltip提示，来展示当前item的相关信息，为了更好的展示，我们有时候也需要tooltip不停的去轮播显示tooltip，这样以来我们就需要对tooltip轮播显示做对应的逻辑处理。
相关的源码如下:
1. demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.chart {
position: absolute;
height: 500px;
width: 800px;
}
</style>
</head>
<body>
<div id="container" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.common.js"></script>
<script src="./js/loop-tip.js"></script>
<script type="text/javascript">
// 用于清除定时器
var tootipTimer = null;
// X轴数据
var xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
// 需要渲染的series数据
var seriesData = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
// 指定图表的配置项和数据
var chartOption = {
tooltip: {
trigger: 'axis'
},
xAxis: [
{
type: 'category',
data: xAxisData,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '降水量',
axisLabel: {
formatter: '{value} ml'
}
},
],
series: [
{
name: '蒸发量',
type: 'bar',
itemStyle: {
// 柱状图的颜色，渐变色
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
)
},
data: seriesData
},
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(chartOption);
// 可调用clearLoop方法，清除定时器
tootipTimer && tootipTimer.clearLoop();
tootipTimer = null;
// 调用轮播的方法
tootipTimer = window.loopShowTooltip(myChart, chartOption, {
interval: 1000, // 轮播间隔时间
loopSeries: true // 是否开启轮播循环
});
</script>
</body>
</html>
2.loop-tip.js
window.loopShowTooltip = function (chart, chartOption, options) {
var defaultOptions = {
interval: 2000,
loopSeries: false,
seriesIndex: 0,
updateData: null
};
if (!chart || !chartOption) {
return {};
}
var dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行
var seriesIndex = 0; // 系列索引
var timeTicket = 0;
var seriesLen = chartOption.series.length; // 系列个数
var dataLen = 0; // 某个系列数据个数
var chartType; // 系列类型
var first = true;
if (options) {
options.interval = options.interval || defaultOptions.interval;
options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
options.updateData = options.updateData || defaultOptions.updateData;
} else {
options = defaultOptions;
}
// 如果设置的seriesIndex无效，则默认为0
if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
seriesIndex = 0;
} else {
seriesIndex = options.seriesIndex;
}
// 开始轮播
function autoShowTip() {
function showTip() {
// 判断是否更新数据
if (dataIndex === 0 && !first && typeof options.updateData === "function") {
options.updateData();
chart.setOption(chartOption);
}
var series = chartOption.series;
chartType = series[seriesIndex].type; // 系列类型
dataLen = series[seriesIndex].data.length; // 某个系列的数据个数
var tipParams = {seriesIndex: seriesIndex};
switch (chartType) {
case 'map':
case 'pie':
case 'chord':
tipParams.name = series[seriesIndex].data[dataIndex].name;
break;
case 'radar': // 雷达图
tipParams.seriesIndex = seriesIndex;
tipParams.dataIndex = dataIndex;
break;
default:
tipParams.dataIndex = dataIndex;
break;
}
if (chartType === 'pie' || chartType === 'radar') {
// 取消之前高亮的图形
chart.dispatchAction({
type: 'downplay',
seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
});
// 高亮当前图形
chart.dispatchAction({
type: 'highlight',
seriesIndex: seriesIndex,
dataIndex: dataIndex
});
}
// 显示 tooltip
tipParams.type = 'showTip';
chart.dispatchAction(tipParams);
dataIndex = (dataIndex + 1) % dataLen;
if (options.loopSeries && dataIndex === 0 && !first) { // 数据索引归0表示当前系列数据已经循环完
seriesIndex = (seriesIndex + 1) % seriesLen;
}
first = false;
}
showTip();
timeTicket = setInterval(showTip, options.interval);
}
// 关闭轮播
function stopAutoShow() {
if (timeTicket) {
clearInterval(timeTicket);
timeTicket = 0;
if (chartType === 'pie' || chartType === 'radar') {
// 取消高亮的图形
chart.dispatchAction({
type: 'downplay',
seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
});
}
}
}
var zRender = chart.getZr();
function zRenderMouseMove(param) {
if (param.event) {
// 阻止canvas上的鼠标移动事件冒泡
param.event.cancelBubble = true;
}
stopAutoShow();
}
// 离开echarts图时恢复自动轮播
function zRenderGlobalOut() {
if (!timeTicket) {
autoShowTip();
}
}
// 鼠标在echarts图上时停止轮播
chart.on('mousemove', stopAutoShow);
zRender.on('mousemove', zRenderMouseMove);
zRender.on('globalout', zRenderGlobalOut);
autoShowTip();
return {
clearLoop: function () {
if (timeTicket) {
clearInterval(timeTicket);
timeTicket = 0;
}
chart.off('mousemove', stopAutoShow);
zRender.off('mousemove', zRenderMouseMove);
zRender.off('globalout', zRenderGlobalOut);
}
};
};
