# 如何以卡片的形式展示电脑主板销售情况

来源快照：`result_data_new_260518.json`

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

## 正文

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

报表作为低代码平台中一项重要的功能，其可以将数据信息以各式各样的效果呈现，从而提高数据的可视化程度，帮助用户快速获取各类信息。如以卡片的形式展示了某平台电脑主板的销售情况，每张卡片对应一个主板品牌的信息。卡片按照从左到右、从上到下的顺序依次显示。相比于用表格展示数据，卡片可以更方便地进行排版，打印等场景

  


报表电脑主板信息展示效果如下：

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157706446131560488&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\. 操作说明**

****1.****搭建卡片分栏报表：**** 选择数据集，拖入相应的字段。为了展示卡片化效果，我们将报表内的所有字段单元格的左父格都设置成“版本编号”单元格E3（图一），E3不设置父格，扩展方向选择“横向扩展”，条码设置为"二维码"（图二），这样每一条信息都能单独依据“版本编码”进行展示：

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157706450457403397&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=1157706450525249565&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=1157706450611961902&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=1157706459083571252&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条数据显示，并且每个卡片数据之间存在一定的间距，我们依次讲解下如何设置间距以及然后正确填写分栏触发列数

  


**2.1 卡片间距设置**

**  
**

因为我们的卡片本身设置的扩展方向是纵向扩展，所以我们需要设置卡片列之间的间距，在数据的右侧合并单元格并设置单元格的左父格、扩展方向

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157706463270371333&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.2分栏触发列数**

  


分栏触发列数为数据列数加上间隔列数，如下图卡片数据是3列，间隔列数为1列，所以一个完整的卡片数据为4列，如果我们想每行展示3条数据，可以设置为12列，每行展示两条数据可以设置为8列

  


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