0 代码搞定可视化大屏！JNPF 大屏设计神技：拖拽组件 + 数据绑定，指挥决策 / 汇报展示直接拿捏

做指挥决策需要实时数据大屏，成果汇报想要炫酷可视化页面，业务监控需直观数据展示？但不懂代码、不会设计怎么办？JNPF 大屏设计功能直接打破壁垒 —— 支持 0 代码拖拽组件，自由布局搭配丰富数据源，全局变量、地图管理、分享导出等功能一键拉满，所见即所得实现专业大屏开发。本文从新建大屏到分享发布，拆解全流程操作，附快捷键、组件配置等实用技巧，新手也能快速做出高颜值数据大屏！

功能描述

大屏设计支持自由布局页面，拖拽控件至页面中，针对不同的控件进行内容设值和数据绑定，所见即所得的实现大屏可视化页面开发。

使用场景

指挥决策展示、成果汇报展示、业务监控

效果展示

进入大屏设计页面，具有新建大屏管理、组件库、分类管理、数据源管理、全局变量、数据集管理、地图管理、综合功能等功能。除了地图管理，每个应用下的大屏数据都是独立的。

1.1 大屏管理

进入大屏管理页面，展示分类下的大屏

1.1.1 新建大屏

• 点击新建大屏，展示信息填写内容页面，分组、大屏名称为必填项，大屏尺寸默认为 desktop，可上传缩略图

点击关闭按钮，取消大屏的创建，页面回到大屏管理

• 选择大屏分组、填写大屏名称，点击创建大屏，进入大屏设计页面

此时回到大屏管理页面，会展示刚刚新建的大屏

1.1.2 编辑大屏

鼠标移至模板上方，展示按钮，点击编辑按钮，跳转新链接，展示大屏设计页面

1.1.3 修改大屏信息

鼠标移至模板上方，展示按钮，点击修改按钮

展示编辑大屏信息页面，修改信息后，点击更新大屏，大屏信息修改成功

1.1.4 删除大屏

鼠标移至模板上方，展示按钮，点击删除按钮

展示删除弹窗，点击取消，取消删除操作；点击确定，删除大屏

1.1.5 复制大屏

鼠标移至模板上方，展示按钮，点击复制按钮

展示复制弹窗，点击取消，取消复制操作，点击确定，成功复制大屏

1.1.6 预览大屏

鼠标移至模板上方，展示按钮，点击预览按钮

跳转新链接，预览大屏页面

1.2 大屏设计

右侧配置为大屏画布配置

1.2.1 选择控件

可点击上方选择控件进行大屏设计

点击控件，即可展示在大屏设计页面上，可自由拖动，点击控件，右侧对应控件配置栏，可对控件进行单独配置

1.2.2 保存

点击保存按钮

提示保存成功，停留在设计页面，可继续进行大屏设计

由大屏管理页面，点击预览，可预览保存后的大屏设计

1.2.3 清空

点击清空画布，画布清空

1.2.4 快捷键

点击快捷键，弹窗展示支持的快捷键

1.2.5 全局变量

点击全局变量，展示大屏下全局变量页中的数据（全局变量设计见：全局变量）

也可在大屏设计中，新建全局变量点击创建变量，展示变量新增数据框，名称、变量名、变量值为必填项，点击保存，变量新建成功，点击取消，取消变量的新建

1.2.6 导出图片

点击导出图片

展示导出提示框，点击取消，取消导出图片操作，点击确定，导出图片

成功导出图片

1.2.7 当前页面预览设计

点击查看，可在当前页面预览设计效果

预览效果下，原查看按钮变为还原按钮，点击后，回到设计页面

1.2.8 导入导出按钮

点击导入导出

弹窗展示导入导出内容，数据框内填写数据

可导入其他大屏组组件、导入组件、导入配置、导出配置

• 导入其他大屏组件

  
  

  点击导入其他大屏组件，弹窗展示页面

输入大屏 ID 后，展示所选大屏下的所有组件

点击查看，可查看组件详情

勾选组件后，点击导入组件，组件成功导入

• 导入组件点击导入组件，弹窗展示导入组件输入框

  
  

输入正确数据，点击导入组件，成功导入组件

• 导入配置在输入框中填写正确数据，点击导入，导入成功后，展示在大屏设计页面中

  
  

• 
  

• 导出配置点击导出配置按钮，将当前设计页面数据导出，导出内容为压缩文件，txt 文档保存数据配置

  
  

1.2.9 分享

点击分享按钮，弹窗展示相关信息

• 开启分享，点击分享大屏

  
  

该大屏可通过分享链接查看

点击查看大屏，页面跳转新链接，展示大屏页面

点击复制链接，提示复制成功，可通过复制的链接查看大屏

• 可设置分享密码

  
  

  设置分享密码后保存，查看该大屏，需输入密码

密码输入错误，无法查看

密码输入正确，可正常查看大屏

1.2.10 后退/前进

点击后退/前进按钮，撤销操作/恢复操作

以上就是 JNPF 大屏设计的完整实操指南，从大屏创建、组件拖拽、数据绑定，到全局配置、分享导出，覆盖了指挥决策、成果汇报、业务监控等核心场景需求。快捷键操作、组件导入导出、密码分享等功能，还能进一步提升设计效率和数据安全性。

如果需要特定行业（如电商、政务、制造业）的大屏模板配置思路，或遇到数据源绑定、组件样式调整等问题，欢迎在评论区交流～关注我，解锁更多可视化工具实用技巧，让数据展示更直观、更专业！

要不要我帮你整理一份大屏设计组件搭配清单，涵盖不同场景下的组件组合、配色方案和数据绑定逻辑，直接复用提升设计效率？