Apache ECharts嵌套饼图：内部标签重叠时能否自动切换至外部？

针对你使用Apache ECharts制作嵌套饼图时，内层饼图内部标签因空间不足出现重叠的问题，以下是几种可行的解决方案，兼顾可读性与布局合理性：

1. 动态切换标签位置（核心方案） #

利用ECharts支持的回调函数，根据扇区角度、数据占比动态判断标签显示位置：当扇区空间足够时保留内部标签，空间不足时自动切换为外部标签，同时控制标签线的显示状态，避免与外层标签冲突。

修改内层饼图的label和labelLine配置：

{
  encode: {
    value: "value",
    itemName: "name"
  },
  type: "pie",
  startAngle: 90,
  avoidLabelOverlap: true,
  datasetIndex: 0,
  name: "inner",
  radius: [0, insideRadius ?? "40%"],
  label: {
    show: true,
    // 动态判断标签位置：扇区角度小于30度时切换为外部标签
    position: (params) => params.angle < 30 ? 'outside' : 'inside',
    distanceToLabelLine: 10,
    alignTo: "none",
    overflow: "truncate",
    formatter: '{name|{b}}\n{pct|{d}%}',
    rich: {
      pct: {
        color: '#999'
      }
    }
  },
  labelLine: {
    // 仅当标签在外部时显示标签线
    show: (params) => params.labelPosition === 'outside',
    length: 20, // 缩短内层外部标签线，避免与外层冲突
    length2: 10
  }
}

2. 优化内部标签显示规则 #

• 设置合理的最小显示角度：你之前注释的minShowLabelAngle报错，大概率是参数值过小（ECharts要求角度值大于1），尝试设置minShowLabelAngle: 5，直接隐藏角度过小的扇区标签，从根源避免重叠。
• 缩小标签字体：在rich配置中减小字体尺寸，减少标签占用空间：

rich: {
  name: {
    fontSize: 12,
    color: '#333'
  },
  pct: {
    fontSize: 10,
    color: '#999'
  }
}

• 简化标签格式：如果标签内容过长，可暂时只显示百分比或名称，比如formatter: '{pct|{d}%}'，优先保证可读性。

3. 调整饼图半径分配 #

适当增大内层饼图的半径，给内部标签更多显示空间；同时微调外层饼图的内半径，避免内外层标签互相干扰：

// 内层增大半径
radius: [0, insideRadius ?? "45%"],
// 外层缩小内半径
radius: [outsideInnerRadius ?? "55%", outsideOuterRadius ?? "75%"],

4. 用Tooltip补充完整信息 #

当标签被截断或隐藏时，通过Tooltip展示完整的名称与数据，确保用户能获取全部信息：

tooltip: {
  trigger: 'item',
  formatter: '{b}: {d}% ({c})'
}

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