Echarts柱状图绑定click方法点击出现重复

ECharts中国地图实战指南:从零实现数据可视化与交互 数据可视化是前端开发中展示地理信息与业务指标的关键技术,其核心原理在于将抽象数据通过图形编码直观呈现。ECharts作为一款开源可视化库,通过封装复杂的地图渲染与交互逻辑,提供了高效、易用的解决方案,极大降低了开发门槛。其技术价值在于内置了符合国家标准的GeoJSON数据,支持视觉映射、事件响应等丰富功能,能够快速构建美观、交互完整的中国地图。在应用场景上,它广泛适用于后台管理系统、数据大屏等需要展示销售区域分布、用户地理位置分析的场景。本文聚焦于**ECharts地图**的实战应用,详细解析了如何通过配置 阅读详情

项目场景:

点击柱子需要保存x轴上的日期


问题描述

柱状图重新绘制过多少次点击柱子就会执行几次。(比如第一次查询为当天的数据,点击柱子,输出一次;第二次查询最近七天的数据,点击柱子,输出两次。)

// instance.current = echarts.getInstanceByDom(chartDom.current) || echarts.init(chartDom.current, null); // 获取实例对象
instance.current.on('click', { seriesName: '事件次数' }, (params) => {
	console.log(params.name);
});

原因分析:

不同的查询条件是让图重新绘制了,但是原先绑定的方法并没有清除,导致每次重新绘制之前绑定的点击事件依旧存在,所以就出现了重复的现象。


解决方案:

在绑定点击事件前先关掉点击事件:

instance.current.off('click');
instance.current.on('click', { seriesName: '事件次数' }, (params) => {
	console.log(params.name);
});
基于ECharts构建企业级数据可视化大屏:架构、实战与性能优化 数据可视化是现代数据决策的核心技术,它将复杂数据转化为直观图表,帮助用户快速洞察业务趋势。其原理在于通过图形、颜色和动画等视觉元素映射数据维度,从而降低认知门槛,提升决策效率。在技术价值上,优秀的数据可视化方案能实现实时监控、趋势预警和深度下钻,广泛应用于智慧城市、生产监控、电商直播和网络安全等场景。ECharts作为一款功能强大的前端可视化库,凭借其丰富的图表类型和活跃的社区生态,成为构建专业大屏的首选工具。本文聚焦于**ECharts地图设置图片**和**JS大屏自适应解决方案**等关键技术,深入探讨如 阅读详情

相关推荐

Echarts - 图表绑定事件(事件处理)

前言 ECharts 允许通过 on 方法来监听用户对图表的行为,且可以拿到 item 参数用以业务逻辑处理。 例如,如下 点击事件 效果图,可获取相关数据示例: 实现方法 官方文档: https://echarts.apache.org/zh/api.html#events 如下示例,可直接复制代码,以 *.html 运行查看效果图代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

🏆 前端领域优质创作者 4323

echarts 柱形图 点击事件(点击柱子触发事件,点击横坐标不触发事件)

echarts 柱形图 点击事件(点击柱子触发事件,点击横坐标不触发事件)

weixin_49826079的博客 2479

特性阻抗 – SI/PI 世界碰撞的地方

除了谐振零点和峰值外,在一定频率下,传输线的阻抗看起来像远端开路时的电容器的阻抗,也看起来像远端短路时电感的阻抗。如果随后的制造变化将测得的阻抗推到 -10% 容差的低端(例如 44 欧姆)的测量区域内,那么如果在初始下降时测量,则真正的特性阻抗将在 42 欧姆时降低 5%,并且超出规格。这意味着,当我们测量红色或蓝色图的峰和相邻谷之间的中间阻抗时,它是该频率下传输线的特性阻抗。图 7 远端开路时(红色常亮)与远端短路时(蓝色常亮)的电感和电容抗阻抗与频率的关系(上图)和传输线的阻抗与频率(下图)的对比。

jkh920184196的博客 962

