怎样把数据做成柱状图 怎么做柱状图

源代码和课程计划(访问密码: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)课堂练习
【怎样把数据做成柱状图 怎么做柱状图】

    推荐阅读