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 07:19:49 UTC
[incubator-echarts-handbook] branch master updated: docs: add
scatter 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 494ee4e docs: add scatter contents
494ee4e is described below
commit 494ee4e18f7dac3585fa28440b0caaeb16d751b4
Author: Wdingding <wa...@gmail.com>
AuthorDate: Fri Jun 19 15:19:36 2020 +0800
docs: add scatter contents
---
.../chart-types/scatter/basic-scatter.md | 2 +-
.../chart-specificatio/scatter/bubble.md | 29 ++++++++++++++++
.../chart-specificatio/scatter/scatter.md | 37 +++++++++++++++++++++
contents/zh/posts.js | 10 ++++++
static/images/design/scatter/scatter5.jpg | Bin 0 -> 99795 bytes
5 files changed, 77 insertions(+), 1 deletion(-)
diff --git a/contents/zh/application/chart-types/scatter/basic-scatter.md b/contents/zh/application/chart-types/scatter/basic-scatter.md
index 70b0da4..703004f 100644
--- a/contents/zh/application/chart-types/scatter/basic-scatter.md
+++ b/contents/zh/application/chart-types/scatter/basic-scatter.md
@@ -1,6 +1,6 @@
# 基础散点图
-散点图又称气泡图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。
+散点图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。
## 最简单的散点图
diff --git a/contents/zh/best-practice/chart-specificatio/scatter/bubble.md b/contents/zh/best-practice/chart-specificatio/scatter/bubble.md
new file mode 100644
index 0000000..0062dbb
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/scatter/bubble.md
@@ -0,0 +1,29 @@
+# 气泡图
+
+气泡图是显示变量之间相关性的一种图表。与散点图类似。在直角坐标系中显示数据的两个变量（ X 和 Y 轴）之间的关系，数据显示为点的集合。与散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，在气泡图中，较大的气泡表示较大的值。可以通过气泡的位置分布和大小比例，来分析数据的规律。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xHkRpZuY4z&v=1">
+</iframe>
+
+
+## 气泡图的使用建议
+
+1、当数据具有 3 个序列、特征及相关值，使用气泡图是一个不错的选择。如下图气泡的位置显示了代码提交的日期、具体的时间点，气泡的大小说明了提交的代码量。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=scatter-punchCard">
+</iframe>
+
+2、我们还可以给气泡加入颜色编码。例如下图用不同的颜色将三个地区的空气数据分类标注，红色代表北京，黄色代表上海、蓝色代表广州，可以直观地对比分析三地的空气质量情况。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xr1kK7LoEf&v=1">
+</iframe>
+
+
+3、气泡图还经常用于和地图结合，其中 x 轴和 y 轴是经度和纬度的数据定位，气泡的大小可以表明该位置数量的多少。
+
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=scatter-world-population">
+</iframe>
diff --git a/contents/zh/best-practice/chart-specificatio/scatter/scatter.md b/contents/zh/best-practice/chart-specificatio/scatter/scatter.md
new file mode 100644
index 0000000..fe6e6d8
--- /dev/null
+++ b/contents/zh/best-practice/chart-specificatio/scatter/scatter.md
@@ -0,0 +1,37 @@
+# 散点图
+
+散点图在直角坐标系显示数据的两个变量（ X 和 Y 轴）之间的关系，数据显示为点的集合，适合用于在不考虑时间的情况下比较大量的数据点。散点图通常用来识别两个变量之间的相关性或用来观察他们的关系，从而发现某种趋势，对于查找异常值或理解数据分布也很有效。如下图某个班级学生身高和体重的分布状况。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xSkCyUwKNG&v=1">
+</iframe>
+
+
+散点图会显示不同类型的相关性，相关性即变量之间的关系。通常有正相关、负相关、不相关三种相关性。
+
++ 正相关：数据点从低 x、y 值的点到高 x、y 值，一个变量增加，另一个变量增加。
+
++ 负相关：数据点从高 x、y 值的点到低 x、y 值，一个变量增加，另一个变量减少。
+
++ 不相关：数据没有明显的方向性，一个变量变化对另一个没有影响。
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/scatter/scatter5.jpg">
+</img>
+
+
+需要注意的是，散点图能够有效的说明两个变量之间的相关性，但是并不能有力地证明其中存在因果关系。例如广告投放量和点击率是正相关的，但是不能说点击率高一定是因为广告投放量多造成的。但是，如果有明显的正相关性，就有足够的理由去增加投放量，然后再去观察数据。
+
+## 散点图的使用建议
+
+1、如果一个散点图没有显示变量之间的任何关系，那么或许该图表类型不是此数据的最佳选择。
+
+2、如果数据包含不同系列，可以给不同系列使用不同的颜色，例如蓝色代表男性，红色代表女性，并增加图例标注出蓝色代表的含义。可以区分了解男女不同性别身高和体重的分布状况。还可以分别添加每个系列平均值的辅助线，可以更好的理解数据的分布情况，如图中女生体重高于平均值的比低于平均值的少。
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM">
+</iframe>
+
+在观察两个变量之间的关系时，趋势线是非常有用的，趋势线的形状走向解释了两个变量之间的关系类型，还可以用来预测未来的值。但需要注意的是趋势线最可只能使用两条，以免干扰正常的数据的阅读。
+
+3、散点图只有有足够多的数据点，并且数据之间有相关性时才能呈现很好的结果。如果一份数据只有极少的信息或者数据间没有相关性，那么绘制一个很空的散点图和不相关的散点图都是没有意义的。
\ No newline at end of file
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 3f8a19c..e704084 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -217,6 +217,16 @@ export default [{
}, {
title: '雷达图',
dir: 'radar',
+ }, {
+ title: '散点图',
+ dir: 'scatter',
+ children: [{
+ title: '散点图',
+ dir: 'scatter'
+ },{
+ title: '气泡图',
+ dir: 'bubble'
+ }]
}]
}]
}];
diff --git a/static/images/design/scatter/scatter5.jpg b/static/images/design/scatter/scatter5.jpg
new file mode 100755
index 0000000..c077463
Binary files /dev/null and b/static/images/design/scatter/scatter5.jpg differ
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org