This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch wenli
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git
commit bb2b962f6281b9046514018206f5033e8745d63e
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Thu Jun 18 10:57:29 2020 +0800
doc: update content
---
configs/config.js | 1 +
contents/zh/chart-types/bar/bar-racing.md | 3 +
contents/zh/chart-types/bar/polar-bar.md | 2 +
contents/zh/chart-types/bar/simple-bar.md | 124 +++++++++++++++++++++++++++++-
contents/zh/posts.js | 5 +-
5 files changed, 132 insertions(+), 3 deletions(-)
diff --git a/configs/config.js b/configs/config.js
index 2c2e1f6..e01bb65 100644
--- a/configs/config.js
+++ b/configs/config.js
@@ -2,5 +2,6 @@ export default {
rootPath: '/echarts-handbook/dist',
galleryViewPath: 'https://echarts.apache.org/examples/zh/view.html?c=',
mainSitePath: 'https://echarts.apache.org/',
+ optionPath: 'https://echarts.apache.org/option.html#',
gitRepo: 'Ovilia/incubator-echarts-handbook'
};
diff --git a/contents/zh/chart-types/bar/bar-racing.md
b/contents/zh/chart-types/bar/bar-racing.md
new file mode 100644
index 0000000..14bb2e0
--- /dev/null
+++ b/contents/zh/chart-types/bar/bar-racing.md
@@ -0,0 +1,3 @@
+# 动态排序柱状图
+
+动态排序柱状图是 ECharts 5.0 新增的功能。
diff --git a/contents/zh/chart-types/bar/polar-bar.md
b/contents/zh/chart-types/bar/polar-bar.md
index e69de29..1948c92 100644
--- a/contents/zh/chart-types/bar/polar-bar.md
+++ b/contents/zh/chart-types/bar/polar-bar.md
@@ -0,0 +1,2 @@
+# 极坐标系柱状图
+
diff --git a/contents/zh/chart-types/bar/simple-bar.md
b/contents/zh/chart-types/bar/simple-bar.md
index 5b77706..c980e5b 100644
--- a/contents/zh/chart-types/bar/simple-bar.md
+++ b/contents/zh/chart-types/bar/simple-bar.md
@@ -1,8 +1,14 @@
-# 最简单的柱状图
+# 基本柱状图
柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
-设置柱状图的方式，是将 `series` 的 `name` 设为 `'bar'`。最简单的柱状图可以这样设置：
+设置柱状图的方式，是将 `series` 的 `name` 设为 `'bar'`。
+
+[[配置项手册]](${optionPath}series-bar)
+
+## 最简单的柱状图
+
+最简单的柱状图可以这样设置：
<!-- embed -->
```js
@@ -41,3 +47,117 @@ option = {
}]
};
```
+
+
+## 柱状图样式设置
+
+### 柱条样式
+
+柱条的样式可以通过 [`series.itemStyle`](${optionPath}series-bar.itemStyle) 设置，包括：
+
+- 柱条的颜色（`color`）；
+- 柱条的描边颜色（`borderColor`）、宽度（`borderWidth`）、样式（`borderType`）；
+- 柱条圆角的半径（`barBorderRadius`）；
+- 柱条透明度（`opacity`）；
+- 阴影（`shadowBlur`、`shadowColor`、`shadowOffsetX`、`shadowOffsetY`）。
+
+<!-- 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'
+ }]
+};
+```
+
+在这个例子中，我们通过设置柱状图对应 `series` 的`itemStyle`，设置了柱条的样式。完整的配置项及其用法请参见配置项手册
[`series.itemStyle`](${optionPath}series-bar.itemStyle)。
+
+### 柱条宽度和高度
+
+柱条宽度可以通过 [`barWidth`](${optionPath}#series-bar.barWidth) 设置。比如在下面的例子中，将
`barWidth` 设为 `'20%'`，表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中，每个系列有 5 个数据，20% 的类目宽度也就是整个 x
轴宽度的 4%。
+
+<!-- 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'
+ }]
+};
+```
+
+另外，还可以设置 [`barMaxWidth`](${optionPath}series-bar.barMaxWidth)
限制柱条的最大宽度。对于一些特别小的数据，我们也可以为柱条指定最小高度
[`barMinHeight`](${optionPath}series-bar.barMinHeight)，当数据对应的柱条高度小于该值时，柱条高度将采用这个最小高度。
+
+### 柱条间距
+
+柱条间距分为两种，一种是不同系列在同一类目下的距离
[`barWidth`](${optionPath}series-bar.barWidth)，另一种是类目与类目的距离
[`barCategoryGap`](${optionPath}series-bar.barCategoryGap)。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 18],
+ barGap: '20%',
+ barCategoryGap: '40%'
+ }, {
+ type: 'bar',
+ data: [12, 14, 9, 9, 11]
+ }]
+};
+```
+
+在这个例子中，`barGap` 被设为 `'20%'`，这意味着每个类目（比如 `A`）下的两个柱子之间的距离，相对于柱条宽度的百分比。而
`barCategoryGap` 是 `'40%'`，意味着柱条每侧空余的距离，相对于柱条宽度的百分比。
+
+通常而言，设置 `barGap` 及 `barCategoryGap` 后，就不需要设置 `barWidth`
了，这时候的宽度会自动调整。如果有需要的话，可以设置 `barMaxWidth` 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。
+
+> 在同一坐标系上，此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效，并且是对此坐标系中所有柱状图系列生效。
+
+
+### 为柱条添加背景色
+
+有时，我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始，这一功能可以简单地用
[`showBackground`](${optionPath}series-bar.showBackground) 开启，并且可以通过
[`backgroundStyle`](${optionPath}series-bar.backgroundStyle) 配置。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(220, 220, 220, 0.8)'
+ }
+ }]
+};
+```
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 2c87e06..9f21d44 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -95,12 +95,15 @@ export default [{
title: '柱状图',
dir: 'bar',
children: [{
- title: '最简单的柱状图',
+ title: '基本柱状图',
dir: 'simple-bar'
}, {
title: '堆叠柱状图',
dir: 'stacked-bar'
}, {
+ title: '动态排序柱状图',
+ dir: 'bar-racing'
+ }, {
title: '极坐标系柱状图',
dir: 'polar-bar'
}, {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
