建立第一个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安装
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 });
使用该方式进行加载时可以按需引入AntV图表和组件。
默认使用 require("@antv/g2″) 得到的是已经加载了所有图表和组件的 AntV 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。
以下例子中Core核心模块必须导入，该包只包含核心的图形语法处理逻辑，具体包含如下：
- Scale：度量，仅包含基础的 Linear、Cat 以及 Identity 这三种类型
- 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
注意：使用该种方式引入脚本需要使用webpack工具打包才可运行，Webpack 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包AntV，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。
Step2：创建div图表容器
在页面的body部分创建一个div
<div id="root"></div>
注意点：
1.其中容器标签不一定是div标签，但必须是能包含div的标签，至于哪些标签能够包含div标签，可以参考标签嵌套问题总结
2.容器标签中也不一定必须绑定id，绑定class等也可以，只要能获取到该元素就行，但相对来说绑定id最为合适，因为一般每幅图都是独一无二的，但如果需要多副相同的图时，需要写重复代码，所以这里可以提个需求：让容器允许接收元素数组，而不是单单某一个元素。。
Step3. 编写图表绘制代码
创建 div 容器后，我们就可以进行简单的图表绘制:
-
创建 Chart 图表对象，指定图表所在的容器 ID、指定图表的宽高、边距等信息；
var chart=new G2.Chart({ container:"root", forceFit:true, width:500, height:500 });//创建空图表
-
载入图表数据源；
chart.source(data)//载入数据源
-
使用图形语法进行图表的绘制；
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();//将数据渲染到图表上