华为云首页用户手册

APPCUBE-什么是高级页面:如何快速创建一个高级页面

时间：2023-11-01 16:19:14

APPCUBE

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

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

新建高级页面。
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                    ]                }            ]        }    }]}