数据大屏同样支持基于书签和系统内置组件,基于拖拉拽和可视化配置方式快速制作,整个过程无需编写任何代码。

💡数据大屏和数据概览的区别:数据大屏支持大屏风格的样式,但也需要花更多时间进行设计,数据概览主打简单快速;数据大屏支持图层堆叠,但对于不同大小的屏幕展示需要制作时提前设置屏幕尺寸并按等比宽度(高度)进行缩放;数据大屏支持动画组件。

💡 打开新窗口查看操作视频

1. 制作数据大屏

1.1 大屏基本设置

  • 点击页面右上方操作区第十个按钮【设置】,弹出框中完成以下设置项,设置完成点击“关闭”按钮。

数据大屏3.png
数据大屏2.png

  • 设置屏幕尺寸:填入一种典型目标屏幕的尺寸(宽 x 高),系统默认填入当前制作PC的分辨率。

    💡注意,制作大屏时如果目标大屏的分辨率很高,这里屏幕尺寸不需要填入目标大屏的分辨率,建议填入一个跟目标大屏分辨率有等比关系而当前制作PC显示又不失真的值,例如目标大屏的分辨率为 3000 x 1600,这里屏幕尺寸可以设置为 1500 x 800,后续实际大屏展示系统会根据选择的“缩放方式”进行等比缩放展示。

  • (可选)设置背景图片:选择或上传一张背景图片,基于设计良好的背景图片进行大屏制作可大大减少大屏制作时间,提升大屏显示效果。

  • (可选)选择样式主题:选择一种主题样式,作用于大屏相关图表和文本,系统支持“暗黑”(默认)、“浅白”、“浅蓝”三种样式主题。
  • 选择缩放方式:选择一种缩放方式,当目标屏幕尺寸与预设值不一致时,系统自动按指定方式进行缩放,默认情况选择“等比缩放宽度铺满”即可,其他可选项包括“全屏铺满”、“等比缩放高度铺满”、“等比缩放高度铺满(可滚动)”。

    1.2 添加文本组件

  • 点击页面右上方操作区第三个按钮【文本组件】,添加大屏文本组件,鼠标移动到该文本组件,右上方浮现对应操作按钮,包括“设置”、“复制”、“删除”,点击“设置”配置文本内容、大小、颜色、粗细等。

    💡大屏【文本组件】主要用途:标题(大屏标题、区域标题、图表标题等);变量({}引用单值指标卡输出对应值,引用datetime函数输出计时器,如{datetime(“H:mm:ss dddd \n YYYY年 MM月DD日”,1)});文本和超链接(如添加“详情查看”文本并设置弹出详情页,可设置“新标签页打开”、“当前页打开”、“弹出窗口打开”,常用“弹出窗口”并设置窗口位置和大小)。

1.3 添加图表组件

数据大屏4.png

  • 点击页面右上方操作区第一个按钮【添加图表】,选择对应书签图表添加到大屏,鼠标拖动图表位置或设置图表大小。鼠标移动到该图表,右上方浮现图表对应操作按钮,包括“设置”、“编辑”(新页面打开图表对应书签进行编辑)、“导出”、“删除”,点击“设置”进行配置是否显示标题、个性化配色方案等。

    1.4 (可选)添加装饰组件

  • 点击页面右上方操作区第四个按钮【装饰组件】,鼠标拖动组件位置和大小。鼠标移动到该组件,点击“设置”从内置的“边框或装饰器”进行选择。

  • 边框:边框组件常用于大屏布局设计(尤其不使用背景图或者背景图较简单时),多个边框组件可以组合/堆叠,鼠标可以拖拉边框组件大小和位置。
  • 装饰器:装饰器主要用于局部装饰效果,尤其一些动画效果,操作上同边框。

    1.5 (可选)添加筛选控制器

  • 点击页面右上方操作区第五个按钮【其他组件】选择“控制器组件”,同样需要鼠标移动到该组件,点击右上方的“编辑”按钮,弹出框中按配置筛选控制器名称、选择控制的图表和关联字段、配置控制器类型并设置相关参数;点击“设置”按钮,可以设置控制器背景色、选中高亮背景色、边框色、字体色、是否显示标签等。

    💡除提供“设置”按钮进行匹配大屏的样式设置外,筛选控制器功能和操作(点击“编辑”按钮)跟数据H5看板一致,包括对Web工作表字段的关联和控制、隐藏控制器的功能等。

2. 分享数据大屏

  • 点击页面右上方操作区第九个按钮【分享】,浏览器新标签页中打开大屏预览,此时鼠标移动到右边缘中间处,可点击【全屏】按钮查看全屏效果,按键盘Esc可退出全屏效果。浏览器标签页中可复制链接,外部系统可以调用大屏分享链接并结合控制器URL参数进行大屏看板集成。

    3. 保存为看板模板

  • 操作同“数据概览”,点击右上方操作按钮区的“保存”按钮,弹出框中选择“保存为模板”,弹出页面填写模板名称和模板描述,上传模板封面,点击“确定”按钮,保存到“看板模板”中。