---
title: Statistic - 统计数值
path: /Statistic
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  title: 反馈组件
  path: /dataShow
---

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

## 基本用法

提供提示文字在上和在下两种样式基础样式。

<code src='./demos/base.tsx'  height='400px'>

## 前缀后缀/自定义样式

增加前缀后缀样式，并且可以自定义数值显示的样式。

<code src='./demos/icon.tsx'  height='400px'>

## 计时组件

提供基础的计时组件样式

<code src='./demos/time.tsx'  height='400px'>

## API

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

## Statistic.Countdown

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