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/18 02:57:57 UTC
[incubator-echarts-handbook] branch wenli created (now bb2b962)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch wenli
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git.
at bb2b962 doc: update content
This branch includes the following new commits:
new bb2b962 doc: update content
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts-handbook] 01/01: doc: update content
Posted by ov...@apache.org.
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 <zw...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org