創(chuàng)新互聯(lián)ECharts教程：ECharts設(shè)置grid組件在容器中的位置

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

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的右江網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

本節(jié)將討論如何讓 ECharts 中的 grid 組件能在容器中處于一個(gè)合適的位置。這樣的設(shè)置主要是通過(guò)控制 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)。

分享標(biāo)題：創(chuàng)新互聯(lián)ECharts教程：ECharts設(shè)置grid組件在容器中的位置
URL地址：http://www.jiaotiyi.com/article/dpjjdcd.html