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

环形图 doughnut ​

中后台最常用的占比图:中间留白降低视觉压迫,整体比饼图更收敛现代。与饼图同源,pieData 驱动。

何时使用 ​

  • 同饼图:类目少、构成占比之和有意义;
  • 看板空间紧凑、多张占比图并排时的默认选择;
  • 中间留白还可叠放总量数字(绝对定位文本)。

示例 ​

把 type 从 pie 换成 doughnut,其余配置完全一致。

中心 KPI 环 ​

环形图的留白不该浪费:innerRadius 调整环厚,配合 #overlay 作用域插槽在正中放结论数字——一眼看到「总量 + 构成」两层信息。这是环形图相对饼图最实用的形态。

聚焦主分片 ​

汇报里只需要读者记住一件事时,用 emphasis 把主分片以外的部分压暗——结论不用讲,图自己会说。

与饼图怎么选 ​

两者读数方式完全一致,差异只在形态:环形图中心留白能承载 KPI 数字、多张并排更收敛,是中后台默认;饼图扇区面积更大,投影或印刷场景读起来更清楚。环画不了两层——数据有父子层级时请改用旭日图。

配置要点 ​

  • 悬浮扇区放大强调,图例点选显隐;
  • 需要放大占比差距的对比感时用玫瑰图;
  • 构成随时间变化用堆叠柱状图更有信息量。

相关 ​