开发预览更新于 2026-05-10

DonutChart 环形图

中空饼图，可在中心放数值/标签。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

Chrome 65.0%
Safari 18.0%
Firefox 9.0%
Edge 5.0%
Other 3.0%

<CfDonutChart ... />

<CfDonutChart ... />

不同厚度

thickness 控制环厚度（同 size 时，越厚越偏饼图，越薄越偏 ring）。

<CfDonutChart :segments="data" :thickness="14" center-value="78%" center-label="完成率" />
<CfDonutChart :segments="data" :thickness="22" />
<CfDonutChart :segments="data" :thickness="32" />

<CfDonutChart segments={data} thickness={14} centerValue="78%" centerLabel="完成率" />
<CfDonutChart segments={data} thickness={22} />
<CfDonutChart segments={data} thickness={32} />

API

属性	类型	默认值	说明
`segments`	`DonutSegment[]`	`—`	{ name, value, colorIndex? }[]
`size`	`number`	`180`	直径
`thickness`	`number`	`24`	环厚
`centerValue / centerLabel`	`string \| number`	`—`	中心文本
`showLegend`	`boolean`	`true`