统计数值 Statistic - Ant Design

何时使用

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

代码演示

API

通用属性参考：通用属性

Statistic

参数	说明	类型	默认值	版本
classNames	用于自定义 Statistic 组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-
decimalSeparator	设置小数点	string	`.`
formatter	自定义数值展示	(value) => ReactNode	-
groupSeparator	设置千分位标识符	string	`,`
loading	数值是否加载中	boolean	false	4.8.0
precision	数值精度	number	-
prefix	设置数值的前缀	ReactNode	-
styles	用于自定义 Statistic 组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM , CSSProperties> \| (info: { props }) => Record<SemanticDOM , CSSProperties>	-
suffix	设置数值的后缀	ReactNode	-
title	数值的标题	ReactNode	-
value	数值内容	string \| number	-
valueStyle	设置数值区域的样式	CSSProperties	-

Statistic.Countdown Deprecated

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

Statistic.Timer 5.25.0+

参数	说明	类型	默认值	版本
type	计时类型，正计时或者倒计时	`countdown` `countup`	-
format	格式化倒计时展示，参考 dayjs	string	`HH:mm:ss`
prefix	设置数值的前缀	ReactNode	-
suffix	设置数值的后缀	ReactNode	-
title	数值的标题	ReactNode	-
value	数值内容	number	-
valueStyle	设置数值区域的样式	CSSProperties	-
onFinish	倒计时完成时触发, 指定为 `countup` 此属性不生效	() => void	-
onChange	倒计时时间变化时触发	(value: number) => void	-

Semantic DOM

Active

11.28%

root
6.0.0
根元素，包含统计数值组件的重置样式和整体容器样式
header
6.0.0
头部元素，包含下内边距和标题区域的布局样式
title
6.0.0
标题元素，包含文字颜色、字体大小等标题文字的显示样式
prefix
6.0.0
前缀元素，包含行内块显示、右外边距等前缀内容的布局样式
content
6.0.0
内容元素，包含文字颜色、字体大小、字体族等数值内容的展示样式
suffix
6.0.0
后缀元素，包含行内块显示、左外边距等后缀内容的布局样式

主题变量（Design Token）

组件 Token如何定制？

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

全局 Token如何定制？