溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“如何解決ECharts鼠標(biāo)事件”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何解決ECharts鼠標(biāo)事件”吧！
事件是用戶或瀏覽器自身執(zhí)行的某種動作，如click、mouseover、頁面加載完畢后觸發(fā)load事件，都屬于事件。
為了記錄用戶的操作和行為路徑，需要完成鼠標(biāo)事件處理和組件交互的行為事件的處理。
響應(yīng)某個事件的函數(shù)稱為事件處理程序，也可稱為事件處理函數(shù)、事件句柄。鼠標(biāo)事件即鼠標(biāo)操作點擊圖表的圖形（如click、dblclick、contextmenu）或hover圖表的圖形（如mouseover、mouseout、mousemove）時觸發(fā)的事件。
在ECharts中，用戶的任何操作，都可能會觸發(fā)相應(yīng)的事件。在ECharts中，支持9種常規(guī)的鼠標(biāo)事件，包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu。
其中，click事件最為常用。常規(guī)的鼠標(biāo)事件及說明如表所示。
在一個圖表元素上相繼觸發(fā)mousedown和mouseup事件，才會觸發(fā)click事件。兩次click事件相繼觸發(fā)才會觸發(fā)dblclick事件。如果取消了mousedown或mouseup中的一個，click事件就不會被觸發(fā)。如果直接或間接取消了click事件，dblclick事件就不會被觸發(fā)。
利用某學(xué)院2020年專業(yè)招生情況繪制柱狀圖，如圖所示。
當(dāng)點擊添加鼠標(biāo)單擊事件的柱狀圖中的“人工智能”柱體后，彈出一個提示對話框，如上圖所示。
單擊提示對話框的確定按鈕后，將自動打開相應(yīng)的百度搜索頁面，如下圖所示。
該圖例的源代碼如下：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main" ></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main")); //基于準(zhǔn)備好的dom，初始化ECharts圖表
var option = { //指定圖表的配置項和數(shù)據(jù)
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba設(shè)置透明度0.1
title: { text: '某學(xué)院2020年專業(yè)招生情況匯總表', left: 70, top: 9 },
tooltip: { tooltip: { show: true }, },
legend: { data: ['2019年招生'], left: 422, top: 8 },
xAxis: { //配置x軸坐標(biāo)系
data: ["大數(shù)據(jù)", "云計算", "ERP", "人工智能", "軟件開發(fā)", "移動開發(fā)", "網(wǎng)絡(luò)技術(shù)"]
},
yAxis: {}, //配置y軸坐標(biāo)系
series: [{ //配置數(shù)據(jù)系列
name: '招生人數(shù):',
type: 'bar', barWidth: 55, //設(shè)置柱狀圖中每個柱子的寬度
data: [350, 200, 66, 210, 466, 200, 135]
}]
};
myChart.setOption(option); //使用剛指定的配置項和數(shù)據(jù)顯示圖表
//回調(diào)函數(shù)處理鼠標(biāo)點擊事件并跳轉(zhuǎn)到相應(yīng)的百度搜索頁面
myChart.on('click', function (params) {
var yt = alert("鼠標(biāo)單擊事件,您剛才單擊了:" + params.name);
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
window.addEventListener("resize", function () {
myChart.resize(); //使圖表自適應(yīng)窗口的大小
});
myChart.setOption(option); //為echarts對象加載數(shù)據(jù)
</script>
</body>
</html>在ECharts中，所有的鼠標(biāo)事件都包含一個參數(shù)params。params是一個包含單擊圖形的數(shù)據(jù)信息的對象，params中的基本屬性及含義如表所示。
回調(diào)函數(shù)本身是主函數(shù)的一個參數(shù)，將回調(diào)函數(shù)作為參數(shù)傳到另一個主函數(shù)中，當(dāng)主函數(shù)執(zhí)行完后，再執(zhí)行回調(diào)函數(shù)。這個過程就叫作回調(diào)。在回調(diào)函數(shù)中獲得對象中的數(shù)據(jù)名、系列名稱，然后在數(shù)據(jù)中索引得到其他的信息后，再更新圖表、顯示浮層等。
利用產(chǎn)品銷量和產(chǎn)量利潤數(shù)據(jù)繪制柱狀圖，如圖所示。
當(dāng)單擊左圖中的第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" ></div>
<script type="text/javascript">
//基于準(zhǔn)備好的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設(shè)置透明度0.1
title: { text: '產(chǎn)品銷量產(chǎn)量利潤統(tǒng)計', left: 70, top: 9 },
xAxis: { //配置x軸坐標(biāo)系
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {}, //配置y軸坐標(biāo)系
tooltip: { //配置提示框組件
trigger: 'item', show: true,
formatter: "{a} <br/> : {c}"
},
legend: {},
series: [ //配置數(shù)據(jù)系列
{ //設(shè)置數(shù)據(jù)系列1：銷量
name: '銷量', type: 'bar',
data: [5, 28, 16, 20, 15, 33]
},
{ //設(shè)置數(shù)據(jù)系列2：產(chǎn)量
name: '產(chǎn)量', type: 'bar',
data: [15, 38, 20, 24, 20, 45]
},
{ //設(shè)置數(shù)據(jù)系列3：利潤
name: '利潤', type: 'bar',
data: [25, 15, 10, 10, 15, 22]
}
]
};
myChart.setOption(option); //使用剛指定的配置項和數(shù)據(jù)顯示圖表
window.addEventListener("resize", function () {
myChart.resize(); //使圖表自適應(yīng)窗口的大小
});
//回調(diào)函數(shù)處理鼠標(biāo)點擊事件并且顯示各數(shù)據(jù)信息內(nèi)容
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>在包含鼠標(biāo)單擊事件的參數(shù)params的柱狀圖代碼中，可以通過調(diào)用回調(diào)函數(shù)，訪問鼠標(biāo)事件的參數(shù)params中的基本屬性，如params.dataIndex、params.name、params.seriesName、params.value，在倒第數(shù)12、13行 顯示出“第2件產(chǎn)品:羊毛衫產(chǎn)量為38”。
倒數(shù)第11行至倒數(shù)第2行代碼 依次訪問鼠標(biāo)事件的參數(shù)params中的10種基本屬性，并依次顯示在圖5-13的提示對話框中的每一行上。
注意，其中的params.data，params.dataType的值為undefined。
感謝各位的閱讀，以上就是“如何解決ECharts鼠標(biāo)事件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何解決ECharts鼠標(biāo)事件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