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远程命令执行漏洞情报。攻击者可利用该漏洞执行任意命令,获取服务器控制权限。 免责声明 技术文章仅供参考,任何个人和…

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:控制反转)是面向对象编程中的一种设计原则。其中最常见的方式叫做依赖注入(…

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

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

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: # 判断长度是否符…

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;且其元素的数据类型为浮点数。…

mybatisPlus的简单使用

封装实体类 编写Mapper service层 controller层

[python]python筛选excel表格信息并保存到另一个excel

目录 关键词平台说明背景所需库1.安装相关库2.代码实现sourcetarget1 关键词 python、excel、DBC、openpyxl 平台说明 项目Valuepython版本3.6 背景 从一个excel表中遍历删选信息并保存到另一个excel表 所需库 1.openpyxl &#xff1a;是一个用于读写 Excel 文件的 Pyt…

汽车级低压差稳压器LDO LM317BD2TR4G原理、参数及应用

LM317BD2TR4G主要功能特性分析 &#xff1a; LM317BD2TR4G 低漏 (LDO) 线性电压稳压器是一款可调 3 端子正向 LDO 电压器&#xff0c;能够在 1.2 V 至 37 V 的输出电压范围内提供 1.5 A 以上的电流。此电压稳压器使用非常简便&#xff0c;仅需两个外部电阻即可设置输出电压。另…

基于RK3588全高端智能终端机器人主板

一、小尺寸板型设计 该款主板为小型板&#xff0c;尺寸仅为125*85mm&#xff0c;更小更紧凑&#xff0c;可完美适应各类高端智能自助终端&#xff1b; 二、八核高端处理器 采用RK3588S八核64位处理器&#xff0c;8nm LP制程&#xff0c;主频最高达2.4GHz&#xff0c;搭载Andr…

一个前端非侵入式骨架屏自动生成方案

目录 背景 现有方案调研 侵入业务式手写代码 非侵入业务式手写代码 非侵入式骨架屏代码自动生成 技术方案 设计原则 架构图 骨架屏生成 骨架屏注入 优化点 部分技术细节解析 puppeteer 文本块处理 图片块处理 a 标签处理 自定义属性处理 首屏HTML处理 首屏样…

[模版总结] - 树的基本算法3 - 结构转化

二叉树结构转化 通常将二叉树根据某些要求进行结构重构&#xff0c;比如线性结构转化(链表&#xff0c;数组)&#xff0c;序列化等。 常见题型 注&#xff1a;这类题目最基本的解题思路是利用递归分治 (也可以使用迭代方法)&#xff0c;在构建树结构的时候&#xff0c;我们通…

春秋云境靶场CVE-2022-28512漏洞复现(sql手工注入)

文章目录 前言一、CVE-2022-28512靶场简述二、找注入点三、CVE-2022-28512漏洞复现1、判断注入点2、爆显位个数3、爆显位位置4 、爆数据库名5、爆数据库表名6、爆数据库列名7、爆数据库数据 总结 前言 此文章只用于学习和反思巩固sql注入知识&#xff0c;禁止用于做非法攻击。…

前置语音群呼与语音机器人群呼哪个更好

最近通过观察自己接到的营销电话&#xff0c;通过语音机器人外呼的量应该有所下降。同时和客户交流获取到的信息&#xff0c;也是和这个情况类似&#xff0c;很多AI机器人群呼的量转向了OKCC前置语音群呼。询问原因&#xff0c;说是前置语音群呼转化更快&#xff0c;AI机器人群…