第16章 数据可视化：仪表盘搭建与图表配置
玩转工业物联网平台 · 章节 16/30 · 40 学时
16.1 数据可视化概述
数据采集的最终目的是为了使用数据，而数据可视化是让数据"看得见、看得懂"的关键手段。数晰IOT平台提供了强大的数据可视化功能，支持通过拖拽方式搭建仪表盘、配置多种图表、展示实时数据和历史趋势，让运维人员、管理人员能够直观地了解设备运行状态、能耗情况、生产数据。
💡 数据可视化的价值：
- 直观展示：将抽象的数字转化为直观的图表，一眼就能看出设备状态、数据趋势
- 快速发现异常：通过颜色、告警标记、趋势变化，快速发现异常数据和设备故障
- 辅助决策：为管理人员提供数据支撑，帮助做出生产调度、设备维护、节能优化等决策
- 提升沟通效率：用图表代替文字描述，不同岗位的人员都能快速理解数据含义
- 数据讲故事：通过仪表盘讲述设备运行、能耗变化、生产效率的故事，让数据有温度
16.2 仪表盘管理
仪表盘（Dashboard）是数据可视化的基本单元，一个仪表盘由多个图表组件组成，围绕一个主题展示相关数据。例如"1号车间设备监控仪表盘"、"全厂能耗分析仪表盘"、"空压机运行状态仪表盘"。
16.2.1 创建仪表盘
- 进入"数据可视化"→"仪表盘管理"→点击"新建仪表盘"
- 填写仪表盘基本信息：
- 仪表盘名称：如"1号车间设备监控"
- 所属组织：选择可见范围（全厂/某厂区/某车间）
- 仪表盘类型：普通仪表盘/大屏仪表盘/移动端仪表盘
- 描述：简要说明仪表盘用途
- 封面图：上传仪表盘封面（可选）
- 点击"确定"创建仪表盘，进入仪表盘编辑页面
- 在编辑页面中添加图表组件，配置数据和样式
- 点击"保存"保存仪表盘配置
- 点击"预览"查看仪表盘效果
- 点击"发布"将仪表盘发布给授权用户查看
16.2.2 仪表盘分类与权限
| 类型 | 说明 | 适用场景 |
|---|---|---|
| 普通仪表盘 | 标准PC端展示，适合电脑浏览器查看 | 运维监控、数据分析、管理报表 |
| 大屏仪表盘 | 16:9宽屏展示，适合大屏投影/电视墙 | 指挥中心、展厅、车间大屏 |
| 移动端仪表盘 | 移动端适配，适合手机/平板查看 | 移动巡检、远程查看、领导手机端 |
仪表盘权限管理：
- 创建者：仪表盘的创建者，拥有全部权限（编辑、删除、授权、发布）
- 编辑者：被授权可以编辑仪表盘的用户
- 查看者：被授权只能查看仪表盘的用户（最常见）
- 公开仪表盘：设置为公开后，所有登录用户都可以查看
16.2.3 仪表盘模板与复用
- 平台预制了常见场景的仪表盘模板（设备监控、能耗分析、环境监测、生产概览等），可以直接使用或在此基础上修改
- 支持将自定义仪表盘保存为模板，分享给其他厂区或项目使用
- 支持仪表盘复制，基于已有仪表盘快速创建相似仪表盘
- 支持仪表盘导入导出，便于备份和迁移
16.3 图表组件类型
数晰IOT平台提供丰富的图表组件，满足不同数据展示需求：
16.3.1 基础图表
| 图表类型 | 说明 | 适用场景 |
|---|---|---|
| 折线图 | 用折线展示数据随时间的变化趋势 | 温度、压力、电流等参数的趋势变化 |
| 柱状图 | 用柱子展示不同类别数据的对比 | 各设备能耗对比、各车间产量对比 |
| 饼图/环形图 | 展示各部分占总体的比例 | 能耗结构占比、设备状态分布 |
| 面积图 | 折线图下方填充面积，强调数据量 | 累计能耗、累计产量 |
| 散点图 | 展示两个变量之间的关系 | 温度与能耗的关系、负载与效率的关系 |
| 雷达图 | 多维度数据对比 | 设备综合健康度评估、多指标对比 |
16.3.2 工业专用图表
| 图表类型 | 说明 | 适用场景 |
|---|---|---|
| 实时数据卡片 | 大字体展示单个实时数据值，带单位和状态颜色 | 关键参数实时展示（当前温度、当前压力） |
| 仪表盘（Gauge） | 模拟汽车仪表盘样式，展示数值在量程中的位置 | 设备负载率、温度在安全范围中的位置 |
| 状态指示灯 | 用颜色和图标展示设备状态（运行/停止/故障） | 设备运行状态总览 |
| 趋势图（多曲线） | 多条曲线在同一图表中对比 | 多台设备温度对比、多个参数趋势对比 |
| 数据表格 | 表格形式展示明细数据，支持排序、筛选、分页 | 设备明细列表、告警记录列表 |
| 热力图 | 用颜色深浅展示数据密度或强度 | 车间温度分布、设备故障频次分布 |
16.3.3 辅助组件
| 组件类型 | 说明 |
|---|---|
| 文本标签 | 添加标题、说明文字、注释 |
| 图片 | 插入图片（如设备照片、厂区平面图） |
| 装饰元素 | 分割线、边框、背景色等装饰元素 |
| 时间选择器 | 让用户选择查看数据的时间范围 |
| 设备选择器 | 让用户选择查看哪台设备的数据 |
| iframe嵌入 | 嵌入其他网页或系统页面 |
16.4 仪表盘搭建实战
📋 实战案例：搭建"1号车间设备监控仪表盘"
需求：为1号车间搭建一个设备监控仪表盘，展示车间内10台关键设备的运行状态、关键参数、告警信息。
步骤1：创建仪表盘
- 名称：1号车间设备监控
- 类型：普通仪表盘
- 所属组织：1号车间
步骤2：规划布局
按照"从上到下、从总到分"的原则规划布局：
- 第一行：车间概览（设备总数、在线数、运行数、故障数、今日告警数）——5个数据卡片
- 第二行：设备状态总览（10台设备的状态指示灯，按设备排列）
- 第三行：关键参数趋势（空压机排气温度趋势、排气压力趋势——2个折线图）
- 第四行：能耗对比（各设备今日能耗柱状图）+ 最新告警列表（数据表格）
步骤3：添加组件并配置数据
3.1 车间概览数据卡片（第一行）
- 从组件库拖拽"数据卡片"到画布，调整大小和位置
- 配置数据：
- 卡片1：设备总数——统计1号车间所有设备数量
- 卡片2：在线设备数——统计状态为"在线"的设备数
- 卡片3：运行设备数——统计运行状态为"运行"的设备数
- 卡片4：故障设备数——统计有活跃告警的设备数
- 卡片5：今日告警数——统计今日产生的告警数量
- 配置样式：设置卡片标题、单位、字体大小、背景色、状态颜色（正常绿色、告警红色）
3.2 设备状态总览（第二行）
- 拖拽"状态指示灯"组件到画布
- 配置设备列表：选择1号车间的10台设备
- 配置状态映射：运行=绿色、停止=灰色、故障=红色、离线=黑色
- 配置显示内容：设备名称、设备编号、当前状态、最后更新时间
- 配置交互：点击设备图标可以跳转到该设备的详情页
3.3 关键参数趋势图（第三行）
- 拖拽"折线图"组件到画布（2个）
- 第一个折线图配置：
- 标题：空压机排气温度趋势
- 数据源：1号空压机.排气温度、2号空压机.排气温度
- 时间范围：最近24小时
- Y轴：温度（℃），范围0~150
- 告警线：100℃（红色虚线，超过告警）
- 图例：显示两条曲线的名称和颜色
- 第二个折线图配置：
- 标题：空压机排气压力趋势
- 数据源：1号空压机.排气压力、2号空压机.排气压力
- 时间范围：最近24小时
- Y轴：压力（MPa），范围0~1.6
3.4 能耗对比与告警列表（第四行）
- 拖拽"柱状图"组件（左侧）：
- 标题：各设备今日能耗对比
- 数据源：1号车间所有设备的今日累计电能
- X轴：设备名称
- Y轴：能耗（kWh）
- 柱子颜色：按能耗从低到高渐变（绿色→黄色→红色）
- 显示数值：柱子顶部显示具体能耗值
- 拖拽"数据表格"组件（右侧）：
- 标题：最新告警列表
- 数据源：1号车间最近20条告警记录
- 列：告警时间、设备名称、告警类型、告警内容、状态（未处理/已处理）
- 排序：按告警时间倒序
- 颜色：未处理告警红色背景，已处理告警灰色
- 交互：点击告警可以查看详情并处理
步骤4：调整样式和布局
- 统一配色方案：使用科技蓝为主色调，绿色=正常、黄色=警告、红色=告警
- 统一字体：标题用粗体，数据用大字体，说明用小字体
- 调整组件间距：组件之间保持一致的间距，布局整齐
- 设置背景：深色背景适合监控大屏，浅色背景适合普通报表
- 添加标题和说明：仪表盘顶部添加大标题，每个组件添加小标题
步骤5：预览和发布
- 点击"预览"查看效果，检查数据是否正常显示、布局是否合理
- 在不同分辨率的屏幕上测试，确保适配性
- 邀请相关人员试用，收集反馈并优化
- 确认无误后点击"发布"，授权给1号车间运维人员和管理人员查看
效果：运维人员每天上班打开仪表盘，一眼就能看到车间设备整体运行状态，哪台设备有故障、哪个参数超标、今天有多少告警，一目了然，大大提升了运维效率。
16.5 图表配置技巧
16.5.1 数据配置
- 数据源选择：选择正确的设备和数据点，注意区分实时数据和历史数据
- 时间范围：根据数据变化速度选择合适的时间范围，快速变化的数据用短时间范围（1小时），慢变数据用长时间范围（7天/30天）
- 聚合方式：历史数据可以选择平均值、最大值、最小值、累计值等聚合方式，根据业务需求选择
- 数据对比：多曲线对比时，选择相同量纲的数据放在同一图表，不同量纲的数据用双Y轴或分开图表
- 数据过滤：可以设置过滤条件，只展示符合条件的数据（如只展示告警状态的设备）
16.5.2 样式配置
- 配色方案：使用统一的配色方案，避免颜色过多过杂。建议主色调不超过3种，状态色固定（绿=正常、黄=警告、红=告警）
- 字体大小：标题>数据值>坐标轴标签>说明文字，建立清晰的字体层级
- 图表比例：折线图和柱状图的宽高比建议16:9或4:3，避免过扁或过高
- 坐标轴：Y轴范围要合理，不要让数据曲线挤在图表底部或顶部；X轴时间标签不要过密
- 图例：多曲线图表一定要显示图例，标明每条曲线的含义
- 数据标签：柱状图、饼图建议显示具体数值，让用户一眼看到数据
- 告警线：在趋势图上添加告警阈值线，让用户直观看到数据是否超标
16.5.3 交互配置
- 钻取：点击汇总数据可以下钻到明细数据（如点击车间能耗→查看各设备能耗→查看设备小时能耗）
- 联动：选择一个设备时，其他图表自动切换为该设备的数据
- 时间选择：添加时间选择器，让用户可以自由切换查看不同时间段的数据
- 设备选择：添加设备选择器，让用户可以选择查看哪台或哪些设备的数据
- 悬浮提示：鼠标悬浮在数据点上时，显示详细信息（时间、数值、设备名称）
- 导出：支持图表数据导出为Excel/图片，便于汇报和存档
💡 仪表盘设计原则：
- 一个仪表盘一个主题：不要把所有数据都堆在一个仪表盘上，围绕一个主题展示相关数据
- 从上到下、从总到分：顶部放汇总指标，中间放趋势对比，底部放明细列表
- 重点突出：关键指标用大字体、醒目的位置展示，次要指标小一些
- 颜色有意义：颜色不要只是装饰，要用颜色表达状态（绿正常、黄警告、红告警）
- 避免信息过载：一个仪表盘组件数量控制在10-15个，太多会让人眼花缭乱
- 适配使用场景：监控大屏用深色背景、大字体；报表用浅色背景、小字体；移动端用单列布局
- 以用户为中心：设计仪表盘前先想清楚使用者是谁、他们关心什么数据、他们要做什么决策
16.6 大屏可视化
大屏可视化是数据可视化的重要应用场景，通常部署在指挥中心、展厅、车间电视墙上，展示企业整体运行情况。
16.6.1 大屏设计要点
- 分辨率适配：按照大屏实际分辨率设计（常见1920×1080、3840×2160），确保全屏显示无变形
- 深色背景：大屏通常用深色（深蓝/黑色）背景，配合亮色数据，视觉效果好、不刺眼
- 大字体：大屏观看距离远，字体要大，标题建议40px以上，数据建议60px以上
- 数据实时性：大屏展示实时数据，刷新频率建议5-30秒
- 动效：适当使用动画效果（数据滚动、图表动画、告警闪烁），提升视觉冲击力
- 布局对称：大屏布局讲究对称和平衡，中间放核心指标，两侧放辅助数据
16.6.2 典型大屏布局
"工厂运行指挥中心"大屏布局示例：
- 顶部：大屏标题（工厂名称+日期时间+天气）
- 左侧：设备运行状态总览、告警统计、能耗排名
- 中间：厂区3D地图/平面图（设备位置和状态标注）+ 核心KPI指标（产量、能耗、设备OEE）
- 右侧：实时趋势图（产量趋势、能耗趋势）、最新告警列表
- 底部：滚动新闻/通知、关键指标跑马灯
16.7 移动端可视化
随着移动办公的普及，越来越多的用户希望在手机上查看设备数据。数晰IOT平台支持移动端仪表盘，适配手机屏幕。
16.7.1 移动端设计要点
- 单列布局：手机屏幕窄，采用单列布局，组件从上到下排列
- 触控友好：按钮和可点击区域足够大（至少44×44px），方便手指点击
- 精简内容：移动端只展示最关键的数据，不要把PC端所有内容都搬过来
- 加载速度：优化图表渲染，减少数据量，确保移动端加载快
- 横屏适配：趋势图等宽图表支持横屏查看，体验更好
- 手势操作：支持滑动切换时间范围、双指缩放图表等手势操作
16.8 本章小结
本章详细介绍了数据可视化功能。要点回顾：
- 数据可视化让数据"看得见、看得懂"，价值在于直观展示、快速发现异常、辅助决策、提升沟通效率。
- 仪表盘是数据可视化的基本单元，分为普通仪表盘、大屏仪表盘、移动端仪表盘三种类型，支持权限管理和模板复用。
- 平台提供丰富的图表组件：基础图表（折线图、柱状图、饼图、面积图、散点图、雷达图）、工业专用图表（数据卡片、仪表盘Gauge、状态指示灯、多曲线趋势图、数据表格、热力图）、辅助组件（文本、图片、时间选择器、设备选择器）。
- 搭建仪表盘按照创建→规划布局→添加组件配置数据→调整样式→预览发布的步骤进行。
- 图表配置技巧包括数据配置（数据源、时间范围、聚合方式、数据对比、数据过滤）、样式配置（配色、字体、图表比例、坐标轴、图例、数据标签、告警线）、交互配置（钻取、联动、时间选择、设备选择、悬浮提示、导出）。
- 仪表盘设计原则：一个仪表盘一个主题、从上到下从总到分、重点突出、颜色有意义、避免信息过载、适配使用场景、以用户为中心。
- 大屏可视化要注意分辨率适配、深色背景、大字体、实时性、动效、布局对称。
- 移动端可视化要注意单列布局、触控友好、精简内容、加载速度、横屏适配、手势操作。
下一章我们将讲解告警规则配置与多渠道通知，学习如何设置告警规则，让平台在设备异常时自动通知相关人员。
📝 本章练习（5题）
答案与解析请在 互动学习看板 中作答查看。
📚 玩转工业物联网平台 课程目录（30 章）
- 第1章 什么是工业物联网（IIoT）
- 第2章 工业物联网与消费物联网的区别
- 第3章 工业物联网的核心价值与典型应用场景
- 第4章 工业物联网四层技术架构详解
- 第5章 数晰IOT物联平台概览与核心功能
- 第6章 工业数据采集的基本概念与重要性
- 第7章 常见工业传感器详解（温度/压力/流量/振动）
- 第8章 工业通信协议入门（Modbus/OPC UA/MQTT）
- 第9章 数据采集网关的作用、选型与配置
- 第10章 数晰IOT平台数据采集配置实战
- 第11章 数据采集常见问题与排查方法论
- 第12章 平台注册登录与界面导览
- 第13章 设备管理：添加设备、分组与标签
- 第14章 物模型设计：属性、服务与事件
- 第15章 数据点配置与数据上报调试
- 第16章 数据可视化：仪表盘搭建与图表配置
- 第17章 告警规则配置与多渠道通知
- 第18章 历史数据查询、导出与分析
- 第19章 OpenAPI接口与第三方系统对接
- 第20章 实战项目一：设备运行状态监控系统
- 第21章 实战项目二：工厂能耗数据采集与分析
- 第22章 实战项目三：生产环境温湿度监测系统
- 第23章 实战项目四：设备预测性维护基础应用
- 第24章 工业物联网与MES/ERP系统集成方案
- 第25章 工业物联网项目实施全流程方法论
- 第26章 工业物联网安全基础与最佳实践
- 第27章 设备运维与常见故障排查
- 第28章 数据质量保障与数据治理基础
- 第29章 工业物联网岗位图谱与能力要求
- 第30章 学习路径规划与职业发展建议