动态显示隐藏

在数智大屏中，如果要实现同个区域动态展示不同形式的内容，往往需要通过配置动态显示隐藏来实现。

本文通过一个简单案例，来讲解如何通过配置动态显示隐藏实现同区域动态展示不同内容的效果。

实现效果

【选项卡】切换选项时，下方区域显示不同的内容；

本例中选中【占比】时，下方显示【年龄人数分布】图表；选中【详情】时，下方显示【年龄人数详情】表格。

实现过程

1. 配置选项卡、图表和轮播表格组件；
2. 将图表和表格拖拽至选项卡下方区域，布局完成；

3. 默认先显示图表，所以在轮播表格图层设置【隐藏】

4. 在【选项卡】上配置交互：
   • 选中【占比】时，显示图表隐藏表格：设置条件（id=1时），显示图表，隐藏表格；
   • 选中【详情】时，隐藏图表显示表格：设置条件（id=2时），隐藏图表，显示表格；

5. 预览效果：