《Web数据可视化（ECharts版》完整版电子课件.pptx

1、全全 册册 课课件件数据可视化概述目目录录1认识数据可视化认识ECharts2认识开发者工具3随着移动互联网技术的发展，网络空间的数据量呈现出爆炸式增长。如何从这些数据中快速获取自己想要的信息，并以一种直观、形象甚至交互的方式展现出来？这是数据可视化要解决的核心问题。从数字可视化到文本可视化，从折线图、条形图、饼图到文字云、地图，从数据可视化分析到可视化平台建设，数据可视化越来越成为企业核心竞争力的一个重要组成部分。ECharts作为百度推出的一款十分流行的开源免费可视化工具，简单易学、功能强大、计算迅速。数据可数据可视视化概述化概述数据可视化是一种将抽象、枯燥或难以理解的内容以可视的、交互的

2、方式进行展示的技术，它能够借助于图形的方式更形象、直观地展示数据蕴含的事物原理、规律、逻辑。数据可视化是一门横跨计算机科学、统计学、心理学的综合学科，并将随着大数据和人工智能的兴起而进一步繁荣。早期的数据可视化作为咨询机构、金融企业的专业工具，其应用领域较为单一，应用形态较为保守。当今，随着云计算和大数据时代的来临，各行各业对数据的重视程度与日俱增，随之而来的是对数据进行一站式整合、挖掘、分析，可视化的需求日益迫切，数据可视化呈现出愈加旺盛的生命力。视觉元素越来越多样是其中的一种表现，从常用的柱状图、折线图、饼图，扩展到地图、气泡图、树图、仪表盘等各种图形。同时，可用的开发工具越来越丰富，从专

3、业的数据库/财务软件，扩展到基于各类编程语言的可视化库，相应的应用门槛也越来越低。了解数据可视化的定义及特性目前的数据可视化工具必须具有以下特性。实时性：数据可视化工具必须适应大数据时代数据量的爆炸式增长需求，必须快速地收集、分析数据并对数据信息进行实时更新。简单操作：数据可视化工具应满足快速开发、易于操作的特性，能顺应互联网时代信息多变的特点。更丰富的展现：数据可视化工具需具有更丰富的展现方式，能充分满足数据展现的多维度要求。多种数据集成支持方式：由于数据的来源不仅仅局限于数据库，所以数据可视化工具应支持团队协作数据、数据仓库、文本等多种方式，并能够通过互联网进行展现。了解数据可视化的定义及

4、特性数据是现实生活的一种映射，其中隐藏着许多故事，这些故事有些非常简单直接，有些则颇为迂回费解，有些像教科书，有些则体裁新奇。数据的故事无处不在，涵盖了企业运营、新闻报道、人文艺术、政治经济、日常生活等方面。从图可以看出，从2001年至2010年，美国共发生了363839起致命的公路交通事故，这个总数代表着逝去的生命。将所有的注意力放在这个数字上，能引起人们进行深思与反省。了解数据中蕴含的信息右图显示了每年发生的致命交通事故数，与左图不同的是，图1-2不是简单地展示一个总数，通过图还可以看出，从2006年到2010年，交通事故数整体呈下降趋势。了解数据中蕴含的信息下图显示了交通事故发生的季节性

5、变化。在图中，柱子代表月份，可以看出夏季是事故多发期，可能是此时外出旅游的人较多；而冬季事故少很多，可能是开车出门旅行的人相对较少。每年都是如此。同时，还可以看出2006年到2010年的事故数呈下降趋势。了解数据中蕴含的信息下图使用一条最为常用的线形图，描述了2019年春运期间部分时间内全国高速拥堵趋势。较春运开始，春节前2天（腊月二十九、三十），全国高速拥堵程度相对较低；春节返程期间，2月10日（正月初六）为返程拥堵最高峰。了解数据中蕴含的信息一般的故事都是过去已发生的，但是，在双折线图中，显示的是将来的“故事”，即未来一周的气温变化情况。从图可以看出，从周一到周四，最高气温将一直上升，到周

