我之前做数据可视化项目时也碰到过这个问题——两个共用X轴的垂直布局图表，因为Y轴标签长度差异大导致X轴错位，旋转标签虽有效但总影响可读性。这里给你几个更合适的替代方案：

方案1：固定Y轴标签宽度 #

通过给两个图表的Y轴标签设置统一的固定宽度，让Y轴区域的占位完全一致，从根源上避免X轴错位。

• 优点：保留Y轴标签的正常显示方向，可读性不受影响
• 注意点：如果标签过长，可配合省略号和 tooltip 显示完整内容
• 示例配置（以ECharts为例）：

// 两个图表的Y轴都使用该配置
yAxis: {
  axisLabel: {
    width: 70, // 统一固定宽度
    overflow: 'ellipsis', // 超出部分显示省略号
    triggerEvent: true, // 开启事件，方便绑定tooltip显示完整文本
  }
}

方案2：统一图表布局的边距/网格参数 #

直接让两个图表的Y轴区域占用相同的宽度空间，比如通过图表库的布局配置或CSS布局约束实现：

• 用图表库自带的网格配置：比如ECharts的grid.left设置为相同的值（比如'12%'），强制两个图表的左侧边距一致
• 用CSS布局：把两个图表容器放在Grid布局里，给Y轴对应的列设置固定宽度，图表内容自适应剩余空间

方案3：合并为单图表+双Y轴 #

如果两个数据集的趋势需要对比，不如直接把它们合并到同一个图表中，用左右两个Y轴分别对应不同数量级的数据，这样X轴天然完全对齐：

• 优点：既解决了对齐问题，还能更直观地对比两个数据集的趋势关联
• 示例配置（以ECharts为例）：

option: {
  xAxis: { type: 'category', data: ['周一', '周二', '周三'] },
  yAxis: [
    { type: 'value', name: '高数量级数据' }, // 左侧Y轴
    { type: 'value', name: '低数量级数据', position: 'right' } // 右侧Y轴
  ],
  series: [
    { type: 'line', yAxisIndex: 0, data: [1000, 1200, 1500] },
    { type: 'line', yAxisIndex: 1, data: [10, 15, 20] }
  ]
}

方案4：动态计算标签宽度并调整边距 #

通过JS动态获取两个Y轴标签的最大宽度，然后统一设置两个图表的左侧边距，实现自适应对齐：

• 步骤：
  1. 渲染两个图表后，获取各自Y轴标签的DOM元素
  2. 计算所有标签中的最大宽度
  3. 重新设置两个图表的左侧边距为该最大宽度+额外留白
• 示例（以Chart.js为例）：

// 渲染完成后执行
const chart1YLabels = document.querySelectorAll('#chart1 .y-axis-label');
const chart2YLabels = document.querySelectorAll('#chart2 .y-axis-label');
const maxWidth = Math.max(
  ...[...chart1YLabels, ...chart2YLabels].map(el => el.offsetWidth)
);
// 调整两个图表的左侧边距
chart1.options.layout.padding.left = maxWidth + 10;
chart2.options.layout.padding.left = maxWidth + 10;
chart1.update();
chart2.update();

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