echarts自定义右键事件的实现

给鼠标添加自定义右击事件,由于历史版本原因，echarts2在项目中仍然有比较大的使用占比，用到图表的很多地方依然建立在echarts2版本之上。这里主要讲解一下项目开发过程中对于不同版本的echarts图标添加自定义右键事件；

echarts2右键实现

在echarts2.x 的版本中对于开发者是不支持自定义右击事件的，但是可通过修改源码来实现效果；
echarts2.x源码修改文件有config.js和echarts.js文件两个部分；
1、修改源码文件config.js
config.js文件主要是开放给开发者可调用的属性和方法，用来处理用户的选择。首先需要开放一个右键动作给开发者调用：
给config文件注册右键事件CONTEXTMENU，开放右键事件入口给开发者，开发者可以使用CONTEXTMENU来添加自定义的右
键属性；

1
2
3
4
5
6
7
8
9
10
11
12
13
 
EVENT: {
// ‐‐‐‐‐‐‐全局通用
REFRESH: 'refresh',
RESTORE: 'restore',
RESIZE: 'resize',
CLICK: 'click',
DBLCLICK: 'dblclick',
CONTEXTMENU: 'contextmenu', #注册右击事件配置contextmenu
HOVER: 'hover',
MOUSEOUT: 'mouseout',
},
 

2、修改源码文件echarts.js
echarts.js内部依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，首先需要给全局通用
变量ZR_EVENT_LISTENS中添加CONTEXTMENU事件；构造函数根据注册的事件集合向底层ZRender初始化各个点
击动作；

1
2
3
4
5
 
var ZR_EVENT_LISTENS = [
'CLICK', 'DBLCLICK', 'CONTEXTMENU', 'MOUSEOVER', 'MOUSEOUT',
'DRAGSTART', 'DRAGEND', 'DRAGENTER', 'DRAGOVER', 'DRAGLEAVE', 'DROP'
 

初始化构造函数中注册右击事件动作：

1
2
3
4
5
6
7
8
9
10
11
12
13
 
Echarts.prototype = {
_oncontextmenu: function (param) {
if (param.target) {
var ecData = this._eventPackage(param.target);
if (ecData && ecData.seriesIndex != null) {
this._messageCenter.dispatch(ecConfig.EVENT.CONTEXTMENU, param.event,
ecData, this);
}
}
}
}
 

3、页面添加右键事件
js中调用自定义的CONTEXTMENU事件：

1
2
3
4
5
6
7
8
9
10
11
 
var ec = require('echarts');
var chart = ec.init(document.getElementById("tree"));
chart.setOption(option);
//添加右击事件
var ecConfig = require('echarts/config');
chart.on(ecConfig.EVENT.CONTEXTMENU, showMenu);
function showMenu(param){
console.log('param===',param);
}
 

再看页面效果出现自定义右击效果；
4、屏蔽默认右键属性
在页面查看时，会发现默认的右击事件效果还在，还是会出现插件自带的右击事件，保存图片等；
所以需要先根据需求来屏蔽自带右键属性，再调用自定义实现定制右键特效；

1
2
3
4
5
6
 
var tree = document.getElementById("tree");
tree.oncontextmenu = function() {
return false;
};
 

这样一个基于echarts2版本的完整右击特效就实现了。

echarts3右键实现

熟悉官网echarts3的api可看到在对外开放给开发者的事件EVENT列表中，已将contextmenu事件开放，只需引用
on方法添加contextmenu事件即可实现自定义事件。
1、添加事件
使用on方法：

1
2
3
4
5
6
7
 
//新加上鼠标右击事件
myChart.on('contextmenu', showMenu);
function showMenu(param){
console.log('param===',param);
}
 

在看页面效果，出现自定义右击效果；
2、屏蔽默认右键属性
同样的问题，会发现默认的右击事件效果还在，还是会出现默认的右击事件，保存图片等；

1
2
3
4
5
6
 
//去除默认的鼠标事件
var tree = document.getElementById("tree");
tree.oncontextmenu = function() { return false; };
即可实现效果
 

示例实现
目标：右击显示一个自定义小菜单，触发右键动作展示自定义菜单，菜单出现位置随鼠点击的位置变化，鼠标移出
菜单区域时隐藏菜单；
右键特效：基于以上两种不同版本的实现方法，可以实现自定义的菜单；
菜单位置效果：打印鼠标的右击参数，点击获取的参数中的event提供一些基础的坐标属性；对于echarts2和3版本
获取坐标的参数位置与格式有所不同，需区别对待；部分参数如：type：”contextmenu”，offsetX：200，
offsetY：140等。
取鼠标右击的坐标offsetX，offsetY属性：

1
2
3
4
5
6
7
8
9
10
11
 
js:
function showMenu(param){
console.log('p==============',param);
var menu = document.getElementById("struct_menu");
var event = param.event;
menu.style.left = event.offsetX + 'px';
menu.style.top = event.offsetY + 20 + 'px';
menu.style.display = "block";
}
html:

 

    • 新建单位

 

 

1
 

 

1
 

以上方案，基本实现了目标中要求。方案中菜单隐藏依赖的是onMouseOver事件，但是当onMouseOver一直未触
发时，菜单的隐藏就会出现不会隐藏的问题，如何解决？
完善修改：添加点击事件主动隐藏菜单，当下一次点击事件触发时主动隐藏；

1
2
3
4
5
6
7
 
chart.on('click', hideMenu);
function hideMenu(param) {
var menu = document.getElementById("struct_menu");
menu.style.display = "none";
}
 

 

源链接

Hacking more

...