Skip to content

数据大屏概览

数据大屏模块提供低代码可视化大屏搭建能力,通过拖拽组件和配置数据源,快速构建数据展示大屏,适用于指挥中心、数据看板等场景。

功能入口

登录管理后台后,点击左侧菜单 数据大屏 > 大屏管理,进入大屏列表页面。

大屏列表

大屏列表以卡片或表格形式展示所有已创建的数据大屏,每个大屏展示名称、封面预览、创建时间和状态信息。支持按名称搜索。

创建大屏

  1. 在大屏列表页,点击 新建大屏 按钮
  2. 填写大屏基本信息:
    • 大屏名称(必填):如"年度销售看板"
    • 大屏编码(必填):唯一标识,如 sales_dashboard
    • 大屏尺寸:选择预设尺寸(1920×1080 / 3840×2160)
    • 背景设置:纯色、渐变或图片
  3. 点击 确定 创建

组件编辑

创建大屏后进入设计器界面进行可视化编辑:

添加组件

  1. 在左侧组件库中选择组件类型:
    • 图表:柱状图、折线图、饼图、雷达图等(基于 ECharts)
    • 文本:标题、数字、跑马灯
    • 地图:中国地图、区域地图
    • 边框装饰:大屏边框、角标装饰
    • 媒体:图片、视频、轮播图
  2. 拖拽组件到画布指定位置
  3. 通过拖拽锚点调整组件大小

配置数据源

  1. 选中画布中的图表组件
  2. 在右侧属性面板中点击 数据配置
  3. 选择数据来源:
    • 静态数据:直接编辑 JSON 数据
    • API 接口:绑定后端数据接口
    • 数据库查询:配置 SQL 查询语句
  4. 设置数据刷新间隔(如每 30 秒自动刷新)

样式调整

右侧属性面板支持对组件进行样式定制:

  • 颜色、字体、透明度
  • 动画效果(渐变、飞入、闪烁)
  • 交互配置(点击跳转、联动筛选)

预览与发布

预览大屏

  1. 在编辑器中点击 预览 按钮
  2. 进入全屏预览模式,查看最终效果
  3. 检查数据是否正确加载、动画是否流畅

发布大屏

  1. 确认效果满意后,点击 发布 按钮
  2. 系统生成大屏的独立访问 URL
  3. 可将该 URL 嵌入到其他页面或通过独立窗口访问
  4. 发布后的大屏可设置访问密码进行保护

大屏管理

  • 编辑:修改大屏内容
  • 复制:基于现有大屏创建副本
  • 访问地址:获取大屏的独立访问链接
  • 删除:删除不需要的大屏
  • 导出/导入:大屏配置文件的导入导出

相关文档

Forge Admin — 基于 Vue3 + Spring Boot 的企业级后台管理框架