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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【漏洞复现】IP-guard WebServer 远程命令执行

漏洞描述 IP-guard是一款终端安全管理软件,旨在帮助企业保护终端设备安全、数据安全、管理网络使用和简化IT系统管理。互联网上披露IP-guard WebServer远程命令执行漏洞情报。攻击者可利用该漏洞执行任意命令,获取服务器控制权限。 免责声明 技术文章仅供参考,任何个人和…

leetcode字符串必刷题——反转字符串、反转字符串 II、反转字符串中的单词、找出字符串中第一个匹配项的下标、重复的子字符串

文章目录 反转字符串反转字符串 II反转字符串中的单词找出字符串中第一个匹配项的下标重复的子字符串 反转字符串 题目链接 编写一个函数,其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间,你必…

前端语言报错

1. 语法错误(Syntax Errors) 这是由于代码不符合语法规则而引起的错误,通常在代码编译阶段发生。示例: javascriptCopy code if (x 10 { // 缺少了右括号 // 代码逻辑 } 2. 类型错误(Type Errors) 这…

2024年软件测试面试必看系列,看完去面试你会感谢我的!!

朋友圈点赞的测试用例 功能测试 1点赞后是否显示结果 2.点赞后是否可以取消; 3.点赞取消后是否可以重复点赞; 4.共同好友点赞后,是否有消息提醒; 5.非共同好友点赞后,是否有消息提醒; 6.点击点赞人昵称,是否可以跳转到他/她的主页; 7.自己能…

Spring IOC/DI和MVC及若依对应介绍

文章目录 一、Spring IOC、DI注解1.介绍2.使用 二、Spring MVC注解1.介绍2.使用 一、Spring IOC、DI注解 1.介绍 什么是Spring IOC/DI? IOC(Inversion of Control:控制反转)是面向对象编程中的一种设计原则。其中最常见的方式叫做依赖注入(…

【佳学基因检测】在LARAVEL中如何使用和设置路由组

【佳学基因检测】在LARAVEL中如何使用和设置路由组 在设计面向基因检测客户的动态网页和API中,基因检测人工智能常常使用LARAVEL网站框架。Laravel中,路由组(Route Groups)是一种用于组织和管理路由的方法。通过使用路由组&#…

【MySql密码爆破脚本】用于其他爆破工具无法使用的情况下

1、脚本 #!/bin/bash# 脚本参数 username$1 # MySQL用户(或字典路径) password$2 # MySQL密码(或字典路径) task_num${3:-32} # 并发数,默认 32# 检查参数是否存在 if [ -z "$username" ] || [ -z "…

【考研】数据结构(更新到顺序表)

线性表的定义和基本操作 学习目标 线性表定义&#xff1a;具有相同数据类型的n个数据元素的有序序列。 顺序表定义&#xff1a; 特点 基本操作 定义 静态&#xff1a; #include<stdio.h> #include<stdlib.h>#define MaxSize 10//静态 typedef struct{int …

centos 6.10 安装 perl 5.14

下载安装包 运行下面命令&#xff1a; wget http://www.cpan.org/src/5.0/perl-5.14.2.tar.gz也可以直接下载好安装包&#xff0c;再拷到虚拟机 安装 执行下面命令 tar -xvzf perl-5.14.2.tar.gz #解压安装包 cd perl-5.14.2 ./Configure -des -Dprefix/usr/local/perl ma…

Sonar生成PDF错误Can‘t get Compute Engine task status.Retry..... HTTP error: 401

报错及修改&#xff1a; 报错&#xff1a;INFO: Can’t get Compute Engine task status.Retry… org.sonarqube.ws.connectors.ConnectionException: HTTP error: 401, msg: , query: org.apache.commons.httpclient.methods.GetMethod7a021f49 ERROR: Problem generating PD…

K8S基础笔记

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

Linux---(七)Makefile写进度条(三个版本)

文章目录 一、前提引入&#x1f397;️下面的代码什么现象&#xff1f;&#x1f397;️下面的代码什么现象&#xff1f; 二、缓冲区三、回车换行&#x1f397;️注意&#x1f397;️图解&#x1f397;️老式回车键造型&#xff08;意思是充当两个动作&#xff09;&#x1f397;…

【Python】给定n个十六进制正整数,输出它们对应的八进制数。

3.问题描述 给定n个十六进制正整数&#xff0c;输出它们对应的八进制数。 样例输入 2 39 123ABC 样例输出 71 4435274 n int(input()) li [] # 创建列表 for i in range(n):li.append(input()) # 输入数据 for num in li:if len(num) < 100000: # 判断长度是否符…

小程序里面循环使用ref的话获取不到

文章目录 概要问题案例解决方法 概要 在小程序里面一般循环使用ref的话会获取不到 问题案例 //这个时自己封装的组件&#xff0c;然后循环使用 <jilianXuanzhe huoqu"huoqu" :ref"jilianXuanzhe i"></jilianXuanzhe>//如果这样使用的话获取…

【QT基础入门】QT中的控件类概述

QT控件类的概述: QT是一个跨平台的应用程序开发框架,它提供了一系列的控件类,用于创建和管理用户界面。控件类是继承自QObject的类,它们可以接收用户的输入,显示信息,或者提供布局和容器功能。控件类通常有以下几个特点: 控件类可以拥有自己的属性、方法和信号,用于控…

Spring IOC - Bean的生命周期之依赖注入

在Spring启动流程中&#xff0c;创建的factoryBean是DefaultListableBeanFactory&#xff0c;其类图如下所示&#xff1a; 可以看到其直接父类是AbstractAutoireCapableBeanFactory&#xff0c;他主要负责完成Bean的自动装配和创建工作。 具体来说&#xff0c;AbstractAutowire…

计算机网络———ipv6简解

文章目录 1.前言&#xff1a;2. ipv6简单分析&#xff1a;2.1.地址长度对比2.2. ipv6包头分析2.3. ipv6地址的压缩表示&#xff1a;2.3. NDP&#xff1a;2.4. ipv6地址动态分配&#xff1a; 1.前言&#xff1a; 因特网地址分配组织)宣布将其最2011年2月3日&#xff0c;IANA (In…

Unity--互动组件(Scrollbar)||Unity--互动组件(DropDown )

此组件中的&#xff0c;交互&#xff0c;过渡&#xff0c;导航与文章&#xff08;Unity--互动组件&#xff08;Button&#xff09;&#xff09;中的介绍如同&#xff1b; handle rect&#xff1a;&#xff08;父节点矩形&#xff09; 用于控件的滑动“句柄”部分的图形&#xf…

11.16~11.19绘制图表,导入EXCEL中数据,进行拟合

这个错误通常是由于传递给curve_fit函数的数据类型不正确引起的。根据你提供的代码和错误信息&#xff0c;有几个可能的原因&#xff1a; 数据类型错误&#xff1a;请确保ce_data、lg_data和product_data是NumPy数组或类似的可迭代对象&#xff0c;且其元素的数据类型为浮点数。…

小迪安全笔记——Web架构篇语言中间件数据库系统源码获取

1、信息搜集搜集哪些东西&#xff1f; 架构信息收集&#xff0c;主要包括&#xff1a;操作系统、开发语言、中间件容器、数据库类型、第三方软件等&#xff1b; web源码信息收集&#xff0c;CMS开源&#xff1f;闭源&#xff1f;售卖&#xff1f;自主研发&#xff1f; 进行web…