使用AstroCanvas开发告警处理情况统计移动端页面

应用场景

通过AstroCanvas开发一个告警处理情况移动端页面，开发完成后，用户可通过移动端访问该页面，查看告警处理情况。移动端页面构想，如图1所示。

图1 移动端页面效果

图1中移动端页面，由下列组件拼装而成。

表1 组件说明
组件	说明
水平基本柱图	分状态进行告警处理情况统计，状态分：待派单、已派单、处理中、已关闭
基本折线图	统计告警处理平均时长

开发移动端页面

登录AstroCanvas服务控制台，单击“进入首页”，进入AstroCanvas界面。
在项目列表页面，单击右上角的“+ 新建项目”。
选择“移动端”，输入项目名称为“Alarm”，单击“新建”。

图2 新建移动端项目
在项目中，单击“+新建页面”。
单击“新建空白页面”，输入页面标题“告警处理情况统计”，单击“新建”。

设置水平基本柱图组件。

在左侧全部组件中，拖拽“水平基本柱图”到页面开发操作区域，即画布区域。
图3 拖拽水平基本柱图组件

选择水平基本柱图组件，单击组件上方的

，配置数据源，完成后单击“保存”。

“数据类型”选择“静态数据”，“输入数据”选择“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": "已关闭"
    }
]

选中水平基本柱图组件，单击组件上方的，“参考模板”为“蓝色渐变不排序”，并设置组件标题为“告警处理情况统计”。
图4 设置模板

图5 配置标题
选中水平基本柱图组件，单击组件上方的，打开“水平堆叠”开关，并将所有数据系列中的“数据标签”设置为“上”。
图6 打开水平堆叠开关
选中水平基本柱图组件，单击组件上方的，隐藏Y轴网格线。
图7 隐藏网格线

设置基本折线图组件。
1. 在左侧全部组件中，拖拽“基本折线图”组件到移动端页面开发操作区域，即画布区域。
  图8 拖拽基本折线图
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. 选中基本折线图组件，单击组件上方的，设置组件标题“内容”为“告警平均处理时长统计”。
  图9 设置组件标题
4. 选中基本折线图组件，单击组件上方的，打开Y轴轴线“显示”开关。
  图10 轴线显示
单击页面上方的，保存后单击，选择不同手机型号查看页面在移动端上的显示效果。

图11 查看预览效果