echarts 折线图柱状图增加点击事件

单折线图,可以直接监听click事件(只有点击到折线才会触发)

this.chart.on('click', () => {console.log('点击===,.s')})

但很多时候,我们是要求点击折线图任意位置触发点击事件
而且要注意隐藏折线的操作按钮
在这里插入图片描述

this.chart.getZr().on('click', params => {const pointInPixel = [params.offsetX, params.offsetY]// 判断给定的点是否在指定的坐标系if (this.chart.containPixel('grid', pointInPixel)) {// 获取点击位置对应的x轴数据的索引值const xIndex = this.chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]const option = this.chart.getOption() // 获取当前内容if (option.xAxis[0].data[xIndex]) {// 方法}}})

用这个方法可以获取到点击位置的具体数据
上方的隐藏折线是按钮在坐标轴之外,获取到的option.xAxis[0].data[xIndex]为空,也可以通过判断规避

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

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

相关文章

MySQL之复制(十一)

复制 复制的问题和解决方案 数据损坏或丢失的错误 当一个二进制日志损坏时,能恢复多少数据取决于损坏的类型,有几种比较常见的类型: 1.数据改变,但事件仍是有效的SQL 不幸的是,MySQL甚至无法察觉这种损坏。因此最好还是经常检查…

Java核心知识(一):JVM

JVM 前言 文本源自微博客 (www.microblog.store),且已获授权. 一、线程 1.1 基本概念 JVM是可运行java代码的假象计算机,包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收、堆和一个存储方法域。JVM是运行在操作系统之上的,与硬件没有直接的交互。 1.2 运…

Stateflow快速入门系列(二):通过使用状态和转移动作来定义图行为

状态动作和转移动作是您分别在状态内部或转移上编写的指令,用于定义 Stateflow 图在仿真期间的行为。例如,下图中的动作定义了一个以试验方式验证 Collatz 猜想实例的状态机。对于给定的数值输入 ,该图通过迭代以下规则来计算冰雹序列 &…

Android10 Settings系列(六)Settings中toolbar 的基本流程,和Activity如何关联,这可能是比较详细的分析

一、前言 写在前面:一个快捷栏,音量浮窗快捷进入设置界面,点击左上角返回键拉起设置首页问题引发的思考和解决方法 事情的起因是测试报了一个问题。在Android9的一个设备在点击音量键时,在弹出的弹框中,点击设置图标快速进入音量设置中,点击左上角返回按钮是,退出当前界…

使用宝塔安装Nginx,使用Nginx代理本地项目出现PC端使用移动端样式导致页面错乱

使用宝塔安装Nginx,使用Nginx代理本地项目出现PC端使用移动端样式导致页面错乱 解决方案 把 /www/server/nginx/conf/proxy.conf 里的 proxy_cache cache_one; 注释掉 proxy_temp_path /www/server/nginx/proxy_temp_dir; proxy_cache_path /www/server/nginx/pro…

Unity3D 拖拽赋值组件与通过Find赋值组件的优点与缺点详解

Unity3D是一款广泛应用于游戏开发的跨平台游戏引擎,它提供了丰富的功能和工具,方便开发者创建各种类型的游戏。在Unity3D开发中,我们经常需要对游戏对象的组件进行操作和赋值。拖拽赋值组件和通过Find赋值组件是常用的两种方式,它…

如何在Microsoft Edge中安装扩展:逐步指南

引言 Microsoft Edge浏览器是一款现代化的网络浏览器,提供了丰富的功能和定制选项,其中之一就是通过安装扩展来增强浏览器的功能。扩展可以帮助用户实现个性化浏览体验,从广告拦截到语言翻译,应有尽有。本文将详细介绍如何在Edge…

ChatGPT 桌面客户端正式发布

适用于 macOS 的 ChatGPT 客户端现已可供所有用户下载使用[1]。 使用 Option Space 快捷键可以即可访问 ChatGPT,可以对话电子邮件,选中文字、图片、和屏幕上的任何内容!

Oracle Sequence使用总结

Oracle Sequence使用总结如下: 一、定义与特点 Oracle Sequence是Oracle数据库中用于生成唯一数值的数据库对象。它常被用于为表中的记录自动产生唯一序号,如主键值,以标识记录的唯一性。其主要特点包括: 由用户创建并可以被多…

避免新能源发电乙级资质申请中的常见错误

误解资质标准:确保完全理解并准确解读最新的资质申请标准和要求,避免因标准解读错误导致的资料准备不全或不符合要求。 资料不完整或不准确:在准备申请材料时,务必保证所有文件的完整性、真实性和准确性。错误、遗漏或虚假信息都…

关于P1077 [NOIP2012 普及组] 摆花和P1757 通天之分组背包的思考

P1077 [NOIP2012 普及组] 摆花 为什么以下这些代码都对&#xff1f; 二维&#xff0c;第二层循环升序 #include <bits/stdc.h> using namespace std; int n, m, a[102], ans, dp[102][102]; //dp[i][j]表示前i种花&#xff0c;摆放j盆的方案数 int main() {scanf(&qu…

【安全审核】音视频审核开通以及计费相关

融云控制台音视频审核入口&#xff1a;音视频审核 1 音视频审核文档&#xff1a;融云开发者文档 1 提示&#xff1a; 开发环境&#xff1a; 免费体验 7 天&#xff08;含 21 万分钟音频流和 420 万张视频审核用量&#xff09;&#xff0c;免费额度用尽后&#xff0c;将关停服务…

FineReport聚合报表与操作

一、报表类型 模板设计是 FineReport 学习过程中的主要难题所在&#xff0c;FineReport 模板设计主要包括普通报表、聚合报表、决策报表三种设计类型。 报表类型简介- FineReport帮助文档 - 全面的报表使用教程和学习资料 二、聚合报表 2-1 介绍 聚合报表指一个报表中包含多个…

运行ChatGLM大模型时,遇到的各种报错信息及解决方法

①IMPORTANT: You are using gradio version 3.49.0, however version 4.29.0 is available, please upgrade 原因分析&#xff1a; 因为使用的gradio版本过高&#xff0c;使用较低版本。 pip install gradio3.49.0 会有提示IMPORTANT: You are using gradio version 3.49.…

【SQL】MySQL ⽇志⽂件分类以及作用

MySQL 中常见的日志文件主要有以下几种&#xff0c;它们记录了不同层次和类型的数据库操作和事件&#xff0c;对于数据库的管理、故障排查以及性能优化都非常重要&#xff1a; 1. 错误日志&#xff08;Error Log&#xff09; 作用&#xff1a;记录 MySQL 服务器启动和运行过程…

面试神器!AI大模型快速上手,轻松拿下高薪工作!

AI大模型面试秘籍分享 在的职业发展道路上&#xff0c;无论是面临跳槽面试的挑战、寻求升职加薪的机会&#xff0c;还是面对职业发展的困境&#xff0c;掌握AI大模型的技术栈都将成为你的一大助力。为此&#xff0c;我们精心整理了一套涵盖AI大模型所有技术栈的快速学习方法和…

华为HCIP Datacom H12-821 卷15

1.判断题 OSPF 路由协议中, asbr-summary 命令可以跟 not-advertise 参数,该参数的意义时 不通告聚合路由 A、对 B、错 正确答案: A 解析: not-advertise 设置不发布聚合路由。如果不指定该参数则将通告聚合路由。 2.判断题 ASBR 边界路由器可以是内部路由器 R, 或者是 …

VisualStudio2019受支持的.NET Core

1.VS Studio2019受支持的.NET Core&#xff1f; 适用于 Visual Studio 的 .NET SDK 下载 (microsoft.com)

《Redis设计与实现》阅读总结-2

第 7 章 压缩列表 1. 概念&#xff1a; 压缩列表是列表键和哈希键的底层实现之一。当一个列表键只包含少量列表项&#xff0c;并且每个列表项是小整数值或长度比较短的字符串&#xff0c;那么Redis就会使用压缩类别来做列表键的底层实现。哈希键里面包含的所有键和值都是最小…

B端页面:日志管理页面,简洁实用的设计法门

B端日志管理是指在企业级后台系统中对系统操作日志进行记录、查看和管理的功能。 它的作用主要有以下几点&#xff1a; 1. 安全审计&#xff1a;通过记录用户的操作日志&#xff0c;可以对系统的安全性进行审计和监控&#xff0c;及时发现异常操作和安全漏洞。 2. 故障排查&a…