You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2020/06/19 05:10:31 UTC
[incubator-echarts-handbook] branch master updated: docs: add bar
contents
This is an automated email from the ASF dual-hosted git repository.
wangdd pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new b6a9b9b docs: add bar contents
b6a9b9b is described below
commit b6a9b9baea9a672581e6b26a869bc5199b4515b3
Author: Wdingding <wa...@gmail.com>
AuthorDate: Fri Jun 19 13:10:16 2020 +0800
docs: add bar contents
---
.../chart-specificatio/bar/basic-bar.md | 45 +++++++++++++++++++++
.../chart-specificatio/bar/bi-directional-bar.md | 32 +++++++++++++++
.../chart-specificatio/bar/grouped-bar.md | 20 +++++++++
.../chart-specificatio/bar/stacked-bar.md | 22 ++++++++++
static/images/design/bar/bar01.jpg | Bin 0 -> 84318 bytes
static/images/design/bar/bar02.jpg | Bin 0 -> 75564 bytes
static/images/design/bar/bar03.jpg | Bin 0 -> 91679 bytes
static/images/design/bar/bar04.jpg | Bin 0 -> 70479 bytes
.../bi-directional-bar/bi-directional-bar01.jpg | Bin 0 -> 75564 bytes
.../bi-directional-bar/bi-directional-bar02.jpg | Bin 0 -> 86140 bytes
10 files changed, 119 insertions(+)
diff --git a/contents/zh/best-practice/chart-specificatio/bar/basic-bar.md b/contents/zh/best-practice/chart-specificatio/bar/basic-bar.md
new file mode 100644
index 0000000..854613a
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/bar/basic-bar.md
@@ -0,0 +1,45 @@
+# 基础柱状图
+
+柱状图是最常见的图表类型，通过使用水平或垂直方向柱子的高度来显示不同类别的数值，其中柱状图的一个轴显示比较的类别，而另一个轴代表对应的数值。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">
+</iframe>
+
+纵向柱状图的柱是垂直方向的，横向柱状图的柱是水平方向的，又称条形图。条形图与横向柱状图表达数据的形式是一样的，不过，当图表的数据标签很长或者有超过10个项目进行比较时，横向柱状图会无法完全显示完标签，或者只能倾斜展示，影响美观。因此当数据标签过长时，选择用条形图可以获得更好的展示效果。
+
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz">
+</iframe>
+
+## 柱状图的使用建议
+
+1、避免使用太多颜色，一般情况一个柱状图（条形图）表示一组相同的度量，所以建议使用相同的颜色或同一颜色的不同色调。如果需要强调某个数据时，可以使用对比色或者变化色调来突出显示有意义的数据点。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef">
+</iframe>
+
+2、柱状图柱子间的宽度和间隙要适当。当柱子太窄时，用户的视觉可能会集中在两个柱中间的负空间，而这里是不承载任何数据的。合理的宽度和间隙应该是单个柱子的宽度不小于柱间间隙的两倍。
+
+
+3、Y轴数据应该从 0 基线开始，以恰当地反映数值。如果展示的是被截断的数据，那很可能会误导观众做出错误的判断。例如左侧图表显示出的数据结果是 2017 年收入是 2014 年收入的五倍，而实际上如右侧图表完整显示的数据表明 2017 年收入相对于 2014 年其实只提升了 25%。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/bar/bar03.jpg">
+</img>
+
+
+4、对多个数据系列排序时，如果不涉及到日期等特定数据，最好能符合一定的逻辑用直观的方式引导用户更好的查看数据。可以通过升序或降序排布，例如按照数量从多到少来对数据进行排序，也可以按照字母顺序等来排布。总之，按照逻辑排序可以一定程度上引导人们更好地阅读数据。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M">
+</iframe>
+
+
+5、一般情况下不建议使用三维柱状图，与三维饼图一样，对于数据传达不太精准，甚至还不得不猜测哪个才是数据的顶端。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/bar/bar04.jpg">
+</img>
diff --git a/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md b/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md
new file mode 100644
index 0000000..95555e2
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md
@@ -0,0 +1,32 @@
+双向柱状图多用于展示包含相反含义的数据的对比。其中图表的一个轴显示正在比较的类别，而另一轴代表对应的刻度值。
+
+双向柱状图一般用于正负两份相反数据的对比。例如一周内个人收入和支出的统计，其中收入为正数，支出为负数。使用双向柱状图可以很明确的对收入和支出做出对比，并能从单个系列中分析收入和支出的数值及波动。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">
+</iframe>
+
+
+双向柱状图可分为垂直方向的双向柱状图（如上图）和水平方向的双向柱状图（又叫正负条形图，如下图），例如一个客户满意度的调查数据分析中，有正面评价和负面评价，这很适合用正负条形图，所有数据在中间对齐，正面的评价数据分布在右侧，负面的评价数据分布在左侧。
+
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z">
+</iframe>
+
+
+## 双向柱状图的使用建议
+
+1、双向柱状图正向和负向的数据具有对比性，因此一般选用差值较大的具有对比性的颜色。
+
+2、永远不要在0基线的右边画负值的水平条行图或在 0 基线的上边画负值的柱子，以免和常识违背造成误解。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/bar/bi-directional-bar01.jpg">
+</img>
+
+
+3、双向柱状图多用于展示含相反含义的数据，因此要避免不具有正负含义的数据使用而造成的误解。 如下图人口统计图表中使用双向柱状图，一侧绘制男性的数据，另一侧绘制女性的数据，只是单纯的两类不同数据的对比，并不存在负数。那么，此时将两个数据序列绘制成一个分组柱状图是更合适的。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/bar/bi-directional-bar02.jpg">
+</img>
diff --git a/contents/zh/best-practice/chart-specificatio/bar/grouped-bar.md b/contents/zh/best-practice/chart-specificatio/bar/grouped-bar.md
new file mode 100644
index 0000000..e70d4af
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/bar/grouped-bar.md
@@ -0,0 +1,20 @@
+# 堆叠柱状图
+
+分组柱状图也被称为聚集柱状图。当两个或多个数据序列并排显示并在同一轴上的类别下分组时，将使用分组柱状图。相当于包含带有两个或更多图表的简单的条形图。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xr13FAH54f&v=1">
+</iframe>
+
+分组柱状图通常是用于将包含相同变量或类别的几个分组进行比较。像柱状图一样，每个柱的长度用于显示类别的数值，每个数据系列被分配一个单独的颜色或相同色系的不同饱和度，以区分它们，每组数据之间相互间隔并进行对比。
+
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW&v=3">
+</iframe>
+
+
+## 分组柱状图的使用建议
+
+1、如果每个分组中的系列过多，数据的阅读难度就会越增加。因此，不建议每个分组中包含过多的系列。在系列较多时，可考虑使用堆叠柱状图。
+
+2、建议每两个分组之间的间距大于组内不同系列之间的间距，以免造成视觉上错误的归类和区分。
\ No newline at end of file
diff --git a/contents/zh/best-practice/chart-specificatio/bar/stacked-bar.md b/contents/zh/best-practice/chart-specificatio/bar/stacked-bar.md
new file mode 100644
index 0000000..6e1b47d
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/bar/stacked-bar.md
@@ -0,0 +1,22 @@
+# 堆叠柱状图
+
+堆叠柱状图是柱状图的扩展。但区别在于，柱状图的数据值为并行排列，堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比。因此，非常适合处理部分与整体的关系。
+
+与饼图显示单个部分到整体的关系不同的是，堆叠柱状图可以显示多个部分到整体的关系。例如一个班级体育课选课的各项目人数统计，你可以用柱状图或饼图来展示。但是，当需要进一步区分男生和女生参与到不同项目中的人数分别是多少时，就需要把每个项目中包含的男生数和女生数都展示出来。如图选用堆叠柱状图，不仅能显示每个项目的总人数，还能展示出每个项目中的一部分与整体的关系。
+
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xBk7oUNwEz">
+</iframe>
+
+## 堆叠柱状图的使用建议
+
+1、遵循基本的柱状图使用原则。为了使图表易于理解，请避免使用太多颜色，不要刻意展示被截断的数据误导读者。
+
+2、堆叠柱状图不适合用于对比不同分组内同个分类之间的数据大小。
+
+3、堆叠柱状图最好的展示效果是每个组只包含两到三个类别，最多不要超过 6 个，因为太多的数据系列会使数据的阅读和分辨变得非常困难。
+
+4、由于要分析部分数据在整体中的占比，因此要避免用堆叠柱状图展示包含负数的数据。
+
+5、大多数的堆叠柱状图都是垂直绘制的，但是如果你的数据标签特别长时，考虑更好地展示效果，可以选择使用水平堆叠的方式。
+
diff --git a/static/images/design/bar/bar01.jpg b/static/images/design/bar/bar01.jpg
new file mode 100644
index 0000000..3e569f7
Binary files /dev/null and b/static/images/design/bar/bar01.jpg differ
diff --git a/static/images/design/bar/bar02.jpg b/static/images/design/bar/bar02.jpg
new file mode 100644
index 0000000..392e310
Binary files /dev/null and b/static/images/design/bar/bar02.jpg differ
diff --git a/static/images/design/bar/bar03.jpg b/static/images/design/bar/bar03.jpg
new file mode 100644
index 0000000..1799fad
Binary files /dev/null and b/static/images/design/bar/bar03.jpg differ
diff --git a/static/images/design/bar/bar04.jpg b/static/images/design/bar/bar04.jpg
new file mode 100644
index 0000000..1e310ab
Binary files /dev/null and b/static/images/design/bar/bar04.jpg differ
diff --git a/static/images/design/bi-directional-bar/bi-directional-bar01.jpg b/static/images/design/bi-directional-bar/bi-directional-bar01.jpg
new file mode 100755
index 0000000..392e310
Binary files /dev/null and b/static/images/design/bi-directional-bar/bi-directional-bar01.jpg differ
diff --git a/static/images/design/bi-directional-bar/bi-directional-bar02.jpg b/static/images/design/bi-directional-bar/bi-directional-bar02.jpg
new file mode 100755
index 0000000..2c17514
Binary files /dev/null and b/static/images/design/bi-directional-bar/bi-directional-bar02.jpg differ
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org