G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
代码如下（示例）：
npm install @antv/g2 --save创建 div 容器后，我们就可以进行简单的图表绘制：
1.创建 Chart 图表对象，指定图表所在的容器 ID、图表的宽高、边距等信息； 2.载入图表数据源； 3.使用图形语法进行图表的绘制； 4.渲染图表。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>柱状图</title> <!-- 引入 G2 文件 --> <script src="{{ url.g2 }}"></script> </head> <body> <!-- 创建图表容器 --> <div id="c1"></div> <script> 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(); </script> </body> </html>每个图表通常包含两个坐标轴，在直角坐标系（笛卡尔坐标系）下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径 2 个维度构成。
每个坐标轴由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）、标题（title）以及网格线（grid）组成。
图例作为图表的辅助元素，用于标定不同的数据类型以及数据的范围，辅助阅读图表，帮助用户在图表中进行数据的筛选过滤。
几何标记（Geometry），即我们所说的点、线、面这些几何图形，在 G2 中几何标记的类型决定了生成图表的类型，也就是数据被可视化后的实际表现，不同的几何标记都包含对应的图形属性 Attribute。
当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。
当需要在图表上绘制一些辅助线、辅助框或者图片时，比如增加平均值线、最高值线或者标示明显的范围区域时，可以使用辅助标记 annotation。
链接: https://g2.antv.vision/zh.
