怎么让ECharts的提示框tooltip自动轮播?

1. 怎么让ECharts的提示框tooltip自动轮播?

在用ECharts做大屏或者可视化展示项目的时候，让提示框tooltip自动轮播是比较常见的需求，给大家推荐一个插件叫echarts-tooltip-auto-show,名字是有点长，但是挺好用的。在hover显示tooltip之后，也可以正常轮播。

2. 代码怎么写？

2.1 常规使用

引用插件之后，调用方法tools.loopShowTooltip(myChart, chartOption, options),传入ECharts的实例、ECharts的配置项以及options(轮播间隔、是否开启循环等)即可，以下是代码示例:

需要注意的是：如果你的数据是定时刷新的，比如5分钟调用一次接口，调用之前一定要先清除掉上一次的定时器，不然不断的刷新会有很多个定时器在跑，轮播会乱掉。

另外，有需要的话还可以配置seriesIndex指定循环显示某个系列，配置updateData分页循环，详见作者的GitHub:：https://github.com/chengwubin/echarts-tooltip-auto-show

2.2 在vue里面使用

需要引用tooltip-auto-show-vue.js文件，以下是部分示例代码,同样的，如果数据需要定时刷新，记得先清掉定时器。

import { loopShowTooltip } from './utils/tooltip-auto-show-vue'
// 调用方法
this.tootipTimer = tools.loopShowTooltip(myChart, chartOption, {
 interval: 2000, // 轮播间隔时间
 loopSeries: true // 是否开启轮播循环
});

3. 示例代码下载

可以复制以上代码运行查看使用效果，也可以到GitHub: https://github.com/Jackyyans/code123下载，更多示例将会持续更新，欢迎关注。