步骤四：新建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用户登录密码" } ] } 配置完成后，保存文件并退出。

操作流程 私有化部署AstroCanvas的操作流程，如图1所示。 图1 AstroCanvas私有化部署流程 步骤一：购买AstroCanvas企业版实例 购买一个AstroCanvas企业版实例，当前仅AstroCanvas企业版实例才支持私有化部署。 步骤二：下载运行环境 在企业版AstroCanvas界面，下载运行环境部署包。运行环境部署包用于在服务器上部署AstroCanvas运行环境。 步骤三：安装运行环境 在本地服务器上，安装运行环境部署包，获取机器码。在华为云企业版AstroCanvas注册机器码，生成Key。服务器绑定Key后，才可正常访问私有化部署的AstroCanvas运行环境。 步骤四：使用私有化部署的AstroCanvas服务 在私有化部署的AstroCanvas运行环境中，安装可视化应用部署包，更新可视化应用的配置。

步骤二：下载运行环境 在AstroCanvas服务控制台，单击实例中的“进入首页”，进入AstroCanvas界面。 在页面右上角，单击“账号名”，选择“本地部署”。 图4 选择本地部署 在本地部署信息中，单击“下载运行环境”，下载AstroCanvas运行环境部署包。 运行环境部署包用于在服务器上部署AstroCanvas服务，包名为“AstroCanvas_Runtime.zip”。如果需要下载历史版本的部署包，可以单击“版本列表”，再单击对应版本后的，即可将该版本的部署包下载到本地。 图5 下载运行环境

步骤一：购买AstroCanvas企业版实例 进入购买Astro大屏应用实例页面。 实例版本选择“Astro大屏应用企业版”，选择购买时长，单击“立即购买”。 选择支付方式，单击“确认付款”，完成订单支付。 图2 确认付款 订单支付成功后，单击“返回Astro轻应用控制台”。 在Astro大屏应用控制台中，可以查看到Astro大屏应用的安装状态。当“实例状态”变为“运行中”时，说明实例已安装好，可以正常使用。 图3 Astro大屏应用控制台 单击实例中的“进入首页”，进入AstroCanvas界面，开发页面并发布。 如何使用AstroCanvas开发可视化页面，请参见创建页面。

