给ECharts添加右键点击事件,实现右键功能菜单
由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2.2.2 的echarts.js给修改了一番。将过程描述如下,后面提供修改后的echarts.js下载,欢迎使用!
先说明一下,js获得右键事件大概从下面两个事件考虑:
1、onmousedown:通过判断e.button = '2' 时,响应右键事件。
2、oncontextmenu:通过先屏蔽默认的右键菜单事件,再给需要响应右键菜单的组件加上contextmenu的响应。
第一种,我先实现了,但是ECharts的组件定以有click事件和鼠标拖动事件,所以在mousedown的时候又触发多个事件,这样做起来,页面在快速点击测试的时候,总是感觉反映迟钝,甚至造成部分不响应。所以最后选了第二种做法:
新增'CONTEXTMENU'事件:
修改ECharts源码的其他地方就不特别指出了,有兴趣查看修改后的源码。
现在对界面文件进行些说明,下面模拟了些血缘分析的静态数据(项目是从后台查出的,这里就只能随便模拟一些数据看效果了),准备一个div,用来定义右键菜单:
- <script src="../echarts-2.2.2/echarts-2.2.2/build/dist/echarts_mhf.js"></script>
申明使用到右键菜单事件:
好了差不多了,看效果图:

转http://mhf-csu.iteye.com/blog/2223804
代码路径
http://download.csdn.net/detail/mhf_csu/8862597
给ECharts添加右键点击事件,实现右键功能菜单的更多相关文章
- Echarts如何添加鼠标点击事件?防止重复触发点击事件
Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...
- echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
- echarts雷达图点击事件 包含(2.x,3.85,4.02)测试
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...
- 后台找到repeater里面的div并添加客户端点击事件
public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...
- 【读书笔记】iOS-storyBoard-为一个按钮添加一个点击事件
按照故事板的用语,应用中的一个界面屏幕被称作一个”场景(Scene)",以后添加额外的场景时,停靠区中将有另一个部分. 一,新建立一个工程,如图所示. 二,选中Main.storyboard ...
- react添加右键点击事件
1.在HTML里面支持contextmenu事件(右键事件).所以需要在组建加载完时添加此事件,销毁组建时移除此事件. 2. 需要增加一个state,名称为visible,用来控制菜单是否显示.在_h ...
- echarts的地图点击事件
1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...
- Echarts柱状图的点击事件
最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...
- Android 高级UI设计笔记20:RecyclerView 的详解之RecyclerView添加Item点击事件
1. 引言: RecyclerView侧重的是布局的灵活性,虽说可以替代ListView但是连基本的点击事件都没有,这篇文章就来详细讲解如何为RecyclerView的item添加点击事件,顺便复习一 ...
随机推荐
- 关于hessian接口类方法顺序及对象序列化的实战研究
前段时间,提供出去的hessian接口被调用时,调用方出现序列化异常以及其他莫名的异常.同事说hessian接口使用有2个注意事项: 1.对于已经存在的hessian接口,后续增加的方法只能加在文件末 ...
- mongodb的分布式集群(2、副本集)
概述 副本集是主从复制的一种,是一种自带故障转移功能的主从复制.攻克了上述主从复制的缺点.实现主server发生问题后.不需人为介入.系统自己主动从新选举一个新的主server的功能. ...
- appium+python自动化58-xpath定位
基本属性定位 以淘宝app为例,定位左上角扫一扫按钮 1.可以通过text文本定位到 //*[@text='text文本属性'] # 定位text driver.find_element_by_xpa ...
- Qt控件中的属性sizePolicy说明
1. Fixed: 大小不能改变 2. Minimum: 已经是最小, 不能再被缩小, 但能放大. 3. Maximum: 已经是最大, 不能再被放大, 但能缩小. 4. Preferred: 控件 ...
- C99规范
. 增加restrict指针 C99中增加了公适用于指针的restrict类型修饰符,它是初始访问指针所指对象的惟一途径,因此只有借助restrict指针表达式才能访问对象.restrict指针指针主 ...
- Python学习(六)模块 —— 标准模块
Python 标准模块 Python 带有一个标准模块库,并发布有独立的文档(库参考手册).对于程序员而言,标准库与语言本身同样重要,它好比一个百宝箱,能为各种常见的任务提供完美的解决方案. 这边简单 ...
- 怎么删除桌面右键"打开好桌道壁纸"
“好桌道”是一款优秀的桌面美化工具,其中的子程序“好桌道壁纸”是其重要的组成部分,但是在卸载其子程序“好桌道壁纸”时,往往会在桌面的鼠标右键中残留下“打开好桌道壁纸”项,下面解密通过修改注册表的方式彻 ...
- Ubuntu 所需要的中文字体美化操作步骤
中文字体美化是个很讨厌的事情,无数初学者在这里面浪费了无数时间,做了无数没有意义的事情.但这也是不得不做的,我把 Debian/Ubuntu 所需要的中文字体美化操作步骤详细记录在这里,希望能节约大家 ...
- Ubuntu 12.04 LTS安装Windows字体
内容参考自别人的博客:http://www.cnblogs.com/zhj5chengfeng/p/3251009.html 1. 为了方便,先将Windows字体拷贝到~/WinFonts下. 我是 ...
- Node.js:Web模块、文件系统
一.web模块 Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL,与客户端的网络 ...