5.26.0

Statistic
统计数值

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

何时使用

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

代码演示

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

简单的展示。

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

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

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
-
Million Seconds
-
Countdown
-
Countup
-
Day Level (Countdown)
-
Day Level (Countup)
-

计时器组件。

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

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

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

在卡片中展示统计数值。

CodeSandbox Icon
codeblock
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 Deprecated

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

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
contentFontSize内容字体大小number24
titleFontSize标题字体大小number14
全局 Token如何定制?
文档贡献者
  • Segmented分段控制器Table表格