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-style 和 formatter 很适合表达资源配额、容量消耗和 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为字符串、NaN或Infinity时会按原值直出,适合展示N/A、--这类占位文本。title / prefix / suffix同时支持 prop 和同名插槽,插槽优先级更高。
API
Statistic Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 统计值 | number | string | 0 |
title | 标题文案 | string | '' |
prefix | 前缀文案 | string | '' |
suffix | 后缀文案 | string | '' |
precision | 小数位数,按四舍五入处理 | number | 0 |
decimal-separator | 小数分隔符 | string | '.' |
group-separator | 千分位分隔符 | string | ',' |
formatter | 自定义展示函数 | StatisticFormatter | undefined |
value-style | 数值区域样式 | StyleValue | undefined |
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 |