开发大屏页面

1. 参考如何登录Astro Canvas中操作，登录Astro Canvas界面。
2. 在项目列表页面，单击右上角的“+ 新建项目”。
3. 选择大屏&PC端项目，输入项目名称为“统计”，单击“新建”。
   图2 新建项目
   

4. 在大屏&PC端项目中，单击“+ 新建页面”，选择“新建空白页面”。
5. 输入页面标题“人员来访统计”，单击“新建”。
   图3 创建人员来访统计页面
   

6. 在页面上方单击，根据实际需要设置背景图片。
   图4 设置背景图片
   
   图5 选择背景图
   

7. 从全部组件中，分别拖拽文本编辑、两个基本柱图、和区域图到画布区域，布局如图7所示。
   图6 拖拽文本编辑组件到画布
   
   图7 组件布局
   

8. 在页面右上角，根据需要选择所需的主题（本示例设置为经典原始，即单击“清除主题”）。
   图8 设置页面主题
   

9. 配置文本编辑组件，设置“人员来访统计”标题。
   1. 选中上方文本编辑组件，单击上方，设置文本内容为“人员来访统计”，字体设置为“60”，字体颜色设置为“rgba(255, 255, 255, 1)”。
      图9 设置文本编辑标题
      
   2. 在段落设置中，设置标题对齐方式为“居中”。
      图10 设置标题对齐方式
      

10. 配置基本柱图组件。
    1. 选中最上方的基本柱图组件，在组件上方单击，配置组件数据，单击“保存”。
       “配置流程”选择“静态数据”，输入如下示例数据，并单击，格式化数据。

       图11 配置组件数据
       

       {    "resCode": "0",    "resMsg": "成功",    "result": [{        "order": {            "dataX": [                "人员统计"            ],            "dataValue": [{                    "title": "总公司员工",                    "value": [                        153                    ]                },                {                    "title": "合作人员",                    "value": [                        80                    ]                },                {                    "title": "访客人员",                    "value": [                        63                    ]                },                {                    "title": "安防人员",                    "value": [                        124                    ]                },                {                    "title": "保洁人员",                    "value": [                        56                    ]                }            ]        }    }]}

    2. 选中基本柱图组件，在组件上方单击，设置模板为“蓝色渐变不排序”。
       图12 设置模板
       
    3. 选中基本柱图组件，在组件上方单击，在统一配置中将数据系列里“数据标签”设置为“上”，让数据显示在柱形图上方。
       图13 数据显示在柱形图上方
       
    4. 打开水平堆叠和横向柱条效果。
       图14 打开水平堆叠和横向柱条
       
    5. 选中基本柱图组件，在组件上方单击，隐藏x轴，并隐藏y轴网格线。
       图15 隐藏x轴
       
       图16 隐藏y轴网格线
       
    6. 选中基本柱图组件，在组件上方单击，设置组件标题内容为“当前人员类型统计”。
       图17 设置组件标题
       

11. 参考10，配置左下角基本柱图。
    1. 选中左下角的基本柱图组件，在组件上方单击，配置组件数据，单击“保存”。
       “配置流程”选择“静态数据”，输入如下示例数据，并单击，格式化数据。

       图18 设置数据源
       

       {    "resCode": "0",    "resMsg": "成功",    "result": [{        "order": {            "dataX": [                "01",                "02",                "03",                "04",                "05",                "06",                "07",                "08",                "09",                "10",                "11",                "12",                "13",                "14",                "15",                "16",                "17",                "18",                "19",                "20",                "21",                "22",                "23",                "24"            ],            "dataValue": [{                    "title": "入园人数",                    "value": [                        20,                        30,                        45,                        20,                        60,                        80,                        140,                        200,                        145,                        40,                        70,                        60,                        80,                        16,                        87,                        77,                        60,                        20,                        60,                        80,                        55,                        68,                        70,                        24                    ]                },                {                    "title": null,                    "value": [                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0,                        0                    ]                },                {                    "title": "出园人数",                    "value": [                        90,                        60,                        30,                        20,                        10,                        110,                        140,                        87,                        64,                        45,                        11,                        24,                        80,                        14,                        98,                        35,                        41,                        14,                        45,                        80,                        31,                        22,                        23,                        24                    ]                }            ]        }    }]}

    2. 选中基本柱图组件，单击组件上方的，在统一配置中将数据系列中柱条宽度设置为8。
       图19 设置柱条宽度为8
       
    3. 选中基本柱图组件，单击组件上方的，显示x轴网格线，显示y轴轴线，隐藏y轴网格线。
       图20 显示x轴网格线
       
       图21 显示y轴轴线、隐藏网格线
       
    4. 选中基本柱图组件，单击组件上方的，设置标题“内容”为“人员流程统计 人/时”。
       图22 设置标题
       

