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

g2-card 图表卡片

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

import { G2CardModule } from '@delon/chart/card';

代码演示

风格一

风格一用法。

import { Component } from '@angular/core';
@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>
  `
})
export class ChartCardStyle1Component {
}

风格三

风格三用法。

import { Component } from '@angular/core';
@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>
  `
})
export class ChartCardStyle3Component {
}

风格二

风格二用法。

import { Component } from '@angular/core';
@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>
  `
})
export class ChartCardStyle2Component {
}

API

g2-card