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%
Spend by model
扇区数值占比
gpt-5$84.2045.8%
claude-sonnet-4-5$61.4033.4%
gpt-5-mini$22.8012.4%
claude-haiku-4-5$14.107.7%
gpt-4.1-nano$1.200.7%
import { Donut, ShareBar } from "@logicplanes/kaeso-ui";

属性

  • aria-label
    string

    图表的无障碍名称(“按模型统计的请求”)。

  • empty
    boolean

    以空状态(emptyText)替代数据。默认在所有值都为 0 时显示。

  • emptyText
    ReactNode

    空状态显示的文字。默认为 LocaleProvider 语言中的“此时间段内没有数据”。

  • error
    ReactNode

    数据加载失败:图表保持高度,低调地说明情况并提供“重试”。错误以 toast 显示,因此不会显示该值;请在请求失败处用 toast 显示消息。

  • formatValue
    ((v: number) => string) = (v) => formatNumber(v)

    格式化中心的总计和图例中的值。默认为 formatNumber。

  • loading
    boolean

    数据正在加载:图表保持高度,并显示一条低调的加载条。

  • onRetry
    (() => void)

    出现 error 后点击“重试”时调用;不传入时不显示该按钮。

  • size
    "md" | "sm" | "lg" = md

    环的直径:sm 140px、md 160px(默认)或 lg 180px。

  • slices
    Slice[]

    整体的各个部分,每个包含 id、label、value 和可选的 color。占比低于 2% 的部分在有两个或以上时合并为“其他”。

  • total
    ReactNode

    替换中心的总计,否则为用 formatValue 写出的各部分之和。

  • totalLabel
    ReactNode

    总计下方的文字。默认为 LocaleProvider 语言中的“总计”。