Skip to content

Statistic 统计数值

xy-statistic 用来展示 KPI、金额、计数和 SLA 指标。默认样式按中后台数据看板语境做了收敛,precision 采用四舍五入。

基础指标

最常见的用法是在概览卡片、状态面板和运营看板里展示一组核心指标。

今日交易额
¥2,789,456.38

较昨日 +12.4%

新增用户
4,382.00

渠道投放进入收口期

服务可用率
99.982%

核心链路保持在 SLA 以内

待处理告警
17.00

集中在支付与风控域

格式化与插槽

可以通过 formatter、分隔符和 title / prefix / suffix 插槽,把统计值接进更贴业务的 KPI 卡片。

月度经常性收入
¥12,604,580.36/ 月

金额类指标保留两位小数,并通过前后缀补齐业务语义。

活跃用户 最近 7 天
89.3K

当默认千分位不够贴近业务时,可以直接用 formatter 和插槽重组展示结构。

结算运营看板

在财务、结算和商务复核后台里,统计值通常会和状态标签、说明文案一起出现,而不是单独挂在页面角落。

结算运营看板

财务、结算和商务复核后台里,统计值更常和状态标签、说明文案一起出现,而不是孤立展示。

14:20 更新
待结算金额
待结算金额
¥9,823,456.42

含 12 笔跨境订单,需在今晚 20:00 前复核

今日已出款
今日已出款
¥6,253,400.00

自动出款成功率 99.8%,仅 2 笔转人工处理

待处理退款
待处理退款
183

高于近 7 日均值,建议同步排查支付通道抖动

账期内回款率
账期内回款率
94.37%

企业采购客户回款速度低于预期 3.2 个点

配额与健康度概览

value-styleformatter 很适合表达资源配额、容量消耗和 backlog 健康度,让颜色和紧凑数字直接服务于看板扫描。

API 调用量
38.4M/ 天

剩余额度 18%,建议提前切到高峰保护策略

对象存储
1,284.36TB

素材归档后预计可回收 96TB 空间

离线队列积压
7,204

当前 backlog 仍在收敛,夜间批任务建议限流

风控审批摘要

审批和复核面板里并不总是纯数字,Statistic 也可以承接 N/A-- 这类占位值和业务前缀。

风控审批摘要

在审批、风控和复核面板里,统计值往往会和占位文案、说明项一起出现,而不总是纯数字。

待人工确认
命中规则数
Risk27

高风险规则 4 条,需要人工补充说明

历史成交额
HistoryN/A

新商家还没有形成完整历史样本,允许字符串占位

建议授信额度
Limit580,000.00

审批通过后将同步更新到风控限额中心

使用提示

  • formatter 存在时会完全接管展示结果,内置的千分位、精度和分隔符不再生效。
  • precision 会先向下取整到非负整数,再按四舍五入和补零规则格式化。
  • value 为字符串、NaNInfinity 时会按原值直出,适合展示 N/A-- 这类占位文本。
  • title / prefix / suffix 同时支持 prop 和同名插槽,插槽优先级更高。

API

Statistic Attributes

属性说明类型默认值
value统计值number | string0
title标题文案string''
prefix前缀文案string''
suffix后缀文案string''
precision小数位数,按四舍五入处理number0
decimal-separator小数分隔符string'.'
group-separator千分位分隔符string','
formatter自定义展示函数StatisticFormatterundefined
value-style数值区域样式StyleValueundefined

Statistic Slots

插槽说明
title自定义标题区域
prefix自定义前缀区域
suffix自定义后缀区域

Statistic Exposes

暴露项说明类型
displayValue当前实际展示文本StatisticInstance["displayValue"]

CSS Variables

变量名说明默认值
--xy-statistic-gap标题和数值之间的间距10px
--xy-statistic-head-font-size标题字号13px
--xy-statistic-head-color标题颜色var(--xy-text-secondary)
--xy-statistic-number-font-size数值字号30px
--xy-statistic-number-font-weight数值字重700
--xy-statistic-number-color数值颜色var(--xy-text-primary)
--xy-statistic-affix-font-size前后缀字号15px
--xy-statistic-affix-color前后缀颜色color-mix(in srgb, var(--xy-text-secondary) 86%, white)
--xy-statistic-affix-gap前后缀和数值之间的间距8px