G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表；

官网地址：

https://antv.gitee.io/zh

线上示例：
特性：

💯 完善的图形语法：数据到图形的映射，能够绘制出所有的图表；
🤩 全新的交互语法：通过触发和反馈机制可以组合出各种交互行为，对数据进行探索；
🦍 强大的 View 模块：可支持开发个性化的数据多维分析图形；
👬 双引擎渲染：Canvas 或 SVG 任意切换；
💄 可视化组件体系：面向交互、体验优雅；
✨全面拥抱 TypeScript：提供完整的类型定义文件；

下面介绍一下在 vue 中使用G2：

安装G2依赖：

   npm instal @antv/g2

在绘图前我们需要为 G2 准备一个 DOM 容器：

   <div id="c1"></div>

执行代码：

  
  import * as G2 from '@antv/g2';  
  
  export default {
    mounted() {
           const data = [
                { genre: 'Sports', sold: 275 },
                { genre: 'Strategy', sold: 115 },
                { genre: 'Action', sold: 120 },
                { genre: 'Shooter', sold: 350 },
                { genre: 'Other', sold: 150 },
            ];

            // Step 1: 创建 Chart 对象
            const chart = new G2.Chart({
                container: 'c1', // 指定图表容器 ID
                width: 600, // 指定图表宽度
                height: 300, // 指定图表高度
            });

            // Step 2: 载入数据源
            chart.data(data);

            // Step 3：创建图形语法，绘制柱状图
            chart.interval().position('genre*sold');

            // Step 4: 渲染图表
            chart.render();
    }
  }

效果展示：