数值显示 Statistic
突出展示某个或某组数字、带描述的统计类数据。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基础用法：当需要突出某个或某组数字或展示带描述的统计类数据时使用。
- 前缀后缀/自定义样式：这个示例展示了添加前缀后缀，并且可以自定义数值显示的样式。
- 计时组件：倒计时组件。可以通过
now来传入Date.now()，用于修复初始值显示的小误差问题。 - 数值动效：利用
Statistic，你可以作出一些好玩儿的效果，比如，数值缓动变大，让数值的展示更加具有视觉效果。 如果你设置了countUp，那么在组件 mount 之后，会执行动效。 如果你想自己控制动效，也可以通过ref拿到实例，执行ins.countUp()即可。 - 时间格式：时间显示。通过 dayjs 来进行时间格式化，
format即 dayjs 的 format。 - 加载中：通过
loading可以控制是否显示加载中状态。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Statistic
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| countUp | 数字动态变大 | boolean | - | - |
| groupSeparator | 显示千位分割符 | boolean | - | - |
| loading | 数字是否加载中 | boolean | - | 2.20.0 |
| countDuration | 动态变大的过渡时间 (ms) | number | 2000 | - |
| countFrom | 从什么数字开始动态变大 | number | 0 | - |
| precision | 数字精度 | number | - | - |
| format | dayjs's format | string | - | - |
| renderFormat | 自定义 render 函数。formattedValue 表示格式化后的值。 | (value: StatisticProps['value'], formattedValue: string) => ReactNode | - | 2.36.0 |
| extra | 在数值下展示额外内容 | ReactNode | - | - |
| prefix | 前缀 | string | ReactNode | - | - |
| suffix | 后缀 | string | ReactNode | - | - |
| title | 数值的标题 | string | ReactNode | - | - |
| className | 节点类名 | string | string[] | - | - |
| style | 节点样式 | CSSProperties | - | - |
| styleDecimal | 数值小数部分的样式 | CSSProperties | - | 2.47.0 |
| styleValue | 数值的样式 | CSSProperties | - | - |
| value | 数值 | string | number | Dayjs | - | - |
Statistic.Countdown
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| start | 是否开始倒计时，默认为 true，可以通过设置该值控制倒计时的时机 | boolean | true | - |
| format | dayjs's format | string | HH:mm:ss | - |
| title | 数值的标题 | string | ReactNode | - | - |
| className | 节点类名 | string | string[] | - | - |
| now | 用于修正初始化时间显示不正确 | number | string | Date | Dayjs | - | - |
| style | 节点样式 | CSSProperties | - | - |
| styleValue | 数值的样式 | CSSProperties | - | - |
| value | 倒计时的时间 | number | string | Date | Dayjs | - | - |
| onFinish | 倒计时完成后触发的回调 | () => void | - | - |
| renderFormat | 自定义 render 函数。valueDiff 表示两个时间的时间差，formattedDiff 表示格式化后的时间差， | (valueDiff: number, formattedDiff: string) => ReactNode | - | 2.36.0 |