当前位置: 首页 > 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

http://www.lryc.cn/news/279980.html

相关文章:

  • Java IO学习和总结(超详细)
  • mysql忘记root密码后怎么重置
  • 计算机图形学作业:三维线段的图形变换
  • Linux mren命令教程:批量重命名文件(附实际操作案例和注意事项)
  • LLVM系列(1): 在微软Visual Studio下编译LLVM
  • 分布式系统的三字真经CAP
  • 大模型背景下计算机视觉年终思考小结(一)
  • Modbus协议学习第一篇之基础概念
  • gem5学习(12):理解gem5 统计信息和输出——Understanding gem5 statistics and output
  • 索引的概述和使用
  • 力扣210. 课程表 II
  • [Docker] Mac M1系列芯片上完美运行Docker
  • CompletableFuture、ListenableFuture高级用列
  • 什么是云服务器,阿里云优势如何?
  • HCIA-Datacom题库(自己整理分类的)_15_VRP平台多选【9道题】
  • html5基础入门
  • JVM工作原理与实战(十五):运行时数据区-程序计数器
  • 计算机体系结构----存储系统
  • 华为OD机试2024年最新题库(Python)
  • 【打卡】牛客网:BM84 最长公共前缀
  • 我在Vscode学OpenCV 图像处理三(图像梯度--边缘检测【图像梯度、Sobel 算子、 Scharr 算子、 Laplacian 算子、Canny 边缘检测】)
  • 2023年全国职业院校技能大赛软件测试赛题—单元测试卷⑤
  • seata分布式事务(与dubbo集成)
  • Leetcod面试经典150题刷题记录 —— 数学篇
  • x-cmd pkg | csview - 美观且高性能的 csv 数据查看工具
  • 前端八股文(性能优化篇)
  • .Net Core项目在linux部署实战 1.sdk下载 2.环境变量配置/ect/profile 3.运行
  • Python 基于Open3D的点云均匀下采样算法
  • 【MySQL】本地创建MySQL数据库详解
  • 18、golang时间管理