本书为江苏省“十四五”首批职业教育规划教材，以“新能源汽车大数据分析系统”作为贯穿始终的核心教学项目，围绕这一具有行业代表性的应用场景，系统构建学生对于现代 Web 前端开发与数据可视化领域的完整知识与技能体系。学习路径设计遵循“认知—实践—综合—创新”的递进逻辑，从 Web 开发基础与新能源汽车大数据分析系统的业务认知起步，历经 UI 框架搭建、Vue 核心技术应用等关键阶段，最后借助 ECharts 等主流工具进行专业级数据图表开发与交互式数据大屏的完整实现，形成从基础到综合、从单一技能到项目集成的清晰进阶脉络，确保了学习过程的连贯性和能力的阶梯式提升。
       本书采用“任务驱动、理实一体”的编写模式，将复杂的技术体系巧妙地拆解为“创建新能源汽车数据大屏页面”“实现首页动态菜单与组件切换”“绘制车辆故障比例与城市分布图表”等具体的、层层递进的开发任务。学生在动手实现这些真实业务功能模块的过程中，主动构建并深刻理解前端工程化环境配置、组件化开发思想、路由管理，以及可视化库的集成与应用等核心专业技能，从而实现“做中学、学中做”的有效知识内化。
       本书适合作为高职高专大数据技术等计算机类相关专业课程的教材，也可供从事数据可视化、数据分析、前端设计的技术人员使用。

       随着云计算、大数据等新一代信息技术的飞速发展，传统行业利用大数据分析技术挖掘数据效益的潜能得到空前释放。数据效益的呈现并不会自动产生，选择交互式的、直观丰富的基于Web 的视觉呈现方式成为当前的一种主流选择。
       本教材的编者长期从事企业项目开发与实践的第一线，迫切感受到学校教育和工程实践之间的鸿沟。一方面，IT 企业竞争不断加剧，企业招聘不到心仪的 Web 前端开发员工；另一方面，高校培养的学生就业面临诸多现实困难，难以找到专业对口的工作。本教材的初衷是将 IT 企业开发中的主流前沿技术转化为人才培养的素材，培养符合经济社会发展需要的适配人才，使他们顺利投身产业并推动产业的进步与发展。
本教材将新时代所倡导的工匠精神与职业素养培育深度融入每一个技能训练环节：通过引导学生建立严谨的数据思维，精确理解业务数据模型；在图表配色、动画、交互等细节上反复推敲打磨；在代码编写中遵循模块化与工程规范；在大屏设计中始终以用户洞察与业务价值为导向，潜移默化地培养学生在技术工作中精益求精、一丝不苟、用户至上的专业态度与责任感。这种设计与实践，旨在实现学生专业技能硬实力与职业素养软实力的同步锻造与有机统一，为培养适应产业需求的高素质技术技能人才奠定坚实基础。
       本教材特点如下：
     （1）选用企业主流开发技术，突出前沿性。
       本教材选择 Web 开发中的主流技术，突出软件开发中的分层思想，将主流的前端开发框架Vue.js 与 ECharts 为代表的可视化工具进行有机融合，快速构建基于 Web 的前端可视化应用。
     （2）以实际项目贯穿，突出实践性。
       本教材以新能源汽车大数据分析系统项目为载体，循序渐进引导学习者由浅入深掌握 Web前端开发核心技术，摆脱前端基础知识学习后不能快速从事行业应用开发的痛点。
     （3）以学生素质培养为目标，突出职业性。
       数据可视化是一门技术，更是一门艺术。本教材突破单纯的知识教授，将技术、素质、能力的提升蕴含其中，让学生在潜移默化中得到锻炼和提高。
       本教材第一版推出后受到广泛欢迎，第二版在贴近产业、技术升级、高级技术等三个方面做了显著调整和优化，具体包括：在第 1、2 单元中引入更多可视化在产业中的应用介绍。第 3 单元将 Web 基础理论调整为 UI 前端框架技术，详解 Element Plus 的使用。将原第 4 单元拆分为“前端框架基础”和“前端框架进阶”两个单元，并将前端框架由 Vue 2.0 版本更新至 Vue 3.0，帮助学习者更好地掌握最新的 Vue 核心概念和高级应用。在第 6 单元数据可视化基础部分中增加组合图表、散点图、词云、热力图、3D 柱形图、汽车仪表图等不同类型图表制作的内容。第 7 单元将原“数据可视化整合”调整为“基于 Vue 的数据可视化开发”，通过递进式的案例设计，完整呈现前端框架与数据可视化技术的融合之道，帮助学生建立起符合现代前端工程规范的完整开发思维，最终具备独立架构复杂可视化系统的能力。
