Echarts如何添加鼠标点击事件?

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

var myChart = echarts.init(document.getElementById('chartBox'));
    var option = {...};
    myChart.setOption(option);

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

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

注:鼠标事件包括'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);
    });

Echarts如何添加鼠标点击事件?防止重复触发点击事件的更多相关文章

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

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgEAAADkCAIAAACOkmAuAAAgAElEQVR4nO2dW2wc15nnO0EQBJsdzA

  2. heightcharts点击曲线图获取返回值的问题(ios点击图表第一次无法触发点击事件解决方法)

    需求:用的heightcharts插件,点击曲线图想获得所点击点的返回值,如图 问题代码: (function chart_line(){ var data={"title":[& ...

  3. 【C#】添加鼠标管轮事件

    对FlowLayoutPanel添加鼠标滚轮事件 在mainform中添加事件 his.flowLayoutPanel1.MouseWheel += new System.Windows.Forms. ...

  4. echarts 图的点击事件(含:点击重复触发的问题及其解决方法)

    今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图  但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...

  5. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  6. Unity 添加鼠标右键事件

    把此类放到 Editor下使用就OK using UnityEngine; using System.Collections; using System.Collections.Generic; us ...

  7. WinForm -- 为TextBox文本框添加鼠标右键菜单

    WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...

  8. OpenGl读取导入3D模型并且添加鼠标移动旋转显示

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11543828.html 最近实习要用到opengl库就是跟opencv 有点像的那个,然后下了 ...

  9. OpenGl 导入读取多个3D模型 并且添加鼠标控制移动旋转

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11627508.html 前言: 因为接下来的项目需求是要读取多个3D模型,并且移动拼接,那么我 ...

随机推荐

  1. 学习 TTreeView [2] - Items.Item[i]、Items[i]、.Text、SetFocus(设置焦点)、Select(选择)

    本例效果图: 源码: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Co ...

  2. (错误)在VMmare中安装centos后不能联网

    一.问题 在VMmare中安装centos后不能联网 在Xshell无法连接centos 二.解决方法 2.1 点击Network Adapter 设置如下图所示,首先我们在虚拟机中将网络配置设置成N ...

  3. (五)AJAX技术

    一.定义 AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的 ...

  4. gitblit git SERVER window 安装配置 hook post-receive 自动部署

    项目中使用的是gitblit windos版 1.安装 需要JAVA SDK http://gitblit.com/Download Gitblit GO (Windows) 下载后,解压缩,放到例如 ...

  5. (二)MVC项目+c3p0连接池

    一.项目架构 注:删除了原有的数据库工具,添加了c3p0数据库工具类,添加了c3p0的配置文件,修改了Dao类以及servlet类 二.修改或添加的类 1.C3p0Helper(暂时不了解事务回滚之类 ...

  6. Redis ZSet 有序集合

    有序集合类型与集合类型的区别就是他是有序的.有序集合是在集合的基础上为每一个元素关联一个分数,这就让有序集合不仅支持插入,删除,判断元素是否存在等操作外,还支持获取分数最高/最低的前N个元素.有序集合 ...

  7. 20175316 盛茂淞 2018-2019-2 《Java程序设计》实验四 《Android程序设计》 实验报告

    实验四 Android程序设计 实验要求 参考Android开发简易教程 完成云班课中的检查点,也可以先完成实验报告,直接提交.注意不能只有截图,要有知识点,原理,遇到的问题和解决过程等说明.实验报告 ...

  8. JS将本地图片转化成base64码

    在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...

  9. Hadoop的理解笔记

    1.2Hadoop与云计算的关系1.什么是云计算:一种基于互联网的计算,在其中共享的资源.软件和信息以一种按需的方式提供给计算机和设备 , 就如同日常生活中的电网一样. 什么是Hadoop:Hadoo ...

  10. oj上的测试点信息

    Accepted                          通过!(AC) Wrong Answer                  答案错.(WA) Runtime Error      ...