echarts的重复绑定事件

原创 2018年04月16日 14:02:45

在用echarts结合react制作图表,在柱状图是需要点击一栏之后调用后台数据,渲染一个数据表格,开始直接使用histogram.on绑定事件,但出现点击一次之后连续触发多次回调,调查原因之后发现是事件绑定多次的坑;

histogram.setOption(option);
        histogram.on("mouseover", function (params) {
             vm.getTableB(vm.props.ci0301Info.step_sn_b[params.dataIndex]);
        });
引用该博客的解释:

"在页面中为一个元素绑定事件,事件执行后页面未刷新且元素还在,然后你再次点击,元素又被绑定个一次点击事件,这样第二次点击就会执行两次,以此类推。如何解决累加绑定:第一种方法是元素点击后删除,然后再动态创建一个元素,再添加点击事件。显然这个方式很麻烦。第二中方法是使用jquery的one()方法,为元素绑定一个一次性的事件处理函数,这个事件处理函数只会被执行一次" 

reference:https://www.cnblogs.com/daijinxue/p/6124979.html

针对echart的解决办法:

在绑定事件之前,清空事件.

histogram.setOption(option);
        histogram.off("mouseover");//防止累计触发
        histogram.on("mouseover", function (params) {
             vm.getTableB(vm.props.ci0301Info.step_sn_b[params.dataIndex]);
        });

(1)Echarts图表绑定特殊事件

本文主要讲述在源码的基础上,如何给柱状图、线图、饼图。。。等常见图表,添加特殊事件接口,毕竟官方接口,在很多情况下还是不能满足我们的需求。...
  • mulumeng981
  • mulumeng981
  • 2017-09-12 10:20:01
  • 773

echarts 节点添加绑定事件

测试代码 报表测试 var responseData = { "status": 1,...
  • hbiao68
  • hbiao68
  • 2016-09-07 18:14:46
  • 1588

(2)Echarts图表绑定特殊事件-图表元素绑定选中事件

本文主要讲述在源码的基础上,如何给柱状图、线图、饼图。。。等常见图表,添加特殊事件接口,毕竟官方接口,在很多情况下还是不能满足我们的需求。本节则是手把手教大家如何在源码中添加自己定义的事件。...
  • mulumeng981
  • mulumeng981
  • 2017-09-12 14:12:16
  • 358

记录一次在vue中使用echarts遇到的神奇问题

首先我们看看,id为hoststatus的div宽度为:111.8px: 然后使用js打印出#hoststatus的宽度看看: 结果为1503.2px,为什么会出现这个结果???? ...
  • o0__0
  • o0__0
  • 2018-02-26 14:40:00
  • 94

echarts重复加载

最近项目中用到 echarts,我们从数据库中得到数放到echarts中展示,一开始都是请求后直接放入数据,展示。没有问题,后来我们要求利用echarts根据图上的每一次点击事件,局部更新请求后台的数...
  • goodluck_mh
  • goodluck_mh
  • 2017-01-18 19:20:42
  • 3809

动态生成dom元素时发生的重复绑定事件

重复绑定事件
  • qq_38575056
  • qq_38575056
  • 2017-06-26 17:57:29
  • 296

jQuery 重复绑定事件的解决方法

http://hi.baidu.com/hy0kl/blog/item/477ef3fc377764f6fd037f56.html 现象:ajax 取数据,一个点击,多次相同请求,还会叠加,越点越多....
  • xiaorubj001
  • xiaorubj001
  • 2010-08-02 10:49:00
  • 5665

ECharts官方教程(九)【ECharts中的事件和行为】

ECharts 中的事件和行为在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。在...
  • WuLex
  • WuLex
  • 2017-12-19 10:11:04
  • 358

jquery click事情重复绑定

jquery重复绑定事件
  • hu_feng903
  • hu_feng903
  • 2016-09-21 11:46:11
  • 790

echarts中setOption没有重新渲染表格,导致图表显示有问题?

问题:echarts中setOption没有重新渲染表格,导致图表显示有问题说明: 使用的是折线图 第一次渲染的是三组数据,显示三根线。 切换后数据调整为两组,但是图表仍然显示三根线。 排查后...
  • Time888
  • Time888
  • 2017-09-11 10:33:27
  • 469
收藏助手
不良信息举报
您举报文章:echarts的重复绑定事件
举报原因:
原因补充:

(最多只允许输入30个字)