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 06:33:44 UTC
[incubator-echarts-handbook] branch master updated: docs: add pie
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 570e8e7 docs: add pie contents
570e8e7 is described below
commit 570e8e78bbf0ee0b0395b48c33b59823ae897e94
Author: Wdingding <wa...@gmail.com>
AuthorDate: Fri Jun 19 14:33:24 2020 +0800
docs: add pie contents
---
.../chart-specificatio/line/stacked-area.md | 2 +-
.../chart-specificatio/pie/basic-pie.md | 51 +++++++++++++++++++++
contents/zh/posts.js | 8 ++++
static/images/design/pie/pie01.jpg | Bin 0 -> 176305 bytes
static/images/design/pie/pie02.jpg | Bin 0 -> 167844 bytes
static/images/design/pie/pie03.jpg | Bin 0 -> 141965 bytes
static/images/design/pie/pie04.jpg | Bin 0 -> 76093 bytes
7 files changed, 60 insertions(+), 1 deletion(-)
diff --git a/contents/zh/best-practice/chart-specificatio/line/stacked-area.md b/contents/zh/best-practice/chart-specificatio/line/stacked-area.md
index 2027d00..e23a076 100644
--- a/contents/zh/best-practice/chart-specificatio/line/stacked-area.md
+++ b/contents/zh/best-practice/chart-specificatio/line/stacked-area.md
@@ -39,7 +39,7 @@ src="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">
</div>
</div>
-2、虽然多数据系列时堆叠面积图比面积图有更好的展示效果，但依然不建议堆叠面积图中包含过多数据系列，最好不要多于7个，以免数据难以辨识。
+2、虽然多数据系列时堆叠面积图比面积图有更好的展示效果，但依然不建议堆叠面积图中包含过多数据系列，最好不要多于 7 个，以免数据难以辨识。
3、堆积面积图要展示部分和整体之间的关系，所以不能用于包含负值的数据的展示。
diff --git a/contents/zh/best-practice/chart-specificatio/pie/basic-pie.md b/contents/zh/best-practice/chart-specificatio/pie/basic-pie.md
new file mode 100644
index 0000000..5d85dcc
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/pie/basic-pie.md
@@ -0,0 +1,51 @@
+# 基础折线图
+
+饼图主要用于展现不同类别数值相对于总数的占比情况。图中每个分块（扇区）的弧长表示该类别的占比大小，所有分块数据总和为 100%。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1">
+</iframe>
+
+
+虽然饼图能快速有效地展示数据的比例分布，并被广泛用于各个领域，但是饼图及其变形图表一直是比较受争议的图表。因此，我们在使用饼图及其变形图表时一定要谨慎并避免走进误区。
+
+## 饼图的使用建议
+
+1、饼图适合用来展示单一维度数据的占比，要求其数值中没有零或负值，并确保各分块占比总和为 100%。
+
+2、我们很难比较一个分块过多的饼图的数据，建议尽量将饼图分块数量控制在五个以内。当数据类别较多时，可以把较小或不重要的数据合并成第五个分块，并命名为"其它"。如果各类别都必须全部展示，此时选择柱状图或堆积柱状图或许更合适。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/pie/pie02.jpg">
+</img>
+
+
+3、饼图不适合被用于精确数据的比较，因此当各类别数据占比较接近时（如下左图），我们很难对比出每个类别占比的大小。此时建议选用柱状图或南丁格尔玫瑰图（如下右图）来获取更好的展示效果。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/pie/pie03.jpg">
+</img>
+
+4、大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时，建议从 12 点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块，有效的强调其重要性。
+
+其余的数据分块有两种建议，一种是按照数据大小依次顺时针排列，另一种是在 12 点钟的左边绘制第二大的分块，其余的分块按照逆时针排列，最小的分块放在底部。如下图所示。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/pie/pie01.jpg">
+</img>
+
+按照数据大小区别顺序，不仅符合用户的视觉习惯，也更易于数据的识别和比较。当然基于这个原理，我们也可以把需要强调的最重要的部分（不一定是最大的部分）放在最突出重要的位置。
+
+
+5、可以添加一些装饰来强调饼图中的某一个数据。颜色、动效、样式、位置等元素都可以被用来突出显示一个扇区。请注意适度，有时太多的装饰会让用户理解数据时分心。
+
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1">
+</iframe>
+
+
+6、三维的饼图歪曲了各分块相对于整体的比例关系，会造成错误及理解上的困扰。因此不建议使用 3D 饼图。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/pie/pie04.jpg">
+</img>
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 93bc8d0..0edc5da 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
/**
* 这个文件决定了导航栏的数据，顺序即为以下元素定义的顺序。
* title 是导航栏中显示的标题，md 文件中的一级标题是正文标题，两者可以不同。
@@ -206,6 +207,13 @@ export default [{
title: '分组柱状图',
dir: 'grouped-bar'
}]
+ }, {
+ title: '饼图',
+ dir: 'pie',
+ children: [{
+ title: '基础饼图',
+ dir: 'basic-pie'
+ }]
}]
}]
}];
diff --git a/static/images/design/pie/pie01.jpg b/static/images/design/pie/pie01.jpg
new file mode 100644
index 0000000..375a0fb
Binary files /dev/null and b/static/images/design/pie/pie01.jpg differ
diff --git a/static/images/design/pie/pie02.jpg b/static/images/design/pie/pie02.jpg
new file mode 100644
index 0000000..828577a
Binary files /dev/null and b/static/images/design/pie/pie02.jpg differ
diff --git a/static/images/design/pie/pie03.jpg b/static/images/design/pie/pie03.jpg
new file mode 100644
index 0000000..c519208
Binary files /dev/null and b/static/images/design/pie/pie03.jpg differ
diff --git a/static/images/design/pie/pie04.jpg b/static/images/design/pie/pie04.jpg
new file mode 100644
index 0000000..1980e34
Binary files /dev/null and b/static/images/design/pie/pie04.jpg differ
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org