教 学 内 容

行业柱状图的实现（二）

教 学 目 标

知识目标:了解Echarts的定义和作用

能力目标:能够引入Echarts完成柱状图效果的使用

素质目标:培养学生团结互助、热爱祖国的综合素质

重 点

Echarts的定义和使用

难 点

行业柱状图效果的代码编写

教学方法

讲授法、任务驱动法、启发法

课堂教学进程

教学环节

教师活动

学生活动

设计理念

1、 课堂考勤、上节课知识点回顾、课后作用问题处理（10分钟）

2、 课堂导入：柱状图效果的实现（5分钟）

3、 新课内容：使用电子课件和效果演示工具的使用（20分钟）

以练习案例的方式引导学生自己动手实现效果，感受代码编写（45分钟）

4、总结课堂内容，布置作业（5分钟）

5、穿插爱国主义教育内容（5分钟）

教师主导布置任务，解决问题，总结内容，评价学生学习情况，进行思想教育

服从教师安排，思考问题，提出问题，回答问题，掌握更多知识

老师引导学生思考，共同讨论问题，改变教师讲解学生听讲的传统方式，使学生更善于思考。

课后分析

进程

教学活动

时间分配

新课导入

一、考勤、上节课知识点回顾、课后作业练习处理（讲授）

二、课堂引入：行业柱状图效果展示（演示）

三、继续完成上节课未完成的部分，对样式进一步设置

15

知识讲授

一、继续上节课的柱状图效果

（一）设置第一组柱子不同颜色

1、声明颜色数组

2、给itemStyle里面的color属性设置一个 返回值函数

3、查看效果

（二）需求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）课堂练习

5