echarts3鼠標(biāo)右擊事件實現(xiàn)

echarts3已將contextmenu事件開放,只需引用on方法添加contextmenu事件即可實現(xiàn)自定義事件。
廢話不多說直接上代碼,小伙伴可直接拷貝代碼到html文件,然后瀏覽器打開體驗

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        type: 'scatter'
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
dom.oncontextmenu = () => {return false} //屏蔽右鍵默認(rèn)事件
myChart.on('contextmenu', function (params) { //調(diào)用右鍵事件
    // 控制臺打印數(shù)據(jù)的名稱
    console.log(params);
});
       </script>
   </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,172評論 3 119
  • 1.玩本身就是學(xué)習(xí)的過程。 2.找到內(nèi)心召喚的事情。 3.教育當(dāng)中激情最重要、決心、自信。 不要打擊孩子的自信心。...
    松球42閱讀 1,069評論 0 1
  • 從上海8月9號回家到現(xiàn)在,第一次拿起手機(jī)寫簡書,有那么忙嗎?說實話,不忙!事情多嗎?不多! 回來后家里還真的思緒很...
    桂花香香閱讀 268評論 1 6
  • ?常常聽說數(shù)據(jù)預(yù)處理,后處理相對少見,本篇來說說何時需要后處理,以及后處理的一些簡單方法。 ?數(shù)據(jù)挖掘的流程一般是...
    xieyan0811閱讀 1,490評論 0 1
  • 如何推銷自己的產(chǎn)品,讓自己的產(chǎn)品走向市場,在市場上占有一席之地,是春生的魂牽夢繞,它直接關(guān)系到產(chǎn)品的銷量,直接關(guān)系...
    西嶺布衣閱讀 149評論 0 2

友情鏈接更多精彩內(nèi)容