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

echarts鼠标事件

  1. 鼠标事件支持方法

ECharts 支持常规的鼠标事件类型,包括 ‘click’、 ‘dblclick’、 ‘mousedown’、 ‘mousemove’、 ‘mouseup’、 ‘mouseover’、 ‘mouseout’、 ‘globalout’、 ‘contextmenu’ 事件

  1. 简单实例
// 基于准备好的dom,初始化ECharts实例
let myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据
var option = {xAxis: {data: ['淘宝', '京东', 'PDD', 'facexxx', 'baidu', '360']},yAxis: {},series: [{name: '访问量',type: 'bar',data: [50, 27, 76, 30, 12, 10]}]
};
myChart.setOption(option);
// 处理点击事件 (此处监听 click 鼠标单击事件)
myChart.on('click', function(params) {console.log('params',params)
});
  1. 鼠标事件参数详细

type EventParams = {
// 当前点击的图形元素所属的组件名称,
// 其值如 ‘series’、‘markLine’、‘markPoint’、‘timeLine’ 等。
componentType: string;
// 系列类型。值可能为:‘line’、‘bar’、‘pie’ 等。当 componentType 为 ‘series’ 时有意义。
seriesType: string;
// 系列在传入的 option.series 中的 index。当 componentType 为 ‘series’ 时有意义。
seriesIndex: number;
// 系列名称。当 componentType 为 ‘series’ 时有意义。
seriesName: string;
// 数据名,类目名
name: string;
// 数据在传入的 data 数组中的 index
dataIndex: number;
// 传入的原始数据项
data: Object;
// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
// dataType 的值会是 ‘node’ 或者 ‘edge’,表示当前点击在 node 还是 edge 上。
// 其他大部分图表中只有一种 data,dataType 无意义。
dataType: string;
// 传入的数据值
value: number | Array;
// 数据图形的颜色。当 componentType 为 ‘series’ 时有意义。
color: string;
};

  1. 区分鼠标点击位置

params.componentType (具体参照上面图例)

  1. 如何只对指定的组件的图形元素的触发点击回调

chart.on(eventName, query, handler);
使用 query 来指定图形元素

  1. query详解

query类型 string || Object
string 表示组件类型
Object 表示属性对象:

${mainType}Index: number // 组件 index
${mainType}Name: string // 组件 name
${mainType}Id: string // 组件 id
dataIndex: number // 数据项 index
name: string // 数据项 name
dataType: string // 数据项 type,如关系图中的 ‘node’, ‘edge’
element: string // 自定义系列中的 el 的 name
}

  1. 相关链接
    链接: echarts事件与行为
    在这里插入图片描述

相关文章:

echarts鼠标事件

鼠标事件支持方法 ECharts 支持常规的鼠标事件类型,包括 ‘click’、 ‘dblclick’、 ‘mousedown’、 ‘mousemove’、 ‘mouseup’、 ‘mouseover’、 ‘mouseout’、 ‘globalout’、 ‘contextmenu’ 事件 简单实例 // 基于准备好的dom,初始化EChar…...

【北京迅为】《iTOP-3588开发板网络环境配置手册》第2章 电脑、开发板直连交换机或路由器

RK3588是一款低功耗、高性能的处理器,适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用,RK3588支持8K视频编解码,内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…...

6.5 共享数据

本节介绍Android的四大组件之一ContentProvider的基本概念和常见用法:首先说明如何使用内容提供器封装内部数据的外部访问接口,然后阐述如何使用内容解析器通过外部接口操作内部数据,最后叙述如何利用内容解析器读写联系人信息,以…...

SpringBoot之Session新增、删除、获取配置与使用

SpringBoot之Session新增、删除、获取配置与使用 文章目录 SpringBoot之Session新增、删除、获取配置与使用1. SpringBoot版本2. 定义增删查Session的类3. 定义Session的监听器4. 使用 自定义根据sessionId进行session的新增、删除、获取操作 1. SpringBoot版本 <parent>…...

Hive UDF 札记

低版本的udf就不说了&#xff0c;太老了&#xff0c;说现在主流的。 1&#xff1a;initialize 方法的进一步理解&#xff1a; 在Apache Hive中&#xff0c;用户自定义函数&#xff08;UDF&#xff09;的initialize方法是一个可选的方法&#xff0c;它属于Hive UDF的生命周期…...

npm已经配置淘宝源仍然无法使用

使用npm命令安装Taro框架的时候&#xff0c;尽管已经设置淘宝源但是仍然无法下载&#xff0c;提示错误 >npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/cnpm failed, reason: certificate h…...

Qt5转Qt6笔记

