AntV G2

一、G2

G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
安装
通过 npm 安装
npm install @antv/g2 --save
成功安装完成之后，即可使用 import 或 require 进行引用。
import { Chart } from '@antv/g2';
const chart = new Chart({
container: ‘c1’,
width: 600,
height: 300,
});
浏览器引入
既可以通过将脚本下载到本地也可以直接引入在线资源：

使用 script 标签引入 G2 资源时，挂载在 window 上的变量名为 G2，所以在上述实例中需要加上 G2 的前缀。如下：
const chart = new G2.Chart({
/* your options */
});

二、使用方式

1. 创建 div 图表容器
在绘图前我们需要为 G2 准备一个 DOM 容器：

**2. 编写图表绘制代码** 创建 div 容器后，我们就可以进行简单的图表绘制： 1.new Chart() 创建 Chart 图表对象，指定图表所在的容器 id、图表的宽高、边距等信息； 2.chart.data() 载入图表数据源； 3.使用图形语法进行图表的绘制； 4.chart.render() 渲染图表。 **3. 图表容器被销毁时** 在图表容器被销毁时，总是应调用 `chart.destroy()`以销毁实例释放资源，避免内存泄漏。.

绘制图形最难还是第三步的图形语法进行图标的绘制

图形语法:
数据 Data：可视化最基础的部分。
图形属性 Attribute：负责将数据中的变量映射至图形空间。
几何标记 Geometry：即你在图表中实际看到的图形元素，如点、线、多边形等，每个几何标记对象含有多个图形属性，G2 的核心就是建立数据中的一系列变量到图形属性的映射。
度量 Scale：数据空间到图形属性空间的转换桥梁，每一个图形属性都对应着一个或者多个度量。
坐标系 Coordinate：描述了数据是如何映射到图形所在的平面的，同一个几何标记在不同坐标系下会有不同的表现。G2 提供了多种坐标系的支持：笛卡尔坐标、极坐标以及螺旋坐标等。
可视化组件 Component：也可以成为图表辅助元素，用于增强图表的可读性和可理解性，在 G2 中，提供了丰富的可视化组件，包括坐标轴 Axis，图例 Legend，提示信息 Tooltip，图形标记 Annotation，滑动条 Slider 等。
分面 Facet：描述了如何将数据分解为各个子集，以及如何对这些子集作图并联合进行展示，主要用于多维数据分析。

截图来自官方文档,知道G2提供位置、颜色、大小、形状即可


geom图标类型

View视图


Scale 度量





连续度量



日期