Statistic统计

展示统计数字。

何时使用

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

单独引入此组件

想要了解更多关于单独引入组件的内容,可以在快速上手页面进行查看。

  1. import { NzStatisticModule } from 'ng-zorro-antd/statistic';

代码演示

Statistic统计 - 图1

基本用法

简单的展示。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-statistic-basic',
  4. template: `
  5. <nz-row [nzGutter]="16">
  6. <nz-col [nzSpan]="12">
  7. <nz-statistic [nzValue]="1949101 | number" [nzTitle]="'Active Users'"></nz-statistic>
  8. </nz-col>
  9. <nz-col [nzSpan]="12">
  10. <nz-statistic [nzValue]="2019.111 | number: '1.0-2'" [nzTitle]="'Account Balance (CNY)'"></nz-statistic>
  11. </nz-col>
  12. </nz-row>
  13. `
  14. })
  15. export class NzDemoStatisticBasicComponent {}

Statistic统计 - 图2

在卡片中使用

在卡片中展示统计数值。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-statistic-card',
  4. template: `
  5. <div style="background: #ECECEC; padding: 30px;">
  6. <nz-row [nzGutter]="16">
  7. <nz-col [nzSpan]="12">
  8. <nz-card>
  9. <nz-statistic
  10. [nzValue]="11.28 | number: '1.0-2'"
  11. [nzTitle]="'Active'"
  12. [nzPrefix]="prefixTplOne"
  13. [nzSuffix]="'%'"
  14. [nzValueStyle]="{ color: '#3F8600' }"
  15. >
  16. </nz-statistic>
  17. <ng-template #prefixTplOne><i nz-icon nzType="arrow-up"></i></ng-template>
  18. </nz-card>
  19. </nz-col>
  20. <nz-col [nzSpan]="12">
  21. <nz-card>
  22. <nz-statistic
  23. [nzValue]="9.3 | number: '1.0-2'"
  24. [nzTitle]="'Idle'"
  25. [nzPrefix]="prefixTplTwo"
  26. [nzSuffix]="'%'"
  27. [nzValueStyle]="{ color: '#CF1322' }"
  28. >
  29. </nz-statistic>
  30. <ng-template #prefixTplTwo><i nz-icon nzType="arrow-down"></i></ng-template>
  31. </nz-card>
  32. </nz-col>
  33. </nz-row>
  34. </div>
  35. `
  36. })
  37. export class NzDemoStatisticCardComponent {}

Statistic统计 - 图3

单位

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-statistic-unit',
  4. template: `
  5. <nz-row [nzGutter]="16">
  6. <nz-col [nzSpan]="12">
  7. <nz-statistic [nzValue]="1128 | number" [nzTitle]="'Feedback'" [nzPrefix]="prefixTpl"></nz-statistic>
  8. <ng-template #prefixTpl><i nz-icon nzType="like"></i></ng-template>
  9. </nz-col>
  10. <nz-col [nzSpan]="12">
  11. <nz-statistic [nzValue]="93" [nzTitle]="'Unmerged'" [nzSuffix]="'/ 100'"></nz-statistic>
  12. </nz-col>
  13. </nz-row>
  14. `
  15. })
  16. export class NzDemoStatisticUnitComponent {}

Statistic统计 - 图4

倒计时

倒计时组件。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-statistic-countdown',
  4. template: `
  5. <nz-row [nzGutter]="16">
  6. <nz-col [nzSpan]="12">
  7. <nz-countdown [nzValue]="deadline" [nzTitle]="'Countdown'"></nz-countdown>
  8. </nz-col>
  9. <nz-col [nzSpan]="12">
  10. <nz-countdown [nzValue]="deadline" [nzTitle]="'Million Seconds'" [nzFormat]="'HH:mm:ss:SSS'"></nz-countdown>
  11. </nz-col>
  12. <nz-col [nzSpan]="24" style="margin-top: 32px;">
  13. <nz-countdown [nzValue]="deadline" [nzTitle]="'Day Level'" [nzFormat]="'D 天 H 时 m 分 s 秒'"></nz-countdown>
  14. </nz-col>
  15. </nz-row>
  16. `
  17. })
  18. export class NzDemoStatisticCountdownComponent {
  19. deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
  20. }

API

nz-statisticcomponent

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

nz-countdowncomponent

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

nzFormat

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