背景 现在的主程序和扩展的dll库都是qt5环境下编译发布的。但是想以后用qt6。所以考虑是否能够在qt5中兼容qt6的动态链接库进行加载。于是...就开始吧 开始 2024-02-23 安装好qt6后&#xff0c;在vs2019中需要新增qt6版本的安装路径。目录在&#xff1a;扩展->QT VS Tools…...

FPGA高端项目:FPGA基于GS2971的SDI视频接收转HDMI输出,提供3套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI图像缩放应用本方案的SDI纯verilog图像缩放视频拼接应用本方案的SDI HLS图像缩放视频拼接应用本方案的SDI视频编码动态字符叠加输出应用本方案的SDI视频编码多路视频融合视频叠加应用本方案的SDI视频…...

java 锁

在Java中,有多种类型的锁,用于处理多线程编程中的同步和并发问题。以下是Java中常见的锁类型:互斥同步锁(悲观锁) :Synchronized : Java中最基本的同步机制,它提供了一种简单且透明的方式来同步代码块或方法。Synchronized是基于进入和退出监视器对象(monitor)来实现方…...

该类型的 CollectionView 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改。

报错原因 在异步的时候&#xff0c;调用了其他异步&#xff0c;导致UI工程线程该变了数据源&#xff0c;所以只需要将线程变为原始的UI线程。 解决方案 await QueuedTask.Run(() > { Application.Current.Dispatcher.Invoke(() >{报错的代码&#xff0c;…...

Mybatis学习笔记:延迟加载

本文是自己的学习笔记&#xff0c;主要参考以下资料 - 马士兵教育 1、延迟加载2、开启延迟加载2.1、配置信息2.2、查询语法2.2.1、前置条件2.2.2、xml语法2.2.3、总结 1、延迟加载 延迟加载是用于优化一对多或者多对多的查询。 比如员工表和部门表&#xff0c;员工表left jo…...

蓝桥杯题练习:平地起高楼

