在一些數據量過大的情況下，在一個固定的區域繪圖往往需要對圖表繪制區域的大小進行動態改變。這時候設置條形圖距離繪圖區域上下左右的距離可使用如下方式：表示條形圖的柱子距離繪圖區左邊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在一個指定大小的面板中展示條形圖且需要對條形圖的位置進行設置，不能使得圖表過於貼緊繪圖區邊緣，且需要不同量級的數據切換的展示問題，完美解決。