数据大屏
数据大屏是仪表盘的「自由画布 + 全屏自适应」形态,适合可视化指挥中心、监控墙、展厅投屏。它与普通仪表盘共用同一套数据集与组件,只是布局与渲染方式不同。
启用大屏画布
进入仪表盘设计器,顶部布局模式从「栅格布局」切换为「大屏画布」:
- 栅格布局:响应式 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 居中,栅格模式响应式排布。
提示:内置示例「运营数据大屏」(深色画布 + 翻牌器 + 滚动榜单 + 柱图 + 饼图)可直接打开参考。