如何在Apache ECharts中隐藏超出自身条形范围的标签？

核心方案 #

利用ECharts的labelLayout自定义函数，通过对比标签尺寸与对应堆叠条块的尺寸，判断标签是否超出条块范围，从而控制标签的显示状态。

具体实现步骤 #

1. 进入Superset图表自定义配置 #

在Superset的图表编辑页，找到自定义配置区域，定位到ECharts的series配置项。

2. 配置标签判断逻辑 #

根据你的条形图方向（横向/纵向），添加对应的labelLayout函数：

横向堆叠条形图（bar.orientation = 'horizontal'）

label: {
  show: true,
  position: 'inside',
  labelLayout: function(params) {
    // 获取当前堆叠条块的宽度
    const barWidth = params.rect.width;
    // 获取标签文本的实际宽度
    const labelWidth = params.labelRect.width;
    // 仅当标签宽度小于等于条块宽度时显示
    return {
      show: labelWidth <= barWidth
    };
  }
}

纵向堆叠条形图（bar.orientation = 'vertical'）

label: {
  show: true,
  position: 'inside',
  labelLayout: function(params) {
    // 获取当前堆叠条块的高度
    const barHeight = params.rect.height;
    // 获取标签文本的实际高度
    const labelHeight = params.labelRect.height;
    // 仅当标签高度小于等于条块高度时显示
    return {
      show: labelHeight <= barHeight
    };
  }
}

3. 可选优化：预留内边距 #

如果需要避免标签紧贴条块边缘，可以在判断时预留一定空间：

// 横向示例：左右各留5px内边距
return {
  show: labelWidth + 10 <= barWidth
};

关于hideOverlap: true无效的说明 #

hideOverlap: true仅作用于不同标签之间的重叠判断，不会检测标签是否超出自身所属的堆叠条块范围，因此无法解决你的需求。

内容的提问来源于stack exchange，提问作者Игорь Бабиков