ECharts数据可视化实战教学教案35

第1章数据可视化概述教案课程名称：《ECharts数据可视化实战》课程类别：必修适用专业：计算机科学与技术、大数据技术类、商务数据分析与应用、电子商务等相关专业总学时：64学时（其中理论32学时，实验32学时）总学分：4.0学分本章学时：4学时材料清单《ECharts数据可视化实战》教材。配套PPT。引导性提问。探究性问题。拓展性问题。教学目标与基本要求教学目标根据目前数据可视化发展现状，首先介绍数据可视化的概念，并通过列举数据可视化的一些应用场景，让学生初步了解数据可视化的在一些领域的作用；其次介绍数据可视化的流程和常见的数据可视化工具，然后重点介绍数据可视化工具ECharts的发展历程、使用场景和ECharts5.x的特性；最后，介绍开发工具VSCode的下载和使用。基本要求了解数据可视化的基本概念。熟悉数据可视化的基本流程。了解常用的数据可视化工具。了解ECharts发展历程和ECharts5.x的特性。掌握开发工具VSCode的下载和使用。问题引导性提问引导性提问需要教师根据教材内容和学生实际水平，提出问题，启发引导学生去解决问题，提问，从而达到理解、掌握知识，发展各种能力和提高思想觉悟的目的。文字和图形哪一种更容易让人理解？举例说明数据可视化能够做什么？现实生活中存在哪些数据可视化的应用？该如何进行数据可视化？探究性问题探究性问题需要教师深入钻研教材的基础上精心设计，提问的角度或者在引导性提问的基础上，从重点、难点问题切入，进行插入式提问。或者是对引导式提问中尚未涉及但在课文中又是重要的问题加以设问。数据可视化的完整流程是怎样的？数据可视化的能够应用在哪些场景？数据可视化工具有哪些？拓展性问题拓展性问题需要教师深刻理解教材的意义，学生的学习动态后，根据学生学习层次，提出切实可行的关乎实际的可操作问题。亦可以提供拓展资料供学生研习探讨，完成拓展性问题。ECharts用于数据可视化有哪些优势？目前ECharts的最新版本是什么？如何将本班同学的数据做可视化？ECharts数据可视化的开发工具还有哪些？主要知识点、重点与难点主要知识点数据可视化的基本概念。数据可视化的基本流程。常用的数据可视化工具。ECharts发展历程和ECharts5.x的特性。ECharts的开发工具VSCode软件的下载、安装及使用。重点数据可视化的基本概念。ECharts的开发工具VSCode软件的下载、安装及简单使用。难点数据可视化的基本概念与流程。教学过程设计理论教学过程数据可视化的基本概念。数据可视化的基本流程。常用的数据可视化工具。ECharts发展历程和ECharts5.x的特性。ECharts的开发工具VSCode软件的下载、安装及简单使用。实验教学过程ECharts发展历程和ECharts5.x的特性。ECharts的开发工具VSCode软件的下载、安装及简单使用。教材与参考资料教材范路桥，郑述招，陈红玲，等．ECharts数据可视化实战[M]．西安：西安电子科技大学出版社．2023．参考资料范路桥，张良均，郑述招，等[M].Web数据可视化(ECharts版).北京：人民邮电出版社，2021.黑马程序员.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.师晓利，刘志远，杜琰琪.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.王凤丽，豆连军.Vue.js前端开发技术[M].北京：人民邮电出版社，2019.肖睿，龙颖，李辉，等.Vue.js企业开发实战[M].北京：人民邮电出版社，2018.百度ECharts官网./zh/2022-5-7.ECharts教程W3cschool./echarts_tutorial/2022-4-22.Vue官网./2022-5-7.宁赛飞，李小荣.数据分析基础[M].北京：人民邮电出版社，2018.

