《《Web数据可视化(ECharts版)》整本书课件完整版电子教案全套课件最全教学教程ppt(最新)件.pptx》由会员分享，可在线阅读，更多相关《《Web数据可视化(ECharts版)》整本书课件完整版电子教案全套课件最全教学教程ppt(最新)件.pptx（415页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、数据可视化概述09-3月月-23目录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年年末总人口数的数据。将数据用柱状图展示，并拟合趋势
7、线后，可以发现，从1978年到2014年，我国年末总人口数基本呈线性增长的态势，这个增长可以用y1158.8x97741定量反映。另外，从1978年到2014年年末总人口数图形中还可以发现，实际人口数与拟合数据存在一定的关系。根据这种关系，可以将我国这些年的人口增长分为3个阶段：第1个阶段是1978年到1987年前后，这个时间段实际总人口的数量基本小于拟合数据，可以理解为实际人口数比拟合数据低；第2个阶段是1987年到2007年，这个阶段实际人口数量基本大于拟合数据；第3个阶段是2008年前后，实际人口数量又低于拟合数据。那么1987年前后和2008年前后，可以假定为异常点。这种人口数量的变化
8、状态和异常点的出现，比较大的可能是与国家的人口政策有较强的关联性。了解数据可视化的作用例如，图所示的是我国1978年至2014年城乡总人口数的情况，图中有两个值得注意的时间点。1995年之前，城镇人口和乡村人口都处于增长状态，但乡村人口增长的速度较慢；1995年之后，乡村人口数量快速下降，而城镇人口数量快速上升。在2010年，城镇人口（66978万人）和乡村人口（67113万）几乎相等；从2011年开始，我国城镇人口数量超过了乡村人口数量。这种人口数量的变化，对于我国的政治、经济、文化和社会的方方面面将产生深远的影响。了解数据可视化的作用关系是指各影响因素之间的相关性，也指各个图形之间的关联。
9、在统计学中，它通常代表关联性和因果关系。多个变量之间应该存在着某种联系。例如，在散点图中，可以观察到两个坐标轴两个字段之间的相关关系是正相关还是负相关，或是不相关。如此，即可依次找到与因变量具有较强相关性的变量，从而确定主要的影响因素。使用散点图描述了男性与女性身高、体重的分布关系。从图中可以看出，身高与体重基本上呈正相关关系。了解数据可视化的作用2.关系异常值是指样本中的个别值，其数值明显偏离其余的观测值。异常值也称为离群点，异常值的分析也称为离群点分析。例如，某客户年龄为222岁，则该变量的取值存在异常。在用数据讲述故事时，应该对自己所看到的数据保持质疑态度。数据检验并不是数据制图过程中最
10、关键的一步。但是，就像可靠的建筑师不会用劣质水泥建造房屋一样，在实际运用中也不能用劣质的数据绘制数据图。了解数据可视化的作用3.异常数据可视化流程类似一个特殊的流水线，主要步骤之间相互作用、相互影响。数据可视化流程的基本步骤为确定分析目标、数据收集、数据清洗和规范、数据分析、可视化展示与分析，具体介绍如下。1.确定分析目标根据现阶段的热点时事或社会较关注的现象，确定此次可视化的目标，并根据这个目标进行一些准备工作，如设计贴合目标的问卷。其中，准备工作中主要包括的内容有遇到了什么问题、要展示什么信息、最后想得出什么结论、验证什么假说等。数据承载的信息多种多样，不同的展示方式会使侧重点有天壤之别。
11、只有想清楚以上问题，才能确定需要过滤什么数据、用什么算法处理数据、用什么视觉通道编码等。2.数据收集依照第一步制订的目标收集数据。目前，数据收集的方式有很多种，如从公司内部获取历史数据、从数据网站中下载所需的数据、使用网络爬虫自动爬取数据、通过发放问卷与电话访谈形式收集数据等。了解数据可视化流程3.数据清洗和规范数据清洗和规范是数据可视化流程中必不可少的步骤。首先需要过滤“脏数据”、敏感数据，并对空白的数据进行适当处理，其次剔除与目标无关的冗余数据，最后将数据结构调整为系统能接受的方式。4.数据分析数据分析是数据可视化流程的核心，将数据进行全面且科学的分析，联系多个维度，根据类型确定不同的分析
12、思路。数据分析中最简单的方法是一些基本的统计方法，如求和、中值、方差、期望等，而数据分析中复杂的方法包括了数据挖掘中的各种算法。5.可视化展示与分析可视化展示与分析是数据可视化流程中的一个重点步骤。其中，用户需要选择合适的图表对数据进行可视化展示，才能对最后呈现的可视化结果进行分析，直观、清晰地发现数据中的差异，并从中提取出对应的信息，最终根据获取信息提出科学的建议，从而帮助公司运营。了解数据可视化流程欲善其事，必先利其器。一款好的工具可以让工作事半功倍、如虎添翼，尤其是在大数据时代，更需要强有力的工具来实现数据可视化。数据可视化工具发展得相当成熟，已产生了成百上千种数据可视化工具。其中，许多
13、工具是开源的，能够共同使用或嵌入已经设计好的应用程序，并具有数据可交互性。了解常用的数据可视化工具1.EChartsECharts为百度出品的一个开源的交互式可视化库，其使用JavaScript进行实现，并可以流畅地运行在PC和移动设备上，同时兼容当前绝大部分浏览器。此外，ECharts底层依赖轻量级的矢量图形库ZRender，可提供直观、交互丰富、高度个性化定制的数据可视化图表。ECharts是本书将重点介绍的内容，后面将对其进行详细的介绍。了解常用的数据可视化工具2.MatlabMatlab作为科学计算与数据可视化的利器，拥有着强大的数值计算功能和数据可视化能力。在现实生活中，抽象的数据往
14、往晦涩难懂，但是Matlab通过图形编辑窗口和绘图函数能方便地绘制二维、三维甚至多维图形，可以实现将杂乱离散的数据以形象的图形显示出来，并有助于了解数据的性质和内存联系。右图为使用Matlab绘制的饼图。了解常用的数据可视化工具3.PythonPython是一种面向对象的解释型计算机程序设计语言，为大数据与人工智能时代的首选语言。Python具有简洁、易学、免费、开源、可移植、面向对象、可扩展等特性，因此也常被称为胶水语言。PYPL（PopularityofProgrammingLanguage）根据Google上的搜索频率进行统计，Python语言在2019年已经连续几个月排名第一。在201
15、9年5月份的榜单中，Python更是以绝对优势遥遥领先，这与Python语言的特性有关。了解常用的数据可视化工具Python不仅具有丰富和强大的库，而且应用场景非常广泛。从科学计算、自动化测试、系统运维、云计算、大数据、系统编程，到数据分析、数据可视化、网络爬虫、Web开发、人工智能、工程和金融领域，Python都有较广泛的应用。此外，对于数据可视化编程，Python语言有一系列的数据可视化包（Packages），包括Matplotlib、pandas、seaborn、ggplot、Plotly、PlotlyExpress、Bokeh、Pygal等。下图为使用Python绘制的火柴杆图。了解常
16、用的数据可视化工具4.R语言R语言是一种优秀的、具有很强数据可视化功能的语言，不仅开源、免费，而且可在UNIX、Windows和macOS上运行，R语言设计的目的是用于统计计算和统计制图。R语言是完全靠代码实现绘图的，但是R语言一般用于绘制静态的统计报告，比较适合数据探索和数据挖掘，同时R语言能够利用一些程序包绘制交互性图表。R语言拥有大量数据可视化包，如ggplot2、gridExtra、lattice、plotly、recharts、highcharter、rCharts、leaflet、RGL等。其中，ggplot2是R语言中功能最为强大、最受欢迎的绘图工具包；lattice适合入门级选
17、手，作图速度较快，能进行三维绘图；gridExtra能将ggplot2作出来的几张图拼成一张大图；而plotly、recharts、highcharter、rCharts、leaflet则擅长绘制交互图表；RGL则是绘制三维图形的利器。了解常用的数据可视化工具下图展示了地理学家JamesCheshire博士和设计师OliverUberti绘制的英格兰南部通勤者起讫点流，使用R语言中数据可视化包ggplot2中的geom_segment()命令，绘制出了起讫点重心间纤细透明的白色线条。了解常用的数据可视化工具5.D3D3（Data-DrivenDocuments）是一个被数据驱动的文档。简而言之
18、，D3是一个JavaScript的函数库，主要用于进行数据可视化。由于JavaScript文件的后缀名通常为.js，所以D3也常使用D3.js来称呼。D3是目前最受欢迎的可视化JS库之一，允许绑定任意数据到DOM，并将数据驱动转换应用到Document中，使用它也可以用一个数组创建基本的HTML表格，或利用它的流体过渡和交互，将相似的数据创建为惊人的SVG图。D3兼容大多数浏览器，同时避免对特定框架的依赖。了解常用的数据可视化工具D3虽然并不是对用户最友好的工具，但它在JavaScript绘图界的重要性不可小觑。D3支持标准的Web技术（HTML、SVG和CSS），并且有着海量的用户贡献内容弥
19、补它缺乏自定义内容的缺陷。因此，D3更适合在互联网上互动地展示数据。右图是使用D3技术所绘的图形。了解常用的数据可视化工具6.HighchartsHighcharts是一个使用纯JavaScript编写的图表库，能够简单便捷地在Web网站或Web应用程序中添加有交互性的图表。Highcharts不仅免费提供给个人、个人网站并可供非商业用途使用，而且支持的常见图表类型多达20种，其中很多图表可以集成在同一个图形中形成混合图。Highcharts的主要优势如下。（1）兼容性好：Highcharts可以在所有的移动设备及计算机的浏览器中使用，包括iPhone、iPad和IE6以上的版本；在iOS和A
20、ndroid系统中，Highcharts支持多点触摸功能，因而可以提供极致的用户体验。在现代的浏览器中，使用SVG技术进行图形绘制；在低版本IE浏览器中，则使用VML进行图形绘制。（2）非商业使用免费：Highcharts可以在个人网站、学校网站和非营利机构中使用。（3）开源：Highcharts最重要的特点之一就是无论是免费版还是付费版，用户都可以下载源码并对其进行编辑。了解常用的数据可视化工具（4）纯JavaScript：Highcharts完全基于HTML5技术，不需要在客户端安装任何插件，如Flash或Java。此外用户也不用配置任何服务端环境，只需要两个JS文件即可运行。（5）简单的
21、配置语法：在Highcharts中设置配置选项不需要任何高级的编程技术，所有的配置都是JSON对象，只包含用冒号连接的键值对，用逗号进行分割，用括号进行对象包裹。此外，JSON具有易于阅读编写、易于机器解析与生成的特点。（6）动态交互性：Highcharts具有丰富的交互性，在图表创建完毕后，可以用丰富的API进行添加、移除或修改数据列、数据点、坐标轴等操作。同时，结合jQuery的ajax功能，Highcharts可以实现实时刷新数据、用户手动修改数据等功能。此外，结合事件处理，Highcharts可以实现各种交互功能。了解常用的数据可视化工具由于具有以上优势，Highcharts已经被成千
22、上万的开发者使用。下图为使用Highcharts绘制的复杂条形图。了解常用的数据可视化工具7.FusionChartsFusionCharts是Flash图形方案供应商InfoSoftGlobal公司的一个跨平台、跨浏览器的图表组件解决方案，它可用于任何网页的脚本语言，如HTML、NET、ASP、JSP、PHP和ColdFusion等。FusionCharts不仅具有互动性并提供强大的图表，而且支持JavaScript、jQuery、Angular等一系列高人气的库和框架。用户在使用FusionCharts时，不需要知道任何Flash的知识，只需要了解所用的编程语言即可完成图形的绘制。了解常用
23、的数据可视化工具FusionCharts功能十分强大，它内置100多种图表、超过1400多种地图和20多种商业仪表盘，并在全世界117个国家中拥有27000多个用户，如Microsoft、Google和IBM等公司都在使用FusionCharts，这也说明FusionCharts是一个能满足企业级拓展性需求的工具。右图为使用FusionCharts绘制的折线图和堆积图。了解常用的数据可视化工具8.Google Charts谷歌浏览器是当前最流行的浏览器之一，而GoogleCharts（谷歌图表）也是大数据可视化的最佳解决方案之一。GoogleCharts不仅实现了完全开源和免费，而且得到了Go
24、ogle公司的大力技术支持，因为通过GoogleCharts分析的数据要用于训练Google研发的AI，这样的合作是双赢的。GoogleCharts提供了大量的可视化类型，包括简单的饼图、时间序列和多维交互矩阵。此外，可供调整的图表选项很多。如果需要对图表进行深度定制，那么可以参考详细的帮助部分。下图为使用GoogleCharts绘制的简单仪表盘（Gauge）。了解常用的数据可视化工具9.Processing.jsProcessing语言2001年诞生于麻省理工学院（MIT）的媒体实验室，主创者为BenFry和CaseyReas。Processing可以认为是一种被简化了的Java，并且是用于
25、绘画和绘图的API，它擅长创建2D与3D图像、可视化数据套件、音频、视频等。Processing拥有轻量级的编程环境，只需几行代码就能创建出带有动画和交互功能的图形，因此很好上手。Processing偏重于视觉思维的创造性，虽然一开始主要是设计师和艺术家使用Processing，但如今它的受众群体已经越来越多样化了。无论如何，对于新手而言，Processing是个很好的起点，即使是毫无经验的用户也能够做出有价值的东西。了解常用的数据可视化工具Processing.js是Processing的姐妹篇，创建的初衷是能够让Processing代码（通常是指sketches）不用修改即可在Web端运行
26、，即使用Processing.js编写processing代码，然后通过Processing.js将processing代码转换成JavaScript后运行代码。下图为使用Processing.js绘制的清晰、漂亮的动画。了解常用的数据可视化工具目录2认识开发者工具31认识数据可视化认识ECharts认识EChartsECharts作为国内可视化生态领域的领军者，不仅免费、开源，而且在高度个性化和交互能力等方面为业界领先，并在拖拽重计算、大规模散点图方面获得了国家专利。此外，EChart还拥有数据视图、值域漫游、子地图模式等独有的功能。了解ECharts的发展历程及应用目前，诸如百度迁徙、百度
27、司南、百度大数据预测等百度大数据产品的数据可视化均是通过ECharts实现的。ECharts（EnterpriseCharts）为商业级数据图表，是百度旗下的一款开源、免费的可视化图表工具，它是纯JavaScript的图表库，可以流畅地运行在PC和移动设备上。ECharts不仅兼容当前绝大部分浏览器（如Chrome、IE6/7/8/9/10/11、Firefox、Safari等），而且底层依赖轻量级的Canvas类库ZRender，提供了直观、生动、可交互、可高度个性化定制的数据可视化图表。此外，ECharts创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖
28、掘、整合的能力。了解ECharts的发展历程及应用ECharts是一个正在打造拥有互动图形用户界面的数据可视化工具，是一个深度数据互动可视化的工具。ECharts的目标是在大数据时代重新定义数据图表。ECharts自2013年6月30日发布1.0版本以来，已有73个子版本的更新，平均每个月至少有1个子版本的更新。2018年1月16日，全球著名开源社区Apache基金会宣布“百度开源的ECharts项目全票通过进入Apache孵化器”。这是百度第一个进入国际顶级开源社区的项目，也标志着百度开源正式进入开源发展的快车道。了解ECharts的发展历程及应用目前，ECharts在GitHub上拥有2.
29、5万的关注量和2000多的相关项目，并在大量社区的反馈和贡献下不断地迭代进化。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孵化器项目之前，已经是国内可视化生态领域的领军者，近年连续被开源中国评选为“年度最受欢迎的中国开源软件”，并广泛应用于各行业企业、事业单位和科研院
30、。目前，在百度内部，ECharts不仅支撑起百度多个核心商业业务系统的数据可视化需求（如凤巢、广告管家、鸿媒体、一站式、百度推广开发者中心、知心业务系统等），而且服务多个后台运维及监控系统（如百度站长平台、百度推广用户体验中心、指挥官、无线访问速度质量监控、凤巢代码质量统计报告等）。ECharts还满足了各行各业的数据可视化需求，包含报表系统、运维系统、网站展示、营销展示、企业品牌宣传、运营收入的汇报分析等方面，涉及金融、教育、医疗、物流、气候监测等众多行业领域，其中甚至包括阿里巴巴、腾讯、华为、联想、小米、国家电网、中国石化、格力电器等公司及单位。了解Echarts 4.x的特性EChart
31、s作为国内可视化生态领域的领军者，其版本不断更新，功能不断完善，并提供直观、交互丰富、可高度个性化定制的数据可视化图表，从而广泛地被各行业企业、事业单位和科研院所应用。ECharts的特性具体如下。1.丰富的可视化类型ECharts提供了常规的折线图、柱状图、散点图、饼图、K线图、用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、矩形树图、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图、仪表盘，并且支持图与图之间的混搭。除了已经内置的丰富功能的图表，ECharts还提供了自定义系列，只需要传入一个renderItem函数，即可设计出符合自身需求的图形
32、。更棒的是，自定义系列的图形还能和已有的交互组件结合使用。用户可以在下载界面下载包含所有图表的构建文件，如果只需要其中一两个图表，又觉得包含所有图表的构建文件太大，那么也可以在在线构建中选择需要的图表类型后自定义构建。了解Echarts 4.x的特性2.多种数据格式无须转换直接使用ECharts内置的dataset属性（4.0+）支持直接传入包括二维表、key-value等多种格式的数据源，通过简单地设置encode属性即可完成从数据到图形的映射。这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件之间能够共享一份数据而不用复制。为了配合大数据量的展现，ECharts还支
33、持输入TypedArray格式的数据。TypedArray在大数据量的存储中可以占用更少的内存，对GC友好等特性也可以大幅度提升可视化应用的性能。了解Echarts 4.x的特性3.千万数据的前端展现通过增量渲染技术（4.0+），配合各种细致的优化，ECharts能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。几千万的地理坐标数据即使使用二进制存储也需要占数百MB的空间。因此ECharts同时提供了对流加载（4.0+）的支持，用户可以使用WebSocket或对数据分块后加载，加载多少就会渲染多少，不需要漫长地等待所有数据加载完再进行绘制。下图为ECharts千万级数
34、据的前端展现效果图。了解Echarts 4.x的特性4.移动端优化ECharts针对移动端交互做了细致的优化，如：移动端小屏上可以用手指在坐标系中进行缩放、平移；PC端上可以用鼠标在图中进行缩放、平移等。细粒度的模块化和打包机制可以让ECharts在移动端也拥有很小的体积，可选的SVG渲染模块让移动端的内存占用不再捉襟见肘。图为ECharts移动端优化效果图。了解Echarts 4.x的特性5.多渲染方案，跨平台使用ECharts支持以Canvas、SVG（4.0+）、VML的形式渲染图表。VML可以兼容低版本IE浏览器，SVG使得移动端不再为内存担忧，Canvas可以轻松应对大数据量和特效的
35、展现。不同的渲染方式为用户提供了更多选择，使得ECharts在各种场景下都有好的表现。除了PC和移动端的浏览器，ECharts还能在node上配合node-canvas进行高效的服务端渲染（SSR）。从4.0版本开始，ECharts还和微信小程序的团队合作，提供了ECharts对小程序的适配。社区的热心贡献者也提供了丰富的其他语言扩展，如Python语言的pyecharts、R语言的recharts、Julia语言的ECharts.jl等。了解Echarts 4.x的特性6.深度的交互式数据探索交互是从数据中发掘信息的重要手段。“总览为先，缩放过滤按需查看细节”是数据可视化交互的基本需求。EC
36、harts一直在交互的路上前进，提供了图例、视觉映射、数据区域缩放、Tooltip、数据筛选等开箱即用的交互组件，可以对数据进行多维度数据筛选、视图缩放、展示细节等交互操作。右图显示了ECharts的交互组件效果。了解Echarts 4.x的特性7.多维数据的支持以及丰富的视觉编码手段ECharts从3.0开始加强了对多维数据的支持，除了支持平行坐标等常见的多维数据，也支持多个维度的传统的散点图。配合视觉映射组件visualMap提供的丰富的视觉编码，能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。下图体现出ECharts的多维数据支持。了解Echarts 4.x的特性8
37、.动态数据ECharts由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单，只需要获取数据，填入数据。ECharts会找到两组数据之间的差异，并通过合适的动画表现数据的变化，配合timeline组件，能够在更高的时间维度上表现数据的信息。图为ECharts的动态数据展现。了解Echarts 4.x的特性9.绚丽的特效ECharts针对线数据、点数据等地理数据的可视化提供了吸引眼球的特效。图1-22为ECharts绚丽的特效展现。10.通过GL实现更多、更强大、更绚丽的三维可视化ECharts提供了基于WebGL的EChartsGL，用户可以像使用ECharts普通组件一
38、样轻松地使用EChartsGL绘制出三维的地球、建筑群、人口分布的柱状图。在这个基础上，ECharts还提供了不同层级的画面配置项，几行配置即可得到艺术化的画面。图为ECharts绚丽的三维可视化展现。了解Echarts 4.x的特性11.无障碍访问（4.0+）W3C制定了无障碍富互联网应用规范集（WAI-ARIA，theAccessibleRichInternetApplicationsSuite），致力于使得网络内容和网络应用能够被更多残障人士访问。ECharts4.0遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人也可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。
39、目录认识开发者工具3认识ECharts12认识数据可视化认识开发者工具开发者工具是一种辅助编程开发人员进行开发工作的应用软件，在开发工作内部即可辅助编写代码，并管理代码的效率。开发过程中少不了开发者工具，为了更好地进行编程学习，需要完成开源免费的开发者工具Eclipse的下载和使用。下载Eclipse为了提升开发效率，需要一些开发工具的帮助，以更高效地进行代码编程。此处选择一款免费开源的Eclipse软件进行下载安装并使用，界面如图所示。下载Eclipse打开页面后，可以看到页面有不同版本的EclipseIDE。由于本书的学习内容主要由Web构成，所以在此处下载EclipseIDEforEnt
40、erpriseJavaDevelopers(includesIncubatingcomponents)工具。下载Eclipse时需要注意开发环境与下载软件的版本保持一致，在“我的电脑”图标上右键单击并选择“属性”选项即可打开系统面板查看本机的系统属性，如图所示。下载Eclipse从上图中可以看出，当前的操作系统为Windows10，系统类型为64位的操作系统，所以软件版本选择64bit（位）的软件进行下载。如图1-26所示，单击框体内容进行资源下载。下载后的软件为eclipse-jee-2020-06-R-win32-x86_64.zip，该软件为压缩包，无须安装，只要解压到计算机指定文件夹下
41、即可使用（注意文件目录避免使用中文命名）。EclipseIDE软件的文件目录如下图所示。使用Eclipse解压1.3.1小节中所下载的Eclipse软件得到的解压目录如上图所示。此时，双击图1-28中的eclipse.exe即可启动软件。用户需要注意的是，在启动Eclipse软件之前需要成功安装JDK，否则将无法启动成功。Eclipse软件启动后的界面如下图所示。在下图中，可以看到Welcome页面中的一些Eclipse常用功能。此时，可以在此界面中进行代码编写。小结本章根据目前数据可视化发展现状，首先介绍了数据可视化的概念，并通过列举数据可视化的一些应用场景，让读者初步了解了数据可视化在一些
42、领域的应用。其次介绍了数据可视化的流程和常见的数据可视化工具；然后重点介绍了数据可视化工具ECharts的发展历程、使用场景和ECharts4.x的特性。此外，还介绍了开发者工具Eclipse的下载和使用。ECharts最常用图表09-3月月-23目录1快速上手第一个ECharts实例绘制饼图绘制柱状图2绘制折线图341.获取ECharts开发前的准备工作从数字可视化到文本可视化，从折线图、条形图、饼图到文字云、地图，从数据可视化分析到可视化平台建设，数据可视化越来越成为企业核心竞争力的一个重要组成部分。ECharts作为百度推出的一款十分流行的开源免费可视化工具，简单易学、功能强大、计算迅速
43、。了解数据可视化的定义及特性数据可视化是一种将抽象、枯燥或难以理解的内容以可视的、交互的方式进行展示的技术，它能够借助于图形的方式更形象、直观地展示数据蕴含的事物原理、规律、逻辑。数据可视化是一门横跨计算机科学、统计学、心理学的综合学科，并将随着大数据和人工智能的兴起而进一步繁荣。早期的数据可视化作为咨询机构、金融企业的专业工具，其应用领域较为单一，应用形态较为保守。当今，随着云计算和大数据时代的来临，各行各业对数据的重视程度与日俱增，随之而来的是对数据进行一站式整合、挖掘、分析，可视化的需求日益迫切，数据可视化呈现出愈加旺盛的生命力。2.下载下载Google浏览器浏览器开发前的准备工作目前的
44、数据可视化工具必须具有以下特性。实时性：数据可视化工具必须适应大数据时代数据量的爆炸式增长需求，必须快速地收集、分析数据并对数据信息进行实时更新。3.创建项目创建项目开发前的准备工作多种数据集成支持方式：由于数据的来源不仅仅局限于数据库，所以数据可视化工具应支持团队协作数据、数据仓库、文本等多种方式，并能够通过互联网进行展现。了解数据中蕴含的信息开发前的准备工作（2）创建文件夹。项目中一般有大量文件，为了管理方便，应该对各种不同文件分门别类保存。右键单击第一步新建的项目名“EChartsTest”，在弹出的快捷菜单中依次单击“New”“Folder”，如左图所示；在弹出的“NewFolder”
45、对话框中，输入文件夹名称，如“js”，然后单击“Finish”按钮，如右图所示。以同样的方法，再创建其他文件夹，如“images”“ch3”。开发前的准备工作（3）创建网页文件。ECharts图表是保存在网页中的，因此，需要创建网页文件来存放ECharts图表。右键单击步骤（2）新建的项目名“EChartsTest”下面的“ch3”文件夹，在弹出的快捷菜单中依次单击“New”“Other”，如图所示。开发前的准备工作（3）在弹出的“New”对话框中，选择“HTMLFile”后，再单击“Next”按钮，如左图所示；在弹出的“NewHTMLFile”对话框中，输入HTMLFile的名称，如“fir
46、stECharts.html”，再单击“Finish”按钮，如右图所示。开发前的准备工作（4）查看项目的目录结构和网页初始内容。将下载的echarts.js等文件复制到js文件夹中，并打开firstECharts.html文件，可以看到图所示的界面。EChartsTest项目下有两个文件夹（images和js）和一个网页文件firstECharts.html，js文件夹下面又存放了项目必需的两个库文件：echarts.js和echarts.min.js。现在即可在这个HTML文件的基础上编写代码，开始创建ECharts图表了。创建第一个ECharts图表获取ECharts库文件后，创建ECha
47、rts图表的步骤如下。（1）在.html文件中，引入echarts.js库文件。ECharts的引入方式像JavaScript库文件一样，使用script标签引入即可。此处需要注意echarts.js库文件的存放路径，如果找不到存放路径，那么将无法显示图表。通过CDN方式引入库文件，这种引入方式的好处是不需要下载echarts.js库文件，但是需要实时连接网络。（2）准备一个指定了大小的div容器，即具备weight和height。ECharts图形是基于DOM进行绘制的，所以在绘制图形前要先绘制一个DOM容器div来承载图形。在添加了div容器后，需要设置它的基本属性：宽（weight）与高
48、（height）。这两个属性决定了绘制的图表大小。绘制一个div容器并设置容器的样式，容器可以设置的样式并不仅限于宽与高，还可以设置其他属性，如定位等。创建第一个ECharts图表（3）使用init方法初始化容器。通过步骤（1）引入echarts.js库文件后，会自动创建一个全局变量echarts。创建全局变量echarts有若干方法。基于准备好的DOM，通过echarts.init方法可以初始化ECharts实例。（4）设置图形配置项和数据。option的设置是ECharts中的重点和难点，option的配置项参数等设置决定了绘制出的是什么样的图形。第3章中将会对option的配置项参数进行
49、详细的说明，此处通过配置option项绘制一个简单的柱状图。（5）使用指定的配置项和数据显示渲染图表。在绘制ECharts图表的过程中，setOption是执行绘制动作的方法，为初始化的myChart设置option进行图表绘制。创建第一个创建第一个ECharts图表图表通过以上5个步骤，在网页中创建ECharts图表后，需要用网页打开。在Eclipse中右键单击需要打开的网页文件名，在弹出的快捷菜单中，依次单击“OpenWith”“WebBrowser”，即可在Eclipse中内置的浏览器中打开该网页，也可以在计算机中双击要运行的网页文件，直接使用操作系统中默认的浏览器打开该网页。有时为了调
50、试方便，还可以复制该网页文件的完整地址，将它粘贴到指定的浏览器的地址栏中打开。绘制完成后的图表如图所示。2绘制柱状图目录1快速上手第一个ECharts实例绘制饼图绘制折线图34绘制柱状图柱状图（Bar）为常用的图表之一，由一系列长度不等的纵向或横向条纹来表示数据分布的情况，一般用横轴表示数据类型，纵轴表示分布情况。ECharts提供了各种各样的柱状图。为了更直观地查看商品销售数据、广告类别数据、人口数据和生活消费数据，需要在ECharts中绘制不同的柱状图进行展示，如标准柱状图、堆积柱状图、条形图和瀑布图。绘制标准柱状图柱状图的核心思想是对比，常用于显示一段时间内的数据变化或显示各项之间的比较