echarts图表的内边距_echarts - 条形图grid设置距离绘图区域的距离

在一些数据量过大的情况下，在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变。这时候设置条形图距离绘图区域上下左右的距离可使用如下方式：表示条形图的柱子距离绘图区左边30%，距离右边40%，而距离顶部和底部分别为10px和15px。

但在实际操作中发现，如果上下边距也使用百分比，那么在数据切换的时候，不同数据量时第一条柱子距离绘图区域顶部和底部的高度并不一致！数据量大时，距离绘图区域顶部的距离就大，数据量变小，距离绘图区域顶部的距离就变小。

grid: {

x: '30%',

top: '10px', bottom: '15px', right: '40%'

}

对比后发现，grid中的百分比，其实指的是在当前数据量下，占绘图区域大小的比例。因此，在条形图高度确定的情况下，数据量大的，距离就会变大，数据量小的，距离就会变小。

如：指定每个条形图的高度为30px，grid设置的top值为1%。

则：在同一绘图范围内，如果其中一组数据含有30条记录，那么切换到该数据时距离顶部的距离为30*30*1% = 9px；另外一组为100条记录，那么第一条条形图距离绘图区顶部的距离就为100*30*1% = 30px；可以看出，这两组数据之间的切换，各自距离绘图区顶部的距离会各不相同。

而绘图区宽度由于是固定的，所以可以使用百分比进行设置，距离左右绘图区的距离不会因为设置百分比而不同。

同理。如果绘制的为