第2章ECharts最常用图表教案课程名称：《ECharts数据可视化实战》课程类别：必修适用专业：计算机科学与技术、大数据技术类、商务数据分析与应用、电子商务等相关专业总学时：64学时（其中理论32学时，实验32学时）总学分：4.0学分本章学时：12学时材料清单《ECharts数据可视化实战》教材。配套PPT。数据。代码。引导性提问。探究性问题。拓展性问题。教学目标与基本要求教学目标首先介绍创建ECharts图表之前的准备工作，及图表的制作的一般步骤。然后，介绍常见的柱状图，包括标准柱状图、堆积柱状图、标准条形图、瀑布图的制作；常见的折线图，包括标准折线图、堆积折线图、堆积面积图、阶梯图；常见的饼图的制作，包括标准饼图、圆环图、嵌套饼图和南丁格尔玫瑰图的制作。基本要求掌握创建ECharts图表的一般方法。掌握ECharts中各种柱状图的绘制方法。掌握ECharts中各种折线图的绘制方法。掌握ECharts中各种饼图的绘制方法。问题引导性提问引导性提问需要教师根据教材内容和学生实际水平，提出问题，启发引导学生去解决问题，提问，从而达到理解、掌握知识，发展各种能力和提高思想觉悟的目的。平常你最常见的图表主要有哪些？最常见的折线图主要有哪些？最常见的柱状图主要有哪些？最常见的饼图主要有哪些？探究性问题探究性问题需要教师深入钻研教材的基础上精心设计，提问的角度或者在引导性提问的基础上，从重点、难点问题切入，进行插入式提问。或者是对引导式提问中尚未涉及但在课文中又是重要的问题加以设问。折线图的主要功能是什么？折线图适合应用于什么场景？柱状图的主要功能是什么？柱状图适合应用于什么场景？饼图的主要功能是什么？饼图适合应用于什么场景？拓展性问题拓展性问题需要教师深刻理解教材的意义，学生的学习动态后，根据学生学习层次，提出切实可行的关乎实际的可操作问题。亦可以提供拓展资料供学生研习探讨，完成拓展性问题。堆积面积图适合应用于什么场景？普通折线图与阶梯图适用的场景有何不同？圆环图与嵌套饼图适用的场景有何不同？南丁格尔玫瑰图适合应用于什么场景？主要知识点、重点与难点主要知识点创建ECharts图表的一般方法。ECharts中各种柱状图的绘制方法。ECharts中各种折线图的绘制方法。ECharts中各种饼图的绘制方法。重点创建ECharts图表的一般方法。ECharts中各种柱状图的绘制方法。ECharts中各种折线图的绘制方法。难点ECharts中南丁格尔玫瑰图的绘制方法。教学过程设计理论教学过程下载好ECharts库文件。下载并配置好VSCode软件。绘制标准折线图。绘制堆积面积图。绘制堆积折线图。绘制阶梯图。绘制双折线图。绘制标准饼图。绘制圆环图。绘制嵌套饼图。绘制南丁格尔玫瑰图。实验教学过程下载ECharts库文件。下载并配置VSCode软件。绘制标准折线图及案例代码分析。绘制堆积面积图及案例代码分析。绘制堆积折线图及案例代码分析。绘制阶梯图及案例代码分析。绘制双折线图及案例代码分析。绘制标准饼图及案例代码分析。绘制圆环图及案例代码分析。绘制嵌套饼图及案例代码分析。绘制南丁格尔玫瑰图及案例代码分析。教材与参考资料教材范路桥，郑述招，陈红玲，等．ECharts数据可视化实战[M]．西安：西安电子科技大学出版社．2023．参考资料范路桥，张良均，郑述招，等[M].Web数据可视化(ECharts版).北京：人民邮电出版社，2021.黑马程序员.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.师晓利，刘志远，杜琰琪.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.王凤丽，豆连军.Vue.js前端开发技术[M].北京：人民邮电出版社，2019.肖睿，龙颖，李辉，等.Vue.js企业开发实战[M].北京：人民邮电出版社，2018.百度ECharts官网./zh/2022-5-7.ECharts教程W3cschool./echarts_tutorial/2022-4-22.Vue官网./2022-5-7.宁赛飞，李小荣.数据分析基础[M].北京：人民邮电出版社，2018.

