万物互联背景下，数据呈现爆炸式增长。当前通过可视化的信息呈现方式提高数据效益、提高洞察力成为行业关注的焦点。本书以“新能源汽车大数据可视化监测平台”项目为载体，以丰富的可视化和交互式图表作为信息表现方式，旨在通过Web可视化设计方法以及主流前端框架、工具的综合运用，使学生快速提高Web前端开发技术水平，实现培养优秀的Web前端工程师目的。
本书共分7个单元。内容包括：Web数据可视化概述、新能源汽车大数据可视化监测平台、Web基础、前端框架、数据可视化设计基础、数据可视化整合、新能源汽车数据大屏。
本书涵盖多学科知识，综合性强；以实际项目为载体，化繁为简，循序渐进，弥补了学校教学缺乏实战的弊端，是Web可视化技术的优佳图书。
本书适合作为高职高专计算机专业、大数据相关专业课程的教学用书，也可供从事数据可视化、数据分析、前端设计的技术人员参考阅读。

随着云计算、大数据技术的飞速发展，传统行业利用大数据分析技术挖掘数据效益的潜能得到空前释放。数据效益的呈现并不会自动产生，选择交互式的、直观丰富的基于Web的视觉呈现方式成为一种主流选择。
本书的编者长期工作于企业项目开发与实践的一线，迫切感受到学校教育和工程实践之间的鸿沟。一方面，IT企业竞争不断加剧，企业招聘不到心仪的Web前端开发员工；另一方面，高校培养的学生就业面临诸多现实困难，难以找到专业对口的工作。编写本书的初衷是将IT企业开发中的采用主流前沿技术开发的项目案例转化为人才培养的素材，培养符合经济社会发展需要的适配人才，使他们顺利投身产业并推动产业的进步与发展。

本书具有如下特点：
（1）选用企业主流开发技术，突出前沿性
本书选择Web开发中的主流技术，突出软件开发中的分层思想，将主流的前端开发框架Vue.js与ECharts为代表的可视化工具进行有机融合，快速构建基于Web的前端初始化应用。此外，本书引入D3和前端框架的组合模式，为开发者提供了更大的弹性。
（2）以实际项目为载体，突出实践性
本书以新能源汽车远程实时监测项目为载体，循序渐进地引导学习者由浅入深掌握Web前端开发核心技术，摆脱学习前端基础知识后不能快速深入和从事应用开发的痛点。
（3）以学生素质培养为目标，突出创新性
数据可视化是一门技术，更是一门艺术。本书突破单纯的技术教授，将素质、能力的提升蕴含其中，让学习者在潜移默化中得到锻炼和提高。
本书教学内容采用模块化、任务式的编写思路，分7个单元23个任务。每个单元包含若干任务，通过单元描述引出教学单元的教学核心内容，明确教学目标。每个任务包含任务描述、任务分析、任务实施、同步训练4个环节。单元最后设置单元小结和课后练习；单元小结总结单元的重点和难点内容；课后练习针对本单元的任务规划考核所学知识和技能。
本书建议授课54学时，教学内容及学时安排如下：
 单　　元 单  元  名  称 学　　时
单元1 Web数据可视化概述 2
单元2 新能源汽车大数据可视化监测平台 6
单元3 Web基础 6
单元4 前端框架 10
单元5 数据可视化设计基础 12
单元6 数据可视化整合 10
单元7 新能源汽车数据大屏 8
课  时  总  计 54

本书配有配套的资源包、运行脚本、电子教案等，可登录http://www.1daoyun.com下载。教材适合作为高职高专计算机专业、大数据相关专业课程的教学用书，也可供从事数据可视化、数据分析、前端设计的技术人员参考阅读。
本书由苏州工业职业技术学院的刘文军、胡霞和南京第五十五所技术开发有限公司的宋学永任主编，由苏州工业职业技术学院的朱东、伊雯雯、芮文艳任副主编，由苏州工业职业技术学院教师团队和江苏一道云科技发展有限公司共同编写完成。具体编写分工如下：单元1、单元7由刘文军编写，单元2由朱东编写，单元3、单元5由芮文艳编写，单元4由胡霞编写，单元6由伊雯雯编写，罗颖从专业人才培养角度负责对本书的内容提出了建议。江苏一道云科技发展有限公司的工程师和南京第五十五技术开发有限公司的高级工程师宋学永参与了验证和校对工作，苏州海格电控新能源汽车科技有限公司的吴新兵总经理对本书的案例进行了指导，在此一并表示感谢！同时，在本书编写过程中，参阅了国内外同行编写的相关著作和各类文献，谨向各位作者致以深深谢意！
由于编者水平有限，疏漏和不足之处在所难免，恳请各位读者给予批评、指正。

