建立第一个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: 通用工具类

//必须引入核心包coreconst 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 容器后，我们就可以进行简单的图表绘制:

1. 创建 Chart 图表对象，指定图表所在的容器 ID、指定图表的宽高、边距等信息；　　　

var chart=new G2.Chart({
        container:"root",
        forceFit:true,
        width:500,
        height:500
    });//创建空图表        

1. 载入图表数据源；

chart.source(data)//载入数据源

1. 使用图形语法进行图表的绘制；

chart.line().position("year*value");//选择展现数据的类型

1. 渲染图表；

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();//将数据渲染到图表上