项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

饼图 pie ​

构成占比的经典表达:扇区角度即占比,悬浮扇区自动放大强调,配合图例点选可看单项。

何时使用 ​

  • 类目少(建议 ≤ 6 个)、占比之和有意义(构成整体);
  • 想突出"某一块占了大头"的直觉印象;
  • 类目多、彼此占比接近时饼图判读困难,改用条形图排序对比;
  • 中后台看板更常用的收敛形态是环形图。

示例 ​

饼系专属数据字段 pieData({ name, value } 数组),角度与百分比自动计算。

百分比直读 ​

汇报场景里读者只关心份额,开启 piePercentMode 让每个扇区直接标注百分比,省掉心算。

长尾归并 ​

类目一多必然出现碎片小扇区,pieHideThreshold(百分比阈值)把小于阈值的项自动归并成「其他」,图面立刻干净——总量与大盘读数不受影响。

家族选型 ​

  • 只看扁平构成、要精确读占比 → 饼图 / 环形图(角度即份额);
  • 类目量级差异大、要视觉冲击 → 玫瑰图(半径也编码数值,占比读数会失真);
  • 数据有父子包含关系 → 旭日图 / 矩形树图;
  • 构成要随时间变化对比 → 堆叠柱状图。

配置要点 ​

  • 悬浮展示单项名称与数值,图例点选可隐藏某一块;
  • 需要突出总量、视觉更收敛时用环形图;
  • 需要放大占比差距时用玫瑰图;
  • 值格式化:valueFormat: { suffix: '%' } 等对悬浮数值生效。

相关 ​