JS饼状图数据标签重叠怎么解决？

一、为什么饼状图极易出现标签重叠？

在各类数据图表中，饼状图（包括环形图、玫瑰图）是对空间利用率最敏感的图形之一。柱状图可以通过横向滚动条或自适应柱宽容纳几十个数据项，折线图沿时间轴单向流转，而饼状图则是将 360° 封闭圆周映射为数据比例。

当数据集中存在多个占比很小的项目（例如 1.2%、0.8%、2.1%）且在数据数组中相邻时，它们所对应的圆心角通常不足 5°。在极小的圆弧跨度内，如果让每个扇区各自延伸出一条直线引线，由于中文字符具有固定的行高与字宽（常见 12px 字号对应至少 18px 的阅读行高），相邻文字的垂直包围盒（Bounding Box）必然产生几何交集，最终堆叠成一块无法辨识的文字墨团。

二、解决步骤与工程实施工作流

在实际排查与修复该问题时，切忌盲目随意修改样式或将字号缩至不可读的大小。推荐按照清晰的先后次序展开处理，从最根本的数据降维逐步推进到多端交互适配。

步骤 1：数据层预处理——聚合微小长尾项为“其他”

无论多么精密的避让算法，在有限的屏幕宽度内塞入 15 个以上的文字标签都是反人机交互设计的。饼图的主要职责是呈现“头部主体构成”，而不是罗列长尾细碎数据。

在将数据传递给图表渲染实例之前，先编写一个通用的数据清洗函数。设定一个合理的占比阈值（通常为 3% 到 5%），将低于该阈值的数据项数值累加，合并为一个名为“其他”的新项：

/**
 * 聚合饼图微小数据项，规避过度细碎引起的标签堆叠
 * @param {Array<{name: string, value: number}>} rawData 原始数据数组
 * @param {number} threshold 合并阈值比例，默认为 0.04 (4%)
 * @param {number} maxSlices 最大允许扇区数量，默认为 8
 * @returns {Array<{name: string, value: number, detailList?: Array}>}
 */
function aggregateSmallSlices(rawData, threshold = 0.04, maxSlices = 8) {
  if (!Array.isArray(rawData) || rawData.length <= 4) {
    return rawData;
  }

  const totalValue = rawData.reduce((sum, item) => sum + Number(item.value || 0), 0);
  if (totalValue <= 0) return rawData;

  // 按照数值从大到小排序
  const sorted = [...rawData].sort((a, b) => b.value - a.value);

  const mainSlices = [];
  let otherSum = 0;
  const otherDetails = [];

  sorted.forEach((item, index) => {
    const ratio = item.value / totalValue;
    // 超过最大分块数，或占比低于阈值（且非头部前三）
    if (index >= maxSlices - 1 || (ratio < threshold && index >= 3)) {
      otherSum += item.value;
      otherDetails.push(item);
    } else {
      mainSlices.push(item);
    }
  });

  if (otherSum > 0) {
    mainSlices.push({
      name: '其他',
      value: otherSum,
      detailList: otherDetails // 保留明细，便于后续悬浮气泡或下钻读取
    });
  }

  return mainSlices;
}

步骤 2：图表库内置避让配置（以 ECharts 为例）

如果项目中使用的是 Apache ECharts，许多开发者仅设置了 avoidLabelOverlap: true，却发现标签依旧挤在一块。这是因为默认的引导线弯折策略和外边距并未调优。

完整的 ECharts 饼图防重叠配置应当结合 minAngle、alignTo 和两段式引导线参数：

const chartOptions = {
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      const data = params.data;
      let tip = `<strong>${data.name}</strong>: ${data.value} (${params.percent}%)`;
      if (data.detailList && data.detailList.length > 0) {
        tip += '<br/><span style="color:#AD8B58;font-size:12px;">包含细项：</span><ul style="margin:4px 0 0 16px;padding:0;">';
        data.detailList.forEach(d => {
          tip += `<li style="font-size:11px;">${d.name}: ${d.value}</li>`;
        });
        tip += '</ul>';
      }
      return tip;
    }
  },
  series: [
    {
      type: 'pie',
      radius: ['38%', '62%'], // 采用环形留白，增大外周标签排布空间
      center: ['50%', '50%'],
      avoidLabelOverlap: true, // 核心配置：开启内置动态防重叠
      minAngle: 8,             // 关键配置：给微小切片保底 8 度，防止引线起点挤在单点
      label: {
        show: true,
        position: 'outer',
        alignTo: 'labelLine',  // 关键：标签沿折线端点或画布边缘平整对齐
        edgeDistance: '8%',    // 距画布边缘的距离
        bleedMargin: 10,
        formatter: '{b}\n{d}%', // 将名称与百分比分行放置，降低单行横向宽度
        lineHeight: 16
      },
      labelLine: {
        show: true,
        length: 16,            // 第一段引线长度（从圆弧向外延伸）
        length2: 24,           // 第二段引线长度（水平弯折段）
        smooth: false,         // 保持折角清晰
        minTurnAngle: 90       // 限制转角，防止引线过度交叉倒折
      },
      labelLayout: {
        moveOverlap: 'shiftY'  // 开启 Y 轴弹性推挤算法
      },
      data: aggregateSmallSlices(sourceData, 0.04, 7)
    }
  ]
};