echarts图点击事件时重复调用问题

解决echarts图点击事件重复调用,在每次点击之前先加上 off('click')

qq_38305872的博客 2098

用 Python 和 uiautomation 实现微信批量发送

思路是这样,将要发送的人员名单(包括称呼)以及发送内容都维护到Excel里,程序运行时读取Excel里内容,自动搜索人员姓名(微信昵称或备注名),填入要发送的内容,拼接上称呼(如果需要的话)自动点击发送,这样轮巡直至名单人员全部发送完成。、

jankingdom的专栏 1471

AppleAccount注册之生成sign

根据日志发现:签名来自于AuthKit的-[AKAppleIDServerResourceLoadDelegate signRequest:withCompletionHandler:]的一个block,这个库是放在共享缓存库里的,找到提前准备好的IDA文件,先去找主方法,根据分析IDA,最后找到了实际生成签名的方法:t1。,接受五个参数,context(之前讲的获取到的客户端证书),bytes(待加密的body字节),length(字节长度),以及两个接受结果的参数,直接进这个方法看,

2503_90751938的博客 1004

Echarts柱状图柱子点击事件

文章目录效果展示需求实现 效果展示 需求 点击柱子显示当天的详细数据 实现 这里只需要拿到被点击柱子对应的X轴时间坐标,可以直接监听click事件 在DOM加载完为chart注册点击事件 拿到被点击的柱子的X轴坐标name 抛回父组件 方法一:直接监听click事件实现这个效果 click 可以拿到柱条 color: “#1DADF1” 第几个 componentIndex: 0 类型 seriesType/componentSubType: “bar” data/valu

littleOneYuan的博客 1万+

BIM Revit教程(六)尝试安装 Revit 时显示“Autodesk Revit 已安装。”

在安装Revit或RevitLT时,若系统提示“AutodeskRevit版本已安装”,通常是由于旧版本残留文件未完全清除所致。解决方案包括:1.通过控制面板或Windows设置卸载旧版本Revit,确保所有相关组件被移除;2.使用Autodesk卸载工具(AdskUninstallHelper)进一步清理;3.谨慎操作注册表,删除与Revit相关的残留项;4.确保系统有至少30GB的可用磁盘空间;5.完成上述步骤后,重新尝试安装Revit。此外,文章还提到了一个免费功能商店,供用户寻找提效工具,并鼓励粉丝

ZOZO_888的博客 2129

echarts 地图 一次点击事件却触发多次的解决方法

给echarts图表设置点击事件后,会导致出发多次请求,给点击事件设置 off 即可解决。

sinat_33255495的博客 3262

保姆级教程:在通达信V7.611上配置欧奈尔RPS曲线(附完整公式与每日更新流程)

本文提供通达信V7.611配置欧奈尔RPS曲线的保姆级教程,涵盖从环境准备、基础设置到核心公式配置的全流程。详细讲解如何创建股票池、编写EXTRS基础公式及RPS显示公式,并附每日更新流程与实战应用技巧,帮助投资者精准捕捉强势股。

weixin_30000735的博客 461

RDKit | 基于Pytorch和RDKit建立QSAR模型

QSAR 定量构效方法(quantitative structure-activity relationship, QSAR)是应用最为广泛的药物设计方法。所谓定量构效方法就是通过一些数理统计方法建立其一系列化合物的生理活性或某种性质与其物理化学性质之间的定量关系,通过这些定量关系。可以预测化合物的生理活性或某些性质,指导我们设计出具有更高活性的化合物。 早在...

DrugOne 5077

echarts中多个柱子的柱状图_怎么解决ECharts重复触发点击事件?

bug最近,写Vue项目时用到ECharts,需求是这样的:点击柱子,从服务端获取数据,然后重新渲染柱状图。做完后发现一个bug:从第二次点击开始,每次点击都会向服务端发起多次请求,并非一次点击一次请求。经过分析发现,在ECharts渲染后,给柱状图绑定了click事件。但是没有解除绑定。当后面再次点击,重新渲染的时候,会执行多次click,从而发起多次请求。解决方案在渲染ECharts的时候,先...

