1. 概述


在大屏的使用场景中,常有相同组件组合(比如:指标卡+趋势图)展示的需求,组件的类型、样式相同,但数据不同;且组件的组合数量可能非固定,而是通过数据动态变化。针对这种场景,可以使用“组件看板”功能。

2. 操作说明

2.1 添加组件看板,确定数据和扩展维度


点击大屏编辑器顶部的“组件看板”即可添加。
入口.png

添加后在“数据”Tab中进行数据设置,支持接入API、静态数据和数据模型。
当选择数据模型后,拖入维度,则最终大屏展示按该维度扩展。(下图则为组件看板内各组件按“地区”维度扩展)
确立数据维度.png

2.2 编辑组件看板,添加所需组件


选中组件看板后,支持下图两种方式跳转进入编辑组件看板界面。
编辑组件看板.png

在组件看板编辑页,添加所需组件,支持添加常规组件、地理/3D组件、自定义资产和设计素材。

  • 组件的样式、交互的设置与大屏编辑页添加的组件配置完全相同。
  • 组件的数据源类型与组件看板选择的相同,且模型自动带入组件看板所选的数据模型。一般情况下不支持修改数据模型,若修改则需要满足新的数据模型有相同维度的数据,否则预览时会出错。

如图添加2个文字组件和1个折线图组件,这些组件的数据源类型和数据模型与步骤2.1设置的相同。在此基础上,按需拖入相应字段。
文字组件1.png 文字组件2.png 折线图组件.png

2.3 编辑布局和动效,预览和最终调整


退出“编辑组件看板”界面,回到大屏编辑界面,编辑布局和动效。
编辑布局和动效.png

  • 布局:支持“行数固定”和“列数固定”两种布局类型,并支持设置行列数和具体的行列间距。当选择“行数固定”时,组件在满足行数的基础上进行横向扩展;当选择“列数固定”时,组件在满足列数的基础上进行纵向扩展。

    在该例中,步骤2.1设置各组件按“地区”维度扩展,由于数据模型中包含6个地区的销售额数据,则经过扩展后会出现6组组件(每组包含2个文字组件和1个折线图组件)。
    如下图分别为固定行数(行数为2)和固定列数(列数为2)后预览的效果。
    固定行数.png 固定列数.png

  • 动效:支持选择轮播效果,包括“无”“全屏轮播”和“逐条轮播”;当有轮播时支持设置轮播的“停留时间”。

    当组件看板内组件超出卡片大小时,若选择“无”则按照卡片大小切割,若选择“全屏轮播”和“逐行轮播”则显隐播放(行数固定时按左右顺序,列数固定时按上下顺序)。

注意,编辑完成后,点击“预览”才可查看最终效果,可根据预览效果对组件属性(布局和动效)、卡片设置、卡片大小、组件大小等进行最终调整。
在实际使用过程中,组件数量可能随数据动态变化而变化。如在该例中,如果数据模型新增“华南”地区销售额数据,则组件数量会从6组变为7组。从而实现“组件看板”在绑定数据的基础上,动态扩展重复组件的功能。