开发大屏页面 登录AstroCanvas服务控制台，单击“进入首页”，进入AstroCanvas界面。 选择大屏&PC端项目，输入项目名称为“统计”，单击“新建”。 图2 新建项目 在大屏&PC端项目中，单击“+ 新建页面”，选择“新建空白页面”。 输入页面标题“人员来访统计”，单击“新建”。 页面标题的长度为1~100个字符。如果页面默认大小和您的显示分辨率或目标分辨率不符，请自行调整页面分辨率及组件布局以达到最佳显示效果 在页面上方单击，根据实际需要设置背景图片。 图3 设置背景图片 图4 选择背景图 从全部组件中，分别拖拽文本编辑、水平基本柱图、基本柱图、和区域图到画布区域，布局如图6所示。 图5 拖拽文本编辑组件到画布 图6 组件布局 在页面右上角，根据需要选择所需的主题（本示例设置为经典原始，即单击“取消当前主题卡片装饰”）。 配置文本编辑组件。 选中上方文本编辑组件，单击上方，设置文本内容为“人员来访统计”，字体设置为“60”。 图7 设置文本编辑标题 在段落设置中，设置标题对齐方式为“居中”。 图8 设置标题对齐方式 配置水平基本柱图组件。 选中最上方的水平基本柱图组件，在组件上方单击，配置组件数据，单击“保存”。 “数据类型”选择“静态数据”，“输入数据”选择“Json模式”，输入如下示例数据，并单击，格式化数据。 [{ "x": "人员统计", "y": 153, "s": "总公司员工" }, { "x": "人员统计", "y": 80, "s": "合作人员" }, { "x": "人员统计", "y": 63, "s": "访客人员" }, { "x": "人员统计", "y": 124, "s": "安防人员" }, { "x": "人员统计", "y": 56, "s": "保洁人员" } ] 选中水平基本柱图组件，在组件上方单击，设置模板为“蓝色渐变不排序”。 图9 设置模板 选中水平基本柱图组件，在组件上方单击，将所有数据系列中的“数据标签”设置为“上”，让数据显示在柱形图上方。 图10 数据显示在柱形图上方 打开水平堆叠效果。 图11 打开水平堆叠 选中水平基本柱图组件，在组件上方单击，隐藏x轴，并隐藏y轴网格线。 图12 隐藏x轴 图13 隐藏y轴网格线 选中水平基本柱图组件，在组件上方单击，设置组件标题内容为“当前人员类型统计”。 图14 设置组件标题 参考9，配置左下角基本柱图。 选中左下角的基本柱图组件，在组件上方单击，配置组件数据，单击“保存”。 “数据类型”选择“静态数据”，“输入数据”选择“Json模式”，输入如下示例数据，并单击，格式化数据。 [{ "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，配置区域图。 选择右下方的区域图组件，在组件上方单击，配置组件数据。 “数据类型”选择“静态数据”，“输入数据”选择“Json模式”，输入如下示例数据，并单击，格式化数据。 [{ "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": "在园人数" } ] 选中区域图组件，单击组件上方的，设置标题内容为“昨日在园人数统计 人/时”。 图19 设置组件标题 选中区域图组件，单击组件上方的，显示x轴网格线，打开y轴轴线开关，隐藏y轴网格线。 图20 显示x轴网格线 图21 打开y轴轴线隐藏网格线 单击页面上方的，保存后单击，预览效果。 图22 查看预览效果

场景描述 人员来访统计大屏用于展示园区中人员相关信息，例如人员类型，人员流量及在园人数等。大屏页面构想，如图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 隐藏网格线 设置基本折线图组件。 在左侧全部组件中，拖拽“基本折线图”组件到移动端页面开发操作区域，即画布区域。 图8 拖拽基本折线图 选中基本折线图组件，单击组件上方的，设置组件数据源，完成后单击“保存”。 “数据类型”选择“静态数据”，“输入数据”选择“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": "平均处理时长" } ] 选中基本折线图组件，单击组件上方的，设置组件标题“内容”为“告警平均处理时长统计”。 图9 设置组件标题 选中基本折线图组件，单击组件上方的，打开Y轴轴线“显示”开关。 图10 轴线显示 单击页面上方的，保存后单击，选择不同手机型号查看页面在移动端上的显示效果。 图11 查看预览效果

计费示例（包含扩容包） 假设您在2024年1月01日，购买了AstroCanvas专业版有效期5个月，同时订购了30个页面扩容包。那么5个月的费用计算过程如下： 套餐费用：2500元 * 5 = 12500元 页面扩容包费用：40元 * 30 *5 =6000元 综上，1年的费用 = 12500 + 6000 = 18500元 该示例中的价格仅供参考，实际计算请以AstroCanvas价格详情中的价格为准。

计费示例（无扩容包） 假设您在2023年11月01日，购买了AstroCanvas专业版有效期1年，并在到期前手动续费1年，则： 第一个计费周期为：2023/11/01 15:50:04 ~ 2024/11/01 23:59:59 第二个计费周期为：2024/11/01 23:59:59 ~ 2025/11/01 23:59:59 续费时需支付的费用为AstroCanvas规格套餐包年的费用（费用以官网实际费用为准）。

计费说明 AstroCanvas根据您选择的实例版本、页面扩容包和购买时长进行计费。AstroCanvas提供了三种不同的套餐版本，均为包年/包月购买方式。如果您需要快速了解AstroCanvas服务的具体价格，请参见AstroCanvas价格详情。 表1标“*”的计费项为必选计费项。 表1 计费项 计费项 计费说明 计费模式 计费公式 * 实例版本 AstroCanvas提供了“Astro大屏应用基础版”、“Astro大屏应用专业版”和“Astro大屏应用企业版”三种实例套餐，请按需购买。 Astro大屏应用基础版：基于平台预置模板、基础组件，快速开发专业水准大屏。 Astro大屏应用专业版：基于平台高阶组件、自定义组件能力，高度还原设计稿大屏。 Astro大屏应用企业版：适用于3D场景开发。 各套餐详细介绍，请参见计费模式。 包年/包月 套餐版本单价 * 购买时长（以月/年计算） 页面扩容包 扩容包用于新增更多的页面。扩容包不可单独购买和退订，扩容包的使用截止时间与主资源的截止时间保持一致，主资源套餐到期后，扩容包将不可使用。 包年/包月 扩容包单价 * 购买时长（以主套餐有效时间折算）

包年/包月资源 对于包年/包月计费模式的资源，用户在购买时会一次性付费，服务将在到期后自动停止使用。 如果在计费周期内不再使用包年/包月资源，您可以执行退订操作，系统将根据资源是否属于五天无理由退订、是否使用代金券和折扣券等条件返还一定金额到您的账户。详细的退订规则，请参见云服务退订规则概览。 如果您已开启“自动续费”功能，为避免继续产生费用，请在自动续费扣款日（默认为到期前7日）之前关闭自动续费。

适用场景 包年/包月计费模式需要用户预先支付一定时长的费用，适用于长期、稳定的业务需求。以下是一些适用于包年/包月计费模式的业务场景： 稳定业务需求：对于长期运行且资源需求相对稳定的业务，如企业官网、在线商城、博客等，包年/包月计费模式能提供较高的成本效益。 长期项目：对于周期较长的项目，如科研项目、大型活动策划等，包年/包月计费模式可以确保在整个项目周期内资源的稳定使用。 业务高峰预测：如果能预测到业务高峰期，如电商促销季、节假日等，可提前购买包年/包月资源以应对高峰期的需求，避免资源紧张。 数据安全要求高：对于对数据安全性要求较高的业务，包年/包月计费模式可确保资源的持续使用，降低因资源欠费而导致的数据安全风险。

到期后影响 图1描述了包年/包月AstroCanvas资源各个阶段的状态。购买后，在计费周期内资源正常运行，此阶段为有效期；资源到期而未续费时，将陆续进入宽限期和保留期。 图1 包年/包月AstroCanvas资源生命周期 到期预警 包年/包月AstroCanvas套餐在到期前第7天内，系统将向用户推送到期预警消息。预警消息将通过邮件、短信和站内信的方式通知到华为账号的创建者。 到期后影响 当您包年/包月AstroCanvas套餐到期未续费时，首先会进入宽限期，宽限期内您可以正常使用已购买和开通的AstroCanvas。 如果在宽限期内仍未续费AstroCanvas套餐，那么就会进入保留期，资源状态变为“已冻结”，您将无法对处于保留期的AstroCanvas执行任何操作。 保留期到期后，如果仍未续费，那么AstroCanvas套餐的相关功能会进入停用状态。

适用计费项 AstroCanvas提供了“Astro大屏应用基础版”、“Astro大屏应用专业版”和“Astro大屏应用企业版”三种实例套餐，请根据需要选择按月购买或按年购买。 Astro大屏应用基础版：基于平台预置模板、基础组件，快速开发专业水准大屏。 Astro大屏应用专业版：基于平台高阶组件、自定义组件能力，高度还原设计稿大屏。 Astro大屏应用企业版：适用于3D场景开发。 表1 适用计费项 计费项 计费说明 实例版本 AstroCanvas提供了“Astro大屏应用基础版”、“Astro大屏应用专业版”和“Astro大屏应用企业版”三个实例版本。各实例版本由空间数、页面数、存储容量、数据接入和项目管理等组成，如表2所示。 表2 AstroCanvas套餐规格清单 版本类型 基础版 专业版 企业版 空间数 2个 5个 100个 页面数 20页 40页 500页 存储容量 5G 10G 100G 加密分享 支持 支持 支持 数据接入 支持 支持 支持 项目管理 支持 支持 支持 图表组件 支持 支持 支持 地图组件 支持 支持 支持 自定义组件 不支持 支持 支持 地图服务接入 不支持 不支持 支持 三维场景编辑 不支持 不支持 支持

计费周期 包年/包月AstroCanvas资源的计费周期是根据您购买的时长来确定的（以UTC+8时间为准）。一个计费周期的起点是您开通或续费资源的时间（精确到秒），终点则是到期日的23:59:59。 例如，如果您在2023/03/08 15:50:04购买了一台时长为一个月的AstroCanvas，那么其计费周期为：2023/03/08 15:50:04 ~ 2023/04/08 23:59:59。

变更配置后对计费的影响 当前包年AstroCanvas套餐的规格不能满足您的业务需要时，可以在控制台发起变更规格操作，变更时系统将按照如下规则为您计算变更费用： 套餐版本升级：新套餐版本价格高于老套餐版本价格，此时您需要支付新老版本的差价。 升级版本费用 = 升级后版本价格 * 剩余周期 - 未升级版本价格 * 剩余周期 剩余周期计算示例： 2023/11/1客户购买了3年的AstroCanvas，有效期截止到2026/11/1，客户在2024/5/1发生变更，则剩余周期=2024年剩余周期+2025年剩余周期+2026年剩余周期=244/365+1+305/365=2.50（年）。

步骤五：预览并发布大屏页面 在AstroCanvas中开发大屏页面时，支持直接在线预览效果，确保开发编辑效果与发布后运行效果一致。预览效果符合预期后，可直接发布大屏页面，并在线查看城市交通状况。 在已创建的大屏页面中，单击页面上方的，预览页面效果。 如果预览效果不符合预期，可进行微调，直至符合预期。 单击，打开“发布链接”开关，获取页面访问地址。 图13 打开发布链接 单击，可生成新的链接，原链接将不可访问。单击，可复制该链接。 设置访问限制。 如果是新建项目，需要为发布链接设置访问限制，即“分享码访问”或“Token认证”必须设置其中一个，否则链接在运行态无法正常访问。本入门中，以设置分享码为例进行介绍。 图14 分享码设置 分享码设置：设置页面分享码后，只能通过分享码来访问页面，提高安全性。 设置Token认证：通过设置Token认证，可对大屏交互时传递的参数进行签名鉴权，保证大屏的URL访问链接的参数不会被篡改，从而提高大屏数据及用户信息的安全性。 设置内容安全策略：大屏页面嵌入第三方系统时（例如以iframe形式嵌入），如果涉及跨域访问，请开启内容安全策略。设置内容安全策略的主要目的是减少和报告XSS攻击，缓解跨站脚本攻击。除限制可以加载内容的域，还可指明哪种协议允许使用，缓解数据包嗅探攻击。 设置完成后，在浏览器中打开发布链接地址，输入分享码后，单击，即可在线查看城市交通状态。 图15 输入分享码

步骤一：注册账号并实名认证 使用AstroCanvas前，需要先注册一个华为账号并进行实名认证。如果您已有一个华为账号，可直接跳过如下操作，但需要确保账号有足够的金额。 进入华为云官网，单击页面右上角的“注册”。 参考 注册华为账号 并开通华为云中操作，完成注册。 注册后参考个人账号如何完成实名认证或企业账号如何完成实名认证中操作，完成个人或企业账号实名认证。 为账号进行重置。 购买AstroCanvas实例时需要收费，请提前为您的账号进行重置，确保账号有足够的金额。 关于AstroCanvas的价格说明，请参见计费说明。 关于充值，请参见账户充值。

步骤二：购买AstroCanvas实例 在使用AstroCanvas前，您需要购买一个AstroCanvas实例。AstroCanvas实例是一个独立的资源空间，所有的操作都是在实例内进行，不同实例间的资源相互隔离。本入门以购买基础版实例为例，进行介绍。 进入购买Astro大屏应用实例页面。 实例版本选择“Astro大屏应用基础版”，按需设置购买时长，单击“立即购买”。 图3 购买实例 选择支付方式（如在线支付），单击“去在线支付”，完成订单支付。 图4 确认付款 订单支付成功后，单击“返回Astro轻应用控制台”。 图5 返回控制台 在Astro大屏应用控制台中，可以查看Astro大屏应用的安装状态。当“实例状态”变为“运行中”时，说明实例已安装好，可以正常使用。 图6 Astro大屏应用控制台