I just finished a project creating an graph on ECharts. I had trouble getting a viable example of an multiple YAxis graph. Here I will document the code to create a multiple YAxis graph.

First you download ECharts on there website, I downloaded version 4.0.2 from this link.

First you reference the echarts file.

<script TYPE="text/javascript" src="/assets/echarts/echarts.js"></script>

Then you start by setting up your Graph options. I will break the code into peaces. At the bottom I will show all the peaces together.

The "container" is the id link to the div where the graph should show on your website.

var myChart = echarts.init(document.getElementById('container'));

All the options is then wrapped inside the "option" variable.

option = {
};

Then next is the "tooltip" options, I did not change anything here from my example code. Here you can customize the tooltip of the graph.

tooltip: {
	trigger: 'axis',
	axisPointer: {
		type: 'cross',
		crossStyle: {
			color: '#999'
		}
	}
},

 The "toolbox" buttons are next, there is a range of buttons you can enable or disable with options.

toolbox: {
	feature: {
		dataView: {show: true, readOnly: false},
		magicType: {show: true, type: ['line', 'bar']},
		restore: {show: true},
		saveAsImage: {show: true}
	}
},

 Now you can set the layout of the graph box in the "grid" part of the options, like width or margins etc.

grid: {
	top: '15%',
	left: '5%',
	right: '5%',
	bottom: '5%',
	containLabel: true,
},

 The "legend" part of the options is where you setup the names of your series into an comma delimited list. The names must match your series names.

legend: {
	data:['Ton / ha','Second Ton / Ha','Third Ton / Ha','Ton','Ha']
},

 We are now getting to the graph values part, next we setup the "XAxis" for our graph. The example graph is a category type graph. All the "XAxis" values should be put into a comma delimited list in the data option.

xAxis: [
	{
		type: 'category',
		data: ['Value1','Value2','Value3','Value4','Value5','Value6','Value7','Value8','Value9','Value10','Value11','Value12','Value13','Value14','Value15'],
		axisPointer: {
			type: 'shadow'
		}
	},
],

 Here is the part of the settings we are looking to see. For a normal graph with 1 "YAxis" you only setup the one "YAxis" part. For our example we are setting up three "YAxis" parts. First is the Main "YAxis" code.

{
	type: 'value',
	name: 'Ton / ha',
	axisLabel: {
		formatter: '{value}'
	}
},

But for three "YAxis" parts you just repeat the above code three times. Here is the complete "YAxis" part. The offset setting in the third "YAxis" option is for display purposes, the second "YAxis" displays on the right of the graph by default. The third "YAxis" also display on the right, the offset moves the second and third "YAxis" away from each other, otherwise they display on top of each other. The data for the "YAxis" will be setup in the next section.

yAxis: [
	{
		type: 'value',
		name: 'Ton / ha',
		axisLabel: {
			formatter: '{value}'
		}
	},
	{
		type: 'value',
		name: 'Ton',
		offset:0,
		axisLabel: {
			formatter: '{value} Ton'
		}
	},
	{
		type: 'value',
		name: 'Ha',
		offset:80,
		axisLabel: {
			formatter: '{value} Ha'
		}
	},
],

Now we must setup the "series" section. This section has all the "YAxis" data. In our example we have 3 different data sets on the main "YAxis" setting above. And then the two other "YAxis" data sets. First we show the code of a single "series" section. The values of the "YAxis" is in a comma delimited list inside the data option.

{
	name: 'Ton / ha',
	type:'bar',
	itemStyle: {
		normal: {
			color: 'rgb(125, 10, 10)'
		}
	},
	data:[24.03,31.75,24.51,34.71,32.43,37.13,21.24,29.88,10.16,28.34,22.29,21.44,23.74,31.74,16.42]
},

Now all the "series" options together. The first three sets use the main "YAxis", you will see the the last 2 sets have an extra option "yAxisIndex" this points the data sets to the second and third "YAxis" options.

series: [						
	{
		name: 'Ton / ha',
		type:'bar',
		itemStyle: {
			normal: {
				color: 'rgb(125, 10, 10)'
			}
		},
		data:[24.03,31.75,24.51,34.71,32.43,37.13,21.24,29.88,10.16,28.34,22.29,21.44,23.74,31.74,16.42]
	},				
	{
		name: 'Second Ton / Ha',
		type:'bar',
		itemStyle: {
			normal: {
				color: 'rgb(17, 86, 34)'
			}
		},
		data:[15.41,14.88,16.17,27.84,34.13,27.04,24.56,22.2,7.65,20.09,18.24,23.86,21.73,19.69,15.43]
	},
	{
		name: 'Third Ton / Ha',
		type:'bar',
		itemStyle: {
			normal: {
				color: 'rgb(14, 22, 109)'
			}
		},
		data:[12.95,10.66,14.35,19.69,18.57,32.45,21.06,12.54,12.15,11.38,13.73,17.37,12.62,13.29,16.53]
	},
	{
		name: 'Ton',
		type:'line',
		yAxisIndex:1,
		itemStyle: {
			normal: {
				color: 'rgb(14, 22, 109)'
			}
		},
		data:[76.18,286.42,392.12,1336.8,295.12,1234.82,380.6,110.86,68.04,221.18,82.02,141.74,821.54,556.78,12.48]
	},
	{
		name: 'Ha',
		type:'line',
		yAxisIndex: 2,
		itemStyle: {
			normal: {
				color: 'rgb(14, 22, 109)'
			}
		},
		data:[3.17,9.02,18,38.51,7.3,35.95,11.45,3.71,6.7,7.86,3.41,6.61,36.71,20.07,0.76]
	},
]

Then last you add the options to your graph variable.

myChart.setOption(option, true);

 Now all the code together.

				<div id="container" style="width: 100%; min-width: 310px; height: 400px; margin: 0 auto"></div>		
				<script TYPE="text/javascript" src="/assets/echarts/echarts.js"></script>
				<script>
					var myChart = echarts.init(document.getElementById('container'));
		
					option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#999'
								}
							}
						},
						toolbox: {
							feature: {
								dataView: {show: true, readOnly: false},
								magicType: {show: true, type: ['line', 'bar']},
								restore: {show: true},
								saveAsImage: {show: true}
							}
						},
						grid: {
							top: '15%',
							left: '5%',
							right: '5%',
							bottom: '5%',
							containLabel: true,
						},
						legend: {
							data:['Ton / ha','Second Ton / Ha','Third Ton / Ha','Ton','Ha']
						},
						xAxis: [
							{
								type: 'category',
								data: ['Value1','Value2','Value3','Value4','Value5','Value6','Value7','Value8','Value9','Value10','Value11','Value12','Value13','Value14','Value15'],
								axisPointer: {
									type: 'shadow'
								}
							},
						],
						yAxis: [
							{
								type: 'value',
								name: 'Ton / ha',
								axisLabel: {
									formatter: '{value}'
								}
							},
							{
								type: 'value',
								name: 'Ton',
								offset:0,
								axisLabel: {
									formatter: '{value} Ton'
								}
							},
							{
								type: 'value',
								name: 'Ha',
								offset:80,
								axisLabel: {
									formatter: '{value} Ha'
								}
							},
						],
						series: [						
							{
								name: 'Ton / ha',
								type:'bar',
								itemStyle: {
									normal: {
										color: 'rgb(125, 10, 10)'
									}
								},
								data:[24.03,31.75,24.51,34.71,32.43,37.13,21.24,29.88,10.16,28.34,22.29,21.44,23.74,31.74,16.42]
							},				
							{
								name: 'Second Ton / Ha',
								type:'bar',
								itemStyle: {
									normal: {
										color: 'rgb(17, 86, 34)'
									}
								},
								data:[15.41,14.88,16.17,27.84,34.13,27.04,24.56,22.2,7.65,20.09,18.24,23.86,21.73,19.69,15.43]
							},
							{
								name: 'Third Ton / Ha',
								type:'bar',
								itemStyle: {
									normal: {
										color: 'rgb(14, 22, 109)'
									}
								},
								data:[12.95,10.66,14.35,19.69,18.57,32.45,21.06,12.54,12.15,11.38,13.73,17.37,12.62,13.29,16.53]
							},
							{
								name: 'Ton',
								type:'line',
								yAxisIndex:1,
								itemStyle: {
									normal: {
										color: 'rgb(14, 22, 109)'
									}
								},
								data:[76.18,286.42,392.12,1336.8,295.12,1234.82,380.6,110.86,68.04,221.18,82.02,141.74,821.54,556.78,12.48]
							},
							{
								name: 'Ha',
								type:'line',
								yAxisIndex: 2,
								itemStyle: {
									normal: {
										color: 'rgb(14, 22, 109)'
									}
								},
								data:[3.17,9.02,18,38.51,7.3,35.95,11.45,3.71,6.7,7.86,3.41,6.61,36.71,20.07,0.76]
							},
						]
					};
				;
				myChart.setOption(option, true);
				</script>			

 Hope this article help. enjoy.

Cookie policy

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Cookie Policy