logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.20.6
  • 组件总览
  • 通用
    • Button
      按钮
    • FloatButton
      悬浮按钮
      5.0.0
    • Icon
      图标
    • Typography
      排版
  • 布局
    • Divider
      分割线
    • Flex
      弹性布局
      5.10.0
    • Grid
      栅格
    • Layout
      布局
    • Space
      间距
  • 导航
    • Anchor
      锚点
    • Breadcrumb
      面包屑
    • Dropdown
      下拉菜单
    • Menu
      导航菜单
    • Pagination
      分页
    • Steps
      步骤条
  • 数据录入
    • AutoComplete
      自动完成
    • Cascader
      级联选择
    • Checkbox
      多选框
    • ColorPicker
      颜色选择器
      5.5.0
    • DatePicker
      日期选择框
    • Form
      表单
    • Input
      输入框
    • InputNumber
      数字输入框
    • Mentions
      提及
    • Radio
      单选框
    • Rate
      评分
    • Select
      选择器
    • Slider
      滑动输入条
    • Switch
      开关
    • TimePicker
      时间选择框
    • Transfer
      穿梭框
    • TreeSelect
      树选择
    • Upload
      上传
  • 数据展示
    • Avatar
      头像
    • Badge
      徽标数
    • Calendar
      日历
    • Card
      卡片
    • Carousel
      走马灯
    • Collapse
      折叠面板
    • Descriptions
      描述列表
    • Empty
      空状态
    • Image
      图片
    • List
      列表
    • Popover
      气泡卡片
    • QRCode
      二维码
      5.1.0
    • Segmented
      分段控制器
    • Statistic
      统计数值
    • Table
      表格
    • Tabs
      标签页
    • Tag
      标签
    • Timeline
      时间轴
    • Tooltip
      文字提示
    • Tour
      漫游式引导
      5.0.0
    • Tree
      树形控件
  • 反馈
    • Alert
      警告提示
    • Drawer
      抽屉
    • Message
      全局提示
    • Modal
      对话框
    • Notification
      通知提醒框
    • Popconfirm
      气泡确认框
    • Progress
      进度条
    • Result
      结果
    • Skeleton
      骨架屏
    • Spin
      加载中
    • Watermark
      水印
      5.1.0
  • 其他
    • Affix
      固钉
    • App
      包裹组件
      5.1.0
    • ConfigProvider
      全局化配置
    • Util
      工具类
      5.13.0

Statistic
统计数值

展示统计数值。
使用import{ Statistic }from"antd";
源码components/statistic
文档编辑此页

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

何时使用

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

代码演示

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

基本

简单的展示。

codepen icon
External Link Icon
expand codeexpand code
Active Users
Account Balance (CNY)
动画效果

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

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

倒计时组件。

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

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

codepen icon
External Link Icon
expand codeexpand code
Active
11.28%
Idle
9.30%
在卡片中使用

在卡片中展示统计数值。

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如何定制?