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.mfbz.cn/a/40314.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于FME二开产品:NewGIS integration介绍

目录 前言 一、模板上传 二、模板在线运行 1.模板参数解析 2.模板运行 三、成果管理 总结 前言 爆肝两个月,我和我的团队终于打造出了一款能完美适配所有FME模板的在线模板管理平台,目前支持FME2021版本的所有模板的在线运行、管理。整体技术框架…

hibernate入门,springboot整合hibernate

Mybatis和Hibernate是我们常用的两大ORM框架,这篇文章主要介绍hibernate的使用,如何通过springboot整合hibernate,实现简单的crud功能。 添加依赖 首先,需要创建一个springboot项目,这里就取名为hibernate。项目创建完…

Stable Diffusion 丝滑无闪烁AI动画 Temporalkit+Ebsynth+Controlnet

早期的EbSynth制作的AI视频闪烁能闪瞎人的双眼,可以通过【temporalkit+ebsynth+controlnet】让视频变得丝滑不闪烁。 文章目录 插件准备丝滑视频制作插件准备 下载安装 EbSynth官网,这里需要输入email地址。 下载压缩包解压缩到任意位置,这里我放到了ebsynth_utility下。 …

.Net5 mvc项目UseBrowserLink插件功能失效的原因

前期基于.Net Framework创建的Web项目,使用了BrowserLink插件协助前端开发,功能一直都比较稳定,后来项目迁到.Net5 ,发现BrowserLink 已经失去了从浏览器定位到项目源代码的功能,希望在后面的版本还能继续支持此版本&a…

layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来

该笔记记录如何使用layui的模块化方法。 访问layui官网 Layui - 极简模块化前端 UI 组件库下载官网的layui压缩包文件,解压到本地文件夹,文件结构如下: vscode创建项目; 位置 测试写了三个文件夹,才测试出来bug 坑所在…

【JavaScript 03】语句 变量 变量提升 标识符 注释 区块 作用域 条件语句 循环语句 break continue 标签

JS 语句变量变量提升标识符注释区块条件语句ifif...elseswitch三元运算符 ?: 循环语句whilefordo...whilebreak语句 and continue语句标签 语句 JS程序的执行单位是行(line) **语句(statement)**是为了完成特定任务而进行的操作…

后端查询出的数据库数字自动补零和不补零

select CAST(YTD_CHANGE*100 as decimal(18,1)), round(YTD_CHANGE*100,1) from RP where data_date 20211231补零 round(PYTD_CHANGE_PER*100,1)不补零 CAST(PYTD_CHANGE_PER*100 as decimal(18,1))

基于ZYNQ阵列涡流检测系统硬件设计(一)

为实现阵列涡流检测系统总体功能,需研制一套多通道信号采集硬件系统,以搭配 软件编程实现分时激励和分时采集。基于以上要求,本章介绍了阵列涡流检测系统的硬 件模块设计。 3.1 阵列涡流检测系统总体设计 阵列涡流检测系统需要利用 DA …

【C++进阶之路】list的基本使用和模拟实现

文章目录 初步认识①定义②底层原理③迭代器的分类 一、基本使用1.插入结点元素2.删除结点元素3.合并两个有序链表4.将一条链表的某一部分转移到另一条链表5.对链表排序并去重6.vector与list排序的比较 二、模拟实现①要点说明②基本框架③迭代器构造函数- -*->list里的迭代…

ChatGLM-6B+LangChain实战

目标:原始使用ChatGLM-6B可接受的文字长度有限,打算结合LangChain实现长文本生成摘要. 方法: step1:自定义一个GLM继承LangChain中的langchain.llms.base.LLM,load自己的模型. step2:使用LangChain的mapred…

vue 集成tinymce2实现图片,视频以及文件的上传

vue 集成tinymce2实现图片,视频以及文件的上传 1. 安装插件 (1)安装tinymce npm install tinymce -S (2)安装tinymce-vue npm install tinymce/tinymce-vue3.0.1 -S 2. 复制静态文件到public目录 资源下载路径&…

数据分析的iloc和loc功能

大家好,在处理大型数据集时,使用有效的数据操作和提取技术是必要的。Pandas数据分析库提供了强大的工具,用于处理结构化数据,包括使用iloc和loc函数访问和修改DataFrame元素的能力。在本文中,我们将探讨iloc和loc之间的…

JAVA集成国密SM2

JAVA集成国密SM2加解密 一、pom配置二、代码集成2.1、目录结构2.2、源码2.3、测试 三、相关链接 国密算法概述:https://blog.csdn.net/qq_38254635/article/details/131801527 SM2椭圆曲线公钥密码算法 为非对称加密,基于ECC。该算法已公开。由于该算法…

rabbitMQ杂记

消息队列应用场景 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量 削锋等问题实现高性能,高可用,可伸缩和最终一致性: 解耦: 异步: 削峰: 常…

基于单片机的教室智能照明台灯控制系统的设计与实现

功能介绍 以51单片机作为主控系统;LCD1602液晶显示当前时间、年月日、时分秒、前教室人数;2路红外探头用来感应当前教室进出人数;按键可以设置当前时间、自动手动模式、开启和关闭教室灯光时间;在手动模式下,可以通过按…

Spring IoC及DI依赖注入

Spring 1.Spring的含义: Spring 可从狭义与广义两个角度看待 狭义的 Spring 是指 Spring 框架(Spring Fremework) 广义的 Spring 是指 Spring 生态体系 2.狭义的 Spring 框架 Spring 框架是企业开发复杂性的一站式解决方案 Spring 框架的核心是 IoC 容器和 AO…

透视表可视化简单案例

import pandas as pd import numpy as np import os basepath/Users/kangyongqing/Documents/kangyq/202307/标准版学期制C2/pathos.path.join(basepath,02freetime.csv) dtpd.read_csv(path,dtype{shifen:object}) print(dt.head()) import matplotlib.pyplot as pltfor i in …

Python探索金融数据进行时间序列分析和预测

大家好,时间序列分析是一种基于历史数据和趋势分析进行预测的统计技术。它在金融和经济领域非常普遍,因为它可以准确预测趋势并做出明智的决策。本文将使用Python来探索经济和金融数据,执行统计分析,并创建时间序列预测。 我们将…

55. 跳跃游戏

题目链接:力扣 解题思路: 贪心,因为题目只需要判断能够到达最后一个下标,所以可以从前往后遍历,使用maxEnd保存已经遍历过的位置能够跳跃达到的最大下标,如果maxEnd大于等于nums.length-1,则返回…

系统学习Linux-Rsync远程数据同步服务(三)

一、概述 rsync是linux 下一个远程数据同步工具 他可通过LAN/WAN快速同步多台主机间的文件和目录,并适当利用rsync 算法减少数据的传输 会对比两个文件的不同部分,传输差异部分,因此传输速度相当快 rsync可拷贝、显示目录属性&#xff0c…