docs: update docs

Author: seekhow

.gitignore

@@ -8,6 +8,7 @@
 !.editorconfig
 !.storybook
 !.demoProjectTemplate
+!site/.eslintrc.js
 
 site/public/
 lerna-debug.json

packages/config-common-demo/README.md

@@ -0,0 +1,58 @@
+---
+name: config
+zhName: 通用配置场景
+---
+
+# 通用配置场景
+
+## Props
+
+### width/height
+通过`width/height`这两个属性可以配置图表组件的宽度和高度，不配置时则默认为父组件的宽度/高度。
+注意，这两个属性是直接通过`props`向组件传递的，不需要放在`config`中。
+
+[MDXInstruction:importDemo:WidthHeight](./demo/WidthHeight.tsx)
+
+---
+
+以下所有配置都是`config`中的参数。
+
+## Padding
+可以通过配置`config.padding`来控制图表的内边距。padding的值类似与css里的padding，详细的请看这里[属性-padding](/guides/props#padding)
+
+### 设置Padding大小
+
+[MDXInstruction:importDemo:PaddingBasic](./demo/PaddingBasic.tsx)
+
+## Legend
+可以通过配置`config.legend`来控制图表里的图例，详细的请看这里[配置-图例](/guides/config-legend)
+
+### Legend位置
+
+[MDXInstruction:importDemo:LegendPosition](../console-pie-chart/demo/Legend.tsx)
+
+### Legend在右边
+通过设置Chart的`右Padding`和Legend的`offsetY`属性来控制legend的位置。
+
+Note: `右Padding`是指圆形的右边界到渲染区域的右边界。`offsetY`是指圆形的右边界到legend的左边界。
+
+[MDXInstruction:importDemo:LegendRight](../console-pie-chart/demo/LegendRight.tsx)
+
+### Legend tip
+
+配置`legend`的`tip`属性可开启legend悬浮提示。开启tip配置之后，可进一步配置`tipFormatter`属性来进行格式化tip显示内容（取值优先级：`tipFormatter` => `itemFormatter` => `value`）
+
+Note: `legend`的`tip`属性是通过`dom`的`title`属性来进行简单实现的，只能满足简单场景。
+
+[MDXInstruction:importDemo:LegendTip](../console-pie-chart/demo/LegendTip.tsx)
+
+## Tooltip
+可以通过配置`config.tooltip`来控制图表里的图例，详细的请看这里[配置-提示信息](/guides/config-tooltip)
+
+## 自定义tooltip
+
+[MDXInstruction:importDemo:Tooltip](../console-pie-chart/demo/Tooltip.tsx)
+
+## 复杂Tooltip
+
+[MDXInstruction:importDemo:ComplexTooltip](../console-pie-chart/demo/ComplexTooltip.tsx)

packages/config-common-demo/demo/PaddingBasic.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ConsoleBarChart } from '@alicloud/console-chart';
+
+const data = [
+  {
+    name: '阿里云Nat网关价格/月',
+    data: [
+      ['Small', 306], ['Middle', 586.5], ['Large', 1147.5], ['XLarge.1', 2040]
+    ],
+  },
+];
+
+const config = {
+  padding: [50, 50, 100, 100],
+}
+
+export default () => (
+  <ConsoleBarChart data={data} height={300} config={config} />
+);

packages/config-common-demo/demo/WidthHeight.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ConsoleMinilineChart } from '@alicloud/console-chart';
+
+const data = [
+  {
+    name: 'A产品',
+    data: [['2015', 20], ['2016', 5], ['2017', 15], ['2018', 30], ['2019', 40]],
+  },
+];
+
+export default () => (
+  <ConsoleMinilineChart data={data} height={300} width={200} />
+);

packages/console-sankey-chart/README.md

@@ -5,7 +5,7 @@ zhName: 桑基图
 
 # 桑基图API
 
-桑基图是关系图的一种，常用来表示流入流出的关系。
+桑基图是关系图的一种，常用来表示流入流出的关系。
 
 典型桑基图的特点有：
 

packages/console-tree-graph/README.md

@@ -1,7 +1,3 @@
----
-name: console-tree-graph
-zhName: 基本树图
----
 
 # 树图API
 

site/.eslintrc.js

@@ -75,10 +75,14 @@ module.exports = {
         topNav: [
           { text: "指南", href: "/guides/quick-start" },
           { text: "组件文档", href: "/components/console-bar-chart" },
+          {
+            text: '国内镜像',
+            href: 'http://seekhowqiuhao.gitee.io/alibabacloud-console-chart/components/console-bar-chart',
+          },
           {
             text: 'Github',
             href: 'https://github.com/aliyun/alibabacloud-console-chart',
-          },
+          }
         ],
         // 左侧导航
         // 左侧导航与顶部导航的区别：