Donut
带圆头和 2px 间隙的环形图,中心显示总计;ShareBar 以一条胶囊显示同样的占比。
$183.70Total spend
- gpt-5$84.2046%
- claude-sonnet-4-5$61.4033%
- gpt-5-mini$22.8012%
- claude-haiku-4-5$14.108%
- gpt-4.1-nano$1.201%
| 扇区 | 数值 | 占比 |
|---|---|---|
| gpt-5 | $84.20 | 45.8% |
| claude-sonnet-4-5 | $61.40 | 33.4% |
| gpt-5-mini | $22.80 | 12.4% |
| claude-haiku-4-5 | $14.10 | 7.7% |
| gpt-4.1-nano | $1.20 | 0.7% |
<Donut aria-label="Spend by model" slices={slices} formatValue={money} totalLabel="Total spend" />import { Donut, ShareBar } from "@logicplanes/kaeso-ui";属性
aria-labelstring图表的无障碍名称(“按模型统计的请求”)。
emptyboolean以空状态(
emptyText)替代数据。默认在所有值都为 0 时显示。emptyTextReactNode空状态显示的文字。默认为 LocaleProvider 语言中的“此时间段内没有数据”。
errorReactNode数据加载失败:图表保持高度,低调地说明情况并提供“重试”。错误以 toast 显示,因此不会显示该值;请在请求失败处用 toast 显示消息。
formatValue((v: number) => string) = (v) => formatNumber(v)格式化中心的总计和图例中的值。默认为
formatNumber。loadingboolean数据正在加载:图表保持高度,并显示一条低调的加载条。
onRetry(() => void)出现
error后点击“重试”时调用;不传入时不显示该按钮。size"md" | "sm" | "lg" = md环的直径:
sm140px、md160px(默认)或lg180px。slicesSlice[]整体的各个部分,每个包含
id、label、value和可选的color。占比低于 2% 的部分在有两个或以上时合并为“其他”。totalReactNode替换中心的总计,否则为用
formatValue写出的各部分之和。totalLabelReactNode总计下方的文字。默认为 LocaleProvider 语言中的“总计”。