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

【打卡】牛客网:BM84 最长公共前缀

自己写的&#xff1a; 题目要求时间复杂度是o(n*len)&#xff0c;说明可以遍历所有的字符。 空间复杂度o(1)&#xff0c;说明不能用字符串存储公共前缀&#xff0c;所以用下标来记录。 调试过程&#xff1a; 大概花了20min。 我调试前的做法是&#xff0c;在while循环中&…...

我在Vscode学OpenCV 图像处理三(图像梯度--边缘检测【图像梯度、Sobel 算子、 Scharr 算子、 Laplacian 算子、Canny 边缘检测】)

文章目录 一、图像梯度1.1 介绍1.2 涉及函数 二、高频强调滤波器2.1 Sobel 算子2.1.1 Sobel 理论基础2.1.2 Sobel 算子及函数使用&#xff08;1&#xff09;对参数取绝对值&#xff08;2&#xff09;控制dx&#xff0c;dy方向的求导阶数1. **计算 x 方向边缘&#xff08;梯度&a…...

2023年全国职业院校技能大赛软件测试赛题—单元测试卷⑤

单元测试 一、任务要求 题目1&#xff1a;根据下列流程图编写程序实现相应处理&#xff0c;执行j10*x-y返回文字“j1&#xff1a;”和计算值&#xff0c;执行j(x-y)*(10⁵%7)返回文字“j2&#xff1a;”和计算值&#xff0c;执行jy*log(x10)返回文字“j3&#xff1a;”和计算值…...

seata分布式事务(与dubbo集成)

1.seata是什么? Seata 是一款开源的分布式事务解决方案&#xff0c;致力于在微服务架构下提供高性能和简单易用的分布式事务服务。 2.seata的注解 GlobalTransactional&#xff1a;全局事务注解&#xff0c;添加了以后可实现分布式事务的回滚和提交&#xff0c;用法与spring…...

Leetcod面试经典150题刷题记录 —— 数学篇

Leetcode面试经典150题刷题记录-系列Leetcod面试经典150题刷题记录——数组 / 字符串篇Leetcod面试经典150题刷题记录 —— 双指针篇Leetcod面试经典150题刷题记录 —— 矩阵篇Leetcod面试经典150题刷题记录 —— 滑动窗口篇Leetcod面试经典150题刷题记录 —— 哈希表篇Leetcod…...

x-cmd pkg | csview - 美观且高性能的 csv 数据查看工具

目录 介绍首次用户功能特点类似工具与竞品进一步阅读 介绍 csview 是一个用于在命令行中查看 CSV 文件的工具&#xff0c;采用 Rust 语言编写的&#xff0c;支持中日韩/表情符号。它允许用户在终端中以表格形式查看 CSV 数据&#xff0c;可以对数据进行排序、过滤、搜索等操作…...

前端八股文(性能优化篇)

目录 1.CDN的概念 2.CDN的作用 3.CDN的原理 4.CDN的使用场景 5.懒加载的概念 6.懒加载的特点 7.懒加载的实现原理 8.懒加载与预加载的区别 9.回流与重绘的概念及触发条件 &#xff08;1&#xff09;回流 &#xff08;2&#xff09;重绘 10. 如何避免回流与重绘&#…...

.Net Core项目在linux部署实战 1.sdk下载 2.环境变量配置/ect/profile 3.运行

1)下载.net core sdk https://download.visualstudio.microsoft.com/download/pr/01292c7c-a1ec-4957-90fc-3f6a2a1e5edc/025e84c4d9bd4aeb003d4f07b42e9159/dotnet-sdk-6.0.418-linux-x64.tar.gz 2)配置下环境变量 step1: // 解压到指定目录 mkdir -p $HOME/dotnet &…...

Python 基于Open3D的点云均匀下采样算法

目录 一、算法概述二、代码示例三、测试示例一、算法概述 点云均匀下采样算法:是在保持点云关键特征的前提下,减少点云数据的数量。 算法流程: 首先使用o3d.io.read_point_cloud函数读取点云数据。然后,使用uniform_down_sample函数进行均匀下采样,将点云数据按照指定的采…...

【MySQL】本地创建MySQL数据库详解

文章目录 下载MySQL安装重置密码本地连接 下载MySQL 下载网址&#xff1a;https://dev.mysql.com/downloads/mysql/ 安装 将下载好的压缩包解压到D盘。 在解压好的文件夹中创建my.ini文件。 将以下代码复制粘贴到创建好的my.ini文件中。注意修改文件路径。 [mysqld] #设置…...