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

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

Eason_Lou

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

阅读量8k

点赞数 4

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

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

版权

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

摘要由CSDN通过智能技术生成

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

关注关注

4
点赞
踩
8

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

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

06-09

7886

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

解决-echarts点击左边柱状图的任意一个柱子，右边柱状图动态呈现相应的数据过程中的-方法

m0_55728090的博客

04-22

6713

效果就是这样，当我点击左边柱状图的任意一个柱子的时候，右边就呈现该柱子里面的你想要呈现的数据。第一步:首先肯定是创建容器来存放柱状图啦 <div class="BigBox"> <div id="leftBar" style="width: 750px; height: 500px;" @click="isShowRightBar"></div> <div id="rightBar" style="width: 600px; height:

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

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

最新发布

觉醒法师的专栏

12-10

783

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

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

qq_14993591的博客

03-11

2708

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

639

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

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

danke的博客

07-06

2266

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

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

EnidChann的博客

08-21

1515

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

echarts y轴添加点击事件_echarts 图点击事件

weixin_40001048的博客

12-20

1300

有三种方式，介绍一下，大家学习哈1、利用tooltip记录信息，使用zr监听事件，进行事件处理。这种方法是利用showTip方法或者tooltip的formatter函数记录选中的数据信息，并在zr监听到的事件中以记录的信息来处理点击事件，弥补zr携带的信息不便使用的缺陷，具体实现可参照这里。这种方法可以实现想要的效果，但是需要不断的记录、更新信息，影响性能。2、利用tooltip触发时选中区域...

在Echarts区域的任何位置精准触发事件

helloworldmyself的专栏

10-15

4977

需求背景：点击Echarts区域跳转页面，跳转的区域不包括grid的坐标及标签，翻看了Echarts官网，实现触发事件之的on方法，但是此方法只能在鼠标点击某个图形上会触发，这样并不能实现需求。通过百度和查看github issue后多用Echarts实例的getZr()方法监听到整个画布的 click 事件。使用echartsInstance.getZr().on('click' , p...

echarts.getZr()事件

weixin_38912662的博客

07-24

671

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

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

G_ruirui的博客

06-04

5908

例子注意：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

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

yehaocheng520的博客

06-28

5130

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

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

wlijun_0808的博客

05-21

1310

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

ECharts柱状图动态获取数据

想成为工程师的码农

05-07

1669

<%@ 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

4008

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

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

徊忆羽菲

12-15

1593

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

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

m0_55333789的博客

09-04

4883

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

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

Ctrl-a-c-v44220970的博客

02-13

8677

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

ECharts动态地图与柱状图数据联动教程

- 数据联动：讲解地图数据与柱状图数据如何交互，实现数据的联动变化，丰富数据展示维度。 4. 实战演练前端开发中的数据处理与展示： - 数据处理：介绍在前端开发中如何处理和准备数据，以便在ECharts图表中使用...