Echarts使用乾貨整理（持續更新）

更多文章可關注我的個人博客：https://seven777777.github.io/myblog/

1. 縱座標軸標籤溢出問題：grid配置

之前的設置傾向於：

    grid:{
        left:"",
        right:"",
        bottom:"",
        top:""
    }

grid有個屬性是containLabel1。

• containLabel 爲 false 的時候：(默認爲false)

  • grid.left grid.right grid.top grid.bottom grid.width grid.height 決定的是由座標軸形成的矩形的尺寸和位置。

  • 這比較適用於多個 grid 進行對齊的場景，因爲往往多個 grid 對齊的時候，是依據座標軸來對齊的。

• containLabel 爲 true 的時候：

  • grid.left grid.right grid.top grid.bottom grid.width grid.height 決定的是包括了座標軸標籤在內的所有內容所形成的矩形的位置。
  • 這常用於『防止標籤溢出』的場景，標籤溢出指的是，標籤長度動態變化時，可能會溢出容器或者覆蓋其他組件。

正常情況一個模塊中只有一個圖表時，防止label值過長溢出，應該使用如下配置：

    grid:{
        left:'0',
        right:'0',
        bottom:'20%',
        top:'5%',
        containLabel: true
    }
    <!--top&bottom的設置值依實際情況而定-->

2. tooltip框被外層div遮擋問題

    tooltip:{
        confine:true,
    }
    <!--tooptip.confine-->
	<!--[ default: false ]-->
	<!--是否將 tooltip 框限制在圖表的區域內-->

歡迎關注的我的個人公衆號【搴芳拾夢】