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

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

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

2. 代码怎么写？

2.1 常规使用

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

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="myCharts" style="width: 600px;height:400px;"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.min.js"></script>
  <script src="./libs/tooltip-auto-show.js"></script>
  <script type="text/javascript">
    // 用于清除定时器
    var tootipTimer = null;
    // X轴数据
    var xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    // 需要渲染的series数据
    var seriesData = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('myCharts'));
    // 指定图表的配置项和数据
    var chartOption = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: [
        {
          type: 'category',
          data: xAxisData,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '降水量',
          axisLabel: {
            formatter: '{value} ml'
          }
        },
      ],
      series: [
        {
          name: '蒸发量',
          type: 'bar',
          itemStyle: {
            // 柱状图的颜色，渐变色
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ]
            )
          },
          data: seriesData
        },
      ]
    };
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(chartOption);
    // 可调用clearLoop方法，清除定时器
    tootipTimer && tootipTimer.clearLoop();
    tootipTimer = null;
    // 调用轮播的方法
    tootipTimer = tools.loopShowTooltip(myChart, chartOption, {
      interval: 2000, // 轮播间隔时间
      loopSeries: true // 是否开启轮播循环
    });
  </script>

需要注意的是：如果你的数据是定时刷新的，比如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下载，更多示例将会持续更新，欢迎关注。