前言

我們公司項目中的折線圖大都是雙y軸的，因為這些圖表往往需要同時展示水位和流量這兩種不同單位的數據，因此如何繪制雙y軸折線圖就是就是我所面臨的首要問題。

1.如何繪制雙y軸

將yAxis屬性的值設置為一個數組，并在數組中添加兩個axis對象，就能實現雙y軸。

{{type: 'value',name: '水位(m)',axisLine: {show: true,symbol: ['none', 'arrow'],},},{type: 'value',name: '流量(m3/s)',axisLine: {show: true,symbol: ['none', 'arrow'],},},],
}

2.如何讓serie選擇對應的y軸

從上面的圖中可以看到，雖然我們現在已經添加了兩條y軸，但兩個系列 “xxx水位”和“xxx流量”都還使用的是第一條y軸（水位）。我希望呈現的效果是“xxx水位”使用第一條y軸（水位），xxx流量”使用第二條y軸（流量）。

可以借助series的yAxisIndex屬性來實現我想要的效果。

將yAxisIndex屬性值設置為0，則serie就使用第一條y軸；將yAxisIndex屬性值設置為1，則serie就使用第二條y軸。

{series: [{name: 'xxx水位',type: 'line',yAxisIndex: 0,data: [120, 132, 101, 134, 90, 230, 210],},{name: 'xxx流量',type: 'line',yAxisIndex: 1,data: [220, 182, 191, 234, 290, 330, 310],},]
}

3.多y軸的可能性

當寫到這里的時候，我突然萌生出了一個想法，如果給圖表添加兩個以上的y軸會怎么樣呢?

不過這就就是另一篇文章中要講的故事了。

想要了解給圖表添加兩個以上y軸的方法，可以瀏覽我文章在圖表中添加多條y軸會怎么樣？

參考資料

series-line.yAxisIndex - Apache ECharts