源代码和课程计划(访问密码:7567)“链接”
教与学
行业直方图的实现(2)
教学目标
知识目标:理解电子海图的定义和功能。
能力:能够引入Echarts来完成直方图效果的使用。
素质:培养学生团结互助、热爱祖国的综合素质。
冲电
电子海图的定义和使用
难点
行业直方图效果的代码编写
教学方法
教学法、任务驱动法和启发式。
课堂教学过程
教学环节
教师活动
学生活动
设计构思
1.课堂考勤，上节课知识点回顾，课后问题处理(10分钟)
2.课堂介绍:直方图效果的实现(5分钟)
3.新课程内容:使用电子课件和效果演示工具(20分钟)
以实践案例的形式引导学生自己体会效果，感受代码编写(45分钟)
4.总结课程内容并布置作业(5分钟)
5、穿插爱国主义教育内容(5分钟)
教师带头布置任务，解决问题，总结内容，评价学生学习情况，进行思想教育。
服从老师的安排，多思考，多提问，多回答，多掌握知识。
教师引导学生思考，一起讨论问题，改变传统的教师讲解学生讲课的方式，让学生更善于思考。
课后分析
过程
教学活动
时间分配
新课导入
一、出勤、上节课知识点复习、课后作业练习处理(讲座)
二、课堂介绍:行业直方图效果展示(演示)
第三，继续完成上一课未完成的部分，进一步定型。
15
传授知识
首先，延续上节课的直方图效果
(1)设置不同颜色的第一组柱子
1.声明颜色数组
2.为itemStyle中的color属性设置返回值函数。
3.检查效果。
(2)需求5
1.修改第二组柱的相关配置(方框形状)
2.检查效果。
(C)要求6:将第二组数据加到Y轴上
1.切割和备份yAxis并准备基本结构。
2.把剪下的数据放回去。
3.更改第二组的数据。
4.检查效果。
(四)要求7:设置两组分层和变更数据栏。
1.将yAxisIndex: 0添加到序列中的第一个对象。
2.将yAxisIndex: 1添加到序列中的第二个对象。
3.系列的第一个对象中的数据
数据:[70，34，60，78，69]，
4.系列的第二个对象中的数据
数据:[100，100，100，100，100]，
5.y轴替换第一个对象并替换数据data。
数据:[\”HTML5 \”，\” CSS3 \”，\” javascript \”，\” VUE \”，\” NODE\”]，
6.y轴改变第二个对象改变数据data。
数据:[702，350，610，793，664]，
7.检查效果。
8.反向坐标
9.检查效果。
70
知识总结
(1)对上一节的回顾
(2)处理问题
(3)解释图表。
(4)课堂练习
五
