本书为江苏省“十四五”首批职业教育规划教材，以“新能源汽车大数据分析系统”作为贯穿始终的核心教学项目，围绕这一具有行业代表性的应用场景，系统构建学生对于现代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知识要点21.数据可视化22.Web数据可视化及方法23.Web数据可视化相关技术3单元实施3任务1.1认识Web前端开发3任务1.2Web数据可视化应用案例4单元小结6课后练习7第2单元新能源汽车大数据分析系统8单元描述8任务分解9知识要点91.电动汽车基础92.数据与存储103.前端框架数据驱动模式11单元实施12任务2.1理解业务模式12任务2.2构建数据模型13任务2.3认识车辆数据14单元小结15课后练习15第3单元UI前端框架基础17单元描述17任务分解19知识要点191.前端开发常用工具介绍192.ElementPlus框架基础193.CSS基础264.网页中的JavaScript31单元实施3

随着云计算、大数据等新一代信息技术的飞速发展，传统行业利用大数据分析技术挖掘数据效益的潜能得到空前释放。数据效益的呈现并不会自动产生，选择交互式的、直观丰富的基于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）选用企业主流开发技术，突出前沿性。


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


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