Apache ECharts Y轴名称避免与标签重叠的适配方案咨询

针对Y轴名称与标签重叠、屏幕缩小时名称超出边界的问题，以下是几种可靠的适配方案：

方案一：使用nameGap+轴标签自动换行 #

用nameGap替代固定padding（它定义Y轴名称与轴线的间距，相对更灵活），同时开启轴标签自动换行，避免长标签占用过多空间：

option = {
  grid: {
    left: '10%', // 预留左侧空间，防止名称超出边界
    right: '10%',
    bottom: '15%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [{
    name: "TEST",
    nameLocation: "middle",
    nameGap: 40, // 名称与轴线的间距，可根据实际标签长度调整
    axisLabel: {
      overflow: 'break', // 长标签自动换行
      width: 60 // 限制标签最大宽度，超出则换行
    }
  }],
  series: [
    {
      data: [15000000, 23000000, 22400000, 21800000, 13500000, 14700000, 26000000],
      type: 'line'
    }
  ]
};

方案二：响应式配置适配不同屏幕尺寸 #

利用ECharts的media规则，根据屏幕宽度自动调整grid、nameGap等参数，适配不同设备：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [{
    name: "TEST",
    nameLocation: "middle",
    nameGap: 30,
    axisLabel: {
      overflow: 'break',
      width: 60
    }
  }],
  series: [
    {
      data: [15000000, 23000000, 22400000, 21800000, 13500000, 14700000, 26000000],
      type: 'line'
    }
  ],
  // 响应式规则：根据屏幕宽度调整配置
  media: [
    {
      query: { maxWidth: 600 },
      option: {
        grid: { left: '15%' },
        yAxis: {
          nameGap: 20,
          axisLabel: { width: 40 }
        }
      }
    },
    {
      query: { minWidth: 1200 },
      option: {
        grid: { left: '8%' },
        yAxis: {
          nameGap: 50,
          axisLabel: { width: 80 }
        }
      }
    }
  ]
};

方案三：动态计算标签宽度，精准设置nameGap #

通过监听图表渲染事件，自动计算轴标签的最大宽度，动态调整nameGap，彻底避免重叠：

// 初始化图表
const myChart = echarts.init(document.getElementById('main'));

const baseOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: [{
    name: "TEST",
    nameLocation: "middle",
    axisLabel: { overflow: 'break' }
  }],
  series: [
    {
      data: [15000000, 23000000, 22400000, 21800000, 13500000, 14700000, 26000000],
      type: 'line'
    }
  ]
};

myChart.setOption(baseOption);

// 渲染完成后计算最大标签宽度，设置nameGap
myChart.on('rendered', () => {
  const axisModel = myChart.getModel().getComponent('yAxis', 0);
  const axisLabels = axisModel.axisLabelModel.getTextRects();
  const maxLabelWidth = axisLabels.reduce((max, rect) => Math.max(max, rect.width), 0);
  
  myChart.setOption({
    yAxis: { nameGap: maxLabelWidth + 10 } // 额外加10px间距
  });
});

// 窗口 resize 时重新计算
window.addEventListener('resize', () => {
  myChart.resize();
});

补充说明 #

ECharts目前没有直接提供“相对于轴标签的相对边距”配置项，但通过上述方案可以实现等效的自适应效果，完美适配不同标签长度和屏幕尺寸。

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