在一些数据量过大的情况下，在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变。这时候设置条形图距离绘图区域上下左右的距离可使用如下方式：表示条形图的柱子距离绘图区左边30%，距离右边40%，而距离顶部和底部分别为10px和15px。
但在实际操作中发现，如果上下边距也使用百分比，那么在数据切换的时候，不同数据量时第一条柱子距离绘图区域顶部和底部的高度并不一致！数据量大时，距离绘图区域顶部的距离就大，数据量变小，距离绘图区域顶部的距离就变小。
1 grid: { 2 x: '30%', 3 top: '10px', 4 bottom: '15px', 5 right: '40%' 6 }
对比后发现，grid中的百分比，其实指的是在当前数据量下，占绘图区域大小的比例。因此，在条形图高度确定的情况下，数据量大的，距离就会变大，数据量小的，距离就会变小。
如：指定每个条形图的高度为30px，grid设置的top值为1%。
则：在同一绘图范围内，如果其中一组数据含有30条记录，那么切换到该数据时距离顶部的距离为30*30*1% = 9px；另外一组为100条记录，那么第一条条形图距离绘图区顶部的距离就为100*30*1% = 30px；可以看出，这两组数据之间的切换，各自距离绘图区顶部的距离会各不相同。
而绘图区宽度由于是固定的，所以可以使用百分比进行设置，距离左右绘图区的距离不会因为设置百分比而不同。
同理。如果绘制的为柱状图，则在数据量过大时要能够使得绘图区域左右滑动而不至于使得柱状图过于贴近绘图区域边界，对left和right的设置就需要使用具体数值而不能使用百分比，而对上下边距的设置可以使用百分比。
echarts在一个指定大小的面板中展示条形图且需要对条形图的位置进行设置，不能使得图表过于贴紧绘图区边缘，且需要不同量级的数据切换的展示问题，完美解决。
扫描二维码关注公众号，回复：
5924295 查看本文章
