数据可视化

Q: 大屏发布后空白

检查 Nginx location 配置、部署目录、前端资源路径、浏览器控制台资源 404 和接口地址。

页面导读

适用场景适合搭建大屏展示、业务监控、风险预警和多数据源可视化分析页面。

前置条件已准备可视化平台运行环境、后端接口地址、数据源和展示指标口径。

操作路径创建项目 → 拖拽组件 → 配置数据源 → 保存预览 → 发布访问地址。

验收点页面可访问，组件数据刷新正常，发布地址可被菜单或外链集成访问。

数据可视化服务是一种数据分析工具，提供可二次开发的工具和丰富的可视化组件，助力开发者通过图形化界面和交互式操作，快速将复杂的数据转化为可视化图表，帮助用户更直观地理解和分析数据，从而满足诸如智慧城市、智慧园区、智慧安防等一系列可视化大屏场景需求。

一、产品特点

提供丰富的可视化和行业组件，支持组件自定义接入，内置有案例可以参考快速实现搭建，支持多个数据源，零代码拖拽等。

二、技术特点

fastbee-view 是一个高效低代码的可拖拽式可视化平台，图表或页面元素已封装为基础组件，无需编写代码即可快速完成会议展览、业务监控、风险预警等多业务需求。
技术栈为：Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS
使用流程：新建项目-->可以点击上方编辑名称-->尽情发挥拖拉拽编辑页面-->保存(60s自动保存/手动保存)-->预览-->发布（生成地址）

1. 项目运行和部署

修改根目录的 .env.development 文件，配置后端接口地址

# 后端接口地址
VITE_DEV_PATH = 'http://localhost:8080'

安装依赖，建议使用 pnpm，避免不必要的依赖安装报错（node 版本推荐 16.14 左右）

shell

# 安装 pnpm 
npm install -g pnpm

shell

# 安装项目依赖

# pnpm（建议使用nrm切换到淘宝源 https://registry.npmmirror.com/）
pnpm install

# npm
npm install

# yarn
yarn install

启动项目

shell

# pnpm
pnpm dev

# npm
npm run dev

# yarn
yarn dev

# makefile
make dev

编译

shell

# pnpm
pnpm run build

# npm
npm run build

# yarn
yarn run build

# makefile
make dist

部署： Nginx配置文件中添加location ，切记不要用重复的匹配关键词，编译的文件上传到 /var/data/nginx/view/ 目录下

shell

location ^~/view/ {
   alias /var/data/nginx/view/;
   index  index.html;
   try_files $uri $uri/ /index.html last;
}

部署完访问地址： https://[域名]/view/ ，也可以通过在系统中添加外链菜单

# 参考外链地址：
https://iot.fastbee.cn/view/#/project/items

2. 接口说明

项目列表 GET  /goview/project/list
新增项目 POST  /goview/project
保存项目内容 POST /goview/project/save/data
修改项目基础信息/修改发布状态  PUT  /goview/project/
删除项目 DELETE /goview/project/{ids} 
上传文件接口  /goview/project/upload
获取项目 GET /goview/project/getData 此接口涉及到预览，所以前后端白名单放行

3. 菜单添加

提示

FastBee商业版本，有系统内置大屏和可视化平台，通过添加菜单方式访问

固定大屏展示菜单

企业管理 -> 菜单管理 -> 新增

上级菜单：数据可视化
菜单类型：菜单
菜单图标：monitor
菜单名称：大屏展示
是否外链：是
显示排序：1
路由地址：https://iot.fastbee.cn/bigScreen   # iot.fastbee.cn 改为自己服务器的地址
是否缓存：缓存
显示状态：显示
菜单状态：正常

可视化平台菜单

企业管理 -> 菜单管理 -> 新增

上级菜单：数据可视化
菜单类型：菜单
菜单图标：monitor
菜单名称：大屏展示
是否外链：是
显示排序：2
路由地址：https://iot.fastbee.cn/view   # iot.fastbee.cn 改为自己服务器的地址
是否缓存：缓存
显示状态：显示
菜单状态：正常

4. 注意事项

保证nodejs版本在v16.14.x以上，推荐使用v16.14.2。
如果使用npm install安装依赖仍然无法跑起来的话，请使用pnpm，推荐使用pnpm。
pnpm安装

