- Documents
Getting Started FAQ
- G2
g2-bar柱状图 g2-card图表卡片 g2-chartCustom Chart g2-gauge仪表盘 g2-mini-area迷你区域图 g2-mini-bar迷你柱状图 g2-mini-progress迷你进度条 g2-pie饼状图 g2-radar雷达图 g2-single-bar单一柱状图 g2-tag-cloud标签云 g2-timeline折线图 g2-water-wave水波图 number-infoNumberInfo trend趋势标记
- ECharts
chart-echartsECharts
图表卡片，用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
Examples
周同比12% 日环比11%
风格一用法。
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 {}