12. 参考10，配置区域图。
    1. 选择右下方的区域图组件，在组件上方单击，配置组件数据。

       “配置流程”选择“静态数据”，输入如下示例数据，并单击，格式化数据。

       图23 设置基本区域图数据源
       

       {    "resCode": "0",    "resMsg": "成功",    "result": [{        "order": {            "dataX": [                "01",                "02",                "03",                "04",                "05",                "06",                "07",                "08",                "09",                "10",                "11",                "12",                "13",                "14",                "15",                "16",                "17",                "18",                "19",                "20",                "21",                "22",                "23",                "24"            ],            "dataValue": [{                "title": "在园人数",                "value": [                    20,                    30,                    45,                    20,                    60,                    80,                    140,                    200,                    145,                    40,                    70,                    60,                    80,                    16,                    87,                    77,                    60,                    20,                    60,                    80,                    55,                    68,                    70,                    24                ]            }]        }    }]}

    2. 选中区域图组件，单击组件上方的，设置标题内容为“昨日在园人数统计 人/时”。
       图24 设置组件标题
       
    3. 选中区域图组件，单击组件上方的，显示x轴网格线，打开y轴轴线开关，隐藏y轴网格线。
       图25 显示x轴网格线
       
       图26 打开y轴轴线隐藏网格线
       

13. 单击页面上方的，保存后单击，预览效果。
    图27 查看预览效果
    

14. 单击页面上方的，进行页面发布设置。
    • 发布链接：单击发布链接后的图标，将显示页面地址，单击该地址进入发布页。
      图28 获取发布链接
      

      单击，可生成新的链接，原链接将不可访问。单击，可复制该链接。

    • 版本管理：通过管理页面版本，设置发布具体哪个版本的页面或者回退到具体哪个版本的页面进行开发。更多介绍，请参见管理页面版本。
      图29 版本管理
      
    • 分享码设置：设置页面分享码和分享码有效期，设置后，只能通过分享码来访问页面，提高安全性。更多介绍，请参见如何设置分享码。
      图30 分享码设置
      
      • ：单击该图标，可查看设置的分享码。
      • 有效期设置：设置分享码的有效期。若不设置有效期，分享码将永久有效。
    • 设置Token认证：通过设置Token认证，可对大屏交互时传递的参数进行签名鉴权，保证大屏的URL访问链接的参数不能被篡改，从而提高大屏数据及用户信息的安全性。如何设置Token认证，请参见如何设置Token认证。
      图31 设置Token认证信息
      
      • ：打开Token认证开关后，Astro Canvas会生成一个Token。单击该图标，可复制Token。
      • 签名地址只允许打开一次：开启后，签名地址仅允许打开一次，再次访问时需要重新获取签名地址。若不开启，不限制访问次数，但支持设置有效期。
      • 有效期设置：设置Token认证有效期。若不设置有效期，Token认证将永久有效。
    • 设置内容安全策略：大屏页面以iframe形式嵌入第三方系统时，如果涉及跨域访问，请开启内容安全策略。设置内容安全策略的主要目的是减少和报告XSS攻击，缓解跨站脚本攻击。除限制可以加载内容的域，还可指明哪种协议允许使用，缓解数据包嗅探攻击。如何设置内容安全策略，请参见如何设置内容安全策略。
      图32 设置内容安全策略
      

      开启“内容安全策略”时，若在浏览器无痕模式下预览页面，请确保“阻止第三方Cookie”已关闭，否则无法正常预览页面。

      图33 关闭阻止第三方Cookie