本教材教学内容采用模块化、任务式的编写思路，分 8 个单元 27 个任务。每个单元包含单元描述、任务分解、知识要点、单元实施、单元小结、课后练习，通过单元描述引出教学单元的教学核心内容，明确教学目标。单元实施包含若干教学任务，每个任务包含任务描述、任务分析、任务实施、同步训练四个环节。单元最后设置课后练习和单元小结，课后练习针对本单元的任务规划知识考核和技能考核习题；单元小结则总结单元的重点和难点内容。本教材建议授课 60 学时，教学内容及学时安排见表 1。
表 1 学时分配表
单元         内容                        学时
第 1 单元 Web 数据可视化概述 2
第 2 单元 新能源汽车大数据分析系统 2
第 3 单元 UI 前端框架基础 6
第 4 单元 前端框架基础 18
第 5 单元 前端框架进阶 8
第 6 单元 数据可视化设计基础 8
第 7 单元 基于 Vue 的数据可视化开发 10
第 8 单元 新能源汽车数据大屏制作 6
学时总计 60
       本教材适合作为高职高专大数据技术等计算机类相关专业课程的教材，对于从事数据可视化、数据分析、前端设计的技术人员也有较大的参考价值，同时也适合从事前端设计、数据可视化设计和实现的专业人士阅读。本书配有课件、源代码、视频等配套教学资源，登录 http://lxing.ltd/jxsxythpt/#/login 网站，使用邀请码 hH8c6xfy 即可访问获取。读者通过扫描书中的二维码可以观看微课视频，其他资源也可登录中国铁道出版社教育资源数字化平台（https://www.tdpress.com/51eds）进行下载。
       本教材由刘文军、胡霞和宋学永任主编，芮文艳、汤晓燕、伊雯雯、朱东任副主编。具体编写分工如下：第 1 单元由刘文军编写，第 2 单元由朱东编写，第 3、6 单元由芮文艳编写，第4、5 单元由胡霞编写，第 7 单元由伊雯雯编写，第 8 单元由汤晓燕编写，宋学永总经理从企业人才需求角度负责对本书的内容提出建议，并参与了验证和校对工作，苏州海格电控股份有限公司吴新兵总经理对本书的案例进行指导，在此一并表示感谢！同时，在本书编写过程中，参阅了国内外同行编写的相关著作和各类文献，谨向各位编者致以深深谢意！
       由于编者水平有限，疏漏和不足之处在所难免，恳请各位读者给予批评、指正，将不胜感激。
                                                     编 者
                                               2025 年 10 月

第1单元  Web 数据可视化概述 1
单元描述 1
任务分解 2
知识要点 2
1. 数据可视化 2
2. Web 数据可视化及方法 2
3. Web 数据可视化相关技术 3
单元实施 3
任务 1.1 认识 Web 前端开发 3
任务 1.2 Web 数据可视化应用案例 4
单元小结 6
课后练习 7

第2单元  新能源汽车大数据分析系统 8
单元描述 8
任务分解  9
知识要点    9
1. 电动汽车基础   9
2. 数据与存储 10
3. 前端框架数据驱动模式 11
单元实施 12
任务 2.1 理解业务模式 12
任务 2.2 构建数据模型 13
任务 2.3 认识车辆数据 14
单元小结 15
课后练习  15

第3单元  UI 前端框架基础 17
单元描述 17
任务分解 19
知识要点 19
1. 前端开发常用工具介绍 19
2. Element Plus 框架基础 19
3. CSS 基础    26
4. 网页中的 JavaScript  31
单元实施 33
任务 3.1 搭建开发环境 33
任务 3.2 创建新能源汽车数据大屏页面  35
任务 3.3 创建新能源汽车单车监控页面  39
任务 3.4 创建新能源汽车车辆管理页面 44
单元小结 49
课后练习    49

第4单元  前端框架基础 51
单元描述 51
任务分解 52
知识要点    53
1. 前端框架简介 53
2. Vue.js 概述   54
3. Vue.js 安装 55
4. Vue.js 基础  57
5. 组件基础 74
单元实施    80
任务 4.1 新能源汽车大数据分析系统首页设计 80
任务 4.2 新能源汽车大数据分析系统首页动态菜单实现  87
任务 4.3 新能源汽车大数据分析系统首页组件动态切换 92
任务 4.4 新能源汽车大数据分析系统车辆信息显示 96
任务 4.5 新能源汽车大数据分析系统车辆信息管理 108
单元小结  118
课后练习 119

第5单元  前端框架进阶 120
单元描述 120
任务分解 121
知识要点    121
1. webpack 121
2. Vue CLI 脚手架  121
3. Vite    129
4. create-vue 脚手架  130
5. 组件进阶 137
6. 路由    141
单元实施 152
任务 5.1 新能源汽车大数据分析系统工程化开发  152
任务 5.2 新能源汽车大数据分析系统单文件组件开发 160
任务 5.3 新能源汽车大数据分析系统前端路由配置  176
单元小结  182
课后练习  182

第6单元  数据可视化设计基础 184
单元描述    184
任务分解  185
知识要点 185
1. 创建有效可视化的步骤 185
2. ECharts 基础 191
单元实施 195
任务 6.1 认识数据可视化 195
任务 6.2 使用 ECharts 实现车辆数据可视化 197
单元小结    209
课后练习  209

第7单元  基于 Vue 的数据可视化开发 211
单元描述    211
任务分解 212
知识要点 212
1. Axios 212
2. Vue 的生命周期 213
3. async 与 await 214
4. 基于 Vue 的 ECharts 图表绘制 214
5. 使用 Mock 服务  215
单元实施  218
任务 7.1 实现研发与维修统计分析页面整体布局  218
任务 7.2 新增故障比例可视化展示          221
任务 7.3 车辆城市分布 Top10 可视化展示 224
任务 7.4 单车总电流监控可视化展示 226
任务 7.5 单车蓄电池温度监控可视化展示 230
单元小结 233
课后练习  233

第8单元  新能源汽车数据大屏制作 235
单元描述  235
任务分解    236
知识要点 236
1. 大屏设计原则  236
2. 大屏设计步骤 237
3. 大屏布局  238
4. 大屏适配方案 239
单元实施  239
任务 8.1 建立数据分析维度 239
任务 8.2 大屏布局设计 240
任务 8.3 数据大屏实现 241
单元小结  254
课后练习 255
参考文献    256

刘文军，苏州工业职业技术学院教师，博士，江苏省骨干专业（软件技术）带头人。胡霞，苏州工业职业技术学院教师。宋学永，高级工程师职称，信息系统项目管理师认证，江苏一道云科技发展有限公司技术总监。

（1）选用企业主流开发技术，突出前沿性。

（2）以实际项目贯穿，突出实践性。

（3）以学生素质培养为目标，突出职业性。