《工业互联网APP设计与开发》课件——14.数据面板页制作.pptxVIP

Ⅹ-14数据面板页制作

Ⅹ-14数据面板页制作掌握Echarts的安装，了解柱状图、饼图、仪表盘、折线图等图表的使用方法掌握flex布局掌握Day.js的安装和使用掌握Vue中onBeforeUnmount等生命周期钩子的使用掌握api的配置和使用掌握网络数据请求编写注册表单

Ⅹ-14数据面板页制作编写注册表单Echarts安装、配置；Echarts图表使用；Day.js安装与使用；页面布局,排版；网络数据请求

Ⅹ-14数据面板页制作您是一名web前端工程师，主管给您分配了新的任务，需要您实现一个展示设备数据的页面，页面中将通过图表的方式对设备的各类数据进行展示。通过柱状图的方式展示库存总数、通过饼图展示装箱数量、通过仪表盘展示罐体数据、通过折线图展示液位信息、通过表格展示产线数据，还需要间隔10s对设备数据进行更新。

Ⅹ-14数据面板页制作学习任务Ⅹ-14数据面板页制作学习任务Ⅹ-13-S1数据面板页配置学习任务Ⅹ-13-S2数据面板页制作

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置任务要求：1.独立完成学习任务1的练习题，将完成的答案填到相应的空格处。2.我们将以小组工作的方式完成这个学习任务。3.能够独立完成数据面板页配置。

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置学习成果展示：1.阅读并独立完成任务第1题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置1.设置空位数量为5，装箱数量为10，补全下方代码，完成Echarts环形图效果。

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作任务要求：1.独立完成学习任务2的练习题，将完成的答案填到相应的空格处。2.我们将以小组工作的方式完成这个学习任务。3.能够独立完成数据面板页制作。

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作学习成果展示：1.阅读并独立完成任务第1题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。1）下列选项中，Vue页面中引入组件的步骤正确的是？（）Aimport…from…Bimport…form…Cimportfrom…Dimportform…2）下列描述中对于setInterval()方法描述正确的是？（）A该定时器只能执行一次B该定时器一旦启动，就不能被清理C该定时器方法中可以传入回调函数和时间参数D该定时器的定时周期以秒为单位3）setInterval()函数的第二个参数设置（）表示间隔1秒重复执行某段代码A1B10C100D10004）下列选项中表示Vue实例销毁的生命周期的钩子函数是？（）AonBeforeUnmountBonBeforeMountConBeforeUpdateDonErrorCaptured

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。5）文本插值是数据绑定的最基本形式，使用（）符号进行A[]B{}C{{}}D6）Vue组件对组件属性传值是单向的，并且（）A只能静态绑定属性B只能动态绑定属性C可以静态绑定属性也可以动态绑定属性D不能绑定属性7）push()方法向数组的末尾（）一个或更多的元素A删除B添加C修改D查找

Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。1）下列选项中，Vue页面中引入组件的步骤正确的是？（A）Aimport…from…Bimport…form…Cimportfrom…Dimportform…2）下列描述中对于set