ECharts数据可视化 第1章 初识ECharts 教学设计

博学谷——让IT教学更简单，让IT学习更有效PAGE12PAGE2《ECharts数据可视化）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第1章初识ECharts计划课时4课时教学引入随着移动互联网的广泛应用，人们的日常生活中产生了大量的数据，这些数据中蕴藏着许多有价值的信息。如何将这些数据以直观、形象、交互式的方式展示到网页中，成了备受关注的焦点。我们可以借助数据可视化工具，实现这一目标。ECharts是Web前端开发中常用的数据可视化工具之一，使用它可以很轻松地将数据绘制成图表。本章将对数据可视化、ECharts，以及VisualStudioCode编辑器进行详细讲解。教学目标使学生了解数据可视化的概念，能够描述数据可视化的基本流程和应用场景使学生了解常见的数据可视化工具，能够说出数据可视化工具ECharts、D3、Highcharts和AntV的区别使学生了解ECharts的基本概念，能够说出什么是ECharts使学生熟悉ECharts5的新特性，能够归纳ECharts5的主要特性使学生掌握ECharts的获取方式，能够独立完成ECharts的获取使学生掌握VisualStudioCode编辑器的下载和安装，能够独立安装VisualStudioCode使学生掌握中文语言扩展的安装，能够在VisualStudioCode编辑器中安装中文语言扩展使学生掌握VisualStudioCode编辑器的使用方法，能够在项目中创建HTML5文档教学重点ECharts获取方式使用VisualStudioCode编辑器教学难点无教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（数据可视化概述、数据可视化应用场景、常见的数据可视化工具）一、通过直接引入的方式导入新课“一图胜千言”这句话准确地描述了图表的力量。与文字相比，图表更加直观，更容易被理解和记忆。作为一名ECharts的初学者，在正式学习ECharts前，需要先了解数据可视化的相关知识。本节课将详细讲解数据可视化概述、数据可视化应用场景、常见的数据可视化工具的相关内容。二、新课讲解知识点1-数据可视化概述教师通过PPT的方式讲解数据可视化。什么是数据可视化。数据可视化的基本流程。数据集目标数据预处理数据变换数据数据展示数据可视化工具需要具备的3个基本特性。实时性易操作性展现形式多样性知识点2-数据可视化应用场景教师通过PPT的方式讲解数据可视化的应用场景。通用报表。移动端图表。大屏可视化。地理可视化。知识点3-常见的数据可视化工具教师通过PPT的方式讲解常见的数据可视化工具。ECharts。D3。Highcharts。AntV。三、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。四、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（ECharts基本概念、ECharts5的新特性、ECharts获取方式）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在讲解了数据可视化的相关内容后，本节课将对ECharts基本概念、ECharts5的新特性以及ECharts获取方式进行简要介绍。三、新课讲解知识点1-ECharts基本概念教师通过PPT的方式讲解ECharts的基本概念。什么是ECharts。通过一个由ECharts生成的折线图认识ECharts，并介绍该折线图中组件的作用。标题组件图例组件工具栏组件提示框组件ECharts的主要特性。多种图表类型多种数据格式支持流数据跨平台支持多种语言支持多种渲染方案支持深度数据交互动画效果无障碍访问高度自定义知识点2-ECharts5的新特性教师通过PPT的方式讲解ECharts5的新特性。动态叙事。视觉设计。交互能力。开发体验。可访问性。知识点3-ECharts获取方式教师通过PPT结合实际操作的方式讲解ECharts的获取方式。从GitHub获取。从npm获取。从CDN获取。通过在线定制的方式获取。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（下载和安装VisualStudioCode编辑器、安装中文语言扩展、使用VisualStudioCode编辑器）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在使用ECharts开发项目之前，需要选择一款合适的编辑器进行代码编写和项目文件管理。本课程选择使用VisualStudioCode编辑器。本节课将对VisualStudioCode编辑器进行讲解。三、新课讲解知识点1-下载和安装VisualStudioCode编辑器教师通过PPT结合实际操作的方式讲解VisualStudioCode编辑器的下载和安装。VisualStudioCode编辑器是什么。VisualStudioCode编辑器的特点。下载和安装VisualStudioCode编辑器。知识点2-安装中文语言扩展教师通过PPT结合实际操作的方式讲解中文语言扩展的安装。为什么要安装中文语言扩展。讲解如何在VisualStudioCode编辑器中安装中文语言扩展。知识点3-使用VisualStudioCode编辑器教师通过PPT结合实际操作的方式讲解VisualStudioCode编辑器的使用。讲解如何创建一个项目文件夹。讲解如何使用VisualStudioCode编辑器打开文件夹。讲解如何在项目中创建一个HTML5文档。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机：（考察知识点为：ECharts获取方式、下载和安装VisualStudioCode编辑器、安装中文语言扩展、使用VisualStudioCode编辑器）形式：单独完成题目：完成ECharts的获取以及V