数据过滤器使用 2024.5+

数据过滤器一般用于组件数据的处理。

单一组件使用

该案例演示了如何使用数据过滤器改变柱状图组件的轴标签。

步骤一： 添加柱状图组件

1. 新建大屏，从左侧边栏图表中拖拽柱状图组件到设计器中。

2. 在右侧边栏的数据页签中，点击编辑数据查看其默认数据。

   

步骤二： 添加数据过滤器

1. 在右侧边栏的数据页签中点击新增数据过滤按钮。

   

2. 过滤器中输入处理数据的代码。

   

   data[0].x = '数据过滤器修改';
   return data;

步骤三： 查看效果

进入预览页，查看数据过滤器修改数据效果。

与其他组件联动

该案例演示了按钮组如何通过修改变量值来改变柱状图组件的轴标签。

步骤一： 变量池中添加变量

1. 新建大屏，在右侧边栏中点击编辑变量按钮。

   

2. 在变量池中点击+添加一个变量，取名为a。

   

步骤二： 按钮组绑定变量

从左侧边栏文字页签中拖拽按钮组组件到设计器中，在右侧边栏交互页签下将切换按钮组事件勾选启用，字段设置为text，绑定到变量设置为a。

步骤三： 柱状图获取变量

1. 从左侧边栏图表中拖拽柱状图组件到设计器中。

2. 在右侧边栏的数据页签中点击新增数据过滤按钮，并输入处理数据的代码。

   

   data[0].x = HETU.getInteractVar('a');
   return data;

3. 右侧边栏切换至交互页签，数据响应里变量处选择a。

   

步骤四： 查看效果

进入预览页，发现按钮组切换时第一项数据的轴标签跟随按钮名发生了变化。