Statistic统计

展示统计数字。

何时使用

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

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

代码演示

基本用法

简单的展示。

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

在卡片中使用

在卡片中展示统计数值。

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

单位

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

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

倒计时

倒计时组件。

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

nz-countdowncomponent

nzFormat