当前位置: 首页 > news >正文

echarts的dispatchAction

触发图表行为,通过dispatchAction触发。例如图例开关legendToggleSelect, 数据区域缩放dataZoom,显示提示框showTip等等。

官网:echarts

(在 ECharts 中主要通过 on 方法添加事件处理函数。)

events:

ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是调用 dispatchAction 后触发的事件。

action:

ECharts 中支持的图表行为,通过 dispatchAction 触发。

1.highlight 高亮指定的数据图形

dispatchAction({type: 'highlight',// 可选,系列 index,可以是一个数组指定多个系列seriesIndex?: number|Array,// 可选,系列名称,可以是一个数组指定多个系列seriesName?: string|Array,// 可选,数据的 indexdataIndex?: number,// 可选,数据的 名称name?: string
})
2.downplay 取消高亮指定的数据图形
dispatchAction({type: 'downplay',// 可选,系列 index,可以是一个数组指定多个系列seriesIndex?: number|Array,// 可选,系列名称,可以是一个数组指定多个系列seriesName?: string|Array,// 可选,数据的 indexdataIndex?: number,// 可选,数据的 名称name?: string
})

3.图例相关的行为,必须引入图例组件之后才能使用

1)legendSelect(选中图例)
dispatchAction({type: 'legendSelect',// 图例名称name: string
})

2)legendUnSelect(取消选中图例

dispatchAction({type: 'legendUnSelect',// 图例名称name: string
})

3)legendToggleSelect(切换图例的选中状态)

dispatchAction({type: 'legendToggleSelect',// 图例名称name: string
})

4)legendScroll(控制图例的滚动),当legend.type是scroll的时候有效

dispatchAction({type: 'legendScroll',scrollDataIndex: number,legendId: string
})

4. 提示框组件相关行为,必须引入提示框组件之后才能引用

1)showTip(显示提示框)
有两种使用方式
A:指定在相对容器的位置处显示提示框,如果指定的位置无法显示则无效。

dispatchAction({type:'showTip',//屏幕上的x坐标x: number,//屏幕上的y坐标y: number,//本次显示tooltip的位置,只在本次action生效。缺省则使用option中定义的tooltip位置position: Array.<number> | String | Function
})

B: 指定数据图形,根据tooltip的配置项进行显示提示框

dispatch({type: 'showTip',// 系列的 index,在 tooltip 的 trigger 为 axis 的时候可选。seriesIndex?: number,// 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据dataIndex?: number,// 可选,数据名称,在有 dataIndex 的时候忽略name?: string,// 本次显示 tooltip 的位置。只在本次 action 中生效。// 缺省则使用 option 中定义的 tooltip 位置。position: Array.<number>|string|Function,
})

2)hideTip 隐藏提示框

dispatchAction({type:'hideTip'
})

其他相关方法或者属性 可以移步官网。此文借鉴:Echarts 的 dispatchAction

相关文章:

echarts的dispatchAction

触发图表行为&#xff0c;通过dispatchAction触发。例如图例开关legendToggleSelect, 数据区域缩放dataZoom&#xff0c;显示提示框showTip等等。 官网&#xff1a;echarts (在 ECharts 中主要通过 on 方法添加事件处理函数。) events&#xff1a; ECharts 中的事件分为两种…...

Java IO学习和总结(超详细)

一、理解 I/O 是输入和输出的简写&#xff0c;指的是数据在计算机内部和外部设备之间的流动。简单来说&#xff0c;当你从键盘输入数据、从鼠标选择操作&#xff0c;或者在屏幕上看到图像&#xff0c;这些都是 I/O 操作。它就像是计算机与外部世界沟通的桥梁&#xff0c;没有 I…...

mysql忘记root密码后怎么重置

mysql忘记root密码后重置方法【windows版本】 重置密码步骤停掉mysql服务跳过密码进入数据库在user表中重置密码使用新密码登录mysql到此&#xff0c;密码就成功修改了&#xff0c;完结&#xff0c;撒花~ 重置密码步骤 当我们忘记mysql的密码时&#xff0c;连接mysql会报这样的…...

计算机图形学作业:三维线段的图形变换

1. 将三维空间某线段 P1P2进行如下的操作&#xff0c;请按要求回答问题&#xff1a; &#xff08;1&#xff09; 沿 X 轴、Y 轴和 Z 轴分别平移 dx、dy 和 dz 的长度&#xff0c;给出相应的变换矩阵。 变换矩阵为&#xff1a; T100001000010dxdydz1 &#xff08;2&#xff09…...

Linux mren命令教程:批量重命名文件(附实际操作案例和注意事项)

Linux mren命令介绍 mren&#xff08;全称multiple rename&#xff09;&#xff0c;它是用来对多个文件进行重命名的工具。这个命令在一次操作中可以批量改变多个文件的名称&#xff0c;特别是在需要对大量文件进行重命名时&#xff0c;mren将节省大量的时间和努力。 Linux m…...

LLVM系列(1): 在微软Visual Studio下编译LLVM

参考链接&#xff1a; Getting Started with the LLVM System using Microsoft Visual Studio — LLVM 18.0.0git documentation 1.安装visualstudio&#xff0c;版本需要大于vs2019 本机环境已安装visual studio2022&#xff0c;省略 2安装Makefile&#xff0c;版本需要大…...

分布式系统的三字真经CAP

