ECharts多Y軸曲線（轉載）

轉載來源：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,

ECharts多Y軸曲線（轉載）

什麼是ECharts

ECharts單Y軸圖表示例

引入ECharts

指定圖形展示區域

初始化echarts實例

指定配置項和數據

設置Option顯示圖表

單Y軸示例代碼和執行效果

爲什麼要使用多Y軸

實現多Y軸功能

修改option內容

兩個Y軸

三個Y軸

博客園《彈盡糧絕，會員救園：會員上線，命懸一線》的危機與機遇！

SQLSERVER 交、並、差集，In,Not In,Exist,Not Exist的區別，四種連接（轉載）

EF Core 6.0手動添加關係表、刪除關係表（類似級聯刪除、級聯添加、級聯修改）；

.net 6 增刪改查、異步事務

ADO實體模型程序集引用後卻不生效

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

ECharts多Y軸 曲線（轉載）

什麼是ECharts

ECharts單Y軸圖表示例

引入ECharts

指定圖形展示區域

初始化echarts實例

指定配置項和數據

設置Option顯示圖表

單Y軸示例代碼和執行效果

爲什麼要使用多Y軸

實現多Y軸功能

修改option內容

兩個Y軸

三個Y軸

ECharts多Y軸曲線（轉載）