数据文本
IMPORT MODULE

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

代码演示

本周访问
12,32117.1
基本

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

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

import { NumberInfoModule } from '@yelon/chart/number-info';

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

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

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

import { NumberInfoModule } from '@yelon/chart/number-info';

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

暗系。

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

import { NumberInfoModule } from '@yelon/chart/number-info';

@Component({
  selector: 'chart-number-info-theme',
  template: ` <number-info subTitle="本周访问" total="12,321" subTotal="17.1" status="down" theme="default" /> `,
  standalone: true,
  imports: [NumberInfoModule]
})
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
Loading...