3D轮播容器

功能背景

随着可视化业务表达方式的不断拓深，展示形式也越来越丰富多样，充满更多的“个性化”以及“专属定制”的诉求场景。而现在的子组件样式，仅支持固定格式的内容表达，难以满足易知微用户的定制化需求。我们推出「万能“子组件”」，引入全新的机制定义，在“任意拼接”基础上打通组件与平台的逻辑，从 “1*N ” 变为“N*N”，任意组件之间可以互相引用，相互拓展，大大提升可视化的场景覆盖度。

应用场景

1. 3D轮播容器

通过全新上线的3D轮播容器组件，实现了组件容器功能的“3D进阶”，任意模块都可以以3D轮播、旋转的交互形式进行展示，赋能更多可视化业务场景的表达。

2. 地图子组件自定义拼接

支持自定义拼接地图组件的子组件内容，包括所有的图表组件、标题组件，以及更多组件。辅助展现可视化地图的所有个性化形态，丰富地理信息业务数据的表达形式，灵活、直观的融入到地理信息的展示和表达中，让数据可视化元素变得更加丰富多样。

更多应用场景：状态容器等，持续开发中……

使用流程

功能入口

3D轮播容器的万能子组件入口在子组件管理的列表中。（备注：3D轮播容器没有其他类型子组件。万能子组件支持添加多个，但受容器本身功能的限制，只有第一个万能子组件是有效的。）

样式

3D轮播容器由于只是作为承载其他类型组件的盒子的存在，因此他的万能子组件基础样式只有状态列表，用以匹配对应数据。状态列表可以对不同状态设置标识名称、默认状态和选中状态。对数据的相关操作以及对状态列表的解释，详见下文数据接入与分发逻辑。

自定义编辑模式

功能逻辑

万能子组件机制的主要作用是自定义拼接组件/轮播展示内容，需要进入编辑模式进行自定义拼接。

功能入口

如果我们想自定义拼接子组件内容，则需要进入编辑模式进行组件拼接操作。

组件展示大小及背景透明度设置

数据接入与分发逻辑（重要！！）

状态标识

可自定义输入状态标识，根据状态标识进行数据的映射和分发。目前万能子组件可以支持多状态的展示形式，这个时候就需要每个状态匹配好对应的标识。基于此进行数据的分发与映射。

数据接入流程

我们的原数据是这样的。现在我们需要把标识一的数据传入万能子组件中。

1.绑定状态标识（状态为拼接的不同子组件）

2.编辑模式里，将组件数据来源设置为“接收上级数据”，选择后可看到接收到的标识一数据

这个时候，我们根据字段映射，选择相应的字段即可完成数据的接入。

⚠️上面所展示的是可以直接映射的数据，图表类的数据目前则需要放置在对象里，需要做一定的处理，例如我们用data，这里可以进行自定义。【此处目前数据映射需手动处理，后续我们也会继续优化数据处理的映射逻辑】

这里提供大屏模版，可直接进行查看。👉🏻📎图表类数据接入_2847387.screen.zip

同时我们需要在编辑模式的过滤器里进行数据的处理，data处则是我们在数据中定义的对象。如果我们定义了外层为aa,则这里处理成 return data[0].aa || []; （注：需要修改红色的位置即可，前面的return data[0]是固定的）

这样的话就完成了图表类的数据映射和接入。

return data[0].data || [];

3.状态关联（重要！！）

我们需要关联状态和标识，这个时候我们刚刚配置的就可以正常显示啦！注意⚠️：这里的名称需要写正确，不然组件没办法正常进行渲染。

同时我们也可以配置其他任意类型的组件，进行数据映射，通过3D轮播容器进行轮播。

4.状态的默认和选中(特殊！)

为有效展示3D轮播容器效果，可以重复1、2、3步骤，自定义多个状态的组件，并对多个状态和标识分别进行关联。在状态列表里，默认状态为轮播容器未展示在面前的组件样式，选中状态为轮播容器展示在面前的组件样式，默认均为none，需要进行手动配置。在实操中，我们既可以将状态1的默认状态和选中状态设置为相同的，也可以设置为不同的，实现不同状态下组件样式的关联。

在这个实例中，状态2的文字颜色为白色，而状态1的文字颜色为红色，我们将状态1的默认状态设置为状态2，选中状态设置为状态1，则会出现如下轮播效果。

展示效果

全局设置

3D轮播容器可设置相机位置、半径、滚动时长等。轮播类型有默认和始终面对相机两种。默认类型轮播组件分布在球面上，朝向会有偏移，而始终面对相机类型轮播组件始终朝向正面。自动轮播支持悬停，自由设置旋转方向和间隔时长，与其他类组件轮播设置类似。

案例模版

📎万能子组件-3D轮播容器_2843874.screen.zip