《终端数据可视化》课件-1 Web数据可视化概述

单元1Web数据可视化概述大数据可视化应用开发项目式教程单元描述1.技术要求：（1）Web数据可视化的认知；（2）Web数据可视化特点与典型应用场景。2.能力要求：（1）在Web前端开发基础上进行深入持续学习的能力；（2）基于教材内容自主、拓展学习能力。3.素养要求：（1）科学思维方式审视专业问题的能力。当前，数字化技术渗透到企业生产链的各个环节时。实时采集生产过程中产生的数据，并对这些收集到的监测数据进行处理、分析，借助丰富的Web数据可视化技术呈现手段，将有利于生产决策者做出更加智慧的决策。1任务名称任务目标安排课时任务1.1Web数据可视化认识Web数据可视化1任务1.2Web前端开发认识Web前端开发现状、痛点0.5任务1.3Web数据可视化应用案例Web数据可视化典型应用举例0.5总计26任务分解2知识要点数据可视化Web数据可视化及方法Web数据可视化相关技术1.数据可视化一般而言，数据可视化技术是指综合运用计算机图形学和图像处理技术，把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式通过终端展示出来，并进行交互处理的理论、方法和技术。数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用，其本质是数据空间到图形空间的映射，是抽象数据的具象表达。在当前大数据分析、显示技术等软硬件支持下，数据可视化特点包括：（1）交互性，用户可以方便地以交互的方式呈现和管理数据。（2）多维性，用户可以看到表示对象或事件的数据的多个属性或变量，而数据可以按其每一维的值，将其分类、排序、组合和显示。（3）可视性，数据可以用图像、曲线、二维图形、三维图形和动画来显示，并可对其模式和相互关系进行可视化分析和呈现。2.Web数据可视化及方法Canvas是HTML5的一种组件，提供了一块画布，可以通过JavaScript代码来进行像素级操作，绘制出各种类型的图表和动画。如下代码所示，使用<canvas>标签定义了一个400*300大小的矩形框，在这个矩形框内可以绘制相应的图表和动画：（1）Canvas<canvasid="canvas"width="400"height="300"></canvas>2.Web数据可视化及方法Canvas对不同的浏览器具有良好的兼容性支持，甚至有人尝试在移动浏览器上使用<canvas>来代替DOM展现元素。其中，DOM是文档对象模型（DocumentObjectModel）的简称，它定义了访问和操作HTML文档的标准方法，如图1-2给出了HTMLDOM树结构。图1-2HTMLDOM树2.Web数据可视化及方法SVG是缩放矢量图像（ScalableVectorGraphics）的简称，主要通过相关的各种标签来实现图形的绘制。相当于是用一种XML（eXtensibleMarkupLanguage）把图形描述出来，它和Canvas的关系就像是图形和图像、几何和美术、Illustrator和Photoshop的关系。SVG的优点包括矢量，缩放后不会失真，能实现复杂的动画，支持事件，支持CSS包含DOM，比较直观，方便调试等。典型产品包括D3.js（/）。（2）SVG2.Web数据可视化及方法WebGL（WebGraphicsLibrary）是一项在浏览器中实现3D画面的技术。WebGL是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGLES结合在一起，通过增加OpenGLES的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡在浏览器中更流畅地展示3D场景和模型，并且能创建复杂的导航和数据视觉化。（3）WebGL3.Web数据可视化相关技术ECharts是百度公司的一款免费开源的数据可视化产品，向用户提供直观、生动、可交互和可个性化定制的数据可视化图表，能够快速构建基于Web的数据可视化任务。ECharts具备上手简单、功能强大等典型优点。（1）ECharts.js（2）Vue.js（3）D3.jsVue是一套用于构建用户界面的渐进式框架，为目前国内最火热的前端框架之一，其简单快捷、渐进式的设计，对于新手特别友好。与其它典型框架不同的是，Vue被设计为可以自底向上逐层应用。D3是目前Web端评价非常高的JavaScript可视化工具库。D3实例丰富，易于实现调试数据，同时能够通过扩展实现任何想到的数据可视化效果。可以通过HTML、SVG和CSS展示数据，与jQuery类似，D3直接对DOM进行操作。任务1.1认识Web前端开发随着IT企业满足客户对用户体验的追求，Web前端人员的需求量越来越大，且对效率的要求越来越高。“用户体验”典型地体现为系统的交互性、数据呈现方式、可视化效果等具体要求。值得说明的是，前端开发的学习并不仅仅强调知识点的掌握、技术的实现，更在于审美能力的积累和提升、细节的把握、以及寻找方案的更优解。即使是最简单的页面布局，也存在层出不穷的优秀解决方案。学生在解决实际问题的过程中除了借助便捷的工具，选择高效的Web开发模式，以实现基本的要求为目标，更应该树立工匠精神，力争精益求精，追求极致的页面效果。1.Web前端开发任务1.1认识Web前端开发当前，企业在前端开发框架的选择上开始倾向采用MVVM（Model-View-ViewModel）模式，该模式可以拆分成：View--ViewModel--Model三部分，如图1-2所示。2.本书做法图1-3MVVM模式任务1.1认识Web前端开发那么，怎么理解MVVM呢？图1-3中，左侧的View相当于DOM内容，对应用户所看到的页面视图。右侧的Model相当于数据对象，比如一个年龄为23岁，姓名为张三的对象信息可以表示为：而中间的监控者就负责监控两侧的数据，一侧发生变化则会相对应地通知另一侧进行修改。比如：在Model层中修改了name的值为：“李四”，那么View视图层显示的“张三”也会自动变成了“李四”，而这个过程就是由ViewModel来操作的。{name:"张三",age:21,}任务1.1认识Web前端开发相对于数据和文字，可视化图表最能直观表达数据的变化规律。例如，用户展示特定几款电动汽车的销售量，那么可以使用折线图或者柱状图；展示销售人员的服务水平，可以使用雷达图来展示多个服务指标的对比深度，诸如此类。数据可视化相关的理论的实践操作，教材将会在第5单元给出。当前互联网开发者和企业开源了很多免费而又优秀成熟的可视化库，包括百度的ECharts、蚂蚁金服的AntV（/zh-cn/index.html）、以及来自国外的Chart.js（/）等。本教材选择使用主流开源的数据可视化工具，完成基于Web的数据可视化呈现。本书的第6单元讲解基于前端框架和可视化开源工具完成前端任务的制作。任务1.2Web数据可视化应用案例制造业每天会产生大量的工业设备运行数据，相关工业物联网平台已积累了企业用户的基础信息与设备运行等数据。“工业设备大数据分析与可视化平台”对企业上云设备数据进行挖掘，通过构建和运行相关指数模型，进行指数预测分析，并将数据进行可视化展示，如图1-4所示。1.工业数据可视化图1-4工业设备大数据分析与可视化平台任务1.2Web数据可视化应用案例“航空数据可视化平台”实现从公开数据源上采集航班数据信息，从城市、机场、航线、航班、执飞机型、准点率等多种维度对航班数据进行可视化展现。如图1-5所示给出了平台首页，首页通过3D动画动态全景展现了全球部分国家的航线图，科技感突出。2.航班数据可视化图1-5航班数据可视化平台首页任务1.2Web数据可视化应用案例如图1-6、图1-7所示分别展示了航班数据概览、航线查询统计主要页面。图1-6航班数据概览页面图1-7航线查询与统计页面任务1.2Web数据可视化应用案例如图1-8所示的新能源汽车大数据可视化监测平台，该平台实现了联网车辆的运营管理、故障诊断、统计分析等典型功能。本书后续案例将结合该应用场景进行展开。3.车辆监控图1-8新能源汽车大数据可视化监测平台一、简答题1.简述数据可视化与Web数据可视化的关系。2.简述Web数据可视化在技术类别上的表现形式有哪些？3.简述Web开发中的MVVM模型的工作原理是什么？4.简述行业中使用数据大屏有什么典型效益？二、操作题课后练习3本单元简要介绍了Web数据可视化、Web前端开发模式等相关知识，并给出了其在工业生产、智慧交通等不同领域的典型应用案例。教材假定读者已经初步具备了HTML+CSS+JavaScript等Web前端开发的基础知识，如果读者尚存在欠缺，请查询相关学习资料，进行简要补充即可。本章小节4PPT模板下载：/moban/行业PPT模板：/hangye/节日PPT模板：/jieri/PPT素材下载：/sucai/PPT背景图片：/beijing/PPT图表下载：/tubiao/优秀PPT下载：/xiazai/PPT教程：/powerp