6、四时最高气温将上升到38，然后将又开始缓慢下降，到星期天将略有上升，最低气温也基本同步变化，在周二时将达到最低气温9。了解数据中了解数据中蕴蕴含的信息含的信息了解数据可了解数据可视视化的作用化的作用通过数据可视化，人们可以从数据中寻找到什么呢？目前，数据可视化的作用可分为3个方面：模式、关系和发现异常。不管图形表现的是什么，这三者都是应该留心观察的。1.模模式式模式是指数据中的某些规律，通常能够折射出数据中所隐含的一些规律。由图所示是从国家统计局得到的我国1978年到2014年年末总人口数的数据。将数据用柱状图展示，并拟合趋势线后，可以发现，从1978年到2014年，我国年末总人口数基本呈线性

7、增长的态势，这个增长可以用y1158.8x97741定量反映。另外，从1978年到2014年年末总人口数图形中还可以发现，实际人口数与拟合数据存在一定的关系。根据这种关系，可以将我国这些年的人口增长分为3个阶段：第1个阶段是1978年到1987年前后，这个时间段实际总人口的数量基本小于拟合数据，可以理解为实际人口数比拟合数据低；第2个阶段是1987年到2007年，这个阶段实际人口数量基本大于拟合数据；第3个阶段是2008年前后，实际人口数量又低于拟合数据。那么1987年前后和2008年前后，可以假定为异常点。这种人口数量的变化状态和异常点的出现，比较大的可能是与国家的人口政策有较强的关联性。了

8、解数据可了解数据可视视化的作用化的作用例如，图所示的是我国1978年至2014年城乡总人口数的情况，图中有两个值得注意的时间点。1995年之前，城镇人口和乡村人口都处于增长状态，但乡村人口增长的速度较慢；1995年之后，乡村人口数量快速下降，而城镇人口数量快速上升。在2010年，城镇人口（66 978万人）和乡村人口（67 113万）几乎相等；从2011年开始，我国城镇人口数量超过了乡村人口数量。这种人口数量的变化，对于我国的政治、经济、文化和社会的方方面面将产生深远的影响。了解数据可了解数据可视视化的作用化的作用2.关关系系关系是指各影响因素之间的相关性，也指各个图形之间的关联。在统计学中，

9、它通常代表关联性和因果关系。多个变量之间应该存在着某种联系。例如，在散点图中，可以观察到两个坐标轴两个字段之间的相关关系是正相关还是负相关，或是不相关。如此，即可依次找到与因变量具有较强相关性的变量，从而确定主要的影响因素。使用散点图描述了男性与女性身高、体重的分布关系。从图中可以看出，身高与体重基本上呈正相关关系。了解数据可了解数据可视视化的作用化的作用3.异异常常异常值是指样本中的个别值，其数值明显偏离其余的观测值。异常值也称为离群点，异常值的分析也称为离群点分析。例如，某客户年龄为222岁，则该变量的取值存在异常。在用数据讲述故事时，应该对自己所看到的数据保持质疑态度。数据检验并不是数据

10、制图过程中最关键的一步。但是，就像可靠的建筑师不会用劣质水泥建造房屋一样，在实际运用中也不能用劣质的数据绘制数据图。了解数据可了解数据可视视化的作用化的作用数据可视化流程类似一个特殊的流水线，主要步骤之间相互作用、相互影响。数据可视化流程的基本步骤为确定分析目标、数据收集、数据清洗和规范、数据分析、可视化展示与分析，具体介绍如下。1.确定分析目确定分析目标标根据现阶段的热点时事或社会较关注的现象，确定此次可视化的目标，并根据这个目标进行一些准备工作，如设计贴合目标的问卷。其中，准备工作中主要包括的内容有遇到了什么问题、要展示什么信息、最后想得出什么结论、验证什么假说等。数据承载的信息多种多样，