第3章ECharts官方文档及常用组件教案课程名称：《ECharts数据可视化实战》课程类别：必修适用专业：计算机科学与技术、大数据技术类、商务数据分析与应用、电子商务等相关专业总学时：64学时（其中理论32学时，实验32学时）总学分：4.0学分本章学时：8学时材料清单《ECharts数据可视化实战》教材。配套PPT。数据。代码。引导性提问。探究性问题。拓展性问题。教学目标与基本要求教学目标首先介绍ECharts官方文档的使用，然后介绍ECharts的基础框架和常用术语，最后介绍ECharts图表中的常用的几种组件的配置和使用，包括网格组件、坐标轴组件、标题组件、图例组件、工具箱组件、详情提示框组件、标记点组件和标记线组件等。基本要求掌握ECharts官方文档的查询方法。了解ECharts的基础架构及常用术语。掌握ECharts的直角坐标系下的网格及坐标轴的使用。掌握ECharts中的标题组件与图例组件的使用。掌握ECharts中的工具箱组件与详情提示框组件的使用。掌握ECharts中的标记线与标记点的使用。问题引导性提问引导性提问需要教师根据教材内容和学生实际水平，提出问题，启发引导学生去解决问题，提问，从而达到理解、掌握知识，发展各种能力和提高思想觉悟的目的。图形和文字哪一种更容易让大脑记住？你希望图表上除了正常的数据之外，还应该有些什么内容？如何让图表的数据能够随着光标的移动而自动发生相应变化吗？使用什么组件能够记图表显示最大值、最小值和平均傎？探究性问题探究性问题需要教师深入钻研教材的基础上精心设计，提问的角度或者在引导性提问的基础上，从重点、难点问题切入，进行插入式提问。或者是对引导式提问中尚未涉及但在课文中又是重要的问题加以设问。ECharts的配置项太多，怎么办？ECharts组件是如何布局的？ECharts中绘制图表时，当图例数据较多时，一行放不下来，如何办？ECharts中绘制图表时，当有多种不同类型的数据要展示时，如何解决？拓展性问题拓展性问题需要教师深刻理解教材的意义，学生的学习动态后，根据学生学习层次，提出切实可行的关乎实际的可操作问题。亦可以提供拓展资料供学生研习探讨，完成拓展性问题。ECharts中，如何在鼠标滑过图表中的数据标签时，展现更详细的数据？ECharts中，如何将展现的图表保存到自己的电脑中？ECharts中，在一张网页中，如何在不同类型的图表自由地切换？主要知识点、重点与难点主要知识点ECharts官方文档的查询方法。ECharts的基础架构及常用术语。ECharts的直角坐标系下的网格及坐标轴的使用。ECharts中的标题组件与图例组件的使用。ECharts中的工具箱组件与详情提示框组件的使用。ECharts中的标记线与标记点的使用。重点ECharts官方文档的查询方法。ECharts中的标题组件与图例组件的使用。ECharts中的工具箱组件与详情提示框组件的使用。ECharts中的标记线与标记点的使用。难点ECharts中的提示框位置的设置。格式字符串formatter的设置。ECharts中的标记线与标记点的使用。教学过程设计理论教学过程使用ECharts官方文档，了解ECharts基础架构及常用术语。ECharts直角坐标系下的网格。ECharts直角坐标系下的坐标轴。ECharts直角坐标系下的x轴和y轴。ECharts中的标题组件。ECharts中的多标题组件。ECharts中的图例组件。ECharts中的九宫格布局。绘制ECharts中的工具箱组件。绘制ECharts中的详情提示框组件。提示框位置设置和formatter。绘制ECharts中的标记线组件和标记点。实验教学过程ECharts直角坐标系下的网格及案例代码分析。ECharts直角坐标系下的坐标轴及案例代码分析。ECharts直角坐标系下的x轴和y轴及案例代码分析。ECharts中的标题组件及案例代码分析。ECharts中的多标题组件及案例代码分析。ECharts中的图例组件及案例代码分析。绘制ECharts中的工具箱组件及案例分析代码。绘制ECharts中的详情提示框组件及案例代码分析。提示框位置设置和formatte及案例代码分析。绘制ECharts中的标记线组件和标记点及案例代码分析。教材与参考资料教材范路桥，郑述招，陈红玲，等．ECharts数据可视化实战[M]．西安：西安电子科技大学出版社．2023．参考资料范路桥，张良均，郑述招，等[M].Web数据可视化(ECharts版).北京：人民邮电出版社，2021.黑马程序员.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.师晓利，刘志远，杜琰琪.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.王凤丽，豆连军.Vue.js前端开发技术[M].北京：人民邮电出版社，2019.肖睿，龙颖，李辉，等.Vue.js企业开发实战[M].北京：人民邮电出版社，2018.百度ECharts官网./zh/2022-5-7.ECharts教程W3cschool./echarts_tutorial/2022-4-22.Vue官网./2022-5-7.宁赛飞，李小荣.数据分析基础[M].北京：人民邮电出版社，2018.

