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)嵌入图片底图或外部网页

预览、全屏与投屏

  • 预览:保存后点「预览」进入只读大屏;按缩放方式自适应。
  • 全屏:预览页「全屏」按钮进入浏览器全屏,适合投屏展示。
  • 自动刷新:按大屏设置的间隔自动拉取最新数据。
  • 投屏分享:通过公开分享生成无需登录的链接/二维码,直接在大屏终端打开。

渲染一致性

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

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

Built with VitePress for local documentation preview.