11、不同的展示方式会使侧重点有天壤之别。只有想清楚以上问题，才能确定需要过滤什么数据、用什么算法处理数据、用什么视觉通道编码等。2.数据收数据收集集依照第一步制订的目标收集数据。目前，数据收集的方式有很多种，如从公司内部获取历史数据、从数据网站中下载所需的数据、使用网络爬虫自动爬取数据、通过发放问卷与电话访谈形式收集数据等。了解数据可了解数据可视视化流程化流程3.数据清洗和数据清洗和规规范范数据清洗和规范是数据可视化流程中必不可少的步骤。首先需要过滤“脏数据”、敏感数据，并对空白的数据进行适当处理，其次剔除与目标无关的冗余数据，最后将数据结构调整为系统能接受的方式。4.数据分数据分析析数据分析是数

12、据可视化流程的核心，将数据进行全面且科学的分析，联系多个维度，根据类型确定不同的分析思路。数据分析中最简单的方法是一些基本的统计方法，如求和、中值、方差、期望等，而数据分析中复杂的方法包括了数据挖掘中的各种算法。5.可可视视化展示与分化展示与分析析可视化展示与分析是数据可视化流程中的一个重点步骤。其中，用户需要选择合适的图表对数据进行可视化展示，才能对最后呈现的可视化结果进行分析，直观、清晰地发现数据中的差异，并从中提取出对应的信息，最终根据获取信息提出科学的建议，从而帮助公司运营。了解数据可了解数据可视视化流程化流程欲善其事，必先利其器。一款好的工具可以让工作事半功倍、如虎添翼，尤其是在大数

13、据时代，更需要强有力的工具来实现数据可视化。数据可视化工具发展得相当成熟，已产生了成百上千种数据可视化工具。其中，许多工具是开源的，能够共同使用或嵌入已经设计好的应用程序，并具有数据可交互性。了解常用的数据可了解常用的数据可视视化工具化工具1.EChartsECharts为百度出品的一个开源的交互式可视化库，其使用Javascript进行实现，并可以流畅地运行在PC和移动设备上，同时兼容当前绝大部分浏览器。此外，ECharts底层依赖轻量级的矢量图形库ZRender，可提供直观、交互丰富、高度个性化定制的数据可视化图表。ECharts是本书将重点介绍的内容，后面将对其进行详细的介绍。了解常用的

14、数据可了解常用的数据可视视化工具化工具2.MatlabMatlab作为科学计算与数据可视化的利器，拥有着强大的数值计算功能和数据可视化能力。在现实生活中，抽象的数据往往晦涩难懂，但是Matlab通过图形编辑窗口和绘图函数能方便地绘制二维、三维甚至多维图形，可以实现将杂乱离散的数据以形象的图形显示出来，并有助于了解数据的性质和内存联系。右图为使用Matlab绘制的饼图。了解常用的数据可了解常用的数据可视视化工具化工具3.PythonPython是一种面向对象的解释型计算机程序设计语言，为大数据与人工智能时代的首选语言。Python具有简洁、易学、免费、开源、可移植、面向对象、可扩展等特性，因此也

15、常被称为胶水语言。PYPL（PopularityofProgrammingLanguage）根据Google上的搜索频率进行统计，Python语言在2019年已经连续几个月排名第一。在2019年5月份的榜单中，Python更是以绝对优势遥遥领先，这与Python语言的特性有关。了解常用的数据可了解常用的数据可视视化工具化工具Python不仅具有丰富和强大的库，而且应用场景非常广泛。从科学计算、自动化测试、系统运维、云计算、大数据、系统编程，到数据分析、数据可视化、网络爬虫、Web开发、人工智能、工程和金融领域，Python都有较广泛的应用。此外，对于数据可视化编程，Python语言有一系列的数