第4章ECharts中的其它图表教案课程名称：《ECharts数据可视化实战》课程类别：必修适用专业：计算机科学与技术、大数据技术类、商务数据分析与应用、电子商务等相关专业总学时：64学时（其中理论32学时，实验32学时）总学分：4.0学分本章学时：12学时材料清单《ECharts数据可视化实战》教材。配套PPT。数据。代码。引导性提问。探究性问题。拓展性问题。教学目标与基本要求教学目标首先介绍常见的散点图，包括基本散点图、两个序列的散点图和带涟漪特效的散点图，常见气泡图。然后介绍常见的仪表盘，包括单仪表盘和多仪表盘；再介绍常见的漏斗图，包括标准漏斗图和多漏斗图，常见的金字塔包括标准金字塔和多金字塔；最后介绍常见的雷达图，包括标准雷达图和多雷达图以及常见的词云图。基本要求掌握ECharts中散点图的绘制方法。掌握ECharts中气泡图的绘制方法。掌握ECharts中仪表盘的绘制方法。掌握ECharts中漏斗图（金字塔）的绘制方法。掌握ECharts中雷达图的绘制方法。掌握ECharts中词云图的绘制方法。问题引导性提问引导性提问需要教师根据教材内容和学生实际水平，提出问题，启发引导学生去解决问题，提问，从而达到理解、掌握知识，发展各种能力和提高思想觉悟的目的。如何直观地表达一个具有两个坐标值的变量之间的关系？如何直观地突出表达一个具有两个坐标值的极值变量？如何直观地表达一个具有三个坐标值的变量之间的关系？如何直观地表达一个有几个阶段的数据，这些数据自上而下逐渐下降，并且所有阶段的占比总计100%？探究性问题探究性问题需要教师深入钻研教材的基础上精心设计，提问的角度或者在引导性提问的基础上，从重点、难点问题切入，进行插入式提问。或者是对引导式提问中尚未涉及但在课文中又是重要的问题加以设问。表现一类事物的不同维度的变量，使用什么图表比较合适？对一些事物出现的频率做视觉化展示，使用什么图表比较合适？需要比较几位候选人的不同方面的能力，适合使用什么样的图表？拓展性问题拓展性问题需要教师深刻理解教材的意义，学生的学习动态后，根据学生学习层次，提出切实可行的关乎实际的可操作问题。亦可以提供拓展资料供学生研习探讨，完成拓展性问题。ECharts中，如何展示几个事物在不同时期的数据特征的变化？ECharts中，金字塔图适合应用于哪些场合？ECharts中，雷达图适合应用于哪些场合？ECharts中，词云图适合应用于什么场合？主要知识点、重点与难点主要知识点ECharts中散点图的绘制方法。ECharts中气泡图的绘制方法。ECharts中仪表盘的绘制方法。ECharts中漏斗图（金字塔）的绘制方法。ECharts中雷达图的绘制方法。ECharts中词云图的绘制方法。重点ECharts中散点图的绘制方法。ECharts中气泡图的绘制方法。ECharts中多仪表盘的绘制方法。ECharts中漏斗图（金字塔）的绘制方法。ECharts中雷达图的绘制方法。难点ECharts中词云图的方法。使用visualMap组件。教学过程设计理论教学过程绘制1个系列及2个系列的散点图。绘制散点图的涟漪特效。分析气泡图实例：人均寿命与GDP。绘制简单仪表盘的方法。绘制多仪表盘的方法。绘制渐变色仪表盘的方法。使用visualMap组件。绘制北上广空气指标的实例。绘制简单仪表盘的方法。绘制多仪表盘的方法。绘制渐变色仪表盘的方法。使用visualMap组件。绘制北上广空气指标的实例。绘制漏斗图（或金字塔）的方法。绘制多漏斗图（多金字塔）。绘制雷达图。绘制词云图。实验教学过程绘制1个系列及2个系列的散点图及案例代码分析。绘制散点图的涟漪特效及案例代码分析。分析气泡图实例：人均寿命与GDP及案例代码分析。绘制简单仪表盘的方法及案例代码分析。绘制多仪表盘的方法及案例代码分析。绘制渐变色仪表盘的方法及案例代码分析。使用visualMap组件及案例代码分析。绘制北上广空气指标的实例及案例代码分析。绘制简单仪表盘的方法及案例代码分析。绘制多仪表盘的方法及案例代码分析。绘制渐变色仪表盘的方法及案例代码分析。使用visualMap组件及案例代码分析。绘制北上广空气指标的实例及案例代码分析。绘制漏斗图（或金字塔）的方法及案例代码分析。绘制多漏斗图（多金字塔）及案例代码分析。绘制雷达图及案例代码分析。绘制词云图及案例代码分析。教材与参考资料教材范路桥，郑述招，陈红玲，等．ECharts数据可视化实战[M]．西安：西安电子科技大学出版社．2023．参考资料范路桥，张良均，郑述招，等[M].Web数据可视化(ECharts版).北京：人民邮电出版社，2021.黑马程序员.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.师晓利，刘志远，杜琰琪.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.王凤丽，豆连军.Vue.js前端开发技术[M].北京：人民邮电出版社，2019.肖睿，龙颖，李辉，等.Vue.js企业开发实战[M].北京：人民邮电出版社，2018.百度ECharts官网./zh/2022-5-7.ECharts教程W3cschool./echarts_tutorial/2022-4-22.Vue官网./2022-5-7.宁赛飞，李小荣.数据分析基础[M].北京：人民邮电出版社，2018.

