Statistic统计

展示统计数字。

何时使用#

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

单独引入此组件#

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

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

代码演示

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

简单的展示。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-statistic-basic',
  template: `
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="12">
        <nz-statistic [nzValue]="1949101 | number" [nzTitle]="'Active Users'"></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="12">
        <nz-statistic [nzValue]="2019.111 | number: '1.0-2'" [nzTitle]="'Account Balance (CNY)'"></nz-statistic>
      </nz-col>
    </nz-row>
  `
})
export class NzDemoStatisticBasicComponent {}
Active
11.28%
Idle
9.3%

在卡片中展示统计数值。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-statistic-card',
  template: `
    <div style="background: #ECECEC; padding: 30px;">
      <nz-row [nzGutter]="16">
        <nz-col [nzSpan]="12">
          <nz-card>
            <nz-statistic
              [nzValue]="11.28 | number: '1.0-2'"
              [nzTitle]="'Active'"
              [nzPrefix]="prefixTplOne"
              [nzSuffix]="'%'"
              [nzValueStyle]="{ color: '#3F8600' }"
            >
            </nz-statistic>
            <ng-template #prefixTplOne><i nz-icon nzType="arrow-up"></i></ng-template>
          </nz-card>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-card>
            <nz-statistic
              [nzValue]="9.3 | number: '1.0-2'"
              [nzTitle]="'Idle'"
              [nzPrefix]="prefixTplTwo"
              [nzSuffix]="'%'"
              [nzValueStyle]="{ color: '#CF1322' }"
            >
            </nz-statistic>
            <ng-template #prefixTplTwo><i nz-icon nzType="arrow-down"></i></ng-template>
          </nz-card>
        </nz-col>
      </nz-row>
    </div>
  `
})
export class NzDemoStatisticCardComponent {}
Feedback
1,128
Unmerged
93/ 100

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-statistic-unit',
  template: `
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="12">
        <nz-statistic [nzValue]="1128 | number" [nzTitle]="'Feedback'" [nzPrefix]="prefixTpl"></nz-statistic>
        <ng-template #prefixTpl><i nz-icon nzType="like"></i></ng-template>
      </nz-col>
      <nz-col [nzSpan]="12">
        <nz-statistic [nzValue]="93" [nzTitle]="'Unmerged'" [nzSuffix]="'/ 100'"></nz-statistic>
      </nz-col>
    </nz-row>
  `
})
export class NzDemoStatisticUnitComponent {}
Countdown
00:00:00
Million Seconds
00:00:00:000
Day Level
0 天 0 时 0 分 0 秒

倒计时组件。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-statistic-countdown',
  template: `
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="12">
        <nz-countdown [nzValue]="deadline" [nzTitle]="'Countdown'"></nz-countdown>
      </nz-col>
      <nz-col [nzSpan]="12">
        <nz-countdown [nzValue]="deadline" [nzTitle]="'Million Seconds'" [nzFormat]="'HH:mm:ss:SSS'"></nz-countdown>
      </nz-col>
      <nz-col [nzSpan]="24" style="margin-top: 32px;">
        <nz-countdown [nzValue]="deadline" [nzTitle]="'Day Level'" [nzFormat]="'D 天 H 时 m 分 s 秒'"></nz-countdown>
      </nz-col>
    </nz-row>
  `
})
export class NzDemoStatisticCountdownComponent {
  deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
}

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 }>-

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毫秒