ECharts数据可视化 教案 第2章 折线图和饼图 教学设计.doc

第1章PHP开篇

PAGE16

《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绘制堆叠折线图）

一、复习巩固

教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。

二、通过需求引入的方式导入新课

某校始终积极贯彻落实各项规章制度，定期开展每月考核，切实提高学校课堂教学质量，构建良好教育生态。为了更好地开展工作，各年级班主任需要定期统计学生各科学习成绩，并取均值