ECharts滑鼠事件的處理方法詳解
事件是使用者或瀏覽器自身執行的某種動作，如click、mouseover、頁面載入完畢後觸發load事件，都屬於事件。
為了記錄使用者的操http://www.cppcns.com作和行為路徑，需要完成滑鼠事件處理和元件互動的行為事件的處理。
響應某個事件的函式稱為事件處理程式，也可稱為事件處理函式、事件控制代碼。滑鼠事件即滑鼠操作點選圖表的圖形（如click、dblclick、contextmenu）或hover圖表的圖形（如mouseover、mouseout、mousemove）時觸發的事件。
在ECharts中，使用者的任何操作，都可能會觸發相應的事件。在ECharts中，支援9種常規的滑鼠事件，包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu。
其中，click事件最為常用。常規的滑鼠事件及說明如表所示。
在一個圖表元素上相繼觸發mousedown和mouseup事件，才會觸發click事件。兩次click事件相繼觸發才會觸發dblclick事件。如果取消了mousedown或mouseup中的一個，click事件就不會被觸發。如果直接或間接取消了click事件，dblclick事件就不會被觸發。
利用某學院2020年專業招生情況繪製柱狀圖，如圖所示。
當點選新增滑鼠單擊事件的柱狀圖中的“人工智慧”柱體後，彈出一個提示對話方塊，如上圖所示。
單擊提示對話方塊的確定按鈕後，將自動開啟相應的百度搜索頁面，如下圖所示。
該圖例的原始碼如下：
<html> <head> <meta charset="utf-8"> <script type="text/javascript" src='js/echarts.js'></script> </head> <body> <div id="main" style="width: 800px; height: 600px"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById("main")); //基於準備好的dom，初始化ECharts圖表 var option = { //指定圖表的配置項和資料 color: ['LimeGreen','DarkGreen','red','blue','Purple'],backgroundColor: 'rgba(128,128,0.1)',//rgba設定透明度0.1 title: { text: '某學院2020年專業招生情況彙總表',left: 70,top: 9 },tooltip: { tooltip: { show: true },},legend: { data: ['2019年招生'],left: 422,top: 8 },xAxis: { //配置x軸座標系 data: ["大資料","雲端計算","ERP","人工智慧","軟體開發","移動開發","網路技術"] },yAxis: {},//配置y軸座標系 series: [{ //配置資料系列 name: '招生人數:',type: 'bar',barWidth: 55,//設定柱狀圖中每個柱子的寬度 datwww.cppcns.coma: [350,200,66,210,466,135] }] }; myChart.setOption(option); //使用剛指定的配置項和資料顯示圖表 //回撥函式處理滑鼠點選事件並跳轉到相應的百度搜索頁面 myChart.on('click',function (params) { var yt = alert("滑鼠單擊事件,您剛才單擊了:" + params.name); window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); }); window.addEventListener("resize",function () { myChart.resize(); //使圖表自適應視窗的大小 }); myChart.setOption(option); //為echarts物件載入資料 </script> </body> </html>
在ECharts中，所有的滑鼠事件都包含一個引數params。params是一個包含單擊圖形的資料資訊的物件，params中的基本屬性及含義如表所示。
回撥函式本身是主函式的一個引數，將回調函式作為引數傳到另一個主函式中，當主函式執行完後，再執行回撥函式。這個過程就叫作回撥。在回撥函式中獲得物件中的資料名、系列名稱，然後在資料中索引得到其他的資訊後，再更新圖表、顯示浮層等。
利用產品銷量和產量利潤資料繪製柱狀圖，如圖所示。
當單擊左圖中的第2件產品“羊毛衫”的“產量”柱體後，彈出一個提示對話方塊，如右圖所示。
由右圖可以得到左圖中的第2件產品“羊毛衫”的“產量”柱體params引數的各屬性資訊。
圖例的原始碼如下：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
//基於準備好的dom，初始化ECharts圖表
var myChart = echarts.init(document.getElementById("main"));
var option = { //指定圖表的配置項和資料
color: ['LimeGreen',//rgba設定透明度0.1
title: { text: '產品銷量產量利潤統計',xAxis: { //配置x軸座標系
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},//配置y軸座標系
tooltip: { //配置提示框元件
trigger: 'item',show: true,formatter: "{a} <br/>{b} : {c}"
},legend: {},series: [ //配置資料系列
{ //設定資料系列1：銷量
name: '銷量',data: [5,28,16,20,15,33]
},{ //設定資料系列2：產量
name: '產量',data: [15,38,24,45]
},{ //設定資料系列3：利潤
name: '利潤',data: [25,10,22]
}
]
};
myChart.setOption(option); //使用剛指定的配置項和資料顯示圖表
window.addEventListener("resize",function () {
myChart.resize(); //使圖表自適應視窗的大小
});
//回撥函式處理滑鼠點選事件並且顯示各資料資訊內容
myChart.on('click',function (params) {
alert("第" + (params.dataIndex + 1) + "件產品:" + params.name + "的" +
params.seriesName + "為:" + params.value +
"\n\n 1--componentType:" + params.componentType +
"\n 2--seriesType:" + params.seriesType +
"\n 3--seriesIndex:" + params.seriesIndex +
"\n 4--seriesName:" + params.seriesName +
"\n 5--name:" + params.name +
"\n 6--dataIndex:" + params.dataIndex +
"\n 7--data:" + params.datax +
"\n 8--dataType:" + params.dataType +
"\n 9--value:" + params.value +
"\n 10--color:" + params.color);
});
myChart.setOption(option); //為echarts物件加www.cppcns.com載資料
</script>
</body>
</html>
在包含滑鼠單擊事件的引數params的柱狀圖程式碼中，可以通過呼叫回撥函式，訪問滑鼠事件的引數params中的基本屬性，如params.dataIndex、params.name、params.seriesName、params.value，在倒第數12、13行 顯示出“第2件產品:羊毛衫產量為38”。
倒數第11行至倒數第2行程式碼 依次http://www.cppcns.com訪問滑鼠事件的引數paraPrEcCqms中的10種基本屬性，並依次顯示在圖5-13的提示對話方塊中的每一行上。
注意，其中的params.data，params.dataType的值為undefined。
總結
到此這篇關於ECharts滑鼠事件處理的文章就介紹到這了,更多相關ECharts滑鼠事件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！