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

news2024/12/27 15:28:05

 

 

 折线图点击事件代码:

 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.coloradmin.cn/o/771077.html

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

相关文章

云迁移第二波热潮来袭,你准备好了吗?

最近,云迁移再次被频繁提及,企业对云迁移的需求量有回升趋势,究其根本,主要有以下原因: 企业数字化进程加速,本地上云需求强劲 根据《2021中国企业上云指数洞察报告》,我国实体经济上云渗透率…

vue 当新增样式无法生效的情况下如何处理

使用scoped属性时&#xff0c;会遇到样式问题。需要使用样式穿透解决 <style lang"scss" scoped> </style> 可以使用以下方法 &#xff1a;deep css 使用 >>> less 使用 /deep/ scss 使用 ::v-deep 代码写法如下: .a :deep(.b) { } .…

Word文档突然无法打开?如何修复损坏文档?

在工作学习中&#xff0c;通常会遇到这种情况&#xff0c;我们正在编辑Word文件&#xff0c;电脑忽然断电关机&#xff0c;或者死机需要重启。当电脑重启以后&#xff0c;辛辛苦苦编辑很久的Word文件却忽然打不开了&#xff01;一直提示文件错误&#xff0c;如何解决Word无法打…

第五章运输层

1.运输层概述 之前课程所介绍的计算机网络体系结构中的物理层、数据链路层以及网络层它们共同解决了将主机通过异构网络互联起来所面临的问题&#xff0c;实现了主机到主机的通信。 但实际上在计算机网络中进行通信的真正实体是位于通信两端主机中的进程。 如何为运行在不同主…

CS 144 Lab Two -- TCPReceiver

CS 144 Lab Two -- TCPReceiver TCPReceiver 简述索引转换TCPReceiver 实现 测试 对应课程视频: 【计算机网络】 斯坦福大学CS144课程 Lab Two 对应的PDF: Lab Checkpoint 2: the TCP receiver TCPReceiver 简述 在 Lab2&#xff0c;我们将实现一个 TCPReceiver&#xff0c;用…

AI读心术:情感分析和数据标注的奥秘

情感分析也被称为情感分类&#xff0c;意图挖掘&#xff1b;是让机器去辨别和理解人类的情感语言文本的技术。互联网技术发展至今&#xff0c;人人都和手机形影不离&#xff0c;任何消费行为、生活休闲、美食评论、旅行决策都可以通过网络的连接让信息共享和公开。商家也利用这…

C++第四讲

思维导图 仿照string类&#xff0c;实现myString类 /* ---------------------------------author&#xff1a;YoungZorncreated on 2023/7/19 19:20.--------------------------------- */ #include<iostream> #include<cstring>using namespace std;class myStri…

每天一点Python——day58

#第五十八天 集合间的关系&#xff1a; 类似于数学中学到的集合一样&#xff0c;关系差不多&#xff0c;譬如相等&#xff0c;子集&#xff0c;交集 如图所示&#xff1a;#①两个集合是否相等&#xff1a;运用运算符【等号】或者运算符&#xff01;【不等号】进行判断 #例&…

如何生成一个漂亮的allure测试报告

前言 今天给大伙展示一下如何生成一个漂亮的allure测试报告&#xff0c;同时呢希望能帮助到大家。 定制化后的allure测试报告效果展示 如何定制化输出锦上添花的allure测试报告 使用前&#xff0c;先导入allure模块。 import allure 使用前&#xff0c;先熟悉运行测试用例…

【C++】STL---vector基本用法介绍

个人主页&#xff1a;平行线也会相交&#x1f4aa; 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【C之路】&#x1f48c; 本专栏旨在记录C的学习路线&#xff0c;望对大家有所帮助&#x1f647;‍ 希望我们一起努力、成长&…

异步任务——CompletabelFuture

