NG-ALAIN- 文档
开始使用 常见问题
- 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,32117.1
各种数据文案的展现方式。
import { Component } from '@angular/core';
import { NumberInfoModule } from '@delon/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组件在一起时增加分隔符。
import { Component } from '@angular/core';
import { NumberInfoModule } from '@delon/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
暗系。
import { Component } from '@angular/core';
import { NumberInfoModule } from '@delon/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 {}