步骤四：构建可视化大屏页面 AstroCanvas中预置了一些可复用的页面样例作为模板（预置模板和自定义模板），通过模板创建新的页面，可充分利用已有资源，减少重复开发，提高交付效率。本入门以交通管理模板为例，向您介绍如何快速构建大屏页面。 在“大屏&PC端项目”页面，单击“新建页面”。 在预置模板中，选择“交通管理”，单击“使用此模板”。 图10 选择交通管理模板 输入页面标题（如A市交通管理分析大屏），单击“新建”。 图11 设置页面标题 系统自动进入大屏开发页面，如图12。您可以直接使用该大屏页面，也可以根据业务需求进行二次开发。 图12 大屏开发页面 单击页面上方的，完成大屏页面的创建。

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

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

步骤三：创建大屏&PC端项目 在AstroCanvas中创建页面前，需要先创建一个项目。项目可以理解为是一种业务场景的集合，在项目中可以创建多个页面。 在AstroCanvas服务控制台，单击“进入首页”，进入AstroCanvas界面。 在“项目列表”中，单击“+ 新建项目”。 图7 进入新建项目页面 在新建项目页面，选择“大屏&PC端”，输入项目名称（如交通管理），单击“新建”。 图8 新建大屏&PC端项目 系统自动进入该新建项目的“大屏&PC端项目”页面，如图9。 图9 大屏&PC端项目页面

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

操作流程 在AstroCanvas中开发大屏页面的流程，如图2所示。 图2 开发大屏页面流程 注册账号并实名认证 注册一个华为账号并进行实名认证，认证后需要为账号进行充值。如果您已有一个华为账号，可直接跳过如下操作，但需要确保账号有足够的金额。 购买AstroCanvas实例 在使用AstroCanvas前，您需要购买一个AstroCanvas实例。AstroCanvas实例是一个独立的资源空间，所有的操作都是在实例内进行，不同实例间的资源相互隔离。如果您的账号未购买过AstroCanvas付费实例，可申请免费试用AstroCanvas（试用实例版本为Astro大屏应用基础版），有效期为一个月。 创建大屏&PC端项目 在AstroCanvas中创建页面前，需要先创建一个项目。项目可以理解为是一种业务场景的集合，在项目中可以创建多个页面。 构建可视化大屏页面 通过AstroCanvas中预置的交通管理模板，快速创建一个可视化大屏页面。 预览并发布大屏页面 在线预览大屏页面效果，确保开发编辑效果与发布后运行效果一致。预览效果符合预期后，可直接发布大屏页面，并在线查看城市交通状况。

步骤四：新建AstroZero数据源 创建一个AstroZero数据源，用于对接AstroZero环境。 在AstroZero服务控制台的左侧导航栏中，单击“Astro大屏应用”，进入AstroCanvas服务控制台。 在AstroCanvas已购买的实例中，单击“进入首页”，进入AstroCanvas界面。 在顶部菜单栏中，选择“数据中心”，单击“新建数据源”。 选择“AstroZero”，配置数据源参数。 图32 新建数据源 表7 新建数据源参数说明 参数 说明 示例 数据源名称 新建数据源的名称，用于标识该数据源。长度为1~32个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 Zero对接Canvas数据源 域名 AstroZero环境的域名，需要携带“https://”。 步骤三：获取域名、客户端ID和密码中获取的域名 客户端ID 调用AstroZero接口前，需要配置“客户端模式”OAuth鉴权的客户端ID。 步骤三：获取域名、客户端ID和密码中获取的client_id 客户端密码 调用AstroZero的接口前，需要配置“客户端模式”OAuth鉴权的客户端鉴权密钥。 步骤三：获取域名、客户端ID和密码中获取的client_secret 单击“连接测试”，显示“连接成功”，表示数据源可以调通。 单击“保存”，完成数据源的创建。

开发大屏页面 登录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 查看预览效果

数据 在数据中，配置地图的数据来源，更多介绍请参见数据接入。 图11 设置组件数据源 自定义围栏数据：地图自定义围栏数据桥接器，数据中省/直辖市code一致，则认为属于同一围栏区域。预览或发布页面时，单击围栏区域，地图会下钻到围栏区域。若未配置该连接器，则下钻到单独省/直辖市。 图12 自定义围栏数据 热力图层数据：热力图层数据桥接器/数据集，根据省/直辖市数值大小，热力图层颜色深浅不一。 柱状图层数据：柱状图层数据桥接器/数据集，根据省/直辖市数值大小，柱子颜色、高度不一。 标签图层数据：标签图层数据桥接器/数据集，以标签形式展示省/直辖市具体数据。

