ECharts数据可视化实战教学大纲

《ECharts数据可视化实战》教学大纲课程名称：《ECharts数据可视化实战》课程类别：必修适用专业：计算机科学与技术、大数据技术类、商务数据分析与应用、电子商务等相关专业总学时：64学时（其中理论31学时，实验33学时）总学分：4.0学分课程性质随着云计算与物联网的兴起，大数据时代已经到来，ChatGPT的方兴未艾，在商业、经济及其他领域中基于数据分析以动态地展示数据起来越重要。Web数据可视化技术将帮助企业用户在动态地展示数据，为企业经营决策积极的帮助。Web数据可视化技术作为一门前沿技术，广泛应用于物联网、云计算、移动互联网等战略新兴产业。有实践操作经验的Web数据可视化人才已经成为各企业争夺的热门人才。为了推动我国大数据，云计算，人工智能行业的发展，满足日益增长的数据可视化技术人才需求。特开设Web数据可视化技术与应用课程。课程任务通过本课程的学习，使学生了解数据可视化的概念、方法、工具和流程，能够熟练使用ECharts进行数据可视化的图表制作，能够将理论与实践相结合。能综合利用ECharts图表工具、Vue.js、Element-UI、Vue路由、Axios组件等常用的前端工具解决实际问题，为将来从事数据可视化分析与展示奠定坚实基础。课程学时分配学时分配表课程章节理论学时实验学时第1章认识数据可视化22第2章ECharts最常用图表66第3章ECharts官方文档及常用组件44第4章ECharts其它图表66第5章ECharts的高级使用44第6章Vue.js项目开发基础66第7章项目实战：专业群发展监测平台44课时汇总3232教学内容及学时安排1、理论教学序号章节名称主要内容教学目标学时1认识数据可视化认识数据可视化。认识ECharts。开发工具。了解数据可视化的基本概念。熟悉数据可视化的基本流程。了解常用的数据可视化工具。了解ECharts发展历程和ECharts5.x的特性。掌握开发工具VSCode的下载和使用。22ECharts最常用图表快速上手第一个ECharts实例。绘制各种柱状图。绘制各种折线图。绘制各种饼图。掌握创建ECharts图表方法。掌握ECharts中各种柱状图绘制方法。掌握ECharts中各种折线图绘制方法。掌握ECharts中各种饼图绘制方法。63ECharts官方文档及常用组件ECharts官方文档、基础架构及常用术语。直角坐标系下的网格及坐标轴。标题组件与图例组件。工具箱组件与详情提示框组件。标记线与标记点。掌握ECharts官方文档的查询方法。了解ECharts的基础架构及常用术语。掌握ECharts的直角坐标系下的网格及坐标轴的使用。掌握ECharts中的标题组件与图例组件的使用。掌握ECharts中的工具箱组件与详情提示框组件使用。掌握ECharts中的标记线与标记点的使用。44ECharts的其他图表绘制散点图。绘制气泡图。绘制仪表盘。绘制漏斗图。绘制雷达图。绘制词云图。绘制矩形树图。掌握ECharts中散点图绘制方法。掌握ECharts中气泡图绘制方法。掌握ECharts中仪表盘绘制方法。掌握ECharts中漏斗图（金字塔）的绘制方法。掌握ECharts中雷达图绘制方法。掌握ECharts中词云图绘制方法。掌握ECharts中矩形树图绘制方法。65ECharts的高级功能ECharts图表混搭及多表联动。ECharts主题切换及自定义主题。ECharts中的事件和行为。ECharts中异步数据加载和显示加载动画。掌握ECharts的图表混搭及多表联动。掌握ECharts主题切换及自定义主题。掌握ECharts中的事件和行为。掌握ECharts中异步数据加载和显示加载动画。46Vue.js项目开发基础Vue下载和引用、创建第一个Vue实例。Vue常用指令。Vue生命周期。Vue路由的搭建。Axios框架获取后台数据。Vue的下载和引用、创建第一个Vue实例。掌握Vue常用指令。了解Vue生命周期。掌握Vue路由的搭建。掌握Axios框架获取后台数据。67项目实战Vue-cli脚手架工具创建Vue项目。项目的设计思路。学校数据可视化分析大屏的设计与实现。登录页的设计与实现。在学校大屏中柱状图、折线图、饼图和雷达图的制作。使用Vue-cli脚手架工具创建Vue项目。项目的设计思路。学校数据可视化分析大屏的设计与实现。登录页的设计与实现。在学校大屏中柱状图、折线图、饼图和雷达图的制作。42、实验教学序号实验项目名称实验要求学时1搭建ECharts可视化开发环境在Windows系统上搭建ECharts的开发环境；掌握VSCode软件的常用插件。22ECharts最常用图表下载ECharts库文件。下载并配置VSCode软件。绘制标准折线图。绘制堆积面积图。绘制堆积折线图。绘制阶梯图。绘制双折线图。绘制标准饼图。绘制圆环图。绘制嵌套饼图。绘制南丁格尔玫瑰图。63ECharts官方文档及常用组件44ECharts中的其它图表绘制1个系列及2个系列的散点图。绘制散点图的涟漪特效。绘制气泡图实例：人均寿命与GDP。绘制简单仪表盘。绘制多仪表盘。绘制渐变色仪表盘。使用visualMap组件。绘制北上广空气指标。绘制简单仪表盘。绘制多仪表盘的方法。绘制渐变色仪表盘。使用visualMap组件。绘制北上广空气指标的实例。绘制漏斗图（或金字塔）的方法。绘制多漏斗图（多金字塔）。绘制雷达图。绘制词云图。65ECharts的高级功能绘制折柱混搭双y轴的ECharts图表。掌握ECharts中的水印文字的设置。ECharts中的多图表联动的方法。ECharts中动态切换主题。使用主题在线构建工具自定义ECharts主题。掌握ECharts中鼠标事件的处理。掌握ECharts组件交互的行为事件的处理。掌握代码触发ECharts中组件的行为的处理。46Vue.js项目开发基础在HTML文件中创建第一个Vue案例。输出data对象的属性值案例。使用简单表达式关键案例。v-text指令与插值表达式案例。v-text与v-html指令及胡子语法案例。v-if指令案例。v-if&v-else指令案例。v-else-if指令案例。v-if/v-else-if/v-else指令案例。v-show指令案例。v-bind指令案例。v-for指令遍历数组案例。v-on指令产生随机数案例。v-on指令绑定方法案例。v-on指令-阻止冒泡案例。v-model指令-绑定单行文本框案例。v-model指令-文本框搜索图书信息案例。v-model指令-绑定文本域案例。v-model指令-绑定文本域案例。v-model指令-绑定多个复选框案例。v-model指令-绑定单选下拉列表案例。生命周期函数案例。vue-router的使用案例。嵌套路由示例案例。query传参案例。params传参案例。router.goBack()后退按钮案例。使用axios检测用户是否可用案例。67项目实战Vue环境安装。利用Element-UI设计静态登录页。使用Axios技术，完成登录页面功能的具体实现。掌握在学校大屏中绘制折线图的方法。掌握在学校大屏中绘制饼图的方法。掌握在学校大屏中绘制雷达图的方法。完成在学校大屏中绘制其它图表的方法。4考核方式突出学生解决实际问题的能力，加强过程性考核。课程考核的成绩构成=平时作业（20%）+课堂参与（20%）+期末考核（60%）。期末考核建议采用开卷、机试形式；试题可包括柱状图、折线图、饼图、散点图、气泡图、仪表盘、雷达图、漏斗图、词云图等图表，图表可包含坐标轴、网格、标题、提示框、图例、数据区域缩放、值域漫游、工具箱、时间轴等组件模块；也可根据需要包括Vue.js相关v-for、v-on等指令、Axios组件、Vue路由。题型以实际应用场景的操作题为主。教材与参考资料教材范路桥，郑述招，陈红玲，等．ECharts数据可视化实战[M]．西安：西安电子科技大学出版社．2023．参考资料范路桥，张良均，郑述招，等[M].Web数据可视化(ECharts版).北京：人民邮电出版社，2021.黑马程序员.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.师晓利，刘志远，杜琰琪.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.王凤丽，豆连军.Vue.js前端开发技术[M].北京：人民邮电出版社，2