前言

使用VUE开发的数据大屏统计，又需要将 echarts的提示框 tooltip 实现自动切换，网上有个很简单的插件（echarts-tooltip-auto-show），使用教程简单分享给大家。
自动每隔几秒切换tooltip，鼠标移入则停止并展示当前鼠标所指向的提示框。
效果如下图所示：

1导入插件

首先，下载插件中的 echarts-tooltip-carousel.js 文件引入VUE项目中（插件在文章结尾，路径自行更换）

import { loopShowTooltip } from '@/assets/resource/echarts-tooltip-carousel';

2定义参数

接着自定义一个参数，用来清除定时器，并写入调用方法（下图中，可清晰看出代码位置）

var tootipTimer = null; // 自定义参数 用来清除定时器
// 可调用clearLoop方法，清除定时器
tootipTimer && tootipTimer.clearLoop();
tootipTimer = null;
// 调用切换方法
tootipTimer = tools.loopShowTooltip(myChart, option, {interval: 2000, // 切换间隔时间loopSeries: true // 循环切换是否启用
});

插件git：

https://gitee.com/bubunuo/echarts-tooltip-auto-show

3 插件API

function loopShowTooltip (chart, chartOption, options);

参数	说明
chart	ECharts实例
chartOption	ECharts配置信息
options	｛interval:轮播时间间隔，单位毫秒，默认为2000；loopSeries: boolean类型，默认为false。true表示循环所有series的tooltip；false则显示指定seriesIndex的tooltip。seriesIndex: 默认为0，指定某个系列（option中的series索引）循环显示tooltip，当loopSeries为true时，从seriesIndex系列开始执行。｝
返回值	{clearLoop: clearLoop} 取消轮播

如若插件无法访问，可自行拷贝下方完整插件代码 echarts-tooltip-carousel.js
自己拷贝，新建JS文件，引入使用即可。

(function (global) {global.tools = global.tools || {};/*** echarts tooltip轮播* @param chart ECharts实例* @param chartOption echarts的配置信息* @param options object 选项* {*  interval    轮播时间间隔，单位毫秒，默认为2000*  loopSeries  boolean类型，默认为false。*              true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip*  seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，*              当loopSeries为true时，从seriesIndex系列开始执行。*  updateData  自定义更新数据的函数，默认为null；*              用于类似于分页的效果，比如总数据有20条，chart一次只显示5条，全部数据可以分4次显示。* }* @returns {{clearLoop: clearLoop}}*/tools.loopShowTooltip = function (chart, chartOption, options) {let defaultOptions = {interval: 2000,loopSeries: false,seriesIndex: 0,updateData: null};if (!chart || !chartOption) {return;}let dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行let seriesIndex = 0; // 系列索引let timeTicket = 0;let seriesLen = chartOption.series.length; // 系列个数let dataLen = 0; // 某个系列数据个数let chartType; // 系列类型let first = true;let lastShowSeriesIndex = 0;let lastShowDataIndex = 0;if (seriesLen === 0) {return;}//待处理列表//不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个//循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个//要不要添加开始series索引和开始的data索引？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无效，则默认为0if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {seriesIndex = 0;} else {seriesIndex = options.seriesIndex;}/*** 清除定时器*/function clearLoop() {if (timeTicket) {clearInterval(timeTicket);timeTicket = 0;}chart.off('mousemove', stopAutoShow);zRender.off('mousemove', zRenderMouseMove);zRender.off('globalout', zRenderGlobalOut);}/*** 取消高亮*/function cancelHighlight() {/*** 如果dataIndex为0表示上次系列完成显示，如果是循环系列，且系列索引为0则上次是seriesLen-1，否则为seriesIndex-1；* 如果不是循环系列，则就是当前系列；* 如果dataIndex>0则就是当前系列。*/let tempSeriesIndex = dataIndex === 0 ?(options.loopSeries ?(seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1): seriesIndex): seriesIndex;let tempType = chartOption.series[tempSeriesIndex].type;if (tempType === 'pie' || tempType === 'radar') {chart.dispatchAction({type: 'downplay',seriesIndex: lastShowSeriesIndex,dataIndex: lastShowDataIndex});//wait 系列序号为0且循环系列，则要判断上次的系列类型是否是pie、radar}}/*** 自动轮播tooltip*/function autoShowTip() {let invalidSeries = 0;let invalidData = 0;function showTip() {//判断是否更新数据if (dataIndex === 0 && !first && typeof options.updateData === "function") {options.updateData();chart.setOption(chartOption);}let series = chartOption.series;let currSeries = series[seriesIndex];if (!series || series.length === 0 ||!currSeries || !currSeries.type || !currSeries.data ||!currSeries.data.length) {return;}chartType = currSeries.type; // 系列类型dataLen = currSeries.data.length; // 某个系列的数据个数let tipParams = {seriesIndex: seriesIndex};switch (chartType) {case 'pie':case 'map':case 'chord':tipParams.name = currSeries.data[dataIndex].name;break;case 'radar': // 雷达图tipParams.seriesIndex = seriesIndex;tipParams.dataIndex = dataIndex;break;default:tipParams.dataIndex = dataIndex;break;}if (chartType === 'pie' || chartType === 'radar') {if (!first) {cancelHighlight();}// 高亮当前图形chart.dispatchAction({type: 'highlight',seriesIndex: seriesIndex,dataIndex: dataIndex});}// 显示 tooltiptipParams.type = 'showTip';// 防止updateData时先处理tooltip后刷新数据导出tooltip显示不正确setTimeout(() => {chart.dispatchAction(tipParams);}, 0);lastShowSeriesIndex = seriesIndex;lastShowDataIndex = dataIndex;dataIndex = (dataIndex + 1) % dataLen;if (options.loopSeries && dataIndex === 0) { // 数据索引归0表示当前系列数据已经循环完invalidData = 0;seriesIndex = (seriesIndex + 1) % seriesLen;if (seriesIndex === options.seriesIndex) {invalidSeries = 0;}}first = false;}showTip();timeTicket = setInterval(showTip, options.interval);}// 关闭轮播function stopAutoShow() {if (timeTicket) {clearInterval(timeTicket);timeTicket = 0;if (chartType === 'pie' || chartType === 'radar') {cancelHighlight();}}}let 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: clearLoop};};
})(window);