什么是自定义大屏？

智嵌云数据可视化平台是一款开箱即用的在线的可视化大屏搭建工具，提供丰富的元件、资产、模板库，让可视化搭建更易搭建。提供数据接入和处理功能，实时展现图表数据；同时可以将外部资源和有智嵌云业务数据融入大屏，实现组织、设备、场景实时数据、历史数据的、组态画面、摄像头画面、报警数据等的联动交互与展示。
通过智嵌云数据可视化平台，使用者无需设计功底和技术基础，通过简单的组件拖拽、配置属性、数据、交互的方式就可以快速搭建出专业美观酷炫的数据大屏，大大节约人力成本的同时提升自身品牌力，满足用户对数据的可视化、个性化需求。

一、自定义大屏介绍

1.1文档说明

本文档旨在指导开发与运维人员快速上手自定义大屏功能，明确数据接口规范、大屏配置流程及常见问题处理，保障大屏可视化展示的高效搭建与稳定运行。

1.2 适用范围

适用于大屏开发工程师、数据分析师及运维人员，用于自定义大屏的需求确认、开发对接、数据配置与日常维护。

二、大屏功能架构

2.1 核心模块

1、可视化渲染层：基于 ECharts/Canvas 实现图表（折线、柱状、地图等）、组件（文本、预警标识）渲染，支持动态更新样式与数据。

2、数据处理层：通过过滤函数清洗、转换接口数据，适配可视化渲染要求。

3、配置管理层：支持可视化配置（拖拽组件、设置样式）与代码级配置（自定义过滤逻辑、接口参数），灵活控制大屏展示。

2.2 流程示意图

三、数据接口说明

3.1接口调用流程

1、触发机制：大屏初始化时自动调用，或按配置的时间间隔（如30秒）轮询请求。

2、依赖关系：需先完成数据源配置（接口地址、请求参数），数据处理层基于接口返回结果执行过滤逻辑

3.2 智嵌云常见接口

3.2.1 请求格式（固定头+接口）

固定头：https://cloud.zqwlcloud.com

接口：如上表格

参数示例（GET）：

①获取设备状态：https://cloud.zqwlcloud.com/prod-api/iot/device/statistic

②获取告警记录：

四、数据处理与过滤函数

注意：过滤函数会用到一些简单代码，如果不会编写可直接咨询技术支持，或者问AI助手

如：下面是【设备状态】这个接口应答的内容，若用户只需要告警的数量。则需要配置过滤函数让这个应答的接口过滤后只剩下告警的数据，从而绑定给组件

{
"msg": "操作成功",
"code": 200,
"data": {
"deviceCount": 18,
"todayWarning": 0,
"gwCount": 42,
"gwUnActiveCount": 3,
"todayDataCount": 81574,
"deviceOnlineCount": 8,
"unprocessedWarning": 297，
"warning": 394,
"todayDeviceCount": 0,
"deviceUnActiveCount": 2,
"todayGwCount": 0,
"gwOnlineCount": 20,
"thirdGweCount": 2
}
}

过滤函数示例

这段代码的意思为，只取应答里面的warning的值，而warning代表的就是告警的数量

function  filter(data, res)  {
return data.warning; 
}

配置过滤函数图片

五、大屏配置流程

5.1 可视化配置

1、组件拖拽：从组件库（图表、文本、预警框等）拖拽元素到大屏画布，支持自由布局。

2、数据源绑定（若是组合组件则无需绑定）：选中组件→ 配置数据源 → 填写接口→ 填写筛选函数

3、样式设置：调整颜色、字体、动画（如预警闪烁），保存配置后实时预览。

操作步骤如下：

六、组合组件（无需绑定操作，可直接拖取使用）

组件1，地图组件

组件2，实时数据组件