# 使用华为云Astro大屏应用开发告警处理情况统计移动端页面
#### 应用场景
通过华为云Astro大屏应用开发一个告警处理情况移动端页面，开发完成后，用户可通过移动端访问该页面，查看告警处理情况。移动端页面构想，如[图1]所示。
图1移动端页面效果   
![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001875961854.png)
[图1]中移动端页面，由下列组件拼装而成。
表1组件说明 
| 组件     | 说明                                |
|:---|:---|
| 水平基本柱图 | 分状态进行告警处理情况统计，状态分：待派单、已派单、处理中、已关闭 |
| 基本折线图  | 统计告警处理平均时长                        |
   
#### 开发移动端页面
1. 登录[华为云Astro大屏应用服务控制台](https://console.huaweicloud.com/astro-canvas)，单击"进入首页"，进入华为云Astro大屏应用界面。
2. 在项目列表页面，单击右上角的"+ 新建项目"。
3. 选择"移动端"，输入项目名称为"Alarm"，单击"新建"。 
   图2新建移动端项目   
   ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001875802010.png)
   
   
4. 在项目中，单击"+新建页面"。
5. 单击"新建空白页面"，输入页面标题"告警处理情况统计"，单击"新建"。
6. 设置水平基本柱图组件。 
   1. 在左侧全部组件中，拖拽"水平基本柱图"到页面开发操作区域，即画布区域。
      图3拖拽水平基本柱图组件   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149575392.png) 
   
   2. 选择水平基本柱图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112534904.png)，配置数据源，完成后单击"保存"。
      "数据类型"选择"静态数据"，"输入数据"选择"Json模式"，输入如下示例数据，并单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158656553.png)，格式化数据。
      ```
      [{
              "x": "10-01",
              "y": 311,
              "s": "待派单"
          },
          {
              "x": "10-02",
              "y": 465,
              "s": "待派单"
          },
          {
              "x": "10-03",
              "y": 927,
              "s": "待派单"
          },
          {
              "x": "10-04",
              "y": 630,
              "s": "待派单"
          },
          {
              "x": "10-05",
              "y": 65,
              "s": "待派单"
          },
          {
              "x": "10-06",
              "y": 800,
              "s": "待派单"
          },
          {
              "x": "10-07",
              "y": 247,
              "s": "待派单"
          },
          {
              "x": "10-08",
              "y": 530,
              "s": "待派单"
          },
          {
              "x": "10-01",
              "y": 311,
              "s": "已派单"
          },
          {
              "x": "10-02",
              "y": 465,
              "s": "已派单"
          },
          {
              "x": "10-03",
              "y": 345,
              "s": "已派单"
          },
          {
              "x": "10-04",
              "y": 630,
              "s": "已派单"
          },
          {
              "x": "10-05",
              "y": 65,
              "s": "已派单"
          },
          {
              "x": "10-06",
              "y": 800,
              "s": "已派单"
          },
          {
              "x": "10-07",
              "y": 247,
              "s": "已派单"
          },
          {
              "x": "10-08",
              "y": 530,
              "s": "已派单"
          },
          {
              "x": "10-01",
              "y": 311,
              "s": "处理中"
          },
          {
              "x": "10-02",
              "y": 465,
              "s": "处理中"
          },
          {
              "x": "10-03",
              "y": 927,
              "s": "处理中"
          },
          {
              "x": "10-04",
              "y": 630,
              "s": "处理中"
          },
          {
              "x": "10-05",
              "y": 1334,
              "s": "处理中"
          },
          {
              "x": "10-06",
              "y": 800,
              "s": "处理中"
          },
          {
              "x": "10-07",
              "y": 247,
              "s": "处理中"
          },
          {
              "x": "10-08",
              "y": 530,
              "s": "处理中"
          },
          {
              "x": "10-01",
              "y": 311,
              "s": "已关闭"
          },
          {
              "x": "10-02",
              "y": 465,
              "s": "已关闭"
          },
          {
              "x": "10-03",
              "y": 927,
              "s": "已关闭"
          },
          {
              "x": "10-04",
              "y": 630,
              "s": "已关闭"
          },
          {
              "x": "10-05",
              "y": 65,
              "s": "已关闭"
          },
          {
              "x": "10-06",
              "y": 800,
              "s": "已关闭"
          },
          {
              "x": "10-07",
              "y": 689,
              "s": "已关闭"
          },
          {
              "x": "10-08",
              "y": 530,
              "s": "已关闭"
          }
      ]
      ```
      
   
   3. 选中水平基本柱图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293797.png)，"参考模板"为"蓝色渐变不排序"，并设置组件标题为"告警处理情况统计"。
      图4选择蓝色渐变不排序模板   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001921721357.png)
      图5配置标题   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001875802018.png) 
   
   4. 选中水平基本柱图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293801.png)，打开"水平堆叠"开关，并将所有数据系列中的"数据标签"设置为"上"。
      图6打开水平堆叠开关   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001875802022.png)
      图7将数据标签设置为上   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149735608.png) 
   
   5. 选中水平基本柱图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112694676.png)，隐藏Y轴网格线。
      图8隐藏网格线   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001875802026.png) 
   
   
   
   
7. 设置基本折线图组件。 
   1. 在左侧全部组件中，拖拽"基本折线图"组件到移动端页面开发操作区域，即画布区域。
      图9拖拽基本折线图   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001921721373.png) 
   
   2. 选中基本折线图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112534904.png)，设置组件数据源，完成后单击"保存"。
      "数据类型"选择"静态数据"，"输入数据"选择"Json模式"，输入如下示例数据，并单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158656553.png)，格式化数据。
      ```
      [{
              "x": "12-29",
              "y": 0,
              "s": "平均处理时长"
          },
          {
              "x": "12-30",
              "y": 0,
              "s": "平均处理时长"
          },
          {
              "x": "12-31",
              "y": 0,
              "s": "平均处理时长"
          },
          {
              "x": "01-01",
              "y": 82,
              "s": "平均处理时长"
          },
          {
              "x": "01-02",
              "y": 78,
              "s": "平均处理时长"
          },
          {
              "x": "01-03",
              "y": 67,
              "s": "平均处理时长"
          },
          {
              "x": "01-04",
              "y": 43,
              "s": "平均处理时长"
          }
      ]
      ```
      
   
   3. 选中基本折线图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293797.png)，设置组件标题"内容"为"告警平均处理时长统计"。
      图10设置基本折线图组件标题   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001921721377.png) 
   
   4. 选中基本折线图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112694676.png)，打开Y轴轴线"显示"开关。
      图11轴线显示   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001875961890.png) 
   
   
   
   
8. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002123286424.png)，保存后单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158647057.png)，选择不同手机型号查看页面在移动端上的显示效果。
   
   图12查看移动端效果   
   ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001875961894.png)