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

最新推荐文章于 2024-10-10 14:08:08 发布

Eason_Lou

最新推荐文章于 2024-10-10 14:08:08 发布

阅读量7.9k

点赞数 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

7746

// 基于准备好的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

6656

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

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

ECharts柱形图数据差距过大触发点击事件

Tonghanhan的博客

11-10

576

在项目开发中，由于一些数据量差距过大，导致偏小的值的点击事件难以触发，此时我们可以不用传统的点击事件，而是用可以包括背景区域的点击事件来触发。相当于点击整个坐标轴区域都能触发点击事件而不只是点击已有的数据形成的柱体。

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

yehaocheng520的博客

06-28

4812

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

echarts-gl 实现3D地图

最新发布

xichji的专栏

10-10

297

经过初步调试，似乎是调用echartInstance.clear()后移除了ZRender中的storage，导致ZRedner实际上已被dispose了，但事件触发时又使用到了被dispose后的ZRender，从而引发了error。geo3D 本来没有点击事件 需要添加一个点击的数据区域也就是在上面添加一层地图让上面的地图成为可点击的数据区域（上面的地图配置和下面的地图配置要一致位置啥的保持一致不然点击的区域可能会有偏移）echarts实现中国地图记录篇之2D，3D地图（采坑）

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

qq_14993591的博客

03-11

2653

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

605

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

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

danke的博客

07-06

2178

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

echarts.getZr()事件

weixin_38912662的博客

07-24

532

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

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

EnidChann的博客

08-21

1476

缺陷: 柱状图数据过于悬殊时, 需要精准点击到柱状图, 体验感差需求: 点击红色框区域都能联动 // 用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

1248

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

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

helloworldmyself的专栏

10-15

4920

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

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

G_ruirui的博客

06-04

5868

例子注意：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+echart :点击趋势图中的某一点或是柱状图，出现弹窗，并传输数据

wlijun_0808的博客

05-21

1186

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

ECharts柱状图动态获取数据

想成为工程师的码农

05-07

1651

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

3985

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

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

徊忆羽菲

12-15

1551

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

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

m0_55333789的博客

09-04

4714

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

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

Ctrl-a-c-v44220970的博客

02-13

8508

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

ECharts地图自定义展示技巧与柱状图分析教程

用户将学习到如何设置柱状图的尺寸、位置和颜色，以及如何同步地图区域和柱状图数据。 4. 统计分析与数据可视化：该部分将深入探讨如何利用 ECharts 进行复杂的数据分析。用户将通过具体的代码实现，了解如何将数据...