Skip to content

数据大屏

数据大屏是仪表盘的「自由画布 + 全屏自适应」形态,适合可视化指挥中心、监控墙、展厅投屏。它与普通仪表盘共用同一套数据集与组件,只是布局与渲染方式不同。

启用大屏画布

进入仪表盘设计器,顶部布局模式从「栅格布局」切换为「大屏画布」:

  • 栅格布局:响应式 12 列,组件自动对齐排布,适合常规后台仪表盘。
  • 大屏画布:固定设计尺寸(默认 1920×1080)+ 像素级自由摆放,适合大屏。

首次切换到画布时,系统会用栅格布局换算出初始坐标,组件不会丢失。

自由画布操作

  • 从左侧拖入组件,在画布上任意拖动 / 缩放(像素级绝对定位)。
  • 画布按可视区等比缩放并居中显示,设计坐标始终基于真实设计尺寸(如 1920×1080),缩放不影响保存的坐标。
  • 组件支持层级(z-index),选中高亮置顶编辑。

大屏设置

点顶部「大屏设置」配置:

说明
设计宽度 / 高度大屏的逻辑分辨率(px),默认 1920×1080
缩放方式fit 等比铺满(letterbox)/ width 按宽度铺满 / full 拉伸铺满
主题深色科技 / 浅色
背景色 / 背景图 URL舞台背景,背景图常用于自定义大屏底图
自动刷新间隔秒数,0=不自动刷新

缩放方式说明

  • fit(推荐):等比缩放使整屏完整可见,两侧/上下留黑边(letterbox),不变形。
  • width:按宽度铺满,高度可能溢出滚动。
  • full:拉伸铺满容器,可能变形。

深色科技皮肤

选择深色主题后,舞台自动应用大屏皮肤:渐变深蓝背景、网格纹理、发光边框、半透明卡片、标题栏装饰条。图表(VChart)配色跟随应用全局主题,保证整体一致。

大屏专属组件

除常规图表外,大屏常用:

组件说明
翻牌器(flipper)数字翻牌滚动动画,可固定位数补零,适合核心指标
滚动榜单(scrollList)排名榜单 + 自动垂直滚动(跑马灯),可显示名次与占比条
地图(map)基于 geojson 的区域着色地图(配置 geojson URL + 区域字段 + 数值字段)
水波球(liquid)百分比水波球,适合完成率/占比
图片 / 网页(image / iframe)嵌入图片底图或外部网页

多屏轮播

顶部「轮播」可把大屏拆成多页自动轮换:

  • 设置页数(pageCount)与轮播间隔(intervalSec,秒),每个组件通过 page 属性归属某一页;
  • 设计器顶部提供页签逐页编排(显示各页组件数);
  • 查看时按间隔自动切页,可选页码指示点(showDots)与手动前后翻页;
  • 系统尊重操作系统「减少动态效果」偏好(prefers-reduced-motion),开启时不自动轮播。

适合值班指挥中心「销售 → 库存 → 物流」多主题轮询展示。

预览、全屏与投屏

  • 预览:保存后点「预览」进入只读大屏;按缩放方式自适应。
  • 全屏:预览页「全屏」按钮进入浏览器全屏,适合投屏展示。
  • 自动刷新:按大屏设置的间隔自动拉取最新数据。
  • 投屏分享:通过公开分享生成无需登录的链接/二维码,直接在大屏终端打开。
  • 移动端:小屏设备自动切换为单列阅读模式(按布局顺序纵向排列组件),无需单独设计移动版。

渲染一致性

预览页、公开分享页、<ReportEmbed> 嵌入均复用同一套大屏渲染器(ScreenCanvas),保证设计态与展示态完全一致:画布模式按缩放方式 letterbox 居中,栅格模式响应式排布,移动端统一降级单列。

提示:内置示例「运营数据大屏」(深色画布 + 翻牌器 + 滚动榜单 + 柱图 + 饼图)可直接打开参考。

Built with VitePress for local documentation preview.