跳至主要內容

数据可视化

fastbee2024年9月27日大约 8 分钟

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

一、产品特点

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

二、技术特点

1. 项目运行和部署

# 后端接口地址
VITE_DEV_PATH = 'http://localhost:8080'
# 安装 pnpm 
npm install -g pnpm
# 安装项目依赖

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

# npm
npm install

# yarn
yarn install
# pnpm
pnpm dev

# npm
npm run dev

# yarn
yarn dev

# makefile
make dev
# pnpm
pnpm run build

# npm
npm run build

# yarn
yarn run build

# makefile
make dist
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. 注意事项

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. 使用数据可视化

2. 制作可视化大屏

新建大屏

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

添加组件

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

配置数据源

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

a. 静态数据

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

b. 动态请求

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

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

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

c. 公共接口

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

发布

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

四、大屏应用管理

1. 创建大屏

2. 工具栏

3. 操作栏

五、编辑器管理

1. 工具栏

2. 图表组件

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

3. 图层控制

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

4. 详情设置