16、据可视化包（Packages），包括Matplotlib、pandas、seaborn、ggplot、Plotly、PlotlyExpress、Bokeh、Pygal等。下图为使用Python绘制的火柴杆图。了解常用的数据可了解常用的数据可视视化工具化工具4.R语语言言R语言是一种优秀的、具有很强数据可视化功能的语言，不仅开源、免费，而且可在UNIX、Windows和macOS上运行，R语言设计的目的是用于统计计算和统计制图。R语言是完全靠代码实现绘图的，但是R语言一般用于绘制静态的统计报告，比较适合数据探索和数据挖掘，同时R语言能够利用一些程序包绘制交互性图表。R语言拥有大量数据可视化包，如

17、ggplot2、gridExtra、lattice、plotly、recharts、highcharter、rCharts、leaflet、RGL等。其中，ggplot2是R语言中功能最为强大、最受欢迎的绘图工具包；lattice适合入门级选手，作图速度较快，能进行三维绘图；gridExtra能将ggplot2作出来的几张图拼成一张大图；而plotly、recharts、highcharter、rCharts、leaflet则擅长绘制交互图表；RGL则是绘制三维图形的利器。了解常用的数据可了解常用的数据可视视化工具化工具下图展示了地理学家James Cheshire博士和设计师Oliver U

18、berti绘制的英格兰南部通勤者起讫点流，使用R语言中数据可视化包ggplot2中的geom_segment()命令，绘制出了起讫点重心间纤细透明的白色线条。了解常用的数据可了解常用的数据可视视化工具化工具5.D3D3（Data-DrivenDocuments）是一个被数据驱动的文档。简而言之，D3是一个Javascript的函数库，主要用于进行数据可视化。由于Javascript文件的后缀名通常为.js，所以D3也常使用D3.js来称呼。D3是目前最受欢迎的可视化JS库之一，允许绑定任意数据到DOM，并将数据驱动转换应用到Document中，使用它也可以用一个数组创建基本的HTML表格，或利

19、用它的流体过渡和交互，将相似的数据创建为惊人的SVG图。D3兼容大多数浏览器，同时避免对特定框架的依赖。了解常用的数据可了解常用的数据可视视化工具化工具D3虽然并不是对用户最友好的工具，但它在Javascript绘图界的重要性不可小觑。D3支持标准的Web技术（HTML、SVG和CSS），并且有着海量的用户贡献内容弥补它缺乏自定义内容的缺陷。因此，D3更适合在互联网上互动地展示数据。右图是使用D3技术所绘的图形。了解常用的数据可了解常用的数据可视视化工具化工具6.HighchartsHighcharts是一个使用纯Javascript编写的图表库，能够简单便捷地在Web网站或Web应用程序中添

20、加有交互性的图表。Highcharts不仅免费提供给个人、个人网站并可供非商业用途使用，而且支持的常见图表类型多达20种，其中很多图表可以集成在同一个图形中形成混合图。Highcharts的主要优势如下。1兼容性好：Highcharts可以在所有的移动设备及计算机的浏览器中使用，包括iPhone、iPad和IE6以上的版本；在iOS和Android系统中，Highcharts支持多点触摸功能，因而可以提供极致的用户体验。在现代的浏览器中，使用SVG技术进行图形绘制；在低版本IE浏览器中，则使用VML进行图形绘制。2非商业使用免费：Highcharts可以在个人网站、学校网站和非营利机构中使用。

21、3开源：Highcharts最重要的特点之一就是无论是免费版还是付费版，用户都可以下载源码并对其进行编辑。了解常用的数据可了解常用的数据可视视化工具化工具4纯Javascript：Highcharts完全基于HTML5技术，不需要在客户端安装任何插件，如Flash或Java。此外用户也不用配置任何服务端环境，只需要两个JS文件即可运行。5简单的配置语法：在Highcharts中设置配置选项不需要任何高级的编程技术，所有的配置都是JSON对象，只包含用冒号连接的键值对，用逗号进行分割，用括号进行对象包裹。此外，JSON具有易于阅读编写、易于机器解析与生成的特点。6动态交互性：Highcharts

