# 通过华为云Astro轻应用数据源将应用中的数据呈现在华为云Astro大屏应用 #### 应用场景 问卷是一组与产品、社会活动等有关的问题，或者说是一份为进行调查而编制的问题表格，又称调查表。调研人员借助该调查表可对产品使用过程或社会活动过程进行准确、具体的评估，并应用社会学统计方法对收集到的问卷进行详细的分析，获取所需要的调查资料。 本实践创建一个调查问卷，用于统计学生喜欢的课程，并使用华为云Astro大屏应用将问卷结果进行汇总展示。 #### 操作流程 将华为云Astro轻应用中的应用数据，展示在华为云Astro大屏应用的大屏页面中的操作流程，如[图1]所示。 图1将应用中的数据呈现在大屏页面中的操作流程 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149652165.png) #### 步骤一：在华为云Astro轻应用中创建调查问卷应用 在华为云Astro轻应用中创建一个空白应用，并根据业务需求完成应用的开发。本实践创建一个统计学生喜欢课程的调查问卷。 1. 登录[华为云官网](https://www.huaweicloud.com/)，在顶部导航栏右侧单击"控制台"，进入华为云控制台。 2. 在左侧导航栏上方，单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002123303778.png)，选择服务实例所在的区域项目。 3. 单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148049933.png)，在查找框中搜索"华为云Astro轻应用"，单击查找到的结果，进入华为云Astro轻应用服务控制台。 4. 在华为云Astro轻应用服务控制台的主页中，单击"进入首页"，进入应用开发页面。 5. 在"应用"中，单击"新建低代码应用"或单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002123462146.png)，进入新建低代码应用页面。 6. 在新建低代码应用页面，应用类型选择"标准应用"，单击"确定"。 7. 输入应用的标签和名称，单击"新建"。 图2新建调查问卷应用 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148014877.png) [表1]仅介绍本实践中使用到的参数，其他参数解释请参见[使用华为云Astro轻应用创建一个空白应用](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9009.html)。 表1新建应用参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。 | 调查问卷 | | 名称 | 新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加***命名空间***__。命名要求如下： - 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。 | Questionnaire | 8. 创建对象，用于存储问卷数据。 1. 在应用设计器的左侧导航栏中，选择"数据"，单击对象中的"+"。 2. 设置对象的名称和唯一标识，单击"确定"。 图3创建问卷调查对象 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148014941.png) 表2新建问卷调查对象参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 对象名称 | 新建对象的名称，创建后可修改。 取值范围：1\~80个字符。 | 问卷调查 | | 唯一标识 | 新建对象在系统中的标识，创建后不支持修改。命名要求如下： - 长度不能超过63个字符，包括前缀命名空间的长度。 标识前模糊掉的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母，数字和下划线组成，且不能以下划线结尾。 | QuestionnaireObject | 3. 在已创建的对象中，单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158662365.png)，进入对象详情页面。 图4选择编辑按钮 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002147934625.png) 4. 在"字段"页签，选中对象中预置的"名称"字段，将"显示名称"修改为"姓名"。 5. 单击"添加"，为对象添加课程字段。 图5添加课程字段 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112375984.png) 表3添加课程字段参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 显示名称 | 新建字段的名称，创建后可修改。 取值范围：1\~63个字符。 | 课程 | | 唯一标识 | 新建字段在系统中的标识，创建后不支持修改。命名要求如下： - 长度不能超过63个字符，包括前缀命名空间的长度。 - 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。 | Courses | | 字段类型 | 单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112251028.png)，在弹出的页面中，根据页面提供的参数解释，选择新建字段所属的类型。 | 文本 | | 数据长度 | 允许输入字段的长度。 | 64 | 6. 按照上述操作，为对象添加其他字段，如[表4]所示。 表4待添加字段 | 名称 | 唯一标识 | 数据类型 | |:---|:---|:---| | 年级 | grade | 文本 | | 期望开设的课程 | ExpectedCourses | 文本 | 9. 创建一个标准页面，用于收集问卷数据。 1. 在应用设计器的左侧导航栏中，选择"界面"，单击页面中的"+"。 2. 设置页面的标签和名称，单击"添加"。 图6创建调查问卷标准页面 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112216404.png) 表5标准页面参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1\~64个字符。 | 问卷调查 | | 名称 | 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： - 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 | Questionnaire | 3. 从"基本组件"中，拖拽1个输入框、2个下拉框和1个多行输入框组件到画布中，布局如[图7]。 图7标准页面布局 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112223488.png) 4. 选中输入框组件，修改组件的"标签"为"姓名"，并开启"必填"。 图8修改组件名称 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148032729.png) 5. 按照[9.d]中操作，修改其他组件的标签，效果如[图9]所示。 图9修改后效果 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002147954373.png) 10. 新建一个对象模型，供页面中的组件绑定。 1. 在标准页面底部，单击"模型视图"，从设计视图切换到模型视图。 2. 单击"新增模型"，输入模型名称（如问卷）、"来源"选择"对象"，单击"下一步"。 3. 选择[8]中创建的对象和添加的字段，单击"下一步"。 图10选择对象和字段 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113837404.png) 4. 直接单击"确定"，完成模型创建。 11. 返回设计视图页面关联模型，组件与模型中的字段绑定后，组件的属性随模型字段值的变化而变化。 1. 在标准页面底部，单击"设计视图"，从模型视图切换到设计视图。 2. 选中表单，在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002123304426.png)。 图11选中表单 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113944538.png) 3. 在"选择模型"页面中，选择[10]中创建的模型，单击"确定"。 图12为表单绑定模型 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113996728.png) 4. 在弹出的提示框中，单击"只绑定模型"。 图13选择只绑定模型 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149499441.png) 5. 选中姓名组件，在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002123304426.png)，为姓名组件绑定模型中的字段。 图14为姓名组件绑定模型字段 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149555241.png) 6. 按照上述操作，为课程、年级和期望开设的课程组件分别绑定模型中的字段。 图15为课程组件绑定模型中的字段 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149555165.png) 图16为年级组件绑定模型中的字段 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113996412.png) 图17为期望开设的课程组件框绑定模型中的字段 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113836600.png) 7. 选中课程组件，在"基本属性 \> 选项"中，设置课程下拉框的选项。 图18设置课程下拉框选项 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113638302.png) 8. 同样，选中年级组件，在"基本属性 \> 选项"中，设置年级下拉框的选项。 图19设置年级下拉框选项 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113638310.png) 12. 添加一个按钮组件，用于提交问卷。 1. 在基本组件中，拖拽一个按钮组件到画布中。 2. 选中按钮组件，修改组件的"显示名称"为"提交"。 图20修改按钮名称 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112412140.png) 3. 在"事件"页签中，单击"点击"后的"+"。 4. 在"内置动作"中，单击"提交表单"，选择对应的表单，单击"创建"。 图21为按钮添加动作 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148057397.png) 13. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158662953.png)，保存页面。 14. 单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002123463206.png)，进入预览页面，填报数据后单击"提交"，模拟问卷。 图22填写问卷 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149632865.png) 提交成功后，在[8]中创建对象的"数据"页签中，可查看到提交的数据。 图23查看问卷数据 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113994048.png) #### 步骤二：为应用添加开放接口 通过新建开放接口，将在应用中开发的对象等包装成自定义REST接口的形式，方便华为云Astro大屏应用调用。 **在华为云Astro大屏应用中创建华为云Astro轻应用API数据集时，才需要执行本步骤。如果您创建的是华为云Astro轻应用数据集，则不需要执行该步骤，请直接跳过。** 1. 新建一个开放接口。 1. 在应用设计器的左侧导航栏中，选择"集成"，单击开放接口中的"+"。 2. 设置接口的参数，单击"保存"。 图24新建开放接口 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113269212.png) 表6新建开放接口参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 操作名称 | 新建API接口的操作名称，命名要求如下： - 长度不能超过40个字符。 - 必须以英文字母开头，由英文字母，数字或单下划线组成，且不能以单下划线结尾。 | zeroapi | | 版本 | API接口的版本，格式为"x.y.z"。 | 1.0.0 | | URL | API接口路径， 固定以 /service/*{命名空间}__{应用名}* /*{版本}* 开头， 后面接API的具体路径。 | /zeroapi | | 类型 | 选择资源类型，只有服务编排类型的接口能够在服务编排中被调用，其他类型接口只能通过API的形式进行调用。 - 服务编排：定义URL调用的接口类型是服务编排。 - 脚本：定义URL调用的接口类型是脚本。 - 对象：定义URL是操作对象数据，包括对象数据的增删改查。 | 对象 | | 资源 | 根据类型选择需要绑定的资源，如脚本，服务编排或操作的对象名称。 | 选择[8]中创建的对象 | | 对象操作 | "类型"选择"对象"时，该参数才会显示。 - Insert Record：新增对象数据。 - Update or Insert Record：更新或者新增对象数据。 - Update By ID：按记录ID更新对象数据。 - Delete By ID：按记录ID删除对象数据。 - Query By ID：按记录ID查询对象数据。 - Update By Condition：按条件更新对象数据。 - Delete By Condition：按条件删除对象数据。 - Query By Condition：按条件查询对象数据。 | Query By Condition | | 方法 | API接口的HTTP方法。 - GET：请求服务器返回指定资源。 - PUT：请求服务器更新指定资源。 - POST：请求服务器新增资源或执行特殊操作。 - DELETE：请求服务器删除指定资源。 - PATCH：请求服务器更新资源的部分内容。当资源不存在时，PATCH可能会去创建一个新的资源。 | POST | 2. 为接口添加业务访问凭证。 1. 在华为云Astro轻应用服务控制台的主页中，单击"进入首页"，进入应用开发页面。 2. 单击页面左上角的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158545649.png)，选择"环境管理 \> 环境配置"，进入环境配置页面。 3. 在顶部菜单栏中，选择"维护"。 4. 在左侧导航栏中，选择"全局元素 \> 业务权限凭证"，单击"新建"。 5. 设置业务权限凭证的标签和名称，单击"保存并新建"。 图25新建业务权限凭证 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148708329.png) 6. 在左侧导航栏中，选择"全局元素 \> 自定义接口"，单击[1]中创建的接口。 图26单击接口的操作名称 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113996272.png) 7. 在业务权限凭证中，单击"编辑"，为接口添加[2.e]中创建的业务权限凭证。 图27为接口添加业务权限凭证 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148867849.png) #### 步骤三：获取域名、客户端ID和密码 获取华为云Astro轻应用环境域名、客户端ID（client_id）和客户端密码（client_secret），创建华为云Astro轻应用数据源时需要使用。 1. 获取华为云Astro轻应用环境的域名。 华为云Astro轻应用环境的域名即为应用的域名，在应用设计器的URL中即可获取。 图28华为云Astro轻应用环境的域名 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148126021.png) 2. 获取客户端ID和密码。 1. 在华为云Astro轻应用服务控制台的主页中，单击"进入首页"，进入应用开发页面。 2. 单击页面左上角的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158545649.png)，选择"环境管理 \> 环境配置"。 3. 在左侧导航栏中，选择"集成链接 \> OAuth"。 4. 单击"新建"，新建一个客户端模式的密钥。 图29新建认证密钥 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148168597.png) 5. 返回OAuth管理页面，单击已创建认证后的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148173249.png)。 图30下载密钥文件 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112494274.png) 6. 在弹出的页面，单击"确定"，将密钥下载到本地。 7. 在下载的密钥文件中，获取客户端ID（client_id）和客户端密码（client_secret）。 图31获取客户端ID和密钥 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113960746.png) #### 步骤四：新建华为云Astro轻应用数据源 创建一个华为云Astro轻应用数据源，用于对接华为云Astro轻应用环境。 1. 在华为云Astro轻应用服务控制台的左侧导航栏中，单击"Astro大屏应用"，进入华为云Astro大屏应用服务控制台。 2. 在已购买的实例中，单击"进入首页"，进入华为云Astro大屏应用界面。 3. 在顶部菜单栏中，选择"数据中心"，单击"新建数据源"。 4. 选择"AstroZero"，配置数据源参数。 图32新建数据源 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148260137.png) 表7新建数据源参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 数据源名称 | 新建数据源的名称，用于标识该数据源。长度为1\~32个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 | Zero对接Canvas数据源 | | 域名 | 华为云Astro大屏应用环境的域名，需要携带"https://"。 | [步骤三：获取域名、客户端ID和密码]中获取的域名 | | 客户端ID | 调用华为云Astro大屏应用接口前，需要配置"客户端模式"OAuth鉴权的客户端ID。 | [步骤三：获取域名、客户端ID和密码]中获取的client_id | | 客户端密码 | 调用华为云Astro大屏应用的接口前，需要配置"客户端模式"OAuth鉴权的客户端鉴权密钥。 | [步骤三：获取域名、客户端ID和密码]中获取的client_secret | 5. 单击"连接测试"，显示"连接成功"，表示数据源可以调通。 6. 单击"保存"，完成数据源的创建。 #### 步骤五：基于华为云Astro轻应用数据源新建数据集 创建一个华为云Astro轻应用API数据集，通过调用华为云Astro轻应用的接口获取数据。您还可以通过华为云Astro轻应用数据集获取数据。 1. 在数据中心的左侧导航栏中，选择"数据集 \> 全部"。 2. 在数据集管理页面，单击"新建数据集"。 3. 在新增数据集页面，设置数据集名称、选择数据类型、数据源和目录，单击"保存"。 图33新建数据集 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148819809.png) 表8新建数据集参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 数据集名称 | 新建数据集的名称，用于标识该数据集。长度为1\~60个字符，可包括中文、字母、数字及下划线。 | Zero对接Canvas数据集 | | 数据类型 | 选择数据集的数据类型。 | AstroZero API | | 数据源 | 选择数据集依赖的数据源。 | 选择[步骤四：新建华为云Astro轻应用数据源]中创建的数据源 | | 目录 | 设置数据集的存放目录。 | 预置分类 | 4. 配置数据集参数，单击"保存"。 图34设置数据集 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113836368.png) 表9修改数据集参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 应用 | 选择华为云Astro轻应用中具体的应用，即[步骤一：在华为云Astro轻应用中创建调查问卷应用]中创建的应用。 | 调查问卷 | | AstroZero API | 选择待调用的API接口。 | 选择[1]中创建的接口 | | Body \> 字段值 | 请求参数，根据实际需求进行设置。 | {} | #### 步骤六：创建大屏页面展示问卷数据 创建一个大屏页面，将华为云Astro轻应用中调查问卷反馈的数据呈现在大屏页面上。 1. 在华为云Astro大屏应用界面的项目列表中，单击"新建项目"，输入项目的名称，新建一个项目。 2. 在项目页面，单击"新建页面"。 3. 单击"新建空白页面"，输入页面标题（如最受学生欢迎课程统计大屏），单击"新建"。 图35输入页面标题 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002114255610.png) 4. 从组件中，拖拽1个水平堆叠柱图、1个基本柱图和1个基本饼图到画布中（布局如[图36]），并单击"取消当前主题卡片装饰"。 图36页面组件布局 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149775709.png) 图37取消当前主题卡片装饰 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002114098690.png) 5. 设置水平堆叠柱图。 1. 选中水平堆叠柱图，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112534904.png)，进入组件数据设置页面。 2. "数据类型"选择"数据集"，选择[步骤五：基于华为云Astro轻应用数据源新建数据集]中创建的数据集。 图38选择数据集 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148216881.png) 3. 单击"全局变量配置"下方的"+"，选择"转换器"，新建一个转换器，通过转换器将数据转换为可用的数据。 图39新建转换器 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113994504.png) 输入如下转换器代码，其中"*命名空间* __grade__CST"和"*命名空间__Courses__CST* "为[8]中添加年级和课程对象字段的唯一标识。 ``` const gradeObj = {}; const grade = '命名空间__grade__CST'; const courses = '命名空间__Courses__CST'; dataset.forEach((item) => { if (!gradeObj[item[grade]]) { gradeObj[item[grade]] = {};; } const gradeItem = gradeObj[item[grade]]; if (!gradeItem[item[courses]]) { gradeItem[item[courses]] = 0;; } gradeItem[item[courses]]++; }) const data = [] Object.entries(gradeObj).forEach(([grade, courses]) => { Object.entries(courses).forEach(([course, num]) => { data.push({ "年级": grade, "课程": course, "数量": num }) }) }) return data; ``` 如果您对接的是华为云Astro轻应用数据集，此处请输入如下转换器代码。其中"年级"和"课程"为[8]中添加对象字段的显示名称。 ``` const gradeObj = {}; const grade = '年级'; const courses = '课程'; dataset.forEach((item) => { if (!gradeObj[item[grade]]) { gradeObj[item[grade]] = {};; } const gradeItem = gradeObj[item[grade]]; if (!gradeItem[item[courses]]) { gradeItem[item[courses]] = 0;; } gradeItem[item[courses]]++; }) const data = [] Object.entries(gradeObj).forEach(([grade, courses]) => { Object.entries(courses).forEach(([course, num]) => { data.push({ "年级": grade, "课程": course, "数量": num }) }) }) return data; ``` 4. 在组件预览中，从"表格字段"中拖拽字段到"配置"中，并将"刷新周期"设置为"5秒"，实时读取并展示最新数据。 图40组件预览设置 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113836156.png) 5. 选中水平堆叠柱图，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293797.png)，将标题"内容"设置为"课程年级分布"。 图41修改图表标题 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002113247238.png) 6. 设置基本柱图。 1. 选中基本柱图，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112534904.png)。 2. "数据类型"选择"数据集"，选择[步骤五：基于华为云Astro轻应用数据源新建数据集]中创建的数据集。 3. 单击全局变量配置下方的"+"，选择"转换器"，新建一个转换器，通过转换器将数据转换为可用的数据。 图42新建课程数量转换器 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002114087256.png) 输入如下转换器代码，其中"*命名空间__Courses__CST* "为[8]中添加对象字段的唯一标识。 ``` var grade = '命名空间__Courses__CST'; var map = new Map() for (var i = 0; i < dataset.length; i++) { var temp = {} if (map.get(dataset[i][grade]) == null) { map.set(dataset[i][grade], 1) } else { map.set(dataset[i][grade], map.get(dataset[i][grade]) + 1) } } var result = [] map.forEach((value, key) => { var temp = {} temp.课程 = key temp.数量 = value result.push(temp) }) return result ``` 如果您对接的是华为云Astro轻应用数据集，此处请输入如下转换器代码。其中"课程"为[8]中添加对象字段的显示名称。 ``` var map = new Map() for (var i = 0; i < dataset.length; i++) { var temp = {} if (map.get(dataset[i].课程) == null) { map.set(dataset[i].课程, 1) } else { map.set(dataset[i].课程, map.get(dataset[i].课程) + 1) } } var result = [] map.forEach((value, key) => { var temp = {} temp.课程 = key temp.数量 = value result.push(temp) }) return result ``` 4. 在组件预览中，从"表格字段"中拖拽字段到"配置"中，并将"刷新周期"设置为"5秒"，实时读取并展示最新数据。 图43基本柱图组件预览设置 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149554493.png) 5. 选中基本柱图，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293797.png)，将标题"内容"设置为"课程数量统计"。 图44修改基本柱图图表标题 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148366825.png) 7. 设置基本饼图。 1. 选中基本饼图，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112534904.png)。 2. "数据类型"选择"数据集"，选择[步骤五：基于华为云Astro轻应用数据源新建数据集]中创建的数据集。 3. 单击全局变量配置下方的"+"，选择"转换器"，选择[6.c]中创建的转换器。 4. 在组件预览中，从"表格字段"中拖拽字段到"配置"中，并将"刷新周期"设置为"5秒"，实时读取并展示最新数据。 图45基本饼图组件预览设置 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149634953.png) 5. 选中基本饼图，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293797.png)，将标题"内容"设置为"课程占比"。 图46修改标题为课程占比 ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148536605.png) 8. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002123286424.png)，保存后单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158647057.png)，预览效果。