Statistic统计

展示统计数字。

何时使用#

  • 当需要突出某个或某组数字时。
  • 当需要展示带描述的统计类数据时使用。
import { NzStatisticModule } from 'ng-zorro-antd/statistic';

代码演示

Active Users
1,949,101
Account Balance (CNY)
2,019.11
Active Users

简单的展示。

expand codeexpand code
      加载中
    
Active
11.28%
Idle
9.3%

在卡片中展示统计数值。

expand codeexpand code
      加载中
    
Feedback
1,128
Unmerged
93/ 100

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

expand codeexpand code
      加载中
    
Countdown
00:00:00
Million Seconds
00:00:00:000
Day Level
0 天 0 时 0 分 0 秒

倒计时组件。

expand codeexpand code
      加载中
    

API#

nz-statistic#

参数说明类型默认值
[nzPrefix]设置数值的前缀string | TemplateRef<void>-
[nzSuffix]设置数值的后缀string | TemplateRef<void>-
[nzTitle]数值的标题string | TemplateRef<void>-
[nzValue]数值内容string | number-
[nzValueStyle]设置数值的样式Object-
[nzValueTemplate]自定义数值展示TemplateRef<{ $implicit: string | number }>-
[nzLoading]数值是否加载中booleanfalse

nz-countdown#

参数说明类型默认值
[nzFormat]格式化倒计时展示string"HH:mm:ss"
[nzPrefix]设置数值的前缀string | TemplateRef<void>-
[nzSuffix]设置数值的后缀string | TemplateRef<void>-
[nzTitle]数值的标题string | TemplateRef<void>-
[nzValue]时间戳格式的目标时间string | number-
[nzValueTemplate]自定义时间展示TemplateRef<{ $implicit: number }>-
(nzCountdownFinish)当倒计时完成时发出事件void-

nzFormat#

占位符描述
Y
M
D
H
m
s
S毫秒