数据文本
IMPORT MODULE

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

代码演示

本周访问
12,32117.1
基本

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

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

@Component({
  selector: 'chart-number-info-basic',
  template: ` <number-info subTitle="本周访问" total="12,321" subTotal="17.1" status="up"></number-info> `,
})
export class ChartNumberInfoBasicComponent {}
今日访问
12,321
本周访问
12,32100
本月访问
12,32100000
多列

多个number-info组件在一起时增加分隔符。

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

@Component({
  selector: 'chart-number-info-multiple',
  template: `
    <number-info subTitle="今日访问" total="12,321"></number-info>
    <number-info subTitle="本周访问" total="12,32100"></number-info>
    <number-info subTitle="本月访问" total="12,32100000"></number-info>
  `,
})
export class ChartNumberInfoMultipleComponent {}
本周访问
12,32117.1
主题

暗系。

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

@Component({
  selector: 'chart-number-info-theme',
  template: ` <number-info subTitle="本周访问" total="12,321" subTotal="17.1" status="down" theme="default"></number-info> `,
})
export class ChartNumberInfoThemeComponent {}

API

number-info

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