ECharts設(shè)置grid組件在容器中的位置

很多人在用 ECharts 時(shí)會(huì)發(fā)現(xiàn)圖表真正的繪圖區(qū)域和圖表容器之間有很大一塊間隔，看上去有些很不飽滿。怎么辦？

本節(jié)將討論如何讓 ECharts 中的 grid 組件能在容器中處于一個(gè)合適的位置。這樣的設(shè)置主要是通過控制 grid 組件的 top、left、buttom、right 屬性實(shí)現(xiàn)的：

title.left string, number

[ default: 'auto' ]

grid 組件離容器左側(cè)的距離。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

title.top string, number

[ default: 'auto' ]

grid 組件離容器上側(cè)的距離。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

title.right string, number

[ default: 'auto' ]

grid 組件離容器右側(cè)的距離。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

默認(rèn)自適應(yīng)。

title.bottom string, number

[ default: 'auto' ]

grid 組件離容器下側(cè)的距離。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

默認(rèn)自適應(yīng)。