echarts使用getZr()点击事件获取柱状图数据

最新推荐文章于 2024-12-10 14:38:40 发布

Eason_Lou

最新推荐文章于 2024-12-10 14:38:40 发布

阅读量8.4k

点赞数 7

分类专栏：前端文章标签：前端 echarts

本文链接：https://blog.csdn.net/weixin_54366356/article/details/117324448

版权

本文介绍了在echarts中，当柱状图数据较少时，如何利用getZr方法来实现点击柱状图所在列获取对应数据的精确点击事件。这种方法使得用户即使不直接点击柱子，也能触发事件并获取到相关信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts柱状图精确点击事件传参

先上效果图！！！

实例图片

当柱状图数据较少的时候，直接点击柱子不好点击，使用getZr()此种方法可以点击柱子所在的这一列（阴影部分），即可拿到对应数据

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Eason_Lou

关注关注

7
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ECharts 全局触发click点击事件（Label及柱状）

日常笔记/总结/系列知识梳理

06-09

8012

// 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')); 前言需求要点击Echart处理事件，通过myChart.on可实现，但只能点击柱状图才能触发，点击label(即：坐标文本)无法触发；通过myChart.getZr().on可全局监听Echart图，但无法准确的获取当前点击柱状的index；由此见下文 Echart图 Echart对象 option = {

Echarts 点击空白位置，获取点击的数据索引

weixin_45162984的博客

01-03

906

echartsInstance.getZr()获取点击位置。

3 条评论您还未登录，请先登录后发表或查看评论

ECharts的柱状图表中当数据量较少时不易触发点击事件使用getZr()方法来替换触发事件

最新发布

觉醒法师的专栏

12-10

1078

EChart的getZr()方法用于获取图表的渲染器对象，该对象可以用于监听图表的点击事件。例如下面的柱状图，某些量较少或为0时，触发点击事件比较困难，但也希望能点击空白区域时触发或取消某些操作。如上图，南京数据量较少，成都为0，当鼠标放上去时很难让捕捉到这两个区域的点击事件，此时则希望可以点击垂直方向的空白区域，也可以触发该区域点击事件。那么，接下来我们将来了解下这个功能将如何实现。

[echarts] 使用getZr()事件获取柱状图当前点击列的数据

qq_14993591的博客

03-11

2762

var t = document.getElementById("cardChart"); t.style.width = window.offsetWidth + "px"; var cardChart = echarts.init(t), options = { color: ['#3398DB'], title: { left.

在vue中使用ref标签，调用Echarts的 getZr()方法，实现柱状图的点击事件

cm1454961的博客

04-27

662

在echarts的日常开发中，有遇到要实现柱状图的某根柱子的点击事件，记录一下

echarts 点击柱状图获取索引以及数值的解决方案

danke的博客

07-06

2343

【代码】echarts 点击柱状图获取索引以及数值的解决方案。

echarts.getZr()事件

weixin_38912662的博客

07-24

742

最近遇到一个需求，点击图形上的某个数据项，触发点击事件，点击空白地方，取消点击事件，查看文档后可以使用getZr(), 不多废话，直接上想看的。

echarts 柱状图使用getZr点击柱子以外的部分

G_ruirui的博客

06-04

5965

例子注意：echarts点击事件先进行off(),能够避免2次事件 chart.getZr().off() chart.getZr().on('click',params=>{ let pointInPixel = [params.offsetX, params.offsetY] console.log(chart.containPixel('grid', pointInPixel)) let pointInGrid = chart.convertFromPixel({ serie

关于vue移动端项目echarts的使用，点击柱状图触发多次点击事件

xiaofeifei1015的博客

07-22

2426

关于vue移动端项目echarts的使用，以及echarts的一次问题记录，点击柱状图触发多次点击事件 echarts的安装 npm install echarts --save(也可以使用cnpm，下载速度更快，附：安装cnpm命令npm install -g cnpm --registry=https://registry.npm.taobao.org ) 入口文件引入全局引入 import echarts from 'echarts' Vue.prototype.$echarts

echarts折线/柱状图的区域点击事件

EnidChann的博客

08-21

1563

缺陷: 柱状图数据过于悬殊时, 需要精准点击到柱状图, 体验感差需求: 点击红色框区域都能联动 // 用getZr方法绑定click chart.getZr().on('click', async (params) => { // 无论是否点击到图本身,都能拿到坐标 const pointInPixel = [params.offsetX, params.offsetY] if (chart.containPixel('grid', pointInPixel)) { .

echarts——折线图点击线触发函数getZr()——技能提升

yehaocheng520的博客

06-28

5385

echarts——折线图点击线触发函数getZr()——技能提升

vue+echart :点击趋势图中的某一点或是柱状图，出现弹窗，并传输数据

wlijun_0808的博客

05-21

1392

主要是在趋势图页面代码中，在初始化趋势图的设置中，添加对趋势图监听的点击方法。在趋势图中点击某一个柱状图，出现下面的弹窗。

ECharts柱状图动态获取数据

想成为工程师的码农

05-07

1688

<%@ include file="/config.jsp"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Tra

echarts getZr()的点击事件

weixin_42455970的博客

09-08

4042

//点击事件 echarts.getZr().off('click'); echarts.getZr().on('click',(params)=>{ letpointInPixel=[params.offsetX,params.offsetY]; if(echarts.containPixel('grid',pointInPixel)){ letpointInGrid=ec...

echarts 柱形图、折线图点击事件

徊忆羽菲

12-15

1645

echarts 柱形图、折线图点击事件。

关于Echarts柱状图监听点击事件的实现方法

m0_55333789的博客

09-04

5060

关于Echarts柱状图监听点击事件的实现方法

vue-echarts饼图/柱状图点击事件

Ctrl-a-c-v44220970的博客

02-13

9229

在实际的项目开发中，我们通常会用到Echarts来对数据进行展示，有时候需要用到Echarts的点击事件，增加系统的交互性，一般是点击Echarts图像的具体项来跳转路由并携带参数，当然也可以根据具体需求来做其他的业务逻辑。下面就Echarts图表的点击事件进行实现，文章省略了Echarts图的html代码，构建过程，option，适用的表格有饼图、柱状图、折线图。如果在实现过程中，遇到困难或者有说明好的建议，欢迎留言提问。

Echarts柱状图柱子添加点击事件

CaseyWei

04-18

1990

方法二：结合getZr和click实现这个效果（比较麻烦，可以用于更复杂效果的实现）抛回父组件，直接用这个index去x轴data里面取当前被点击的柱子的x轴坐标。params.offsetX，params.offsetY 为点击位置的坐标。这里只需要拿到被点击柱子对应的X轴时间坐标，可以直接监听click事件。拿到被点击的柱子的index（从0开始，number类型）拿到被点击的柱子的X轴坐标name。结合click事件可以拿到点击位置。可以实现在点击位置展示弹框的效果。