Skip to content

创建第一个大屏

前提条件

  • forge-report-server 已启动(默认端口 8582)
  • 已使用 admin/123456 登录系统

创建大屏

1. 进入大屏管理

点击左侧菜单「数据大屏」→「大屏管理」,查看已有大屏列表。

2. 新建大屏

  1. 点击「新建大屏」
  2. 填写基本信息:
字段说明示例
大屏名称显示名称销售数据看板
大屏编码唯一标识sales_dashboard
宽度画布宽度(px)1920
高度画布高度(px)1080
描述用途说明展示销售核心指标
  1. 点击保存

3. 选择模板

  1. 系统提供预置模板,选择一个适合的模板
  2. 也可以选择「空白模板」从零开始设计
  3. 点击「确定」进入编辑器

设计大屏

4. 添加组件

  1. 在编辑器左侧的组件面板中,拖拽组件到画布
  2. 常用组件:
组件用途
柱状图展示分类数据对比
折线图展示趋势变化
饼图展示占比分布
数字面板展示核心指标
文本组件展示标题或说明
图片组件展示 Logo 或背景图

5. 配置数据

  1. 选中画布中的组件
  2. 在右侧属性面板的「数据」标签中配置数据源
  3. 选择数据源类型:
类型说明
静态数据直接编写 JSON 数据
HTTP API配置接口地址,动态获取数据
  1. 配置数据映射(将接口字段映射到组件维度)

6. 调整布局

  1. 拖拽组件调整位置
  2. 通过属性面板设置组件大小
  3. 使用对齐工具快速排版

预览大屏

  1. 点击编辑器工具栏的「预览」按钮
  2. 在新窗口中查看大屏的实际渲染效果
  3. 数据自动从配置的数据源加载
  4. 确认效果后返回编辑器继续调整

下一步

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