44、echarts图形自动轮播tooltip提示,并显示高亮

自动轮播方法

参数myChart代表echarts的实例名称, options指定图表的配置项和数据, num类目数量(原因:循环时达到最大值后,使其从头开始循环), time轮播间隔时长
//自动轮播显示高亮--tooltip提示
export function autoHover(myChart, option, num, time) {
  var defaultData = { //设置默认值
    time: 2000,
    num: 0
  };
  if (!time) {
    time = defaultData.time;
  }
  if (!num) {
    num = defaultData.num;
  }
  var count = 0;
  var timeTicket = null;
  function zdy(){
    timeTicket = setInterval(function () {
      timeTicket && clearInterval(timeTicket);
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0 //serieIndex的索引值   可以触发多个
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: count
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: count
      });
      count++;
      if (count >= num) {
        count = 0
      }
      zdy();
    }, 3000);
  };
  zdy();
  myChart.on("mouseover", function (params) {
    if (params.componentType !== 'geo' ){
      clearInterval(timeTicket);
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
    }

  });
  myChart.on("mouseout", function () {
    timeTicket && clearInterval(timeTicket);
    timeTicket = setInterval(function () {
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0 //serieIndex的索引值   可以触发多个
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: count
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: count
      });
      count++;
      if (count >= num) {
        count = 0
      }
    }, 3000);
  });
}

使用方式–在需要的界面引入以上方法

import {autoHover} from "../../utils/index";

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/169184.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux操作系统使用及C高级编程-D6-D8Linux shell脚本

利用shell命令写的脚本文件,后缀是.sh shell脚本是一个解释型语言,不需要编译,可直接执行 书写:vi test.sh #!/bin/bash:说明使用的是/bin目录下的bash 说明完后即可编写脚本文件 bash test.sh:运行文…

python 就是随便玩玩,生成gif图,生成汉字图片,超级简单

文章目录 主方法调用LetterDrawingWordDoingImage 上图 你也想玩的话,可以直接上码云去看 码云链接 主方法调用 import analysisdata.WordDoingImage as WordDoingImage import analysisdata.LetterDrawing as LetterDrawingif __name__ __main__:# 输入的文本&a…

编程刷题网站以及实用型网站推荐

1、牛客网在线编程 牛客网在线编程https://www.nowcoder.com/exam/oj?page1&tab%E8%AF%AD%E6%B3%95%E7%AF%87&topicId220 2、力扣 力扣https://leetcode.cn/problemset/all/ 3、练码 练码https://www.lintcode.com/ 4、PTA | 程序设计类实验辅助教学平台 PTA | 程…

Decoder-Only、Encoder-Only和Encoder-Decoder架构的模型区别、优缺点以及使用其架构的模型示例

❤️觉得内容不错的话,欢迎点赞收藏加关注😊😊😊,后续会继续输入更多优质内容❤️ 👉有问题欢迎大家加关注私戳或者评论(包括但不限于NLP算法相关,linux学习相关,读研读博…

Ajax基础(应用场景|jquery实现Ajax|注意事项)

文章目录 一、Ajax简介二、基于jquery实现Ajax三、使用Ajax注意的问题1.Ajax不要与form表单同时提交2.后端响应格式问题3、使用了Ajax作为请求后的注意事项 一、Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。…

LongAdder功能和原理

AtomicLong能保证并发情况下计数的准确性,其内部通过CAS来解决并发安全性的问题。 AtomicLong的缺点: 可以看到在高并发情况下,当有大量线程同时去更新一个变量,任意一个时间点只有一个线程能够成功,绝大部分的线程在尝…

【并发编程】Synchronized的使用

📫作者简介:小明java问道之路,2022年度博客之星全国TOP3,专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化,文章内容兼具广度、深度、大厂技术方案,对待技术喜欢推理加验证,就职于…

K8S基础笔记

1、namespace 名称空间用来对集群资源进行隔离划分,默认只隔离资源,不隔离网络k8s默认的名称空间为default 查看k8s的所有命名空间 kubectl get namespace 或者 kubectl get ns 创建名称空间 kubectl create ns 名称 或使用yaml方式 编写yamlkub…

【计算机视觉】24-Object Detection

文章目录 24-Object Detection1. Introduction2. Methods2.1 Sliding Window2.2 R-CNN: Region-Based CNN2.3 Fast R-CNN2.4 Faster R-CNN: Learnable Region Proposals2.5 Results of objects detection 3. SummaryReference 24-Object Detection 1. Introduction Task Defin…

Java code auditing

1) FindBugs Checkstyle PMD 2) OWASP ZAP Burp Suite (XSS漏洞) 3) SQL注入