配置 在配置中，设置地图组件的基本信息、热力图层、柱状图层和标签图层等。 图4 配置 地图基本配置 地图类型：地图第三方服务商，如天地图、高德地图和百度地图。 高德/百度/天地图密钥：地图第三方密钥，请自行到对应官网申请。 高德地图第三方密钥，请参考高德开放平台申请。 百度地图第三方密钥，请参考百度地图开放平台申请。 天地图第三方密钥，请参考天地图官网申请。 自定义地图：根据实际需求，自定义地图。如果开启自定义地图，请配置地图GeoJson数据链接地址或配置GeoJson数据素材。 地图中心经度：设置地图中心点的经度。 地图中心纬度：设置地图的中心点的纬度。 地图缩放级别：设置地图的缩放层级，最小级别为4，最大级别为19。 地图样式：设置地图基本样式模板。 热力图层配置 显示热力图层：是否显示热力图层。 数据标题：设置热力图层的数据标题。 显示类型 ：设置热力图层显示类型，如均分显示或区间部分。 设置为“均分显示”时，会显示所有数据，且区域数据从小到大，对应图层颜色由浅到深。 图5 均分显示 设置为“区间显示”时，仅显示符合要求的数据，且区域图层颜色取决于其数据所处区间对应的颜色。 图6 区间显示 填充颜色：设置热力图层的填充颜色。“显示类型”为“均分显示”时，区域数据从小到大，对应图层颜色由浅到深。“显示类型”为“区间显示”时，区域图层颜色取决于其数据所处区间的对应颜色。 描边样式：设置省/直辖市描边样式，如虚线、点线等。 描边粗细：设置省/直辖市描边粗细，单位为px。 描边颜色：设置省/直辖市描边颜色。 柱状图层配置 显示柱状图层：是否显示柱状图层。 显示类型：设置柱图层显示内容，如均分显示或区间部分。 设置为“均分显示”时，会显示所有数据，且区域数据从小到大，对应图层颜色由浅到深。 图7 均分显示 设置为“区间显示”时，仅显示符合要求的数据，且区域图层颜色取决于其数据所处区间对应的颜色。 图8 区间显示 填充颜色：设置柱子的填充颜色。“显示类型”为“均分显示”时，区域数据从小到大，对应图层颜色由浅到深。“显示类型”为“区间显示”时，区域图层颜色取决于其数据所处区间的对应颜色。 柱子粗细：设置柱子的粗细，单位为px。 柱子长度比：数据最大值对应的柱子高度与该地图上1个纬度直线距离的比值，取值范围为[0, 10]。 显示标注：柱子上是否显示标注文字样式。设置为“显示”时，支持设置标注文字的字体、大小和颜色。 标签图层配置 显示标签图层：是否显示标签图层。 数据标题：设置标签图层的数据标题。 显示类型：设置标签的显示内容，如均分显示或区间部分。 设置为“均分显示”时，会显示所有数据，且区域数据从小到大，对应图层颜色由浅到深。 图9 均分显示 设置为“区间显示”时，仅显示符合要求的数据（如0~10之间的数据），且区域图层颜色取决于其数据所处区间对应的颜色。 图10 区间部分 填充颜色：设置标签数据所处区间的对应颜色。均分显示时，区域数据从小到大，对应图层颜色由浅到深。区间显示时，区域图层颜色取决于其数据所处区间对应颜色。 数值字体：设置标签数值的字体、颜色和大小等。 数值后缀：设置标签数值的后缀，如%。 内容字体：设置标签内容的字体、颜色和大小等。 内容背景颜色：设置标签内容的背景颜色。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右，如图2）的距离，默认为0，即铺满整个组件。

步骤四：使用私有化部署的AstroCanvas服务 登录私有化部署的AstroCanvas界面。 在浏览器中，输入AstroCanvas服务所在服务器的IP地址和端⼝，进入AstroCanvas登录页。 http://10.10.*.*:19996/ 其中，“10.10.*.*”为1.d中，修改application.yml时配置的服务器公网ip，“19996”为端口。 输入5中配置的用户名和密码，单击“登录”，即可进入AstroCanvas界面。 图15 输入用户名和密码 获取可视化应用本地部署包。 在步骤一：购买AstroCanvas企业版实例中，单击AstroCanvas实例中的“进入首页”，进入AstroCanvas界面。 在项目列表中，将鼠标放在对应的项目上，单击。 图16 单击下载本地部署包图标 在弹出的页面，勾选需要下载的页面，单击“下载本地部署包”。 可视化应用本地部署包用于在部署后的AstroCanvas运行环境中安装应用，实现项目的迁移，包名为“AstroCanvas_项目名_随机编码.zip“。 图17 选择本地部署的页面 添加可视化应用。 在项目列表中，单击“导入项目包”。 选择2中下载的可视化应用本地部署包（AstroCanvas_项目名_随机编码.zip）。 在项目列表中，可查看到项目已成功导入。 图18 查看导入的项目 配置数据源密码和加密字段。 在运行环境中导入可视化应用本地部署包后，如果应用包中包含关系型数据库、Prometheus和HTTP连接器数据源，需要重新配置密码和加密字段。 图19 修改关系型数据库数据源密码 图20 修改Prometheus数据源密码 图21 修改HTTP连接器数据源加密字段 访问项目中的页面。 在AstroCanvas企业版项目中发布页面时，如果“访问限制”设置的是“Token认证”，则不需要执行如下操作，直接在项目详情页单击“页面URL”地址，即可正常访问页面。如何设置Token认证，请参见如何设置Token认证。发布页面时如果“访问限制”设置的是“分享码”，在私有化部署的AstroCanvas环境中导入项目后，页面中原先设置的分享码会被置空，请按照如下操作重新设置。 在项目列表中，单击已导入的项目，进入项目详情页。 单击待访问页面后的，为页面设置分享码。 图22 为页面设置分享码 输入分享码，单击，保存设置。 图23 输入分享码 单击，复制页面URL地址。 图24 获取页面URL 在浏览器中输入获取到的地址，输入分享码后，即可正常访问页面。 图25 输入分享码

