Detailed explanation of ECharts mouse event processing method

An event is an action performed by the user or the browser itself, such as click, mouseover, and the load event triggered after the page is loaded.
In order to record the user's operations and behavior paths, it is necessary to complete the processing of mouse event processing and component interaction behavior events.

A function that responds to an event is called an event handler, which can also be called an event processing function or event handle. Mouse events are events triggered when the mouse clicks a graphic on a chart (such as click, dblclick, contextmenu) or hovers over a graphic on a chart (such as mouseover, mouseout, mousemove).

In ECharts, any operation of the user may trigger corresponding events. In ECharts, 9 common mouse events are supported, including click, dblclick, mousedown, mousemove, mouseup, mouseover, mouseout, globalout, and contextmenu.

Among them, the click event is the most commonly used. Common mouse events and their descriptions are shown in the table.

The click event will only be triggered when the mousedown and mouseup events are triggered successively on a chart element. The dblclick event will be triggered only when two click events are triggered successively. If either mousedown or mouseup is canceled, the click event will not be triggered. If the click event is canceled directly or indirectly, the dblclick event will not be triggered.

A bar chart is drawn using the 2020 professional enrollment situation of a certain college, as shown in the figure.

When you click the "Artificial Intelligence" column in the bar chart to add a mouse click event, a prompt dialog box pops up, as shown in the figure above.

After clicking the OK button in the prompt dialog box, the corresponding Baidu search page will be automatically opened, as shown in the figure below.

The source code for this legend is as follows:

<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")); //Initialize ECharts chart based on the prepared DOM var option = { //Specify the configuration items and data of the chart color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba sets the transparency to 0.1
			title: { text: 'Summary of the enrollment situation of a certain college in 2020', left: 70, top: 9 },
			tooltip: { tooltip: { show: true }, },
			legend: { data: ['2019 Enrollment'], left: 422, top: 8 },
			xAxis: { //Configure the x-axis coordinate system data: ["Big Data", "Cloud Computing", "ERP", "Artificial Intelligence", "Software Development", "Mobile Development", "Network Technology"]
			},
			yAxis: {}, //Configure the y-axis coordinate system series: [{ //Configure the data series name: 'Number of students enrolled:',
				type: 'bar', barWidth: 55, //Set the width of each column in the bar chart data: [350, 200, 66, 210, 466, 200, 135]
			}]
		};
		myChart.setOption(option); //Use the configuration items and data just specified to display the chart //The callback function handles the mouse click event and jumps to the corresponding Baidu search page myChart.on('click', function (params) {
			var yt = alert("Mouse click event, you just clicked: " + params.name);

			window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
		});
		window.addEventListener("resize", function () {
			myChart.resize(); // Make the chart adapt to the size of the window });
		myChart.setOption(option); //Load data for echarts object </script>
</body>

</html>

In ECharts, all mouse events contain a parameter params. params is an object that contains the data information of the clicked graphic. The basic properties and meanings of params are shown in the table.

The callback function itself is a parameter of the main function. The callback function is passed as a parameter to another main function. When the main function is executed, the callback function is executed. This process is called callback. In the callback function, get the data name and series name in the object, then index other information in the data, and then update the chart, display the floating layer, etc.

Use product sales and output profit data to draw a bar chart as shown in the figure.

When you click the "Production" column of the second product "Wool Sweater" in the left picture, a prompt dialog box pops up as shown in the right picture.

From the right picture, you can get the attribute information of the params parameter of the "Production" column of the second product "Wool Sweater" in the left picture.

The source code of the legend is as follows:

<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">
		//Based on the prepared DOM, initialize the ECharts chart var myChart = echarts.init(document.getElementById("main"));
		var option = { //Specify the configuration items and data of the chart color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba sets the transparency to 0.1
			title: { text: 'Product sales, production and profit statistics', left: 70, top: 9 },
			xAxis: { //Configure the x-axis coordinate system data: ["shirt", "sweater", "chiffon shirt", "pants", "high heels", "socks"]
			},
			yAxis: {}, //Configure the y-axis coordinate system tooltip: { //Configure the prompt box component trigger: 'item', show: true,
				formatter: "{a} <br/>{b} : {c}"
			},
			legend: {},
			series: [ //Configure data series { //Set data series 1: sales name: 'sales', type: 'bar',
					data: [5, 28, 16, 20, 15, 33]
				},
				{ //Set data series 2: output name: 'output', type: 'bar',
					data: [15, 38, 20, 24, 20, 45]
				},
				{ //Set data series 3: Profit name: 'Profit', type: 'bar',
					data: [25, 15, 10, 10, 15, 22]
				}
			]
		};
		myChart.setOption(option); //Use the configuration items and data just specified to display the chart window.addEventListener("resize", function () {
			myChart.resize(); // Make the chart adapt to the size of the window });
		//The callback function handles the mouse click event and displays the data information content myChart.on('click', function (params) {
			alert("No. " + (params.dataIndex + 1) + "Product: " + params.name + "of " +
				params.seriesName + "is:" + 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); //Load data for echarts object </script>
</body>

</html>

In the bar chart code that contains the parameter params of the mouse click event, you can access the basic properties in the parameter params of the mouse event by calling the callback function, such as params.dataIndex, params.name, params.seriesName, params.value, and display "The second product: the output of wool sweaters is 38" in the 12th and 13th lines from the bottom.

The 11th to 2nd last lines of code access the 10 basic properties in the mouse event parameter params in turn, and display them in turn on each line of the prompt dialog box in Figure 5-13.

Note that the values of params.data and params.dataType are undefined.

Summarize

This is the end of this article about ECharts mouse event processing. For more relevant ECharts mouse event content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: