源代码和教案（访问密码：7567） 「链接」
|
教 学 内 容 |
行业柱状图的实现（二） |
|||
|
教 学 目 标 |
知识目标:了解Echarts的定义和作用 能力目标:能够引入Echarts完成柱状图效果的使用 素质目标:培养学生团结互助、热爱祖国的综合素质 |
|||
|
重 点 |
Echarts的定义和使用 |
|||
|
难 点 |
行业柱状图效果的代码编写 |
|||
|
教学方法 |
讲授法、任务驱动法、启发法 |
|||
|
课堂教学进程 |
教学环节 |
教师活动 |
学生活动 |
设计理念 |
|
1、 课堂考勤、上节课知识点回顾、课后作用问题处理（10分钟） 2、 课堂导入：柱状图效果的实现（5分钟） 3、 新课内容：使用电子课件和效果演示工具的使用（20分钟） 以练习案例的方式引导学生自己动手实现效果，感受代码编写（45分钟） 4、总结课堂内容，布置作业（5分钟） 5、穿插爱国主义教育内容（5分钟） |
教师主导布置任务，解决问题，总结内容，评价学生学习情况，进行思想教育 |
服从教师安排，思考问题，提出问题，回答问题，掌握更多知识 |
老师引导学生思考，共同讨论问题，改变教师讲解学生听讲的传统方式，使学生更善于思考。 |
|
|
课后分析 |
||||
进程 |
教学活动 |
时间分配 |
|
新课导入 |
一、考勤、上节课知识点回顾、课后作业练习处理（讲授） 二、课堂引入：行业柱状图效果展示（演示） 三、继续完成上节课未完成的部分，对样式进一步设置 |
15 |
|
知识讲授 |
一、继续上节课的柱状图效果 （一）设置第一组柱子不同颜色 1、声明颜色数组
2、给itemStyle里面的color属性设置一个 返回值函数
3、查看效果
本文转载自：https://www.gylmap.com （二）需求5 1、 修改第二组柱子的相关配置（框状）
2、查看效果
（三）需求6：给y轴添加第二组数据 1、将yAxis剪切备份走，准备基本结构
2、把剪切的数据放回
3、将第二组的数据改一下
4、查看效果
（四）需求7： 设置两组柱子层叠以及更换数据 1、给series 第一个对象里面的 添加 yAxisIndex: 0,
2、给series 第二个对象里面的 添加 yAxisIndex: 1,
3、series 第一个对象里面的data data: [70, 34, 60, 78, 69],
4、series 第二个对象里面的data data: [100, 100, 100, 100, 100],
5、y轴更换第一个对象更换data数据 data: [“HTML5”, “CSS3”, “javascript”, “VUE”, “NODE”],
6、 y轴更换第二个对象更换data数据 data:[702, 350, 610, 793, 664],
7、查看效果
8、反向坐标
9、查看效果
| 70 |
|
知识总结 |
（1）上节回顾 （2）处理问题 （3）讲解图表 （4）课堂练习 |
