可视化 | 常用图表类型【Charts Examples】

可视化图表

---

图表可视化展现中，要体现“信达雅”（数据可信，表达清晰，展现美观），一图胜千言
工作中常用到echarts工具进行前端展示的实现，选取常用的图表类型进行说明，我们接下来说说图表应用这些事儿。

以下主要基于二维视图进行讲解，对于部分变形后的图表展现不会过于赘述，以常用类型举例说明。
具体请看：http://echarts.baidu.com

---

基于数据的可视化组件：色觉暗示、坐标系、标尺、背景信息
色觉暗示：形状、颜色、大小编码数据，选择什么样的数据取决于数据本身和目标
坐标系：用散点图映射数据和与饼图是不一样的，散点图有xy轴，其他有极坐标、直角坐标轴
标尺：有意义的增量可以增强可读性，就像改变焦点一样。线性标尺、对数标尺、分类标尺、顺序标尺、百分比标尺、时间标尺
背景信息：读者对数据不熟，可以阐明数据含义和读图方式
视觉暗示：可视化数据的时候，用形状、大小、颜色老编码数据。位置、长度、角度、方向、形状、面积、体积、饱和度、色调（排列组合使用）

---

柱形图

定义：显示一段时间内的数据变化或显示各项之间的比较情况，主要使用颜色进行类型区分。XY轴的二维空间体现。
主要用于比较各组数据之间的差别或数据变化情况。

柱状图

1.柱状对比图
颜色进行类型区分，体现一段时间内的变化情况

柱状对比图

2.堆叠柱状图
颜色进行类别区分，同一条柱子下可是设置成类型一样的数据，然后体现时间段内的变化情况

堆叠柱状图

3.条形图
颜色区分类别，体现不同项类型在数值上的差异，从上到下一般是数值由大到小的规则进行排序，即图例所示

条形图

4.堆叠条形图
多种类型数据在一段时间内的变化情况

堆叠条形图

5.瀑布图
展现整体与其组成的个体之间数值的组成关系

瀑布图

总结：柱状图是Y轴为数值，X轴为时间或类型；条形图是Y轴为时间或类型，X轴为数值。

---

折线图

定义：显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。
主要用于趋势分析。

折线图

1.折线对比图
颜色进行类型区分

折线对比图

2.面积图
面积图强调数量随时间而变化的程度

面积图

3.堆叠面积图
体现多种类型随时间变化的程度

堆叠面积图

总结：Y轴是数值，X轴是时间。

---

饼图

定义：显示每一数值相对于总数值的大小。
主要用于各部分占整体的多少说明。（建议饼图不超过8块，百分比按一定规则顺时针排序）

饼图

1.环形饼图
中间内空，与饼图表达数据形式一样

环形饼图

2.嵌套环形图
内部饼图代表一级分类，外部环形图代表一级分类下的二级分类

嵌套环形图

3.南丁格尔玫瑰图
各种类型占整体的比例，如图所示，rose8是100%，rose6是90%，rose7是80%。面积代表大小。

南丁格尔玫瑰图

---

散点图

定义：散点图表示因变量随自变量而变化的大致趋势，据此可以选择合适的函数对数据点进行拟合。顾名思义，就是散落的点去表达信息。
主要用于查找变量之间的相关性。

散点图

1.散点图
二维视图中的散点图，用于发现X、Y轴代表变量的关系，颜色代表类型

散点图

2.气泡图
图中有4个变量，X轴为时间，Y轴为AQI指数，气泡大小为PM2.5的值大小，颜色深浅为二氧化硫的值。注意气泡大小是气泡面积表达，不是按照圆的直径。

气泡图

总结：使用X、Y，气泡大小，颜色等表达变量信息，探查数据关系。

---

雷达图

定义：集中划在一个圆形的图表上，来表现一个整体中的各项个体比率的情况
主要用于各项指标整体情况分析。（建议指标不要超过20项）

雷达图

雷达图-1

---

地图

定义：按一定的比例运用符号、颜色、文字注记等描绘显示地球表面的自然地理、行政区域、社会经济状况的图形。
主要用于体现地理位置上各项数据的情况。

地图

---

矩形树图

主要用于整体中各个子项目占整体的多少。

矩形树图

---

桑基图

定义：它是一种特定类型的流程图，图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。桑基图最明显的特征就是，始末端的分支宽度总各相等，即所有主支宽度的总和应与所有分出去的分支宽度的总和相等，保持能量的平衡。
电商进行流量来源去向分析时，常用桑基图表示

桑基图

---

漏斗图

电商领域中，主要是基于用户行为步骤，查看转化率情况

漏斗图

---

仪表盘

定义：清晰的看出某个指标值所在的范围，达成率。
较多用于管理驾驶舱呈现

仪表盘

---

热力图

定义：以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。
热力图常用于网页点击、道路交通、销售分布等，比如：打车软件司机端有订单发送的热力图，司机可以根据图像所示，去客流较多的地方增加接单率

1.网页点击热力图
颜色越深，数值越大

点击热力图

2.交通出行热力图
颜色越深，说明路段越拥堵

交通路线

3.笛卡尔坐标系上的热力图
主要用于活跃程度的体现，比如个人在某个网站的活跃率

笛卡尔坐标系上的热力图

---

箱线图

定义：常用的统计量，能提供有关数据位置和分散情况的关键信息，尤其在比较不同的母体数据时更可表现其差异。

箱线图

箱线图说明

---

旋风图

旋风图可以为上金字塔形，和下金字塔形状，主要用于2个不同类型之间的比较，分为左右两个轴，制作的时候以其中一个轴的数据按数据大小排列后为基准。

旋风图

---

日历图

可以用于表达日历上某指标的的大小，一般是底色深浅表达数值的多少。

日历图

---

小技能：
数据、图表、颜色搭配缺一不可，Google搜索可以用关键词+visualization，然后查看图片。

简单清晰的用适当的图表展示正确的数据，说明所表达的信息。图表简易，表达不易，且行且用之以意，期望对大家有所帮助。

---

期望对各位看官有收获，若喜欢，记得打赏、关注、点赞_{O(∩_∩)O}
小罗出品

---