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

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

PAGE12

PAGE8

《ECharts数据可视化》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

第3章柱状图和散点图

计划课时

9课时

教学引入

通过对第2章的学习，大家应该已经掌握了绘制常见折线图和饼图的方法，以及ECharts中常用组件的基本使用。通过配置项的设置，可以实现所需折线图和饼图的效果。接下来，本章将讲解如何绘制常见的柱状图和散点图。

教学目标

使学生掌握柱条背景样式的设置方法，能够设置柱条的背景色、背景描边色、背景描边类型等

使学生掌握柱状图标线的使用方法，能够设置最大值标线、最小值标线、平均值标线等

使学生熟悉柱条宽度和间距的设置方法，能够总结柱条宽度、最大宽度、最小宽度、间距的用法

使学生掌握图形和标签高亮样式的设置方法，能够设置图形和标签高亮样式

使学生掌握柱条样式的设置方法，能够设置柱条的颜色、描边线宽、描边色、阴影、不透明度等

使学生掌握柱状图文本标签的使用方法，能够设置文本标签的显示状态、位置等

使学生掌握柱状图标注样式的使用方法，能够设置标注信息

使学生掌握坐标轴组件中分隔线的使用方法，能够设置x轴、y轴的分隔线

使学生掌握坐标轴组件中不显示零刻度的设置，能够实现x轴、y轴上零刻度的显示与隐藏

使学生掌握涟漪动画的相关配置，能够设置涟漪动画的大小、颜色、周期等

使学生掌握涟漪动画显示时机的设置，能够控制涟漪动画何时开始显示

使学生掌握常见柱状图的绘制，能够完成基础柱状图、堆叠柱状图、阶梯瀑布图和堆叠条形图的绘制

使学生掌握常见散点图的绘制，能够完成基础散点图、带有涟漪动画的散点图、气泡图的绘制

教学重点

柱条的背景样式

柱状图的标线

图形和标签高亮样式

柱条的样式

柱状图的文本标签

柱状图的标注样式

涟漪动画的相关配置

教学难点

柱状图的标线

柱状图的文本标签

教学方式

课堂教学以PPT讲授为主，并结合多媒体进行教学

教

学

过

程

第一课时

（初识基础柱状图、柱条的背景样式、任务3.1.1绘制基础柱状图）

一、复习巩固

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

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

小蔡是一家小超市的老板，售卖多种商品。他想以柱状图的形式查看某款洗发水在过去一年中每个月的销售情况，根据销量来决定以后的进货量，以便更好地管理库存。为此，他翻看了该款商品过去一年的销售数据，并将这些数据汇总在月销售情况报表中。

本节课将学习初识基础柱状图和柱条的背景样式，并基于某款洗发水一年的销售情况绘制基础柱状图。

三、新课讲解

知识点1-初识基础柱状图

教师通过PPT结合实际操作的方式讲解基础柱状图。

什么是基础柱状图。

基础柱状图的两种表现方式。

纵向基础柱状图

横向基础柱状图

基础柱状图的图表类型的设置方式。

知识点2-柱条的背景样式

教师通过PPT结合实际操作的方式讲解柱条的背景样式。

柱条背景样式的设置方式。

列举backgroundStyle对象的常用属性。

通过代码演示如何设置柱条的背景样式。

知识点3-任务3.1.1绘制基础柱状图

教师通过PPT结合实际操作的方式讲解任务3.1.1绘制基础柱状图。

四、归纳总结

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

五、布置作业

教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。

第二课时

（初识堆叠柱状图、柱状图的标线、柱条的宽度、柱条的间距、图形和标签高亮样式、任务3.1.2绘制堆叠柱状图）

一、复习巩固

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

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

小明是互联网公司的运营总监，负责收集并统计某网站的访问量，他想以堆叠柱状图的形式查看该网站在直接访问、广告和搜索引擎这3种渠道下的访问量，以便制定后续的运营方案。因此，他整理了最近一周网站在这3种渠道下的访问量数据。

本节课将学习初识堆叠柱状图、柱状图的标线、柱条的宽度、柱条的间距、图形和标签高亮样式，并基于近一周的网站访问量绘制堆叠柱状图。

三、新课讲解

知识点1-初识堆叠柱状图

教师通过PPT的方式讲解堆叠柱状图。

什么是堆叠柱状图。

演示堆叠柱状图效果。

知识点2-柱状图的标线

教师通过PPT结合实际操作的方式讲解柱状图的标线。

演示柱状图中最大值标线、平均值标线、最小值标线效果。

柱状图标线的设置方式。

列举markLine对象的常用属性。

知识点3-柱条的宽度

教师通过PPT结合