图形 图形是指组件中，实现 数据可视化 的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图8 图形 统一配置 显示范围：统一设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：统一设置图层的透明度。 图层：单击“新增图层”，可新建图标图层、标签图层、柱状图层、飞线图层、基础热力图层和区域热力图层。 图9 新建图标图层 基本配置 类型：固定为“图标图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 标签避让：开启后，地图中重叠的图标会避让。 图层样式 显示类型：设置图标的显示类型，支持均分显示和区间显示。 图标图片：“显示类型”设置为“均分显示”时，会根据图标图片的数量，将图标值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的图标。“显示类型”设置为“区间显示”时，可设置不同的区间，当图标值落在对应的区间内，显示对应的颜色值，区域范围外的图标将不显示。 悬浮放大：是否开启鼠标悬浮后图标放大。悬浮方法和标签避让同时开启会影响显示效果。 图片宽度：设置图片的宽度。 图片高度：设置图片的高度。 上下偏移：设置图标根据点经纬度的上下偏移。 左右偏移：设置图标根据点经纬度的左右偏移。 图层标签 标签：是否开启图标标签。 标签悬浮：开启时，图标鼠标悬浮时显示标签。关闭时，标签常显。 系列名：标签是否显示系列名，对应静态数据中的“label”字段。 系列名字体：设置系列名的字体、大小和颜色等。“标签悬浮”设置为“开启”时，显示该配置项。 数值：标签是否显示数值，对应静态数据中的“value”字段。 数值字体：设置数值字体。“标签悬浮”设置为“开启”时，显示该配置项。 文字大小：设置常显标签的文字大小。“标签悬浮”设置为“关闭”时，显示该配置项。 文字颜色：设置常显标签的文字颜色。“标签悬浮”设置为“关闭”时，显示该配置项。 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图10 新建标签图层 基本配置 类型：固定为“标签图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 标签样式 最大宽度：设置标签的最大宽度。 溢出文本：设置文本溢出时的显示方式，支持省略和换行。 文字对齐方式：设置文本对齐方式，支持左对齐、居中和右对齐。 系列名：标签是否显示系列名，对应静态数据中的“label”字段。 系列名字体：设置系列名的字体、大小和颜色等。 数值：标签是否显示数值，对应静态数据中的“value”字段。 数值字体：设置数值的字体、大小和颜色等。 背景样式：设置标签的背景样式，支持颜色和图片。 显示类型：设置标签背景的显示类型，支持均分显示和区间显示。 颜色设置：“显示类型”设置为“均分显示”时，会根据颜色设置的数量，将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的背景颜色。“显示类型”设置为“区间显示”时，可设置不同的区间，当标签值落在对应的区间内，显示对应的背景颜色，区域范围外的图标将不显示。 填充方式：图标的填充方式，支持普通、居中、拉伸和平铺。“背景样式”设置为“图片”时，显示该配置项。 背景图片：“显示类型”设置为“均分显示”时，会根据背景颜色的数量，将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的背景图片。“显示类型”设置为“区间显示”时，可设置不同的区间，当标签值落在对应的区间内，显示对应的背景图片，区域范围外的图标将不显示。 选中色：设置标签鼠标悬浮时的字体颜色，同时也是交互动作中，高亮标签的颜色。 上下偏移：设置标签根据点经纬度的上下偏移。 左右偏移：设置标签根据点经纬度的左右偏移。 标签图标 标签图标：是否显示标签图标。 显示类型： 标签图标的显示类型，支持均分显示和区间显示。 填充方式：图标的填充方式，支持普通、居中、拉伸和平铺。 图标图片：“显示类型”设置为“均分显示”时，会根据图标图片的数量，会将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的图标。“显示类型”设置为“区间显示”时，可设置不同的区间，当标签值落在对应的区间内，显示对应的图标，区域范围外的图标将不显示。 图片宽度：设置图片的宽度。 图片高度：设置图片的高度。 上下偏移：设置图标根据点经纬度的上下偏移。 左右偏移：设置图标根据点经纬度的左右偏移。 图11 新建柱状图层 基本配置 类型：固定为“柱状图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层样式 显示类型：设置图标的显示类型，支持均分显示和区间显示。 颜色设置：根据颜色设置的数量，会将值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的颜色。“显示类型”设置为“均分显示”时，才显示该配置项。 填充颜色：根据设置不同的区间，当值落在对应的区间内，显示对应的颜色值，区域范围外的将不显示。“显示类型”设置为“区间显示”时，才显示该配置项。 选中色：设置鼠标悬浮和单击颜色，同时也是交互动作中，高亮柱体的颜色。 边数：柱状图的边数，边数越多越接近圆柱形。如果希望做成圆柱体效果，可以将此参数设置为一个较大的值，例如32。 单位：图层的单位，支持像素和米。 半径：棱柱的半径。 高度范围：棱柱的高度。 图层标签 标签：是否开启图标标签。 标签悬浮：开启时，图标鼠标悬浮时显示标签。关闭时，标签常显。 系列名：标签是否显示系列名，对应静态数据中的“label”字段。 系列名字体：设置系列名的字体、大小和颜色等。“标签悬浮”设置为“开启”时，显示该配置项。 数值：标签是否显示数值，对应静态数据中的“value”字段。 数值字体：设置数值的字体、大小和颜色。“标签悬浮”设置为“开启”时，显示该配置项。 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图12 新建飞线图层 基本配置： 类型：固定为“飞线图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层样式 颜色样式：设置飞线的颜色样式，支持单色和渐变色。 显示类型：设置飞线颜色的显示类型，支持均分显示和区间显示。 颜色设置：根据颜色设置的数量，会将飞线值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的颜色。“显示类型”设置为“均分显示”时，才显示该配置项。 填充颜色：根据设置不同的区间，当飞线值落在对应的区间内，显示对应的颜色值。区域范围外的飞线将不显示。“显示类型”设置为“区间显示”时，才显示该配置项。 选中色：设置飞线鼠标悬浮颜色，同时也是交互动作中，高亮飞线的颜色。 飞线弧度：设置飞线的弧度，只在3D模式下生效。 起点宽度：设置飞线的起点宽度。 终点宽度：设置飞线的终点宽度。 动画效果 脉冲效果：是否开启飞线的脉冲效果。 脉冲点长度：设置脉冲长度，开启脉冲效果后显示该配置项。 脉冲点速度：设置脉冲速度，开启脉冲效果后显示该配置项。 头部颜色：设置脉冲的头部颜色，开启脉冲效果后显示该配置项。 尾部颜色：设置脉冲的尾部颜色，开启脉冲效果后显示该配置项。 气泡效果：是否开启飞线终点的气泡效果。 气泡样式：设置气泡的颜色，支持蓝色、黄色、绿色、红色，开启气泡效果后显示该配置项。 气泡半径：设置气泡的半径，开启气泡效果后显示该配置项。 动画速度：设置气泡的动画速度，开启气泡效果后显示该配置项。 图层标签 标签悬浮：飞线鼠标悬浮时，是否显示标签。 系列名：标签是否显示系列名。 系列名内容：请输入系列名内容。 系列名字体：设置系列名的字体、颜色和大小等。 数值：标签是否显示数值，对应静态数据中的“value”字段。 数值字体：设置数值的字体、颜色和大小等。 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图13 新建基础热力图层 基本配置 类型：固定为“基础热力图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层样式 颜色设置：设置图层的颜色，单击“新增颜色设置”，可添加新的颜色。 最大值：热力值的最大值，默认为数据中的最大值，也可以自定义设置，会控制热力的最热区域的显示效果。 最小值：热力值的最小值，默认为数据中的最小值，也可以自定义设置，会控制热力的最冷区域的显示效果。 单位：热力的单位，支持“像素”单位和“米”单位的热力聚合。 半径：设置热力的聚合半径。 图14 设置半径 高度：设置热力最高点的高度值。 图15 设置高度 图16 新建区域热力图层 基本配置 类型：固定为“区域热力图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层样式 显示类型：设置图标的显示类型，支持均分显示和区间显示。 颜色设置：根据颜色设置的数量，会将值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的颜色。“显示类型”设置为“均分显示”时，才显示该配置项。 填充颜色：根据设置不同的区间，当值落在对应的区间内，显示对应的颜色值，区域范围外的将不显示。“显示类型”设置为“区间显示”时，才显示该配置项。 选中色：设置鼠标单击和悬浮颜色，同时也是交互动作中，高亮区域的颜色。 区域边框：设置行政边界的颜色和边框大小。 图层标签 标签：是否开启图标标签。 标签悬浮：开启时，图标鼠标悬浮时显示标签。关闭时，标签常显。 系列名：标签是否显示系列名，对应静态数据中的“label”字段。 系列名字体：设置系列名的字体、大小和颜色等。“标签悬浮”设置为“开启”时，显示该配置项。 数值：标签是否显示数值，对应静态数据中的“value”字段。 数值字体：设置数值的字体、大小和颜色等。“标签悬浮”设置为“开启”时，显示该配置项。 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。

