(1)將y軸強制分為五段,效果圖:
實現方法:在yAxis:{}中配置最大值和最小值還有分段的值,核心代碼如下:
min: 0, max: this.unit.max, interval: this.unit.max/5,
因為這里需要設計的是實時備份流量,所以這里的max是一個變化的值,所以就先設計了一個變量,每當數據請求一次,max也會跟着變化
(2)將y軸展示的值轉化成小於1024的值:效果圖在上方進行了展示,由於后端傳遞給前端的數值的單位是字節類型的,數據量特別大,所以在展示的時候需要對數據進行轉化,轉變成小於1024的值
實現方法:在yAxis中的 axisLabel 屬性 進行配置 。 實現想法是:在數據進行顯示前進行攔截,攔截到了數據,然后在進行修改,修改完了在進行顯示,核心代碼如下:
axisLabel: { formatter: (value) => { //formatter攔截數據展示的方法 let max = this.unit.data.reduce((a,b)=>a>b?a:b); if(max == 0){ return value }else{ value = this.y_axis_data_display(max,value); //該方法是將展示的值轉化成小於1024的數據 return value } } } -------------------------------分割線--------------------------------------
/*
實現方式:獲取到傳遞過來的最大值和需要轉變的值,
先確定最大值是屬於哪一個數量級的,然后在將這個
數量級轉化保存下來,然后在通過這個數量級將需要
轉變的值轉化成同一個數量級的值
*/
y_axis_data_display(max,value){ if (max <= 0) { value = '0'; } else{ let k = 1024; let c = Math.floor(Math.log(max) / Math.log(k)); if(c == -1){ c=0 } value = (value / Math.pow(k, c)).toFixed(1); } return value },