# 数值显示 Statistic

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/statistic
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

突出展示某个或某组数字、带描述的统计类数据。

## 安装

```bash
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](https://github.com/iamkun/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](https://github.com/iamkun/dayjs)'s format|string |`-`|-|
|renderFormat|自定义 render 函数。`formattedValue` 表示格式化后的值。|(value: [StatisticProps](statistic#statistic)['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](https://github.com/iamkun/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|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt