ECharts鼠標事件的處理方法詳解
事件是用戶或瀏覽器自身執(zhí)行的某種動作，如click、mouseover、頁面加載完畢后觸發(fā)load事件，都屬于事件。
為了記錄用戶的操作和行為路徑，需要完成鼠標事件處理和組件交互的行為事件的處理。
響應某個事件的函數(shù)稱為事件處理程序，也可稱為事件處理函數(shù)、事件句柄。鼠標事件即鼠標操作點擊圖表的圖形（如click、dblclick、contextmenu）或hover圖表的圖形（如mouseover、mouseout、mousemove）時觸發(fā)的事件。
在ECharts中，用戶的任何操作，都可能會觸發(fā)相應的事件。在ECharts中，支持9種常規(guī)的鼠標事件，包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu。
其中，click事件最為常用。常規(guī)的鼠標事件及說明如表所示。
在一個圖表元素上相繼觸發(fā)mousedown和mouseup事件，才會觸發(fā)click事件。兩次click事件相繼觸發(fā)才會觸發(fā)dblclick事件。如果取消了mousedown或mouseup中的一個，click事件就不會被觸發(fā)。如果直接或間接取消了click事件，dblclick事件就不會被觸發(fā)。
利用某學院2020年專業(yè)招生情況繪制柱狀圖，如圖所示。
當點擊添加鼠標單擊事件的柱狀圖中的“人工智能”柱體后，彈出一個提示對話框，如上圖所示。
單擊提示對話框的確定按鈕后，將自動打開相應的百度搜索頁面，如下圖所示。
該圖例的源代碼如下：
<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 = { //指定圖表的配置項和數(shù)據(jù)
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba設置透明度0.1
title: { text: '某學院2020年專業(yè)招生情況匯總表', left: 70, top: 9 },
tooltip: { tooltip: { show: true }, },
legend: { data: ['2019年招生'], left: 422, top: 8 },
xAxis: { //配置x軸坐標系
data: ["大數(shù)據(jù)", "云計算", "ERP", "人工智能", "軟件開發(fā)", "移動開發(fā)", "網(wǎng)絡技術"]
},
yAxis: {}, //配置y軸坐標系
series: [{ //配置數(shù)據(jù)系列
name: '招生人數(shù):',
type: 'bar', barWidth: 55, //設置柱狀圖中每個柱子的寬度
data: [350, 200, 66, 210, 466, 200, 135]
}]
};
myChart.setOption(option); //使用剛指定的配置項和數(shù)據(jù)顯示圖表
//回調函數(shù)處理鼠標點擊事件并跳轉到相應的百度搜索頁面
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對象加載數(shù)據(jù)
</script>
</body>
</html>
在ECharts中，所有的鼠標事件都包含一個參數(shù)params。params是一個包含單擊圖形的數(shù)據(jù)信息的對象，params中的基本屬性及含義如表所示。
回調函數(shù)本身是主函數(shù)的一個參數(shù)，將回調函數(shù)作為參數(shù)傳到另一個主函數(shù)中，當主函數(shù)執(zhí)行完后，再執(zhí)行回調函數(shù)。這個過程就叫作回調。在回調函數(shù)中獲得對象中的數(shù)據(jù)名、系列名稱，然后在數(shù)據(jù)中索引得到其他的信息后，再更新圖表、顯示浮層等。
利用產(chǎn)品銷量和產(chǎn)量利潤數(shù)據(jù)繪制柱狀圖，如圖所示。
當單擊左圖中的第2件產(chǎn)品“羊毛衫”的“產(chǎn)量”柱體后，彈出一個提示對話框，如右圖所示。
由右圖可以得到左圖中的第2件產(chǎn)品“羊毛衫”的“產(chǎn)量”柱體params參數(shù)的各屬性信息。
圖例的源代碼如下：
<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 = { //指定圖表的配置項和數(shù)據(jù)
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba設置透明度0.1
title: { text: '產(chǎn)品銷量產(chǎn)量利潤統(tǒng)計', left: 70, top: 9 },
xAxis: { //配置x軸坐標系
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {}, //配置y軸坐標系
tooltip: { //配置提示框組件
trigger: 'item', show: true,
formatter: "{a} <br/> : {c}"
},
legend: {},
series: [ //配置數(shù)據(jù)系列
{ //設置數(shù)據(jù)系列1：銷量
name: '銷量', type: 'bar',
data: [5, 28, 16, 20, 15, 33]
},
{ //設置數(shù)據(jù)系列2：產(chǎn)量
name: '產(chǎn)量', type: 'bar',
data: [15, 38, 20, 24, 20, 45]
},
{ //設置數(shù)據(jù)系列3：利潤
name: '利潤', type: 'bar',
data: [25, 15, 10, 10, 15, 22]
}
]
};
myChart.setOption(option); //使用剛指定的配置項和數(shù)據(jù)顯示圖表
window.addEventListener("resize", function () {
myChart.resize(); //使圖表自適應窗口的大小
});
//回調函數(shù)處理鼠標點擊事件并且顯示各數(shù)據(jù)信息內容
myChart.on('click', function (params) {
alert("第" + (params.dataIndex + 1) + "件產(chǎn)品:" + 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對象加載數(shù)據(jù)
</script>
</body>
</html>
在包含鼠標單擊事件的參數(shù)params的柱狀圖代碼中，可以通過調用回調函數(shù)，訪問鼠標事件的參數(shù)params中的基本屬性，如params.dataIndex、params.name、params.seriesName、params.value，在倒第數(shù)12、13行 顯示出“第2件產(chǎn)品:羊毛衫產(chǎn)量為38”。
倒數(shù)第11行至倒數(shù)第2行代碼 依次訪問鼠標事件的參數(shù)params中的10種基本屬性，并依次顯示在圖5-13的提示對話框中的每一行上。
注意，其中的params.data，params.dataType的值為undefined。
總結
到此這篇關于ECharts鼠標事件處理的文章就介紹到這了,更多相關ECharts鼠標事件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要針對javascript模塊化為大家進行簡單解析，如何寫一個模塊，在頁面中加載模塊的方法，感興趣的小伙伴們可以參考一下2016-04-04
TypeScript中type和interface的區(qū)別及注意事項
type的類型別用可以用戶其他的類型,比如聯(lián)合類型、元祖類型、基本類型,interface不行,下面這篇文章主要給大家介紹了關于TypeScript中type和interface的區(qū)別及注意事項的相關資料,需要的朋友可以參考下2022-10-10
本文給大家分享的是使用javascript實現(xiàn)的數(shù)組轉換json的代碼，非常簡單實用，相當于JSON.stringify(array);，有需要的小伙伴可以參考下。2015-06-06
這篇文章主要為大家信息介紹了JavaScript中的常見錯誤與異常處理的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
最近因項目需要用ACCESS做數(shù)據(jù)庫開發(fā)WEB項目看論壇上還許多人問及ACCESS被注入的安全問題 許多人解決的方法仍然是用Replace替換特殊字符，然而這樣做也并沒有起到太大做用2008-06-06
在本篇文章里小編給大家整理的是關于JavaScript中this的使用以及代碼實例，需要的朋友們學習下。2020-02-02
這篇文章主要介紹了js實現(xiàn)點擊鏈接后延遲3秒再跳轉的方法,通過javascript的setTimeout方法實現(xiàn)延遲跳轉的功能,需要的朋友可以參考下2015-06-06
本篇文章主要介紹了JavaScript實現(xiàn)圖片輪播組件代碼示例，對圖片輪播效果感興趣的小伙伴們可以參考一下。2016-11-11
這篇文章主要介紹了JavaScript如何編寫簡單的計算器，功能很簡單，可以實現(xiàn)加減乘除功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
淺析JavaScript定時器setTimeout的時延問題
這篇文章主要為大家詳細介紹了JavaScript中定時器setTimeout有最小時延的相關知識,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11