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

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

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

相关文章

AC/DC控制电路选型分析

AC/DC控制电路选型&#xff0c;输出功率5W~20W&#xff0c;工作频率50KHz~100KHz UVL0/OVP/SCP/OCP/OLP等多种保护功能可选

C++ OpenGL 3D Game Tutorial 2: Making OpenGL 3D Engine学习笔记

视频地址https://www.youtube.com/watch?vPH5kH8h82L8&listPLv8DnRaQOs5-MR-zbP1QUdq5FL0FWqVzg&index3 一、main类 接上一篇内容&#xff0c;main.cpp的内容增加了一些代码&#xff0c;显得严谨一些&#xff1a; #include<OGL3D/Game/OGame.h> #include<i…

重新认识Elasticsearch-一体化矢量搜索引擎

前言 2023 哪个网络词最热&#xff1f;我投“生成式人工智能”一票。过去一年大家都在拥抱大模型&#xff0c;所有的行业都在做自己的大模型。就像冬日里不来件美拉德色系的服饰就会跟不上时代一样。这不前段时间接入JES&#xff0c;用上好久为碰的RestHighLevelClient包。心血…

模拟超市商品结算系统

要求:全程一个角色(管理员即用户) (1)需要管理员注册与登录 (2)管理员登录之后&#xff0c;可以进行上架新的商品(商品名称和单价) (3)管理员登录之后&#xff0c;也可以下架商品 (4)在节假日有优惠活动,可以对其中的一些商品修改相应的单价(价格提高和价格降低都可以) (5)用户…

如何使用CentOS系统中的Apache服务器提供静态HTTP服务

在CentOS系统中&#xff0c;Apache服务器是一个常用的Web服务器软件&#xff0c;它可以高效地提供静态HTTP服务。以下是在CentOS中使用Apache提供静态HTTP服务的步骤&#xff1a; 1. 安装Apache服务器 首先&#xff0c;您需要确保已安装Apache服务器。可以使用以下命令安装Ap…

关于burpsuite设置HTTP或者SOCKS代理

使用burpsuite给自己的浏览器做代理&#xff0c;抓包重发这些想必大家都清除 流量请求过程&#xff1a; 本机浏览器 -> burpsuite -> 目标服务器 实质还是本机发出的流量 如果我们想让流量由其他代理服务器发出 实现&#xff1a; 本机浏览器 -> burpsuite -> 某…

Blazor中使用impress.js

impress.js是什么&#xff1f; 你想在浏览器中做PPT吗&#xff1f;比如在做某些类似于PPT自动翻页&#xff0c;局部放大之类&#xff0c;炫酷无比。 在Blazor中&#xff0c;几经尝试&#xff0c;用以下方法可以实现。写文不易&#xff0c;请点赞、收藏、关注&#xff0c;并在转…

Python基础知识:整理9 文件的相关操作

1 文件的打开 # open() 函数打开文件 # open(name, mode, encoding) """name: 文件名&#xff08;可以包含文件所在的具体路径&#xff09;mode: 文件打开模式encoding: 可选参数&#xff0c;表示读取文件的编码格式 """ 2 文件的读取 文…

【Linux】命令行设置IP以及网关

除了使用ifconfig 查看和设置网络&#xff0c;linux还有一个好用的命令&#xff1a;ip 以下是一些常见的 ip 命令用法&#xff0c;涵盖了设置 IP 地址、网关、子网掩码和其他网络相关设置的一些情况&#xff1a; 设置 IP 地址和子网掩码&#xff1a;ip address add <ip_add…

Docker基本管理(1)

目录 一、什么是docker&#xff1f; 二、docker的优点 三、docker与虚拟机的区别 四、docker三大组件 六、docker容器操作 七、docker网络 一、什么是docker&#xff1f; Docker是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源。是一种轻量…

【特征工程】 分类变量:使用OrdinalEncoder对序数特征进行编码

Ordinal Encoding&#xff1a;序数特征的编码方法 1. Ordinal Encoding是什么&#xff1f; 什么是序数特征&#xff1f;&#xff1a; 序数特征&#xff08;Ordinal features&#xff09; 是分类特征中包含一定顺序的变量&#xff08;如家属人数、教育程度、财产范围&#xf…

vue面试题集锦

1. 谈一谈对 MVVM 的理解&#xff1f; MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。 Model 层代表数据模型&#xff0c;也可以在 Model 中定义数据修改和操作的业务逻辑; View 代表 UI 组件&#xff0c;它负责将数据模型转化成 UI 展现出来&#xff0c;View 是…

web缓存代理

缓存代理的概述 wed代理的工作机制 缓存网页对象&#xff0c;减少重复请求 web缓存代理作用 1.存储一些之前被访问的&#xff0c;且可能将要被再次访问的静态网络资源对象&#xff0c;使用户可以直接从缓存代理服务器获取资源&#xff0c;从而减少上游原始服务器的负载压力…

分享7款前端CSS动画特效源码(附在线演示)

精选7款前端CSS动画特效源码 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源 CSS飞行的荷包蛋 CSS荷包蛋动画 荷包蛋会向右前方加速飞行 期间还能看到周围的气流匆匆飞过 以下图片只是简单的模型没有具体的动画效果最终动画…

IPv6路由协议---IPv6动态路由(OSPFv3-5)

OSPFv3各链路状态通告类型 4.Inter-Area-Router-LSA区域间路由器(4类LSA) 边界路由器(ABR)产生的第4类LSA,在Area 范围内泛洪,描述了到本AS内其他区域的ASBR路由器信息; 每各Inter-Area-Router-LSA包含一个ASBR路由器信息,LSA中的能力选项(Options)与所描述的ASBR …

满足ITOM需求的网络监控工具

IT 运营管理&#xff08;ITOM&#xff09;可以定义为监督 IT 基础架构的各种物理和虚拟组件的过程;确保其性能、运行状况和可用性;并使它们能够与基础架构的其他组件无缝协作。IT 运营管理&#xff08;ITOM&#xff09;在大型 IT 管理模型中也发挥着积极作用&#xff0c;包括 I…

强化学习求解TSP(四):Qlearning求解旅行商问题TSP(提供Python代码)

一、Qlearning简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于奖励的决策问题。它是一种无模型的学习方法&#xff0c;通过与环境的交互来学习最优策略。Q-learning的核心思想是通过学习一个Q值函数来指导决策&#xff0c;该函数表示在给定状态下采取某个动作所获…

vue配置qiankun及打包上线

项目结构 基座&#xff1a;vue3 子应用A&#xff1a;vue3 子应用B&#xff1a; react 子应用C&#xff1a;vue3vite 项目目录&#xff1a; 配置基座 首先下载qiankun yarn add qiankun # 或者 npm i qiankun -S 所有子应用也要安装&#xff0c;vue-vite项目安装 cnpm ins…

蓝桥杯练习题(三)

&#x1f4d1;前言 本文主要是【算法】——蓝桥杯练习题&#xff08;三&#xff09;的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 …

[C#]winform部署PaddleOCRV3推理模型

【官方框架地址】 https://github.com/PaddlePaddle/PaddleOCR.git 【算法介绍】 PaddleOCR是由百度公司推出的一款开源光学字符识别&#xff08;OCR&#xff09;工具&#xff0c;它基于深度学习框架PaddlePaddle开发。这款工具提供了一整套端到端的文字检测和识别解决方案&a…