使用AstroCanvas开发人员来访统计大屏页面

场景描述

人员来访统计大屏用于展示园区中人员相关信息，例如人员类型，人员流量及在园人数等。大屏页面构想，如图1所示。

图1 大屏页面效果

图1中大屏页面由下列组件拼装而成，组件介绍顺序为从上到下、从左到右。

表1 组件说明
组件	说明
文本编辑	文本编辑组件，用于展示标题，例如人员来访统计。
水平基本柱图	统计当前人员类型，如总公司员工、合作员工、访客人员、安防人员、保洁人员。
基本柱图	统计入园和出园人数。
区域图	统计昨日在园人数。

开发大屏页面

登录AstroCanvas服务控制台，单击“进入首页”，进入AstroCanvas界面。
选择大屏&PC端项目，输入项目名称为“统计”，单击“新建”。

图2 新建项目
在大屏&PC端项目中，单击“+ 新建页面”，选择“新建空白页面”。
输入页面标题“人员来访统计”，单击“新建”。
页面标题的长度为1~100个字符。如果页面默认大小和您的显示分辨率或目标分辨率不符，请自行调整页面分辨率及组件布局以达到最佳显示效果
在页面上方单击，根据实际需要设置背景图片。

图3 设置背景图片

图4 选择背景图
从全部组件中，分别拖拽文本编辑、水平基本柱图、基本柱图、和区域图到画布区域，布局如图6所示。

图5 拖拽文本编辑组件到画布

 图6 组件布局
在页面右上角，根据需要选择所需的主题（本示例设置为经典原始，即单击“取消当前主题卡片装饰”）。
配置文本编辑组件。
1. 选中上方文本编辑组件，单击上方，设置文本内容为“人员来访统计”，字体设置为“60”。
  图7 设置文本编辑标题
2. 在段落设置中，设置标题对齐方式为“居中”。
  图8 设置标题对齐方式
配置水平基本柱图组件。
1. 选中最上方的水平基本柱图组件，在组件上方单击，配置组件数据，单击“保存”。
  “数据类型”选择“静态数据”，输入如下示例数据，并单击，格式化数据。
```
[{
        "x": "人员统计",
        "y": 153,
        "s": "总公司员工"
    },
    {
        "x": "人员统计",
        "y": 80,
        "s": "合作人员"
    },
    {
        "x": "人员统计",
        "y": 63,
        "s": "访客人员"
    },
    {
        "x": "人员统计",
        "y": 124,
        "s": "安防人员"
    },
    {
        "x": "人员统计",
        "y": 56,
        "s": "保洁人员"
    }
]
```
2. 选中水平基本柱图组件，在组件上方单击，设置模板为“蓝色渐变不排序”。
  图9 设置模板
3. 选中水平基本柱图组件，在组件上方单击，将所有数据系列中的“数据标签”设置为“上”，让数据显示在柱形图上方。
  图10 数据显示在柱形图上方
4. 打开水平堆叠效果。
  图11 打开水平堆叠
5. 选中水平基本柱图组件，在组件上方单击，隐藏x轴，并隐藏y轴网格线。
  图12 隐藏x轴
  
  图13 隐藏y轴网格线
6. 选中水平基本柱图组件，在组件上方单击，设置组件标题内容为“当前人员类型统计”。
  图14 设置组件标题

参考9，配置左下角基本柱图。

选中左下角的基本柱图组件，在组件上方单击

，配置组件数据，单击“保存”。

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

