You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/06/17 11:17:11 UTC
[incubator-echarts-handbook] 07/11: doc: update post content
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 <zw...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org