配置 在配置中，设置地图组件的基本信息、地图样式、地图控件和地图控制等。 图4 配置 地图基本配置 地图密钥：输入地图的服务密钥，请参考高德开放平台中操作自行到官网申请。 安全密钥：如果您的地图密钥是在2021年12月02日以后申请的key，需要配合安全密钥一起使用。如何使用安全密钥，请参见JS API 安全密钥使用。 地图中心：设置地图中心的设置类型，支持自定义和行政区。 行政区编码：设置行政区或行政区对应的编码，如何下载行政区编码，请参见Web服务 API 相关下载。“地图中心”设置为“行政区”时，才显示该配置。 地图中心经度：设置地图中心点的经度。“地图中心”设置为“自定义”时，才显示该配置。 地图中心纬度：设置地图的中心点的纬度。“地图中心”设置为“自定义”时，才显示该配置。 缩放级别：设置地图的缩放层级。“地图中心”设置为“自定义”时，才显示该配置。 缩放范围：设置地图可以缩放的范围，取值范围为2~26。 POI显示：是否开启POI显示，关闭后不会显示全部地图文字和POI信息。 地图样式 底图样式：设置底图的样式类型，支持标准地图和卫星图。 显示要素：设置地图显示的元素，支持区域面、道路、建筑物和标注。当“底图样式”设置为“标准地图”时，才显示该配置项。 显示路网：是否显示路网，当“底图样式”设置为“卫星图”时，才显示该配置项。 实时路况：是否显示实时路况。 视图模式：设置地图的视图模式，支持2D平面图和3D平面图。 俯仰角度：设置地图的初始化俯仰角度。“视图模式”设置为“3D平面图”时，才显示该配置项。 地图样式：设置地图样式模板，支持标准模板和自定义模板。 标准模板：设置地图标准的样式模板，可选择高德地图支持的11种模板，即标准、幻影黑、月光银、远山黛、草色青、雅士灰、涂鸦、马卡龙、靛青蓝、极夜紫和酱籽。 自定义地图：根据实际需求自定义地图。 如何自定义地图，请参见自定义地图。 区域掩模 区域掩模：是否显示区域内的掩模。开启后，只显示区域内的图层和覆盖物。 掩模边界：掩模边界信息的获取方式，支持直接设置行政区和geojson两种方式。 行政区编码：设置行政区或行政区对应的编码，如何下载行政区编码，请参见Web服务 API 相关下载。“掩模边界”设置为“行政区”时，才显示该配置项。 选择数据：通过上传geojson来设置掩模的边界信息。“掩模边界”设置为“geojson”时，才显示该配置项。 掩模边框：设置掩模边框的颜色和大小。 地图行政区 行政区：是否高亮显示行政区。 行政区范围：设置行政区范围的获取方式，支持直接设置行政区和geojson两种方式。 行政区编码：设置行政区或行政区对应的编码，如何下载行政区编码，请参见Web服务 API 相关下载。“行政区范围”设置为“行政区”时，才显示该配置项。 选择层级：设置高亮行政区的下钻范围，支持显示省级、显示市级和显示区级。选择的层级必须低于设置的行政区，例如，行政区编码设置为A市，选择层级只能设置为市级或者区级才会有效。“行政区范围”设置为“行政区”时，才显示该配置项。 选择数据：通过上传geojson，来设置行政区范围。“行政区范围”设置为“geojson”时，才显示该配置项。 层级颜色：设置高亮行政区的颜色。 行政区边框：设置高亮行政区的边框颜色。 地图控件 缩放：开启后，地图右下角会添加缩放控件。 图5 开启缩放效果 旋转：开启后，地图右上角会添加旋转控件。 图6 开启旋转效果 比例尺：开启后，地图左下角会添加比例尺控件。 图7 开启比例尺效果 地图控制 拖拽：设置地图是否支持拖拽。 缩放：设置地图是否支持缩放。 双击放大：设置地图是否支持双击放大。“缩放”设置为“开启”时，才显示该配置项。 旋转：设置地图是否支持旋转。

