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 04:19:33 UTC
[incubator-echarts-handbook] branch master updated: docs: add line
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 c20adaf docs: add line contents
new a1f4955 Merge branch 'master' of https://github.com/apache/incubator-echarts-handbook
c20adaf is described below
commit c20adaf78ee42dae39a2847aa33eab6920aad3e5
Author: Wdingding <wa...@gmail.com>
AuthorDate: Fri Jun 19 12:19:00 2020 +0800
docs: add line contents
---
.../best-practice/chart-specificatio/line/area.md | 24 +++++++++++
.../chart-specificatio/line/basic-line.md | 36 ++++++++++++++++
.../chart-specificatio/line/stacked-area.md | 46 +++++++++++++++++++++
contents/zh/posts.js | 42 +++++++++++++++++--
pages/helper/contributors.ts | 23 ++++++++++-
static/images/design/line/line01.jpg | Bin 0 -> 89525 bytes
6 files changed, 166 insertions(+), 5 deletions(-)
diff --git a/contents/zh/best-practice/chart-specificatio/line/area.md b/contents/zh/best-practice/chart-specificatio/line/area.md
new file mode 100644
index 0000000..43c7774
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/line/area.md
@@ -0,0 +1,24 @@
+# 区域面积折线图
+面积图又叫区域图，与折线图很相近，都可以用来展示随着连续时间的推移数据的变化趋势。区别在于，面积图在折线与类别数据的水平轴（X轴）之间填充颜色或者纹理，形成一个面表示数据体积。相对于折线而言，被填充的区域可以更好的引起人们对总值趋势的注意，所以面积图主要用于传达趋势的大小，而不是确切的单个数据值。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=area-simple"></iframe>
+
+
+## 面积图的使用建议
+
+1、面积图要用填充区域来展示数据，当图表上有多个图层时，要尽量确保数据不要重叠。如果无法避免重叠，可以通过将颜色和透明度设置为适当的值，使重叠的数据图可以变得可读。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M"></iframe>
+
+
+2、面积图适合用来展示二到三组数据，建议最多不要展示超过四组数据系列，否则就如下方错误示例，数据系列过多而导致无法数据辨识，因此要避免在需要比较多个类别和确切的数据值的情况下使用面积图。超过三个系列的非堆叠面积图表是很难阅读的。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"></iframe>
+
+3、当数据值相距很远时，区域是模糊不清的，此时不太适合使用面积图展示。如下方错误示例虽然仔细分析能确定只展示了两个类别，乍一看，很可能会误以为图表上显示三种不同的颜色。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1"></iframe>
diff --git a/contents/zh/best-practice/chart-specificatio/line/basic-line.md b/contents/zh/best-practice/chart-specificatio/line/basic-line.md
new file mode 100644
index 0000000..324f5a1
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/line/basic-line.md
@@ -0,0 +1,36 @@
+# 基础折线图
+
+折线图主要用来展示数据相随着时间推移的趋势或变化。折线图非常适合用于展示一个连续的二维数据，如某网站访问人数或商品销量价格的波动。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1">
+</iframe>
+
+折线图除了展示某个事情发展的趋势，还可以用来比较多个不同的数据序列。如下图，可以通过对比同时间段的三种商品的销量，分析哪一种商品的销量最好。
+
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xSkBiMSU4M&v=1">>
+ </iframe>
+
+折线图是两个数据点之间用线连接起来，为了追求美观或特殊的效果，还可以如上图将两点之间用曲线连接，这种图又叫曲线图或样条图样条。样条图与折线图用法相同，只是每个数据点之间的绘制是曲线的。
+
+## 折线图的使用建议
+
+1、使用实线绘制数据线，首先要保证能够的区分数据线和坐标轴线，并且要尽力要所有的数据清晰可识别。
+
+2、建议不要绘制4条以上的折线，如下图错误的示例，线都折叠在一起并且又没有明显的对比，整张图表就会混乱并难以阅读。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1">
+</iframe>
+
+3、不建议使用过多的装饰来区分图表，图例虽然可以帮助区分不同数据系列，但如下图使用过多种类的图例有时会让用户分心。
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1">
+</iframe>
+
+
+4、展示折线图的数据时，要避免刻意的歪曲趋势。如下图，左图过于扁平化掩盖了想传达的信息，右图过于夸大趋势。要根据展示数据波动的参考单位，做有意义的波动分析。正确的数据高度是线约占Y轴高度的 2/3。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/line/line01.jpg"></img>
diff --git a/contents/zh/best-practice/chart-specificatio/line/stacked-area.md b/contents/zh/best-practice/chart-specificatio/line/stacked-area.md
new file mode 100644
index 0000000..2027d00
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/line/stacked-area.md
@@ -0,0 +1,46 @@
+# 堆叠面积图
+堆积面积图是一种特殊的面积图，可以用来比较在一个区间内的多个变量。堆叠面积图和面积图的区别在于，堆叠面积图每个数据系列的起点都是基于前一个数据系列绘制的，也就是每度量一行就要填满行与行之间的区域。
+
+如果有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。例如下图显示某个销售员对总销售额的贡献。
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xHySthj74z">
+</iframe>
+
+
+有两种不同的堆积面积图类型：
+
++ <b>传统的堆积面积图</b>：直接使用原始值堆叠，显示整个过程如何变化。
++ <b>百分比堆积面积图</b>：百分比堆积显示不同部分之间的关系如何随时间而变化。其中累积的总数不重要，重要的是显示出类别分布在整体中的作用。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">
+</iframe>
+
+## 堆叠面积图的使用建议
+
+1、图表有重叠的数据时，类别数量越多，重叠越多，因此可见度越低。如果使用面积图（如下示例）时会因为系列的重叠而无法阅读。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">
+</iframe>
+
+
+那同样的数据，换成使用堆叠面积图展示，则相对更容易阅读。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">
+</iframe>
+
+<div class="article-look-outside">
+ <div class="article-look-inside" style="padding-bottom:50%">
+ <iframe class="article-look-content"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">
+ </iframe>
+ </div>
+</div>
+
+2、虽然多数据系列时堆叠面积图比面积图有更好的展示效果，但依然不建议堆叠面积图中包含过多数据系列，最好不要多于7个，以免数据难以辨识。
+
+3、堆积面积图要展示部分和整体之间的关系，所以不能用于包含负值的数据的展示。
+
+4、建议堆叠面积图中把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更加的展示效果。
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index d3b2511..3013dcb 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -127,10 +127,44 @@ export default [{
title: '最佳实践',
dir: 'best-practice',
children: [{
- title: '移动端优化',
- dir: 'mobile'
- }, {
+ title: '移动端优化',
+ dir: 'mobile'
+ },{
title: '可视化设计原则',
dir: 'design'
+ }, {
+ title: '可视化规范',
+ dir: 'chart-specificatio',
+ children: [{
+ title: '折线图',
+ dir: 'line',
+ children: [{
+ title: '基础折线图',
+ dir: 'basic-line'
+ }, {
+ title: '面积图',
+ dir: 'area'
+ }, {
+ title: '堆叠面积图',
+ dir: 'stacked-area'
+ }]
+ },
+ {
+ title: '柱状图',
+ dir: 'bar',
+ children: [{
+ title: '基础柱状图',
+ dir: 'basic-bar'
+ }, {
+ title: '堆叠柱状图',
+ dir: 'stacked-bar'
+ }, {
+ title: '双向柱状图',
+ dir: 'bi-directiona-bar'
+ }, {
+ title: '分组柱状图',
+ dir: 'grouped-bar'
+ }]
+ },]
}]
-}];
+}]
diff --git a/pages/helper/contributors.ts b/pages/helper/contributors.ts
index 84a731a..8d413b5 100644
--- a/pages/helper/contributors.ts
+++ b/pages/helper/contributors.ts
@@ -72,7 +72,28 @@ export default {
"Ovilia"
],
"contents/zh/best-practice/design.md": [
- "Ovilia"
+ "Wdingding"
+ ],
+ "contents/zh/best-practice/chart-specificatio/line/basic-line.md": [
+ "Wdingding"
+ ],
+ "contents/zh/best-practice/chart-specificatio/line/area.md": [
+ "Wdingding"
+ ],
+ "contents/zh/best-practice/chart-specificatio/line/stacked-area.md": [
+ "Wdingding"
+ ],
+ "contents/zh/best-practice/chart-specificatio/bar/basic-bar.md": [
+ "Wdingding"
+ ],
+ "contents/zh/best-practice/chart-specificatio/bar/stacked-bar.md": [
+ "Wdingding"
+ ],
+ "contents/zh/best-practice/chart-specificatio/bar/bi-directiona-bar.md": [
+ "Wdingding"
+ ],
+ "contents/zh/best-practice/chart-specificatio/bar/grouped-bar.md": [
+ "Wdingding"
],
"contents/zh/basics/resource.md": [
"Ovilia"
diff --git a/static/images/design/line/line01.jpg b/static/images/design/line/line01.jpg
new file mode 100644
index 0000000..dff5cfd
Binary files /dev/null and b/static/images/design/line/line01.jpg differ
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org