文章目录 前言C&#xff08;Consistency 数据一致性&#xff09;A&#xff08;Availability 服务可用性&#xff09;P&#xff08;Partition Tolerance 分区容错性&#xff09;CAP理论最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;我一起探索一下分布式系统的三字真经C…...

大模型背景下计算机视觉年终思考小结(一)

1. 引言 在过去的十年里&#xff0c;出现了许多涉及计算机视觉的项目&#xff0c;举例如下&#xff1a; 使用射线图像和其他医学图像领域的医学诊断应用使用卫星图像分析建筑物和土地利用率相关应用各种环境下的目标检测和跟踪&#xff0c;如交通流统计、自然环境垃圾检测估计…...

Modbus协议学习第一篇之基础概念

什么是“协议” 大白话解释&#xff1a;协议是用来正确传递消息数据而设立的一种规则。传递消息的双方&#xff08;两台计算机&#xff09;在通信时遵循同一种协议&#xff0c;即可理解彼此传递的消息数据。 Modbus协议模型 Modbus协议模型较为简单&#xff0c;使用一种称为应用…...

gem5学习(12):理解gem5 统计信息和输出——Understanding gem5 statistics and output

目录 一、config.ini 二、config.json 三、stats.txt 官方教程&#xff1a;gem5: Understanding gem5 statistics and output 在运行 gem5 之后&#xff0c;除了仿真脚本打印的仿真信息外&#xff0c;还会在根目录中名为 m5out 的目录中生成三个文件&#xff1a; config.i…...

索引的概述和使用

1、概述 索引占用存储空间&#xff0c;并不是越多越好&#xff0c;太多的索引会影响系统性能 索引分类 聚集索引&#xff1a; 逻辑顺序和物理顺序是一致的&#xff08;表中行数的位置决定了该行在内存中存储的位置&#xff09;&#xff0c;因此效率优先于非聚集索引&#xff…...

力扣210. 课程表 II

深度优先遍历 思路&#xff1a; 搜索逻辑参见​​​​​​力扣207.课程表需要课程安排的顺序&#xff0c;课程搜索完成时&#xff0c;将其存储起来即可&#xff1b;存储课程的顺序需要注意&#xff1a; 输入依赖中 [A, B]图中表示 B -> A &#xff0c;表示先 B 后 A&#x…...

[Docker] Mac M1系列芯片上完美运行Docker

docker pull qinchz/dm8-arm64 container_name: dm8ports:- "5236:5236"mem_limit: 1gmemswap_limit: 1gvolumes:- /data/dm8:/home/dmdba/data 数据库实例参数已修改&#xff0c;接近oracle使用习惯 #字符集 utf-8 CHARSET1 #VARCHAR 类型对象的长度以字符为单位 …...

CompletableFuture、ListenableFuture高级用列

CompletableFuture 链式 public static void main(String[] args) throws Exception {CompletableFuture<Integer> thenCompose T1().thenCompose(Compress::T2).thenCompose(Compress::T3);Integer result thenCompose.get();System.out.println(result);}// 假设这些…...

什么是云服务器,阿里云优势如何?

阿里云服务器ECS英文全程Elastic Compute Service&#xff0c;云服务器ECS是一种安全可靠、弹性可伸缩的云计算服务&#xff0c;阿里云提供多种云服务器ECS实例规格&#xff0c;如经济型e实例、通用算力型u1、ECS计算型c7、通用型g7、GPU实例等&#xff0c;阿里云百科aliyunbai…...

HCIA-Datacom题库(自己整理分类的)_15_VRP平台多选【9道题】

1.VRP操作平台存在哪些命令行视图? 用户视图 接口视图 协议视图 系统视图 2.以下哪些存储介质是华为路由器常用的存储介质 SDRAM NVRAM Flash Hard Disk SD Card 解析&#xff1a;Hard Disk是硬盘&#xff0c;一般网络设备没有。 3.VRP支持通过哪几种方式对路由器…...

html5基础入门

html5基础语法与标签 前言前端开发零基础入门介绍前端开发行业介绍&#xff1a;大前端时代&#xff1a;前端开发主要技术介绍学习方法IDE简介vscode快捷键&#xff1a; 总结 HTML语法与基础标签互联网基本原理HTTP协议&#xff08;请求、响应&#xff09;什么是前端、后端&…...

JVM工作原理与实战(十五):运行时数据区-程序计数器

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、运行时数据区 二、程序计数器 总结 前言 JVM作为Java程序的运行环境&#xff0c;其负责解释和执行字节码&#xff0c;管理内存&#xff0c;确保安全&#xff0c;支持多线程和提供…...

计算机体系结构----存储系统

本文严禁转载&#xff0c;仅供学习使用。参考资料来自中国科学院大学计算机体系结构课程PPT以及《Digital Design and Computer Architecture》、《超标量处理器设计》、同济大学张晨曦教授资料。如有侵权&#xff0c;联系本人修改。 1.1 引言 1.1.1虚拟和物理内存 程序员看到…...

华为OD机试2024年最新题库(Python)

我是一名软件开发培训机构老师&#xff0c;我的学生已经有上百人通过了华为OD机试&#xff0c;学生们每次考完试&#xff0c;会把题目拿出来一起交流分享。 重要&#xff1a;2024年1月-5月&#xff0c;考的都是OD统一考试&#xff08;C卷&#xff09;&#xff0c;题库已经整理…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...