Angular + G2[AntV] 01

目的

之前使用过ng-alain，发现这里面整合的G2图表不那么完全，所以自己试着单独整合Angular+G2

步骤

按照官网的说明：

1.通过npm安装

npm install @antv/g2 --save

2.在html中

<div id="c1"></div>

3.在ts文件中

import G2 from '@antv/g2';	// 引入G2模块
/**
 * 如果按照官网这样引入会发现报错提示，正确的引入方式应该是以下这种：
 * import * as G2 from '@antv/g2';
 */

constructor() {
  const data = [
     { genre: 'Sports', sold: 275 },
     { genre: 'Strategy', sold: 115 },
     { genre: 'Action', sold: 120 },
     { genre: 'Shooter', sold: 350 },
     { genre: 'Other', sold: 150 },
   ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
   // Step 1: 创建 Chart 对象
   const chart = new G2.Chart({
     container: 'c1', // 指定图表容器 ID
     width: 600, // 指定图表宽度
     height: 300, // 指定图表高度
   });
   // Step 2: 载入数据源
   chart.source(data);
   // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
   chart
     .interval()
     .position('genre*sold')
     .color('genre');
   // Step 4: 渲染图表
   chart.render();
 }

4.运行我们发现Please specify the container for the chart!

其实导致这个错误的一般有两种原因：
（1）容器id写错了；
（2）代码执行于视图渲染前，所以没找到指定的id；

所以可以使constructor中的代码延迟执行，这是效果

或者我们可以把代码写到ngOnInit中，也可以得到相同的效果，至于为什么在constructor中就不行，得看下Angular中各种生命钩子函数和构造函数的执行顺序

到这里，G2的引入及基本使用就完成了