教程:如何有序展示基本柱状图组件
想要让基本柱状图组件中的柱状图一个一个有序地显示出来,其实并不难。接下来,我们将详细解释整个过程。
一、预览效果
(预览效果图)
二、解决逻辑
基于已有的柱状图组件,我们再添加一个“滚动选项卡”和一个“多选选项卡”组件。通过“滚动选项卡”的自动轮播功能,控制“多选选项卡”的选中状态。当“多选选项卡”发出回调时,“基本柱状图”组件会接收这个回调,并逐一筛选出对应的数据,从而实现柱状图的逐条显示。简而言之,就是通过“滚动选项卡”控制“多选选项卡”,再由“多选选项卡”控制“基本柱状图”。
三、实操教程
在界面上添加“柱状图”、“滚动选项卡”和“多选选项卡”组件。这些组件在画布中如果不需要显示完整,可以调整位置至画布外部。
接着,在“滚动选项卡”中填入或接入需要展示的数据。以本例为例,我们将展示6个柱状图,因此需要设置6组数据。
数据示例(可直接复制):
在样式设置中,将默认的选中状态改为第一个数据。
别忘了开启“滚动选项卡”的自动轮播功能哦~
确保“多选选项卡”的数据与“滚动选项卡”的数据保持一致。
在回调设置中,发出信号以控制柱状图的显示。字段值对应数据中的数值字段,给发出的回调信号设置一个易于识别的名称。
对于“柱状图”组件的数据处理,要确保y轴值为0,并设置好对应的数据组数量(即空柱状的位置)。
写上相应的过滤器,接收回调字段,使柱状图的显示值与选项卡中的数据一一对应。
完成以上配置后,效果如下:(实际效果图)
您可以点击此处获取demo版本进行进一步体验。
EasyV数字孪生
易知微数字孪生世界
若您需要更多案例详情,请前往案例中心进行查看,包含智慧水利、智慧城市、智慧工厂、智慧教育等各领域的应用案例。