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 <zwl.s...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org