由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2.2.2 的echarts.js给修改了一番。将过程描述如下,后面提供修改后的echarts.js下载,欢迎使用!
先说明一下,js获得右键事件大概从下面两个事件考虑:
1、onmousedown:通过判断e.button = '2' 时,响应右键事件。
2、oncontextmenu:通过先屏蔽默认的右键菜单事件,再给需要响应右键菜单的组件加上contextmenu的响应。
第一种,我先实现了,但是ECharts的组件定以有click事件和鼠标拖动事件,所以在mousedown的时候又触发多个事件,这样做起来,页面在快速点击测试的时候,总是感觉反映迟钝,甚至造成部分不响应。所以最后选了第二种做法:
新增'CONTEXTMENU'事件:
var ZR_EVENT_LISTENS = [
'CLICK',
'DBLCLICK',
'CONTEXTMENU',
'MOUSEOVER',
'MOUSEOUT',
'DRAGSTART',
'DRAGEND',
'DRAGENTER',
'DRAGOVER',
'DRAGLEAVE',
'DROP'
];