1. 安装 pnpm 
npm install -g pnpm
2. 安装 nrm 
npm install -g nrm
3. 使用 nrm 添加阿里镜像
nrm add taobao  https://registry.npmmirror.com/
4. nrm 查看镜像列表
nrm ls
5. nrm 应用对应镜像
nrm use taobao

提示

常见问题

运行nrm ls时出现错误：const open = require('open')

再下载一个open包：npm i nrm -g open@8.4.2 --save 再次执行：nrm ls

如果node内存泄露可以用node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))' 查询内存可以设置为更高的值：export NODE_OPTIONS="--max-old-space-size=8192" , 值可选：[2048, 4096, 8192, 16384]

三、快速入门

1. 使用数据可视化

登录FastBee管理平台，选择 数据可视化 > 大屏应用管理

2. 制作可视化大屏

新建大屏

点击新建，选择新项目，创建后跳转到大屏编辑页面。

添加组件

在编辑器左边组件栏，选择要添加的组件拖拽到编辑面板中，可以是图表或者装饰图，在图层列表中可以调整组件的名称、大小、位置、及特性样式

配置数据源

点击单个组件中，添加组件所需的数据源，可以是静态数据、动态请求、公共接口等，然后根据组件特性进行调整

a. 静态数据

选择 数据 > 请求方式，选择静态数据，根据数据映射，更改数据内容里面的值（下载数据内容并更改值后导入进来）

b. 动态请求

选择 数据 > 请求方式，选择动态请求，点击编辑配置，根据提示填写前置URL（URL为全局，后面再次使用动态请求或者公共接口时无需在配置，若有Header则可以一并配置），然后添加请求方式和请求地址，如果有请求参数可以填写对应请求参数，还可以用SQL自己编辑请求数据。

配置完成点击保存&发送请求，这时候我们F12打开调试工具，可以看到已经正常请求数据

测试请求接口可以拿到数据之后，我们开始编辑filter，点击新增过滤器，根据提示编写过滤函数，数据格式需要根据数据内容，组合成组件要求的数据格式类型

c. 公共接口

选择 数据 > 请求方式，选择公共接口，点击创建，创建方式和动态请求一样，只是创建完成后，如果在遇到其他组件需要用的这个接口的话，无需在次创建，直接使用公共接口里面创建好的接口就行

配置事件

a. 基础事件配置 基础事件需要编辑js代码，需要有一点前端知识，点击“编辑”进行代码编写，进而实现点击事件。

b. 高级事件配置 高级事件同样也需要编辑js代码，与“基础事件配置”不同的是实现点击事件的函数不一样。

c. 组件交互 组件交互用于配置需要进行交互动作的组件，比如把组件A点击产生的数据传给组件B去做为参数使用。那什么叫交互组件呢，就是可以下发数据的组件，比如日期选择框、下拉框、输入框等等。要实现组件之间的交互，要做如下几个步骤：

配置接受参数的组件，选择 数据 > 请求方式，选择动态请求/公共接口，点击编辑配置，根据提示配置。接收到的参数一般会传给该组件“url”中params下的key，key可以设置多个，每个key都可以绑定不同的交互组件动作。

配置交互组件的交互事件，选择 事件 > 组件交互，点击新增，根据提示配置，一个组件可以配置多个交互事件。“触发事件”为该交互组件完成操作动后的触发值，如下拉，下拉完成等，不同组件有不同的完成动作；“绑定”为你要接受参数的组件，只要配置了“动态请求/公共接口”的组件都可以进行数据绑定；Params为绑定组件中的key，通过Params配置可以将交互组件在交互中完成动作所产生的值传给绑定组件url中prams下的key，进而实现交互。

发布

完成大屏编辑后可以直接在右上角预览或者发布，也可以保存后返回大屏列表页，选择编辑好的大屏并单击发布，系统会生成大屏的URL，用户可以通过URL访问大屏

四、大屏应用管理

1. 创建大屏

点击新建，点击新项目，创建空白大屏

2. 工具栏

支持中英文切换
支持界面字体选择
支持开发模式切换（深色/浅色）

3. 操作栏

编辑 - 点击编辑图标进去编辑器
预览 - 打开新窗口生成预览界面
发布 - 未发布的图层可以选择发布
取消发布 - 已经发布的图层可以取消发布
删除 - 超级管理员才有删除权限

五、编辑器管理

1. 工具栏

