# 使用华为云Astro大屏应用开发人员来访统计大屏页面
#### 应用场景
人员来访统计大屏用于展示园区中人员相关信息，例如人员类型，人员流量及在园人数等。大屏页面构想，如[图1]所示。
图1大屏页面效果   
![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001875961966.png)
[图1]中大屏页面由下列组件拼装而成，组件介绍顺序为从上到下、从左到右。
表1组件说明 
| 组件     | 说明                                   |
|:---|:---|
| 文本编辑   | 文本编辑组件，用于展示标题，例如人员来访统计。              |
| 水平基本柱图 | 统计当前人员类型，如总公司员工、合作员工、访客人员、安防人员、保洁人员。 |
| 基本柱图   | 统计入园和出园人数。                           |
| 区域图    | 统计昨日在园人数。                            |
   
#### 开发大屏页面
1. 登录[华为云Astro大屏应用服务控制台](https://console.huaweicloud.com/astro-canvas)，单击"进入首页"，进入华为云Astro大屏应用界面。
2. 选择大屏\&PC端项目，输入项目名称为"统计"，单击"新建"。 
   图2新建项目   
   ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922401745.png)
   
   
3. 在大屏\&PC端项目中，单击"+ 新建页面"，选择"新建空白页面"。
4. 输入页面标题"人员来访统计"，单击"新建"。 
   页面标题的长度为1\~100个字符。如果页面默认大小和您的显示分辨率或目标分辨率不符，请自行调整页面分辨率及组件布局以达到最佳显示效果
   
   
5. 在页面上方单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158534637.png)，根据实际需要设置背景图片。
   
   图3设置背景图片   
   ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001876442838.png)
   图4选择背景图   
   ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922482261.png)
   
   
6. 从全部组件中，分别拖拽**文本编辑** 、**水平基本柱图** 、**基本柱图** 、和**区域图** 到画布区域，布局如[图6]所示。
   
   图5拖拽文本编辑组件到画布   
   ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001876442954.png)
   图6组件布局   
   ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001876602826.png)
   
   
7. 在页面右上角，根据需要选择所需的主题（本示例设置为经典原始，即单击"取消当前主题卡片装饰"）。
8. 配置文本编辑组件。 
   1. 选中上方文本编辑组件，单击上方![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002123297822.png)，设置文本内容为"人员来访统计"，字体设置为"60"。
      图7设置文本编辑标题   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922401909.png) 
   
   2. 在段落设置中，设置标题对齐方式为"居中"。
      图8设置标题对齐方式   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922482309.png) 
   
   
   
   
9. 配置水平基本柱图组件。
   
   1. 选中最上方的水平基本柱图组件，在组件上方单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112534904.png)，配置组件数据，单击"保存"。
      "数据类型"选择"静态数据"，"输入数据"选择"Json模式"，输入如下示例数据，并单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158656553.png)，格式化数据。
      ```
      [{
              "x": "人员统计",
              "y": 153,
              "s": "总公司员工"
          },
          {
              "x": "人员统计",
              "y": 80,
              "s": "合作人员"
          },
          {
              "x": "人员统计",
              "y": 63,
              "s": "访客人员"
          },
          {
              "x": "人员统计",
              "y": 124,
              "s": "安防人员"
          },
          {
              "x": "人员统计",
              "y": 56,
              "s": "保洁人员"
          }
      ]
      ```
      
   
   2. 选中水平基本柱图组件，在组件上方单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293797.png)，设置模板为"蓝色渐变不排序"。
      图9设置模板   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002149944385.png) 
   
   3. 选中水平基本柱图组件，在组件上方单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293801.png)，将所有数据系列中的"数据标签"设置为"上"，让数据显示在柱形图上方。
      图10数据显示在柱形图上方   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001876602910.png) 
   
   4. 打开水平堆叠效果。
      图11打开水平堆叠   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001876443050.png) 
   
   5. 选中水平基本柱图组件，在组件上方单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112694676.png)，隐藏x轴，并隐藏y轴网格线。
      图12隐藏x轴   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922482393.png)
      图13隐藏y轴网格线   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922401993.png) 
   
   6. 选中水平基本柱图组件，在组件上方单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293797.png)，设置组件标题内容为"当前人员类型统计"。
      图14设置组件标题   
      ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001876443074.png) 
   
   
   
   
10. 参考[9]，配置左下角基本柱图。
    
    1. 选中左下角的基本柱图组件，在组件上方单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112534904.png)，配置组件数据，单击"保存"。
       "数据类型"选择"静态数据"，"输入数据"选择"Json模式"，输入如下示例数据，并单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158656553.png)，格式化数据。
       ```
       [{
               "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": "出园人数"
           }
       ]
       ```
       
    
    2. 选中基本柱图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293801.png)，在统一配置中将数据系列中柱条宽度设置为8。
       图15设置柱条宽度为8   
       ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001876602954.png) 
    
    3. 选中基本柱图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112694676.png)，显示x轴网格线，显示y轴轴线，隐藏y轴网格线。
       图16显示x轴网格线   
       ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922402005.png)
       图17显示y轴轴线、隐藏网格线   
       ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922482417.png) 
    
    4. 选中基本柱图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293797.png)，设置标题"内容"为"人员流程统计 人/时"。
       图18设置标题   
       ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001876602962.png) 
    
    
    
    
11. 参考[9]，配置区域图。
    
    1. 选择右下方的区域图组件，在组件上方单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112534904.png)，配置组件数据。
       "数据类型"选择"静态数据"，"输入数据"选择"Json模式"，输入如下示例数据，并单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158656553.png)，格式化数据。
       ```
       [{
               "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": "在园人数"
           }
       ]
       ```
       
    
    2. 选中区域图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002148293797.png)，设置标题内容为"昨日在园人数统计 人/时"。
       图19设置区域图组件标题   
       ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001876602966.png) 
    
    3. 选中区域图组件，单击组件上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002112694676.png)，显示x轴网格线，打开y轴轴线开关，隐藏y轴网格线。
       图20显示区域图x轴网格线   
       ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922402017.png)
       图21打开区域图y轴轴线隐藏网格线   
       ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922482429.png) 
    
    
    
    
12. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002123286424.png)，保存后单击![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000002158647057.png)，预览效果。
    
    图22查看预览效果   
    ![](https://support.huaweicloud.com/bestpractice-astrocanvas/zh-cn_image_0000001922482433.png)