当前位置：首页 > article >正文

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

article 2025/1/23 7:23:32

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

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

在 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）设置开放接口参数，单击“保存”。