22、具有丰富的交互性，在图表创建完毕后，可以用丰富的API进行添加、移除或修改数据列、数据点、坐标轴等操作。同时，结合jQuery的ajax功能，Highcharts可以实现实时刷新数据、用户手动修改数据等功能。此外，结合事件处理，Highcharts可以实现各种交互功能。了解常用的数据可了解常用的数据可视视化工具化工具由于具有以上优势，Highcharts已经被成千上万的开发者使用。下图为使用Highcharts绘制的复杂条形图。了解常用的数据可了解常用的数据可视视化工具化工具7.FusionChartsFusionCharts是Flash图形方案供应商InfoSoftGlobal公司的一个跨平

23、台、跨浏览器的图表组件解决方案，它可用于任何网页的脚本语言，如HTML、NET、ASP、JSP、PHP和ColdFusion等。FusionCharts不仅具有互动性并提供强大的图表，而且支持Javascript、jQuery、Angular等一系列高人气的库和框架。用户在使用FusionCharts时，不需要知道任何Flash的知识，只需要了解所用的编程语言即可完成图形的绘制。了解常用的数据可了解常用的数据可视视化工具化工具FusionCharts功能十分强大，它内置100多种图表、超过1400多种地图和20多种商业仪表盘，并在全世界117个国家中拥有27000多个用户，如Microsoft

24、、Google和IBM等公司都在使用FusionCharts，这也说明FusionCharts是一个能满足企业级拓展性需求的工具。右图为使用FusionCharts绘制的折线图和堆积图。了解常用的数据可了解常用的数据可视视化工具化工具8.GoogleCharts谷歌浏览器是当前最流行的浏览器之一，而Google Charts（谷歌图表）也是大数据可视化的最佳解决方案之一。Google Charts不仅实现了完全开源和免费，而且得到了Google公司的大力技术支持，因为通过GoogleCharts分析的数据要用于训练Google研发的AI，这样的合作是双赢的。Google Charts提供了大量

25、的可视化类型，包括简单的饼图、时间序列和多维交互矩阵。此外，可供调整的图表选项很多。如果需要对图表进行深度定制，那么可以参考详细的帮助部分。下图为使用GoogleCharts绘制的简单仪表盘（Gauge）。了解常用的数据可了解常用的数据可视视化工具化工具9.Processing.jsProcessing语言2001年诞生于麻省理工学院（MIT）的媒体实验室，主创者为BenFry和CaseyReas。Processing可以认为是一种被简化了的Java，并且是用于绘画和绘图的API，它擅长创建2D与3D图像、可视化数据套件、音频、视频等。Processing拥有轻量级的编程环境，只需几行代码就能

26、创建出带有动画和交互功能的图形，因此很好上手。Processing偏重于视觉思维的创造性，虽然一开始主要是设计师和艺术家使用Processing，但如今它的受众群体已经越来越多样化了。无论如何，对于新手而言，Processing是个很好的起点，即使是毫无经验的用户也能够做出有价值的东西。了解常用的数据可了解常用的数据可视视化工具化工具Processing.js是Processing的姐妹篇，创建的初衷是能够让Processing代码（通常是指sketches）不用修改即可在Web端运行，即使用Processing.js编写processing代码，然后通过Processing.js将proce

27、ssing代码转换成Javascript后运行代码。下图为使用Processing.js绘制的清晰、漂亮的动画。了解常用的数据可了解常用的数据可视视化工具化工具目目录录2认识开发者工具31认识数据可视化认识ECharts认识认识EChartsECharts作为国内可视化生态领域的领军者，不仅免费、开源，而且在高度个性化和交互能力等方面为业界领先，并在拖拽重计算、大规模散点图方面获得了国家专利。此外，EChart还拥有数据视图、值域漫游、子地图模式等独有的功能。了解了解ECharts的的发发展展历历程及程及应应用用目前，诸如百度迁徙、百度司南、百度大数据预测等百度大数据产品的数据可视化均是通过E

