From 261828a06d21f3521dab65cec40addf627e124b6 Mon Sep 17 00:00:00 2001 From: Joel Alan <31396322+lxfu1@users.noreply.github.com> Date: Wed, 9 Oct 2024 20:48:34 +0800 Subject: [PATCH] chore: update site (#2730) --- site/docs/manual/getting-started.zh.md | 23 +++------------ site/docs/manual/introduction.zh.md | 41 +++++++++++++++++++++++++- site/package.json | 16 +++++----- 3 files changed, 53 insertions(+), 27 deletions(-) diff --git a/site/docs/manual/getting-started.zh.md b/site/docs/manual/getting-started.zh.md index 07be271a2..1b614a971 100644 --- a/site/docs/manual/getting-started.zh.md +++ b/site/docs/manual/getting-started.zh.md @@ -18,6 +18,7 @@ npm install @ant-design/charts --save import { Line } from '@ant-design/charts'; ``` +前置依赖 ```ts "peerDependencies": { "react": ">=16.8.4", @@ -25,20 +26,12 @@ import { Line } from '@ant-design/charts'; } ``` -在需求明确的情况下，也可仅引入相关子包 - -```bash -# 统计图表 -npm install @ant-design/plots --save -``` - ### 方式二：浏览器引入 既可以通过将脚本下载到本地也可以直接引入在线资源。 ```ts -// Plots 相关的图表 - + ``` 由于 @ant-design/charts 里面 externals 了 `react` 、`react-dom`，使用时需要通过 CDN 的方式在 `charts.min.js` 之前引入对应包的 CDN 地址。 @@ -54,25 +47,17 @@ externals: { // 按需引入 - + ``` 使用方式 ```ts // 折线图，其它图表类似 -const { Line } = window.Plots; +const { Line } = window.Charts; ``` -```html - - - -``` - ## 快速使用 在 Ant Design Charts 引入页面后，我们就已经做好了创建第一个图表的准备了，下面以一个基础折线图为例开始我们第一个图表的创建。大部分 demos 使用了父容器宽高，请确保父容器宽高或者手动设置图表宽高。 diff --git a/site/docs/manual/introduction.zh.md b/site/docs/manual/introduction.zh.md index 168247b9d..6ec8e6ecd 100644 --- a/site/docs/manual/introduction.zh.md +++ b/site/docs/manual/introduction.zh.md @@ -17,7 +17,46 @@ redirect_from:
像使用组件一样生成图表，开箱即用，你甚至不需要修改任何配置项就可以满足需求，真正的默认好用，有没有心动想试试的感觉。 -
![image.png](https://gw.alipayobjects.com/zos/antfincdn/TcUwTMuNxI/0a9ac684-e862-4889-b783-e0a75a0e3138.png#align=left&display=inline&height=951&name=image.png&originHeight=1901&originWidth=2000&size=968667&status=done&style=none&width=1000) +#### 依赖关系 + + + + + + + + + + + + + + + + +
主包子包/依赖描述
@ant-design/charts@ant-design/plots统计图表
@ant-design/graphs关系图
+ +#### 概览 + +
+
+
统计图表
+
+
+
关系图
+
+
+
+
+ +
+
+
+ +
+
+ + ### 架构 diff --git a/site/package.json b/site/package.json index 2cb169776..9652ae244 100644 --- a/site/package.json +++ b/site/package.json @@ -28,16 +28,18 @@ "start": "cross-env NODE_OPTIONS=--max_old_space_size=8192 pnpm run develop" }, "devDependencies": { - "@antv/dumi-theme-antv": "^0.5.2", - "@types/react": "^16.14.61", - "@types/react-dom": "^16.9.24", + "@antv/dumi-theme-antv": "^0.5.0", + "@types/react": "^16.14.8", + "@types/react-dom": "^16.9.13", + "cross-env": "^7.0.3", "d3-interpolate": "^3.0.1", "d3-regression": "^1.3.10", - "dumi": "^2.4.10", + "dumi": "^2.1.14", "fecha": "^4.2.3", - "gh-pages": "^2.2.0", - "typedoc": "^0.17.8", - "typedoc-plugin-markdown": "^2.4.2" + "gh-pages": "^2.1.1", + "typedoc": "^0.17.6", + "typedoc-plugin-markdown": "^2.2.11", + "typescript": "^3.6.5" }, "dependencies": { "@ant-design/graphs": "workspace:*",