If a large amount of data needs to be displayed, it is not effective to display the data in one chart. In this case, you can use two charts for linkage display. ECharts provides multiple Chart linkage (CONNECT), where connected charts can share component events and automatically concatenate images when they are saved. Multi-chart linkage Supports tooltip linkage in right-angle system

To achieve multi-chart linkage in EChart, you can use the following two methods. (1) Set each ECharts object to the same group value, and pass in the group value when calling ECharts connect method, so as to use multiple ECharts objects to establish linkage relationship, the format is as follows. myChart1.group = ‘group1’; // Set a group value mychart2. group = ‘group1’ for the first ECharts object; // Set the second ECharts object to the same group value echarts.connect(‘group1’); // Call the connect method of the ECharts object with the group value passed in

(2) Directly call ECharts connect method, parameter is an array composed of multiple ECharts objects to be linked, the format is as follows. echarts.connect([myChart1,myChart2]); To unlink existing multiple charts, you can call the disConnect method in the following format. echarts.disConnect(‘group1’);

A bar chart is drawn based on the professional enrollment of a college in 2019 and 2020, as shown in the figure. As can be seen from the figure, there are two bar charts above and below, which respectively represent the summary of enrollment in 2019 and 2020. Because of the multi-chart linkage, when you mouse over the 2019 or 2020 AI Professional bar, the system will automatically pop up the corresponding details box (tooltip) for both 2019 and 2020 AI Professional.

<html> <head> <meta charset="utf-8"> <script type="text/javascript" src='js/echarts.js'></script> </head> <body> <div id="main1" style="width: 600px; height:400px"></div> <div id="main2" style="width: 600px; </div> <script type="text/javascript"> Var myChart1 = echarts.init(document.getelementById ("main1")); Var option1 = {backgroundColor: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'] 'rgba(128, 128, 128, 0.1)', //rgba set transparency 0.1 title: {text: 'rgba(128, 128, 128, 0.1)', left: 40, top: 5}, tooltip: { {show: true},}, legend: {data: ['2019年 enrollment '], left: 422, top: 8}, xAxis: [{data: true},}, legend: {data: ['2019年 enrollment '], left: 422, top: 8}, xAxis: [{data: [" big data ", "cloud computing", "Oracle" and "ERP", "artificial intelligence", "software development", "mobile development", "network technology"], axisLabel: {interval: 0}}], yAxis: [{type: 'value',}], series: [{// set the first chart data series name: '2019 students ', type: 'bar', barWidth: 40, // set the width of each column in the bar chart data: [125, 62, 45, 56, 123, 205, 108, 128]}]}; Var myChart2 = echarts.init(document.getelementById ("main2")); Var option2 = {color: ['blue', 'LimeGreen', 'DarkGreen', 'red', 'Purple'], backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba set transparency 0.1 title: {text: 'rgba(128, 128, 128, 0.1)', left: 40, top: 8}, tooltip: {show: True}, legend: {data: ['2020年 enrollment '], left: 422, top: 8}, xAxis: [{data: [" big data ", "cloud computing", "Oracle" and "ERP", "artificial intelligence", "software development", "mobile development", "network technology"], axisLabel: {interval: 0}}], yAxis: [{type: 'value',}], series: [{// set the data series of the second chart name: '2020 students ', type: 'bar', barWidth: 40, [325, 98, 53, 48, 222, 256, 123, 111]}; myChart1.setOption(option1); // Load data myChart1 mychart2. setOption(option2); Mychart1. group = 'group1'; mychart1. group = 'group1'; myChart2.group = 'group1'; echarts.connect('group1'); // Echarts. Connect ([myChart1,myChart2]); // Echarts. </script> </body> </html>Copy the code

The linkage chart of pie chart and bar chart is drawn based on the enrollment of each major in a university from 2016 to 2020, as shown in the figure. The chart shows the pie chart at the top and the bar chart at the bottom (the bar chart can also be converted into a line chart through the toolbox). When the mouse mouse slides over a sector of the pie chart, the pie chart’s detailed prompt box will show the enrollment of the corresponding year in the corresponding sector and its proportion to the total enrollment of each year. Meanwhile, the bar chart (or broken line chart) will also show the detailed data of enrollment of each major in the corresponding year.

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: 600px; height:400px"></div> <div id="main2" style="width: 600px; </div> <script type="text/javascript"> Var myChart1 = echarts.init(document.getelementById ("main1")); Var option1 = {// specify the first chart option1 configuration item and data color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'], backgroundColor: 'rgba(128, 128, 128, 0.1)', // set the background color, rgba set the transparency 0.1 title: {text: 'x: 'center', y: 12}, tooltip: { trigger: "item", formatter: "{a}<br/>{b}:{c}({d}%)" }, legend: { orient: 'vertical', x: 15, y: 15, data: [' 2016 ', '2017', '2018', '2019', '2020')}, series: [{/ / configure the first chart data series name: 'total number:' type: 'pie', the radius: '70%' center: ['50%', 190], data: [ { value: 1695, name: '2016' }, { value: 1790, name: '2017' }, { value: 2250, name: '2018' }, { value: 2550, name: '2019' }, { value: 2570, name: '2020' }] }] }; myChart1.setOption(option1); Var myChart2 = echarts.init(document.getelementById ("main2")); var myChart2 = echarts.init(document.getelementById ("main2")); Var option2 = {// specify the second chart configuration items and data color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'], backgroundColor: 'rgba(128, 128, 128, 0.1)', // Configure background color, rgba set transparency 0.1 tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}}, // Configure the legend component: {// configure the legend component left: 42, top: 25, data: [' big data ', 'Oracle', 'cloud Computing ',' artificial Intelligence ', 'Software Engineering ']}, Toolbox: {// Toolbox components for configuring the 2nd chart show: true, Orient: 'vertical', left: 550, top: 'center', feature: { mark: { show: true }, restore: { show: true }, saveAsImage: { show: true }, magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] } } }, xAxis: [{ type: 'category', data: ['2016', '2017', '2018', '2019', '2020']}, // configure the X-axis coordinate system of the second graph yAxis: [{type: 'value', splitArea: {show: }}], // configure the second chart's y coordinate system series: [// configure the second chart's data series {name: 'big data ', type: 'bar', stack:' total ', data: [301, 334, 390, 330, 320], barWidth: 45,}, {name: 'Oracle', type: 'bar', stack: 'total ', data: [101, 134, 90, 230, 210]}, {name: 'cloud computing ', type: 'bar', stack:' total ', data: [191, 234, 290, 330, 310]}, {name: 'cloud computing ', type: 'bar', stack:' total ', data: [191, 234, 290, 330, 310]}, {name: }, {name: 'software engineering ', type: 'bar', stack:' total ', data: [201, 154, 190, 330, 410]}, {name: 'software Engineering ', type: 'bar', stack:' total ', data: [901, 934, 1290, 1330, 1320]}}; myChart2.setOption(option2); // Display stacked bar charts with specified configuration items and data // Multi-chart linkage configuration method 1: set the group value of each echarts object mychart1. group = 'group1'; myChart2.group = 'group1'; echarts.connect('group1'); // Echarts. Connect ([myChart1,myChart2]); // Echarts. </script> </body> </html>Copy the code