echarts实现渐变折线图并添加点击事件

 

 

 折线图点击事件代码:

 let myChart = this.$echarts.init(document.getElementById('trendBoxECharts'))myChart.getZr().on('click', params => {console.log(params)let pointInPixel = [params.offsetX, params.offsetY]if (myChart.containPixel('grid', pointInPixel)) {//点击第几个柱子let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)// 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置// 也可以通过name[xIndex] != undefined,name是x轴的坐标名称来判断是否还是点击的图表里面的内容// x轴数据的索引let xIndex = pointInGrid[0]console.log('当前点击的索引', xIndex)}})

 完整代码如下:

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

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

相关文章

【JAVA】云HIS系统功能菜单知识(一)

一、云HIS特色 云HIS滚动消息栏:质控消息、住院时长、药库结转、患者入院、医嘱停止、新开医嘱、门诊用药不良、出院审核、药品调拨、排班提醒、药品库存、药品过期、药品临期等帮助医生、护士和相关管理人员实时接收院内消息并作出处理。 二、云HIS功能菜单 【预约…

8、gateway使用和原理

一、什么是Spring Cloud Gateway 1、网关简介 网关作为流量的入口,常用的功能包括路由转发,权限校验,限流等。 2、Gateway简介 Spring Cloud Gateway 是Spring Cloud官方推出的第二代网关框架,定位于取代 Netflix Zuul。相比 …

省电液晶驱动IC,VK2C22G,COG片高抗干扰抗噪系列LCD段码驱动芯片,I2C通信接口

型号:VK2C22G DICE(邦定COB)/COG(绑定玻璃用) VK2C22G概述: VK2C22G是一个点阵式存储映射的LCD驱动器,可支持最大176点(44SEGx4COM)的LCD屏。单片机可通过I2C接口配置显示参数和读写显示数据&#…

计算机网络 day7 扫描IP脚本 - 路由器 - ping某网址的过程

目录 network 和 NetworkManager关系: 实验:编写一个扫描脚本,知道本局域网里哪些ip在使用,哪些没有使用? 使用的ip对应的mac地址都要显示出来 计算机程序执行的两种不同方式: shell语言编写扫描脚本 …

C# 通过枚举类型字符串,反射到枚举上

C# 通过枚举类型字符串,反射到枚举上 通过类型字符串,反射出任意类型枚举类型通过反射调用枚举GetTypeByName(EnumName) 为空? 小结 通过类型字符串,反射出任意类型 之前老顾写过一篇博客,通过反射,使用字…

IDEA+java+spring+hibernate+jquery+mysql后台管理系统

IDEA javaspringhibernatejquerymysql后台管理系统 一、系统介绍1.环境配置 二、系统展示1. 管理员登录2.修改密码3.我的内容4.我的操作日志5. 我的登陆日志6. 我的登陆授权7. 内容管理8.标签管理9. 搜索词管理10.分类管理11.分类类型12.标签分类13.用户管理14.部门管理15.角色…

Linux系统编程(信号处理机制)

文章目录 前言一、中断,异常,信号的区别二、信号在Linux中的标识三、信号处理相关函数四、代码实验总结 前言 本篇文章我们来讲解信号的处理机制,信号处理在Linux操作系统中必不可少,这一点值得大家注意,信号又会与中…

golang 日志库zap和日志切割实践

介绍 在许多Go语言项目中,我们需要一个好的日志记录器能够提供下面这些功能: 能够将事件记录到文件中,而不是应用程序控制台。 日志切割-能够根据文件大小、时间或间隔等来切割日志文件。 支持不同的日志级别。例如INFO,DEBUG&a…

深度学习与神经网络

人工智能,机器学习,深度学习,神经网络,emmmm,傻傻分不清楚,这都啥呀,你知道吗?我不知道。你知道吗?我不知道。 来来来,接下来,整硬菜&#xff1a…

『红外图像 数据增强』DDE(Digital Detail Enhancement)算法

DDE处理的细节 分离背景层和细节层:使用特殊的滤波器,将图像分成背景层和细节层。背景层通常包含低频信息,而细节层包含高频信息。 对背景层进行灰度增强:通过对背景层应用适当的灰度增强算法,提高背景层的对比度和视…

轻量级应用服务器开放端口

关于使用浏览器连接自己所写的TCP进程时,由于没有开放端口,而且搜索到对应的操作来进行开放端口,所以在完成开放端口后特意做个笔记,防止忘记。 登录自己所使用的服务器的网站找到控制台 找到轻量级应用服务器 找到所需要开放端口…

【机器学习】分类算法 - KNN算法(K-近邻算法)KNeighborsClassifier

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:零基础快速入门人工智能《机器学习入门到精通》 K-近邻算法 1、什么是K-近邻算法?2、K-近邻算法API3、…

最强自动化框架,Pytest自动化测试-动态切换环境实战(超细整理)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 在开始前&#xf…

LangChain大型语言模型(LLM)应用开发(五):评估

LangChain是一个基于大语言模型(如ChatGPT)用于构建端到端语言模型应用的 Python 框架。它提供了一套工具、组件和接口,可简化创建由大型语言模型 (LLM) 和聊天模型提供支持的应用程序的过程。LangChain 可以轻松管理与语言模型的交互&#x…

ceph应用

资源池 Pool 管理 上面我们已经完成了 Ceph 集群的部署,但是我们如何向 Ceph 中存储数据呢?首先我们需要在 Ceph 中定义一个 Pool 资源池。Pool 是 Ceph 中存储 Object 对象抽象概念。我们可以将其理解为 Ceph 存储上划分的逻辑分区,Pool 由多…

Qt6 Qt Quick UI Prototype学习QML第一篇

Qt6 Qt Quick UI原型学习QML第一篇 开始创建项目Qt Quick UI原型简介.qmlproject文件举例Window平台小例子运行效果QML语法 了解语法 开始创建项目 创建一个具有QML入口点的Qt Quick 2 UI项目。要使用它,您需要设置一个QML运行时环境,例如gmlscene。 仅当…

消息队列——rabbitmq的不同工作模式

目录 Work queues 工作队列模式 Pub/Sub 订阅模式 Routing路由模式 Topics通配符模式 工作模式总结 Work queues 工作队列模式 C1和C2属于竞争关系,一个消息只有一个消费者可以取到。 代码部分只需要用两个消费者进程监听同一个队里即可。 两个消费者呈现竞争关…

安全防御 --- DDOS攻击(01)

DOS攻击(deny of service)--- 拒绝式服务攻击 例:2016年10月21日,美国提供动态DNS服务的DynDNS遭到DDOS攻击,攻击导致许多使用DynDNS服务的网站遭遇访问问题,此事件中,黑客人就是运用了DNS洪水…

golang waitgroup

案例 WaitGroup 可以解决一个 goroutine 等待多个 goroutine 同时结束的场景,这个比较常见的场景就是例如 后端 worker 启动了多个消费者干活,还有爬虫并发爬取数据,多线程下载等等。 我们这里模拟一个 worker 的例子 package mainimport (…

ChatGPT与Claude对比分析

一 简介 1、ChatGPT: 访问地址:https://chat.openai.com/ 由OpenAI研发,2022年11月发布。基于 transformer 结构的大规模语言模型,包含1750亿参数。训练数据集主要是网页文本,聚焦于流畅的对话交互。对话风格友好,回复通顺灵活,富有创造性。存在一定的安全性问题,可…