步骤三：安装运行环境 部署AstroCanvas服务。 登录您的服务器，创建安装目录。 cd /home/ mkdir canvas_private 其中，“canvas_private”为安装目录，可自定义。本章节以在“home”目录创建安装目录为例进行介绍，您也可以在其他目录下创建该目录。 将步骤二：下载运行环境中获取的AstroCanvas运行环境部署包（AstroCanvas_Runtime.zip），上传到安装目录下。 解压已上传的部署包，并进入已解压后的目录。 unzip AstroCanvas_Runtime.zip cd AstroCanvas_Runtime 图6 解压后包中的内容 进入config目录，新增“application.yml”配置文件。 cd config vi application.yml 在配置文件中，添加如下内容： # 配置当前机器的ip（默认127.0.0.1） hostIp: 10.10.*.* # 配置http连接器超时时间（默认3000） http: connectTimeout: 30000 socketTimeout: 30000 magno: deploy: # 配置私有化环境启动端口（默认8081） serverPort: 19996 # 配置是否开启匿名访问，默认是false，开启则改为true enableAnonymous: false # 租户ID tenantId: tenant-2bb76b9b9f24****09737a83 其中，“tenantId”为租户ID，请参考步骤二：下载运行环境中操作，进入“本地部署信息”页面。在租户ID后，单击，即可复制租户ID。 图7 复制租户ID 进入解压后的目录，执行启动命令。 cd /home/canvas_private/AstroCanvas_Runtime sh start.sh 如果启动失败，请查看启动日志“/home/canvas_private/AstroCanvas_Runtime/startlogs/start.log”。如果提示权限不足，请返回安装目录，设置目录下所有文件为最大权限。 cd /home/canvas_private/AstroCanvas_Runtime chmod -R 777 AstroCanvas_Runtime 其他常用操作及命令如下： 查看日志：/home/canvas_private/AstroCanvas_Runtime/logs/***-PrivateDeployApp.log 重启服务：sh restart.sh，执行启动命令后，如果修改了“application.yml”文件，需要执行该命令，重新启动。 停止服务：sh stop.sh 服务启动后，在浏览器中，输入AstroCanvas服务所在服务器的IP地址和端⼝，获取机器码。 http://10.10.*.*:19996/ 其中，“10.10.*.*”为1.d中，修改application.yml时配置的服务器ip、“19996”为端口。 图8 复制服务器机器码 注册服务器。 在AstroCanvas界面，单击右上角的账号名，选择“本地部署”。 图9 选择本地部署 在本地部署信息页面，单击“注册”。 图10 选择新建服务机器码 输入服务器机器码和名称，单击“确定”，生成测试Key。 图11 生成测试Key 其中，“服务器机器码”请配置为2中获取的内容，服务器名称请根据实际情况进行配置。 返回本地部署信息页面，单击服务器机器码后的，下载测试Key文件（runtime.key）。 图12 下载测试Key文件 将获取的测试Key，上传到本地服务器的“/home/canvas_private/AstroCanvas_Runtime/config”目录下，验证服务器部署情况。 cd /home/canvas_private/AstroCanvas_Runtime/config 测试Key有效期为3天，过期后请使用机器码重新注册并生成测试Key或启用为正式Key。下载新的Key后，需要删除原先的Key，替换为新的Key。 使用机器码生成新的测试Key时，需要先删除失效的Key，再重新注册。因为一个机器码只能注册一个Key。 在浏览器中，输入AstroCanvas服务所在服务器的IP地址和端⼝，可正常进入AstroCanvas界面，说明已部署成功。 http://10.10.*.*:19996/ 其中，“10.10.*.*”为1.d中，修改application.yml时配置的服务器公网ip，“19996”为端口。 验证无误后，单击测试Key右侧操作栏中的，在弹出的页面单击“确定”，启动测试Key。 图13 启动测试Key 启动成功后，返回本地部署信息页面，可查看到“Key类型”由“测试”变为“正式”。 图14 正式Key 下载正式Key文件（runtime.key），替换测试Key的runtime.key文件，替换后重启服务即可使用。 配置登录私有化部署AstroCanvas的用户名和密码。 进入“/home/canvas_private/AstroCanvas_Runtime”目录。 cd /home/canvas_private/AstroCanvas_Runtime 编辑userConfig.json文件，在文件中设置登录AstroCanvas的用户名和密码。 vi userConfig.json 配置示例如下： { "accounts": [ { "name": "user1", "pwd": "user1用户登录密码" }, { "name": "user2", "pwd": "user2用户登录密码" } ] } 配置完成后，保存文件并退出。