[Feat]: 环图/饼图的小切片（极小占比）的自动优化与可读性增强

[johnhuang42]

Describe the feature / 功能描述

在数据分布极度不均衡的场景中，如订单来源分析，某些类别的占比（如 HR, SE, CA 等国家/地区）非常小（小于0.5）。当前问题： 当这些小切片在甜甜圈图上渲染时，它们会变成肉眼难以分辨的极细线条（如下图所示的 HR/SE/CA/ES 等），用户几乎无法辨认它们的存在和数值，严重影响图表的可读性和信息传达效率。
看起来就像少了一块，麻烦优化下

`
const chart = new Chart({
container: chartRef.current,
autoFit: true,
height: height,
width: width,
});

chart
.interval()
.coordinate({ type: "theta", innerRadius: 0.65 })
.transform([{ type: "stackY" }])
.data(filteredChartData)
.encode("y", "value")
.encode("color", "name")
.scale("color", {
range: chartColors,
})
.state("active", {
offset: 6, // hover时外移距离
})
.interaction("elementHighlight", true)
.style({
stroke: "#fff",
strokeWidth: 6,
})
.animate(false);
chart
.text()
.style("text", filteredCenterText.label)
.style("x", "50%")
.style("y", "40%")
.style("fill", "#9CA3AF")
.style("fontSize", 14)
.style("fontWeight", "normal")
.style("textAlign", "center")
.tooltip(false);

  // 数值文本
  chart
    .text()
    .style(
      "text",
      typeof filteredCenterText.value === "number"
        ? filteredCenterText.value.toLocaleString()
        : filteredCenterText.value,
    )
    .style("x", "50%")
    .style("y", "55%")
    .style("fill", "#1F2937")
    .style("fontSize", 24)
    .style("fontWeight", "bold")
    .style("textAlign", "center")
    .tooltip(false);
}

`

Are you willing to contribute? / 是否愿意参与贡献？

❌ No / 否

[github-actions]

@johnhuang42 您好！以下是关于您问题的自动回复：

您好，感谢您的反馈和详细说明。针对环图/饼图在数据分布极度不均衡（极小占比切片）场景下的可读性问题，这里为您整理了专业的优化建议和 G2 配置方法，供参考：

---

🟢 1. 小切片优化建议

• 聚合展示极小类别：将占比低于阈值（如 0.5%）的数据汇总为 “其它” 类别，保证每个分区在视觉上都有最小厚度，避免极细线条。
• 最小可视角度/厚度：可在数据预处理阶段设定最小显示比例或在 G2 中对数据进行筛选/聚合。

实现参考：

// 数据预处理，将小于阈值的类别合并为 '其它'
const threshold = 0.005;
const others = filteredChartData.filter(d => d.value < threshold);
const mainData = filteredChartData.filter(d => d.value >= threshold);
const otherSum = others.reduce((sum, d) => sum + d.value, 0);

const chartData = [
  ...mainData,
  ...(otherSum ? [{ name: '其它', value: otherSum }] : []),
];

---

🟢 2. 视觉样式推荐

• 颜色对比：为小切片或 “其它” 类设置高对比色，提升辨识度。
• 边框/描边加粗：使用 stroke 和 strokeWidth，确保每个分区边界清晰。
• 自定义样式：可为不同数据动态设置填充色或描边。

实现参考：

chart
  .interval()
  .style({
    stroke: '#fff',
    strokeWidth: 6, // 加粗分割线
    // 可按需设置 fill 或动态调整
  });

---

🟢 3. 标签与数值展示优化

• 智能标签显示：为小切片添加外部标签（labelLine），或仅对主要类别显示标签，极小类别统一在 “其它” 标签中展示。
• 标签聚合：可用 G2 的 labels 配置，自定义显示内容，或聚合小类别说明。

实现参考：

chart
  .interval()
  .labels([
    {
      text: ({ name, value }) => name === '其它'
        ? `其它 (${(value * 100).toFixed(2)}%)`
        : value > threshold
          ? `${name} (${(value * 100).toFixed(2)}%)`
          : '',
      // 可设置 labelLine、样式等
      style: { fontSize: 12, fill: '#333' },
    },
  ]);

---

🟢 4. 交互高亮增强

• 元素高亮：启用 elementHighlight 或 elementHighlightByColor，提高 hover 时小切片的视觉吸引力。
• 放大/外移效果：为 hover 时的小切片设置更明显的外移距离或放大动画，让用户容易发现并识别。

实现参考：

chart
  .interval()
  .interaction('elementHighlight', true)
  .state('active', {
    offset: 12, // hover 时外移距离加大，便于小切片识别
  });

---

✅ 总结推荐

1. 数据聚合：建议前端或后端聚合极小类别，提升可用性。
2. 样式增强：加粗描边、提升颜色对比。
3. 标签优化：智能显示主要类别标签，对小类别进行聚合或外部标注。
4. 交互强化：启用高亮和放大，让所有切片 hover 时明显可见。

如需进一步代码示例，或希望官方支持相关配置项（如自动聚合、最小显示角度），欢迎继续补充需求，我们会持续关注并优化 G2 的环图/饼图体验！

---

参考文档：

• G2 饼图/环图文档
• G2 标签与交互说明
• G2 数据变换聚合说明

感谢您的建议！如果有更多具体场景或截图、预期，请随时补充。

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[interstellarmt]

这里需要一个 minAngle的参数来规定最小角度，确保所有扇区都可视，有兴趣来个 pr 吗～

[johnhuang42]

@interstellarmt 环图minAngle属性该怎么用啊，哥哥，我在官网没找到这个属性

[interstellarmt]

@interstellarmt 环图minAngle属性该怎么用啊，哥哥，我在官网没找到这个属性

这个算是新的 feature ，目前还不支持 👀

[moayuisuda]

预期是啥样的呢。minAngle 这种配置可以尝试支持，但会让比例失真，且你几个小量级的数据都会是同一个 minAngle，饼图也失去了比较的作用，建议是不同量级数据用不同的图来画
如果你一定要让小数据也要展示的话，用 data transform 直接给数据设置最小值也能实现https://g2.antv.antgroup.com/manual/core/data/custom