华为云低代码AstroZero技巧教学4：花瓣图展示 给数据加点色彩

在数据分析的最终分析汇报阶段，往往采用多种图表进行相关数据的呈现。

其中花瓣图是一种直观而富有吸引力的数据可视化工具，它巧妙地通过花瓣的形状和布局展现多个数据集间的复杂关系，如包含与交集。

在 Astro Zero的高级页面设计中，我们就引入了这一呈现方式—玫瑰花饼图。其优势在于能够清晰展示超过传统图表处理能力的多个数据集，同时通过颜色、大小等属性传递额外信息。

花瓣图不仅辅助决策者快速把握数据要点，还促进团队间的数据沟通与理解。

本次技巧内容：

在Astro Zero的高级页面设计中将数据转化为花瓣图呈现

完成效果展示：

快来试试吧，让你的数据呈现更美观!

操作步骤：

1.登录并打开华为云低代码Astro Zero

点击文末“阅读原文”即可跳转Astro Zero官网”，如果你是新用户可点击下方文章链接了解基础的注册使用方法。

绘出「星辰大海」：华为云Astro轻应用新手指南-第一章

2.创建一个高级页面，并拖入玫瑰花饼图。

图1 创建高级页面并拖入饼图

3.选中玫瑰花饼图，在“数据”中查看该组件对应的数据格式。

 图2 查看数据格式

4.新建一个对象，并为对象添加字段和数据。

 图3 为对象添加字段

图4 为对象添加数据

5.创建读取对象数据的脚本。

（1） 创建一个空白脚本

图5 创建脚本getDataInfo

（2） 在脚本编辑器中，输入如下代码实例

// Here's your code.

import * as db from 'db';

@useObject(['out__productList__CST'])

@action.object({ type: 'method' })

export class SearchScript {

    @action.method({ input: 'ParamsInput', output: 'ParamsOutput' })

    public run(): Object[] {

        let queryData = this.doSearchScript();

        let result: Array<Object> = [];

        result.push({

            dataValue: [{

                name: "订单数",

                value: queryData

            }]

        });

        console.log("result", result)

        return result;

    }

    private doSearchScript(): Object[] {

        let sql = "select out__productName__CST as name,out__productNumber__CST as value"

            + " from out__productList__CST"

        let query = db.sql().exec(sql)

        return query;

    }

}

（3） 单击保存脚本，保存成功后单击激活脚本。

6.新建开放接口。

（1）在应用设计器中，选择“集成”，单击开放接口后的“+”。

（2）设置开放接口参数，单击“保存”。

 图6 设置开放接口参数

7.返回高级页面，选中“玫瑰花饼图”，在“数据”页签，设置数据桥接器。

其中，“URL”设置为“6（上一步）”中开放接口的URL。

接口创建后，可在接口详情页查看。

图7 设置组件数据

8.在玫瑰花饼图组件上，单击右键选择“高级设置”，设置组件标题，字体大小等。

 图8 设置组件标题

9.单击保存高级页面，保存成功后单击发布高级页面。

10. 发布成功后，单击预览效果。

美化数据，点亮观点

在AstroZero，我们相信数据不仅仅是数字和图表，它还可以是艺术，是故事，是情感的表达。通过玫瑰花饼图，我们让数据变得不再冰冷，而是充满生命力和色彩。加入AstroZero，用全新的角度看待数据，一起创造更多可能！

如果对此技巧教学有疑问或者在华为云低代码Astro的使用中有其他的问题和建议，可以扫描下方二维码添加我们低代码小助手的微信。更有多种丰富活动等你参与。

下期将为各位开发者带来《华为云低代码AstroZero技巧教学5：图片展示 让你的表格内容更丰富》

阅读原文