第5章ECharts的高级使用教案课程名称：《ECharts数据可视化实战》课程类别：必修适用专业：计算机科学与技术、大数据技术类、商务数据分析与应用、电子商务等相关专业总学时：64学时（其中理论32学时，实验32学时）总学分：4.0学分本章学时：8学时材料清单《ECharts数据可视化实战》教材。配套PPT。数据。代码。引导性提问。探究性问题。拓展性问题。教学目标与基本要求教学目标本章介绍在ECharts中的高级使用，包括使图表更具表现力的图表混搭功能、使多个数据同时显示的多图表联动功能、动态切换主题功能、自定义ECharts主题功能、使图表更加灵活地响应用户的多种操作行为的事件和行为处理功能、使数据不再局限为固定的配置，从而更加灵活地获取外部数据的异步数据加载功能。基本要求掌握ECharts的图表混搭及多表联动。掌握ECharts主题切换及自定义主题。掌握ECharts中的事件和行为。掌握ECharts中异步数据加载和显示加载动画。问题引导性提问引导性提问需要教师根据教材内容和学生实际水平，提出问题，启发引导学生去解决问题，提问，从而达到理解、掌握知识，发展各种能力和提高思想觉悟的目的。如果一张网页中有两个或以上的图表，在其中一个图表的操作，能否联运另一个图表？能否在一张网页中，有多个不同类型的图表？ECharts中，能否响应鼠标事件？探究性问题探究性问题需要教师深入钻研教材的基础上精心设计，提问的角度或者在引导性提问的基础上，从重点、难点问题切入，进行插入式提问。或者是对引导式提问中尚未涉及但在课文中又是重要的问题加以设问。如果一张网页中有两个或以上的图表，在其中一个图表的操作，图表联运如何实现？ECharts中，如何响应鼠标事件？ECharts中，如何加载数据？拓展性问题拓展性问题需要教师深刻理解教材的意义，学生的学习动态后，根据学生学习层次，提出切实可行的关乎实际的可操作问题。亦可以提供拓展资料供学生研习探讨，完成拓展性问题。ECharts中，何谓回调函数，它有什么作用？ECharts中，组件交互的行为事件，有何作用？ECharts中，代码触发ECharts中组件的行为，如何处理？主要知识点、重点与难点主要知识点ECharts的图表混搭及多表联动。ECharts主题切换及自定义主题。ECharts中的事件和行为。ECharts中异步数据加载和显示加载动画。重点ECharts的图表混搭及多表联动。ECharts中的事件和行为。ECharts中异步数据加载和显示加载动画。难点ECharts中的事件和行为。教学过程设计理论教学过程绘制折柱混搭双y轴的ECharts图表。掌握ECharts中的水印文字的设置。ECharts中的多图表联动的方法。ECharts中动态切换主题。使用主题在线构建工具自定义ECharts主题。掌握ECharts中鼠标事件的处理。掌握ECharts组件交互的行为事件的处理。掌握代码触发ECharts中组件的行为的处理。实验教学过程绘制折柱混搭双y轴的ECharts图表及案例代码分析。掌握ECharts中的水印文字的设置及案例代码分析。ECharts中的多图表联动的方法及案例代码分析。ECharts中动态切换主题及案例代码分析。使用主题在线构建工具自定义ECharts主题及案例代码分析。掌握ECharts中鼠标事件的处理及案例代码分析。掌握ECharts组件交互的行为事件的处理及案例代码分析。掌握代码触发ECharts中组件的行为的处理及案例代码分析。教材与参考资料教材范路桥，郑述招，陈红玲，等．ECharts数据可视化实战[M]．西安：西安电子科技大学出版社．2023．参考资料范路桥，张良均，郑述招，等[M].Web数据可视化(ECharts版).北京：人民邮电出版社，2021.黑马程序员.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.师晓利，刘志远，杜琰琪.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.王凤丽，豆连军.Vue.js前端开发技术[M].北京：人民邮电出版社，2019.肖睿，龙颖，李辉，等.Vue.js企业开发实战[M].北京：人民邮电出版社，2018.百度ECharts官网./zh/2022-5-7.ECharts教程W3cschool./echarts_tutorial/2022-4-22.Vue官网./2022-5-7.宁赛飞，李小荣.数据分析基础[M].北京：人民邮电出版社，2018.

