[]
        
(Showing Draft Content)

动态控制组件隐藏/显示

一张仪表板通常承载的信息量非常庞大,包括一些汇总数据也会有一些明细数据。有时用户只想显示统计结果和一些关键KPI,而将明细报表隐藏起来,在需要时通过点击弹出,查看完后再隐藏。从而不影响整个大屏的展示。

类似的场景,比如一个大屏中有大量的筛选器,我们可以通过点击调出筛选器,完成筛选后将其隐藏起来,这样会使大屏看起来更加简洁,更利于展示有效信息。具体效果如下图所示。

动态影藏组件.gif

操作示例

接下来为您解析实现组件动态显示/隐藏的步骤:

1. 设计仪表板大屏的展示内容。

image2022-10-17_16-58-24.png

2. 启用重叠功能。

image2022-10-17_17-1-48.png

3. 添加一个容器组件,并设置其标题为过滤面板,为容器设置填充色,将透明度设置为90%。

image2022-10-17_17-10-2.png

添加需要的过滤器。

image2022-10-17_17-12-50.png

4. 接下来设置动态显示和隐藏效果。

选中容器组件,将其可见性设置为

image2022-10-17_17-20-14.png

使用图片组件添加两个图片,一个是容器中的左箭头,另一个是仪表板右上角的过滤图标。

image2022-10-17_17-17-40.png

选中右上角的过滤图标,为其设置命令为显示容器。

image

选中箭头,为其设置命令为隐藏容器。

image


5. 预览仪表板。

筛选器过滤面板是隐藏的,因为我们为其设置了不可见。

image2022-10-17_17-33-36.png

单击右上角的过滤图标,过滤面板出现。

image2022-10-17_17-35-48.png

正常完成数据筛选和过滤。

image2022-10-17_17-38-8.png

然后单击左向箭头,重新将过滤面板隐藏起来。达到预期效果。

image2022-10-17_17-38-21.png