首页 - 保存并返回首页
图表组件 - 显示/隐藏组件工具栏
图层控制 - 显示/隐藏图层工具栏
详情设置 - 显示/隐藏组件或页面详情配置工具栏
后退 - 撤回更改
前进 - 回复更改
保存 - 保存图层修改
工作空间 - 可自定义大屏名称
预览 - 预览当前大屏
发布/已发布 - 点击可查看发布url

2. 图表组件

通过分类标识可以查看不同的组件，同时支持组件排列方式切换

3. 图层控制

查看编辑器使用的组件图层，按住control键同时鼠标点击对应图层，可以对图层进行分组管理

4. 详情设置

点击屏幕空白处，可以设置图层宽高、背景、颜色等

点击对应组件，可以设置组件样式、动画、数据和点击事件

六、数据源配置建议

大屏稳定性主要取决于数据源设计。建议按以下原则配置：

数据源类型	适用场景	注意事项
静态数据	演示、背景装饰、固定指标	上线前确认不是临时假数据
动态请求	实时指标、业务接口、设备统计	控制刷新频率，避免接口压力过大
公共接口	多组件复用同一接口	统一维护请求地址、Header 和参数
SQL 查询	内部统计或聚合数据	注意权限、性能和 SQL 注入风险
交互参数	组件联动、筛选条件	参数名保持稳定，便于维护

七、上线验收

验收项	正常表现
项目列表	新建、编辑、删除、发布状态正常
数据请求	动态接口能返回数据，失败时有默认展示
组件适配	大屏在目标分辨率下不遮挡、不变形
发布地址	发布 URL 可访问，取消发布后不可访问
菜单集成	系统菜单外链可打开大屏
自动刷新	刷新频率符合业务需要，不造成接口过载
权限控制	未授权用户不能进入管理和编辑页面
构建部署	`/view/` 路径和 Nginx 配置正确

八、常见问题

大屏发布后空白

检查 Nginx location 配置、部署目录、前端资源路径、浏览器控制台资源 404 和接口地址。

动态请求跨域

检查前端代理、后端 CORS、Nginx 转发、协议 HTTP/HTTPS 是否一致。

数据格式不匹配

检查组件需要的数据结构，使用过滤器把接口响应转换成组件需要的数组、对象或键值格式。

页面卡顿

降低刷新频率，减少同时播放的视频和高频图表，压缩图片，避免单个页面堆叠过多组件。

九、二次开发入口

类型	路径或接口	说明
可视化页面	`vue3/src/views/visualBigScreen`	大屏管理、偏好和项目入口
固定大屏	`vue3/src/views/fixedBigScreen`	固定大屏组件和页面
拖拽编辑器	`vue3/src/views/dragEditor`	组件拖拽和编辑能力
项目接口	`/goview/project`	项目列表、新增、保存、发布
项目数据	`/goview/projectData`	数据执行与项目数据
上传接口	`/goview/project/upload`	图片和素材上传

数据可视化 ​

页面导读 ​

一、产品特点 ​

二、技术特点 ​

1. 项目运行和部署 ​

2. 接口说明 ​

3. 菜单添加 ​

4. 注意事项 ​

三、快速入门 ​

1. 使用数据可视化 ​

2. 制作可视化大屏 ​

新建大屏 ​

添加组件 ​

配置数据源 ​

配置事件 ​

发布 ​

四、大屏应用管理 ​

1. 创建大屏 ​

2. 工具栏 ​

3. 操作栏 ​

五、编辑器管理 ​

1. 工具栏 ​

2. 图表组件 ​

3. 图层控制 ​

4. 详情设置 ​

六、数据源配置建议 ​

七、上线验收 ​

八、常见问题 ​

大屏发布后空白 ​

动态请求跨域 ​

数据格式不匹配 ​

页面卡顿 ​

九、二次开发入口 ​

数据可视化

页面导读

一、产品特点

二、技术特点

1. 项目运行和部署

2. 接口说明

3. 菜单添加

4. 注意事项

三、快速入门

1. 使用数据可视化

2. 制作可视化大屏

新建大屏

添加组件

配置数据源

配置事件

发布

四、大屏应用管理

1. 创建大屏

2. 工具栏

3. 操作栏

五、编辑器管理

1. 工具栏

2. 图表组件

3. 图层控制

4. 详情设置

六、数据源配置建议

七、上线验收

八、常见问题

大屏发布后空白

动态请求跨域

数据格式不匹配

页面卡顿

九、二次开发入口