The interaction events and event descriptions in ECharts are shown in the table

,

Use randomly generated 300 data to draw line charts and bar charts, as shown in the figure. As can be seen from the figure, there are two charts, upper and lower, which use the same randomly generated 300 random data. This is done by calling the mouse mouse of the line chart to synchronize changes in the charts of the bar chart, mainly because the dataZoom (Data Area Scaling Component) event is generated when the mouse is rolled over the line chart.

Legend source code is as follows:

<html> <head> <meta charset="utf-8"> <script type="text/javascript" src='js/echarts.js'></script> </head> <body> <div id="main1" style="width: 800px; height: 200px"></div> <div id="main2" style="width: 800px; height: 200px"></div> <script type="text/javascript"> var traffic1 = echarts.init(document.getElementById("main1")); var traffic2 = echarts.init(document.getElementById("main2")); var data = []; var now = new Date(2020, 5, 2, 24, 60, 60); var oneDay = 24 * 600 * 600; Function randomData() {now = new Date(+now + oneDay); value = Math.random() * 80 + 20; return { name: now.toLocaleString('chinese', { hour12: false }), value: [ now.toLocaleString('chinese', { hour12: false }), Math.round(value) ] } } for (var i = 0; i < 300; I++) {// generate 300 data randomly, store the array data data.push(randomData()); } var option1 = {// Specify the chart option1 configuration item and data color: ['DarkGreen', 'red', 'LimeGreen', 'blue', 'Purple', 'GreenYellow', 'DarkTurquoise'], backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba set transparency 0.1 title: {text: 'scroll in this chart ', left: 110, top: 12}, // configure the title component tooltip: Trigger: 'axis', formatter: function (params) {params = params[0]; var date = new Date(params.name); Return date.getFullYear() + 'year' + (date.getMonth() + 1) + 'month' + date.getDate() + 'day' + ':' + params.value[1]; }, axisPointer: {animation: false} // Set the axis indicator}, xAxis: {type: 'time', splitLine: {show: YAxis: {type: 'value', boundaryGap: [0, '100%'], splitLine: {show: False}}, dataZoom: [// configure data area scaling component {type: 'inside', // set two values inslide, slide show: true, start: 20, // Set data display starting position end: 70, // Set the end position of data display},], series: [{name: 'analog data ', type: 'line', data: data}] // Configure data series}; Var option2 = {// Specify the chart option2 configuration item and data color: ['blue', 'LimeGreen', 'red', 'DarkGreen', 'Purple', 'GreenYellow', 'DarkTurquoise'], backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba set transparency 0.1 title: {text: 'This chart changes with the above ', left: 110, top: 12}, // configure the header component tooltip: Trigger: 'axis', formatter: function (params) {params = params[0]; var date = new Date(params.name); Return date.getFullYear() + 'year' + (date.getMonth() + 1) + 'month' + date.getDate() + 'day' + ':' + params.value[1]; }, axisPointer: {animation: false} // Set the axis indicator}, xAxis: {type: 'time', splitLine: {show: YAxis: {type: 'value', boundaryGap: [0, '100%'], splitLine: {show: False}}, dataZoom: [// configure data area scaling component {type: 'inside', // set two values inslide, slide show: true, start: 0, // Set data display starting position end: 100, // Set the end position of the data display},], series: [{name: 'analog data ', type: 'bar', data: data}] traffic1.setOption(option1); Traffic2.setoption (option2); // Use the specified configuration items and data to display the graph traffic2.setoption (option2); Traffic1. on('datazoom', function (params) {console.log(params); var startValue = traffic1.getModel().option.dataZoom[0].startValue; var endValue = traffic1.getModel().option.dataZoom[0].endValue; Var startPercent = traffic1.getModel().option.datazoom [0].start; var endPercent = traffic1.getModel().option.dataZoom[0].end; console.log(startValue, endValue, startPercent, endPercent); option2.dataZoom[0].start = startPercent; option2.dataZoom[0].end = endPercent; traffic2.setOption(option2); }); </script> </body> </html>Copy the code