开发大屏项目

前提条件

已参考前提条件中操作，申请百度地图密钥，导入告警数据。

开发大屏页面

1. 使用华为账号，登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。
2. 在左侧导航栏上方，单击，选择服务实例所在的区域项目。
3. 单击，在查找框中搜索“Astro轻应用”，单击查找到的结果，进入AstroZero服务控制台。
4. 在AstroZero服务控制台，单击“进入首页”，进入AstroZero新版应用开发页面。
5. 在主页中，单击“业务大屏”中的，即可进入新建项目页面。
   图1 进入新建项目页面
   

6. 根据需要选择项目类型，这里选择“大屏&PC端项目”，输入不重复的项目名称，例如“Alarm”，单击“新建”，进入项目开发界面。
7. 在大屏&PC端项目页面中，单击“+ 新建页面”，选择“新建空白页面”。
8. 输入页面标题“告警监控大屏”，单击“新建”。
   图2 创建页面
   

9. 在页面上方单击，根据实际需要设置背景图片。
   图3 设置背景图片
   
   图4 选择背景图
   

10. 从全部组件中，分别拖拽文本编辑、基本柱图、地图、基本饼图和两个区域图到画布区域，布局如图6所示。
    图5 拖拽文本编辑组件到画布
    
    图6 组件布局
    

11. 在页面右上角，根据需要选择所需的主题（本示例设置为经典原始，即单击“清除主题”）。
    图7 设置页面主题
    

12. 配置文本编辑组件，设置“告警监控大屏”标题。
    1. 选中上方文本编辑组件，单击上方，设置文本内容为“告警监控大屏”，字体设置为“60”，字体颜色设置为“rgba(255, 255, 255, 1)”。
       图8 设置文本编辑组件
       
    2. 在段落设置中，设置标题对齐方式为“居中”。
       图9 设置对齐方式
       

13. 配置基本柱图组件样式，配置数据源。
    1. 选中基本柱图组件，在组件上方单击，配置组件数据源。
       图10 配置桥接器
       

       桥接器参数说明，如表1所示。

       表1 参数说明

       参数	说明
       数据配置	设置组件在页面呈现数据的来源类型，本示例请选择“桥接器预置”。 更多关于组件数据配置的介绍，请参见页面数据来源介绍。
       选择桥接器	调用的桥接器名称，从下拉框选择系统提供的预置桥接器“柱状图和折线图数据桥接器”。
       桥接器数据类型	桥接器的数据源类型，支持“静态数据”和“AstroZero API”。 本示例选择“AstroZero API”。
       URL	“桥接器数据类型”设置为“AstroZero API”时，该参数才会显示。 请配置为自定义接口URL“/service/hab__mock/1.0.1/WarnAmountPerStatus”，即表1中公共接口URL。 须知： 在拷贝复制参数取值样例时，请检查复制出来的数据是否准确，不能有多余空格。
       刷新周期	“数据源类型”设置为“桥接器预置”时，该参数才会显示。每隔多少秒调用一次后台接口，默认配置为“0”，表示只调用一次。 配置为“30”。
       共享数据	是否共享数据，“桥接器数据类型”设置为“AstroZero API”时，该参数才会显示。当项目里多个组件通过一个公共请求调用同一个接口的数据时，为了避免多次调接口，可以选择开启共享数据。 本示例不勾选。

    2. 选中基本柱图组件，在组件上方单击，设置模板为“蓝色渐变不排序”。
       图11 设置模板
       
    3. 选中基本柱图组件，在组件上方单击，将每个数据系列里“数据标签”设置为“上”，让数据显示在柱形图上方。
       图12 数据标签设置为上
       
    4. 打开“水平堆叠”与“横向柱条”效果。
       图13 设置堆叠显示
       
    5. 选中基本柱图组件，在组件上方单击，隐藏y轴网格线。
       图14 隐藏y轴网格线
       
    6. 选中基本柱图组件，在组件上方单击，设置组件标题内容为“告警处理情况统计”。
       图15 设置组件标题
       
       图16 设置后效果
       

14. 参考13，配置左下角区域图组件。
    1. 选中左下角区域图组件，在组件上方单击，配置组件数据源。
       数据源选择“桥接器预置 > 柱状图和折线图数据桥接器”，“桥接器数据类型”配置为“AstroZero API”，URL配置为“/service/hab__mock/1.0.1/WarnCostPerDay”（在拷贝复制参数取值样例时，请检查复制出来的数据是否准确，不能有多余空格）。

       图17 设置数据源
       
    2. 选中基本折线图组件，单击组件上方的，设置标题“内容”为“告警平均处理时长统计”。
       图18 设置标题
       
    3. 单击组件上方的，设置Y轴的轴线为“显示”。
       图19 显示轴线
       

