ECharts数据可视化 教案 第1--3章 初识ECharts 教学设计---柱状图和散点图 教学设计.doc

博学谷——让IT教学更简单，让IT学习更有效

PAGE12

PAGE2

《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获取。

通过在线定制的方式获取。

四、归纳总结

教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。

五、布置作业

教师通过高校教辅平台（）布置