en: add chart-size
diff --git a/contents/en/concepts/chart-size.md b/contents/en/concepts/chart-size.md
index 00f1c41..25827bb 100644
--- a/contents/en/concepts/chart-size.md
+++ b/contents/en/concepts/chart-size.md
@@ -1,88 +1,87 @@
# Chart Container and Size
-In [quick-start](./basics_configuration), we introduced the API to initialize the ECharts [`echarts.init`](${mainSitePath}/api.html#echarts.init). [API Document](${mainSitePath}/api.html#echarts.init) has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.
-
+In [Get Started](${lang}/get-started), we introduced the API to initialize the ECharts [`echarts.init`](${mainSitePath}/api.html#echarts.init). [API Document](${mainSitePath}/api.html#echarts.init) has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.
Refer to several common usage scenarios, here is the example to initialize a chart and change the size.
## Initialization
-### Scene 1: Define a parent container in HTML
+### Define a parent container in HTML
-In general, you need to define a `<div>` node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring `opts.width` or `opts.height`, the size of the chart will default to the size of the node.
+In general, you need to define a `<div>` node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring `opts.width` or `opts.height`, the size of the chart will default to the size of the node.
```html
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
- var myChart = echarts.init(document.getElementById('main'));
+ var myChart = echarts.init(document.getElementById('main'));
</script>
```
-To be noticed, before calling `echarts.init`, you need to make sure the container already has width and height.
+To be noticed, before calling `echarts.init`, you need to make sure the container already has width and height.
-### Scene 2: Specify the chart size
+### Specify the chart size
-If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.
+If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.
```html
<div id="main"></div>
<script type="text/javascript">
- var myChart = echarts.init(document.getElementById('main'), null, {
- width: 600,
- height: 400
- });
+ var myChart = echarts.init(document.getElementById('main'), null, {
+ width: 600,
+ height: 400
+ });
</script>
```
-
-
## Reactive of the Container Size
-### Scene 3: Listen to the container size to change the chart size
+### Listen to the container size to change the chart size
In some cases, we want to accordingly change the chart size while the size of containers changed.
For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.
-You can listen to `window.onresize` of the site to catch the event that the browser is resized. Then use [`echartsInstance.resize`](${mainSitePath}api.html#echartsInstance.resize) to resize the chart.
+You can listen to `window.onresize` of the site to catch the event that the browser is resized. Then use [`echartsInstance.resize`](${mainSitePath}api.html#echartsInstance.resize) to resize the chart.
```html
<style>
- #main, html, body {
- width: 100%;
- }
- #main {
- height: 400px;
- }
+ #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();
- };
+ var myChart = echarts.init(document.getElementById('main'));
+ window.onresize = function() {
+ myChart.resize();
+ };
</script>
```
-### Scene 4: State a specific chart size
+### State a specific chart size
Except for calling `resize()` without parameters, you can state the height and width to implement the chart size different from the size of the container.
```js
myChart.resize({
- width: 800,
- height: 400
+ width: 800,
+ height: 400
});
```
-> **Tips: ** Pay attention to how the API defined while reading the file. `resize()` API was sometimes mistaken for the form like `myCharts.resize(800, 400)` which do not exist.
+> **Tips: ** Pay attention to how the API defined while reading the file. `resize()` API was sometimes mistaken for the form like `myCharts.resize(800, 400)` which do not exist.
-### Scene 5: Dispose and rebuild of the container node
+### Dispose and rebuild of the container node
We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.
-Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.
+Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.
-The correct way is, call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to dispose the instance after the container was disposed, and call [echarts.init](${mainSitePath}/api.html#echarts.init) to initialize after the container was added again.
+The correct way is, call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to dispose the instance after the container was disposed, and call [echarts.init](${mainSitePath}/api.html#echarts.init) to initialize after the container was added again.
-> **Tips: ** Call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to release resources while disposing the node to avoid memory leaks.
+> **Tips: ** Call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to release resources while disposing the node to avoid memory leaks.
diff --git a/contents/zh/concepts/chart-size.md b/contents/zh/concepts/chart-size.md
index 794628c..3e209ae 100644
--- a/contents/zh/concepts/chart-size.md
+++ b/contents/zh/concepts/chart-size.md
@@ -6,7 +6,7 @@
## 初始化
-### 场景一：在 HTML 中定义有宽度和高度的父容器（推荐）
+### 在 HTML 中定义有宽度和高度的父容器（推荐）
通常来说，需要在 HTML 中先定义一个 `<div>` 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 `opts.width` 或 `opts.height` 将其覆盖。
@@ -19,7 +19,7 @@
需要注意的是，使用这种方法在调用 `echarts.init` 时需保证容器已经有宽度和高度了。
-### 场景二：指定图表的大小
+### 指定图表的大小
如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。
@@ -35,7 +35,7 @@
## 响应容器大小的变化
-### 场景三：监听图表容器的大小并改变图表大小
+### 监听图表容器的大小并改变图表大小
在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
@@ -63,7 +63,7 @@
</script>
```
-### 场景四：为图表设置特定的大小
+### 为图表设置特定的大小
除了直接调用 `resize()` 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。
@@ -76,7 +76,7 @@
> **小贴士：** 阅读 API 文档的时候要留意接口的定义方式，这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式，但其实不存在这样的调用方式。
-### 场景五：容器节点被销毁以及被重建时
+### 容器节点被销毁以及被重建时
假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。