通过全局变量实现组件数据动态变化 参考关系型数据库数据源中操作，新建关系型数据库数据源。 图1 新建关系型数据库数据源 参考关系型数据库中操作，新建关系型数据库数据集（新建变量value）。 图2 新建关系型数据库数据集 新建全局变量。 参考使用空白画布新建页面中操作，新建大屏空白页面。 在大屏开发页面，单击，新建全局变量，如hotSelect。 图3 新建全局变量hotSelect 在画布中，拖入地图组件和下拉选择框组件。 配置地图组件。 选中组件，单击组件上方的，设置组件数据来源。 在全局变量中，选择3中创建的全局变量hotSelect。 图4 选择全局变量hotSelect 在组件预览中，从表格字段中，拖拽对应的字段到配置中。 设置完成后，单击“保存”。 选择地图组件，单击组件上方的，显示热力图层，数据标题设置为“子公司完成率”，显示类型设置为“区间显示”，并设置填充颜色。 配置下拉选择框组件。 选中组件，单击组件上方的，进入组件数据配置页面。 数据类型选择“静态数据”，并输入如下示例数据。 { "dataValue": [{ "value": "子公司A完成率", "label": "子公司A完成率" }, { "value": "子公司B完成率", "label": "子公司B完成率" }, { "value": "子公司C完成率", "label": "子公司C完成率" } ] } 其中，“value”字段需要和数据列名保存一致。 设置完成后，单击“保存”。 配置下拉选择框交互动作。 选中下拉选择框组件，单击组件上方的，进入组件交互设置页面。 在“作为触发器”中，单击“+ 交互事件”，选择“当选中选项时”。 在“响应动作”中，单击“+ 响应动作”，选择“赋值全局变量”。 在“动作详情”中，选择3中定义的全局变量。 图5 选择全局变量 单击“确定”后，单击“完成”。 保存页面后，单击，预览效果。 图6 效果预览