前言:相信 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 決定的是包括了坐標軸標簽在內的所有內容所形成的矩形的位置。
- 這常用於『防止標簽溢出』的場景,標簽溢出指的是,標簽長度動態變化時,可能會溢出容器或者覆蓋其他組件。
后語:這下小伙伴們知道,以后遇到這個問題,該先做什么了吧