利用G2绘制统计图总结

第一步：添加引用：

<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

第二步：直接使用

官网截取代码：
这段代码放入body
<div id='c1' ></div>

下面的放入<script>...</script>中
const chart = new G2.Chart({
        container: 'c1', // 指定图表容器 可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
        width : 40, // 指定图表宽度
        height : 500, // 指定图表高度
        padding:[10,20,30,40], //设置图表的内边距,对应css样式padding
        background: {
            fill:'white', // 图表背景色
            fillOpacity: 5, // 图表背景透明度
            stroke: 'gray', // 图表边框颜色
            strokeOpacity: 5, // 图表边框透明度
            opacity: 5, // 图表整体透明度
            lineWidth: 5, // 图表边框粗度
            radius: 5, // 图表圆角大小
        },
        forceFit: true, //图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度.
        animate: false, //图表动画开关，默认为 true，即开启动画。
    })
const data = [
  { name: '张三', score: 53 },
  { name: '王五', score: 92 }
];
// Step 2: 载入数据源
    chart.source(data);
    // Step 3：创建图形语法，绘制柱状图，由 date 和 num 两个属性决定图形位置，date 映射至 x 轴，num 映射至 y 轴
    chart.interval().position('name*score').color('name')
    // Step 4: 渲染图表
    chart.render();

这个过程的重要注意事项为：
1，body中的div 的id（c1）要和 container: ‘c1’,中的一致进行绑定。
2， chart.interval().position(‘namescore’).color(‘name’)这个方法有个坑，要把position中的参数('namescore’)，定义为与获取data中的属性相同，同时color这个参数为第一个data数据第一个参数，不同步会造成柱子全为黑色。

第三步： 异步获取数据

//JavaScript代码区域
        $.getJSON('/getG2Data',function (data) {
            console.log(data);
            const chart = new G2.Chart({
                container: 'c1', // 指定图表容器 可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
                width : 40, // 指定图表宽度
                height : 500, // 指定图表高度
                padding:[10,20,30,40], //设置图表的内边距,对应css样式padding
                background: {
                    fill:'white', // 图表背景色
                    fillOpacity: 5, // 图表背景透明度
                    stroke: 'gray', // 图表边框颜色
                    strokeOpacity: 5, // 图表边框透明度
                    opacity: 5, // 图表整体透明度
                    lineWidth: 5, // 图表边框粗度
                    radius: 5, // 图表圆角大小
                },
                forceFit: true, //图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度.
                animate: true, //图表动画开关，默认为 true，即开启动画。
            });
            chart.source(data);
            chart.interval().position('astudentid*score').color('astudentid')
            chart.render();
        });

用jquery异步获取数据，不会的自己去补充知识，或者按照我这样也没问题
$.getJSON(’/getG2Data’,function (data) ：其中/getG2Data为请求参数的url，data为返回json数据。通过console.log（data）检查你返回的json数据，记住此时的json数据一定要和第二步中格式相同chart.interval().position(‘astudentid*score’).color(‘astudentid’)
同样，astudentid，score为自己数据属性，astudentid换为自己数据属性。