前言：最近在做一个东西的时候，需要对于用户数据，以及其他相关的数据进行图表统计，所以自己在网上找了一下插件，发现了G2，这的确是一个好东西，功能强大，但是唯一不足的时候该插件太大了，有417k。对于一般的操作，还是代价太大了，不过既然接触到了这个插件，还是有必要总结一下。
插件官网地址
http://antv.alipay.com/g2/doc简单的demo
我这里是把js文件下载下来了，所以是引入本地文件，你们也可以通过引入在线资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
#container{
width: 800px;
margin: 100px auto;
}
</style>
<script src="g2.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 定义数据源
var data = [
{time: "2013", amount: 120},
{time: "2014", amount: 240},
{time: "2015", amount: 300},
{time: "2016", amount: 180},
{time: "2017", amount: 150},
];
// 创建图表对象
var chart = new G2.Chart({
id: "container",
forceFit: true,//宽度自适应，也可以直接调整
height: 280,
});
// 载入数据源
chart.source(data, {
time: {
alias: "时间" //定义别名
},
amount: {
alias: "销售量"
}
});
// 绘制图像,这里time*amount也就是time是X轴,如果是amount*time,那么amount就是X轴
// 这里的interval是几何标记,也就是你可以通过设置几何标记从而确定你要展示的图标类型
chart.interval().position("time * amount").color("time");
//渲染图像到网页
chart.render();
</script>
</body>
</html>效果图