本专栏学习内容又是来自尚硅谷周阳老师的视频 有兴趣的小伙伴可以点击视频地址观看 在学习CompletableFuture之前&#xff0c;必须要先了解一下Future Future 概念 Future接口&#xff08;FutureTask实现类&#xff09;定义了操作异步任务执行的一些方法&#xff0c;如获取异…

编写测试用例的方法,这个是真的很好用

大家测试过程中经常用的等价类划分、边界值分析、场景法等&#xff0c;并不能覆盖所有的需求&#xff0c;我们之前讲过很少用到的因果图法&#xff0c;下面就来讲另一种不经常用到但又非常重要的测试用例编写方法——测试大纲法。 测试大纲法适用于有多个窗口&#xff0c;每个…

Mysql下载详细步骤

一、下载mysql 打开地址&#xff1a;MySQL :: Download MySQL Community Server 这里我下载的是红框标注的。 直接点击No thanks,just start my download.解压后文件看自己需求放置。 红框圈住的文件都是后面自己添加的。 my文件中需要添加的文本内容。 [mysqld] #设置3306端口…

【conan】本地编译三方库,上传conan服务器

1.6 conan 远程已经编译好的库 conan中文博客&#xff1a; 三方库资源&#xff1a; github conan-io 本地查询 conan search Existing package recipes:b2/4.9.6 boost/1.71.0nolovr/stable bzip2/1.0.8 ceres-solver/2.0.0nolovr/stable eigen/3.3.7nolovr/stable eigen_c…

pdf转换成word怎么转换?简单快捷方法分享

pdf转换成word怎么转换&#xff1f;需要将PDF文档转换为Word文档&#xff0c;以便更好地编辑和修改文本内容。比如&#xff0c;当你需要对一份PDF文档中的内容进行修改、编辑或者格式化时&#xff0c;你可以先将其转换为Word文档&#xff0c;再进行修改。这样可以更快速、更便捷…

【数据结构与算法】哈夫曼编码(最优二叉树实现

哈夫曼编码 等长编码&#xff1a;占的位置一样 变长编码&#xff08;不等长编码&#xff09;&#xff1a;经常使用的编码比较短&#xff0c;不常用的比较短 最优&#xff1a;总长度最短 最优的要求&#xff1a;占用空间尽可能短&#xff0c;不占用多余空间&#xff0c;且不…

4.BIO多线程即时通信

highlight: arduino-light 基于BIO模式下的即时通信&#xff0c;我们需要解决客户端到客户端的通信&#xff0c;也就是需要实现客户端与客户端的端口消息转发逻辑。 功能清单 1.客户端登陆功能 可以启动客户端进行登录&#xff0c;客户端登陆只需要输入用户名和服务端ip地址即可…

JVM理论(五)执行引擎--解释器/JIT编译器

概述 首先执行引擎是java虚拟机核心的组成部分之一;而JVM的主要任务是装载字节码到内存,但不能够直接运行在操作系统之上.因为字节码指令并非等价于本地机器指令,它仅仅包含能够被JVM所识别的指令、符号表、以及其他信息;而此时执行引擎就华丽登场,它的任务就是将字节码指令解…

欧姆龙PLC联网

一、设备信息确认 左上角的为PLC型号,如图该PLC型号为CP1H,不同型号的欧姆龙PLC通讯方面有什么差别呢? 通讯能力和方式不同: 有些型号PLC自带网口,有些则需要扩展(上图中右侧的两个红框内为后扩展的通讯口,扩展模块可以随意组合双网口,双232串口,双485串口都可以)…

D354周赛复盘:特殊元素平方和+数组最大美丽值(滑动窗口)+合法分割最小下标

文章目录 6889.特殊元素平方和思路完整版取模注意&#xff1a;不能对0取余/取模解答错误&#xff1a;本题的数组最后一个下标是nums[nums.size()] 6929.数组的最大美丽值&#xff08;排序滑动窗口&#xff09;思路1&#xff1a;排序滑动窗口注意点 6927. 合法分割的最小下标&am…