ECharts适配可缩放容器时如何固定左右边距？

问题根源是ECharts默认的grid布局会根据容器尺寸自动调整边距比例，导致容器放大时边距同步增大。通过以下步骤可以固定边距大小：

1. 显式设置Grid固定边距 #

在ECharts配置项中添加grid参数，直接指定左右上下边距的像素值，替代默认的自适应逻辑：

let option = {
    animation: false,
    // 新增固定边距的grid配置
    grid: {
        left: 40,    // 左侧固定边距（单位：px）
        right: 40,   // 右侧固定边距
        top: 20,     // 顶部固定边距
        bottom: 30,  // 底部固定边距
        containLabel: true // 确保坐标轴标签不会被裁剪
    },
    xAxis: {
      type: 'value',
      minorTick: {
        show: true,
      }
    },
    yAxis: {
      type: 'value'
    },
    // 其余配置保持不变...
};

2. 确保图表容器占满可用空间 #

给图表容器添加CSS样式，让它填充父容器除头部外的所有区域（假设头部高度为40px）：

.trace-set-window {
    position: relative;
}
.trace-set-window-main-chart {
    width: 100%;
    height: calc(100% - 40px);
    position: absolute;
    top: 40px;
    left: 0;
}

3. 调整ResizeObserver监听目标 #

将监听对象从整个窗口容器改为图表容器本身，避免头部、拖拽手柄等无关元素的尺寸变化触发不必要的图表重绘：

// 原监听对象：traceChartWindow
// 修改为直接监听图表容器windowMainChart
resizeObserver.observe(windowMainChart);

修改完成后，当容器缩放时，图表的绘图区域会自动填充剩余空间，而左右上下边距会保持指定的固定像素值，不会随容器尺寸变化而同步增大。

内容的提问来源于stack exchange，提问作者Calvin_Z