docs: 更新文档

ant-design · Jun 7, 2021 · 52bce21 · 52bce21
1 parent 9649e15
commit 52bce21
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 `2021-06-07`
 
 - 🆕 新增全量组件 dist，charts_all。
+- 💄 CDN 使用方式 charts_g6 改名为 graphs
 
 ## 1.1.9
 

diff --git a/docs/guide/start.md b/docs/guide/start.md
@@ -10,21 +10,28 @@ nav:
 
 ## Installation
 
-### npm
+### NPM mode (recommended)
 
 ```bash
 $ npm install @ant-design/charts
 ```
 
-### CDN
+### CDN mode
 
-The NPM is recommended, <b>Due to the different underlying dependencies in CDN mode, in order to reduce the package volume, from version 1.0.5 on, the organization chart, flow chart, fund flow chart and indent tree chart were packaged into charts_g6.min.js, and other charts were packaged into Charts.min.js</b>, it can be imported as needed.
+The NPM is recommended, <b>Due to the different underlying dependencies in CDN mode, in order to reduce the package volume, from version 1.0.5 on, the organization chart, flow chart, fund flow chart and indent tree chart were packaged into graphs.min.js, and other charts were packaged into Charts.min.js</b>, it can be imported as needed.
+
+Graphs contain：
+
+- OrganizationTreeGraph
+- DagreGraph
+- DagreFundFlowGraph
+- IndentedTreeGraph
 
 ```ts
 // Introducing Online Resources
 <script type="text/javascript" src="https://unpkg.com/@ant-design/charts@latest/dist/charts.min.js"></script>
-// G6 related charts
-<script type="text/javascript" src="https://unpkg.com/@ant-design/charts@latest/dist/charts_g6.min.js"></script>
+// Graphs related charts
+<script type="text/javascript" src="https://unpkg.com/@ant-design/charts@latest/dist/graphs.min.js"></script>
 ```
 
 Because the @ant-design/ Charts page externals 'react' and 'react-dom', you need to do the same thing in your project when using this method. By using CDN, introduce 'react' and 'react-dom' before 'Charts.min.js'.
@@ -40,7 +47,7 @@ externals: {
 <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 // According to the need to use
 <script crossorigin src="https://unpkg.com/@ant-design/charts@1.0.5/dist/charts.min.js"></script>
-<script crossorigin src="https://unpkg.com/@ant-design/charts@1.0.5/dist/charts_g6.min.js"></script>
+<script crossorigin src="https://unpkg.com/@ant-design/charts@1.0.5/dist/graphs.min.js"></script>
 ```
 
 Usage:
@@ -49,7 +56,7 @@ Usage:
 // Line chart, other charts are similar
 const { Line } = window.charts;
 // Organization Chart
-const { OrganizationTreeGraph } = window.charts_g6;
+const { OrganizationTreeGraph } = window.graphs;
 ```
 
 ## Usage

diff --git a/docs/guide/start.zh-CN.md b/docs/guide/start.zh-CN.md
@@ -10,21 +10,28 @@ nav:
 
 ## 安装
 
-### npm
+### NPM 模式(推荐)
 
 ```bash
 $ npm install @ant-design/charts
 ```
 
-### CDN
+### CDN 模式
 
-推荐使用 npm 的方式，<b>CDN 模式下由于底层依赖不一样，为了降低包体积，从 1.0.5 版本开始，组织架构图、流程图、资金流向图、缩进树图被打包到 charts_g6.min.js 里，其它图表打包到 charts.min.js 里</b>，使用时按需引入即可。
+推荐使用 npm 的方式，<b>CDN 模式下由于底层依赖不一样，为了降低包体积，从 1.0.5 版本开始，组织架构图、流程图、资金流向图、缩进树图被打包到 graphs.min.js 里，其它图表打包到 charts.min.js 里</b>，使用时按需引入即可。
+
+graphs 包含图表：
+
+- OrganizationTreeGraph
+- DagreGraph
+- DagreFundFlowGraph
+- IndentedTreeGraph
 
 ```ts
 // 引入在线资源
 <script type="text/javascript" src="https://unpkg.com/@ant-design/charts@latest/dist/charts.min.js"></script>
-// G6 相关的图表
-<script type="text/javascript" src="https://unpkg.com/@ant-design/charts@latest/dist/charts_g6.min.js"></script>
+// Graphs 相关的图表
+<script type="text/javascript" src="https://unpkg.com/@ant-design/charts@latest/dist/graphs.min.js"></script>
 ```
 
 由于 @ant-design/charts 里面 externals 了 `react` 和 `react-dom`，该方式使用时需要在项目里面做同样的操作，通过 CDN 的方式在 `charts.min.js` 之前引入 `react` 和 `react-dom`。
@@ -40,7 +47,7 @@ externals: {
 <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 // 按需引入
 <script crossorigin src="https://unpkg.com/@ant-design/charts@1.0.5/dist/charts.min.js"></script>
-<script crossorigin src="https://unpkg.com/@ant-design/charts@1.0.5/dist/charts_g6.min.js"></script>
+<script crossorigin src="https://unpkg.com/@ant-design/charts@1.0.5/dist/graphs.min.js"></script>
 ```
 
 使用方式
@@ -49,7 +56,7 @@ externals: {
 // 折线图，其它图表类似
 const { Line } = window.charts;
 // 组织架构图
-const { OrganizationTreeGraph } = window.charts_g6;
+const { OrganizationTreeGraph } = window.graphs;
 ```
 
 ## 使用

diff --git a/webpack.config.js b/webpack.config.js
@@ -11,9 +11,10 @@ process.env.NODE_ENV = 'production';
 module.exports = {
   entry: {
     // charts: ['@babel/polyfill', './src/index.ts'],
-    charts: './src/index.charts.ts',
-    charts_g6: './src/index.g6.ts',
-    charts_all: './src/index.ts',
+    charts: './src/index.charts.ts', // G2Plot 相关图表
+    charts_g6: './src/index.g6.ts', // 兼容旧代码
+    graphs: './src/index.g6.ts', // 关系图相关图表
+    charts_all: './src/index.ts', // 全量图表
   },
   output: {
     filename: '[name].min.js',