diff --git a/.babelrc b/.babelrc
index b782ce6fb..5c281eb49 100644
--- a/.babelrc
+++ b/.babelrc
@@ -9,6 +9,7 @@
         "loose": true,
         "modules": false
       }
-    ]
+    ],
+    "babel-preset-gatsby"
   ]
 }
diff --git a/.gitignore b/.gitignore
index ca959b3d8..82d9edb39 100644
--- a/.gitignore
+++ b/.gitignore
@@ -73,3 +73,5 @@ demos/debug.html
 
 *.sw*
 *.un~
+public
+.cache
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index f468b9c19..000000000
--- a/docs/README.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# F2
-
-* Chinese documents: https://antv.alipay.com/zh-cn/f2/3.x
-* English documents: https://antv.gitbook.io/f2
-
-* Demos: https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html
-
-**Or scan the QR code to see demos in mobile:**
-
-<img src="https://gw.alipayobjects.com/zos/rmsportal/nzlxIzUBlBRVGMyaZigG.png" style="width:150px;">
diff --git a/docs/api.zh.md b/docs/api.zh.md
new file mode 100644
index 000000000..ff96b1c2f
--- /dev/null
+++ b/docs/api.zh.md
@@ -0,0 +1,23 @@
+---
+title: API
+order: 1
+---
+当引入 F2 之后，就可以使用全局命名空间 `F2`。
+
+## 常量 Constants
+
+```javascript
+F2.version // 当前 F2 的版本号
+```
+
+## 类 Classes
+
+- [F2.Chart](api/chart)：图表的入口类
+
+- [F2.G](api/g)：底层绘图引擎（基于原生的 Html5 Canvas 接口封装）
+
+- [F2.Shape](api/shape)：F2 Shape 图形扩展接口，用于自定义各种几何标记的 shape
+
+- [F2.Global](api/global)：F2 的全局配置，包含图表的皮肤样式
+
+- [F2.Util](api/util)：辅助类工具函数
diff --git a/docs/api/chart.en.md b/docs/api/chart.en.md
new file mode 100644
index 000000000..899abaec3
--- /dev/null
+++ b/docs/api/chart.en.md
@@ -0,0 +1,545 @@
+---
+title: Chart
+order: 0
+---
+
+## 创建 chart 实例
+
+绘制图表前必须创建一个 `<canvas>` 元素或者一个 canvas 上下文环境。
+
+```javascript
+const chart = new F2.Chart({
+  id: 'c1',
+  width: 500,
+  height: 500,
+  padding: 'auto'
+});
+```
+
+## 参数
+
+### id
+
+- 参数类型：String
+- 描述：指定对应 canvas 的 id
+- 默认值：null
+
+### el
+
+- 参数类型：HTMLElement
+- 描述：如果未指定 id 时可以直接传入 canvas 对象
+- 默认值：null
+
+
+```javascript
+const chart = new F2.Chart({
+  el: document.getElementById('c1')
+});
+```
+
+### context
+
+- 参数类型：CanvasRenderingContext2D
+- 描述：canvas 的上下文，F2 3.0.1 版本开始支持。
+- 默认值：null
+
+```javascript
+const chart = new F2.Chart({
+  context: document.getElementById('c1').getContext('2d')
+});
+```
+
+**说明：`id`、`el`、`context` 这三个属性必须设置一个。**
+
+### width
+
+- 参数类型：Number
+- 描述：图表的宽度，如果 `<canvas>` 元素上设置了宽度，可以不传入
+- 默认值：null
+
+### height
+
+- 参数类型：Number
+- 描述：图表的高度，如果 `<canvas>` 元素上设置了高度，可以不传入
+- 默认值：null
+
+```javascript
+// 默认使用 canvas 元素的宽高
+const chart = new F2.Chart({
+  id: 'c1'
+});
+
+const chart = new F2.Chart({
+  id: 'c1',
+  width: 500,
+  height: 300
+});
+```
+
+### padding
+
+- 参数类型：Number/Array/String
+- 描述：图表绘图区域和画布边框的间距，用于显示坐标轴文本、图例
+- 默认值：'auto'，自动计算
+
+
+```javascript
+const chart = new F2.Chart({
+  id: 'c1',
+  padding: 'auto' // 默认值，自动计算 padding
+});
+
+const chart = new F2.Chart({
+  id: 'c1',
+  padding: [ 0, 10, 40, 100 ] // 分别设置上、右、下、左边距
+});
+
+const chart = new F2.Chart({
+  id: 'c1',
+  padding: 40 // 单个值
+});
+
+const chart = new F2.Chart({
+  id: 'c1',
+  padding: [ 40, 10, 'auto', 'auto' ]  // 指定几个方向自动计算 padding
+});
+```
+
+> 说明：padding 的使用方法同 CSS 盒模型中的 padding。
+
+
+### appendPadding
+
+- 参数类型：Number/Array
+- 描述：图表画布区域四边的预留边距，即我们会在 padding 的基础上，为四边再加上 appendPadding 的数值，默认为 15。
+- 默认值：15
+
+
+下图中红色区域为 `appendPadding`，黄色区域为 `padding`。![](https://gw.alipayobjects.com/zos/rmsportal/oFTYeMwQDMICIWMRCAmt.png#width=500)
+
+
+### pixelRatio
+
+- 参数类型：Number
+- 描述：屏幕画布的像素比
+- 默认值：1
+
+
+屏幕画布的像素比，由于 canvas 在高清屏上显示时会模糊，所以需要设置 `pixelRatio`，一般情况下这个值可以设置成 `window.devicePixelRatio`。 这个值之所以没有默认使用 `window.devicePixelRatio` 的原因在于不同场景下的高清方案不同，不同平台上的实现也不一致，所以需要用户自己指定。
+
+```javascript
+// 全局设置，所有的图表生效
+F2.Global.pixelRatio = window.devicePixelRatio;
+// 只为某个 chart 实例单独设置
+const chart = new F2.Chart({
+  id: 'c1',
+  pixelRatio: window.devicePixelRatio
+});
+```
+
+### plugins
+
+- 参数类型：Object/Array
+- 描述：为 chart 实例注册插件
+- 默认值：null
+
+
+更多关于插件的使用，详见[Plugin](https://www.yuque.com/antv/f2/api-plugin)。
+
+### animate
+
+- 参数类型：Boolean
+- 描述：是否关闭 chart 的动画
+- 默认值：null
+
+
+### syncY
+
+- 参数类型: Boolean
+- 描述：用于多 Y 轴的情况下，统一 Y 轴的数值范围。
+- 默认值：false
+
+
+## 方法
+
+### get
+
+- 描述：获取属性
+- 返回：返回对应的属性值
+
+该方法用于获取 chart 内部的属性，如 `chart.get('width')`，包含的属性如下：
+
+| **属性名** | **解释** |
+| --- | --- |
+| id | 对应 canvas 的 id |
+| padding | 当前的图表绘图区域和画布边框的间距 |
+| data | 原始数据 |
+| width | 图表宽度 |
+| height | 图表高度 |
+| pixelRatio | 图表的屏幕像素比 |
+| el | 对应 canvas 的 dom 对象 |
+| canvas | 对应的 canvas 对象（G.Canvas） |
+| geoms | chart render 之后可获取，返回所有的 geoms 对象 |
+
+
+### source
+
+- 描述：装载数据
+- 返回：当前 chart 实例
+
+#### chart.source(data)
+
+- `data`：Array，可视化数据
+
+#### chart.source(data, colDefs)
+
+- `data`：Array，可视化数据
+- `colDefs`：Object，可选，列定义配置（各个字段的度量配置）
+
+
+```javascript
+chart.source(data, {
+  a: {
+    min: 0,
+    max: 100
+  }
+});
+```
+
+图表数据的列定义用于对数据字段进行定义，如数据的类型，显示别名，数值的格式化等，不同的数字类型的配置项不同，支持的数据类型有：
+
+- `linear`: 数值类型
+- `cat`: 分类类型
+- `timeCat`：时间类型
+
+
+F2 会自动检测数据类型，用户也可以根据自身需求更改一些属性或者数据的类型，具体支持的配置属性详见 [Scale](https://www.yuque.com/antv/f2/api-scale) API。
+
+### scale
+
+- 描述：为数据字段进行列定义
+- 返回：当前 chart 实例
+
+
+!注意: 如数据属性 field 在 `chart.source()` 和 `chart.scale()` 中均有定义，那么后声明的会覆盖之前声明的配置。
+
+#### chart.scale('field', colDef)
+
+为指定的数据字段进行列定义。
+
+- `field`：String，设置列定义的数据字段名。
+- `colDef`：Object，度量配置，详见 [Scale](https://www.yuque.com/antv/f2/api-scale) API。
+
+
+示例：
+
+```javascript
+const data = [
+  { x: 0, y: 1 },
+  { x: 1, y: 2 },
+  { x: 2, y: 3 }
+];
+
+// 为 x 字段设置列定义
+chart.scale('x', {
+  type: 'cat', // 声明 type 字段为分类类型
+  values: [ 'A', 'B', 'C' ] // 重新显示的值
+  alias: '类型' // 设置属性的别名
+});
+```
+
+#### chart.scale(colDef)
+
+为一个或者多个数据字段进行列定义配置。
+
+- `colDef`：Object，度量配置，详见 [Scale](https://www.yuque.com/antv/f2/api-scale) API。
+
+
+示例：
+
+```javascript
+const data = [
+  { x: 0, y: 1 },
+  { x: 1, y: 2 },
+  { x: 2, y: 3 }
+];
+
+// 为多个字段设置列定义
+chart.scale({
+  x: {
+    type: 'cat', // 声明 type 字段为分类类型
+    values: [ 'A', 'B', 'C' ] // 重新显示的值
+    alias: '类型' // 设置属性的别名
+  },
+  y: {
+    type: 'cat'
+  }
+});
+```
+
+### coord
+
+`chart.coord()`
+
+- 描述：配置坐标系
+
+- 返回：当前 chart 实例
+
+
+详见 [Coordinate](https://www.yuque.com/antv/f2/api-coordinate)。
+
+### axis
+
+`chart.axis()`
+
+- 描述：配置坐标轴
+- 返回：当前 chart 实例
+
+
+详见 [Axis](https://www.yuque.com/antv/f2/api-axis)。
+
+### legend
+
+`chart.legend()`
+
+- 描述：配置图例
+- 返回：当前 chart 实例
+
+
+详见 [Legend](https://www.yuque.com/antv/f2/api-legend)。
+
+### tooltip
+
+`chart.tooltip()`
+
+- 描述：配置提示信息
+- 返回：当前 chart 实例
+
+
+详见 [Tooltip](https://www.yuque.com/antv/f2/tooltip)。
+
+### guide
+
+`chart.guide()`
+
+- 描述：配置辅助元素
+- 返回：当前 guideController 实例
+
+
+详见 [Guide](https://www.yuque.com/antv/f2/api-guide)。
+
+### animate
+
+`chart.animate()`
+
+- 描述：配置图表的动画
+- 返回：当前 chart 实例
+
+
+详见 [Animation](https://www.yuque.com/antv/f2/api-animate)。
+
+### 创建 Geometry 对象
+
+- `chart.point()`：创建 point（点）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.line()`：创建 line（线）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.area()`：创建 area（区域）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.path()`：创建 path（路径）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.interval()`：创建 interval（柱）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.polygon()`：创建 polygon（多边形）的几何标记对象并返回该对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.schema()`：创建 schema 的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+
+注意：以上方法返回的是几何标记实例，不是 chart 实例。
+
+### render
+
+`chart.render()`
+
+- 描述：渲染图表，在最后调用
+
+- 返回： 当前 chart 实例
+
+
+### clear
+
+`chart.clear()`
+
+- 描述：清除图表内容
+
+- 返回：当前 chart 实例
+
+
+F2 重新绘制时不需要 destroy，而仅需要 `chart.clear()` 然后重新声明语法，如下示例：
+
+```javascript
+chart.clear(); // 清除
+chart.source(data);
+chart.line().position('a*b');
+chart.render();
+```
+
+### repaint
+
+`chart.repaint()`
+
+- 描述：重新绘制图表
+- 返回：当前 chart 实例
+
+
+当修改了 guide、geometry 的配置项时可以重新绘制图表。
+
+### changeData
+
+`chart.changeData(data)`
+
+- 参数
+  - `data`: Array，数据源
+- 描述：改变数据，同时图表刷新
+- 返回：当前 chart 实例
+
+
+### changeSize
+
+`chart.changeSize(width, height)`
+
+- 参数
+
+  - `width`: Number/null, 如果为 null，表示宽度不变
+
+  - `height`: Number/null, 如果为 null，表示高度不变
+
+- 描述：改变数据，同时图表刷新
+
+- 返回：当前 chart 实例
+
+
+`chart.changeSize(300)` 只改变宽度；<br />`chart.changeSize(300, 500)` 宽度高度同时改变；<br />`chart.changeSize(, 300)` 只改变高度。
+
+### destroy
+
+`chart.destroy()`
+
+- 描述：销毁图表，`<canvas>` dom 元素不会销毁
+
+
+### getPosition
+
+`chart.getPosition(record)`
+
+- 参数
+
+  - `record`: Object 类型，原始数据对象
+
+- 描述：获取原始数据对应在画布上的坐标
+
+- 返回：Object 类型，record 对应的画布坐标，格式为 `{ x: , y: }`
+
+
+```javascript
+const point = chart.getPosition({ time: '2010-02-02', value: 20 });
+```
+
+### getRecord
+
+`chart.getRecord(point)`
+
+- 参数
+  - `point`: Object 类型，画布坐标，格式为 `{x: ,y: }`
+- 描述：根据画布上的坐标获取对应的原始数据
+- 返回：Object 类型，point 对应的原始数据
+
+
+```javascript
+const obj = chart.getRecord({ x: 100, y: 100 });
+```
+
+### getSnapRecords
+
+`chart.getSnapRecords(point)`
+
+- 参数
+  - `point`: Object 类型，画布坐标，格式为 `{x: ,y: }`
+- 描述：根据画布上的坐标获取附近的数据集
+- 返回：Array 类型，返回数据集，该数据集中的每一项记录包含映射后的数据以及对应的原始数据集，结构如下
+
+
+```javascript
+[
+  {
+    _origin: { year: '1959 年', sales: 38 }, // 该 shape 对应的原始数据
+    points: [
+      { x: 0.65625, y: 0 },
+      { x: 0.65625, y: 0.2375 },
+      { x: 0.71875, y: 0.2375 },
+      { x: 0.71875, y: 0 }
+    ], // 组成该 shape 的关键顶点，归一化数据
+    _originY: 38, // Y 轴对应的原始数据
+    x: 260.53499698638916, // 该 shape 的 x 轴画布坐标
+    y: 165.34375, // 该 shape 的 y 轴画布坐标
+    index: 5 // shape 的索引
+  },
+  ...
+  {}
+]
+```
+
+```javascript
+const obj = chart.getSnapRecords({x: 100, y: 100});
+```
+
+### getLegendItems
+
+`chart.getLegendItems()`
+
+- 描述：获取图例的 items，用于图例相关的操作
+- 返回：Array 类型
+
+
+### getXScale
+
+`chart.getXScale()`
+
+- 描述：获取图表 x 轴对应的度量
+
+- 返回：Scale 类型，x 轴对应的度量对象
+
+
+### getYScales
+
+`chart.getYScales()`
+
+- 描述：获取图表 Y 轴对应的度量，有可能会有多个 Y 轴
+
+- 返回：Array，y 轴对应的度量对象的数组
+
+
+### showTooltip
+
+`chart.showTooltip(point)`
+
+- 参数
+
+  - `point`: Object 类型，画布坐标，格式为 `{x: ,y: }`
+
+- 描述：在该点显示 tooltip
+- 返回：当前 chart 实例
+
+
+### hideTooltip
+
+`chart.hideTooltip()`
+
+- 描述：隐藏当前 tooltip
+
+- 返回：当前 chart 实例
+
+
+## 事件说明
+
+F2 没有提供事件机制，用户可以直接通过监听 `canvas` DOM 上的事件进行自定义交互行为。
diff --git a/docs/api/chart.zh.md b/docs/api/chart.zh.md
new file mode 100644
index 000000000..899abaec3
--- /dev/null
+++ b/docs/api/chart.zh.md
@@ -0,0 +1,545 @@
+---
+title: Chart
+order: 0
+---
+
+## 创建 chart 实例
+
+绘制图表前必须创建一个 `<canvas>` 元素或者一个 canvas 上下文环境。
+
+```javascript
+const chart = new F2.Chart({
+  id: 'c1',
+  width: 500,
+  height: 500,
+  padding: 'auto'
+});
+```
+
+## 参数
+
+### id
+
+- 参数类型：String
+- 描述：指定对应 canvas 的 id
+- 默认值：null
+
+### el
+
+- 参数类型：HTMLElement
+- 描述：如果未指定 id 时可以直接传入 canvas 对象
+- 默认值：null
+
+
+```javascript
+const chart = new F2.Chart({
+  el: document.getElementById('c1')
+});
+```
+
+### context
+
+- 参数类型：CanvasRenderingContext2D
+- 描述：canvas 的上下文，F2 3.0.1 版本开始支持。
+- 默认值：null
+
+```javascript
+const chart = new F2.Chart({
+  context: document.getElementById('c1').getContext('2d')
+});
+```
+
+**说明：`id`、`el`、`context` 这三个属性必须设置一个。**
+
+### width
+
+- 参数类型：Number
+- 描述：图表的宽度，如果 `<canvas>` 元素上设置了宽度，可以不传入
+- 默认值：null
+
+### height
+
+- 参数类型：Number
+- 描述：图表的高度，如果 `<canvas>` 元素上设置了高度，可以不传入
+- 默认值：null
+
+```javascript
+// 默认使用 canvas 元素的宽高
+const chart = new F2.Chart({
+  id: 'c1'
+});
+
+const chart = new F2.Chart({
+  id: 'c1',
+  width: 500,
+  height: 300
+});
+```
+
+### padding
+
+- 参数类型：Number/Array/String
+- 描述：图表绘图区域和画布边框的间距，用于显示坐标轴文本、图例
+- 默认值：'auto'，自动计算
+
+
+```javascript
+const chart = new F2.Chart({
+  id: 'c1',
+  padding: 'auto' // 默认值，自动计算 padding
+});
+
+const chart = new F2.Chart({
+  id: 'c1',
+  padding: [ 0, 10, 40, 100 ] // 分别设置上、右、下、左边距
+});
+
+const chart = new F2.Chart({
+  id: 'c1',
+  padding: 40 // 单个值
+});
+
+const chart = new F2.Chart({
+  id: 'c1',
+  padding: [ 40, 10, 'auto', 'auto' ]  // 指定几个方向自动计算 padding
+});
+```
+
+> 说明：padding 的使用方法同 CSS 盒模型中的 padding。
+
+
+### appendPadding
+
+- 参数类型：Number/Array
+- 描述：图表画布区域四边的预留边距，即我们会在 padding 的基础上，为四边再加上 appendPadding 的数值，默认为 15。
+- 默认值：15
+
+
+下图中红色区域为 `appendPadding`，黄色区域为 `padding`。![](https://gw.alipayobjects.com/zos/rmsportal/oFTYeMwQDMICIWMRCAmt.png#width=500)
+
+
+### pixelRatio
+
+- 参数类型：Number
+- 描述：屏幕画布的像素比
+- 默认值：1
+
+
+屏幕画布的像素比，由于 canvas 在高清屏上显示时会模糊，所以需要设置 `pixelRatio`，一般情况下这个值可以设置成 `window.devicePixelRatio`。 这个值之所以没有默认使用 `window.devicePixelRatio` 的原因在于不同场景下的高清方案不同，不同平台上的实现也不一致，所以需要用户自己指定。
+
+```javascript
+// 全局设置，所有的图表生效
+F2.Global.pixelRatio = window.devicePixelRatio;
+// 只为某个 chart 实例单独设置
+const chart = new F2.Chart({
+  id: 'c1',
+  pixelRatio: window.devicePixelRatio
+});
+```
+
+### plugins
+
+- 参数类型：Object/Array
+- 描述：为 chart 实例注册插件
+- 默认值：null
+
+
+更多关于插件的使用，详见[Plugin](https://www.yuque.com/antv/f2/api-plugin)。
+
+### animate
+
+- 参数类型：Boolean
+- 描述：是否关闭 chart 的动画
+- 默认值：null
+
+
+### syncY
+
+- 参数类型: Boolean
+- 描述：用于多 Y 轴的情况下，统一 Y 轴的数值范围。
+- 默认值：false
+
+
+## 方法
+
+### get
+
+- 描述：获取属性
+- 返回：返回对应的属性值
+
+该方法用于获取 chart 内部的属性，如 `chart.get('width')`，包含的属性如下：
+
+| **属性名** | **解释** |
+| --- | --- |
+| id | 对应 canvas 的 id |
+| padding | 当前的图表绘图区域和画布边框的间距 |
+| data | 原始数据 |
+| width | 图表宽度 |
+| height | 图表高度 |
+| pixelRatio | 图表的屏幕像素比 |
+| el | 对应 canvas 的 dom 对象 |
+| canvas | 对应的 canvas 对象（G.Canvas） |
+| geoms | chart render 之后可获取，返回所有的 geoms 对象 |
+
+
+### source
+
+- 描述：装载数据
+- 返回：当前 chart 实例
+
+#### chart.source(data)
+
+- `data`：Array，可视化数据
+
+#### chart.source(data, colDefs)
+
+- `data`：Array，可视化数据
+- `colDefs`：Object，可选，列定义配置（各个字段的度量配置）
+
+
+```javascript
+chart.source(data, {
+  a: {
+    min: 0,
+    max: 100
+  }
+});
+```
+
+图表数据的列定义用于对数据字段进行定义，如数据的类型，显示别名，数值的格式化等，不同的数字类型的配置项不同，支持的数据类型有：
+
+- `linear`: 数值类型
+- `cat`: 分类类型
+- `timeCat`：时间类型
+
+
+F2 会自动检测数据类型，用户也可以根据自身需求更改一些属性或者数据的类型，具体支持的配置属性详见 [Scale](https://www.yuque.com/antv/f2/api-scale) API。
+
+### scale
+
+- 描述：为数据字段进行列定义
+- 返回：当前 chart 实例
+
+
+!注意: 如数据属性 field 在 `chart.source()` 和 `chart.scale()` 中均有定义，那么后声明的会覆盖之前声明的配置。
+
+#### chart.scale('field', colDef)
+
+为指定的数据字段进行列定义。
+
+- `field`：String，设置列定义的数据字段名。
+- `colDef`：Object，度量配置，详见 [Scale](https://www.yuque.com/antv/f2/api-scale) API。
+
+
+示例：
+
+```javascript
+const data = [
+  { x: 0, y: 1 },
+  { x: 1, y: 2 },
+  { x: 2, y: 3 }
+];
+
+// 为 x 字段设置列定义
+chart.scale('x', {
+  type: 'cat', // 声明 type 字段为分类类型
+  values: [ 'A', 'B', 'C' ] // 重新显示的值
+  alias: '类型' // 设置属性的别名
+});
+```
+
+#### chart.scale(colDef)
+
+为一个或者多个数据字段进行列定义配置。
+
+- `colDef`：Object，度量配置，详见 [Scale](https://www.yuque.com/antv/f2/api-scale) API。
+
+
+示例：
+
+```javascript
+const data = [
+  { x: 0, y: 1 },
+  { x: 1, y: 2 },
+  { x: 2, y: 3 }
+];
+
+// 为多个字段设置列定义
+chart.scale({
+  x: {
+    type: 'cat', // 声明 type 字段为分类类型
+    values: [ 'A', 'B', 'C' ] // 重新显示的值
+    alias: '类型' // 设置属性的别名
+  },
+  y: {
+    type: 'cat'
+  }
+});
+```
+
+### coord
+
+`chart.coord()`
+
+- 描述：配置坐标系
+
+- 返回：当前 chart 实例
+
+
+详见 [Coordinate](https://www.yuque.com/antv/f2/api-coordinate)。
+
+### axis
+
+`chart.axis()`
+
+- 描述：配置坐标轴
+- 返回：当前 chart 实例
+
+
+详见 [Axis](https://www.yuque.com/antv/f2/api-axis)。
+
+### legend
+
+`chart.legend()`
+
+- 描述：配置图例
+- 返回：当前 chart 实例
+
+
+详见 [Legend](https://www.yuque.com/antv/f2/api-legend)。
+
+### tooltip
+
+`chart.tooltip()`
+
+- 描述：配置提示信息
+- 返回：当前 chart 实例
+
+
+详见 [Tooltip](https://www.yuque.com/antv/f2/tooltip)。
+
+### guide
+
+`chart.guide()`
+
+- 描述：配置辅助元素
+- 返回：当前 guideController 实例
+
+
+详见 [Guide](https://www.yuque.com/antv/f2/api-guide)。
+
+### animate
+
+`chart.animate()`
+
+- 描述：配置图表的动画
+- 返回：当前 chart 实例
+
+
+详见 [Animation](https://www.yuque.com/antv/f2/api-animate)。
+
+### 创建 Geometry 对象
+
+- `chart.point()`：创建 point（点）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.line()`：创建 line（线）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.area()`：创建 area（区域）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.path()`：创建 path（路径）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.interval()`：创建 interval（柱）的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.polygon()`：创建 polygon（多边形）的几何标记对象并返回该对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+- `chart.schema()`：创建 schema 的几何标记对象并返回该对象，具体的方法详见 [Geometry](https://www.yuque.com/antv/f2/api-geometry)
+
+
+注意：以上方法返回的是几何标记实例，不是 chart 实例。
+
+### render
+
+`chart.render()`
+
+- 描述：渲染图表，在最后调用
+
+- 返回： 当前 chart 实例
+
+
+### clear
+
+`chart.clear()`
+
+- 描述：清除图表内容
+
+- 返回：当前 chart 实例
+
+
+F2 重新绘制时不需要 destroy，而仅需要 `chart.clear()` 然后重新声明语法，如下示例：
+
+```javascript
+chart.clear(); // 清除
+chart.source(data);
+chart.line().position('a*b');
+chart.render();
+```
+
+### repaint
+
+`chart.repaint()`
+
+- 描述：重新绘制图表
+- 返回：当前 chart 实例
+
+
+当修改了 guide、geometry 的配置项时可以重新绘制图表。
+
+### changeData
+
+`chart.changeData(data)`
+
+- 参数
+  - `data`: Array，数据源
+- 描述：改变数据，同时图表刷新
+- 返回：当前 chart 实例
+
+
+### changeSize
+
+`chart.changeSize(width, height)`
+
+- 参数
+
+  - `width`: Number/null, 如果为 null，表示宽度不变
+
+  - `height`: Number/null, 如果为 null，表示高度不变
+
+- 描述：改变数据，同时图表刷新
+
+- 返回：当前 chart 实例
+
+
+`chart.changeSize(300)` 只改变宽度；<br />`chart.changeSize(300, 500)` 宽度高度同时改变；<br />`chart.changeSize(, 300)` 只改变高度。
+
+### destroy
+
+`chart.destroy()`
+
+- 描述：销毁图表，`<canvas>` dom 元素不会销毁
+
+
+### getPosition
+
+`chart.getPosition(record)`
+
+- 参数
+
+  - `record`: Object 类型，原始数据对象
+
+- 描述：获取原始数据对应在画布上的坐标
+
+- 返回：Object 类型，record 对应的画布坐标，格式为 `{ x: , y: }`
+
+
+```javascript
+const point = chart.getPosition({ time: '2010-02-02', value: 20 });
+```
+
+### getRecord
+
+`chart.getRecord(point)`
+
+- 参数
+  - `point`: Object 类型，画布坐标，格式为 `{x: ,y: }`
+- 描述：根据画布上的坐标获取对应的原始数据
+- 返回：Object 类型，point 对应的原始数据
+
+
+```javascript
+const obj = chart.getRecord({ x: 100, y: 100 });
+```
+
+### getSnapRecords
+
+`chart.getSnapRecords(point)`
+
+- 参数
+  - `point`: Object 类型，画布坐标，格式为 `{x: ,y: }`
+- 描述：根据画布上的坐标获取附近的数据集
+- 返回：Array 类型，返回数据集，该数据集中的每一项记录包含映射后的数据以及对应的原始数据集，结构如下
+
+
+```javascript
+[
+  {
+    _origin: { year: '1959 年', sales: 38 }, // 该 shape 对应的原始数据
+    points: [
+      { x: 0.65625, y: 0 },
+      { x: 0.65625, y: 0.2375 },
+      { x: 0.71875, y: 0.2375 },
+      { x: 0.71875, y: 0 }
+    ], // 组成该 shape 的关键顶点，归一化数据
+    _originY: 38, // Y 轴对应的原始数据
+    x: 260.53499698638916, // 该 shape 的 x 轴画布坐标
+    y: 165.34375, // 该 shape 的 y 轴画布坐标
+    index: 5 // shape 的索引
+  },
+  ...
+  {}
+]
+```
+
+```javascript
+const obj = chart.getSnapRecords({x: 100, y: 100});
+```
+
+### getLegendItems
+
+`chart.getLegendItems()`
+
+- 描述：获取图例的 items，用于图例相关的操作
+- 返回：Array 类型
+
+
+### getXScale
+
+`chart.getXScale()`
+
+- 描述：获取图表 x 轴对应的度量
+
+- 返回：Scale 类型，x 轴对应的度量对象
+
+
+### getYScales
+
+`chart.getYScales()`
+
+- 描述：获取图表 Y 轴对应的度量，有可能会有多个 Y 轴
+
+- 返回：Array，y 轴对应的度量对象的数组
+
+
+### showTooltip
+
+`chart.showTooltip(point)`
+
+- 参数
+
+  - `point`: Object 类型，画布坐标，格式为 `{x: ,y: }`
+
+- 描述：在该点显示 tooltip
+- 返回：当前 chart 实例
+
+
+### hideTooltip
+
+`chart.hideTooltip()`
+
+- 描述：隐藏当前 tooltip
+
+- 返回：当前 chart 实例
+
+
+## 事件说明
+
+F2 没有提供事件机制，用户可以直接通过监听 `canvas` DOM 上的事件进行自定义交互行为。
diff --git a/docs/api/g.zh.md b/docs/api/g.zh.md
new file mode 100644
index 000000000..5e555f549
--- /dev/null
+++ b/docs/api/g.zh.md
@@ -0,0 +1,135 @@
+---
+title: G
+order: 1
+---
+
+`G` 作为 F2 图表的渲染引擎，具备以下特点：
+
+- 层次化结构
+
+- 支持容器、各种图形的创建、修改和销毁
+
+- 动画
+
+- 矩阵变换
+
+
+G 采用层次化结构设计，结构如下：![](https://gw.alipayobjects.com/zos/rmsportal/nreSRkPdaGHPhWXTZdQr.png#width=350)
+
+其中：
+
+- Canvas 画布的入口，包含所有 Group、Shape 对象
+
+- Group 容器，可包含 Group 和 Shape 对象
+
+- Shape 为 G 提供的具体的图形
+
+
+## 如何引入 G
+
+```javascript
+const F2 = require('@antv/f2');
+const { G } = F2;
+```
+
+### 类
+
+- [Canvas](#_Canvas)
+
+- [Group](#_Group)
+
+- [Shape](#_Shape)
+
+  - [Shape.Line](#_Line-%E7%BA%BF) 线
+
+  - [Shape.Arc](#_Arc-%E5%9C%86%E5%BC%A7) 圆弧
+
+  - [Shape.Circle](#_Circle-%E5%9C%86) 圆
+
+  - [Shape.Polygon](#_Polygon-%E5%A4%9A%E8%BE%B9%E5%BD%A2) 多边形
+
+  - [Shape.Polyline](#_Polyline-%E5%A4%9A%E7%82%B9%E7%BA%BF%E6%AE%B5) 多点线段
+
+  - [Shape.Rect](#_Rect-%E7%9F%A9%E5%BD%A2) 矩形
+
+  - [Shape.Sector](#_Sector-%E6%89%87%E5%BD%A2) 扇形
+
+  - [Shape.Text](#_Text-%E6%96%87%E6%9C%AC) 文本
+
+  - [Shape.Custom](#_Custom-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E5%BD%A2) 自定义图形
+
+
+### 命名空间
+
+- [Matrix](#_Matrix)
+
+- [Vector2](#_Vector2)
+
+
+**示例：**
+
+![](https://cdn.nlark.com/yuque/0/2018/png/98090/1539850559091-2336f0a9-be77-4bd2-8bce-e6db22cc60d1.png#width=200)
+
+```javascript
+const { Canvas } = F2.G; // 引入 Canvas
+const canvas = new Canvas({
+  el: 'canvas',
+  width: 200,
+  height: 100
+}); // 创建 canvas 实例
+const container = canvas.addGroup({
+  zIndex: 2
+}); // canvas 添加一个 group
+const itemGroup = container.addGroup({
+  zIndex: 1
+}); // container 添加一个 group
+itemGroup.addShape('circle', {
+  attrs: {
+    x: 5,
+    y: 0,
+    r: 5,
+    fill: 'red'
+  }
+}); // itemGroup 中添加一个圆
+itemGroup.addShape('text', {
+  attrs: {
+    x: 17,
+    y: 0,
+    textAlign: 'start',
+    textBaseline: 'middle',
+    fontSize: 12,
+    fill: 'red',
+    text: '分类一'
+  }
+}); // itemGroup 中添加一个文本
+const bbox = itemGroup.getBBox(); // 获取 itemGroup 的包围盒
+container.addShape('rect', {
+  zIndex: 0,
+  attrs: {
+    x: bbox.minX - 5,
+    y: bbox.minY - 5,
+    width: bbox.width + 10,
+    height: bbox.height + 10,
+    fill: 'rgba(0, 0, 0, 0.09)',
+    radius: 4
+  }
+}); // container 中添加一个矩形
+container.sort(); // container 容器内元素排序
+container.moveTo(30, 50); // 将 container 移至 (30, 50)
+
+canvas.addShape('rect', {
+  zIndex: 0,
+  attrs: {
+    x: 0,
+    y: 0,
+    width: 200,
+    height: 100,
+    fill: 'rgba(0, 0, 0, 0.09)',
+    radius: 4
+  }
+}); // canvas 中添加一个矩形
+
+canvas.sort(); // canvas 容器内的元素排序
+canvas.draw(); // 绘制
+```
+
diff --git a/docs/api/global.zh.md b/docs/api/global.zh.md
new file mode 100644
index 000000000..cd48e1406
--- /dev/null
+++ b/docs/api/global.zh.md
@@ -0,0 +1,71 @@
+---
+title: Global
+order: 3
+---
+
+Global 是 F2 中的全局配置项，全局配置项包含了以下内容：
+
+- 图表本身的一些默认属性，如边框、屏幕像素比、默认字体等
+
+- 数据图形映射相关的属性，例如默认的颜色、默认的形状、默认的大小，柱状图的默认宽度
+
+- 坐标轴、辅助文本的默认样式
+
+
+可以通过 `console.log(F2.Global)` 来查看所有属性的默认值。
+
+| 属性名 | 类型 | 描述 |
+| --- | --- | --- |
+| `padding` | Array/Number | 图表绘图区域和画布边框的间距，用于显示坐标轴文本、图例，详见 [padding](https://www.yuque.com/antv/f2/api-chart#92uqpt) |
+| `appendPadding` | Array/Number | 图表画布区域四边的预留边距，即我们会在 padding 的基础上，为四边再加上 appendPadding 的数值，默认为 15，详见 [appendPadding](https://www.yuque.com/antv/f2/api-chart#u5skik) |
+| `axis` | Object | 各个坐标轴的默认样式配置 |
+| `colors` | Array | 默认图表色系 |
+| `defaultColor` | String | 默认主色值 |
+| `fontFamily` | String | 默认字体 |
+| `guide` | Object | 各个 Guide 组件的默认样式配置 |
+| `legend` | Object | 各种类型的图例的默认样式配置 |
+| `lineDash` | Array | 默认虚线配置 |
+| `pixelRatio` | Number | 默认的像素比 |
+| `shape` | Object | 默认各种类型 shape 的样式配置 |
+| `sizes` | Array | 默认的大小范围 |
+| `tooltip` | Object | 默认 Tooltip 的样式配置 |
+| `version` | String | 当前 F2 的版本号 |
+| `widthRatio` | Object | 不同 shape 的宽度比配置 |
+
+
+以下是 `G2.Global.widthRatio` 属性包含的属性配置说明：
+
+```javascript
+G2.Global.widthRatio.column: 1 / 2, // 一般的柱状图宽度占比
+G2.Global.widthRatio.rose: 0.999999, // 玫瑰图的宽度占比
+G2.Global.widthRatio.multiplePie: 3 / 4, // 多层饼图的宽度占比
+G2.Global.widthRatio.dodgeMargin: 0 // 分组柱状图的间距
+```
+
+## 方法
+
+### setTheme(config)
+
+用户自定义的主题配置。
+
+**参数：**
+
+| **属性名** | **类型** | **描述** |
+| --- | --- | --- |
+| `config` | Object | 图表样式配置 |
+
+
+示例：
+
+```javascript
+F2.Global.setTheme({
+  colors: [ '#F04864', '#D66BCA', '#8543E0', '#8E77ED', '#3436C7', '#737EE6', '#223273', '#7EA2E6' ],
+  pixelRatio: 2,
+  guide: {
+    line: {
+      stroke: '#F04864',
+      lineWidth: 2
+    }
+  }
+});
+```
diff --git a/docs/api/shape.zh.md b/docs/api/shape.zh.md
new file mode 100644
index 000000000..ce6d0c0d9
--- /dev/null
+++ b/docs/api/shape.zh.md
@@ -0,0 +1,196 @@
+---
+title: 自定义 Shape
+order: 2
+---
+
+## 获取方式
+```javascript
+const Shape = F2.Shape;
+```
+
+通过在 Shape 上注册图形，实现自定义 Shape 的功能。
+
+## 创建方式
+
+自定义 Shape 的入口如下：
+
+```javascript
+const Shape = F2.Shape;
+const shapeObj = Shape.registerShape('geomType', 'shapeName', {
+  getPoints(pointInfo) {
+    // 获取每种 shape 绘制的关键点
+  },
+  draw(cfg, container) {
+    // 自定义最终绘制的逻辑
+
+    return shape; // 返回最后绘制的 shape
+  }
+});
+```
+
+下面主要对其中需要覆写的方法做下详细说明：
+
+## 方法
+
+### getPoints
+
+`getPoints` 方法用于计算绘制每种 shape 的关键点，在 F2 中每种几何形状都是由特定的几个关键点通过线连接而成。
+
+`getPoints` 方法中传入的参数 pointInfo 数据结构如下，所有的数值都是**归一化后的结果**（即 0 至 1 范围内的数据）：
+
+```javascript
+{
+  size: 0.1, // 形状的尺寸，不同的 shape 该含义不同，0 - 1 范围的数据
+  x: 0.2, // 该点归一化后的 x 坐标
+  y: 0.13, // 该点归一化后的 y 坐标
+  y0: 0.1 // 整个数据集 y 轴对应数据的最小值，也是归一化后的数据，注意如果 y 对应的源数据是数组则 y 也将是个数组
+}
+```
+
+下表列出了 F2 各个 geom 几何形状的关键点形成机制：
+
+| **geom 类型** | **解释** |
+| --- | --- |
+| point | 点的绘制很简单，只要获取它的坐标以及大小即可，其中的 `size` 属性代表的是点的半径。<br />![](https://zos.alipayobjects.com/skylark/940c75cf-8400-415a-9e2d-040ce46e6a03/attach/3378/269e0e2c77a555a5/image.png#width=) |
+| line | 线其实是由无数个点组成，在 F2 中我们将参与绘制的各个数据转换成坐标上的点然后通过线将逐个点连接而成形成线图，其中的 `size` 属性代表的是线的粗细。<br />![](https://zos.alipayobjects.com/skylark/f9b84b83-1cc8-4b81-9319-f643ef0e280a/attach/3378/d49e02be2f48a136/image.png#width=) |
+| area | area 面其实是在 line 线的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充。<br />![](https://zos.alipayobjects.com/skylark/dbcd60f3-7662-4ebd-8e0e-85d7d754d0c7/attach/3378/f67277978d5d8e3e/image.png#width=) |
+| interval | interval 默认的图形形状是矩形，而矩形实际是由四个点组成的，在 F2 中我们根据 pointInfo 中的 x、y、size 以及 y0 这四个值来计算出这四个点，然后顺时针连接而成。<br />![](https://zos.alipayobjects.com/skylark/f36a2e27-13e8-4d55-8c93-b698e15bcc1f/attach/3378/94a6515e2eb60265/image.png#width=) |
+| polygon | polygon 多边形其实也是由多个点连接而成，在 pointInfo 中 x 和 y 都是数组结构。<br />![](https://zos.alipayobjects.com/skylark/b4f6981c-ccd3-4237-97bd-dd88950758ea/attach/3378/ed2b5c05a1ff3581/image.png#width=) |
+| schema | schema 作为一种自定义的几何图形，在 F2 中默认提供了 candle（烛形图，又称股票图、k 线图） shape，用于绘制股票图，注意矩形部分四个点的连接顺序都是顺时针，并且起始点均为左下角，这样就可以无缝转换至极坐标。<br />![](https://zos.alipayobjects.com/skylark/340c229d-be30-4f98-8a2a-8d55c8422645/attach/3378/1bfed6f3f5f90e13/image.png#width=)![](https://zos.alipayobjects.com/skylark/8afa13da-95d1-4282-a08b-f1c421b0d972/attach/3378/d82c45d3a526bd80/image.png#width=) |
+
+
+### draw
+
+`getPoints` 用于计算绘制 shape 的关键点，那么 `draw` 方法就是用来定义如何连接这些关键点的。
+
+注意：该方法需要返回最后绘制的 shape。
+
+#### 参数
+
+- `cfg`: Object
+
+
+该参数包含经过图形映射后的所有数据以及该数据对应的原始数据，结构如下图所示：![](https://gw.alipayobjects.com/zos/rmsportal/GIutZIjQWLrTeLxgQNMJ.png#width=300)
+
+- 原始数据存储于 `cfg.origin._origin` 中；
+
+- 通过 getPoints 计算出的图形关键点都储存于 points 中；
+
+- cfg 对象中的 `color`、`size`、`shape` 都是通过映射之后的图形属性数据，可以直接使用。
+
+
+- `container`: F2.G.Group
+
+
+图形容器，需要将自定义的 shape 加入该容器中才能最终渲染出来。
+
+**另外我们还提供了一些工具类方法，帮助用户快速将归一化后的数据转换为画布上的坐标**，使用的时候直接在上述两个方法内通过如下方式调用即可：
+
+```javascript
+Shape.registerShape('interval', 'rect', {
+  getPoints(pointInfo) {
+    // ...
+  },
+  draw(cfg, container) {
+    // ...
+    path = this.parsePath(path);
+    // ...
+    //
+    return shape; // 返回最后绘制的 shape
+  }
+});
+```
+
+### parsePoint
+
+方法名： `shapeObj.parsePoint(point)`
+
+说明：将 0 - 1 范围内的点转化为画布上的实际坐标。
+
+#### 参数
+
+- `point`: object
+
+
+结构如下：
+
+```javascript
+{
+  x: 0.3,
+  y: 0.34
+}
+```
+
+### parsePoints
+
+方法名：`shapeObj.parsePoints(points)`
+
+说明：将一组 0 - 1 范围内的点转化为画布上的实际坐标。
+
+#### 参数
+
+- `point`: Array
+
+
+结构如下：
+
+```javascript
+[
+  { x: 0.3, y: 0.34 },
+  { x: 0.3, y: 0.34 }
+]
+```
+
+## 代码示例
+
+![](https://cdn.nlark.com/yuque/0/2018/png/98090/1539851726315-3b3546cb-a750-4fed-a2c4-84e014d42765.png#width=500)
+
+```javascript
+const Shape = F2.Shape;
+Shape.registerShape('interval', 'triangle', {
+  getPoints: function(cfg) {
+    const x = cfg.x;
+    const y = cfg.y;
+    const y0 = cfg.y0;
+    const width = cfg.size;
+    return [
+      { x: x - width / 2, y: y0 },
+      { x: x, y: y },
+      { x: x + width / 2, y: y0 }
+    ]
+  },
+  draw: function(cfg, group) {
+    const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
+    const polygon = group.addShape('polygon', {
+      attrs: {
+        points: [
+          { x:points[0].x, y:points[0].y },
+          { x:points[1].x, y:points[1].y },
+          { x:points[2].x, y:points[2].y }
+        ],
+        fill: cfg.color
+      }
+    });
+    return polygon; // 将自定义Shape返回
+  }
+});
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 }
+];
+
+const chart = new F2.Chart({
+  id: 'mountNode',
+  width: 500,
+  height: 320,
+  pixelRatio: window.devicePixelRatio
+});
+
+chart.source(data);
+chart.interval().position('genre*sold').color('genre').shape('triangle');
+chart.render();
+```
diff --git a/docs/api/util.zh.md b/docs/api/util.zh.md
new file mode 100644
index 000000000..fdcede02d
--- /dev/null
+++ b/docs/api/util.zh.md
@@ -0,0 +1,214 @@
+---
+title: Util
+order: 4
+---
+
+# Util
+
+获取方式：
+
+```javascript
+const Util = F2.Util;
+```
+
+## 方法
+
+### upperFirst
+
+`upperFirst(s)`
+
+- 描述：将字符串的第一个字母转换成大写
+
+- 参数：String 类型
+
+- 返回：返回首字母大写后的字符串
+
+
+### lowerFirst
+
+`lowerFirst(s)`
+
+- 描述：将字符串的第一个字母转换成小写
+
+- 参数：String 类型
+
+- 返回：返回首字母小写后的字符串
+
+
+### isString
+
+`isString(value)`
+
+- 描述：判断是否是字符串
+
+- 参数：任意类型的值
+
+- 返回：返回判断结果
+
+
+### isNumber
+
+`isNumber(value)`
+
+- 描述：判断是否数字
+
+- 参数：任意类型的值
+
+- 返回：返回判断结果
+
+
+### isBoolean
+
+`isBoolean(value)`
+
+- 描述：判断是否是布尔类型
+
+- 参数：任意类型的值
+
+- 返回：返回判断结果
+
+
+### isFunction
+
+`isFunction(fn)`
+
+- 描述：判断是否为函数
+
+- 参数：任意类型的值
+
+- 返回：返回判断结果
+
+
+### isArray
+
+`isArray(value)`
+
+- 描述：判断是否为数组
+
+- 参数：任意类型的值
+
+- 返回：返回判断结果
+
+
+### isDate
+
+`isDate(value)`
+
+- 描述：判断是否为日期类型
+
+- 参数：任意类型的值
+
+- 返回：返回判断结果
+
+
+### isNil
+
+`isNil(o)`
+
+- 描述：判断值是否为空（undefined 或者 null）
+
+- 参数：任意类型的值
+
+- 返回：返回判断结果
+
+
+### isObject
+
+`isObject(value)`
+
+- 描述：判断是否为对象类型
+
+- 参数：任意类型的值
+
+- 返回：返回判断结果
+
+
+### deepMix
+
+`deepMix(target, source1, source2 source3)`
+
+- 描述：深拷贝
+
+- 参数：target 拷贝的目标，source 拷贝对象，最多支持 3 个对象
+
+- 返回：拷贝结果
+
+
+### mix
+
+`mix(target, source1, source2 source3)`
+
+- 描述：浅拷贝
+
+- 参数：target 拷贝的目标，source 拷贝对象，最多支持 3 个对象
+
+- 返回：拷贝结果
+
+
+### indexOf
+
+`indexOf(arr, element)`
+
+- 描述：查找元素在数组中的索引
+
+- 参数：arr：查找的数组，element: 查找的元素
+
+- 返回：返回索引值
+
+
+### each
+
+`each(elements, func)`
+
+- 描述：遍历数组或者对象
+
+- 参数：elements：需要遍历的数组或者对象，func：回调函数
+
+- 返回：
+
+
+```javascript
+Util.each([ 1, 2, 3 ], (val, index) => {
+  console.log('每项的值', val);
+  console.log('索引', index);
+});
+
+Util.each([ 1, 2, 3, 4, 5 ], (val, index) => {
+ if (val === 4) {
+   return false; // 跳出循环
+ }
+});
+```
+
+### getPixelRatio
+
+`getPixelRatio()`
+
+- 描述：获取当前设备的像素比
+
+- 参数：无
+
+- 返回：Number, 返回当前设备像素比
+
+
+### getRelativePosition
+
+`getRelativePosition(point, canvas)`
+
+- 描述：将当前鼠标的坐标转换为画布的相对坐标
+
+- 参数：point: 当前鼠标坐标，canvas: 当前图表的 canvas 对象，chart.get('canvas') 获取
+
+- 返回：画布坐标，Object 类型
+
+
+```javascript
+const chart = new Chart({});
+
+const mousePoint = {
+  x: 10,
+  y:39
+};
+
+const canvasPoint = F2.Util.getRelativePosition(mousePoint, chart.get('canvas'));
+```
diff --git a/docs/style.css b/docs/style.css
deleted file mode 100644
index acdd3e5e9..000000000
--- a/docs/style.css
+++ /dev/null
@@ -1,15 +0,0 @@
-a.anchorjs-link {
-    color: rgba(65, 131, 196, 0.1);
-    font-weight: 400;
-    text-decoration: none;
-    transition: color 100ms ease-out;
-    z-index: 999;
-}
-
-a.anchorjs-link:hover {
-    color: rgba(65, 131, 196, 1);
-}
-
-sup {
-    font-size: 0.75em !important;
-}
diff --git a/docs/tutorial.zh.md b/docs/tutorial.zh.md
new file mode 100644
index 000000000..183f719ea
--- /dev/null
+++ b/docs/tutorial.zh.md
@@ -0,0 +1,5 @@
+---
+title: 使用教程
+order: 0
+---
+
diff --git a/examples/basic/API.en.md b/examples/basic/API.en.md
new file mode 100644
index 000000000..3435c9190
--- /dev/null
+++ b/examples/basic/API.en.md
@@ -0,0 +1,13 @@
+---
+title: API
+---
+
+API.
+
+- Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
+- Server-side Rendering
+- [Electron](http://electron.atom.io/)
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE9, IE10, IE11, Edge                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                       |
diff --git a/examples/basic/API.zh.md b/examples/basic/API.zh.md
new file mode 100644
index 000000000..aea43bd28
--- /dev/null
+++ b/examples/basic/API.zh.md
@@ -0,0 +1,13 @@
+---
+title: API
+---
+
+API 信息。
+
+- Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
+- Server-side Rendering
+- [Electron](http://electron.atom.io/)
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE9, IE10, IE11, Edge                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                       |
diff --git a/examples/basic/demo/basic.js b/examples/basic/demo/basic.js
new file mode 100644
index 000000000..255d8cfac
--- /dev/null
+++ b/examples/basic/demo/basic.js
@@ -0,0 +1,21 @@
+import F2 from '@antv/f2';
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 1150 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 }
+];
+
+const chart = new F2.Chart({
+  container: document.getElementById('container'),
+  width: 500,
+  height: 500
+});
+
+chart.source(data);
+chart
+  .interval()
+  .position('genre*sold');
+chart.render();
diff --git a/examples/basic/demo/meta.json b/examples/basic/demo/meta.json
new file mode 100644
index 000000000..34d89049b
--- /dev/null
+++ b/examples/basic/demo/meta.json
@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "basic.js",
+      "title": "演示一",
+      "screenshot": "https://gw.alipayobjects.com/os/s/prod/antv/assets/dist/3.0.0/g2/3.x/line/basic-b9ffb.png"
+    }
+  ]
+}
diff --git a/examples/basic/design.en.md b/examples/basic/design.en.md
new file mode 100644
index 000000000..6d7c24758
--- /dev/null
+++ b/examples/basic/design.en.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/basic/design.zh.md b/examples/basic/design.zh.md
new file mode 100644
index 000000000..6d7c24758
--- /dev/null
+++ b/examples/basic/design.zh.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/basic/index.en.md b/examples/basic/index.en.md
new file mode 100644
index 000000000..7f2fa3a04
--- /dev/null
+++ b/examples/basic/index.en.md
@@ -0,0 +1,9 @@
+---
+title: Component
+order: 0
+icon: column
+redirect_from:
+  - /en/examples
+---
+
+Description about this component.
diff --git a/examples/basic/index.zh.md b/examples/basic/index.zh.md
new file mode 100644
index 000000000..1e56199be
--- /dev/null
+++ b/examples/basic/index.zh.md
@@ -0,0 +1,13 @@
+---
+title: 图表演示
+order: 0
+icon: column
+redirect_from:
+  - /zh/examples
+---
+
+图表的基本描述。
+
+## 何时使用
+
+何时使用何时使用何时使用何时使用何时使用何时使用何时使用何时使用何时使用。
diff --git a/gatsby-browser.js b/gatsby-browser.js
new file mode 100644
index 000000000..74467d558
--- /dev/null
+++ b/gatsby-browser.js
@@ -0,0 +1 @@
+window.f2 = require('./src/index.js');
diff --git a/gatsby-config.js b/gatsby-config.js
new file mode 100644
index 000000000..8e8c87e71
--- /dev/null
+++ b/gatsby-config.js
@@ -0,0 +1,69 @@
+const { repository } = require('./package.json');
+
+module.exports = {
+  plugins: [
+    {
+      resolve: '@antv/gatsby-theme-antv',
+      options: {
+        // eslint-disable-next-line quotes
+        GATrackingId: `UA-148148901-6`,
+        pathPrefix: '/f2'
+      }
+    }
+  ],
+  // Customize your site metadata:
+  siteMetadata: {
+    title: 'F2',
+    description: 'The Grammar of Graphics in JavaScript',
+    githubUrl: repository.url,
+    navs: [
+      {
+        slug: 'docs/tutorial',
+        title: {
+          zh: '使用教程',
+          en: 'tutorial'
+        }
+      },
+      {
+        slug: 'docs/api',
+        title: {
+          zh: 'API 文档',
+          en: 'API'
+        }
+      },
+      {
+        slug: 'examples',
+        title: {
+          zh: '图表演示',
+          en: 'Examples'
+        }
+      }
+    ],
+    docs: [
+      {
+        slug: 'api/chart',
+        title: {
+          zh: 'chart'
+        }
+      }
+    ],
+    examples: [
+      {
+        slug: 'examples/line',
+        icon: 'line', // 图标名可以去 https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html 打开控制台查看图标类名
+        title: {
+          zh: '折线图',
+          en: 'Line Charts'
+        }
+      },
+      {
+        slug: 'examples/pie',
+        icon: 'pie', // 图标名可以去 https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html 打开控制台查看图标类名
+        title: {
+          zh: '饼图',
+          en: 'Pie Charts'
+        }
+      }
+    ]
+  }
+};
diff --git a/package.json b/package.json
index 5df033ef9..57fd94e2a 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "bundler"
   ],
   "devDependencies": {
+    "@antv/gatsby-theme-antv": "^0.9.7",
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
@@ -39,6 +40,7 @@
     "babel-eslint": "~7.2.3",
     "babel-loader": "^8.0.0",
     "babel-plugin-transform-remove-strict-mode": "~0.0.2",
+    "babel-preset-gatsby": "^0.2.20",
     "body-parser": "^1.18.2",
     "chai": "~4.0.1",
     "commander": "~2.9.0",
@@ -50,7 +52,9 @@
     "eslint-config-airbnb": "~15.0.1",
     "eslint-config-egg": "~4.2.0",
     "eslint-plugin-html": "~3.1.1",
+    "gatsby": "^2.17.7",
     "get-port": "~3.1.0",
+    "gh-pages": "^2.1.1",
     "jquery": "^3.3.1",
     "jszip": "^3.1.5",
     "nightmare": "~2.10.0",
@@ -58,12 +62,18 @@
     "open": "~0.0.5",
     "parseurl": "~1.3.1",
     "pre-commit": "~1.2.2",
+    "react-i18next": "^11.0.1",
     "serve-static": "~1.12.4",
     "shelljs": "~0.7.8",
     "uglify-js": "~3.0.15",
     "webpack": "~3.4.1"
   },
   "scripts": {
+    "start": "npm run site:develop",
+    "site:develop": "gatsby develop --open",
+    "site:build": "npm run site:clean && gatsby build --prefix-paths",
+    "site:clean": "gatsby clean",
+    "site:deploy": "npm run site:build && gh-pages -d public",
     "build": "webpack",
     "build-lib": "babel src --out-dir lib",
     "bundler": "electron ./bundler/app.js",
diff --git a/site/locale.json b/site/locale.json
new file mode 100644
index 000000000..855bd3123
--- /dev/null
+++ b/site/locale.json
@@ -0,0 +1,3 @@
+{
+  "首页": "Home Page"
+}
\ No newline at end of file
diff --git a/site/pages/index.en.tsx b/site/pages/index.en.tsx
new file mode 100644
index 000000000..4f2095ca1
--- /dev/null
+++ b/site/pages/index.en.tsx
@@ -0,0 +1,3 @@
+import Index from './index.zh';
+
+export default Index;
diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx
new file mode 100644
index 000000000..c50188331
--- /dev/null
+++ b/site/pages/index.zh.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Skeleton } from 'antd';
+import { useTranslation } from 'react-i18next';
+import SEO from '@antv/gatsby-theme-antv/site/components/Seo';
+
+const IndexPage = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <SEO title= '蚂蚁数据可视化' lang = 'zh' />
+      <div style={ { margin: '0 auto', padding: '0 60px' } }>
+        { t('首页') }
+        <Skeleton />
+        <Skeleton />
+        <Skeleton />
+        <Skeleton />
+      </div>
+    </>
+  );
+};
+
+export default IndexPage;