VUE2中ECharts提示框tooltip自动切换

近期使用VUE开发的数据大屏统计，又需要将 echarts的提示框 tooltip 实现自动切换，网上有个很简单的插件（echarts-tooltip-auto-show），使用教程简单分享给大家。

自动每隔几秒切换tooltip，鼠标移入则停止并展示当前鼠标所指向的提示框。

效果如下图所示

插件git：https://gitee.com/bubunuo/echarts-tooltip-auto-show

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

 JavaScript

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

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

 JavaScript

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

API

function loopShowTooltip (chart, chartOption, options);

参数	说明
chart	ECharts实例
chartOption	ECharts配置信息
options	{ interval:轮播时间间隔，单位毫秒，默认为2000 loopSeries: &n