题目要求 function convertToTree(regions, rootId "0") {// TODO: 在这里写入具体的实现逻辑// 将平铺的结构转化为树状结构&#xff0c;并将 rootId 下的所有子节点数组返回// 如果不存在 rootId 下的子节点&#xff0c;则返回一个空数组}module.exports convert…...

我愿意启动价值流

如前文Flow近佛&#xff0c;人生就是一个价值流。让价值流动起来&#xff0c;Get Things Flow是我们的方法论。然而&#xff0c;还欠上帝的一脚&#xff0c;让价值流启动起来。这个启动&#xff0c;就是我愿意。 我愿意的反面是被烦恼包裹、裹挟、包围、无法摆脱。乐莹离家前就…...

排序算法1:冒泡排序、快速排序、插入排序

排序算法&#xff1a;交换类排序&#xff0c;插入类排序、选择类排序、归并类排序 交换类排序&#xff1a;冒泡排序、快速排序 一、冒泡排序 #include <stdio.h> #include <stdlib.h> #include <time.h> typedef int ElemType; typedef struct{ElemType *e…...

Vant Weapp

Vant Weapp - 轻量、可靠的小程序 UI 组件库 van-radio name 是一个字符串&#xff0c;无法传对象的处理 以及 mpx 多层嵌套 for 循环处理 <viewwx:for"{{questionList}}"wx:for-item"question" // item 重命名wx:for-index"questionIndex"…...

无人机精准定位技术,GPS差分技术基础,RTK原理技术详解

差分GPS的基本原理 差分GPS&#xff08;Differential GPS&#xff0c;简称DGPS&#xff09;的基本原理是利用一个或多个已知精确坐标的基准站&#xff0c;与用户&#xff08;移动站&#xff09;同时接收相同的GPS卫星信号。由于GPS定位时会受到诸如卫星星历误差、卫星钟差、大…...

java面试:elasticsearch

文章目录 引言I 索引1.1 覆盖索引1.2 elasticsearch 面试题1.3 Google的搜索本质II elasticsearch的倒叙索引2.1 发展历史2.2 倒排索引2.3 倒排序的搜索流程III elasticsearch的基础概念IV 创建索引库4.1 步骤4.2 mapping映射4.3 ik分词器...

GO语言学习笔记(与Java的比较学习)(三)

函数 按值传递&#xff08;call by value&#xff09; 按引用传递&#xff08;call by reference&#xff09; Go 默认使用按值传递来传递参数&#xff0c;也就是传递参数的副本。函数接收参数副本之后&#xff0c;在使用变量的过程中可能对副本的值进行更改&#xff0c;但不…...

如何用Python3自撰一个简单的后端框架

不使用任何现有的后端框架来创建一个Python 3的后端框架是一个相当复杂的任务,因为它涉及到许多Web开发的基础知识,比如HTTP协议处理、路由、中间件、请求和响应处理等。然而,我们可以从最基本的概念开始,逐步构建一个简单的后端框架。 以下是一个非常基础的指南,用于创建…...

使用pyannote-audio实现声纹分割聚类

使用pyannote-audio实现声纹分割聚类 # GitHub地址 https://github.com/MasonYyp/audio1 简单介绍 pyannote.audio是用Python编写的用于声纹分割聚类的开源工具包。在PyTorch机器学习基础上&#xff0c;不仅可以借助性能优越的预训练模型和管道实现声纹分割聚类&#xff0c;还…...

拆解一个经典数电密码锁:从555脉冲到74LS190计数,再到7485比较的完整信号流分析

经典数字密码锁系统全链路信号解析&#xff1a;从时钟生成到密码比对的工程思维训练 在电子技术快速迭代的今天&#xff0c;传统数字电路设计依然是理解计算机底层逻辑的必修课。这个由555定时器、74LS190计数器和7485比较器构建的密码锁系统&#xff0c;堪称数字电路教学的&q…...

显卡驱动彻底清理终极指南:Display Driver Uninstaller (DDU) 完全教程

显卡驱动彻底清理终极指南&#xff1a;Display Driver Uninstaller (DDU) 完全教程 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-driv…...

AI手势识别极速CPU版:无需GPU,上传图片秒出彩虹骨骼图

AI手势识别极速CPU版&#xff1a;无需GPU&#xff0c;上传图片秒出彩虹骨骼图 1. 项目背景与核心价值 手势识别技术正在改变我们与数字世界的交互方式。从智能家居控制到虚拟现实操作&#xff0c;再到无障碍交互设计&#xff0c;这项技术展现出广阔的应用前景。然而&#xff…...

Hive 常用函数详细总结

Hive 常用函数详细总结 本文汇总了 Hive 开发与面试中最常用、最实用的内置函数&#xff0c;每个函数均附有语法说明和代码示例。内容涵盖&#xff1a;字符串处理、日期时间、条件判断、聚合统计、开窗分析、集合操作、类型转换、JSON 解析等。 目录 一、字符串函数 concat / …...

龙泉驿全屋智能选哪家?诺亚家总部直营+1小时服务圈,比本地店省30%

​在成都&#xff0c;说到“东进”和宜居&#xff0c;龙泉驿绝对是热门选项。这里的业主&#xff0c;多是追求生活品质的年轻家庭和改善型住户。随着装修季的到来&#xff0c;“全屋智能”几乎成了龙泉驿新家的标配。但问题也来了&#xff1a;市场品牌眼花缭乱&#xff0c;本地…...

Linux运维实战:手把手教你用fdisk和mount命令挂载移动硬盘(含NTFS格式报错解决)

Linux运维实战&#xff1a;移动硬盘挂载全流程与NTFS兼容方案深度解析 凌晨三点的机房警报声格外刺耳&#xff0c;服务器日志即将撑爆磁盘空间。你抓起手边的移动硬盘准备紧急备份&#xff0c;却在执行mount命令时看到刺眼的"wrong fs type"报错——这种场景对Linux运…...

香瓜树莓派RP2350之USB虚拟串口驱动开发实战

1. 硬件准备与环境搭建 第一次接触树莓派RP2350开发板时&#xff0c;我被它小巧的体积和强大的功能惊艳到了。这块板子虽然只有信用卡大小&#xff0c;但内置双核ARM Cortex-M0处理器&#xff0c;主频高达133MHz&#xff0c;特别适合用来做嵌入式开发。要实现USB虚拟串口功能&…...

Kettle实战避坑指南:从部署到调优的20个关键场景解析

1. 环境部署避坑指南 第一次在Linux上部署Kettle时&#xff0c;我踩了不少坑。记得当时花了两天时间才让一个简单的数据转换任务跑起来&#xff0c;现在回想起来都是血泪史。这里分享几个关键场景的解决方案&#xff0c;帮你少走弯路。 1.1 Windows到Linux的迁移陷阱 很多人习惯…...

从零构建DeepMD-kit力场:实战指南与避坑手册

1. 初识DeepMD-kit&#xff1a;为什么选择神经网络力场 第一次接触DeepMD-kit时&#xff0c;我和大多数计算材料学研究者一样&#xff0c;被传统分子动力学模拟的精度和效率问题困扰多年。传统力场要么精度不足&#xff08;如经典力场&#xff09;&#xff0c;要么计算成本过高…...

从哈勃到韦伯:J2000坐标系在太空望远镜观测中的关键作用与实战案例

从哈勃到韦伯&#xff1a;J2000坐标系在太空望远镜观测中的关键作用与实战案例 当哈勃太空望远镜在1990年发射升空时&#xff0c;工程师们面临着一个看似简单却极其关键的问题&#xff1a;如何让这个造价15亿美元的"太空之眼"精确指向数十亿光年外的目标&#xff1f;…...