使用echarts強制將y軸分段,y軸顯示的值小於1024,自動計算單位


    (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 },

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM