Echarts 折線圖y軸標簽值太長時顯示不全的解決辦法 (Markdown使用示范文)


前言:相信 Echarts 用的比較多的童鞋都會遇到,Y 軸的標簽太長,以至於顯示不下的情況。

我的嘗試:試過改容器的大小,也是過設置 option.grid.left ,總覺得不太好,因為 Y 軸的標簽的長度是不確定的,一味的用 left 去推,頁面的排版總是控制不好。

目前比較好的解決辦法: 設置: option.grid.containLabel = true

option: {
    grid: {
        containLabel: true
    }
}

看一下官方對這個屬性的解釋:

grid. containLabel

grid 區域是否包含坐標軸的刻度標簽。

containLabel 為 false 的時候:

  • grid.leftgrid.rightgrid.topgrid.bottomgrid.widthgrid.height 決定的是由坐標軸形成的矩形的尺寸和位置。
  • 這比較適用於多個 grid 進行對齊的場景,因為往往多個 grid 對齊的時候,是依據坐標軸來對齊的。

containLabel 為 true 的時候:

  • grid.leftgrid.rightgrid.topgrid.bottomgrid.widthgrid.height 決定的是包括了坐標軸標簽在內的所有內容所形成的矩形的位置。
  • 這常用於『防止標簽溢出』的場景,標簽溢出指的是,標簽長度動態變化時,可能會溢出容器或者覆蓋其他組件。

后語:這下小伙伴們知道,以后遇到這個問題,該先做什么了吧


免責聲明!

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



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