个人主页 ： zxctscl 如有转载请先通知
文章目录
1. 前言2. 绘制散点图2.1 绘制基本散点图2.2 绘制两个序列的散点图2.3 绘制带涟漪特效的散点图
3. 绘制气泡图3.1 绘制标准气泡图3.2 绘制各国人均寿命与GDP气泡图3.3 绘制城市A、城市B、城市C三个城市空气污染指数气泡图
4. 绘制仪表盘4.1 绘制单仪表盘4.2 绘制多仪表盘
5. 绘制漏斗图或金字塔6. 绘制雷达图、词云图和矩形树图6.1 绘制雷达图6.1.1 绘制基本雷达图6.1.2 绘制多雷达图
6.2 绘制词云图6.3 绘制矩形树图
1. 前言
上次提到了【数据可视化】Echarts最常用图表，其中还有一些图需要了解，这次来分享一下。
2. 绘制散点图
在大数据时代，人们更关注数据之间的相关关系而非因果关系。散点图既能用来呈现数据点的分布，表现两个元素的相关性，又能像折线图一样表示时间推移下的发展趋势。
散点图（Scatter）是由一些散乱的点组成的图表。因为其中点位置是由其x值和y值确定的，所以也称为XY散点图。 散点图又称散点分布图，是以一个变量为横坐标，另一变量为纵坐标，利用散点（坐标点）的分布形态反映变量统计关系的一种图形，因此，需要为每个散点至少提供两个数值。 散点图的特点是能直观表现出影响因素和预测对象之间的总体关系趋势，优点是能通过直观醒目的图形方式反映变量间关系的变化形态，以便决定用何种数学表达方式来模拟变量之间的关系。 散点图的核心思想是研究，适用于发现变量间的关系与规律，不适用于清晰表达信息的场景。在默认情况下，散点图以圆点显示数据点。如果在散点图中有多个序列，那么可以考虑每个点的标记更改为方形、三角形、菱形或其他形状。
通过观察散点图上数据点的分布情况，可以推断出变量间的相关性。如果变量之间不存在相互关系，散点图上就会表现为随机分布的离散的点；如果存在某种相关性，那么大部分的数据点就会相对密集并以某种趋势呈现。 数据的相关关系主要分为正相关（两个变量值同时增长）、负相关（一个变量值增加，另一个变量值下降）、不相关、线性相关、指数相关、U形相关等，表现在散点图上的大致分布如图所示。那些离点集群较远的点我们称其为离群点或者异常点。
2.1 绘制基本散点图
基本散点图可用于观察两个指标的关系。利用男性和女性身高、体重数据观察身高和体重两者间的关系。
如图所示。 由图可知，身高与体重基本上呈现出一种正相关的关系，即身高越高，体重也相应增加。另外，还可以发现，身高主要集中在1.62米和1.72米之间。
2.2 绘制两个序列的散点图
与绘制基本散点图实例不同的是，当利用两个序列分别代表男性和女性的身高、体重时，得到的结果
如图所示： 由图可知，两种不同灰度分别表示了男性和女性不同序列的数据，并分别标记出了数据中男性和女性体重的最大值、最小值和平均值
2.3 绘制带涟漪特效的散点图
在ECharts中，通过使用effectScatter参数可以设置带有涟漪特效动画的ECharts散点（气泡）图。利用男性和女性的身高和体重数据进行动画特效可以将某些想要突出的数据进行视觉突出。
如图所示 由图可知，分别对 [153.4, 42]、[172.7, 87.2]两个点设置了涟漪特效。其中涟漪特效的位置、大小、绘制方式等，可以根据自身的需求进行设置。
3. 绘制气泡图
上一次介绍过的散点图，只含有两个变量。如果还想要再增加变量，那么可以使用点的大小来表示。因为图中包含大小不一致的点，像气泡一样，所以称这种图为气泡图（bubble）。 因此，气泡图与散点图不同的是，气泡图是在基础散点图上添加一个维度，即用气泡大小表示一个新的维度。 此外，气泡图与散点图最直观的区别在于：散点图中的数据点长得大小一样，气泡图中的气泡却大小各不相同。
3.1 绘制标准气泡图
标准气泡图可用于观察3个指标的关系。利用由系统使用随机函数自动生成的100个元素观察每个元素中3个数值的关系
在标准气泡图实例代码中，共有两组气泡数组bubble1和bubble2。 每组气泡数组中有100个元素，数组中每个元素具有3个数值，这3个数值是由系统使用随机函数自动生成的。 元素的前两个值为范围在（-90,90）之间的随机数，用于表示数据的位置。 元素的第3个值是范围为[0,90)的随机数，用于表示气泡的大小。
如图所示
由图可知，在图中，出现了两种灰度的气泡，分别为bubble1和bubble2，并且每一个气泡的大小都不相同。
3.2 绘制各国人均寿命与GDP气泡图
利用1990年和2015年各国人均寿命与GDP数据，观察人均GDP、人均寿命、总人口、国家名称和年份5个指标的关系
如图所示
由图可知，横坐标表示人均GDP，纵坐标表示人均寿命，圆圈的大小表示该国的人口数量，不同灰度代表着年份。当鼠标指向图中的某个圆圈时，就会在圆圈的上面显示这个圆圈所代表的国家和所对应的年份。
3.3 绘制城市A、城市B、城市C三个城市空气污染指数气泡图
利用城市A、城市B、城市C三个城市空气污染指数数据，观察AQI指数（空气质量指数）、PM2.5、二氧化硫（SO2）等指标的关系
如图所示
由图可知，横坐标表示当月的天数，纵坐标表示AQI指数，圆圈的大小表示当天的PM2.5的值，圆圈的明暗代表当天二氧化硫的值。当鼠标指向图中的某个圆圈时，就会显示这个城市当天的空气污染指数的各种不同的数值。
由前面提到的散点图和气泡图可知，在绘制散点图时使用大规模数据得到的绘制效果将会较好。 同时，对散点图添加一些标记或特效，可以增强散点图的可读性。 气泡图适用于研究3个变量之间的相关关系和分布情况，其中不同的气泡大小对增强特定值的视觉效果有较好的成效。
4. 绘制仪表盘
仪表盘（Gauge）也被称为拨号图表或速度表图，用于显示类似于速度计上的读数的数据，是一种拟物化的展示形式。 仪表盘是常用的商业智能（BI）类的图表之一，可以轻松展示用户的数据，并能清晰地看出某个指标值所在的范围。 为了更直观地查看项目的实际完成率数据，以及汽车的速度、发动机的转速、油表和水表的现状，需要在ECharts中绘制单仪表盘和多仪表盘进行展示。
4.1 绘制单仪表盘
ECharts的主要创始者林峰曾经说过，他在一次漫长的拥堵当中，有机会观察和思考仪表盘的问题，突然间意识到仪表盘不仅是在传达数据，而且能传达出一种易于记忆的状态，并且影响人的情绪，这种正面或负面的情绪影响对决策运营有一定的帮助。 在仪表盘中，仪表盘的颜色可以用于划分指示值的类别，而刻度标示、指针指示维度、指针角度则可用于表示数值。
仪表盘只需分配最小值和最大值，并定义一个颜色范围，指针将显示出关键指标的数据或当前进度。仪表盘可应用于诸如速度、体积、温度、进度、完成率、满意度等。
利用项目实际完成率数据观察项目的完成情况
如图所示
由图可知，使用3种不同的灰度表示项目的实际完成情况。其中，左下角区域提示项目实际完成率过低，而变动的指针与下方随之变动的数字同时指示出当前的实际完成率。
4.2 绘制多仪表盘
前面介绍的单仪表盘，相对比较简单，只能表示一类事物的范围情况。 如果需要同时表现几类不同事物的范围情况，那么应该使用多仪表盘进行展示。利用汽车的速度、发动机的转速、油表和水表的数据展示汽车的现状
如图所示。 由前面介绍的单仪表盘和多仪表盘可知，仪表盘非常适合在量化的情况下显示单一的价值和衡量标准，不适用于展示不同变量的对比情况或趋势情况。 此外，仪表盘上可以同时展示不同维度的数据，但是为了避免指针的重叠，影响数据的查看，仪表盘的指针数量建议最多不要超过3根。如果确实有多个数据需要展示，建议使用多个仪表盘。
5. 绘制漏斗图或金字塔
漏斗图（Funnel）或金字塔是一个倒（正）三角形的条形图，适用于业务流程比较规范、周期较长、环节较多的流程分析。 漏斗图也是常用的BI类图表之一，通过漏斗图或金字塔对各环节业务数据进行比较，不仅能够直观地发现和说明问题，而且可以通过漏斗图分析销售各环节中哪些环节出了问题。 为了更直观地查看电商网站数据，需要在ECharts中绘制基本漏斗图、 基本金字塔、多漏斗图和多金字塔进行展示。
漏斗图又称倒三角图，漏斗图将数据呈现为几个阶段，每个阶段的数据都是整体的一部分；从一个阶段到另一个阶段，数据占比自上而下下降 ，所有阶段数据的占比总计100％ 。与饼图一样，漏斗图呈现的也不是具体的数据。 此外，漏斗图还不需要使用任何数据轴。
在电商网站中，一个完整的网上购物步骤大致可分为：浏览网站选购商品→添加购物车→购物车结算→核对订单信息→提交订单→选择支付方式→完成支付。 某电商网站各购物步骤数据，如表所示。
利用电商网站各购物步骤数据展示整个网上购物中各步骤的整体转化率
如图所示
由图可以直观地看出从最初“浏览网站选购商品”到最终“完成支付”这整个流程中的转化状况。此外，不仅能看出用户从“浏览网站选购商品”到“完成支付”的最终转化率，还可看出每个步骤的转化率，能够直观地展示和说明问题所在。
把图表配置项中的series中的sort的取值由‘descending’改为‘ascending’时，就由漏斗图变为金字塔，如图所示。 前面介绍的标准漏斗图或金字塔，相对比较简单。单一的漏斗图反映的数据过于单一，无法进行比较，有时就会失去分析的意义。利用用户购买流程优化前后的数据比较前后占比的变化
如图所示
由图可知，实际上显示了两个漏斗图和两个金字塔。在观察上下的漏斗图 和金字塔时，可以明显地看出两组数据有着一定的差异。
由前面介绍的标准漏斗图和多漏斗图可知，漏斗图适用于业务流程比较规范、周期较长、环节较多的流程分析。 漏斗图并不是表示各个分类的占比情况，而是展示数据变化的一个逻辑流程。 如果数据是无逻辑顺序的占比比较，那么使用饼图更合适。 在漏斗图中，可以根据数据选择使用对比色或同一种颜色的色调渐变，从最暗到最浅来依照漏斗的尺寸排列。但是，当添加过多的图层和颜色时，会造成漏斗图难以阅读。
6. 绘制雷达图、词云图和矩形树图
雷达图（Radar）又称戴布拉图、蜘蛛网图、蜘蛛图，适用于显示3个或更多维度的变量，如学生的各科成绩分析。 而词云图又称文字云，是使用颜色和大小展示文本信息的一种图形。 矩形树图又称树状图，适合展现具有层级关系的数据。 为了更直观地查看各教育阶段男女人数统计、浏览器占比变化、某软件性能、全球编程语言的TIOBE排名、客户人数等数据，需要在ECharts中绘制基本雷达图、复杂雷达图、多雷达图、词云图和矩形树图进行展示。
6.1 绘制雷达图
雷达图将多个维度的数据映射到坐标轴上，这些坐标轴起始于同一个圆心点，通常结束于圆周边缘，将同一组的点使用线连接起来就成了雷达图。 在坐标轴设置恰当的情况下，雷达图所围面积能表现出一些信息量。雷达图把纵向和横向的分析比较方法结合起来，可以展示出数据集中各个变量的权重高低情况，适用于展示性能数据。 雷达图不仅对于查看哪些变量具有相似的值、变量之间是否有异常值有效，而且可用于查看哪些变量在数据集内得分较高或较低。此外，雷达图也常用于排名、评估、评论等数据的展示。
6.1.1 绘制基本雷达图
利用各教育阶段男女人数统计数据查看男女学生在各教育阶段的人数高低情况，如图所示。 由图可知，显示了各教育阶段的男女人数的统计。同时可以看出，在高中和硕士阶段，男女学生人数相差不大，而在博士阶段，男女学生人数则相差较大。
基本雷达图是一个比较简单的雷达图。当利用浏览器占比变化数据绘制稍为复杂的雷达图时，如图所示。
由图可知，显示了各个浏览器占比的预测，并加了一个visualMap组件（视觉映射组件），即把数据的哪个维度映射到什么视觉元素上。此外，还增加了一个滚动图例。
6.1.2 绘制多雷达图
前面介绍过的基本雷达图，只能表示一类事物的维度变量。当想要同时表现几类不同事物的维度变量时，就需要使用多雷达图进行展示。利用某软件的性能、小米与苹果手机的功能、降水量与蒸发量的数据展示出3类数据中的不同维度变量
<
如图所示。 由图可知，显示了3个不同的雷达图。当鼠标移动到图中的某一个雷达图的维度时，会显示出这一个维度的详细信息。
6.2 绘制词云图
词云图（WordCloud）是对文本中出现频率较高的“关键词”予以视觉化的展现，词云图可以过滤掉大量的低频低质的文本信息，使得浏览者只要一眼扫过文本就可领略文本的主旨。 词云图是一种非常好的图形展现方式，这种图形可以让人们对一个网页或者一篇文章进行语义分析，也就是分析同一篇文章中或者同一网页中关键词出现的频率。词云图对于产品排名、热点问题或舆情监测是十分有帮助的。 在最新版Echarts 4.ｘ官网中，已不再支持词云图功能，也找不到相应的API。若需要进行词云图开发，则需要引入echarts.js文件，再通过命令引入echarts-wordcloud.min.js文件。 echarts-worldcloud的github地址： https://github.com/ecomfe/echarts-wordcloud
利用2019年10月全球编程语言的TIOBE排名数据展现其中的文本信息 如图所示
由图可知，每个文本都呈现出不同的大小和灰度 。此外，C、Java、Python这3个文本明显呈现出与其它文本不同的大小，这说明了这3个词的值也都会相对大于其他文本的值。
6.3 绘制矩形树图
矩形树图（Treemap）是用于展现有群组、层次关系的比例数据的一种分析工具。 它不仅可以通过矩形的面积、排列和颜色来显示复杂的数据关系，并具有群组、层级关系展现的功能，而且能够直观地体现同级之间的比较，呈现树状结构的数据比例关系。
某公司中各销售经理带领的销售代表某月接待客户人数数据，如表所示:
利用某公司中各销售经理带领的销售代表某月接待客户人数数据展示销售经理、销售代表和客户人数之间的层次关系，如图所示。
由图可知，图中的矩形出现了3种不同的灰度和面积。其中，每一种灰度代表一位销售经理，而面积的大小则代表着客户人数。
由前面介绍的雷达图、词云图和矩形树图可知，一个雷达图包含的多边形数量是有限的，当有5个以上要评估的事物时，无论是轮廓还是填充区域，都会产生覆盖和混乱，使得数据难以阅读。 同时，当雷达图变量过多时，将会产生过多的轴，从而使图表变得混乱。因此，需要保持雷达图的简单并限制其变量数量。而词云图是对文本中出现频率较高关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容。 此外，词云图对于产品排名、热点问题或舆情监测等问题十分有帮助。而矩形树图适合展现具有层级关系的数据，能更有效地利用空间，并且拥有展示占比的功能。但是当分类占比太小的时候，文本会变得很难排布，会使得矩形树图的树形数据结构表达得不够直观、明确。
有问题请指出，大家一起进步！！!
精彩内容
发表评论