统计数值 Statistic - Ant Design

展示统计数值。

何时使用

当需要突出某个或某组数字时。
当需要展示带描述的统计类数据时使用。

代码演示

Active Users

112,893

Account Balance (CNY)

112,893.00

Active Users

简单的展示。

Active Users

Account Balance (CNY)

给数值添加动画进入效果，需要配合 react-countup。

Countdown

48:00:29

Million Seconds

48:00:29:243

Day Level

2 天 0 时 0 分 29 秒

Countdown

00:00:09

倒计时组件。

Feedback

1,128

Unmerged

93/ 100

通过前缀和后缀添加单位。

Active

11.28%

Idle

9.30%

在卡片中使用

在卡片中展示统计数值。

API

通用属性参考：通用属性

Statistic

参数	说明	类型	默认值	版本
decimalSeparator	设置小数点	string	`.`
formatter	自定义数值展示	(value) => ReactNode	-
groupSeparator	设置千分位标识符	string	`,`
loading	数值是否加载中	boolean	false	4.8.0
precision	数值精度	number	-
prefix	设置数值的前缀	ReactNode	-
suffix	设置数值的后缀	ReactNode	-
title	数值的标题	ReactNode	-
value	数值内容	string \| number	-
valueStyle	设置数值区域的样式	CSSProperties	-

Statistic.Countdown

参数	说明	类型	默认值	版本
format	格式化倒计时展示，参考 dayjs	string	`HH:mm:ss`
prefix	设置数值的前缀	ReactNode	-
suffix	设置数值的后缀	ReactNode	-
title	数值的标题	ReactNode	-
value	数值内容	number \| dayjs	-
valueStyle	设置数值区域的样式	CSSProperties	-
onFinish	倒计时完成时触发	() => void	-
onChange	倒计时时间变化时触发	(value: number) => void	-	4.16.0

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
contentFontSize	内容字体大小	number	24
titleFontSize	标题字体大小	number	14

全局 Token如何定制？