ECharts多Y軸曲線（轉載）

阿新 • • 發佈：2020-12-23

轉載來源：https://my.oschina.net/wangmengjun/blog/909546

本文主要向大家展示一下，如何一步步完成ECharts多Y軸的探索，並給出例項和說明。

一個多Y軸圖表展示的示例圖如下：

什麼是ECharts

ECharts，一個純 Javascript 的圖表庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。

ECharts 提供了常規的折線圖，柱狀圖，散點圖，餅圖，K線圖

，

用於統計的盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖，

用於關係資料視覺化的關係圖，treemap，

多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支援圖與圖之間的混搭。

更多介紹可以參考百度ECharts官網介紹【ECharts官網連結】

ECharts單Y軸圖表示例

引入ECharts

將下載的echarts.min.js檔案，使用<script>標籤引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 檔案 -->
    <script src="echarts.min.js"></script>
</head>
</html>

指定圖形展示區域

<body>
	<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>
</body>

初始化echarts例項

 // 基於準備好的dom，初始化echarts例項
 var myChart = echarts.init(document.getElementById('main'));

指定配置項和資料

// 指定圖表的配置項和資料
		option = {
			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '裝置新增數量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '裝置新增數量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [ {
				name : '裝置新增數量',
				type : 'bar',
				data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580,
						5063, 1520, 9000 ]
			} ]
		};

設定Option顯示圖表

       // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);

單Y軸示例程式碼和執行效果

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>

	<!-- ECharts單檔案引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基於準備好的dom，初始化echarts圖表
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '裝置新增數量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '裝置新增數量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [ {
				name : '裝置新增數量',
				type : 'bar',
				data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580,
						5063, 1520, 9000 ]
			} ]
		};

		// 為echarts物件載入資料 
		myChart.setOption(option);
	</script>
</body>

經過上述幾個步驟，一個使用ECharts完成的單Y軸圖表示例就完成了~

其實，

上述不單單是單Y軸圖表展示的步驟，EChart所有的圖表都可以採用類似的步驟完成~

為什麼要使用多Y軸

在使用多Y軸圖表之前，一個很直接的問題擺在面前，為什麼要使用多Y軸圖表？

在現實的需求中，一個圖表中，可能需要展示多個屬性的資料，比如上述虛構的資料“2016年每月新增裝置數”，可能還在在這個圖表中看到“2016年每月新增產品數”。

那麼問題來了~

假設，一個產品可以有多個裝置，甚至是成千上萬個裝置，那麼，一個可預見的結果就是，產品新增數和裝置新增數不是同一個數量級的。

這個時候，如果使用單Y軸的柱狀圖就會產生問題 --

裝置數圖形較為明顯、而產品數的圖形展示不明顯，幾乎看不到變化，

因為裝置數和產品數不在同一個數量級上。

如，

上述圖表展示的程式碼：

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>

	<!-- ECharts單檔案引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基於準備好的dom，初始化echarts圖表
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			tooltip : {
				trigger : 'axis'
			},
			toolbox : {
			  show: true,
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '裝置新增數量','產品新增數量' ]
			},
			xAxis :  {
				type : 'category',
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ,
			yAxis :  {
				type: 'value'
			},
			series : [ 
					{
						name : '裝置新增數量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '產品新增數量',
						type : 'bar',
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					} ]
		};

		// 為echarts物件載入資料 
		myChart.setOption(option);
	</script>
</body>

為了解決這個問題，咱們可以展示兩個Y軸，分別表示裝置數和產品數即可。

實現多Y軸功能

修改option內容

為了在單Y軸的基礎上，實現多個Y軸，只需要修改option中的三個選項內容即可

修改legend屬性

legend中的data屬性是一個數組，如果需要多個y軸，則指定多個名稱即可。如下示例，展示兩個Y軸

注，data中的名字要和yAxis以及serials中的name保持一致~

			legend : {
				data : [ '裝置新增數量','產品新增數量' ]
			},

修改yAxis

yAxis是一個數組，如果需要多個y軸，則指定多個元素，每個元素使用{}括起來~，如下示例展示兩個Y軸

注：

position表示的是Y周的位置，如left，則表明放在左邊，right表明放在右邊。

一般採用左邊一個Y軸，右邊一個或者多個Y軸展示的方式。

如果是右邊是多個，那麼需要新增offset 屬性，防止不同的Y軸重疊~ offset的值越大，越往右~