28、Charts实现的。ECharts（EnterpriseCharts）为商业级数据图表，是百度旗下的一款开源、免费的可视化图表工具，它是纯Javascript的图表库，可以流畅地运行在PC和移动设备上。ECharts不仅兼容当前绝大部分浏览器（如Chrome、IE6/7/8/9/10/11、Firefox、Safari等），而且底层依赖轻量级的Canvas类库ZRender，提供了直观、生动、可交互、可高度个性化定制的数据可视化图表。此外，ECharts创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。了解了解ECharts的的发发展展历历程及

29、程及应应用用ECharts是一个正在打造拥有互动图形用户界面的数据可视化工具，是一个深度数据互动可视化的工具。ECharts的目标是在大数据时代重新定义数据图表。ECharts自2013年6月30日发布1.0版本以来，已有73个子版本的更新，平均每个月至少有1个子版本的更新。2018年1月16日，全球著名开源社区Apache基金会宣布“百度开源的ECharts项目全票通过进入Apache孵化器”。这是百度第一个进入国际顶级开源社区的项目，也标志着百度开源正式进入开源发展的快车道。了解了解ECharts的的发发展展历历程及程及应应用用目前，ECharts在GitHub上拥有2.5万的关注量和20

30、00多的相关项目，并在大量社区的反馈和贡献下不断地迭代进化。ECharts的重大版本更新如下。（1）2013年6月30日，ECharts正式发布1.0版本。（2）2014年6月30日，ECharts发布2.0版本。（3）2016年1月12日，ECharts发布3.0版本。（4）2018年1月16日，ECharts发布4.0版本。本书使用的ECharts版本是4.8版本。了解了解ECharts的的发发展展历历程及程及应应用用ECharts成为Apache孵化器项目之前，已经是国内可视化生态领域的领军者，近年连续被开源中国评选为“年度最受欢迎的中国开源软件”，并广泛应用于各行业企业、事业单位和科研

31、院。目前，在百度内部，ECharts不仅支撑起百度多个核心商业业务系统的数据可视化需求（如凤巢、广告管家、鸿媒体、一站式、百度推广开发者中心、知心业务系统等），而且服务多个后台运维及监控系统（如百度站长平台、百度推广用户体验中心、指挥官、无线访问速度质量监控、凤巢代码质量统计报告等）。ECharts还满足了各行各业的数据可视化需求，包含报表系统、运维系统、网站展示、营销展示、企业品牌宣传、运营收入的汇报分析等方面，涉及金融、教育、医疗、物流、气候监测等众多行业领域，其中甚至包括阿里巴巴、腾讯、华为、联想、小米、国家电网、中国石化、格力电器等公司及单位。了解了解Echarts4.x的特性的特性E

32、Charts作为国内可视化生态领域的领军者，其版本不断更新，功能不断完善，并提供直观、交互丰富、可高度个性化定制的数据可视化图表，从而广泛地被各行业企业、事业单位和科研院所应用。ECharts的特性具体如下。1.丰丰富的可富的可视视化化类类型型ECharts提供了常规的折线图、柱状图、散点图、饼图、K线图、用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、矩形树图、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图、仪表盘，并且支持图与图之间的混搭。除了已经内置的丰富功能的图表，ECharts还提供了自定义系列，只需要传入一个renderItem函数，即

33、可设计出符合自身需求的图形。更棒的是，自定义系列的图形还能和已有的交互组件结合使用。用户可以在下载界面下载包含所有图表的构建文件，如果只需要其中一两个图表，又觉得包含所有图表的构建文件太大，那么也可以在在线构建中选择需要的图表类型后自定义构建。了解了解Echarts4.x的特性的特性2.多多种数据格式无种数据格式无须转换须转换直接使直接使用用ECharts内置的dataset属性（4.0+）支持直接传入包括二维表、key-value等多种格式的数据源，通过简单地设置encode属性即可完成从数据到图形的映射。这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件之间能够共享一份数据而不用复制。为了配合大数据量的展现，ECharts还支持输入TypedArray格式的数据。TypedArray在大数据量的存储中可以占用更少的内存，对GC友好等特性也可以大幅度提升可视化应用