# 表单布局中放入图表组件进行信息展示

来源快照：`result_data_new_260518.json`

- 来源 ID：`1972862466016863778`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 表单专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**1.  ****编写目的  **

表单布局中不仅可以放入各类字段，也能放入图表、数字面板等展示类组件，并且这些组件能与表单内的字段进行对应，从而过滤展示出关键数据信息。例如在项目管理场景中，项目信息表中放入数字面板与折线图表，这些图表的数据源取自项目经费表、合同收款表等其他表单，并且筛选过滤出只与本项目相关的信息。

展示效果如下图所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690636337487884&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.  ****思路分析**  

对于上述场景，首先我们可以正常搭建表单，放入关键的字段信息；之后依据需求再放入对应的各类图表组件（例如折线图、数字面板、柱状图等）；然后为这些组件配置数据源，并且在筛选条件中可以选择与“变量字段”，即当前表单里的字段作比较，从而实现数据的过滤； 最后再对整体的布局样式进行美化，如上图中使用的流式布局，可以利用“框架”组件使用户能够折叠/展开各类图表。

** **

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

**3.1****搭建项目信息表**

本次搭建的项目信息表，该表单的表单布局里，主要有两部分组成：

一部分是常规的字段，用户可依据实际场景放入，例如项目名称、项目状态等字段信息：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690636422111264&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)

另一部分是图表组件，本场景中我们选用“数字面板”、“折线图”这两个常用的图表组件进行演示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690636337487934&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.2****搭建其他表单，配置图表数据源**

在大型的项目中，单靠一张项目信息表是很难管理的，围绕着项目信息，还会衍生出项目合同、项目经费、项目施工等诸多表单。

在3.1中，我们在项目信息表中放入了“数字面板”和“折线图”，希望能展示项目的经费支出信息以及合同金额信息。因此本场景中，我们就搭建“合同金额表”以及“经费支出表”进行演示。以“合同金额表”为例，我们放入关联e-builder字段关联“项目信息表”：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690640624803852&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.3节），该字段设置后可以隐藏：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690640624803884&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)

另一个“经费支出表”也进行类似的配置即可：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690640828072015&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.3****配置项目信息表中的图表组件**

在3.2节中，我们将项目信息表中的“数字面板”、“折线图”的数据源表单配置完成，此时可以给这两个图表进行数据源配置。选择对应的表单，设置字段信息、字段格式、汇总方式等信息：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690645011308547&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)

此时统计的是所有项目的合同金额，没有单独展示出该项目对应的金额信息，因此我们需要设置筛选条件：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690644961714238&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)

设置“项目名称（文本）”=变量字段“项目名称”，这里的变量字段就是本表单中的字段信息。由于目前只能相同类型的字段相对应，所以关联eb字段无法等于数据id，因此在3.2节其他表单中加入单行文本，承载项目名称。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690644997210196&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)

同样的，折线图也是选取数据源，之后配置过滤条件，如下图所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690649214738466&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.4****表单布局美化**

配置完成后，可以对图表组件的图标、折线图的颜色等进行配置，此外表单整体也可初始化套用模版，进行样式美化：

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690649281110073&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)

并且在流式布局中，可以使用框架组件（表格式布局暂无），将数字面板和折线图放在框架上半部分，这样用户可以折叠/展开图表，更方便查看信息，如下图所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157690653501317263&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)
