ECharts 多條座標軸軸線,合併為一條線

2021-08-30 13:34:46 字數 1904 閱讀 6629

2條y軸,y軸的座標軸軸線axisline太多,擾人視線,如圖

剛開始用分割線(yaxis.splitline)做出來的這個效果。

後期,改為兩條線合併為一條。

網上找乙個沒有關於splitline的設定,查詢echarts,發現一種方法:通過yaxis.axisline軸線,及yaxis.max、yaxis.interval、yaxis.splitnumber手動控制y軸的最大值、軸線的刻度間隔、分割段數來整合。

如圖:

// 把2個y軸需要的數值,動態存為陣列--專案中陣列是從後台取得資料,動態新增的,此處直接寫出來,方便操作

var echartyaxis0 =

["208.153"

,"194.690"

,"192.156"];

var echartyaxis1 =

["2.6"

,"2.4"

,"1.3"];

// y軸--計算

var max0 =

+echartyaxis0[0]

?+echartyaxis0[0]

:0for(

let i =

0, len = echartyaxis0.length; i < len; i++)}

var max1 =

+echartyaxis1[0]

?+echartyaxis1[0]

:0for(

let i =

0, len = echartyaxis1.length; i < len; i++)}

if(max0 ===0)

else

if(max1 ===0)

else

var splitnumber =

5var interval0 = max0 / splitnumber

var interval1 = max1 / splitnumber

// echarts -- setoption

gdpoption.yaxis[0]

.max = max0

gdpoption.yaxis[1]

.max = max0

gdpoption.yaxis[0]

.interval = interval0

gdpoption.yaxis[1]

.interval = interval1

gdpoption.yaxis[0]

.splitnumber = splitnumber

gdpoption.yaxis[1]

.splitnumber = splitnumber

上圖,完整的option,如下

// 在這裡插入**片

let gdpoption =},

grid:

, xaxis:},

axistick:},

yaxis:[}

, axistick:},

},axistick:}]

, series:[,

]}

gdpoption .series中的data資料,也是動態添的

echarts 上下雙座標軸Y軸對齊

1.問題 不同的資料來源用同乙個布局頁面來顯示會導致對齊乙個頁面另外的頁面y軸對不齊,如下圖 圖1 圖2 後來經過觀察發現,圖1和圖二的下半部分的y軸數量座標位數不一樣,導致了長度不同,這樣的話就不行,不能夠適配其他的資料。所以就必須把上下兩個軸的y軸的數量的寬度固定下來,然後讓它們左對齊或右對齊,...

echarts 動態修改縱座標軸名稱

需求 在同乙個echarts折線圖位置中需要顯示不同型別的資料,但所對應的縱座標的單位不同,需要在切換不同資料型別的時候,縱座標上方顯示的單位名稱也不同。實現方法 只需要在js中先定義乙個全域性變數yname,然後在切換資料型別的時候,根據傳入的資料型別進行判斷,給yname賦值 var yname...

matplotlib 設定座標軸

在使用matplotlib模組時畫座標圖時,往往需要對座標軸設定很多引數,這些引數包括橫縱座標軸範圍 座標軸刻度大小 座標軸名稱等 在matplotlib中包含了很多函式,用來對這些引數進行設定。plt.xlim plt.ylim 設定橫縱座標軸範圍 plt.xlabel plt.ylabel 設定...