number-info 数据文本

常用在数据卡片中,用于突出展示某个业务数据。

  1. import { NumberInfoModule } from '@delon/chart/number-info';

代码演示

number-info 数据文本 - 图1

演示

各种数据文案的展现方式。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'chart-number-info-basic',
  4. template: `
  5. <number-info subTitle="本周访问" total="12,321" subTotal="17.1" status="up"></number-info>
  6. `
  7. })
  8. export class ChartNumberInfoBasicComponent {
  9. }

number-info 数据文本 - 图2

主题

暗系。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'chart-number-info-theme',
  4. template: `
  5. <number-info subTitle="本周访问" total="12,321" subTotal="17.1" status="down" theme="default"></number-info>
  6. `
  7. })
  8. export class ChartNumberInfoThemeComponent {
  9. }

API

number-info

参数说明类型默认值
[title]标题TemplateRef<void>-
[subTitle]子标题TemplateRef<void>-
[total]总量string-
[suffix]总量后缀string-
[subTotal]子总量string-
[status]增加状态‘up’,’down’-
[theme]状态样式‘light’,’default’‘light’
[gap]设置数字和描述直接的间距(像素)number8