前言

使用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);