如何实现ECharts数值标签的自适应排版以避免重叠？

针对ECharts数值标签重叠的问题，原生配置里确实没有直接提供完全自适应错开的选项，但可以通过以下两种方法实现类似需求：

方法一：利用labelLayout自定义布局函数做碰撞检测 #

通过labelLayout的回调函数，我们可以获取当前标签和相邻标签的位置信息，判断是否重叠后动态调整标签位置，实现上下/左右错开的效果。示例代码如下：

series: [
  {
    type: 'bar',
    data: [/* 你的业务数据 */],
    label: {
      show: true,
      position: 'top',
      labelLayout: function (params) {
        const currRect = params.labelRect;
        const prevIndex = params.rawDataIndex - 1;
        // 获取前一个标签的布局信息
        const prevLayout = prevIndex >= 0 ? params.getLayout(prevIndex) : null;
        
        if (prevLayout) {
          // 计算当前标签与前一个标签的垂直间距
          const verticalGap = currRect.y - (prevLayout.y + prevLayout.height);
          // 当间距小于10px时，将当前标签向下偏移，保证不重叠
          if (verticalGap < 10) {
            return {
              y: prevLayout.y + prevLayout.height + 10,
              align: 'center',
              verticalAlign: 'middle'
            };
          }
        }
        // 无重叠时返回默认布局
        return null;
      }
    }
  }
]

如果是横向布局的图表，只需要把判断逻辑换成水平方向的间距计算即可。

方法二：奇偶项标签分置不同位置 #

对于数据量不大的场景，可以简单地将奇数索引的标签放在一侧，偶数索引的放在另一侧，快速避免重叠：

label: {
  show: true,
  position: function(params) {
    return params.dataIndex % 2 === 0 ? 'top' : 'bottom';
  }
}

这种方法实现简单，但灵活性不如方法一，适合对布局要求不极致的场景。

需要注意的是，以上两种方法都需要根据你的图表类型（柱状图、折线图等）和数据特点调整参数，比如偏移距离、碰撞检测的阈值等，才能达到最贴合需求的效果。

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