15. 参考13，配置地图。
    1. 选中地图组件，在组件上方单击，配置组件数据源。

       配置“柱状图层数据/桥接器预置 > 地图柱状图层数据桥接器”实例，“桥接器数据类型”配置为“静态数据”，输入示例数据后，单击格式化数据。

       图20 配置桥接器数据
       

       {
           "resCode": "0",
           "resMsg": "成功",
           "result": {
               "name": "柱状图层数据",
               "data": [
                   {
                       "name": "北京",
                       "value": 3146
                   },
                   {
                       "name": "天津",
                       "value": 2641
                   },
                   {
                       "name": "河北",
                       "value": 2880
                   },
                   {
                       "name": "山西",
                       "value": 2357
                   },
                   {
                       "name": "内蒙古",
                       "value": 2810
                   },
                   {
                       "name": "辽宁",
                       "value": 2540
                   },
                   {
                       "name": "吉林",
                       "value": 2665
                   },
                   {
                       "name": "黑龙江",
                       "value": 2748
                   },
                   {
                       "name": "上海",
                       "value": 2372
                   },
                   {
                       "name": "江苏",
                       "value": 2613
                   },
                   {
                       "name": "浙江",
                       "value": 2554
                   },
                   {
                       "name": "安徽",
                       "value": 2427
                   },
                   {
                       "name": "福建",
                       "value": 2587
                   },
                   {
                       "name": "江西",
                       "value": 2501
                   },
                   {
                       "name": "山东",
                       "value": 2810
                   },
                   {
                       "name": "河南",
                       "value": 2773
                   },
                   {
                       "name": "湖北",
                       "value": 2814
                   },
                   {
                       "name": "湖南",
                       "value": 2384
                   },
                   {
                       "name": "广东",
                       "value": 3014
                   },
                   {
                       "name": "广西",
                       "value": 2232
                   },
                   {
                       "name": "海南",
                       "value": 2600
                   },
                   {
                       "name": "重庆",
                       "value": 3056
                   },
                   {
                       "name": "四川",
                       "value": 2439
                   },
                   {
                       "name": "贵州",
                       "value": 2609
                   },
                   {
                       "name": "云南",
                       "value": 2755
                   },
                   {
                       "name": "西藏",
                       "value": 2451
                   },
                   {
                       "name": "陕西",
                       "value": 2791
                   },
                   {
                       "name": "甘肃",
                       "value": 2817
                   },
                   {
                       "name": "青海",
                       "value": 2651
                   },
                   {
                       "name": "宁夏",
                       "value": 2639
                   },
                   {
                       "name": "新疆",
                       "value": 2690
                   },
                   {
                       "name": "台湾",
                       "value": 2479
                   },
                   {
                       "name": "香港",
                       "value": 2693
                   },
                   {
                       "name": "澳门",
                       "value": 3274
                   }
               ]
           }
       }

    2. 选中地图组件，在组件上方单击，将“柱状图层配置”中的“显示标注”设置为“显示”，标注字体颜色为“rgba(181, 26, 0, 1)”。
       图21 设置标注字体颜色
       

16. 参考13，配置基本饼图。
    1. 选中右上方基本饼图组件，在组件上方单击，配置组件数据源。
       数据源选择“桥接器预置 > 饼图数据桥接器”，“桥接器数据类型”配置为“AstroZero API”，URL配置为“/service/hab__mock/1.0.1/WarnAmountPerType”（在拷贝复制参数取值样例时，请检查复制出来的数据是否准确，不能有多余空格）。

       图22 设置基本饼图数据源
       
    2. 选中基本饼图组件，单击组件上方的，设置标题“内容”为“告警分类统计”，参考模板配置为“带标签”。
       图23 设置标题
       
       图24 设置参考模板为带标签
       
    3. 选中基本饼图组件，单击组件上方的，在统一配置中隐藏“系列名”。
       图25 隐藏“系列名”
       
    4. 选中基本饼图组件，单击组件上方的，隐藏图例。
       图26 关闭图例
       

17. 参考13，配置区域图。
    1. 选中右下方区域图组件，在组件上方单击，配置组件数据源。
       数据源选择“桥接器预置 > 柱状图和折线图数据桥接器”，“桥接器数据类型”配置为“AstroZero API”，URL配置为“/service/hab__mock/1.0.1/WarnAmountPerDay”（在拷贝复制参数取值样例时，请检查复制出来的数据是否准确，不能有多余空格）。

       图27 配置组件数据来源
       
    2. 选中区域图组件，单击组件上方的，设置标题“内容”为“告警数量趋势”。
       图28 设置标题内容
       
    3. 单击组件上方的，设置Y轴的轴线为“显示”。
       图29 设置Y轴的轴线为显示
       

18. 单击页面上方，保存后单击。
19. 打开“发布链接”开关，生成发布后的页面网址，记录页面成功发布网址。
20. 打开页面成功发布网址，检查发布效果是否符合预期。
    图30 查看发布效果