当前位置: 首页 > 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;题库已经整理…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

全志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…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...