# 页面组件：筛选组件-联动图表统计

来源快照：`result_data_new_260518.json`

- 来源 ID：`1965182651971496482`
- 模块：低代码平台e-builder
- 目录：专题学习 - 功能点专题 - 页面图表
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

********1.  场景说明 ********        

一般门户页面会有相对较多的数据图表，这些数据可能来自相同数据源或者不同数据源，用以展示分析数据。通常情况下我们想要迅速查找展示某些属性的数据时，就需要对这些数据进行筛选，比如，我们想查看某个具体日期下签订的、签约金额大于等于30万的采购合同和销售合同的相关数据。  


展示效果如下图：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707957934882867&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

********  
********

********2.  ******功****** 能简介********

上述场景可以通过筛选组件来实现。筛选组件通常用来筛选数据，通过添加1个或者1个以上筛选对象，设置筛选的字段来进行筛选数据。筛选字段与筛选对像对应，筛选对象为页面中的图表信息，筛选字段为筛选对象中的某个字段。对于列表、二维报表以及图表类的数据组件，则可以使用筛选组件，动态统计图表中的数据用于展示。展示方式通常为筛选或者高级搜索的形式。筛选组件具有以下四个特点：

1、筛选对象支持绑定不同的数据源；

2、一个筛选组件中可支持多个筛选字段；

3、筛选字段支持自定义分类筛选；

4、当页面已经存在某个数据源的图表后，新增相同数据源的其他图表后，该图表信息自动带入筛选对象中。

********  
********

********3\. 操作说明********

  


1\. 左侧拖入筛选组件，右侧设置详细属性，显示方式又筛选和高级搜索两种方式。  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707957934882911&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)  


  


2.如下筛选和高级搜索的前端展示样式。 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707962313736209&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


3\. 选择筛选对象，可以选择多个来自不同数据源图表。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707962445275275&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


4\. 筛选设置中添加筛选字段，可添加多个字段，也可以添加自定义分类。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707962348175646&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


5\. 如下添加多个筛选字段。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707979374223422&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


6.如下添加自定义字段，并设置条件参数。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157707996670795798&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
