VUE中ECharts提示框tooltip自动切换

最新推荐文章于 2024-09-13 07:08:06 发布

原创

最新推荐文章于 2024-09-13 07:08:06 发布 · 840 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts #javascript

前言

使用VUE开发的数据大屏统计，又需要将 echarts的提示框 tooltip 实现自动切换，网上有个很简单的插件（echarts-tooltip-auto-show），使用教程简单分享给大家。
自动每隔几秒切换tooltip，鼠标移入则停止并展示当前鼠标所指向的提示框。
效果如下图所示：
在这里插入图片描述

1导入插件

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


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

2定义参数

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


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

在这里插入图片描述
插件git：

https://gitee.com/bubunuo/echarts-tooltip-auto-show

3 插件API

function loopShowTooltip (chart, chartOption, options);

参数	说明
chart	ECharts实例
chartOption	ECharts配置信息
options	｛interval:轮播时间间隔，单位毫秒，默认为2000；loopSeries: boolean类型，默认为false。true表示循环所有series的tooltip；false则显示指定seriesIndex的tooltip。seriesIndex: 默认为0，指定某个系列（option中的series索引）循环显示tooltip，当loopSeries为true时，从seriesIndex系列开始执行。｝
返回值	{clearLoop: clearLoop} 取消轮播

如若插件无法访问，可自行拷贝下方完整插件代码 echarts-tooltip-carousel.js
自己拷贝，新建JS文件，引入使用即可。

(function (global) {
   
   
  global.tools = global.tools || {
   
   };

  /**
   * echarts tooltip轮播
   * @param chart ECharts实例
   * @param chartOption echarts的配置信息
   * @param options object 选项
   * {
   *  interval    轮播时间间隔，单位毫秒，默认为2000
   *  loopSeries  boolean类型，默认为false。
   *              true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
   *  seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
   *              当loopSeries为true时，从seriesIndex系列开始执行。
   *  updateData  自定义更新数据的函数，默认为null；
   *              用于类似于分页的效果，比如总数据有20条，chart一次只显示5条，全部数据可以分4次显示。
   * }
   * @returns {
   
   {clearLoop: clearLoop}}
   */
  tools.loopShowTooltip = function (chart, chartOption, options) {
   
   
    let defaultOptions = {
   
   
      interval: 2000,
      loopSeries: false,
      seriesIndex: 0,
      updateData: null
    };

    if (!chart || !chartOption) {
   
   
      return;
    }

    let dataIndex = 0;