The implementation process of ECharts multi-chart linkage function

The implementation process of ECharts multi-chart linkage function

When there is a lot of data to be displayed, the effect of displaying it in one chart is not good. At this time, you can consider using two charts for linked display.

ECharts provides the function of connecting multiple charts. Multiple connected charts can share component events and realize automatic splicing when saving images. Multi-chart linkage supports tooltip linkage in rectangular system

To realize 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 the connect method of the ECharts object, so as to establish a linkage relationship using multiple ECharts objects. The format is as follows.

myChart1.group = 'group1'; //Set a group value for the first ECharts object
myChart2.group = 'group1'; //Set the same group value for the second ECharts object
echarts.connect('group1'); //When calling the connect method of the ECharts object, pass in the group value

(2) Directly call the connect method of ECharts. The parameter is an array consisting of multiple ECharts objects that need to be linked. The format is as follows.

echarts.connect([myChart1,myChart2]);

If you want to disengage the existing multi-chart linkage, you can call the disConnect method in the following format.

echarts.disConnect('group1');

Using the professional enrollment situation of a certain college in 2019 and 2020, a bar chart linkage chart is drawn, as shown in the figure.

As can be seen from the figure, there are two bar charts, upper and lower, which respectively represent the enrollment summary for the two years of 2019 and 2020. Since multiple charts are linked, when the mouse moves over the artificial intelligence major column in 2019 or 2020, the system will automatically pop up the corresponding detail prompt box (tooltip) on the artificial intelligence major in 2019 and 2020. 

<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; height:400px"></div>
	<script type="text/javascript">
		//Based on the prepared DOM, initialize the ECharts chart var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = { //Specify the configuration items and data of the first 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 professional enrollment of a certain college in 2019', left: 40, top: 5 },
			tooltip: { tooltip: { show: true }, },
			legend: { data: ['2019 Enrollment'], left: 422, top: 8 },
			xAxis: [{
				data: ["big data", "cloud computing", "Oracle", "ERP", "artificial intelligence",
					"Software Development", "Mobile Development", "Network Technology"],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{ //Configure the data series of the first chart name: '2019 Enrollment',
				type: 'bar', barWidth: 40, //Set the width of each column in the bar chart data: [125, 62, 45, 56, 123, 205, 108, 128],
			}]
		};
		//Based on the prepared DOM, initialize the ECharts chart var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = { //Specify the configuration items and data of the second chart color: ['blue', 'LimeGreen', 'DarkGreen', 'red', '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: 40, top: 8 },
			tooltip: { show: true },
			legend: { data: ['2020 Enrollment'], left: 422, top: 8 },
			xAxis: [{
				data: ["big data", "cloud computing", "Oracle", "ERP", "artificial intelligence",
					"Software Development", "Mobile Development", "Network Technology"],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{ //Configure the data series of the second chart name: '2020 Enrollment',
				type: 'bar', barWidth: 40, //Set the width of each column in the bar chart data: [325, 98, 53, 48, 222, 256, 123, 111],
			}]
		};
		myChart1.setOption(option1); //Load data for myChart1 object myChart2.setOption(option2); //Load data for myChart2 object //Multi-chart linkage configuration method 1: Set the group value of each echarts object separately myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
	//Multi-chart linkage configuration method 2: directly pass in the echarts objects myChart1 and myChart2 that need to be linked
	//echarts.connect([myChart1,myChart2]);
	</script>
</body>

</html>

Using the enrollment situation of each major in a certain university from 2016 to 2020, a linkage chart of pie chart and bar chart is drawn, as shown in the figure.

As can be seen from the figure, the pie chart above and the bar chart below (the bar chart can also be converted into a line chart through the toolbox). When the mouse moves over a sector of the pie chart, a detail tooltip will appear on the pie chart, showing the number of students enrolled in the corresponding year of the sector and its proportion of the total number of students enrolled in each year. At the same time, a detail tooltip will appear on the bar chart (or line chart), showing detailed data on the number of students enrolled in each major in the corresponding year.

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="main1" style="width: 600px; height:400px"></div>
	<div id="main2" style="width: 600px; height:400px"></div>
	<script type="text/javascript">
		//Based on the prepared DOM, initialize the ECharts chart var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = { //Specify the configuration items and data of the first chart option1 color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //Configure background color, rgba sets transparency to 0.1
			title: { text: 'Analysis of enrollment situation of each major in a certain university over the years', 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 data series of the first chart name: 'Total number of people:', type: 'pie',
				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); //Display the pie chart using the specified configuration items and data //Initialize the ECharts chart based on the prepared DOM var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = { //Specify the configuration items and data of the second chart color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)', //Configure background color, rgba sets transparency to 0.1
			tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, //Configure the prompt box component legend: { //Configure the legend component left: 42, top: 25,
				data: ['Big Data', 'Oracle', 'Cloud Computing', 'Artificial Intelligence', 'Software Engineering']
			},
			toolbox: { //Configure the toolbox component of the second 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 chart yAxis: [{ type: 'value', splitArea: { show: true } }], //Configure the y-axis coordinate system of the second chart series: [ //Configure the data series of the second chart {
					name: 'Big Data', type: 'bar', stack: 'Total Amount',
					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 amount', data: [191, 234, 290, 330, 310] },
				{ name: 'Artificial Intelligence', 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); //Use the specified configuration items and data to display the stacked bar chart //Multi-chart linkage configuration method 1: Set the group value of each echarts object separately myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
 	    //Multi-chart linkage configuration method 2: directly pass in the echarts objects myChart1 and myChart2 that need to be linked
	    //echarts.connect([myChart1,myChart2]);
	</script>
</body>

</html>

Summarize

This is the end of this article about the implementation of ECharts multi-chart linkage. For more relevant ECharts multi-chart linkage content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • echarts implements map timing switching scatter points and multi-chart cascade linkage detailed explanation

<<:  Several solutions for forgetting the MySQL password

>>:  Linux touch command usage examples

Recommend

Mysql implements regular clearing of old data in a table and retaining several pieces of data (recommended)

To achieve the following goals: Mysql database wi...

Detailed explanation of single-row function code of date type in MySQL

Date-type single-row functions in MySQL: CURDATE(...

HTML+CSS to create a top navigation bar menu

Navigation bar creation: Technical requirements: ...

An article to quickly understand Angular and Ionic life cycle and hook functions

Table of contents Angular accomplish Calling orde...

How to quickly install tensorflow environment in Docker

Quickly install the tensorflow environment in Doc...

The implementation process of extracting oracle data to mysql database

In the migration of Oracle database to MySQL data...

Detailed explanation of VMware12 installation centOS8 configuration graphic tutorial (vm virtual machine installation centos8 tutorial)

CentOS8 was released a few days ago. Although it ...

Install MySQL 5.7.17 in win10 system

Operating system win10 MySQL is the 64-bit zip de...

Use vue to realize the registration page effect vue to realize SMS verification code login

This article example shares the specific code of ...

Detailed explanation of MySql data type tutorial examples

Table of contents 1. Brief Overview 2. Detailed e...

Detailed steps for installing nodejs environment and path configuration in Linux

There are two ways to install nodejs in linux. On...

The standard HTML writing method is different from the one automatically generated by Dreamweaver

Copy code The code is as follows: <!--doctype ...

Vue.js performance optimization N tips (worth collecting)

Table of contents Functionalcomponents Childcompo...

A brief discussion on how Tomcat breaks the parent delegation mechanism

Table of contents JVM Class Loader Tomcat class l...

MySQL implements multi-table association statistics (subquery statistics) example

This article uses an example to describe how to i...