资源简介

(共40张PPT)
第四单元 第3课
数据可视化 Web页面制作
（桂科版）八年级
上
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
。
信息意识
计算思维
数字化学习与创新
信息社会责任
学生关注可视化系统安全规范，洞察数据交互潜在风险，树立保障系统、合理用数的责任意识。
学生借案例讨论实践，投身组件组合、属性调试，探究可视化方式对数据应用的创新价值。
学生剖析物联网可视化页面流程，梳理采集、设计、交互环节，理解可视化逻辑与实现原理。
学生分析数据可视化页面制作案例，察觉组件特性差异，感知物联网数据呈现场景的应用表现。
02
新知导入
学习目标
1. 利用可视化组件设计并制作物联网页面。
2. 利用可视化组件设计并制作反向控制按钮。
3. 能够综合应用物联网数据。
02
新知导入
02
新知导入
当我们需要对事物的发展做出决策或预判事物未来的走势时，往往需要物联网将大量不同类型的数据通过可视化的方式呈现出来，以便更好地理解和分析数据，从而为决策者提供依据。例如，现代化城市管理通常要对城市交通情况进行大数据收集和处理，交通管理部门能够便捷地通过智慧大屏查看数据与指挥交通。
活 动 背 景
03
新知讲解
你认为还有哪些方面特别需要数据可视化 请举例说说。
城市治理场景
城市治理中，交通路况可借热力图呈现车流拥堵分布，能源管网用动态图表展示电力、水资源输送，助力管理者实时调配资源、优化城市运行。
医疗健康领域
医疗领域，患者生命体征以折线图动态追踪病情，流行病传播借地图 + 时间轴展现路径，辅助医护精准救治、防疫部门科学防控。
教育场景
教育里，学生成绩用雷达图呈现学科优劣势，校园能耗、人流及可视化数据，帮教师因材施教，后勤合理规划资源，提升教学与管理效率。
思 考
03
新知讲解
案例分析一
壮壮使用智能农植园物联网系统时，每隔一段时间就要邀请种植专家来对农作物的生长状况进行评估和指导。为了让种植专家方便查看农作物的生长状况及其他环境数据，壮壮设计了智能农植园物联网大屏。如图4-3-2所示，专家既可以从中查看农植园中的各项环境数据，又能看到各种作物的实际生长状况，还能够根据大屏提供的信息对农作物后续种植给出正确的指导意见。
图 4-3-2
03
新知讲解
不同物联网设备通信协议可能有差异，集成时留意协议转换与兼容。比如部分传感器用自定义协议，需通过网关或中间件转成 MQTT 等通用协议，确保数据能顺利接入可视化系统，保障数据链路贯通 。
小 贴 士
协议兼容
03
新知讲解
和同学们展开讨论，说说物联网数据可视化大屏都具有哪些优点，并记录下来。
序号 物联网数据可视化大屏的优点
1 直观性：以可视化的方式呈现数据，效果更加直观和易于理解。
2 实时性：动态更新数据（如温湿度曲线），异常情况即时发现。
3 交互性：可直接操作大屏控件（如远程启停水泵），管理便捷高效。
4 关联性：数据变化联动设备状态（如缺水标红），体现物联网逻辑闭环。
讨 论
03
新知讲解
实验目的:利用可视化组件完成数据可视化。
实验要求:编写服务器端程序，在行空板上配置 SIoT服务器，通过图表方式展示采集的温度数据。
实验器材:如表 4-3-1 所示。
做 中 学
设备 数量
行空板实验平台 1
表 4-3-1
03
新知讲解
实验步骤:
步骤一:联网分配服务器 IP。
电脑连接行空板后，在地址栏中输入网址“10.1.2.3”。登录行空板，选择相应的Wi-Fi热点，连接后会分配一个IP地址“192.168.31.217”(图4-3-3)，此地址即为智能农植园服务器地址。
图 4-3-3
03
新知讲解
步骤二:添加主题。
进入“SIoT”应用界面，依次添加“环境光线”“环境温度”等相关主题，如图 4-3-4所示。
图 4-3-4
步骤三:编写程序。
(1)打开编程软件，编写程序如图 4-3-5 所示。
图 4-3-5
03
新知讲解
(2)运行程序，行空板界面如图 4-3-6 所示。
步骤四:数据可视化编辑。
打开编程软件，点击菜单栏“可视化面板”，进入可视化页面编辑界面，从左侧“添加组件”面板中拖拽“图片文字”类组件作为环境温度主题。在右侧组件属性面板中修改属性如下:topic 为“siot/ 环境温度”，组件描述为“环境温度”，图片为外部导入的温度图标(图4-3-7)。
03
新知讲解
步骤五:设置数据源，测试运行。
测试运行前，打开设置数据源窗口，输入服务器地址“192.168.31.217”，其余设置无须修改，点击“完成”按钮，完成数据源设置(图4-3-8)。
03
新知讲解
可视化组件中主要包含四个模块:基础组件、显示组件、图表组件和装饰组件。其中基础组件主要用于智能终端的交互控制，常见类型有按钮、开关、自定义开关、输入框等;显示组件主要用于数据的显示，常见类型有单行文字、多行文字、标签文字、图片文字等;图表组件主要用于数据图形化显示，常见类型有折线图、散点图、柱形图、条形图、饼图等;装饰组件主要用于装饰点缀 Web 页面，常见类型有色块、艺术字等。
阅 读
03
新知讲解
可视化组件开发注重轻量化，避免冗余代码与复杂渲染逻辑。选用合适的图标库（如 Iconfont ）、简化图表动画，降低页面加载与渲染耗时，适配物联网场景对页面性能的严苛要求，保障多设备访问流畅 。
小 贴 士
组件轻量化
03
新知讲解
请使用可视化面板中的“迷你面积图”制作“土壤湿度”图表。试着与其他可视化组件组合起来使用，或调整同一组件的属性，把效果一一记录下来进行比较。
马 上 行 动
操作 调整内容 效果呈现 适用场景
单组件属性修改 颜色改为红 - 绿渐变 湿度低时红色预警，高时绿色，异常更醒目 实时监测预警
开启曲线平滑 波动曲线变平滑，趋势更清晰 趋势分析展示
组件组合 面积图 + 仪表盘 + 报警灯 趋势 + 数值 + 警报，多维度反馈 现场监控大屏
面积图 + 时间筛选器 + 表格 可切换时段，趋势与明细数据自由查看 历史数据复盘
03
新知讲解
数据可视化大屏不仅可以实现数据的可视化显示，还可以通过“基础组件类”中的“开关”或“按钮”来实现对智能终端执行器的控制，智能终端能够将执行器的工作状态回传到服务器端的可视化大屏上(图4-3-9)或移动终端屏幕上(图4-3-10)。
03
新知讲解
实验目的:利用可视化组件中的开关实现反向控制。
实验要求:可视化大屏反向控制智能终端，同时物联网智能终端状态同步显示变化。
实验器材:数据服务器、智能终端，均为行空板。
实验步骤:
步骤一:定义 topic。
因为需要在大屏及移动终端显示智能终端执行器的状态，所以需要为执行器状态定义一个主题 topic 为“siot/通风窗”。连接数据服务器行空板，登录 SIoT服务器，增加主题topic“siot/ 通风窗”。
做 中 学
03
新知讲解
步骤二:修改程序。
连接智能终端行空板，用编程软件打开之前的程序。
①程序初始化部分增加订阅主题语句:
②程序初始化显示部分增加状态显示语句:
③数据接收部分:当智能终端接收到来自可视化大屏或移动终端的控制命令时，打开或关闭执行器通风设备(图 4-3-11)。
03
新知讲解
步骤三:设置组件。
打开可视化组件中之前编辑的智能农植园项目，从基础组件中添加“开关按钮”，修改组件属性中的组件标题为“通风开关”，修改 topic 为“siot/通风窗”，修改该组件属性中的开启发送为“on”，关闭发送为“of”(图4-3-12)。
03
新知讲解
步骤四:运行测试。
运行程序，启动可视化大屏，行空板界面和大屏幕显示如图 4-3-13 所示。鼠标点击通风开关按钮，物联网智能终端通风窗状态会同步变化。
03
新知讲解
请使用学习过的知识展开设计，将智能终端中的“土壤湿度状态”这一指标通过物联网大屏上的可视化组件实现互联互通。
马 上 行 动
基于物联网技术，将智能终端中 “土壤湿度状态” 在大屏可视化呈现。先通过传感器采集数据，经智能终端处理后以 JSON 格式通过 MQTT 上传云端。大屏采用动态面积图与仪表盘组合展示，面积图以 24 小时为轴、0-100% 湿度为纵轴，用不同颜色区分区间呈现趋势；仪表盘实时显示当前值，低于阈值触发红色预警。搭配时间筛选器、历史表格及地图组件，实现多维度查看，并设手动与自动灌溉模式，实现数据监测与设备控制互联互通，助力精准农业管理与教学实践。
04
课堂练习
一、判断正误，正确的画”√“，错误的画”X“。
物联网数据可视化只能用折线图展示，不能使用面积图。（ ）
土壤湿度传感器采集的数据必须通过 MQTT 协议传输，否则无法可视化。（ ）
在可视化大屏中，设置报警阈值后，数据超标时自动触发声光提醒属于硬件反馈。（ ）
迷你面积图的颜色属性调整不会影响数据展示的准确性，仅改变视觉效果。（ ）
SIoT 图表适合用于短期数据监测，不适合历史数据回溯分析。（ ）
X
√
X
√
X
04
课堂练习
二、选择题
以下哪种组件最适合直观展示土壤湿度的实时数值？（ ）
A. 折线图 B. 仪表盘
C. 面积图 D. 柱状图
当需要在物联网大屏上同时展示多区域土壤湿度对比时，应优先选择：（ ）
A. 时间筛选器 B.历史数据表格 C.区域对比地图 D. 警报灯组件
手机 APP 查看年度湿度趋势首选：（ ）
A. 动态面积图 B. 三维柱状图 C. 饼图 D. 散点图
B
A
C
04
课堂练习
【想一想】在本单元的学习过程中，物联网应用模型分成了智能终端、数据服务器终端移动终端三层架构。思考一下，这种三层架构的模式与前面的物联网模型设计有什么不同
单元巩固
学完本单元，我惊叹于万物互联的奇妙。它打破设备间的壁垒，让生活变得智能又高效。
生活里，智能快递柜是典型物联网场景。它通过网络与用户手机、快递系统相连。快递员存件时，系统录入信息并给用户发取件码；用户取件时，输入取件码或扫码开箱。这方便了快递收发，不受时间限制；提升了快递配送效率，减少快递员等待时间；还保障包裹安全，降低丢失风险，让生活更加省心。
04
课堂练习
【试一试】在实践中，你设计的物联网应用模型可以实现反馈类型的多样化吗 是在移动终端使用蜂鸣器、彩灯等进行反馈比较合适，还是通过SIoT 图表显示更为具体 或者是利用可视化组件，设计制作物联网页面更加炫酷 请选择适合自己的物联网应用反馈类型，勇敢尝试吧!
物联网应用反馈类型需依场景选择。硬件声光反馈（蜂鸣器、彩灯）响应快，适合紧急预警，如大棚温湿度超标时声光报警。SIoT 图表反馈以折线图等呈现数据趋势，便于长期监测与回溯，适用于科研数据统计。可视化页面反馈将动态组件集成于界面，支持交互控制，常用于智能管理平台。实际中可组合使用，如紧急情况靠声光快速响应，日常通过页面分析数据，兼顾反馈效率与信息深度。
04
课堂练习
学习评价
内容 要求 得分
(0~10分)
数据输出多样化 认识多样的反馈方式;熟悉物联网中的一般数据流程;能够编写程序实现多样反馈 10分
数据可视助分析 知道数据可视化的优势;掌握可视化的数据分析方法;懂得选择合适的图表展示数据 10分
数据可视化Web页面制作 利用可视化组件实现物联网页面的设计与制作;利用可视化组件完成反向控制按钮的设计与制作;能够综合应用物联网数据 10分
05
拓展延伸
除教材中运用 MQTT 实现数据交互，其基于发布 / 订阅模式，能在低带宽、不稳定网络下高效传输物联网数据。比如智能农植园场景，传感器（发布端）采集土壤湿度等数据，经 MQTT 协议快速推送给可视化大屏（订阅端 ），保障数据实时性与可靠性，适配物联网多设备、广连接需求 。
MQTT 协议深化
05
拓展延伸
物联网采集数据常含噪声（如传感器误报的异常值 ）。需进行数据清洗，通过算法（如均值滤波 ）剔除异常点，填充缺失值，保证可视化大屏呈现的智能农植园环境数据（如光线强度 ）准确，为决策分析提供可靠依据 。
数据清洗预处理
05
拓展延伸
制作数据可视化 Web 页，可引入 Vue.js 等前端框架。它提供组件化开发思路，像封装 “环境数据展示组件”，包含温度、湿度显示逻辑与样式，复用性强，能规范代码结构，提升开发效率，助力快速搭建交互性强的可视化页面。
前端框架辅助
05
拓展延伸
在数据可视化中，像绘制土壤湿度变化曲线这类图表，常借助 HTML5 的 Canvas 技术。Canvas 提供 2D 绘图上下文，可通过 JavaScript 代码，精准控制线条绘制、颜色填充，动态渲染实时更新的物联网数据，让曲线随土壤湿度变化灵活呈现 。
Canvas 绘图原理
05
拓展延伸
构建物联网数据可视化系统时，数据服务器终端可通过 RESTful API 对外提供数据接口。比如智能农植园系统，客户端（可视化页面 ）发送 GET 请求，获取指定时间段的环境温度历史数据，遵循统一接口规范，便于不同终端（如移动设备 ）灵活调用数据，拓展系统数据交互能力 。
RESTful API 应用
06
课堂总结
1
引入新知内容
2
设计并制作物联网页面
3
设计并制作反向控制按钮
4
完成课题练习
5
进行相关知识拓展
1
2
3
4
5
数据可视化 Web页面制作
07
板书设计
数据可视化 Web页面制作
1、进行新知引入
2、设计并制作物联网页面
3、设计并制作反向控制按钮
4、完成课堂练习
5、进行知识拓展
课后作业。
1、完成填空题
2、制作PPT
08
课后作业
物联网数据可视化中，将土壤湿度数据转换为图形展示的过程称为 __________。
当迷你面积图中土壤湿度低于 30% 时，通常将区域颜色设置为 __________ 以警示异常。
数据从传感器传输到可视化大屏的中间环节需要经过 __________ 和 __________。
可视化页面中，用于切换数据展示时间段的组件名称是 ___________。
数据可视化
红色
数据传输
数据处理
时间筛选器
08
课后作业
结合物联网数据可视化知识，设计一个智能温室环境监测大屏，并与同学分享设计过程。
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