Day2 建立第一个AntV/G2图表
Step1：引进G2脚本
方法一：引入在线脚本
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>方法二：引入本地脚本
<script src="./g2.js"></script>
//src为本地G2脚本所在相对路径方法三：通过npm安装
注意：使用该种方式引入脚本需要使用webpack工具打包才可运行，Webpack 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包AntV，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。
npm install @antv/g2 --save成功安装完成之后，即可使用 import 或 require 进行引用。
import G2 from '@antv/g2';
//const G2=require("@antv/g2");
const chart = new G2.Chart({
container: 'c1',
width: 600,
height: 300
});使用该方式进行加载时可以和Echarts一样按需引入AntV图表和组件。
默认使用 require("@antv/g2") 得到的是已经加载了所有图表和组件的 AntV 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以和Echarts一样只按需引入需要的模块。
以下例子中Core核心模块必须导入，该包只包含核心的图形语法处理逻辑，具体包含如下：
- Scale：度量，仅包含基础的 Linear、Cat 以及 Time 这三种类型
- G：绘制引擎
- Animate：动画配置
- Chart：图表入口类
- Global：全局变量
- Shape：管理各种类型的shape
- Util: 通用工具类
//必须引入核心包core
const Core=require("@antv/g2/lib/core");
require("@antv/g2/lib/geom/line");
require("@antv/g2/lib/geom/point");
var data = [{
year: '1991',
value: 3
}, {
year: '1992',
value: 4
}, {
year: '1993',
value: 3.5
}, {
year: '1994',
value: 5
}, {
year: '1995',
value: 4.9
}, {
year: '1996',
value: 6
}, {
year: '1997',
value: 7
}, {
year: '1998',
value: 9
}, {
year: '1999',
value: 13
}];
var chart=new G2.Chart({
container:"root",
forceFit:true,
});
chart.source(data);
chart.line().position("year*value");
chart.point().position("year*value").size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();例如上面的例子中只用到了点图和折线图，因此引入的时候可以只引入这两个模块，从而将打包体积从563KB减小到432KB
可以按需引入的模块见https://github.com/antvis/g2/tree/master/src
Step2：创建div图表容器
在页面的body部分创建一个div
<div id="root"></div>注意点：
1.其中容器标签不一定是div标签，但必须是能包含div的标签，至于哪些标签能够包含div标签，可以参考标签嵌套问题总结
2.容器标签中也不一定必须绑定id，绑定class等也可以，只要能获取到该元素就行，但相对来说绑定id最为合适，因为一般每幅图都是独一无二的，但如果需要多副相同的图时，需要写重复代码，所以这里可以提个需求：让容器允许接收元素数组，而不是单单某一个元素。。
Step3. 编写图表绘制代码
创建 div 容器后，我们就可以进行简单的图表绘制:
- 创建 Chart 图表对象，指定图表所在的容器 ID、指定图表的宽高、边距等信息；
看此文章时如果对chart参数配置有疑惑可先跳过，下节将会针对参数用法做出说明和解析。
var chart=new G2.Chart({
container:"root",
//container：document.getElementById("root")
forceFit:true,
width:500,
height:500
});//创建空图表 注意：containner有两种设置方法：
- 直接设置字符串，则默认为document.getElementById("root")
- 直接通过document.getElementById("root")或document.getElementsByClassName("root")0等方法设置，总之只要获取到容器元素就可以。
- 载入图表数据源(也可以在options中data属性载入数据)；
chart.source(data)//载入数据源- 使用图形语法进行图表的绘制(也可以在options中geom属性设置展示图形)；
chart.line().position("year*value");//选择展现数据的类型- 渲染图表；
chart.render();//渲染图表最后的源代码和效果图如下：
var data = [{
year: '1991',
value: 3
}, {
year: '1992',
value: 4
}, {
year: '1993',
value: 3.5
}, {
year: '1994',
value: 5
}, {
year: '1995',
value: 4.9
}, {
year: '1996',
value: 6
}, {
year: '1997',
value: 7
}, {
year: '1998',
value: 9
}, {
year: '1999',
value: 13
}];//数据
var chart=new G2.Chart({
container:"root",
forceFit:true,
});//创建空图表
chart.source(data);//选择数据源
chart.line().position("year*value");//选择展现数据的类型
chart.point().position("year*value").size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();//将数据渲染到图表上