echarts实现自动轮播tooltip

最近需要实现echarts图形中hover效果轮播（即tooltip在各个数据点上轮流显示）的功能，以下就是我学习的一个过程，只是提供思路，具体场景需要自己修改。（仅针对echarts 2.2.7及以下版本，最后的代码有3.0以上的使用方法以及插件代码链接）

源码：https://github.com/chengwubin/echarts-tooltip-auto-show

 

关于echarts大家可以查看官网文档。

文档中有这么一段话：

自2.1.8起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：

• dist（文件夹） : 经过合并、压缩的单文件
• • echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
  • chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
    • line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
    • bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
    • scatter.js : 散点图
    • k.js : K线图
    • pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
    • radar.js : 雷达图
    • map.js : 地图
    • force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
    • chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
    • funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
    • gauge.js : 仪表盘
    • eventRiver.js : 事件河流图
    • treemap.js : 矩阵树图
    • venn.js : 韦恩图
• source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试

要的就是source文件下面的文件，可以调试，把source下面的echarts-all.js导入自己的工程，在找一个例子就可以运行看效果了。

 1 <div id="chart" style="width: 800px; height: 500px;">
 2 </div>
 3 <span id="hover-console"></span>
 4 <span id="console"></span>
 5 
 6 <script src="./js/echarts-all.js"></script>
 7 <script type="text/javascript">
 8     // 基于准备好的dom，初始化echarts图表
 9     var myChart = echarts.init(document.getElementById('chart'));
10     console.log(myChart);
11     var option = {
12         tooltip: {
13             show: true
14         },
15         legend: {
16             data:['销量']
17         },
18         xAxis : [
19             {
20                 type : 'category',
21                 data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
22             }
23         ],
24         yAxis : [
25             {
26                 type : 'value'
27             }
28         ],
29         series : [
30             {
31                 "name":"销量",
32                 "type":"bar",
33                 "data":[5, 20, 40, 10, 10, 20]
34             }
35         ]
36     };
37 
38     // 为echarts对象加载数据
39     myChart.setOption(option);
40 
41     var ecConfig = echarts.config;
42     function eConsole(param) {
43         var mes = '【' + param.type + '】';
44         if (typeof param.seriesIndex != 'undefined') {
45             mes += '  seriesIndex : ' + param.seriesIndex;
46             mes += '  dataIndex : ' + param.dataIndex;
47         }
48         if (param.type == 'hover') {
49             document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
50         }
51         else {
52             document.getElementById('console