Statistic
统计数值

展示统计数值。
使用import{ Statistic }from"antd";

何时使用

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

代码演示

Active Users
112,893
Account Balance (CNY)
112,893.00
Active Users

简单的展示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Active Users
Account Balance (CNY)

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Countdown
48:00:29
Million Seconds
48:00:29:530
Day Level
2 天 0 时 0 分 29 秒
Countdown
00:00:09

倒计时组件。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Feedback
1,128
Unmerged
93/ 100

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Active
11.28%
Idle
9.30%

在卡片中展示统计数值。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Statistic

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

Statistic.Countdown

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

主题变量(Design Token)

组件 Token如何定制?

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

全局 Token如何定制?