给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'事件:

 var ZR_EVENT_LISTENS = [
        'CLICK',
        'DBLCLICK',
        'CONTEXTMENU',
        'MOUSEOVER',
        'MOUSEOUT',
        'DRAGSTART',
        'DRAGEND',
        'DRAGENTER',
        'DRAGOVER',
        'DRAGLEAVE',
        'DROP'
    ];

 

_oncontextmenu: function (param) {
	//if(arguments[0].event.button == '2'){
	//	callChartListMethodReverse(this, 'onmousedown', 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);
			}
		}
	//}
},

 修改ECharts源码的其他地方就不特别指出了,有兴趣查看修改后的源码。

 

    现在对界面文件进行些说明,下面模拟了些血缘分析的静态数据(项目是从后台查出的,这里就只能随便模拟一些数据看效果了),准备一个div,用来定义右键菜单:

<div id="menuuu"  onMouseLeave ="this.style.display = 'none';">
		<ul><!--右键弹出菜单-->		
			<li id="menu_blood" onClick="alert('血缘分析');" onMouseOver="this.style.background = '#999999';" onMouseOut="this.style.background = '#CCCCCC';">
				<img src="menu_blood.png" /><font>血缘分析</font>
			</li>
			<li id="menu_influence" onClick="alert('影响分析');" onMouseOver="this.style.background = '#999999';" onMouseOut="this.style.background = '#CCCCCC';">
				<img src="menu_influence.png" /><font>影响分析</font>
			</li>
		</ul>
	</div>

 引入修改后的echarts:

<script src="../echarts-2.2.2/echarts-2.2.2/build/dist/echarts_mhf.js"></script>

 申明使用到右键菜单事件:

function rightBt(param){
	var menu = document.getElementById("menuuu");
	var event = param.event;
	var pageX = event.pageX;
	var pageY = event.pageY;
	menu.style.left = pageX + 'px';
	menu.style.top = pageY + 'px';
	menu.style.display = "block";
}
							
//myChart.on(ecConfig.EVENT.CLICK, focus);
//myChart.on(ecConfig.EVENT.MOUSEDOWN, rightBt);
myChart.on(ecConfig.EVENT.CONTEXTMENU, rightBt);

 好了差不多了,看效果图:

 


给ECharts添加右键点击事件,实现右键功能菜单_第1张图片
 

附件里提供修改后的echarts_mhf.js 下载,注意:

\build\dist\echarts_mhf.js  是压缩后的,项目开发时使用

\build\source\echarts_mhf.js 是未压缩的,供查看源码使用

你可能感兴趣的:(js,右键菜单,ECharts,血缘分析)