An event is an action performed by the user or the browser itself, such as click, mouseover, or the load event triggered after the page has loaded. In order to record user actions and behavior paths, mouse event processing and component interaction behavior event processing need to be completed.
A function that responds to an event is called an event handler, or an event handler, or an event handle. Mouse events are events that are triggered when a mouse operation clicks on a graph (e.g. Click, dblclick, ContextMenu) or hover graph (e.g. Mouseover, mouseout, mousemove). In ECharts, any action by the user may trigger an event. In ECharts, 9 normal mouse events are supported, including click, dblClick, mouseDown, mousemove, mouseup, mouseover, mouseout, GlobalOut, and ContextMenu.
The click event is the most commonly used. The general mouse events and descriptions are shown in the table.
The click event is triggered only when the mouseDown and Mouseup events are fired on a diagram element. The DBLClick event is triggered only after two click events are triggered. If you cancel either mouseDown or mouseup, the click event is not triggered. If the click event is cancelled directly or indirectly, the dblClick event will not be fired. A bar chart is drawn based on the enrollment of majors in a college in 2020, as shown in the following figure.
When you click the “AI” column in the bar chart that adds the mouse click event, a prompt dialog box pops up, as shown above. Click the OK button in the prompt dialog box, and the corresponding Baidu search page will automatically open, as shown in the following figure.
The legend of the source code 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")); Var option = {// Specify the configuration items and data color of the chart: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'], backgroundColor: 'rgba(128, 128, 128, 0.1)', Tooltip: {tooltip: {show: true},}, legend: {data: ['2019年招 标 '], left: 422, top: 8}, xAxis: { [" big data ", "cloud computing", "ERP", "artificial intelligence", "software development", "mobile development", "network technology"]}, yAxis: {}, / / configuration y coordinate series: [{/ / configuration data series name: 'enrollment:', type: 'bar', barWidth: 55, data: [350, 200, 66, 210, 466, 200, 135]}]}; myChart.setOption(option); // The callback function handles the mouse click event and redirect to the corresponding Baidu search page. Function (params) {var yt = alert(" + params. "); window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); }); window.addEventListener("resize", function () { myChart.resize(); // make the chart adapt to the window size}); myChart.setOption(option); // Load data for echarts object </script> </body> </ HTML >Copy the code
In ECharts, all mouse events contain one parameter, params. Params is an object that contains data information about the click graph. The basic properties and meanings of params are shown in the table.
The callback function itself is an argument to the main function. The callback function is passed as an argument to another main function. When the main function finishes executing, the callback function is executed. This process is called a callback. Get the data name, series name in the object in the callback function, and then index the data to get other information, then update the chart, show the floating layer, etc. Draw a bar chart using product sales volume and output profit data, as shown in the figure.
When you click the “Volume” column for the second product “Sweater” in the left image, a prompt dialog box pops up, as shown on the right. From the figure on the right, we can get the attribute information of the column Params parameter of “output” of the second product “woolen sweater” in the figure on the left.
Legend of the source code 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: "></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {backgroundColor: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'], backgroundColor: Title: {text: 'rgba(128, 128, 128, 0.1)', title: {text: 'Rgba (128, 128, 128, 0.1)', left: 70, top: 9}, xAxis: { [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"]}, yAxis: {}, / / tooltip configuration y coordinate system: {/ / configure prompt box component trigger: 'item', show: True, the formatter: "{a} < br / > {b}, {c}"}, legend: {}, series: [/ / configuration data series {/ / set the data series 1: sales name: 'sales' type:' bar 'data: [5, 28, 16, 20, 15, 33]}, {// Set data series 2: yield name: 'yield ', type: 'bar', data: [15, 38, 20, 24, 20, 45]}, {name: / / 3 set of data series: profits' profit ', type: 'bar' data: [25, 15, 10, 10, 15, 22]}}; myChart.setOption(option); Window.addeventlistener ("resize", function () {mychart.resize (); window.addeventListener ("resize"); // make the chart adapt to the window size}); Mychart.on ('click', Function (params) {alert(" alert "+ (params.dataindex + 1) +" "+ 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); // Load data for echarts object </script> </body> </ HTML >Copy the code
In the bar chart code that contains the mouse click event parameter params, you can call the callback function to access the basic properties in the mouse event parameter Params, such as params.dataindex, params.name, params.seriesname, params.value, etc. In line 12 and 13, it shows “The second product: the output of woolen sweater is 38”. Lines 11 to 2 from the bottom access the 10 basic properties in params, the parameter of the mouse event, and are displayed on each line in the prompt dialog box in Figure 5-13. Note that params.data, params.datatype is undefined.