echarts中g(shù)rid圖表的位置配置詳解

更新時間：2023年04月23日 12:02:17 作者：愛學(xué)習(xí)的Akali?King

ECharts是一個純JavaScript圖表庫,底層依賴于輕量級的Canvas類庫ZRender,下面這篇文章主要給大家介紹了關(guān)于echarts中g(shù)rid圖表的位置配置的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

首先還是先認(rèn)識grid，要弄清楚grid是哪一塊區(qū)域，這就牽扯到對echarts圖表元素的基本認(rèn)識。為此，我做了一個總結(jié)，如圖所示：

數(shù)學(xué)里的笛卡爾坐標(biāo)系分為直角坐標(biāo)系和斜坐標(biāo)系。而grid只適用于直角坐標(biāo)系！

我們已經(jīng)知道了grid表示哪一塊區(qū)域，接下來具體看看它到底有什么屬性，能干什么？

echarts官網(wǎng)中g(shù)rid組件的屬性并不多，但是我們依然就常用的屬性看看，熟悉一下

重點：

在ECharts 2.x 里單個 echarts 實例中最多只能存在一個 grid 組件，在 ECharts 3 中可以存在任意個 grid 組件。

option = {
?? ?grid: {
?? ??? ?show: true,?? ??? ??? ??? ??? ????????????? //是否顯示圖表背景網(wǎng)格?? ?
?? ??? ?left: '0%',?? ??? ??? ??? ??? ???????????????? //圖表距離容器左側(cè)多少距離
?? ??? ?right: '40%',?? ??? ??? ??? ???????????????? //圖表距離容器右側(cè)側(cè)多少距離
?? ??? ?bottom: '3%',?? ??? ??? ??? ?????????????? //圖表距離容器上面多少距離
?? ??? ?top: 50,?? ??? ??? ??? ??? ? ????????????????? //圖表距離容器下面多少距離
?? ??? ?containLabel: true,?? ??? ??? ??????? ? //防止標(biāo)簽溢出 ?
?? ??? ?backgroundColor:'#555555',?? ? //網(wǎng)格背景色，默認(rèn)透明
?? ?}
}

注意：
grid里面的上下左右，相當(dāng)于內(nèi)邊距的意思，是距離容器上下左右各多少，并不是向左向右多少距離。這個一般用%或者數(shù)字來表示。

containLabel這個屬性一般寫true，表示防止標(biāo)簽長度動態(tài)變化時，可能會溢出容器或者覆蓋其他組件。它包括了坐標(biāo)軸標(biāo)簽在內(nèi)的所有內(nèi)容所形成的矩形的位置。相當(dāng)于label標(biāo)簽的效果。

下面我們看看有containLabel和沒有containLabel屬性的區(qū)別，一看就明白：

加上containLabel：true