[{
        "x": "01",
        "y": 20,
        "s": "入园人数"
    },
    {
        "x": "02",
        "y": 30,
        "s": "入园人数"
    },
    {
        "x": "03",
        "y": 45,
        "s": "入园人数"
    },
    {
        "x": "04",
        "y": 20,
        "s": "入园人数"
    },
    {
        "x": "05",
        "y": 60,
        "s": "入园人数"
    },
    {
        "x": "06",
        "y": 80,
        "s": "入园人数"
    },
    {
        "x": "07",
        "y": 140,
        "s": "入园人数"
    },
    {
        "x": "08",
        "y": 200,
        "s": "入园人数"
    },
    {
        "x": "09",
        "y": 145,
        "s": "入园人数"
    },
    {
        "x": "10",
        "y": 40,
        "s": "入园人数"
    },
    {
        "x": "11",
        "y": 70,
        "s": "入园人数"
    },
    {
        "x": "12",
        "y": 60,
        "s": "入园人数"
    },
    {
        "x": "13",
        "y": 80,
        "s": "入园人数"
    },
    {
        "x": "14",
        "y": 16,
        "s": "入园人数"
    },
    {
        "x": "15",
        "y": 87,
        "s": "入园人数"
    },
    {
        "x": "16",
        "y": 77,
        "s": "入园人数"
    },
    {
        "x": "17",
        "y": 60,
        "s": "入园人数"
    },
    {
        "x": "18",
        "y": 20,
        "s": "入园人数"
    },
    {
        "x": "19",
        "y": 60,
        "s": "入园人数"
    },
    {
        "x": "20",
        "y": 80,
        "s": "入园人数"
    },
    {
        "x": "21",
        "y": 55,
        "s": "入园人数"
    },
    {
        "x": "22",
        "y": 68,
        "s": "入园人数"
    },
    {
        "x": "23",
        "y": 70,
        "s": "入园人数"
    },
    {
        "x": "24",
        "y": 24,
        "s": "入园人数"
    },
    {
        "x": "01",
        "y": 90,
        "s": "出园人数"
    },
    {
        "x": "02",
        "y": 60,
        "s": "出园人数"
    },
    {
        "x": "03",
        "y": 30,
        "s": "出园人数"
    },
    {
        "x": "04",
        "y": 20,
        "s": "出园人数"
    },
    {
        "x": "05",
        "y": 10,
        "s": "出园人数"
    },
    {
        "x": "06",
        "y": 110,
        "s": "出园人数"
    },
    {
        "x": "07",
        "y": 140,
        "s": "出园人数"
    },
    {
        "x": "08",
        "y": 87,
        "s": "出园人数"
    },
    {
        "x": "09",
        "y": 64,
        "s": "出园人数"
    },
    {
        "x": "10",
        "y": 45,
        "s": "出园人数"
    },
    {
        "x": "11",
        "y": 11,
        "s": "出园人数"
    },
    {
        "x": "12",
        "y": 24,
        "s": "出园人数"
    },
    {
        "x": "13",
        "y": 80,
        "s": "出园人数"
    },
    {
        "x": "14",
        "y": 14,
        "s": "出园人数"
    },
    {
        "x": "15",
        "y": 98,
        "s": "出园人数"
    },
    {
        "x": "16",
        "y": 35,
        "s": "出园人数"
    },
    {
        "x": "17",
        "y": 41,
        "s": "出园人数"
    },
    {
        "x": "18",
        "y": 14,
        "s": "出园人数"
    },
    {
        "x": "19",
        "y": 45,
        "s": "出园人数"
    },
    {
        "x": "20",
        "y": 80,
        "s": "出园人数"
    },
    {
        "x": "21",
        "y": 31,
        "s": "出园人数"
    },
    {
        "x": "22",
        "y": 22,
        "s": "出园人数"
    },
    {
        "x": "23",
        "y": 23,
        "s": "出园人数"
    },
    {
        "x": "24",
        "y": 24,
        "s": "出园人数"
    }
]

选中基本柱图组件，单击组件上方的，在统一配置中将数据系列中柱条宽度设置为8。
图15 设置柱条宽度为8
选中基本柱图组件，单击组件上方的，显示x轴网格线，显示y轴轴线，隐藏y轴网格线。
图16 显示x轴网格线

图17 显示y轴轴线、隐藏网格线
选中基本柱图组件，单击组件上方的，设置标题“内容”为“人员流程统计人/时”。
图18 设置标题

参考9，配置区域图。

选择右下方的区域图组件，在组件上方单击

，配置组件数据。

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

[{
        "x": "01",
        "y": 20,
        "s": "在园人数"
    },
    {
        "x": "02",
        "y": 30,
        "s": "在园人数"
    },
    {
        "x": "03",
        "y": 45,
        "s": "在园人数"
    },
    {
        "x": "04",
        "y": 20,
        "s": "在园人数"
    },
    {
        "x": "05",
        "y": 60,
        "s": "在园人数"
    },
    {
        "x": "06",
        "y": 80,
        "s": "在园人数"
    },
    {
        "x": "07",
        "y": 140,
        "s": "在园人数"
    },
    {
        "x": "08",
        "y": 200,
        "s": "在园人数"
    },
    {
        "x": "09",
        "y": 145,
        "s": "在园人数"
    },
    {
        "x": "10",
        "y": 40,
        "s": "在园人数"
    },
    {
        "x": "11",
        "y": 70,
        "s": "在园人数"
    },
    {
        "x": "12",
        "y": 60,
        "s": "在园人数"
    },
    {
        "x": "13",
        "y": 80,
        "s": "在园人数"
    },
    {
        "x": "14",
        "y": 16,
        "s": "在园人数"
    },
    {
        "x": "15",
        "y": 87,
        "s": "在园人数"
    },
    {
        "x": "16",
        "y": 77,
        "s": "在园人数"
    },
    {
        "x": "17",
        "y": 60,
        "s": "在园人数"
    },
    {
        "x": "18",
        "y": 20,
        "s": "在园人数"
    },
    {
        "x": "19",
        "y": 60,
        "s": "在园人数"
    },
    {
        "x": "20",
        "y": 80,
        "s": "在园人数"
    },
    {
        "x": "21",
        "y": 55,
        "s": "在园人数"
    },
    {
        "x": "22",
        "y": 68,
        "s": "在园人数"
    },
    {
        "x": "23",
        "y": 70,
        "s": "在园人数"
    },
    {
        "x": "24",
        "y": 24,
        "s": "在园人数"
    }
]