echarts grid的样式位置_ECharts设置grid组件在容器中的位置

很多人在用 ECharts 时会发现图表真正的绘图区域和图表容器之间有很大一块间隔，看上去有些很不饱满。怎么办？

本节将讨论如何让 ECharts 中的 grid 组件能在容器中处于一个合适的位置。这样的设置主要是通过控制 grid 组件的 top、left、buttom、right 属性实现的：

title.left string, number

[ default: 'auto' ]

grid 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

title.top string, number

[ default: 'auto' ]

grid 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

title.right string, number

[ default: 'auto' ]

grid 组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

title.bottom string, number

[ default: 'auto' ]

grid 组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。