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. javascript从网络下载随机笑话

    /*** * 讲笑话函数(调试用) * @param callback 回调函数 */ function randomText(callback) { var result =''; $.ajax({ ...

  2. 雨田家园 delphi 拆分字符串

    最近在使用Delphi开发一种应用系统的集成开发环境.其中需要实现一个字符串拆分功能,方法基本原型应该是:procedure SplitString(src: string ; ch: Char; v ...

  3. Node.js使用supervisor

    对代码的修改,每次都要重新启动服务器,使用supervisor它会监视你对代码的改动,并自动重启 Node.js. 1> npm安装: npm install -g supervisor 2&g ...

  4. Python3之类和实例

    面向对象的重要概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如学生类Student,而实例是根据类创建出来的一个个具体的对象,每个对象都拥有相同的方法,单各自的数据可能 ...

  5. Django:文章详情页面评论功能需要登录后才能使用,登录后自动返回到文章详情页

    背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...

  6. 2019年12月4日 Linux总结

    System V init运行级别 systemd目标名称 作用 0 runlevel0.target,poweroff.target 关机 1 runlevel1.target,poweroff.t ...

  7. Go之接口interface(1)

    1. 什么是interface在此之前,我们遇到的都是具体的类型,比如数字类型.切片类型等等.对于这些具体的类型,我们总是能知道它是什么.可以利用它来做什么,比如对于一个数字类型,我们知道可以对其进行 ...

  8. 学习笔记:oracle学习一:oracle11g体系结构之体系结构概述和逻辑存储结构

    目录 1.oracle 11g体系结构概述 1.1 三个重要概念 1.2 oracle数据库存储结构 2 逻辑存储结构 2.1 数据块(Data Blocks) 2.2 数据区(Extent) 2.3 ...

  9. 帮助理解Docker,生动装逼介绍Docker

    为了帮助理解Docker,整理了一下 Docker组成的三个基本概念: 仓库(Repository) 镜像(Image) 容器(Container) 仓库:(Repository)——集中存放镜像文件 ...

  10. keras损失函数详解

    以下信息均来自官网 ------------------------------------------------------------------------------------------ ...