weixin_39653733的博客 829

零基础实战:云开发家政维修小程序搭建指南

欢迎来到这本关于构建家政维修小程序的电子书!在当今数字化的浪潮中,线上服务已成为我们生活中不可或缺的一部分。从点餐购物到居家维修,人们越来越习惯通过指尖轻点来解决各种需求。正是基于这样的背景,我们希望通过这个系列,手把手地带领大家从零开始,搭建一个功能完备、体验流畅的家政维修平台。这不仅仅是一本技术教程,更是一次将想法变为现实的探索之旅。我们将深入浅出地讲解如何运用云开发等现代技术,实现从用户下单、支付,到客服派单、工人接单,再到订单完成和权限管理等一系列核心业务流程。

低代码布道师的博客 3431

echarts点击柱状图太小,和避免重复事件

chart.getZr().off() chart.getZr().on('click',params=>{ let pointInPixel = [params.offsetX, params.offsetY] console.log(chart.containPixel('grid', pointInPixel)) let pointInGrid = chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)...

weixin_43130016的博客 567

OpenClaw人人养虾:配置通义千问(Qwen)

通义千问(Qwen)是阿里云推出的大语言模型系列。OpenClaw 支持通过 Qwen Portal 插件实现 OAuth 免费额度认证,每日可免费使用 2000 次请求,无需绑定支付方式。

王国平的博客 1257

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

appcrash事件怎么解决kernelbase.dll_怎么解决ECharts重复触发点击事件?

bug最近,写Vue项目时用到ECharts,需求是这样的:点击柱子,从服务端获取数据,然后重新渲染柱状图。做完后发现一个bug:从第二次点击开始,每次点击都会向服务端发起多次请求,并非一次点击一次请求。经过分析发现,在ECharts渲染后,给柱状图绑定了click事件。但是没有解除绑定。当后面再次点击,重新渲染的时候,会执行多次click,从而发起多次请求。解决方案在渲染ECharts的时候,先...

weixin_39549312的博客 544

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

option会触发的click_echarts点击事件多次触发解决

解决方式:myCharts.off('click')最近写vue项目时用到echarts做个小功能,点击饼状图的每一块,生成新的柱状图,同时要给柱状图绑定点击事件,弹出每一条柱状数据详情。做完后发现一个问题,第一次点击柱状图时点击事件只触发一次,点击饼状图第二次生成柱状图后,柱状图的点击事件就会触发两次,以此类推……最后越来越多。代码如下:// 画饼状图drawPie() {let myChart...

weixin_39853155的博客 426

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

Vue echarts 绑定事件重复执行问题

1.起因 在用柱状图的时候,绑定click事件,跳转新的页面。 由于支持图表与数据进行切换,切换多少次,就会发现打开多少个新的页面。 2.解决方案 将原先DOM容器清空,后重新生成。 <div ref="wrap"> <div id="chart-0" style="height: 380px;"></div> </div&...

weixin_34345560的博客 881

Vue+ECharts实现消费中位数柱状图的完整工程实践

中位数是描述偏态分布数据集中趋势的核心统计量,相比平均数更能抵抗异常值干扰;柱状图则是展示分类维度下统计指标最直观的可视化形式。理解中位数计算原理(排序取中+数据清洗)与图表语义表达逻辑(坐标轴类型、缩放控制、标签可读性),是构建可靠BI图表的基础能力。在前端工程中,Vue提供响应式状态管理,Axios保障健壮的数据获取,ECharts实现精准的统计图表渲染,三者协同构成‘数据→统计→可视化’闭环。本文以高职国赛真实任务为场景,详解从原始消费流水清洗、分组聚合、中位数计算到ECharts像素级配置的全流程,

weixin_34396902的博客 403

解决echarts地图触发点击事件多次调用接口问题

引用echarts地图,点击各个省份时,点击一个调用两次接口,再点击一次,调用四次接口,再点击调用八次。。。。依次叠加,问题在于,没有将地图上的点击事件清空 myChart.off(‘click’);//先移除 this.myChart.on(‘click’,function(){});//再触发点击事件, 不再会出现上述问题 ...

我的博客 1557

echarts点击图例 数据叠加 多次触发

echarts的的图例点击第一次是正常获取当前点击的数据,但是重复点击获取的越来越多,即点击多次触发。 所以在点击之前要对加上一个off事件 myChart.off('click') 清楚之前的点击事件。 myChart.setOption(eOption,true); 在Option后添加参数true,是否不跟之前设置的option进行合并,默认为false,即合并,设置true不合并。...

Ace_with_Yu的博客 2071

Echart 单击柱状图以后,出现连续触发单击事件

修复:Echart 单击柱状图以后,出现连续触发单击事件

YHJ_2298的博客 1167

大屏3D地图实现方案之-Echarts具体实现功能代码以及效果展示

地图组件:Shanxi3DMap.vue 页面中引用:threemap_normal_page.vue 2、2D叠加实现3D地图视觉效果+柱状图 地图组件:Shanxi2DStackMap.vue 页面中引用:threemap_stack_page.vue 3、2D叠加实现3D地图视觉效果+动态飞线、边界发光、动态涟漪散点图等 高速图层实现方法可参考大屏2D地图实现方案之-Echarts具体实现功能代码以及效果展示中对应实现方法 地图组件:Shanxi3DStyleMap.vue 页面中引用:thr

wz_1992的博客 306

AI代码助手与低代码报表工具融合:打造智能数据可视化开发新范式

数据可视化是现代数据驱动决策的核心环节,它通过图表、图形等直观形式将复杂数据转化为易于理解的洞察。其技术原理通常涉及数据提取、转换、加载(ETL)以及前端渲染引擎的协同工作。在工程实践中,开发高效、美观的可视化应用常面临配置繁琐、代码重复的挑战。低代码平台通过提供可视化编排和预置组件,显著提升了搭建效率,而AI代码生成技术则能基于自然语言描述自动产出数据处理逻辑与配置代码,两者结合为可视化开发带来了范式变革。具体到应用场景,这种融合模式特别适用于需要快速构建业务监控大屏、运营数据看板以及标准化报表系统的团队

weixin_30530939的博客 345

WebForms中am.Charts Flash图表控件实战指南

WebForms图表控件是ASP.NET WebForms时代实现服务端驱动数据可视化的关键技术路径,其核心原理在于服务端控件封装+Flash客户端渲染的混合架构,通过XML数据序列化与SWF解析完成图形生成。该方案在无JavaScript生态、IE6为主力浏览器的历史阶段具备强兼容性与低前端耦合度的技术价值,广泛应用于政府信息化、教育看板等老旧B/S系统。典型应用场景包括饼图占比分析、柱状图多系列对比、折线图双Y轴趋势呈现,尤其适合需深度集成DataSet、依赖UpdatePanel局部刷新、且无法升级现

a6t2007的博客 512

2026面试预判及实际面试

本文摘要总结了多个前端开发岗位的面试问题和答案,涵盖Vue3、ECharts、数据可视化、JavaScript核心概念等内容。 Vue3高频问题 组合式API相比选项式API的优势在于逻辑内聚、更好的TS支持和复用性。 状态管理推荐Pinia,轻量且支持组合式API风格。 动态路由和权限控制通过router.addRoute和路由守卫实现。 响应式原理基于Proxy和Reflect,解决了Vue2的局限性。 ECharts与数据可视化 性能优化包括数据聚合、懒渲染和dataZoom区域缩放。

Mr.小灰狼_随笔 579
上一篇: 优化antd的select组件
下一篇: 处理js小数乘或除以100精度丢失
Nancyeah
博客等级 码龄9年 2粉丝 10原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值