第6章Vue.js项目开发基础教案课程名称：《ECharts数据可视化实战》课程类别：必修适用专业：大数据技术类、商务数据分析与应用、电子商务等相关专业总学时：64学时（其中理论32学时，实验32学时）总学分：4.0学分本章学时：12学时材料清单《ECharts数据可视化实战》教材。配套PPT。数据。代码。引导性提问。探究性问题。拓展性问题。教学目标与基本要求教学目标首先介绍Vue概述、Vue的下载和引用、第一个Vue实例。然后着重介绍Vue常用指令、事件监听、事件处理和事件修饰符、双向数据绑定、了解Vue生命周期。最后介绍Vue路由的搭建、掌握Axios组件获取后台数据。基本要求Vue的下载和引用、创建第一个Vue实例。掌握Vue常用指令。了解Vue生命周期。掌握Vue路由的搭建。掌握Axios框架获取后台数据。问题引导性提问引导性提问需要教师根据教材内容和学生实际水平，提出问题，启发引导学生去解决问题，提问，从而达到理解、掌握知识，发展各种能力和提高思想觉悟的目的。Vue.js中，如何遍历一组数组中的数据？探究性问题探究性问题需要教师深入钻研教材的基础上精心设计，提问的角度或者在引导性提问的基础上，从重点、难点问题切入，进行插入式提问。或者是对引导式提问中尚未涉及但在课文中又是重要的问题加以设问。Vue.js中，如何进行双向数据绑定？Vue.js中，如何进行页面跳转？拓展性问题拓展性问题需要教师深刻理解教材的意义，学生的学习动态后，根据学生学习层次，提出切实可行的关乎实际的可操作问题。亦可以提供拓展资料供学生研习探讨，完成拓展性问题。如何在开发中实现前后端分离？主要知识点、重点与难点主要知识点Vue的下载和引用、创建第一个Vue实例。掌握Vue常用指令。了解Vue生命周期。掌握Vue路由的搭建。掌握Axios框架获取后台数据。重点掌握Vue常用指令。Vue路由的搭建。难点掌握Axios框架获取后台数据。教学过程设计理论教学过程了解Vue概述。了解Web前端技术发展概述。了解Web前端三大主流框架。掌握Vue的下载与引入。掌握Vue实例及其选项。掌握双大括号标签、v-text与v-html指令。了解Vue优化指令：v-cloak，v-once，v-pre。掌握v-if/v-else-if/v-else指令用于条件渲染。掌握v-show指令用于切换元素的显示与隐藏。掌握v-bind指令用于单向数据绑定。掌握v-for指令用于列表渲染。掌握v-on指令用于事件监听与事件处理。掌握v-model指令用于双向数据绑定。掌握Vue实例创建期间的生命周期函数。掌握路由的安装和基本使用。掌握嵌套路由、传递参数及获取参数、路由重定向、编程式导航。Axios的安装及引入、get请求、post请求。实验教学过程在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检测用户是否可用案例代码分析。教材与参考资料教材范路桥，郑述招，陈红玲，等．ECharts数据可视化实战[M]．西安：西安电子科技大学出版社．2023．参考资料范路桥，张良均，郑述招，等[M].Web数据可视化(ECharts版).北京：人民邮电出版社，2021.黑马程序员.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.师晓利，刘志远，杜琰琪.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.王凤丽，豆连军.Vue.js前端开发技术[M].北京：人民邮电出版社，2019.肖睿，龙颖，李辉，等.Vue.js企业开发实战[M].北京：人民邮电出版社，2018.百度ECharts官网./zh/2022-5-7.ECharts教程W3cschool./echarts_tutorial/2022-4-22.Vue官网./2022-5-7.宁赛飞，李小荣.数据分析基础[M].北京：人民邮电出版社，2018.

实战项目开发:专业群发展监测平台教案课程名称：《ECharts数据可视化实战》课程类别：必修适用专业：大数据技术类、商务数据分析与应用、电子商务等相关专业总学时：64学时（其中理论32学时，实验32学时）总学分：4.0学分本章学时：8学时材料清单《ECharts数据可视化实战》教材。配套PPT。数据。代码。引导性提问。探究性问题。拓展性问题。教学目标与基本要求教学目标首先介绍专业群发展监测平台项目的一些关键的开发思路。然后介绍学校数据可视化分析大屏的设计与实现。再介绍登录页的设计与实现。最后介绍在学校大屏中柱状图、折线图、饼图和雷达图的制作。基本要求使用Vue-cli脚手架工具创建Vue项目。项目的设计思路。学校数据可