echar2 ，3 自定义右键菜单右击事件

最新推荐文章于 2024-04-19 17:29:39 发布

江苏-杰森

最新推荐文章于 2024-04-19 17:29:39 发布

阅读量2.3k

点赞数 5

echarts2右键实现

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

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初始化各个点
击动作；

var ZR_EVENT_LISTENS = [

'CLICK', 'DBLCLICK', 'CONTEXTMENU', 'MOUSEOVER', 'MOUSEOUT',

'DRAGSTART', 'DRAGEND', 'DRAGENTER', 'DRAGOVER', 'DRAGLEAVE', 'DROP'

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

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事件：

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

var tree = document.getElementById("tree");

tree.oncontextmenu = function() {

return false;

};

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

echarts3右键实现

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

//新加上鼠标右击事件

myChart.on('contextmenu', showMenu);

function showMenu(param){

console.log('param===',param);

}

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

//去除默认的鼠标事件

var tree = document.getElementById("tree");

tree.oncontextmenu = function() { return false; };

即可实现效果

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