- 文档
开始使用 常见问题
- G2
g2-bar 柱状图 g2-card 图表卡片 g2-chart 自定义图表 g2-gauge 仪表盘 g2-mini-area 迷你区域图 g2-mini-bar 迷你柱状图 g2-mini-progress 迷你进度条 number-info 数据文本 g2-pie 饼状图 g2-radar 雷达图 g2-single-bar 单一柱状图 g2-tag-cloud 标签云 g2-timeline 折线图 trend 趋势标记 g2-water-wave 水波图
- ECharts
chart-echarts ECharts
图表卡片，用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
代码演示
周同比12% 日环比11%
风格一用法。
import { Component } from '@angular/core';
import { G2CardModule } from '@delon/chart/card';
import { TrendModule } from '@delon/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 {}
风格三用法。
import { Component } from '@angular/core';
import { G2CardModule } from '@delon/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 {}风格二用法。
import { Component } from '@angular/core';
import { G2CardModule } from '@delon/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 {}