三、底层算法剖析：两列垂直推挤与折角引线几何

当使用 D3.js、原生 Canvas 或 SVG 独立开发图表组件时，没有现成库的高层 API 可以调用，此时必须从几何坐标与包围盒碰撞检测层面实现自适应排版。

1. 坐标与拐点几何推导

设饼图中心为 (Cx, Cy)，外圆半径为 R。扇区角平分线方向为 θ。

• 圆弧引线起点 P₀：位于圆周表面，P₀ = (Cx + R · cos θ, Cy + R · sin θ)。
• 第一段斜引线拐点 P₁：沿径向向外延伸 L₁ 距离，但在 Y 轴方向向最终推挤后的 Y_target 靠拢，保持视觉平滑过渡。
• 第二段水平引线终点 P₂：水平横折段。若 cos θ ≥ 0，标签位于右侧，P₂ = (P₁.x + L₂, Y_target)；若 cos θ < 0，位于左侧，P₂ = (P₁.x - L₂, Y_target)。

2. 垂直推挤（Relaxation）算法实现

该算法将左右两侧标签独立处理。首先计算出每个标签基于扇区中心的理想 Y 坐标，然后自上而下遍历：如果检测到当前项与前一项的间距小于安全阈值（如文字高度 H = 24px），则将当前项的 Y 坐标向下推挤。

/**
 * 标签垂直位置平滑推挤算法 (D3 / Canvas 通用)
 * @param {Array<{id: string, idealY: number, height: number}>} labels 单侧标签列表
 * @param {number} minY 画布上边界
 * @param {number} maxY 画布下边界
 * @param {number} gap 标签间安全内边距
 * @returns {Array<{id: string, y: number}>}
 */
function relaxLabelsY(labels, minY, maxY, gap = 6) {
  if (!labels || labels.length <= 1) return labels;

  // 1. 按照理想垂直高度升序排序
  const list = [...labels].sort((a, b) => a.idealY - b.idealY);

  // 2. 正向扫描推挤：自顶向下排查碰撞
  for (let i = 0; i < list.length - 1; i++) {
    const current = list[i];
    const next = list[i + 1];
    const minDist = current.height + gap;
    if (next.idealY - current.y < minDist) {
      next.y = current.y + minDist;
    }
  }

  // 3. 边界检查与反向回弹：若底部溢出，自底向上回推
  if (list[list.length - 1].y > maxY) {
    list[list.length - 1].y = maxY;
    for (let i = list.length - 2; i >= 0; i--) {
      const current = list[i];
      const below = list[i + 1];
      const minDist = current.height + gap;
      if (below.y - current.y < minDist) {
        current.y = below.y - minDist;
      }
    }
  }

  // 4. 兜底保护：确保不超出上边界
  for (let i = 0; i < list.length; i++) {
    if (list[i].y < minY) {
      list[i].y = minY + i * (list[i].height + gap);
    }
  }

  return list;
}

四、形态转换与交互降级方案

当面临特定业务约束时，单纯的技术微调可能已经无法满足可读性要求。例如，产品经理要求“必须展示全部 20 个渠道的数据，且绝对不能合并为‘其他’”，或者在 375px 宽度的移动端 H5 页面中展示数据。

1. 方案转型：切换为水平条形图（Horizontal Bar Chart）

当数据项超过 9 项且禁止合并时，饼状图在信息表达上已不再合适。人类视觉感知系统对“圆弧角度”的辨识精度远低于对“直线长度”的辨识。

此时应当果断将图表形态切换为带排序的横向条形图。纵轴垂直排列各个模块名称，横轴展开数值条，不仅无论有多少项都可以通过页面滚动优雅阅读，而且彻底消除了空间碰撞的物理可能。

2. 移动端自适应：隐藏静态外部标签，改用交互分流

在小屏幕视口下，两列展开的引线会严重挤压饼图本体，使饼图被压缩成极小的一个圆。此时可采取分级降级策略：

• 内外分层：仅在占比大于 15% 的超大扇区内部显示白色百分比文字（position: 'inside'）。
• 外部引线全隐：将小切片的 label.show 设为 false。
• 环形中心聚合展示：将饼图变为环形图，中心常态显示总数值；当用户手指触摸或点击某个扇区时，中心即时刷新为该扇区的名称与精确百分比。

五、方案选型决策与全场景对照

针对不同的业务体量、终端形式与展示约束，下表总结了最优的解决路径与实现建议：

六、排坑速查清单

1. 引线被画布截断：如果折线较长导致文字超出画布，检查容器的外边距配置（在 ECharts 中可调整 grid 或设置 bleedMargin: 15、edgeDistance: '5%'）。
2. 折线出现锐角交叉：将 minTurnAngle 设置为 90°，并确保引线第一段 length 保持在 12~18px 适中范围，切忌过长导致跨半球交错。
3. 扇区角度过小导致引线起点重叠：务必为饼图系列配置 minAngle（通常设置为 5° 到 10°）。它会强行为接近 0% 的扇区保留可视的起始物理弧度。
4. 文字多行拥挤：善用标签格式化函数 formatter 将长标题截断，或者用换行符 将“业务名称”与“百分比数值”分置两行，缩小单行占位跨度。