feat: 添加 website (#1368)

* feat: 添加 website

* feat: 添加 website

* docs: Documentation modify

* fix: Resolve conversation

* docs: ch -> zh

* docs: Remove useless docs

Co-authored-by: liufu.lf <[email protected]>

Author: lxfu1

.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
   }
 }

.umirc.ts

@@ -0,0 +1,70 @@
+---
+title: 简介
+order: 0
+redirect_from:
+  - /en/docs/manual
+---
+
+g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。
+
+## 特性
+
+- 📦 开箱即用、默认好用的高质量统计图表
+
+- 🎨 提炼自企业级产品的视觉语言和设计规范
+
+- 📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
+
+- 🔳 图层化设计方法：在 g2plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性
+
+<img alt="图片加载失败" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*sXqrRrEwFRQAAAAAAAAAAABkARQnAQ" width="800">
+
+## 安装
+
+```bash
+$ npm install @antv/g2plot
+```
+
+## 使用
+
+<img alt="图片加载失败" 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/demos/scatter.md

@@ -0,0 +1,70 @@
+---
+title: 简介
+order: 0
+redirect_from:
+  - /zh/docs/manual
+---
+
+g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。
+
+## 特性
+
+- 📦 开箱即用、默认好用的高质量统计图表
+
+- 🎨 提炼自企业级产品的视觉语言和设计规范
+
+- 📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
+
+- 🔳 图层化设计方法：在 g2plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性
+
+<img alt="图片加载失败" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*sXqrRrEwFRQAAAAAAAAAAABkARQnAQ" width="800">
+
+## 安装
+
+```bash
+$ npm install @antv/g2plot
+```
+
+## 使用
+
+<img alt="图片加载失败" 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/index.md

@@ -0,0 +1,7 @@
+---
+title: 所有图表
+order: -1
+icon: other
+redirect_from:
+  - /en/examples
+---

docs/manual/introduction.en.md

@@ -0,0 +1,7 @@
+---
+title: 所有图表
+order: -1
+icon: other
+redirect_from:
+  - /zh/examples
+---

docs/manual/introduction.zh.md

@@ -0,0 +1,15 @@
+---
+title: API
+---
+
+# 配置属性
+
+## 图表容器
+
+### width
+
+**可选**, _number_
+
+功能描述： 设置图表宽度。
+
+默认配置： `400`