由于项目的需要,使用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,用来定义右键菜单:

  1. <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添加右键点击事件,实现右键功能菜单的更多相关文章

  1. Echarts如何添加鼠标点击事件?防止重复触发点击事件

    Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...

  2. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  3. echarts雷达图点击事件 包含(2.x,3.85,4.02)测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  4. 后台找到repeater里面的div并添加客户端点击事件

    public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...

  5. 【读书笔记】iOS-storyBoard-为一个按钮添加一个点击事件

    按照故事板的用语,应用中的一个界面屏幕被称作一个”场景(Scene)",以后添加额外的场景时,停靠区中将有另一个部分. 一,新建立一个工程,如图所示. 二,选中Main.storyboard ...

  6. react添加右键点击事件

    1.在HTML里面支持contextmenu事件(右键事件).所以需要在组建加载完时添加此事件,销毁组建时移除此事件. 2. 需要增加一个state,名称为visible,用来控制菜单是否显示.在_h ...

  7. echarts的地图点击事件

    1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...

  8. Echarts柱状图的点击事件

    最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...

  9. Android 高级UI设计笔记20:RecyclerView 的详解之RecyclerView添加Item点击事件

    1. 引言: RecyclerView侧重的是布局的灵活性,虽说可以替代ListView但是连基本的点击事件都没有,这篇文章就来详细讲解如何为RecyclerView的item添加点击事件,顺便复习一 ...

随机推荐

  1. CentOS6.5使用yum命令方便快捷安装Nginx与卸载

    原文:https://my.oschina.net/ramboo/blog/223408 当然,首先要求是可以联网的CentOS系统,因为yum安装需要互联网连接. 卸载命令:yum remove n ...

  2. Android之MVC模式

    MVC (Model-View-Controller):M是指逻辑模型,V是指视图模型,C则是控制器.一个逻辑模型可以对于多种视图模型,比如一批统计数据 你可以分别用柱状图.饼图来表示.一种视图模型也 ...

  3. 【转载】Redis Sentinel 高可用服务架构搭建

    作者:田园里的蟋蟀 出处:http://www.cnblogs.com/xishuai/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接. 阅读 ...

  4. Navicat工具里的empty table和truncate table的区别

    如图: 相同点:都会清空数据表里的所有数据 不同点:empty table是清空表里的数据:truncate table是删除表,然后再创建这张表 意义:对于主索引自动增加的情况,empty清表后,新 ...

  5. asp中将系统货币符号¥改为美国货币符号$的做法

    我们一般用FormatCurrency()函数得到字符串前面都会加上人民币符号¥.但在做一些网站时想把他们变成$. 可以在网面的前面加上一名话就OK了 SetLocale("en-us&qu ...

  6. UVA 10790 (13.08.06)

     How Many Points of Intersection?  We have two rows. There are a dots on the toprow andb dots on the ...

  7. python 下载安装setuptools及pip应用

    1.首先下载python安装程序,下载地址:https://www.python.org/download/releases/2.7.8/ 如下图: 因为我的机器是32位的就选择了Windows x8 ...

  8. 【架构】OpenResty相关资料

    OpenResty最佳实践 在2012年的时候,我加入到奇虎360公司,为新的产品做技术选型.由于之前一直混迹在python圈子里面,也接触过nginx c模块的高性能开发,一直想找到一个兼备pyth ...

  9. mysql安装错误总结

    1.若在启动mysql服务时出现如下错误,可查看错误日志找出错误原因. Error:Starting MySQL.The server quit without updating PID file ( ...

  10. Python 访问set

    访问set 由于set存储的是无序集合,所以我们没法通过索引来访问. 访问 set中的某个元素实际上就是判断一个元素是否在set中. 例如,存储了班里同学名字的set: >>> s ...