ECharts数据可视化 教案-教学设计 第1、2章 初识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的获取以及VisualStudioCode编辑器的下载和安装。具体要求：完成ECharts的获取。完成VisualStudioCode编辑器的下载和安装，并安装中文语言扩展。使用VisualStudioCode编辑器创建项目文件夹，然后打开文件夹，并在项目中创建一个HTML5文档。教学后记《ECharts数据可视化》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第2章折线图和饼图计划课时11课时教学引入在日常生活中，我们经常使用图表来整理和分析数据，以便得出更好的结论。在众多图表类型中，折线图和饼图相对比较简单，更适合ECharts初学者学习。因此，本书将以折线图和饼图作为切入点，帮助读者打好基础，为后续学习其他图表提供支撑。本章将针对如何使用ECharts绘制折线图和饼图进行详细讲解。教学目标使学生熟悉引入并配置ECharts的方法，能够归纳引入并配置ECharts的步骤使学生掌握坐标轴组件的使用方法，能够设置图表的x轴、y轴使学生掌握系列组件、标题组件、图例组件的使用方法，能够设置图表的系列、标题、图例使学生掌握数据堆叠的使用方法，能够设置数据堆叠使学生掌握折线图文本标签的使用方法，能够设置文本标签的显示状态、位置等使学生掌握区域填充样式的设置方法，能够设置区域填充样式使学生掌握网格组件、提示框组件、工具栏组件的使用方法，能够设置图表的网格、提示框、工具栏使学生掌握数据集组件的使用方法，能够使用数据集定义数据使学生掌握平滑曲线图的设置方法，能够将图表设置为平滑曲线图使学生掌握饼图半径的使用方法，能够设置饼图的半径使学生掌握饼图文本标签的使用方法，能够设置文本标签的显示状态、位置等使学生掌握南丁格尔图的设置方法，能够将图表设置为南丁格尔图使学生掌握折线图的绘制，能够完成基础折线图、堆叠折线图、区域面积图、堆叠面积折线图、阶梯折线图和平滑曲线图等的绘制使学生掌握饼图的绘制，能够完成基础饼图和南丁格尔图的绘制教学重点坐标轴组件系列组件标题组件图例组件折线图的文本标签网格组件提示框组件工具栏组件数据集组件饼图的文本标签教学难点坐标轴组件系列组件数据集组件教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（引入并配置ECharts、坐标轴组件、系列组件、标题组件、任务2.1.1绘制基础折线图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课最近，某互联网公司出现了利润下降的情况。为了找出原因，该公司的领导决定使用用户浏览量这一指标进行调查，并据此制定相关决策。会议结束后，运营总监整理了最近一周内的用户浏览量报表。他希望绘制一个基础折线图来更好地展示最近一周内的用户浏览量的变化情况。本节课将学习引入并配置ECharts、坐标轴组件、系列组件和标题组件，并基于最近一周内用户浏览量绘制基础折线图。三、新课讲解知识点1-引入并配置ECharts教师通过PPT结合实际操作的方式讲解引入并配置ECharts。通过代码演示在HTML中引入ECharts。init()方法的使用。setOption()方法的使用。通过代码演示如何在项目中引入并配置ECharts。知识点2-坐标轴组件教师通过PPT的方式讲解坐标轴组件。坐标轴组件的组成部分。xAxis。yAxis。坐标轴组件的效果。xAxis、yAxis的设置方式。列举xAxis、yAxis对象的常用属性。知识点3-系列组件教师通过PPT的方式讲解系列组件。系列组件的作用。基础折线图中系列组件的效果。系列组件的设置方式。列举系列的常用属性。知识点4-标题组件教师通过PPT结合实际操作的方式讲解标题组件。标题组件的作用。基础折线图中标题组件的效果。标题组件的设置方式。列举title对象的常用属性。通过代码演示如何设置标题。知识点5-任务2.1.1绘制基础折线图教师通过PPT结合实际操作的方式讲解任务2.1.1绘制基础折线图。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（初识堆叠折线图、图例组件、数据堆叠、折线图的文本标签、任务2.1.2绘制堆叠折线图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课某校始终积极贯彻落实各项规章制度，定期开展每月考核，切实提高学校课堂教学质量，构建良好教育生态。为了更好地开展工作，各年级班主任需要定期统计学生各科学习成绩，并取均值。班主任余老师希望绘制一张堆叠折线图来更好地展示本班部分学科学习成绩的变化趋势，从而帮助学生、家长和老师及时发现问题并进行查漏补缺，进而提高学生的学习成绩。本节课将学习初识堆叠折线图、图例组件、数据堆叠、折线图的文本标签，并基于初三某班部分学科学习成绩绘制堆叠折线图。三、新课讲解知识点1-初识堆叠折线图教师通过PPT的方式讲解初识堆叠折线图。什么是堆叠折线图。基础折线图和堆叠折线图的效果对比。知识点2-图例组件教师通过PPT结合实际操作的方式讲解图例组件。图例组件的作用。堆叠折线图中图例组件的效果。图例组件的设置方式。列举legend对象的常用属性。通过代码演示如何设置图例组件距离容器左侧距离。通过代码演示如何设置图例。知识点3-数据堆叠教师通过PPT结合实际操作的方式讲解数据堆叠。什么是数据堆叠。常见的可以进行数据堆叠的图表。数据堆叠的设置方式。知识点4-折线图的文本标签教师通过PPT结合实际操作的方式讲解折线图的文本标签。折线图文本标签的设置方式。列举折线图中label对象的常用属性。通过代码演示如何设置折线图的文本标签。知识点5-任务2.1.2绘制堆叠折线图教师通过PPT结合实际操作的方式讲解任务2.1.2绘制堆叠折线图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（初识区域面积图、区域填充样式、网格组件、任务2.1.3绘制区域面积图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课自媒体的兴起为人们提供了多元化的信息来源，丰富了我们的生活和工作。通过自媒体，我们可以记录美好生活，分享风土人情。小王是一名美食博主，他主要通过拍摄充满生活气息的内容并通过幽默诙谐的讲述方式来吸引观众，让他们了解不同地区的美食。经过多年的努力，他的账号已经拥有了5万多个粉丝。本节课将学习初识区域面积图、区域填充样式和网格组件，并基于小王运营账号近几年的粉丝数量绘制区域面积图。三、新课讲解知识点1-初识区域面积图教师通过PPT的方式讲解初识区域面积图。什么是区域面积图。区域面积图的效果。知识点2-区域填充样式教师通过PPT结合实际操作的方式讲解区域填充样式。区域填充样式的设置方式。列举areaStyle对象的常用属性。通过代码演示如何设置折线图区域填充样式。知识点3-网格组件教师通过PPT结合实际操作的方式讲解网格组件。网格组件的作用。区域面积图中网格组件的效果。网格组件的设置方式。列举grid对象的常用属性。通过代码演示如何设置网格。知识点4-任务2.1.3绘制区域面积图教师通过PPT结合实际操作的方式讲解任务2.1.3绘制区域面积图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机：（考察知识点为：任务2.1.1绘制基础折线图、任务2.1.2绘制堆叠折线图、任务2.1.3绘制区域面积图）形式：单独完成具体要求：按照任务需求实现指定的任务。第五课时（初识堆叠面积折线图、提示框组件、任务2.1.4绘制堆叠面积折线图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课如今，月饼与各地的饮食习俗相融合，发展出了广式、京式、苏式等各种口味的月饼。姚经理希望绘制一张堆叠面积折线图来更好地展示各个季度不同口味月饼的销售趋势，从而制定更好的销售措施，提升月饼的销量。本节课将学习初识堆叠面积折线图、提示框组件，并基于各个季度不同口味月饼的销售绘制堆叠面积折线图。三、新课讲解知识点1-初识堆叠面积折线图教师通过PPT的方式讲解初识堆叠面积折线图。什么是堆叠面积折线图。堆叠面积折线图的效果。知识点2-提示框组件教师通过PPT结合实际操作的方式讲解提示框组件。提示框组件的作用。堆叠面积折线图中提示框组件的效果。提示框组件的设置方式。列举tooltip对象的常用属性。通过代码演示如何设置提示框。知识点3-任务2.1.4绘制堆叠面积折线图教师通过PPT结合实际操作的方式讲解任务2.1.4绘制堆叠面积折线图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第六课时（初识阶梯折线图、工具栏组件、任务2.1.5绘制阶梯折线图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课自全面建成小康社会以来，我国人民生活水平普遍提高，大众对于美好生活的追求已由物质需求转变为精神需求。故每逢节假日，各地知名旅游景点都人山人海，热闹非凡。对此，各地政府会据实际情况做出相关安排，保障游客的安全，维护游客的合法权益。景点负责人希望绘制一张阶梯折线图展示某景点一年来门票价格的变化情况，从而更好地分析门票销售情况，并制定相应的营销策略。本节课将学习初识阶梯折线图、工具栏组件，并基于门票价格绘制阶梯折线图。三、新课讲解知识点1-初识阶梯折线图教师通过PPT结合实际操作的方式讲解初识阶梯折线图。什么是阶梯折线图。阶梯折线图的效果。阶梯折线图的设置方式。通过代码演示如何设置阶梯折线图。知识点2-工具栏组件教师通过PPT的方式讲解工具栏组件。工具栏组件的作用。阶梯折线图中工具栏组件的效果。工具栏组件的设置方式。列举toolbox对象的常用属性。知识点3-任务2.1.5绘制阶梯折线图教师通过PPT结合实际操作的方式讲解任务2.1.5绘制阶梯折线图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第七课时（初识平滑曲线图、数据集组件、平滑曲线的设置、任务2.1.6绘制平滑曲线图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课妙妙是快递站的老板，她希望绘制一张平滑曲线图来更好地展示一周之内快递的发货数量，并通过该图表展示快递发货数量的变化趋势，帮助妙妙更好地了解快递站的发货情况，从而更好地管理快递站的日常工作。本节课将学习初识平滑曲线图、数据集组件、平滑曲线的设置，并基于一周之内快递发货数量绘制平滑曲线图。三、新课讲解知识点1-初识平滑曲线图教师通过PPT的方式讲解初识平滑曲线图。什么是平滑曲线图。平滑曲线图的效果。知识点2-数据集组件教师通过PPT的方式讲解数据集组件。数据集组件的作用。数据设置在数据集组件中的优势。数据集组件的设置方式。dataset对象的常用属性为source属性的使用。知识点3-平滑曲线的设置教师通过PPT的方式讲解平滑曲线的设置。平滑曲线的设置方式。smooth属性的作用。smooth属性值类型。smooth属性为布尔值类型的数据。smooth属性为数字类型的数据。知识点4-任务2.1.6绘制平滑曲线图教师通过PPT结合实际操作的方式讲解任务2.1.6绘制平滑曲线图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第八课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机：（考察知识点为：任务2.1.4绘制堆叠面积折线图、任务2.1.5绘制阶梯折线图、任务2.1.6绘制平滑曲线图）形式：单独完成具体要求：按照任务需求实现指定的任务。第九课时（初识基础饼图、饼图的半径、饼图的文本标签、任务2.2.1绘制基础饼图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课小刘是一个经营了多家水果店的老板，他深知成功离不开“顺势而为”。近年来，他经常在季节交替时分析店铺内水果的销售情况，准确了解消费者的偏好，并进一步优化热门商品的供应和销售策略，以占据更大的市场份额。小刘希望绘制一张基础饼图来更好地展示店铺中夏季部分水果的销量占比情况。本节课将学习初识基础饼图、饼图的半径、饼图的文本标签，并基于某店铺夏季部分水果的销量绘制基础饼图。三、新课讲解知识点1-初识基础饼图教师通过PPT的方式讲解初识基础饼图。什么是基础饼图。基础饼图的设置方式。基础饼图的效果。知识点2-饼