echarts 图的点击重复触发的问题及其解决

要求:在echart图表中,点击每个项,需要跳转对应页面或者显示对应的数据详情列表。

如何添加鼠标点击事件?

1.通常我们只使用了以下代码,通过配置项和数据显示图表。

var myChart = echarts.init(document.getElementById(‘chartBox‘));
  • myChart.setOption(option);

2.在myChart.setOption(option)后添加以下代码,即可触发图标中每个项的鼠标点击事件。

myChart.on(‘click‘,  function(param) {
  • //这个params可以获取你要的图中的当前点击的项的参数

注:鼠标事件包括‘click‘,‘dblclick‘,‘mousedown‘,‘mouseup‘,‘mouseover‘,‘mouseout‘,‘globalout‘,‘contextmenu‘。

3.如果逻辑运行中,第2点中的代码,执行了多次,则绑定之前需要清除绑定:


if(myChart._$handlers.click){    myChart._$handlers.click.length = 0;
myChart.on(‘click‘,  function(params) {
  • //这个params可以获取你要的饼图中的当前点击的项的参数
  • _this.showMapPointInfo(params,param);

转自: https://blog.csdn.net/yqwang75457/article/details/83008200

原文地址:https://www.cnblogs.com/choiyubo163com/p/echarts_on_click.html

时间: 2024-08-06 09:10:29

echarts 图的点击重复触发的问题及其解决的相关文章

echarts 图的点击事件

在echarts官方示例后面添加: var ecConfig = require('echarts/config'); myChart.on('click', function eConsole(param) { //这个params可以获取你要的饼图中的当前点击的项的参数 alert(2); });

干掉微信小程序-避免多次点击,重复触发事件

干掉微信小程序-避免多次点击,重复触发事件 问题描述 开发小程序时,或者说是在做前端的时候,我们经常会遇到当用户点击某个按钮时,没有得到反馈的话,大部分用户都会接着点击,这就会造成前端接收到多次请求的响应. 这主要是因为后端api请求需要时间,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮. 所以,接下来说说,在微信小程序中避免多次点击,重复触发事件的两种思路. 解决方法一: 使用 wx.showLoading 在请求执行之前显示一个加载框,请求完成后再关闭加载框. j

combotree允许多选的时候onSelect事件会重复触发onCheck事件

分享个combotree允许多选的时候onSelect事件(通常是点击“+”号时)会重复触发onCheck事件的蠢解决办法是: 1.弄一个全局变量: var loading = false; //表示在触发combotree各种事件时是否遍历树: 2.设置onSelect时不做任何操作: $("input[name='XXXXX']").combotree({ ... onSelect: function(node) { return; }, ... }); 3.设置onBeforeL

UWP忽略短时间内重复触发的事件

原文:UWP忽略短时间内重复触发的事件 原链接:UWP忽略短时间内重复触发的事件 - 超威蓝火 做移动端开发的可能都会遇到这种需求,当用户点击一个按钮之后,由于没有异步,或者设备性能很差等等原因,程序卡住了.但是用户不知道是咋回事啊,就开始狂点按钮,结果请求很多次资源,或者构造了很多重复视图.安卓上有很多介绍如何忽略重复点击的情况,uwp里我好像还没找到,那接下来就说一说我的方法吧. 首先是官方最常用的,从Windows诞生之初用到现在的,点击按钮之后把他Disable掉,等完成了在Enable

解决echarts中的点击事件点击后走多次接口

使用echarts图点击图之后,走了很多次接口,后来发现添加一个off事件就可以解决了,具体如下: 原文地址:https://www.cnblogs.com/whdaichengxu/p/11978299.html

GridView点击行触发SelectedIndexChanged事件

1.在<% @Page ...... %>指令中添加 EnableEventValidation="false" 2.在RowDataBound事件中添加 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { switch (e.Row.RowType) { case DataControlRowType.DataRow: e.Row.Attributes["s

jquery如何实现点击回车键触发事件

jquery如何实现点击回车键触发事件:有时候我们想点击回车的时候能够让代码去干一些事情,这个时候我们就需要判断按下的键是否是回车,下面就简单介绍一下如何实现此功能,核心代码如下: $(function (){ document.onkeydown=function(ev) { var ev =ev||window.event||arguments.callee.caller.arguments[0]; if(ev&&ev.keyCode==13) { //需要的操作代码 } } }) 代

关于label标签点击事件触发两次问题

给confirmBillCard 绑定点击事件,当点击lable时候,事件会触发两次,解决办法: 1: 2:

文本框输入完毕后,点击Enter触发按钮Click事件

文本框输入完毕后,点击Enter触发按钮Click事件 在C#编程中,我们经常碰到一个问题,就是在文本框中输入一些文字后,点击某按钮做一些响应处理.如百度搜索那样的,填写搜索内容,点击百度即可.当然我这里也有相应的情况: 输入文字后,点击按钮触发翻转文字效果. 如果想要用按下Enter代替点击按钮,可以这样写: private void textBox1_KeyDown(object sender, KeyEventArgs e) { if (e.KeyCode == Keys.Enter) {