[]
        
在线Demo 免费试用
(Showing Draft Content)

动态控制组件隐藏/显示

1. 概述

1.1 功能概述

一张仪表板通常承载的信息量非常庞大,包括一些汇总数据也会有一些明细数据。有时用户只想显示统计结果和一些关键KPI,而将明细报表隐藏起来,在需要时通过单击弹出,查看完后再隐藏。从而不影响整个大屏的展示。类似的场景,比如一个大屏中有大量的筛选器,我们可以通过点击调出筛选器,完成筛选后将其隐藏起来,这样会使大屏看起来更加简洁,更利于展示有效信息。具体效果如下图所示。

动态控制组件隐藏或显示

2. 操作步骤

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

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

    PixPin_2025-06-19_17-35-41

  2. 开启组件重叠功能。

    PixPin_2025-06-19_17-38-01

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

    PixPin_2025-06-19_17-39-51

  4. 给容器中添加需要的过滤器。

    PixPin_2025-06-19_17-41-51

  5. 设置动态显示和隐藏效果。

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

    PixPin_2025-06-19_17-48-54

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

    PixPin_2025-06-19_17-42-45

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

    PixPin_2025-06-19_17-45-19

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

    PixPin_2025-06-19_17-50-27

  6. 成果展示: 预览仪表板查看效果

    1)在预览界面,筛选器过滤面板默认是隐藏的,因为我们为其设置了不可见。

    PixPin_2025-06-19_17-51-17

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

    PixPin_2025-06-19_17-53-03

    3)可以使用过滤面板正常完成数据筛选和过滤。单击向左箭头,即可隐藏过滤面板。达到预期效果。

    PixPin_2025-06-19_17-53-52

    4)单击向左箭头后的效果。

    PixPin_2025-06-19_17-54-30