环形图 <Donut />

一个大环，焦点部分用强调色、其余是灰阶；环中间放总数或焦点占比；右边图例列出每部分的数值和百分比。

Template and style descriptions are currently available in Chinese only.

Group: 数据 · 一个整体的 2–5 个部分
Component: Donut · #donut

Good for

构成：预算、体积、时间花在哪
焦点只有一个部分

Avoid when

部分超过 5 个：用 ShareBar 或 MetricBars
各部分加起来不是整体

Content limits

1	segments 2–5 个：label ≤ 8 字，note ≤ 16 字，按从大到小排
2	center.value ≤ 6 字符

Fields

Field	Type
`kicker` · required	`string`	小节名，2–8 字
`title` · required	`string \| string[]`	标题；数组手动断行
`lead`	`string`	一两句导语，≤ 60 字
`source`	`string`	事实出处
`segments` · required	`{ label, value, note? }[]`	各部分
`center` · required	`{ value, label }`	环中间
`unit`	`string`	图例数值单位
`decimals`	`number`	小数位
`focus`	`number`	强调的部分，默认 0

Example

<Donut
  kicker="打包构成"
  title="一个文件，六成是字体"
  center={{ value: '6.0', label: 'MB · 单个 HTML' }}
  segments={[{ label: '字体', value: 3.6 }, { label: '脚本', value: 1.8 }, { label: '截图', value: 0.4 }, { label: '样式', value: 0.2 }]}
  unit=" MB"
  decimals={1}
  source="dist/index.html"
/>