feat: 添加 website

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist/
+test
+build/

.eslintrc

@@ -29,6 +29,8 @@
     "@typescript-eslint/no-inferrable-types": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/type-annotation-spacing": 0,
-    "@typescript-eslint/no-empty-function": 1
+    "@typescript-eslint/no-empty-function": 1,
+    "no-undef": 0,
+    "@typescript-eslint/no-var-requires": 0
   }
 }

docs/manual/contact.en.md

@@ -0,0 +1,14 @@
+---
+title: 联系我们
+order: 7
+---
+
+如果你有任何的问题、建议、反馈或者交流意愿，可以通过如下方式联系我们：
+
+- 官方推荐 [GitHub issues](https://github.com/antvis/G2Plot/issues)
+
+- 邮件：antv@antfin.com
+
+- 语雀专栏：https://www.yuque.com/antv
+
+- 知乎专栏：https://zhuanlan.zhihu.com/aiux-antv

docs/manual/contact.zh.md

@@ -0,0 +1,14 @@
+---
+title: 联系我们
+order: 7
+---
+
+如果你有任何的问题、建议、反馈或者交流意愿，可以通过如下方式联系我们：
+
+- 官方推荐 [GitHub issues](https://github.com/antvis/G2Plot/issues)
+
+- 邮件：antv@antfin.com
+
+- 语雀专栏：https://www.yuque.com/antv
+
+- 知乎专栏：https://zhuanlan.zhihu.com/aiux-antv

docs/manual/getting-started.en.md

@@ -0,0 +1,12 @@
+---
+title: 快速上手
+order: 1
+---
+
+## 安装
+
+### 浏览器引入
+
+### 通过 npm 安装
+
+### 快速使用

docs/manual/getting-started.zh.md

@@ -0,0 +1,12 @@
+---
+title: 快速上手
+order: 1
+---
+
+## 安装
+
+### 浏览器引入
+
+### 通过 npm 安装
+
+### 快速使用

docs/manual/introduction.en.md

@@ -0,0 +1,70 @@
+---
+title: 简介
+order: 0
+redirect_from:
+  - /en/docs/manual
+---
+
+g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。
+
+## 特性
+
+- 📦 开箱即用、默认好用的高质量统计图表
+
+- 🎨 提炼自企业级产品的视觉语言和设计规范
+
+- 📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
+
+- 🔳 图层化设计方法：在 g2plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性
+
+<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*sXqrRrEwFRQAAAAAAAAAAABkARQnAQ" width="800">
+
+## 安装
+
+```bash
+$ npm install @antv/g2plot
+```
+
+## 使用
+
+<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*37siRJftYDIAAAAAAAAAAABkARQnAQ" width="450">
+
+```html
+<div id="c1"></div>
+```
+
+```js
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  { year: '1951 年', sales: 38 },
+  { year: '1952 年', sales: 52 },
+  { year: '1956 年', sales: 61 },
+  { year: '1957 年', sales: 145 },
+  { year: '1958 年', sales: 48 },
+];
+
+const barPlot = new Bar('c1', {
+  data,
+  xField: 'sales',
+  yField: 'year',
+  colorField: 'year',
+});
+
+barPlot.render();
+```
+
+## 开发
+
+```bash
+$ npm install
+
+# run test case
+$ npm run test-live
+
+# build watching file changes and run demos
+$ npm run dev
+
+# run demos
+$ npm run demos
+```

docs/manual/introduction.zh.md

@@ -0,0 +1,70 @@
+---
+title: 简介
+order: 0
+redirect_from:
+  - /zh/docs/manual
+---
+
+g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。
+
+## 特性
+
+- 📦 开箱即用、默认好用的高质量统计图表
+
+- 🎨 提炼自企业级产品的视觉语言和设计规范
+
+- 📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
+
+- 🔳 图层化设计方法：在 g2plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性
+
+<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*sXqrRrEwFRQAAAAAAAAAAABkARQnAQ" width="800">
+
+## 安装
+
+```bash
+$ npm install @antv/g2plot
+```
+
+## 使用
+
+<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*37siRJftYDIAAAAAAAAAAABkARQnAQ" width="450">
+
+```html
+<div id="c1"></div>
+```
+
+```js
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  { year: '1951 年', sales: 38 },
+  { year: '1952 年', sales: 52 },
+  { year: '1956 年', sales: 61 },
+  { year: '1957 年', sales: 145 },
+  { year: '1958 年', sales: 48 },
+];
+
+const barPlot = new Bar('c1', {
+  data,
+  xField: 'sales',
+  yField: 'year',
+  colorField: 'year',
+});
+
+barPlot.render();
+```
+
+## 开发
+
+```bash
+$ npm install
+
+# run test case
+$ npm run test-live
+
+# build watching file changes and run demos
+$ npm run dev
+
+# run demos
+$ npm run demos
+```

docs/manual/plots/scatter.en.md

@@ -0,0 +1,6 @@
+---
+title: Scatter
+order: 1
+---
+
+# 快速上手

docs/manual/plots/scatter.zh.md

@@ -0,0 +1,53 @@
+---
+title: Scatter - 散点图
+order: 1
+---
+
+# 快速上手
+
+```js
+const data = [
+  { year: '1991', value: 3 },
+  { year: '1992', value: 4 },
+  { year: '1993', value: 3.5 },
+  { year: '1994', value: 5 },
+  { year: '1995', value: 4.9 },
+  { year: '1996', value: 6 },
+  { year: '1997', value: 7 },
+  { year: '1998', value: 9 },
+  { year: '1999', value: 13 },
+];
+const scatter = new Scatter('container', {
+  width: 400,
+  height: 300,
+  appendPadding: 10,
+  data,
+  xField: 'year',
+  yField: 'value',
+  yAxis: {
+    nice: true,
+  },
+});
+
+scatter.render();
+```
+
+# 配置属性
+
+## 图表容器
+
+### width
+
+**可选**, _number_
+
+功能描述： 设置图表宽度。
+
+默认配置： `400`
+
+### height
+
+**可选**, _number_
+
+功能描述： 设置图表高度。
+
+默认配置： `400`