ECharts在渲染柱状图、折线图、散点图这类直角坐标系图表时，真正画图形的区域并不是整个容器，而是由grid组件圈出来的一块“绘图区”。grid离容器的距离，指的就是这块绘图区的四条边距离容器上下左右边缘的留白，对应配置项里的left、right、top、bottom四个属性。这个留白看似简单，实际开发中却经常因为理解不到位引发标签被裁剪、多图无法对齐、图例压住坐标轴等问题。
grid离容器的距离到底是什么
先看一个最基本的配置。假设容器的宽度是600像素，高度是400像素：
option = {
grid: {
left: 50, // 绘图区左边距离容器左边缘 50px
right: 20, // 绘图区右边距离容器右边缘 20px
top: 40, // 绘图区上边距离容器上边缘 40px
bottom: 30 // 绘图区下边距离容器下边缘 30px
},
xAxis: { type: 'category', data: ['一月', '二月', '三月'] },
yAxis: { type: 'value' },
series: [{ type: 'bar', data: [120, 200, 150] }]
};
按照这个配置，绘图区的宽度就是600减去50再减去20，等于530像素；高度是400减去40再减去30，等于330像素。所有的柱子、折线、散点只会画在这530×330的区域内，容器四周的留白就是留给坐标轴刻度标签、轴名称等元素的展示空间。
需要特别理解的一点是：grid定义的是“坐标系”的位置，而不是图表整体的位置。图例（legend）、标题（title）、提示框（tooltip）这些组件不受grid控制，它们有自己独立的定位属性。很多初学者以为把grid的top调大标题就会跟着下移，这是不对的，标题位置要靠title组件自己的top属性来调。
像素与百分比两种取值的区别
left、right、top、bottom四个属性都支持两种写法：数字和百分比字符串。
grid: {
left: 80, // 数字，单位像素，固定距离
right: '15%', // 百分比，参照容器宽度的 15%
top: '10%', // 百分比，参照容器高度的 10%
bottom: 60
}
数字写法的好处是精确可控，不管容器多大，留白都是固定的像素值，适合多张图表并排展示时做严格对齐。比如大屏上同一行放了三张图表，如果都写left: 120，即使三张图的Y轴刻度位数不同，绘图区起点也能保持一致，视觉上整齐划一。
百分比写法参照的是容器尺寸，注意是整个容器的宽高，不是绘图区的尺寸。容器是800像素宽时，left: '10%'就是80像素；容器缩放到400像素时，它自动变成40像素。这种写法适合响应式场景，图表随窗口缩放时留白按比例变化，不会出现小屏幕下留白占比过大的问题。
两种方式可以混用，但要避免的是同一条边既给了left又给了right还同时设置了width，三者冲突时ECharts会优先满足哪一侧取决于具体版本，结果往往不符合预期。建议每条边只控制一侧，需要固定绘图区大小时再用width或height。
containLabel自适应标签的用法与陷阱
grid距离设置中最常见的需求是：Y轴的刻度标签有长有短，比如数据从个位数涨到百万级，刻度文字宽度变化很大，固定left值要么留白太多浪费空间，要么留白太少标签被裁剪。ECharts为此提供了containLabel属性：
grid: {
left: 10,
right: 10,
containLabel: true // 把轴标签的尺寸计入 grid 范围
}
containLabel为true时，ECharts会自动测量坐标轴刻度标签和轴线的实际占位，然后把绘图区向内收缩，保证标签完整显示。这对刻度动态变化的图表非常省心，不用手动估算标签宽度。
但containLabel有一个容易被忽视的陷阱：它是把标签尺寸“加到”你设置的距离之上的。也就是说，设置了left: 10, containLabel: true，实际左边距是10像素加上Y轴标签的宽度。这带来两个问题：一是多图对齐场景下，如果各图Y轴刻度位数不同，即使left都写10，最终绘图区起点仍然不对齐，想要严格对齐反而不能用containLabel，得改用统一的固定left值；二是containLabel会把轴名称（name）的占位也计算进去，导致留白超出预期，此时可以通过单独调整nameGap等属性来缓解。
常见误区提醒
第一个误区：百分比参照对象搞错。有开发者以为left: '10%'是绘图区宽度的10%，实际它参照的是容器宽度。当right也设了较大百分比时，两边留白加起来可能超过容器宽度，绘图区被压缩得极窄甚至消失，图表渲染出来就是一条线或者空白。
第二个误区：标签被裁剪时只知道加大left。X轴标签过长超出容器时，症状是两端文字被截断，正确的做法要么开启axisLabel的interval和旋转角度，要么使用boundaryGap配合containLabel，盲目加大left会导致绘图区越来越窄。
第三个误区：容器本身没尺寸。grid的百分比计算依赖容器尺寸，如果外层div没有设置宽高，容器宽高为0，所有百分比距离都是0，图表渲染异常。排查grid问题前，先确认容器是否有明确的宽高，或者初始化前调用了resize。
第四个误区：动态数据更新后留白不刷新。切换数据源后Y轴刻度从千级变成百万级，如果containLabel没开，标签会溢出绘图区。解决办法是初始化时就规划好刻度格式，比如用axisLabel.formatter把大数字格式化成“100万”这类短文本，从源头控制标签宽度，比事后补救更可靠。
总结一下，grid离容器的距离本质上是在容器内为绘图区“划地盘”，数字取值精确适合对齐，百分比取值弹性适合响应式，containLabel解决标签自适应但要理解它的叠加逻辑。掌握这几点，grid布局相关的裁剪、错位问题基本都能快速定位并解决。
ECharts gridleft属性图表布局修改时间：2026-09-05 12:38:43