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

news2024/11/20 15:20:40

单折线图,可以直接监听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.coloradmin.cn/o/1863293.html

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

相关文章

C++ | Leetcode C++题解之第191题位1的个数

题目: 题解: class Solution { public:int hammingWeight(uint32_t n) {int ret 0;while (n) {n & n - 1;ret;}return ret;} };

RabbitMQ实践——搭建多人聊天服务

大纲 用户登录创建聊天室监听Stream(聊天室)发送消息实验登录Tom侧Jerry侧 创建聊天室Jerry侧Tom侧 进入聊天室Jerry侧Tom侧 发送消息Jerry发送消息Jerry侧聊天室Tom侧聊天室 Tom发送消息Jerry侧聊天室Tom侧聊天室 代码工程参考资料 在《RabbitMQ实践——…

LongRAG:增强长上下文大语言模型的检索增强生成

这篇论文的标题是《LongRAG: Enhancing Retrieval-Augmented Generation with Long-context LLMs》,由滑铁卢大学的Ziyan Jiang、Xueguang Ma和Wenhu Chen撰写。论文主要探讨了在传统的检索增强生成(RAG)框架中存在的一些问题,并提…

Linux基础 - 存储结构与管理硬盘

目录 零. 简介 一. 文件系统 Ubuntu 文件系统结构: 路径: 二. 硬盘管理 零. 简介 Linux 文件系统是一种用于组织和存储文件、目录以及相关数据的架构。 常见的 Linux 文件系统有: Ext4(Fourth Extended File System)&#…

数据结构:队列详解 c++信息学奥赛基础知识讲解

目录 一、队列概念 二、队列容器 三、队列操作 四、代码实操 五、队列遍历 六、案例实操 题目描述: 输入格式: 输出格式: 输入样例: 输出样例: 详细代码: 一、队列概念 队列是一种特殊的线性…

了解负载均衡器

现代系统变得越来越复杂,但这种复杂性确保了处理大量的网络流量和请求。 简单来说,负载均衡器的主要思想就像它的名字一样,它跨服务器提供直接的客户端请求。换句话说,负载均衡器是在多台服务器之间分配网络或应用程序流量的系统…

【系统架构设计师】六、信息系统基础知识(定义|分类|企业信息化系统|生命周期|建设原则|开发方法)

目录 一、信息系统的定义 二、信息系统的分类 三、企业使用的信息化系统 四、信息系统的生命周期 五、信息系统建设原则 六、信息系统的开发方法 6.1 结构化方法 6.2 原型法 6.3 构件化开发方法 6.4 面向服务的方法 6.5 面向对象的方法 6.6 敏捷方法 历年真题考情&#x…

AMSR-E/Aqua L1A 原始观测次数,第 3 版

AMSR-E/Aqua L1A Raw Observation Counts, Version 3 简介 改进后的 V003 AMSREL1A 产品对共同登记参数 A1 和 A2 进行了经验修正,并更新了用于修正 AMSR-E 89 GHz 位置信息的参数文件。因此,第三版 AMSREL1A 数据提高了以下方面的精度:纬度…

【个人博客搭建】(26)发布后端webapi项目

1、选择启动的webapi,右击发布 2、选择左下角的“显示所有设置” 在上一页按钮那边是发布文件夹的目录 地址, 现在界面的就是配置的信息, 配置:Debug、Release 目标框架:我们用的net8.0,就是他&#xff…

Golang | Leetcode Golang题解之第191题位1的个数

题目: 题解: func hammingWeight(num uint32) (ones int) {for ; num > 0; num & num - 1 {ones}return }

C语言 | Leetcode C语言题解之第191题位1的个数

题目: 题解: int hammingWeight(uint32_t n) {int ret 0;while (n) {n & n - 1;ret;}return ret; }

S_LOVE多端恋爱小站小程序源码 uniapp多端

S_LOVE多端恋爱小站小程序源码,采用uniapp多端开发框架进行开发,目前已适配H5、微信小程序版本。 源码下载:https://download.csdn.net/download/m0_66047725/89421726 更多资源下载:关注我。

数据库系统体系结构-DBMS的三级模式结构、DBMS的工作方式、模式定义语言、二级映射

一、体系结构的概念 1、大多数DBMS遵循三级模式结构 (1)外模式 (2)概念模式 (3)内模式 2、DBMS的体系结构描述的应该是系统的组成结构及其联系以及系统结构的设计和变化的原则等 3、1978年美国国家标…

在flask中加载mnist模型,并预测图片

一、在tensorflow中新建及保存模型 启动Jupyter Notebook 新建Notebook 生成 mnist_model.h5 模型的代码 import tensorflow as tf from tensorflow.keras.datasets import mnist from tensorflow.keras.models import Sequential from tensorflow.keras.layers import…

【Oracle篇】逻辑备份工具expdp(exp)/impdp(imp)和物理备份工具rman的区别和各自的使用场景总汇(第八篇,总共八篇)

💫《博主介绍》:✨又是一天没白过,我是奈斯,DBA一名✨ 💫《擅长领域》:✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux,也在扩展大数据方向的知识面✌️…

26.4 Django 视图层

1. 视图函数 视图函数是Django框架中用于处理Web请求并返回Web响应的重要组件. 以下是对Django视图函数的详细解释: * 1. 视图函数与URL的映射.为了让Django能够知道哪个URL对应哪个视图函数, 需要在应用的urls.py文件中定义URL模式.使用path或re_path函数来定义URL模式, 并将…

计算机视觉的职业规划

Hi,大家好。我是茶桁。 今天这节课呢,咱们先不着急讲原理,先来讲讲职业规划的话题。 如果想要直接上手企业级的 AI 项目,可以看看咱们的「AI 人工智能企业项目实战」。 趋势和薪资 首先,先来讲讲就业的趋势。其实学…

Python学习笔记20:进阶篇(九)常见标准库使用之sys模块和re模块

前言 本文是根据python官方教程中标准库模块的介绍,自己查询资料并整理,编写代码示例做出的学习笔记。 根据模块知识,一次讲解单个或者多个模块的内容。 教程链接:https://docs.python.org/zh-cn/3/tutorial/index.html 错误输出…

python笔记3

1.通过乘法多次打印,以及字符串相加的合体打印 xzzz yyyy print(xy) print(x*10)#与一个数为打印多少次 2.设置俩个变量,可以通过下面的方法来判断是否一个元素是否在另一个元素中,返回bool值 xzzz yyyy print(xy) print(x*10)#与一个数为打…

算法学习笔记——单双链表及其反转—堆栈诠释

单双链表及其反转——堆栈诠释 按值传递 int、long、byte、short、char、float、double、boolean和String 都是按值传递 概念:在方法被调用时,实参通过形参把它的内容副本传入方法内部,此时形参接收到的内容是实参值的一个拷贝,…