Day2 建立第一个AntV/G2图表

2019 年 10 月 4 日
笔记

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](容器元素用class绑定)等方法设置，总之只要获取到容器元素就可以。

载入图表数据源(也可以在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();//将数据渲染到图表上