給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>

 

<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);

 

 好了差不多了，看效果圖：

 

 

轉http://mhf-csu.iteye.com/blog/2223804

代碼路徑

http://download.csdn.net/detail/mhf_csu/8862597