快捷導(dǎo)航

ECharts鼠標(biāo)事件的處理方法詳解

更新時(shí)間：2021年06月17日 10:36:02 作者：凌洪濤

最近一直在使用echarts,當(dāng)然也被其中的各種屬性整的有些頭大,這篇文章主要給大家介紹了關(guān)于ECharts鼠標(biāo)事件處理的相關(guān)資料,需要的朋友可以參考下

事件是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作，如click、mouseover、頁(yè)面加載完畢后觸發(fā)load事件，都屬于事件。
為了記錄用戶的操作和行為路徑，需要完成鼠標(biāo)事件處理和組件交互的行為事件的處理。

響應(yīng)某個(gè)事件的函數(shù)稱(chēng)為事件處理程序，也可稱(chēng)為事件處理函數(shù)、事件句柄。鼠標(biāo)事件即鼠標(biāo)操作點(diǎn)擊圖表的圖形（如click、dblclick、contextmenu）或hover圖表的圖形（如mouseover、mouseout、mousemove）時(shí)觸發(fā)的事件。

在ECharts中，用戶的任何操作，都可能會(huì)觸發(fā)相應(yīng)的事件。在ECharts中，支持9種常規(guī)的鼠標(biāo)事件，包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu。

其中，click事件最為常用。常規(guī)的鼠標(biāo)事件及說(shuō)明如表所示。

在一個(gè)圖表元素上相繼觸發(fā)mousedown和mouseup事件，才會(huì)觸發(fā)click事件。兩次click事件相繼觸發(fā)才會(huì)觸發(fā)dblclick事件。如果取消了mousedown或mouseup中的一個(gè)，click事件就不會(huì)被觸發(fā)。如果直接或間接取消了click事件，dblclick事件就不會(huì)被觸發(fā)。

利用某學(xué)院2020年專(zhuān)業(yè)招生情況繪制柱狀圖，如圖所示。

當(dāng)點(diǎn)擊添加鼠標(biāo)單擊事件的柱狀圖中的“人工智能”柱體后，彈出一個(gè)提示對(duì)話框，如上圖所示。

單擊提示對(duì)話框的確定按鈕后，將自動(dòng)打開(kāi)相應(yīng)的百度搜索頁(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"));  //基于準(zhǔn)備好的dom，初始化ECharts圖表
		var option = {  //指定圖表的配置項(xiàng)和數(shù)據(jù)
			color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba設(shè)置透明度0.1
			title: { text: '某學(xué)院2020年專(zhuān)業(yè)招生情況匯總表', left: 70, top: 9 },
			tooltip: { tooltip: { show: true }, },
			legend: { data: ['2019年招生'], left: 422, top: 8 },
			xAxis: {  //配置x軸坐標(biāo)系
				data: ["大數(shù)據(jù)", "云計(jì)算", "ERP", "人工智能", "軟件開(kāi)發(fā)", "移動(dòng)開(kāi)發(fā)", "網(wǎng)絡(luò)技術(shù)"]
			},
			yAxis: {},  //配置y軸坐標(biāo)系
			series: [{  //配置數(shù)據(jù)系列
				name: '招生人數(shù):',
				type: 'bar', barWidth: 55,  //設(shè)置柱狀圖中每個(gè)柱子的寬度
				data: [350, 200, 66, 210, 466, 200, 135]
			}]
		};
		myChart.setOption(option);  //使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
		//回調(diào)函數(shù)處理鼠標(biāo)點(diǎn)擊事件并跳轉(zhuǎn)到相應(yīng)的百度搜索頁(yè)面
		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對(duì)象加載數(shù)據(jù)
	</script>
</body>

</html>

在ECharts中，所有的鼠標(biāo)事件都包含一個(gè)參數(shù)params。params是一個(gè)包含單擊圖形的數(shù)據(jù)信息的對(duì)象，params中的基本屬性及含義如表所示。

回調(diào)函數(shù)本身是主函數(shù)的一個(gè)參數(shù)，將回調(diào)函數(shù)作為參數(shù)傳到另一個(gè)主函數(shù)中，當(dāng)主函數(shù)執(zhí)行完后，再執(zhí)行回調(diào)函數(shù)。這個(gè)過(guò)程就叫作回調(diào)。在回調(diào)函數(shù)中獲得對(duì)象中的數(shù)據(jù)名、系列名稱(chēng)，然后在數(shù)據(jù)中索引得到其他的信息后，再更新圖表、顯示浮層等。

利用產(chǎn)品銷(xiāo)量和產(chǎn)量利潤(rùn)數(shù)據(jù)繪制柱狀圖，如圖所示。

當(dāng)單擊左圖中的第2件產(chǎn)品“羊毛衫”的“產(chǎn)量”柱體后，彈出一個(gè)提示對(duì)話框，如右圖所示。

由右圖可以得到左圖中的第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">
		//基于準(zhǔn)備好的dom，初始化ECharts圖表
		var myChart = echarts.init(document.getElementById("main"));
		var option = {  //指定圖表的配置項(xiàng)和數(shù)據(jù)
			color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba設(shè)置透明度0.1
			title: { text: '產(chǎn)品銷(xiāo)量產(chǎn)量利潤(rùn)統(tǒng)計(jì)', 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：銷(xiāo)量
					name: '銷(xiāo)量', 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：利潤(rùn)
					name: '利潤(rùn)', type: 'bar',
					data: [25, 15, 10, 10, 15, 22]
				}
			]
		};
		myChart.setOption(option);  //使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
		window.addEventListener("resize", function () {
			myChart.resize();  //使圖表自適應(yīng)窗口的大小
		});
		//回調(diào)函數(shù)處理鼠標(biāo)點(diǎn)擊事件并且顯示各數(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對(duì)象加載數(shù)據(jù) 
	</script>
</body>

</html>

在包含鼠標(biāo)單擊事件的參數(shù)params的柱狀圖代碼中，可以通過(guò)調(diào)用回調(diào)函數(shù)，訪問(wèn)鼠標(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行代碼依次訪問(wèn)鼠標(biāo)事件的參數(shù)params中的10種基本屬性，并依次顯示在圖5-13的提示對(duì)話框中的每一行上。

注意，其中的params.data，params.dataType的值為undefined。

總結(jié)

到此這篇關(guān)于ECharts鼠標(biāo)事件處理的文章就介紹到這了,更多相關(guān)ECharts鼠標(biāo)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: