开始使用

图表是基于 G2 (3.0) 的基础上二次封装,提供了业务中常用的图表套件,可以单独使用,也可以组合起来实现复杂的展示效果。

图表的作用,是帮助我们更好地看懂数据。选择什么图表,需要回答的首要问题是『我有什么数据,需要用图表做什么』,而不是 『图表长成什么样』 。

分类名组件清单描述
比较类迷你柱状图:g2-mini-bar
单一柱状图:g2-single-bar
柱状图:g2-bar
雷达图:g2-radar
迷你区域图:g2-mini-area
迷你进度条:g2-mini-progress
-
分布类折线图:g2-timeline-
占比类饼图:g2-pie
水波图:g2-water-wave
迷你进度条:g2-mini-progress
迷你区域图:g2-mini-area
-
区间类仪表盘:g2-gauge
迷你区域图:g2-mini-area
-
趋势类折线图:g2-timeline
迷你区域图:g2-mini-area
-
时间类折线图:g2-timeline
迷你区域图:g2-mini-area
-
其它标签云:g2-tag-cloud
图表卡片:g2-chart-card
自定义图表:g2-chart
-

如何使用

导入模块

  1. // shared.module.ts
  2. import { G2BarModule } from '@delon/chart/bar';
  3. @NgModule({
  4. imports: [ G2BarModule ],
  5. exports: [ G2BarModule ]
  6. })

自定义 G2 组件

使用 g2-chart 组件快速自定义一个图表,可以减少不必要的组件渲染过程中所产生的奇怪问题。