echarts图表自动轮播tooltip

都昊乾
2023-12-01

在用ECharts做大数据平台时,让图表一直处于动态是比较常见的需求,给大家推荐一个插件叫echarts-tooltip-auto-show,挺好用的。在hover显示tooltip之后,也可以正常轮播。
实例html代码

 <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>

实例js代码

 <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>
 
插件下载地址:GitHub::https://github.com/chengwubin/echarts-tooltip-auto-show
 类似资料: