前言
在撰寫如何繪制雙y軸圖表文章時，我突然萌生出了一個想法，如果給圖表添加兩個以上的y軸會怎么樣呢? 帶著這個問題我開始了自己的探索之旅。
我找到了一篇優秀的文章作為參考，雖然它需要付費，但是不要緊，文中免費瀏覽的部分已經足夠了。在這篇文章中作者給出了如下的效果圖，下面我將嘗試復現它。
1.添加6條y軸
第一步就是給我們的表格添加6條y軸。方法很簡單，只要將yAxis設置為一個數組，在其中添加6個y軸對象即可。
{yAxis: [{type: 'value',name: '水位(m)',axisLine: {show: true,symbol: ['none', 'arrow'],},},{type: 'value',name: '流量(m3/s)',axisLine: {show: true,symbol: ['none', 'arrow'],},},{type: 'value',name: '指標參數三',axisLine: {show: true,symbol: ['none', 'arrow'],},},{type: 'value',name: '指標參數四',axisLine: {show: true,symbol: ['none', 'arrow'],},},{type: 'value',name: '指標參數五',axisLine: {show: true,symbol: ['none', 'arrow'],},},{type: 'value',name: '指標參數六',axisLine: {show: true,symbol: ['none', 'arrow'],},},],
}2.解決y軸重疊問題
現在添加了6條y軸的圖是這樣的：
從上圖中可以看出第一條y軸在左側，剩下的5條y軸都在右側，它們重疊在一起。
我們可以通過yAxis.position和yAxis.offset這兩個屬性，將我們的6條y軸設置為與效果圖中一樣左右各3條的布局。
{yAxis：[{type: 'value',name: '水位(m)',axisLine: {show: true,},},{type: 'value',name: '流量(m3/s)',axisLine: {show: true,},},{type: 'value',name: '指標參數三',position:'right',offset: 20,axisLine: {show: true,},},{type: 'value',name: '指標參數四',position:'right',offset: 40,axisLine: {show: true,},},{type: 'value',name: '指標參數五',position:'left',offset: 20,axisLine: {show: true,},},{type: 'value',name: '指標參數六',position:'left',offset: 40,axisLine: {show: true,},},]
}
看了現在我畫出的這張效果圖，可能有朋友就要問了，為什么你不把offset設的大一點？現在雖然軸線分開了，但它們的name還是重疊在一起。
我也很無奈啊，也很想將offset設大，但這樣軸線就超出畫布范圍了。可以測試一下，現在我將右側第三根y軸的offset增大：
{type: 'value',name: '指標參數四',position:'right',offset: 60,axisLine: {show: true,},
}從結果就可以看到這條軸線直接消失了。
3.解決畫布空間不足的問題
為了直觀的看出畫布的范圍，我給畫布添加一個背景色。
我們解決空間不足的方法是，利用grid.left和grid.right屬性壓縮圖表在畫布中的尺寸。
{grid: {left: '15%',right:'15%'},
}此時我們就會驚喜的發現，之前消失的右側第三條y軸又重新出現了。
最后基于上面的思路，我們在對y軸進行調整（我還調整了容器的尺寸 O(∩_∩)O哈哈~）：
{grid: {left: '20%',right:'20%'},yAxis: [{type: 'value',name: '水位(m)',axisLine: {show: true,},},{type: 'value',name: '流量(m3/s)',axisLine: {show: true,},},{type: 'value',name: '指標參數三',position: 'right',offset: 60,axisLine: {show: true,},},{type: 'value',name: '指標參數四',position: 'right',offset: 120,axisLine: {show: true,},},{type: 'value',name: '指標參數五',position: 'left',offset: 60,axisLine: {show: true,},},{type: 'value',name: '指標參數六',position: 'left',offset: 120,axisLine: {show: true,},},],
}
目前我已經完成了對6條y軸的布局工作，但可以看距離效果圖仍有差距，我會持續優化的，敬請期待。。。
參考資料
- Echarts實現多個x軸或y軸曲線圖_echarts雙x軸(非等分情況)-CSDN博客
- yAxis.offset - Apache ECharts
- grid.left - Apache ECharts
