echarts 折線圖(移動端)X軸顯示不全


主要原因

X軸文字太多,需要文字傾斜角度,換行以及省略

X軸文字傾斜角度,換行

interval

坐標軸刻度標簽的顯示間隔(在類目軸中有效哦),默認會采用標簽不重疊的方式顯示標簽(也就是默認會將部分文字顯示不全)可以設置為0強制顯示所有標簽,如果設置為1,表示隔一個標簽顯示一個標簽,如果為3,表示隔3個標簽顯示一個標簽,以此類推

rotate

標簽傾斜的角度,在類目軸的類目標簽顯示不全時可以通過旋轉防止標簽重疊(官方這樣說的)旋轉的角度是-90到90度

xAxis:{
  axisLabel:{
    interval: 0,//X軸信息全部展示
    rotate: -60,//60 標簽傾斜的角度
  }
}

依舊受到遮擋

這個名稱x軸的文字如果太長會受到遮擋,還是顯示不全,這個時候可以用grid屬性解決

grid: {
  left: '10%',
  bottom:'35%'
},

需求(中文顯示兩行,文字過多顯示省略號;長日期顯示一行,過多顯示省略號)

formatter

axisLabel中使用formatter回調,formatter有兩個參數,使用方法是這樣的formatter:function(value,index){} ,value是類目(測試醫院A,人民醫院),index 是類目索引。

xAxis:{
  axisLabel:{
     formatter:function(value){
        let ret = ""; //拼接加\n返回的類目項
        let maxLength = 8; //每項顯示文字個數
        if(value.length>2*maxLength){
          value = value.substring(0, 2*maxLength - 3) + "...";
        }
        let valLength = value.length; //X軸類目項的文字個數
        let rowN = Math.ceil(valLength / maxLength); //類目項需要換行的行數
        if(/.*[/u4e00-/u9fa5]+.*$/.test(value)){//判斷是否有中文
          if(rowN > 1){
            for (let i = 0; i < rowN; i++) {
                let temp = "";//每次截取的字符串
                let start = i * maxLength;//開始截取的位置
                let end = start + maxLength;//結束截取的位置
                //這里也可以加一個是否是最后一行的判斷,但是不加也沒有影響,那就不加吧
                temp = value.substring(start, end) + "\n";
                ret += temp; //憑借最終的字符串
            }
            return ret
          }else{
            return value 
          }
        }else{
          return value
        }
     }
  }
}

總結

整體代碼

op1:{
  grid: {
    left: '10%',
    bottom:'35%'
  },
  xAxis:{
    axisLabel:{
       textStyle:{
          color: "#444",
          fontSize: 8,
          lineHeight: 9
       },
       formatter:function(value){
          let ret = ""; //拼接加\n返回的類目項
          let maxLength = 8; //每項顯示文字個數
          if(value.length>2*maxLength){
            value = value.substring(0, 2*maxLength - 3) + "...";
          }
          let valLength = value.length; //X軸類目項的文字個數
          let rowN = Math.ceil(valLength / maxLength); //類目項需要換行的行數
          if(/.*[/u4e00-/u9fa5]+.*$/.test(value)){//判斷是否有中文
            if(rowN > 1){
              for (let i = 0; i < rowN; i++) {
                  let temp = "";//每次截取的字符串
                  let start = i * maxLength;//開始截取的位置
                  let end = start + maxLength;//結束截取的位置
                  //這里也可以加一個是否是最后一行的判斷,但是不加也沒有影響,那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //憑借最終的字符串
              }
              return ret
            }else{
              return value 
            }
          }else{
            return value
          }
       }
    },
    interval: 0,//X軸信息全部展示
    rotate: -60,//60 標簽傾斜的角度
  }
}

echarts 折線圖(移動端)X軸顯示不全


免責聲明!

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



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