yAxis : [ {
				type : 'value',
				name : '裝置新增數量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '產品新增數量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ]

修改serials

yAxis是一個數組，如果需要多個y軸，則指定多個元素，每個元素使用{}括起來~，如下示例展示兩個Y軸。

type指定不同的圖表展示，如bar表示柱狀圖，line表示折線圖等

series : [
					{
						name : '裝置新增數量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '產品新增數量',
						type : 'bar',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					} ]

通過這些操作，咱們就可以展示多個Y軸的圖示展示了~

接下來，本文會給出兩Y軸、3Y軸、4Y軸以及5個Y軸的程式碼和效果，從而驗證這種步驟的可行和正確性~

兩個Y軸

示例程式碼

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>

	<!-- ECharts單檔案引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基於準備好的dom，初始化echarts圖表
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '裝置新增數量', '產品新增數量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '裝置新增數量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '產品新增數量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [
					{
						name : '裝置新增數量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '產品新增數量',
						type : 'bar',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					} ]
		};

		// 為echarts物件載入資料 
		myChart.setOption(option);
	</script>
</body>

效果

三個Y軸

示例程式碼

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>

	<!-- ECharts單檔案引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基於準備好的dom，初始化echarts圖表
		var myChart = echarts.init(document.getElementById('main'));
		var colors = [ '#5793f3', '#d14a61', '#675bba' ];
		option = {
			color : colors,

			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '裝置新增數量', '產品新增數量', '廠商新增數量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '裝置新增數量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {
						color : colors[2]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '產品新增數量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {
						color : colors[0]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '廠商新增數量',
				min : 0,
				max : 200,
				position : 'right',
				offset : 80,
				axisLine : {
					lineStyle : {
						color : colors[1]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [
					{
						name : '裝置新增數量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '產品新增數量',
						type : 'bar',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					},
					{
						name : '廠商新增數量',
						type : 'bar',
						data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
								150 ]
					} ]
		};

		// 為echarts物件載入資料 
		myChart.setOption(option);
	</script>
</body>

效果

四個Y軸

示例程式碼

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
	<div id="main" style="height: 500px; width: 1600px"></div>

	<!-- ECharts單檔案引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基於準備好的dom，初始化echarts圖表
		var myChart = echarts.init(document.getElementById('main'));
		var colors = [ '#5793f3', '#d14a61', '#675bba', '#c04aab', ];
		option = {
			color : colors,

			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '裝置新增數量', '產品新增數量', '廠商新增數量' , '註冊使用者新增數量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '裝置新增數量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {
						color : colors[2]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '產品新增數量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {
						color : colors[0]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '廠商新增數量',
				min : 0,
				max : 200,
				position : 'right',
				offset : 80,
				axisLine : {
					lineStyle : {
						color : colors[1]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} , {
				type : 'value',
				name : '註冊使用者新增數量',
				min : 0,
				max : 90000,
				position : 'right',
				offset : 200,
				axisLine : {
					lineStyle : {
						color : colors[3]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [
					{
						name : '裝置新增數量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '產品新增數量',
						type : 'bar',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					},
					{
						name : '廠商新增數量',
						type : 'bar',
						data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
								150 ]
					} ,
					{
						name : '註冊使用者新增數量',
						type : 'bar',
						yAxisIndex : 3,
						data : [ 30000, 5000, 50000, 13436, 25555, 18000,56416, 42227, 44658, 69002, 90013,
								15330 ]
					} ]
		};

		// 為echarts物件載入資料 
		myChart.setOption(option);
	</script>
</body>

效果

五個Y軸

示例程式碼

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
	<div id="main" style="height: 500px; width: 1800px"></div>

	<!-- ECharts單檔案引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基於準備好的dom，初始化echarts圖表
		var myChart = echarts.init(document.getElementById('main'));
		var colors = [ '#5793f3', '#d14a61', '#675bba', '#c04aab',  '#a6c30f'];
		option = {
			color : colors,

			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '裝置新增數量', '產品新增數量', '廠商新增數量' , '註冊使用者新增數量' ,'XXXXXX']
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '裝置新增數量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {
						color : colors[2]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '產品新增數量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {
						color : colors[0]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '廠商新增數量',
				min : 0,
				max : 200,
				position : 'right',
				offset : 80,
				axisLine : {
					lineStyle : {
						color : colors[1]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} , {
				type : 'value',
				name : '註冊使用者新增數量',
				min : 0,
				max : 90000,
				position : 'right',
				offset : 200,
				axisLine : {
					lineStyle : {
						color : colors[3]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} , {
				type : 'value',
				name : 'XXXXXX',
				min : 0,
				max : 1000000,
				position : 'right',
				offset : 280,
				axisLine : {
					lineStyle : {
						color : colors[4]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}],
			series : [
					{
						name : '裝置新增數量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '產品新增數量',
						type : 'bar',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					},
					{
						name : '廠商新增數量',
						type : 'bar',
						data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
								150 ]
					} ,
					{
						name : '註冊使用者新增數量',
						type : 'bar',
						yAxisIndex : 3,
						data : [ 30000, 5000, 50000, 13436, 25555, 18000,56416, 42227, 44658, 69002, 90013,
								15330 ]
					}  ,
					{
						name : 'XXXXXX',
						type : 'bar',
						yAxisIndex : 4,
						data : [ 130000, 50100, 250000, 123436, 251555, 138000,56416, 482227, 144658, 569002, 290013,
								152230 ]
					}]
		};

		// 為echarts物件載入資料 
		myChart.setOption(option);
	</script>
</body>

效果

多Y軸混合圖

上述展示的多Y軸都是採用柱狀圖來展示的，咱們可以有多種選擇，如選擇折線圖展示或者柱狀圖和折線圖的混合展示等。

多Y軸折線圖

如果上述示例使用全部折線圖展示，在option的serials中的type屬性即可。type : 'bar' 改成type : 'line。

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
	<div id="main" style="height: 500px; width: 1800px"></div>

	<!-- ECharts單檔案引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基於準備好的dom，初始化echarts圖表
		var myChart = echarts.init(document.getElementById('main'));
		var colors = [ '#5793f3', '#d14a61', '#675bba', '#c04aab',  '#a6c30f'];
		option = {
			color : colors,

			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '裝置新增數量', '產品新增數量', '廠商新增數量' , '註冊使用者新增數量' ,'XXXXXX']
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '裝置新增數量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {
						color : colors[2]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '產品新增數量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {
						color : colors[0]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '廠商新增數量',
				min : 0,
				max : 200,
				position : 'right',
				offset : 80,
				axisLine : {
					lineStyle : {
						color : colors[1]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} , {
				type : 'value',
				name : '註冊使用者新增數量',
				min : 0,
				max : 90000,
				position : 'right',
				offset : 200,
				axisLine : {
					lineStyle : {
						color : colors[3]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} , {
				type : 'value',
				name : 'XXXXXX',
				min : 0,
				max : 1000000,
				position : 'right',
				offset : 280,
				axisLine : {
					lineStyle : {
						color : colors[4]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}],
			series : [
					{
						name : '裝置新增數量',
						type : 'line',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '產品新增數量',
						type : 'line',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					},
					{
						name : '廠商新增數量',
						type : 'line',
						data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
								150 ]
					} ,
					{
						name : '註冊使用者新增數量',
						type : 'line',
						yAxisIndex : 3,
						data : [ 30000, 5000, 50000, 13436, 25555, 18000,56416, 42227, 44658, 69002, 90013,
								15330 ]
					}  ,
					{
						name : 'XXXXXX',
						type : 'line',
						yAxisIndex : 4,
						data : [ 130000, 50100, 250000, 123436, 251555, 138000,56416, 482227, 144658, 569002, 290013,
								152230 ]
					}]
		};

		// 為echarts物件載入資料 
		myChart.setOption(option);
	</script>
</body>

多Y軸折線、柱狀混合圖

如果部分type是bar，部分type是line，則就展示成多Y軸折線圖、柱狀圖的混合展示。

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
	<div id="main" style="height: 500px; width: 1800px"></div>

	<!-- ECharts單檔案引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基於準備好的dom，初始化echarts圖表
		var myChart = echarts.init(document.getElementById('main'));
		var colors = [ '#5793f3', '#d14a61', '#675bba', '#c04aab',  '#a6c30f'];
		option = {
			color : colors,

			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '裝置新增數量', '產品新增數量', '廠商新增數量' , '註冊使用者新增數量' ,'XXXXXX']
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '裝置新增數量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {
						color : colors[2]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '產品新增數量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {
						color : colors[0]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '廠商新增數量',
				min : 0,
				max : 200,
				position : 'right',
				offset : 80,
				axisLine : {
					lineStyle : {
						color : colors[1]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} , {
				type : 'value',
				name : '註冊使用者新增數量',
				min : 0,
				max : 90000,
				position : 'right',
				offset : 200,
				axisLine : {
					lineStyle : {
						color : colors[3]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} , {
				type : 'value',
				name : 'XXXXXX',
				min : 0,
				max : 1000000,
				position : 'right',
				offset : 280,
				axisLine : {
					lineStyle : {
						color : colors[4]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}],
			series : [
					{
						name : '裝置新增數量',
						type : 'line',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '產品新增數量',
						type : 'line',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					},
					{
						name : '廠商新增數量',
						type : 'bar',
						data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
								150 ]
					} ,
					{
						name : '註冊使用者新增數量',
						type : 'bar',
						yAxisIndex : 3,
						data : [ 30000, 5000, 50000, 13436, 25555, 18000,56416, 42227, 44658, 69002, 90013,
								15330 ]
					}  ,
					{
						name : 'XXXXXX',
						type : 'bar',
						yAxisIndex : 4,
						data : [ 130000, 50100, 250000, 123436, 251555, 138000,56416, 482227, 144658, 569002, 290013,
								152230 ]
					}]
		};

		// 為echarts物件載入資料 
		myChart.setOption(option);
	</script>
</body>

至此，使用ECharts完成單Y軸、多Y軸圖的展示，包括多Y軸的柱狀圖、折線圖以及柱狀圖和折線圖混搭圖的展示就結束了。

二、實際應用舉例

1、效果：

2、基於vue的專案程式碼

        initAirTemperature(id,data){
       
            let chartElement = document.getElementById(id);
            chartElement.style.height = '260px';
            let chart = echarts.init(chartElement);
            chart.dispose();
            chart = echarts.init(chartElement);
            let legendData=['降水(mm)', '溫度(℃)','相對溼度(%)','氣壓(hPa)'];
            let pmsArr=['Rain_Tot','TA_Avg','RH_Avg','Press_Avg'];
            //let units=['mm','℃','%','hPa'];
            let colors=['rgb(16,248,26)','rgb(2478,135,35)','rgb(9, 179, 241)','rgb(88, 94, 170)'];
            let series=[];
            let xAxisData=data.map(function (item) {
                return item['Hour']+":00";
            });
            for (let i = 0; i < pmsArr.length; i++) {
                let type="line";
                if(pmsArr[i]=="Rain_Tot"){
                    type="bar";
                }
                  series.push({
                    name: legendData[i],
                    type: type,
                    data: data.map(function (item) {
                        return util.formatTwoDecimalPlaces(item[pmsArr[i]]);
                    }),
                    yAxisIndex : i,
                    smooth: true, //這句就是讓曲線變平滑的
                    connectNulls: true,//斷點連線
                    symbol: 'none',
                 })
            }


            let    option = {
                color : colors,
                tooltip : {
                    trigger : 'axis'
                },
                grid : {
                   // top: 55,
                    left: '4%',
                    right: '5%',
                    bottom: '2%',
                    containLabel: true
                },
                toolbox : {
                    trigger: 'axis',
                    formatter(data) {
                      return  that.tooltipFormatter(data,"");
                    }
                },
                legend : {
                    data : legendData,
                    //icon: '', 
                },
                xAxis : [ {
                    type : 'category',
                    axisTick : {
                        alignWithLabel : false
                    },
                    data : xAxisData
                } ],
                yAxis :[{
                    type : 'value',
                    name : '降水',
                    // min : 0,
                    // max : 200,
                    position : 'right',
                    axisLine : {
                        lineStyle : {
                            color : colors[0]
                        }
                    },
                    axisLabel : {
                        formatter : '{value}'
                    },
                    splitLine:{
                        show:false
                    },
                    // max: function(value) {            
                    //     let max=value.max;
                    //     let temp=10;
                    //     if(max<=10){
                    //         temp=10;
                    //     }else if(max<=25){
                    //         temp=25;
                    //     }else if(max<=50){
                    //         temp=50;
                    //     }else if(max<=100){
                    //         temp=100;
                    //     }else if(max<=250){
                    //         temp=250;
                    //     }else {
                    //         temp=max;
                    //     }
                    //     return temp;
                    //  }
                  },{
                    type : 'value',
                    name : '溫度',
                    // min : 0,
                    // max : 11000,
                    position : 'left',
                    axisLine : {
                        lineStyle : {
                            color : colors[1]
                        }
                    },
                    axisLabel : {
                        formatter : '{value}'
                    },


                },  {
                    type : 'value',
                    name : '相對溼度',
                    // min : 0,
                    // max : 90000,
                    position : 'right',
                    offset : 40,
                    axisLine : {
                        lineStyle : {
                            color : colors[2]
                        }
                    },
                    axisLabel : {
                        formatter : '{value}'
                    },
                    splitLine:{
                        show:false
                    },
                },
                 {
                    type : 'value',
                    name : '氣壓',
                    // min : 0,
                    // max : 90000,
                    position : 'left',
                    offset : 40,
                    axisLine : {
                        lineStyle : {
                            color : colors[3]
                        }
                    },
                    axisLabel : {
                        formatter : '{value}'
                    },
                    splitLine:{
                        show:false
                    },
                    min: function(value) {
                        return util.formatZeroDecimalPlaces(value.min-2);
                    },
                    max: function(value) {
                        return util.formatZeroDecimalPlaces(value.max+2);
                    },
                } ],
                series : series

            };
            chart.setOption(option);
            chart.resize();
            this[id] = chart;
        },

       tooltipFormatter(data, unit) {
          var seriesNames = [];
          var formateStrings = [];
          var formateString = "";
          if (data.length > 0) {
              formateStrings.push(data[0].axisValue);
              for (let i in data) {
                  var item = data[i];
                  seriesNames.push(item.seriesName);
                  formateStrings.push(item.marker + item.seriesName + ": " + util.formatTwoDecimalPlaces(item.value)  + unit);
              }
              formateString = formateStrings.join("<br />");
              return formateString;

          }
        },
  onresizeAir(){
            let idArr=['airTemperature'];
            for(let i=0;i<idArr.length;i++){
                
                let id=idArr[i];
                let chartElement = document.getElementById(id);
                chartElement.style.height = (window.innerHeight -139)/3+'px';
                if(this[id]){
                    this.resizeChart(this[id]);
                }
            
            }
           },

    mounted () {
        let that=this;

        setTimeout(function(){
            that.onresizeAir();
          }, 400);    
        window.addEventListener('resize', () => {

            that.onresizeAir();

        }, false)
     
    },

通用方法

    util.formatTwoDecimalPlaces= function  (val) {
        if (val==undefined||val==null||typeof (val) !== 'number'){ return null; }
        let v2=100;
        return Math.round(val * v2) / v2;
    };
    util.formatZeroDecimalPlaces= function  (val) {
        if (val==undefined||val==null||typeof (val) !== 'number'){ return null; }
        let v2=1;
        return Math.round(val * v2) / v2;
    };

呼叫：

<divid="airTemperature"style="width:100%"></div> importutilfrom'@/libs/util.js';

this.initAirTemperature("airTemperature",data);

三、資料舉例：

完畢

ECharts多Y軸曲線（轉載）

轉載來源：https://my.oschina.net/wangmengjun/blog/909546 本文主要向大家展示一下，如何一步步完成ECharts多Y軸的探索，並給出例項和說明。

Nginx記錄-Proxy_pass多個應用配置（轉載）

Nginx記錄-Proxy_pass多個應用配置（轉載） 1. 在http節點下，加入upstream節點。 upstream linuxidc {server 10.0.6.108:7080;server 10.0.0.85:8980;}

聊聊java多執行緒（轉載）

本篇文章，為本人在某一階段對此問題的個人理解總結，水平有限，會不斷更新。

陣列中多個數組的組合方式（轉載）

技術標籤：js演算法原文部落格地址現在有一批手機，其中顏色有［‘白色’,‘黑色’,‘金色’,‘粉紅色’］；記憶體大小有［‘16G’,‘32G’,‘64G’,‘128G’］，版本有［‘移動’,‘聯通’,‘電信’］，要求寫

如何通過 ZedGraph 繪製起點位置(X軸)不同的兩條曲線?（轉）

按語：在工程中出現了類似問題，經排查以下兩條語句，設定X軸字串座標標識會帶來此問題，去掉即可。

多執行緒多程序多協程（轉載）

多執行緒多程序多協程（轉載） Bilibili螞蟻學Python UP主說得很好工作中看視訊不方便，擷取重點部分改為文字版，方便抄作業

Java 多執行緒基礎（二）

簡介在上篇 Java 多執行緒基礎（一）我們提到了一些執行緒的常用方法，這篇我們具體看看其中一些方法的使用以及方法的區別，讓我們在工作中更好的使用。

Java 多執行緒基礎（一）

簡介在接觸多執行緒之前，在我們程式中在任意時刻都只能執行一個步驟，稱之為單執行緒。在單執行緒開發的程式中所有的程式路徑都是順序執行的，前面的必須先執行，後面的才會執行。單執行緒的優點也很明顯，相對於多

SpringBoot多模組專案搭建（一）

1. 新建maven專案 1.1 File -> new -> project ->maven 1.2 設定groupId和artifactId 1.3 設定專案名

MongoDB中多表關聯查詢（$lookup）的深入講解

一. 聚合框架聚合框架是MongoDB的高階查詢語言，它允許我們通過轉換和合並多個文件中的資料來生成新的單個文件中不存在的資訊。

抽象類為什麼可以有建構函式？- Constructor of an abstract class in C#（轉載）

問 Why is it possible to write constructor for an abstract class in C#?As far as I know we can‘t instantiate an abstract class.. so what is it for?You can‘t instantiate the class,right?