This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git
commit 2d943e84211f0720090670961a6721416944b729 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Thu Apr 16 16:35:24 2020 +0800 doc: update post content --- configs/config.js | 3 +- contents/zh/basics/installation.md | 56 ++++++++++++++++++++++++++++++++++++++ contents/zh/get-started.md | 32 ++++++++++------------ layouts/default.vue | 14 +++++++++- 4 files changed, 86 insertions(+), 19 deletions(-) diff --git a/configs/config.js b/configs/config.js index 2e73436..7f29a80 100644 --- a/configs/config.js +++ b/configs/config.js @@ -1,4 +1,5 @@ export default { rootPath: '/echarts-handbook/dist', - galleryViewPath: 'https://echarts.apache.org/examples/zh/view.html?c=' + galleryViewPath: 'https://echarts.apache.org/examples/zh/view.html?c=', + mainSitePath: 'https://echarts.apache.org/' }; diff --git a/contents/zh/basics/installation.md b/contents/zh/basics/installation.md index 7144b3c..bd3ef3c 100644 --- a/contents/zh/basics/installation.md +++ b/contents/zh/basics/installation.md @@ -1 +1,57 @@ # 安装 + +Apache ECharts (incubating) 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。 + +1. 从官网获取 +2. 从 GitHub 获取 +3. 从 CDN 获取 +4. 在线定制 +5. 在线定制 + +接下来我们将分别介绍这些安装方式,以及下载后的目录结构。 + + + +## 安装方式 + +### 从官网获取 + +[Apache ECharts (incubating) 官网下载界面](https://echarts.apache.org/download.html) 提供了镜像网站下载源码,并且核对签名的方式——这可以保证下载的代码与发布的代码一致。 + +具体的方法参见[官网下载页面](${mainSitePath}/download.html)。 + + +### 从 GitHub 获取 + +[apache/incubator-echarts](https://github.com/apache/incubator-echarts) 项目的 [release](https://github.com/apache/incubator-echarts/releases) 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 `dist` 目录下的 `echarts.js` 即为包含完整 ECharts 功能的文件。 + + +### 从 npm 获取 + +```sh +npm install echarts --save +``` + +详见[在 webpack 中使用 echarts](https://echarts.apache.org/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts)。 + + +### 从 CDN 获取 + +在 jsDelivr 的 [echarts](https://www.jsdelivr.com/package/npm/echarts) 项目中找到 `dist/echarts.js`,下载到本地使用。 + + +### 在线定制 + +如果只想引入部分模块以减少包体积,可以使用 [ECharts 在线定制](${mainSitePath}/builder.html)功能。 + + +## 目录结构 + +下面介绍项目 [`dist`](https://github.com/apache/incubator-echarts/tree/master/dist) 目录下各个文件的意义: + +- `echarts.js`:包含了完整 ECharts 功能的代码,没有经过压缩;推荐调试时使用。 +- `echarts.min.js`:`echarts.js` 的压缩结果;推荐线上使用。 +- `echarts.simple.js`:包含折线图、柱状图、饼图的代码;推荐不需要其他系列类型的项目使用。 +- `echarts.common.js`:包含了常用组件和系列类型的代码,完整支持的内容参见 [echarts.common.js](https://github.com/apache/incubator-echarts/blob/master/echarts.common.js) + +带有 `-en` 的文件是对应的英文版本,带有 `.min` 的文件是对应的压缩版本。 diff --git a/contents/zh/get-started.md b/contents/zh/get-started.md index b2b2db9..6c9dde8 100644 --- a/contents/zh/get-started.md +++ b/contents/zh/get-started.md @@ -1,44 +1,42 @@ -# 5 分钟上手 ECharts +# 快速上手 ## 获取 ECharts -你可以通过以下几种方式获取 ECharts。 +ECharts 支持多种下载方式,可以在下一篇教程[安装](zh/basics_installation)中查看所有方式。这里,我们以从 [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) CDN 上获取为例,介绍如何快速安装。 -* 从 [Apache ECharts (incubating) 官网下载界面](https://echarts.apache.org/download.html) 获取官方源码包后构建。 +在 [https://www.jsdelivr.com/package/npm/echarts](https://www.jsdelivr.com/package/npm/echarts) 选择 `dist/echarts.js`,点击并保存为 `echarts.js` 文件。 -* 在 ECharts 的 [GitHub](https://github.com/apache/incubator-echarts/releases) 获取。 - -* 通过 npm 获取 echarts,`npm install echarts --save`,详见“[在 webpack 中使用 echarts](https://echarts.apache.org/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts)” - -* 通过 [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) 等 CDN 引入 +> 关于这些文件的介绍,可以在下一篇教程[安装](zh/basics_installation)中了解更多信息。 ## 引入 ECharts -通过标签方式直接引入构建好的 echarts 文件 +在刚才保存 `echarts.js` 的目录新建一个 `index.html` 文件,内容如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> - <!-- 引入 ECharts 文件 --> - <script src="echarts.min.js"></script> + <!-- 引入刚刚下载的 ECharts 文件 --> + <script src="echarts.js"></script> </head> </html> ``` +打开这个 `index.html`,你会看到一片空白。但是不要担心,打开控制台看到没有报错信息,就可以进行下一步。 + ## 绘制一个简单的图表 -在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。 +在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 `</head>` 之后,添加: ``` <body> - <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> + <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body> ``` -然后就可以通过 [echarts.init](api.html#echarts.init) 方法初始化一个 echarts 实例并通过 [setOption](api.html#echartsInstance.setOption) 方法生成一个简单的柱状图,下面是完整代码。 +然后就可以通过 [echarts.init](${mainSitePath}/api.html#echarts.init) 方法初始化一个 echarts 实例并通过 [setOption](${mainSitePath}/api.html#echartsInstance.setOption) 方法生成一个简单的柱状图,下面是完整代码。 ```html @@ -47,11 +45,11 @@ <head> <meta charset="utf-8"> <title>ECharts</title> - <!-- 引入 echarts.js --> + <!-- 引入刚刚下载的 ECharts 文件 --> <script src="echarts.min.js"></script> </head> <body> - <!-- 为ECharts准备一个具备大小(宽高)的Dom --> + <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 @@ -86,6 +84,6 @@ 这样你的第一个图表就诞生了! -<iframe width="600" height="300" src="${galleryViewPath}doc-example/getting-started&reset=1&edit=1"></iframe> +<iframe width="600" height="400" src="${galleryViewPath}doc-example/getting-started&reset=1&edit=1"></iframe> 你也可以直接进入 [ECharts Gallery](${galleryEditorPath}doc-example/getting-started) 中查看编辑示例 diff --git a/layouts/default.vue b/layouts/default.vue index 1cc022d..952d479 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -49,27 +49,39 @@ export default Vue.extend({ h1 { margin-bottom: 20px; font-size: 36px; + color: #222; } h2 { - margin: 40px 0 20px 0; + margin: 70px 0 20px 0; font-size: 26px; + color: #666; +} + +h1+h2 { + margin-top: 30px; } h3 { + margin: 30px 0 20px 0; font-size: 22px; + color: #444; } h4 { + margin: 25px 0 20px 0; font-size: 18px; + color: #222; } h5 { font-size: 16px; + color: #222; } h6 { font-size: 14px; + color: #222; } blockquote { --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org