编　者
2020年4月

单元1　Web数据可视化概述.........1
单元描述.. 1
任务分解.. 2
知识要点.. 2
1. 数据可视化 .... 2
2. Web 数据可视化类型及方法 ...... 2
3. Web 数据可视化相关技术 .......... 3
任务1.1　认识Web 前端开发.............. 4
任务1.2　认识Web 数据可视化应用案例........... 5
单元小结.. 6
课后练习.. 6
单元2　新能源汽车大数据可视化监测平台..............7
单元描述.. 7
任务分解.. 8
知识要点.. 8
1. 新能源汽车基础 ........... 8
2. 车辆数据与存储 ........... 9
3. 前端框架数据驱动模式 ............. 10
任务2.1　理解新能源汽车远程监测业务........... 11
任务2.2　理解业务数据...... 13
任务2.3　确定车辆数据模型.............. 15
单元小结 16
课后练习 16
单元3　Web基础............17
单元描述 17
任务分解 18
知识要点 18
1. 前端开发常用工具介绍............. 18
2. HTML+CSS 基础........ 19
3. 网页中的JavaScript... 23
任务3.1　搭建开发环境...... 25
任务3.2　创建新能源汽车单车监控页面........... 28
任务3.3　呈现车辆运行状态.............. 38
单元小结 43
课后练习 43
单元4　前端框架45
单元描述 45
任务分解 47
知识要点 47
1. 前端框架简介............. 47
2. Vue.js 安装... 49
3. webpack 构建项目 ...... 51
4. Vue.js 基础... 53
5. 常用插件...... 63
任务4.1　搭建Vue 开发环境............. 66
任务4.2　新能源汽车大数据分析系统路由与组件设计.... 80
任务4.3　新能源汽车大数据分析系统用户管理页面实现. 94
任务4.4　新能源汽车大数据分析系统动态页面实现...... 108
单元小结 ............. 113
课后练习 ............. 113
单元5　数据可视化设计基础.....114
单元描述............. 114
任务分解............. 115
知识要点............. 115
1. 有效可视化创建步骤 .115
2. 常用可视化工具 ....... 122
3. ECharts 基础 ............. 123
4. D3 基础 ..... 128
任务5.1　认识数据可视化 130
任务5.2　使用ECharts 实现车辆数据可视化. 133
任务5.3　使用D3 完成车辆实时监控可视化.. 138
单元小结............. 143
课后练习............. 143
单元6 　数据可视化整合............ 144
单元描述............. 145
任务分解............. 145
知识要点............. 146
1. Ajax 介绍 ... 146
2. VUE 的生命周期 ...... 148
3. async 与await ........... 149
4. ECharts 实现Web 可视化图表绘制....... 150
任务6.1　研发与维修统计分析页面设计与实现............. 150
任务6.2　新增故障比例可视化展示. 154
任务6.3　车辆城市分布Top10 可视化展示.... 158
任务6.4　单车总电流监控可视化展示............ 163
任务6.5　单车蓄电池温度可视化展示............ 168
单元小结............. 173
课后练习............. 173
单元7　新能源汽车数据大屏......175
单元描述 .............175
任务分解 .............176
知识要点 .............176
1. 大屏设计的步骤 ....... 176
2. 大屏布局 .... 177
3. 大屏设计技巧 ........... 178
任务7.1　建立数据分析维度.............179
任务7.2　实现大屏布局.....180
任务7.3　数据大屏实现.....182
单元小结..............199
课后练习..............199
参考文献 .200

苏州工业职业技术学院、南京第五十五所技术开发有限公司

（1）选用企业主流开发技术，突出前沿性
（2）以实际项目为载体，突出实践性
（3）以学生素质培养为目标，突出创新性