力扣-414.第三大的数(两种解法)

文章目录 第三大的数解法一(排序加遍历对比)解法二(遍历一遍加迭代) 第三大的数 题目: 给你一个非空数组,返回此数组中第三大的数 。如果不存在,则返回数组中最大的数。 示例 1: 输…

Python---函数的嵌套(一个函数里面又调用了另外一个函数)

函数嵌套调用------就是一个函数里面又调用了另外一个函数。 基本语法: # 定义 函数B def funcB():print(这是funcB函数的函数体部分...)# 定义 函数A def funcA():print(- * 80) # 这一行为了更好区分print(这是funcA函数的函数体部分...)# 假设我们在调用funcA…

HDD与QLC SSD深度对比:功耗与存储密度的终极较量

在当今数据世界中,存储设备的选择对于整体系统性能和能耗有着至关重要的影响。硬盘HDD和大容量QLC SSD是两种主流的存储设备,而它们在功耗方面的表现是许多用户关注的焦点。 扩展阅读: 1.面对SSD的步步紧逼,HDD依然奋斗不息 2.…

OceanBase 4.2.1 LTS 发版 | 一体化数据库首个长期支持版本

在刚刚结束的年度发布会上,OceanBase 沿着“一体化”产品战略思路,发布了一体化数据库的首个长期支持版本 4.2.1 LTS。作为 4.0 系列的第一个 LTS 版本,该版本的定位是支撑客户关键业务稳定长久运行,我们非常认真的打磨了这个版本…

【Python】给定一个长度为n的数列,将这个数列按从小到大的顺序排列。1<=n<=200

2、问题描述 给定一个长度为n的数列&#xff0c;将这个数列按从小到大的顺序排列。1<n<200 样例输入 5 8 3 6 4 9 样例输出 3 4 6 8 9 n int(input()) a list(map(int,input().split())) a.sort() for i in a:print(i,end ) 运行结果&#xff1a;

AIGC 技术在淘淘秀场景的探索与实践

本文介绍了AIGC相关领域的爆发式增长&#xff0c;并探讨了淘宝秀秀(AI买家秀)的设计思路和技术方案。文章涵盖了图像生成、仿真形象生成和换背景方案&#xff0c;以及模型流程串联等关键技术。 文章还介绍了淘淘秀的使用流程和遇到的问题及处理方法。最后&#xff0c;文章展望…

云桌面 node_modules 切换艰辛历程记录 rebuild失败记录

拿到node_modules后更换 执行npm rebuild 重新构建 报错 node版本不一致 nvm切换 版本 不成功 换个窗口又变回原来版本号了 设置默认版本 nvm alias default 14.16.1 发现下面还有一个stable的还指向原来版本 nvm alias stable 14.16.1 rebuild 还是失败 逐个rebuild 每个依赖单…

视频转码方法:多种格式视频批量转FLV视频的技巧

随着互联网的发展&#xff0c;视频已成为日常生活中不可或缺的一部分。然而&#xff0c;不同的视频格式可能适用于不同的设备和平台&#xff0c;因此需要进行转码。在转码之前&#xff0c;要了解各种视频格式的特点和适用场景。常见的视频格式包括MP4、AVI、MKV、FLV等。其中&a…

Selenium安装WebDriver最新Chrome驱动(含116/117/118/119)

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

Labview中for循环“无法终止”问题?即使添加了条线接线端,达到终止条件后,仍在持续运行?

关键&#xff1a; 搞清楚“运行”和“连续运行”两种运行模式的区别。 出现题目中所述问题&#xff0c;大概率是因为代码运行在“连续运行“模式下。 可以通过添加 探针 的方式&#xff0c;加深理解&#xff01;