开发移动端页面

1. 登录华为云Astro大屏应用服务控制台，单击“进入首页”，进入华为云Astro大屏应用界面。
2. 在项目列表页面，单击右上角的“+ 新建项目”。
3. 选择“移动端”，输入项目名称为“Alarm”，单击“新建”。
   图2 新建移动端项目
   

4. 在项目中，单击“+新建页面”。
5. 单击“新建空白页面”，输入页面标题“告警处理情况统计”，单击“新建”。
6. 设置水平基本柱图组件。
   1. 在左侧全部组件中，拖拽“水平基本柱图”到页面开发操作区域，即画布区域。
      图3 拖拽水平基本柱图组件
      
   2. 选择水平基本柱图组件，单击组件上方的，配置数据源，完成后单击“保存”。

      “数据类型”选择“静态数据”，“输入数据”选择“Json模式”，输入如下示例数据，并单击，格式化数据。

      [{        "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. 选中水平基本柱图组件，单击组件上方的，“参考模板”为“蓝色渐变不排序”，并设置组件标题为“告警处理情况统计”。
      图4 选择蓝色渐变不排序模板
      
      图5 配置标题
      
   4. 选中水平基本柱图组件，单击组件上方的，打开“水平堆叠”开关，并将所有数据系列中的“数据标签”设置为“上”。
      图6 打开水平堆叠开关
      
      图7 将数据标签设置为上
      
   5. 选中水平基本柱图组件，单击组件上方的，隐藏Y轴网格线。
      图8 隐藏网格线
      

7. 设置基本折线图组件。
   1. 在左侧全部组件中，拖拽“基本折线图”组件到移动端页面开发操作区域，即画布区域。
      图9 拖拽基本折线图
      
   2. 选中基本折线图组件，单击组件上方的，设置组件数据源，完成后单击“保存”。

      “数据类型”选择“静态数据”，“输入数据”选择“Json模式”，输入如下示例数据，并单击，格式化数据。

      [{        "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. 选中基本折线图组件，单击组件上方的，设置组件标题“内容”为“告警平均处理时长统计”。
      图10 设置基本折线图组件标题
      
   4. 选中基本折线图组件，单击组件上方的，打开Y轴轴线“显示”开关。
      图11 轴线显示
      

8. 单击页面上方的，保存后单击，选择不同手机型号查看页面在移动端上的显示效果。
   图12 查看移动端效果