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

博学谷——让IT教学更简单，让IT学习更有效PAGE12PAGE8《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结合实际操作的方式讲解柱条的宽度。柱条宽度的设置方式。barWidth属性的取值。数字字符串通过代码演示如何使用barWidth属性设置柱条的宽度。barMaxWidth属性和barMinWidth属性的使用。知识点4-柱条的间距教师通过PPT结合实际操作的方式讲解柱条的间距。柱条间距的设置方式。barGap属性和barCategoryGap属性的使用。通过代码演示如何设置柱条的间距。知识点5-图形和标签高亮样式教师通过PPT结合实际操作的方式讲解图形和标签高亮样式。图形和标签高亮的场景。图形和标签高亮的设置方式。列举emphasis对象的常用属性。知识点6-任务3.1.2绘制堆叠柱状图教师通过PPT结合实际操作的方式讲解任务3.1.2绘制堆叠柱状图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（初识阶梯瀑布图、柱条的样式、柱状图的文本标签、任务3.1.3绘制阶梯瀑布图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课勤俭节约是一种值得每个人都践行的美德。在日常生活中，勤俭节约精神不仅能够帮助我们实现个人的财务稳定，还能够推动整个社会的可持续发展。小浩为了评估自己的每月支出是否合理，他整理了上个月必须支出的基本开销，作为分析的示例。小浩希望通过阶梯瀑布图的形式呈现上个月基本开销的具体情况，以更加直观和清晰地显示数据。本节课将学习初识阶梯瀑布图、柱条的样式和柱状图的文本标签，并基于上个月基本开销绘制阶梯瀑布图。三、新课讲解知识点1-初识阶梯瀑布图教师通过PPT的方式讲解阶梯瀑布图。什么是阶梯瀑布图。演示阶梯瀑布图效果。知识点2-柱条的样式教师通过PPT结合实际操作的方式讲解柱条的样式。柱条样式的设置方式。列举itemStyle对象的常用属性。通过代码演示如何设置柱条的样式。知识点3-柱状图的文本标签教师通过PPT结合实际操作的方式讲解柱状图的文本标签。柱状图文本标签的设置方式。列举柱状图中label对象的常用属性。知识点4-任务3.1.3绘制阶梯瀑布图教师通过PPT结合实际操作的方式讲解任务3.1.3绘制阶梯瀑布图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（初识堆叠条形图、柱状图的标注样式、任务3.1.4绘制堆叠条形图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课从1月份开始，某化妆品公司在六大商场铺设了6款热销产品的专柜，并加大了优惠促销的力度。活动结束后，由专员统计了6款产品在各大商场的销量，并将不同产品在不同商场的销量情况整理成表格。为了更好地呈现数据，公司想以堆叠条形图的形式展示不同产品在不同商场的销量。本节课将学习初识堆叠条形图和柱状图的标注样式，并基于不同产品在不同商场的销量绘制堆叠条形图。三、新课讲解知识点1-初识堆叠条形图教师通过PPT的方式讲解堆叠条形图。什么是堆叠条形图。演示堆叠条形图效果。知识点2-柱状图的标注样式教师通过PPT结合实际操作的方式讲解柱状图的标注样式。柱状图标注样式的设置方式。列举柱状图中markPoint对象的常用属性。知识点3-任务3.1.4绘制堆叠条形图教师通过PPT结合实际操作的方式讲解任务3.1.4绘制堆叠条形图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机：（考察知识点为：任务3.1.1绘制基础柱状图、任务3.1.2绘制堆叠柱状图、任务3.1.3绘制阶梯瀑布图、任务3.1.4绘制堆叠条形图）形式：单独完成具体要求：按照任务需求实现指定的任务。第六课时（初识基础散点图、坐标轴组件的分隔线、坐标轴组件不显示零刻度、任务3.2.1绘制基础散点图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课健身对我们的身体健康非常重要。为了更好地制订合适的健身计划，某健身房进行了一项调查活动，该调查活动需要收集、分析顾客的身高和体重数据，以了解他们的身体健康状况和相关信息。将数据收集完成后，为了更加直观地呈现数据，健身房想要以基础散点图的形式展示身高和体重数据。本节课将学习初识基础散点图、坐标轴组件的分隔线和坐标轴组件不显示零刻度，并基于身高和体重数据绘制基础散点图。三、新课讲解知识点1-初识基础散点图教师通过PPT结合实际操作的方式讲解基础散点图。什么是基础散点图。演示基础散点图的效果。相关性强度示意图数据的相关关系在散点图上的大致分布图基础散点图的图表类型的设置方式。知识点2-坐标轴组件的分隔线教师通过PPT结合实际操作的方式讲解坐标轴组件的分隔线。坐标轴组件分隔线的设置方式。列举坐标轴组件中splitLine对象的常用属性。知识点3-坐标轴组件不显示零刻度教师通过PPT结合实际操作的方式讲解坐标轴组件不显示零刻度。知识点4-任务3.2.1绘制基础散点图教师通过PPT结合实际操作的方式讲解任务3.2.1绘制基础散点图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第七课时（初识带有涟漪动画的散点图、涟漪动画的相关配置、涟漪动画的显示时机、任务3.2.2绘制带有涟漪动画的散点图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课在完成基础散点图的绘制后，健身房的经理小青想要在基础散点图上给最低点[152,50.5]和最高点[188,77]加一个涟漪动画效果，突出显示这两个点。本节课将学习带有涟漪动画的散点图、涟漪动画的相关配置和涟漪动画的显示时机，并为最低点和最高点添加涟漪动画，完成带有涟漪动画的散点图的绘制。三、新课讲解知识点1-初识带有涟漪动画的散点图教师通过PPT结合实际操作的方式讲解带有涟漪动画的散点图。什么是带有涟漪动画的散点图。带有涟漪动画的散点图的图表类型的设置方式。知识点2-涟漪动画的相关配置教师通过PPT结合实际操作的方式讲解涟漪动画的相关配置。涟漪动画的设置方式。列举rippleEffect对象的常用属性。知识点3-涟漪动画的显示时机教师通过PPT结合实际操作的方式讲解涟漪动画的显示时机。涟漪动画的几种显示时机。render：界面渲染完成后开始涟漪动画emphasis：鼠标指针移入某个散点时，该散点开始涟漪动画涟漪动画的设置方式。通过代码演示如何当鼠标指针移入某个散点时，散点开始涟漪动画效果。知识点4-任务3.2.2绘制带有涟漪动画的散点图教师通过PPT结合实际操作的方式讲解任务3.2.2绘制带有涟漪动画的散点图。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第八课时（初识气泡图、任务3.2.3绘制气泡图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课为庆祝线上店铺成立8周年，某商家举办了为期一周的周年庆典活动，旨在回馈新老顾客的支持，并借此机会推出了一款新产品。该新产品参与了优惠活动，以吸引顾客，同时也便于商家观察市场对新产品的反响。活动结束后，店铺运营人员对新产品在一周内不同时间的成交量进行了统计。为了更直观地呈现数据，商家想要以气泡图的形式展示新产品在一周中不同时间的成交量。本节课将学习气泡图，并基于新产品在一周中不同时间的成交量绘制气泡图。三、新课讲解知识点1-初识气泡图教师通过PPT结合实际操作的方式讲解气泡图。什么是气泡图。气泡大小的设置方式。像素值方式回调函数方式知识点2-任务3.2.3绘制气泡图教师通过