如何在Apache ECharts横向柱状图中实现数值右对齐（不受宽度影响）

这个需求完全可行，通过自定义标签位置与对齐规则即可实现，以下是具体步骤：

核心思路 #

让所有数值标签的右端对齐到同一竖线，关键是固定所有标签的x轴基准位置，并设置标签以该位置为基准右对齐。

具体配置方法 #

1. 确定x轴最大值：可以手动指定，也可以通过数据动态计算（建议留10%左右的余量，避免标签超出画布）
2. 在series的label配置中，通过回调函数固定标签的x坐标，同时设置align: 'right'实现右对齐。

代码示例 #

// 模拟业务数据
const chartData = [
  { name: '类别A', value: 35 },
  { name: '类别B', value: 70 },
  { name: '类别C', value: 45 },
  { name: '类别D', value: 90 }
];

// 动态计算x轴最大值（加10%余量）
const maxXValue = Math.max(...chartData.map(item => item.value)) * 1.1;

const option = {
  xAxis: {
    type: 'value',
    max: maxXValue // 绑定计算好的最大值
  },
  yAxis: {
    type: 'category',
    data: chartData.map(item => item.name)
  },
  series: [
    {
      type: 'bar',
      data: chartData.map(item => item.value),
      label: {
        show: true,
        // 自定义标签位置：x固定为最大值，y取柱子中心坐标
        position: (params) => [maxXValue, params.coord[1]],
        align: 'right', // 标签以x基准位置右对齐
        verticalAlign: 'middle',
        fontSize: 12
      }
    }
  ]
};

// 初始化渲染图表
const chart = echarts.init(document.getElementById('chart-container'));
chart.setOption(option);

补充说明 #

• 如果需要更精准的像素级控制，可以使用echarts.convertToPixel方法，将x轴数值转换为画布像素坐标后再设置标签位置。
• 若x轴为类目轴，只需将基准位置替换为对应类目像素坐标即可。

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