华为云首页用户手册

ASTRO轻应用 ASTROZERO-什么是高级页面:如何快速创建一个高级页面

时间：2024-04-22 15:51:09

ASTRO轻应用 ASTROZERO 高级页面

如何快速创建一个高级页面

以构建包含基本柱图组件的高级页面为例，向您介绍如何快速搭建高级页面。

新建高级页面。
1. 参考如何登录新版应用设计器中操作，登录新版应用设计器。
2. 在左侧导航栏中，选择“界面”。
3. 单击高级页面后的，设置标签和名称，单击“添加”。
  图8 添加高级页面
  
  在应用中首次创建高级页面时，才会显示“视图”选项。
搭建高级页面。
1. 在高级页面开发界面，单击，打开组件列表。
2. 从组件列表中，拖拽基本柱图组件到画布中，按需调整组件的位置和大小。
  图9 搭建高级页面

进行组件属性配置。

以修改组件的图表数据为例，向您介绍如何进行组件属性配置。

选中基本柱图组件，在组件属性设置中，单击“数据”页签。

在桥接器实例中，选择“折柱图数据桥接器”，数据类型选择“静态数据”，并在静态数据中拷贝如下示例。

图10 组件数据设置

{
    "resCode": "0",
    "resMsg": "成功",
    "result": [{
        "order": {
            "dataX": [
                "01",
                "02",
                "03",
                "04",
                "05",
                "06",
                "07",
                "08",
                "09",
                "10",
                "11",
                "12",
                "13",
                "14",
                "15",
                "16",
                "17",
                "18",
                "19",
                "20",
                "21",
                "22",
                "23",
                "24"
            ],
            "dataValue": [{
                    "title": "入园人数",
                    "value": [
                        20,
                        30,
                        45,
                        20,
                        60,
                        80,
                        140,
                        200,
                        145,
                        40,
                        70,
                        60,
                        80,
                        16,
                        87,
                        77,
                        60,
                        20,
                        60,
                        80,
                        55,
                        68,
                        70,
                        24
                    ]
                },
                {
                    "title": null,
                    "value": [
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0
                    ]
                },
                {
                    "title": "出园人数",
                    "value": [
                        90,
                        60,
                        30,
                        20,
                        10,
                        110,
                        140,
                        87,
                        64,
                        45,
                        11,
                        24,
                        80,
                        14,
                        98,
                        35,
                        41,
                        14,
                        45,
                        80,
                        31,
                        22,
                        23,
                        24
                    ]
                }
            ]
        }
    }]
}