[incubator-echarts-handbook] 11/11: doc: update content

[ov...@apache.org]

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 af7b7f402dc9a883bf86a02f0554ea6405f7b0bb
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Jun 17 19:13:22 2020 +0800

    doc: update content
---
 contents/zh/chart-types/bar/simple-bar.md  | 42 ++++++++++++++++++++++++++++++
 contents/zh/chart-types/bar/stacked-bar.md | 29 +++++++++++++++++++++
 contents/zh/concepts/chart-size.md         |  2 +-
 layouts/default.vue                        |  1 +
 4 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/contents/zh/chart-types/bar/simple-bar.md b/contents/zh/chart-types/bar/simple-bar.md
index 0c004b3..5b77706 100644
--- a/contents/zh/chart-types/bar/simple-bar.md
+++ b/contents/zh/chart-types/bar/simple-bar.md
@@ -1 +1,43 @@
 # 最简单的柱状图
+
+柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
+
+设置柱状图的方式，是将 `series` 的 `name` 设为 `'bar'`。最简单的柱状图可以这样设置：
+
+<!-- embed -->
+```js
+option = {
+    xAxis: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {},
+    series: [{
+        type: 'bar',
+        data: [23, 24, 18, 25, 27, 28, 25]
+    }]
+};
+```
+
+在这个例子中，横坐标是类目型的，因此需要在 `xAxis` 中指定对应的值；而纵坐标是数值型的，可以根据 `series` 中的 `data`，自动生成对应的坐标范围。
+
+
+## 多系列的柱状图
+
+我们可以用一个系列表示一组相关的数据，如果需要实现多系列的柱状图，只需要在 `series` 多添加一项就可以了——
+
+<!-- embed -->
+```js
+option = {
+    xAxis: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {},
+    series: [{
+        type: 'bar',
+        data: [23, 24, 18, 25, 27, 28, 25]
+    }, {
+        type: 'bar',
+        data: [26, 24, 18, 22, 23, 20, 27]
+    }]
+};
+```
diff --git a/contents/zh/chart-types/bar/stacked-bar.md b/contents/zh/chart-types/bar/stacked-bar.md
index 0c942d2..246c58b 100644
--- a/contents/zh/chart-types/bar/stacked-bar.md
+++ b/contents/zh/chart-types/bar/stacked-bar.md
@@ -1 +1,30 @@
 # 堆叠柱状图
+
+有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆积柱状图图来表现。顾名思义，堆积柱状图就是一个系列的数值“堆积”在另一个系列上，因而从他们的高度总和就能表达总量的变化。
+
+使用 EChart 实现堆积折线图的方法非常简单，只需要给一个系列的 `stack` 值设置一个字符串类型的值，这一个值表示该系列堆积的类别。也就是说，拥有同样 `stack` 值的系列将堆积在一组。
+
+<!-- embed -->
+```js
+option = {
+    xAxis: {
+        data: ['A', 'B', 'C', 'D', 'E']
+    },
+    yAxis: {},
+    series: [{
+        data: [10, 22, 28, 43, 49],
+        type: 'bar',
+        stack: 'x'
+    }, {
+        data: [5, 4, 3, 5, 10],
+        type: 'bar',
+        stack: 'x'
+    }]
+};
+```
+
+在这个例子中，第二个系列所在的位置是在第一个系列的位置的基础上，上升了第二个系列数值对应的高度。因此，从第二个系列的位置，就能看出这两者总和的变化趋势。
+
+> `stack` 的取值用来表明哪些系列将被堆积在一起，理论上只要取值相同即可，具体的取值并没有什么区别。但在实际的应用中，我们建议使用一些有意义的字符串方便阅读。
+>
+>比如，在一个统计男女人数的图中，有四个系列，“成年男性”和“男孩”系列需要进行堆积，“成年女性”和“女孩”系列需要堆积。这时，这两组的的 `stack` 值就建议分别设为 `'男'` 和 `'女'`。虽然使用 `'a'` 和 `'b'` 这样没有意义的字符串也能实现同样的效果，但是代码的可阅读性就差了。
diff --git a/contents/zh/concepts/chart-size.md b/contents/zh/concepts/chart-size.md
index c8fb1e8..27769bc 100644
--- a/contents/zh/concepts/chart-size.md
+++ b/contents/zh/concepts/chart-size.md
@@ -40,7 +40,7 @@
 
 ### 场景三：监听图表容器的大小并改变图表大小
 
-在有些场景下，我们希望当容器大小改变时，图表的大小也响应地改变。
+在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
 
 比如，图表容器是一个高度为 300px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。
 
diff --git a/layouts/default.vue b/layouts/default.vue
index ccf1095..9190e71 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -56,6 +56,7 @@ export default Vue.extend({
 
 .post-contributor {
   display: inline-block;
+  margin-right: 15px;
   border: 1px solid #eee;
   border-radius: 5px;
   color: #777;


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org