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:12 UTC
[incubator-echarts-handbook] 08/11: doc: add 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 e802f7cd0bcf9a0883f3ef93606b7dd3eeec3a2d
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue May 12 13:47:35 2020 +0800
doc: add content
---
.editorconfig | 2 +-
contents/zh/basics/configuration.md | 1 -
.../zh/basics/{installation.md => download.md} | 6 +-
contents/zh/concepts/chart-size.md | 91 ++++++++++++++++++++++
contents/zh/get-started.md | 2 +-
contents/zh/posts.js | 14 ++--
layouts/default.vue | 6 +-
7 files changed, 108 insertions(+), 14 deletions(-)
diff --git a/.editorconfig b/.editorconfig
index 5d12634..e9a9bff 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -3,7 +3,7 @@ root = true
[*]
indent_style = space
-indent_size = 2
+indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
diff --git a/contents/zh/basics/configuration.md b/contents/zh/basics/configuration.md
deleted file mode 100644
index 450f307..0000000
--- a/contents/zh/basics/configuration.md
+++ /dev/null
@@ -1 +0,0 @@
-# 初始化设置
diff --git a/contents/zh/basics/installation.md b/contents/zh/basics/download.md
similarity index 98%
rename from contents/zh/basics/installation.md
rename to contents/zh/basics/download.md
index bd3ef3c..7e6632d 100644
--- a/contents/zh/basics/installation.md
+++ b/contents/zh/basics/download.md
@@ -1,11 +1,11 @@
-# 安装
+# 下载
Apache ECharts (incubating) 提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。
1. 从官网获取
2. 从 GitHub 获取
-3. 从 CDN 获取
-4. 在线定制
+3. 从 npm 获取
+4. 从 CDN 获取
5. 在线定制
接下来我们将分别介绍这些安装方式，以及下载后的目录结构。
diff --git a/contents/zh/concepts/chart-size.md b/contents/zh/concepts/chart-size.md
new file mode 100644
index 0000000..c8fb1e8
--- /dev/null
+++ b/contents/zh/concepts/chart-size.md
@@ -0,0 +1,91 @@
+# 图表容器及大小
+
+在[快速上手](./basics_configuration)中，我们介绍了初始化 ECharts 的接口 [`echarts.init`](${mainSitePath}/api.html#echarts.init)。[API 文档](${mainSitePath}/api.html#echarts.init)中详细介绍了参数的具体含义，建议理解后再阅读本文。
+
+下面，我们就常见的几种使用场景，介绍如何初始化一个图表以及改变其大小。
+
+## 初始化
+
+### 场景一：在 HTML 中定义有宽度和高度的父容器（推荐）
+
+通常来说，需要在 HTML 中先定义一个 `<div>` 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 `opts.width` 或 `opts.height` 将其覆盖。
+
+```html
+<div id="main" style="width: 600px;height:400px;"></div>
+<script type="text/javascript">
+ var myChart = echarts.init(document.getElementById('main'));
+</script>
+```
+
+需要注意的是，使用这种方法在调用 `echarts.init` 时需保证容器已经有宽度和高度了。
+
+
+### 场景二：指定图表的大小
+
+如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。
+
+```html
+<div id="main"></div>
+<script type="text/javascript">
+ var myChart = echarts.init(document.getElementById('main'), null, {
+ width: 600,
+ height: 400
+ });
+</script>
+```
+
+
+
+## 响应容器大小的变化
+
+### 场景三：监听图表容器的大小并改变图表大小
+
+在有些场景下，我们希望当容器大小改变时，图表的大小也响应地改变。
+
+比如，图表容器是一个高度为 300px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。
+
+这种情况下，可以监听页面的 `window.onresize` 事件获取浏览器大小改变的事件，然后调用 [`echartsInstance.resize`](${mainSitePath}api.html#echartsInstance.resize) 改变图表的大小。
+
+```html
+<style>
+ #main, html, body {
+ width: 100%;
+ }
+ #main {
+ height: 400px;
+ }
+</style>
+<div id="main"></div>
+<script type="text/javascript">
+ var myChart = echarts.init(document.getElementById('main'));
+ window.onresize = function () {
+ myChart.resize();
+ };
+</script>
+```
+
+
+### 场景四：为图表设置特定的大小
+
+除了直接调用 `resize()` 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。
+
+```js
+myChart.resize({
+ width: 800,
+ height: 400
+});
+```
+
+> **小贴士：** 阅读 API 文档的时候要留意接口的定义方式，这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式，但其实不存在这样的调用方式。
+
+
+### 场景五：容器节点被销毁以及被重建时
+
+假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。
+
+本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。
+
+正确的做法是，在图表容器被销毁之后，调用 [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) 销毁实例，在图表容器重新被添加后再次调用 [echarts.init](${mainSitePath}/api.html#echarts.init) 初始化。
+
+> **小贴士：** 在容器节点被销毁时，总是应调用 [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) 以销毁实例释放资源，避免内存泄漏。
+
diff --git a/contents/zh/get-started.md b/contents/zh/get-started.md
index 6c9dde8..cf2af6e 100644
--- a/contents/zh/get-started.md
+++ b/contents/zh/get-started.md
@@ -29,7 +29,7 @@ ECharts 支持多种下载方式，可以在下一篇教程[安装](zh/basics_in
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 `</head>` 之后，添加：
-```
+```html
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index d61a509..2c87e06 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -9,7 +9,7 @@ export default [{
title: '项目结构说明',
dir: 'get-started'
}, {
- title: '写作风格规范',
+ title: '写作风格规范',
dir: 'writing'
}]
}, {
@@ -19,11 +19,8 @@ export default [{
title: '入门篇',
dir: 'basics',
children: [{
- title: '安装',
- dir: 'installation'
- }, {
- title: '初始化',
- dir: 'configuration'
+ title: '下载',
+ dir: 'download'
}, {
title: '资源列表',
dir: 'resource'
@@ -36,8 +33,11 @@ export default [{
}]
}, {
title: '概念篇',
- dir: 'basics',
+ dir: 'concepts',
children: [{
+ title: '图表容器及大小',
+ dir: 'chart-size'
+ }, {
title: '配置项基本概念',
dir: 'options'
}, {
diff --git a/layouts/default.vue b/layouts/default.vue
index 952d479..730d495 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -43,7 +43,7 @@ export default Vue.extend({
<style>
.post-content {
- margin: 20px 0;
+ margin: 20px 0 80px 0;
}
h1 {
@@ -105,4 +105,8 @@ iframe {
border: 1px solid #ddd;
margin: 10px 0;
}
+
+p {
+ line-height: 1.8em;
+}
</style>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org