This article has not been translated, hope that your can PR to translated it. Help us!

图表卡片
IMPORT MODULE

图表卡片,用于展示图表的卡片容器,可以方便的配合其它图表套件展示丰富信息。

代码演示

销售额

¥ 126,560.00

周同比12%日环比11%
风格一

风格一用法。

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

import { G2CardModule } from '@yelon/chart/card';
import { TrendModule } from '@yelon/chart/trend';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

@Component({
  selector: 'chart-card-style1',
  template: `
    <g2-card
      [title]="'销售额'"
      [bordered]="true"
      [total]="'¥ 126,560.00'"
      footer="日访问量 12,423"
      contentHeight="46"
      [action]="action"
    >
      <ng-template #action>
        <i nz-tooltip nzTooltipTitle="指标说明" nz-icon nzType="info-circle"></i>
      </ng-template>
      周同比
      <trend flag="up" style="margin: 0 16px 0 8px; color: rgba(0,0,0,.85)">12%</trend>
      日环比
      <trend flag="down" style="margin: 0 0 0 8px; color: rgba(0,0,0,.85)">11%</trend>
    </g2-card>
  `,
  standalone: true,
  imports: [G2CardModule, NzToolTipModule, TrendModule]
})
export class ChartCardStyle1Component {}
移动指标

¥ 126,560.00

风格三

风格三用法。

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

import { G2CardModule } from '@yelon/chart/card';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

@Component({
  selector: 'chart-card-style3',
  template: `
    <g2-card [title]="'移动指标'" [bordered]="true" [total]="'¥ 126,560.00'" [avatar]="avatar" [action]="action">
      <ng-template #avatar><img style="width:56px; height: 56px" src="./assets/img/logo-color.svg" /></ng-template>
      <ng-template #action>
        <i nz-tooltip nzTooltipTitle="指标说明" nz-icon nzType="info-circle"></i>
      </ng-template>
    </g2-card>
  `,
  standalone: true,
  imports: [G2CardModule, NzToolTipModule, NzIconModule]
})
export class ChartCardStyle3Component {}
移动指标

¥ 126,560.00

风格二

风格二用法。

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

import { G2CardModule } from '@yelon/chart/card';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

@Component({
  selector: 'chart-card-style2',
  template: `
    <g2-card
      [title]="'移动指标'"
      [bordered]="true"
      [total]="'¥ 126,560.00'"
      footer="日访问量 12,423"
      [avatar]="avatar"
      [action]="action"
    >
      <ng-template #avatar><img style="width:56px; height: 56px" src="./assets/img/logo-color.svg" /></ng-template>
      <ng-template #action>
        <i nz-tooltip nzTooltipTitle="指标说明" nz-icon nzType="info-circle"></i>
      </ng-template>
    </g2-card>
  `,
  standalone: true,
  imports: [G2CardModule, NzToolTipModule, NzIconModule]
})
export class ChartCardStyle2Component {}

API

g2-card

参数说明类型默认值
[title]卡片标题string,TemplateRef<void>-
[avatar]头像string,TemplateRef<void>-
[action]卡片操作string,TemplateRef<void>-
[total]数据总量(支持HTML)string-
[footer]卡片底部string,TemplateRef<void>-
[contentHeight]内容区域高度(单位:pxstring-
[bordered]是否显示边框booleanfalse
Loading...