前言 Preface

飞搭低代码平台（FEIDA，以下简称“飞搭”）是基于低代码理念打造的融合 aPaaS 平台，助力企业快速搭建业务应用。作为 HZERO 生态的重要组成部分，致力于充分融合 HZERO 的各平台能力，提供企业用户在线化灵活搭建业务应用的能力，支撑企业普惠化（低门槛、高协作）、敏态化（高效率）和低成本化地快速响应市场变化，加速复杂业务场景落地。

概要介绍 Preface

可视化图表组件在数据分析和展示方面扮演着重要的角色。通过将数据可视化，用户可以更加直观地了解数据的含义和趋势。现在，飞搭已经新增可视化图表组件，并将其与报表平台的能力相结合。这意味着飞搭页面可以嵌入更多种多样的图表组件。

本文以搭建销售管理场景的销售管理报表页面为例，介绍如何使用飞搭可视化图表组件的能力，轻松构建出具有可视化效果的报表页面。主要包括以下几个方面：

● 页面使用可视化图表组件配置效果的展示

● 飞搭页面设计器新建可视化图表组件与属性样式的配置

● 数据集的创建与元数据的维护，仪表板的设计与使用

● 可视化图表组件与其他飞搭组件组合使用进行报表页面的设计

一、页面使用可视化图表组件配置效果展示

根据销售管理报表的业务需求，我们在设计销售管理报表页面时需要使用以下图表组件：

01. 指标卡

快速展示最多发货物料和最大订单额数量，以便对业务情况进行快速了解。指标卡的功能是以简洁明了的方式展示关键指标，方便用户快速获取信息。

02. 饼图

显示客户订单量的占比情况，以便分析不同客户的订单贡献度。饼图的功能是直观地展示各个部分在整体中的比例关系，帮助用户快速理解数据分布。

03. 漏斗图

直观呈现发货物料数量的情况，以便分析物料发货的流程和效率。漏斗图的功能是展示数据在不同阶段的变化情况，帮助用户识别瓶颈和改进点。

04. 分组柱状图

用于对比部门订单量和发运量的情况，以便分析各个部门的业绩表现，和展示不同物料的发货情况，以便分析物料的销售情况和需求趋势。分组柱状图的功能是直观地展示不同组别之间的比较关系，帮助用户发现差异和趋势。

通过与栅格容器组件和图文展示组件的搭配使用，最终销售管理报表页面展示如下图：

二、设计器新建与配置可视化图表组件概要介绍

进入飞搭设计器，选择可视化图表组件后拖入画布区域，在组件的属性面板点击<配置数据源及样式>，选择已上线并设计完成的仪表板作为数据源，即可在设计器内显示可视化图表的样式。

此外，我们还可以通过调整组件的样式和属性来进一步优化页面的外观和功能。例如，属性面板内可以配置组件根据条件显示或隐藏、组件名称的显示隐藏等属性，以及组件的标题字号、组件的宽度和高度、边框边距等样式属性。

转存失败，建议直接上传图片文件

三、数据集与仪表板的使用与设计

数据集是仪表板中图表组件的数据来源，目前已支持将 aPaaS 业务对象作为数据集的数据来源进行使用。在销售管理场景下，以设计一个客户订单量占比饼图为例：

01. 新建数据集

我们首先要新建类型为业务对象（销售管理领域内销售订单头表）的数据集，并配置该数据集内对应的元数据。

02. 新建元数据

数据集新建成功后，需要进行元数据的新建，输入列名与业务对象的字段编码保持一致，从而使业务对象字段与数据集字段形成映射关系。同时，需要配置元数据的序号、标题、数据类型、精度，并选择将该字段作为元数据的维度或指标字段进行使用。

03. 新建和设计仪表板

完成数据集的配置后，打开仪表板设计菜单并开始新建和设计仪表板。打开仪表板设计器后，需要选择绑定到图表组件的数据集为销售订单，在图表组件设计器内选择要使用的组件类型为饼图；接下来，从数据集拖入维度和指标字段，并配置图表组件的样式。完成配置并保存设计后，只需点击<上线>，即可在飞搭设计器内选择使用此组件。

四、可视化图表与其他飞搭组件的组合使用

在飞搭设计器内，可视化图表组件可以与其他类型的组件结合使用，以构建更美观的页面。例如，在销售报表页面的搭建过程中，将可视化图表组件与栅格容器组件相结合，将不同类型的图表组件嵌入到栅格容器中不同比例与大小的单元格内，以使报表页面的布局更加合理。在设计和构建页面时，通过充分利用设计器的功能和组件库，能创造出更加美观、实用和易于使用的页面。