echarts,点击事件,点击空白处与柱状图

echarts,点击事件

问题:

折线图的情况
只有点击到折线节点的时候才能拿到返回数据或者进行下一步操作!

期望在鼠标随便点击的情况下,可以自动找到最近节点的数据,做一些事情,而不是去费力费眼的去找那个小小的折线节点点击

重要

要使用节流

import _ from 'lodash';
_.debounce()

清除点击事件(重要)

 myChart.off('click');myChart.getZr().off('click');

点击图表柱子或折线点

    myChart.off('click');myChart.on('click',_.debounce(function (params) {console.log('事件echartData', params, params.data);}, 300));

点击空白处

getOption

     myChart.getZr().off('click');myChart.getZr().on('click',_.debounce(function (params) {let pointInPixel = [params.offsetX, params.offsetY];if (myChart.containPixel('grid', pointInPixel)) {let pointInGrid = myChart.convertFromPixel({seriesIndex: 0,},pointInPixel);let xIndex = pointInGrid[0]; //点击的索引var option = myChart.getOption();let seriesName = option.series[xIndex].name;console.log('事件echartDatagetZr', params, xIndex,seriesName, pointInGrid);}}, 1000));

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

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

相关文章

性能工具之 JMeter 自定义 Java Sampler 支持国密 SM2 算法

文章目录 一、前言二、加密接口1、什么是SM22、被测接口加密逻辑 三、准备工作四、JMeter 扩展实现步骤1:准备开发环境步骤2:了解实现方法步骤3:runTest 方法步骤4:getDefaultParameters 方法步骤5:setupTest 方法 五、…

HTX迪拜之夜盛大举行:共筑开放、互联的Web3生态系统

4月18日,由HTX、HTX DAO主办,去中心化AI云游戏协议DeepLink赞助的HTX迪拜之夜主题活动“领航者相聚,引领币圈新风向”在迪拜盛大举行。通过在全球第二大加密中心-迪拜的频繁亮相,HTX正积极塑造自己作为行业领导者的形象&#xff0…

Mysql学习一

目录 1.启动数据库: 2.命令行连接到MySQL(winr输入cmd) 3.MySQL的三重结构: 4.SQL语句分类: 1.启动数据库: winr——输入services.msc进入本地服务 2.命令行连接到MySQL(winr输入cmd&#x…

学习前端第二十六天(对象 —— 原始值转换、原始类型的方法、数字类型)

一、对象 —— 原始值转换 目的:对象是如何转换为原始值的,以及如何对其进行自定义 obj[Symbol.toPrimitive] function(hint) { // 这里是将此对象转换为原始值的代码 // 它必须返回一个原始值 // hint "string"、"number" 或…

ABC350A-F题解

ABC350 A-E题解 A题目AC Code(CPP):AC Code(Python): B题目AC Code(CPP):AC Code(Python): C题目AC Code(CPP)&#xff1a…

新加坡VPS服务器Linux系统的安全性如何增强

增强新加坡VPS服务器上Linux系统的安全性是至关重要的,以下是一些常见的方法和建议: 更新系统和软件: 定期更新操作系统和安装的软件包,确保系统中的所有组件都是最新版本,以修补已知的漏洞和安全问题。 配置防火墙&am…

109. Python的turtle库简介

109. Python的turtle库简介 【目录】 文章目录 109. Python的turtle库简介1. 什么是turtle库?2. 用turtle库绘制一个爱心图案3. 库的导入方法3.1 直接导入整个库3.2 从库中导入特定的函数或类3.3 导入库中的所有内容3.4 为导入的库设置别名3.5 为导入的函数或变量设…

阿里巴巴Java开发规范——编程规约(3)

# 阿里巴巴Java开发规范——编程规约(3) 编程规约 (四) OOP规约 1.【强制】构造方法里面禁止加入任何业务逻辑,如果有初始化逻辑,请放在 init 方法中 这条编程规范的目的是为了保持代码的清晰性、可读性…

HTTP协议中的请求方法及其在前端的应用

简介: HTTP(Hypertext Transfer Protocol)是用于在网络上传输超文本的协议,定义了多种请求方法,用于指定客户端对服务器资源的操作方式。。 1. GET请求 GET请求用于从服务器获取资源,是最常见的请求方法之…

stm32开发三、单片机关键字extern

单片机关键字extern 1 定义 extern 用于指示变量或函数是在其他文件中定义的,但在当前文件中也要使用它。 2 使用场景 当你想在一个文件中使用另一个文件中定义的全局变量或函数时,你可以使用 extern。 它只是声明,不分配内存或分配存储空…

【C++提高】算法

算法 一、遍历算法1. for_each2. transform 二、查找算法1. find2. find_if3. adjacent_find4. binary_search5. count6. count_if 三、排序算法1. sort2. random_shuffle3. merge4. reverse 四、拷贝和替换算法1. copy2. replace3. replace_if4. swap 五、算术生成算法1. accu…

AOP

代理模式 提出问题 现有缺陷 假设我们有一个计算类,里面有加减乘除四个方法,现在我们要为这四个方法添加日志,即在方法执行的前后分别输出一句话,这时我们会发现如下缺陷: 1.对核心业务有干扰。核心业务是加减乘除…

货拉拉0-1数据指标体系构建与应用

目录 一、背景 二、指标体系搭建 2.1 指标设计 2.2 指标体系搭建 2.3 指标维度拆解 三、指标标准化建设 四、指标元数据管理 五、指标应用&未来规划 原文大佬介绍的这篇指标体系构建有借鉴意义,现摘抄下来用作沉淀学习。如有侵权请告知~ 一、背景 指标…

汽车摄像头匿名化处理解决方案,保护信息的安全性和隐私性

随着智能交通和自动驾驶技术的迅猛发展,汽车摄像头已成为现代汽车不可或缺的一部分,摄像头所捕捉的图像信息也引发了日益严峻的信息安全问题。如何在充分利用摄像头功能的同时,保障个人隐私和信息安全,已成为企业亟待解决的问题。…

IP地址定位技术引发的个人隐私保护问题

IP地址定位技术对互联网的影响深远且多面,它不仅改变了网络管理与优化的方式,还极大地推动了在线广告营销、电子商务、地理信息服务等多个领域的发展。然而,与此同时,它也引发了一系列关于个人隐私保护的问题。 首先,I…

vue的学习之用vue写一个hello,vue

根据以下步骤下载vue.js 介绍 — Vue.js 创建一个damo.html &#xff0c;引入vue.js即可 <body><div id"app">{{ message }}</div><!-- Vue --><!-- 开发环境版本&#xff0c;包含了有帮助的命令行警告 --><script src"js/vu…

清华新突破,360°REA重塑多智能体系统:全方位提升复杂任务表现

引言&#xff1a;多智能体系统的新篇章——360REA框架 在多智能体系统的研究领域&#xff0c;最新的进展揭示了一种全新的框架——360REA&#xff08;Reusable Experience Accumulation with 360 Assessment&#xff09;。这一框架的提出&#xff0c;不仅是对现有系统的一次重大…

Git提交/拉取的顺序

Git提交代码的流程 1、git add . 2、git commit -m “commit info” 3、git pull origin master 4、git push origin master 第一步表示将本地所有改动代码添加到暂存区 第二步表示将待提交内容和描述信息放到本次提交中 第三步表示将远程代码更新到本地&#xff08;用于解决冲…

P8739 [蓝桥杯 2020 国 C] 重复字符串

[蓝桥杯 2020 国 C] 重复字符串 题目描述 如果一个字符串 S S S 恰好可以由某个字符串重复 K K K 次得到&#xff0c;我们就称 S S S 是 K K K 次重复字符串。例如 abcabcabc 可以看作是 abc 重复 3 3 3 次得到&#xff0c;所以 abcabcabc 是 3 3 3 次重复字符串。 同…

nodejs 版本管理

nvm介绍 管理windows系统下nodejs的多个版本&#xff0c;包括安装、卸载、切换等功能。 安装nvm 在github官网下载nvm的安装包&#xff0c;下载完成之后安装即可。 nvm的基本用法 查看当前nodejs的版本 使用nvm list查看以安装的版本以及当前版本&#xff0c;前面带有*的…