华为云用户手册

前提条件 需要获取待纳管数据库的管理员账号及密码。 需要具备AppStage服务运维岗位权限、运维管理员权限或基础运维岗位权限，权限申请操作请参见申请权限。 已将弹性云服务器主机设置为执行机。 同VPC执行机：将待纳管的数据库所在VPC下的主机设置为执行机。 跨VPC执行机：将待纳管数据库的服务下所属其他VPC的主机设置为执行机。 数据库纳管时系统会优先使用该数据库同VPC下的执行机，如果同VPC下没有执行机，随机选择服务关联的其他VPC下的执行机。跨VPC时，需保证执行机所在VPC与待接入运维中心的数据库所在VPC网络互通。请参见对等连接和安全组，连通服务关联的所有VPC，放通数据库和服务下所有执行机的安全组。 纳管 GaussDB数据库 前，请参考安全和认证将华为云 GaussDB 数据库的password_encryption_type参数修改为0，表示采用md5方式对密码加密，然后参考重置GaussDB实例管理员密码重置密码。

关联组织 登录AppStage控制台。 在左侧导航，选择“总览”，在页面顶部根据提示单击“去关联”；或在“应用平台使用向导”区域的“关联组织”节点单击“去关联”以关联使用AppStage的组织： 已开通过组织，则单击“去关联”，选择租户要关联的组织。 未开通过组织，执行如下操作。 单击“创建组织”。 在“创建组织”页面，设置组织名称。 名称由1~60个中文、英文、数字及合法字符组成。 设置组织的 域名 。 域名是指网址 (如www.example.com) 中“www.”之后的内容，以及电子邮件地址 （如《用户名》@example.com）中“@”符号之后的内容。 域名设置后组织管理员为组织创建成员时，创建的成员账号默认带有域名后缀，如设置的组织域名为abc.orgid.top，创建的成员账号为xxx@abc.orgid.top，设置的组织域名为example.com，创建的成员账号为xxx@example.com。 没有域名，域名可以输入组织简称，使用2~30位字母、数字和.-或它们的组合，如abc，后缀名为固定的.orgid.top，如图1所示。 图1 设置组织域名 已有域名，单击“使用自有域名”，输入自有域名，例如example.com，如图2所示。 图2 使用自有域名 阅读并勾选相关服务协议，单击“创建”。 组织创建成功。 单击“去关联”，选择租户要关联的组织。

相关操作 在应用平台控制台“总览”页面，支持的其他操作请参考表1。 表1 相关操作 操作 说明 快速订购 在“套餐详情”区域，单击“快速订购”。购买未开通的资源。 变更规格 在“套餐详情”区域，单击“变更规格”。 续费 在“套餐详情”区域，单击“续费”。 退订 退订已购买的包年包月资源，适用于退订AI原生应用引擎/开发中心/运维中心/运营中心/的包年/包月资源。 在“套餐详情”区域，单击“退订”。 退订已购买的按需计费资源，适用于退订AI原生应用引擎的按需计费资源。 在应用平台控制台左侧导航栏选择“AI原生应用引擎”，在AI原生应用引擎详情页面的“我的资源”区域的资源列表中，单击需要停止计费的资源“操作”列的“退订”。

购买AppStage 打开AppStage官网页，单击“控制台”，并登录。 在应用平台控制台首页，单击“立即购买”。 根据需求购买。 购买AI原生应用引擎 选择“AI原生应用管理”页签。 单击“按需计费”或“包年/包月”。 按需计费：在“模型”区域，勾选要购买的资源。 包年包月：选择套餐包并配置规格，选择购买时长，根据需求勾选“自动续费”。 在“协议许可”区域勾选“我已阅读并同意《应用平台AppStage服务声明》”，单击“下一步”。 在“确认配置”页面确认订购的产品信息，单击“去支付”。 在“支付方式”区域，选择支付方式，单击“确认付款”。 支付完成后，系统会提示“订单支付成功”。 购买开发中心/运维中心/运营中心 选择“应用生命周期管理”页签。 在“选择产品类型”区域，请根据业务需求选择所需产品并配置规格。 （可选）在“选择增量包类型”区域，可以选择运维中心/运营中心的扩展包或增量包，并配置规格。 在“购买时长”区域，选择购买时长，根据需求勾选“自动续费”。 在“协议许可”区域勾选“我已阅读并同意《应用平台AppStage服务声明》”。 单击右下角“立即购买”。 在“确认配置”页面确认订购的产品信息，单击“去支付”。 在“支付方式”区域，选择支付方式，单击“确认付款”。 支付完成后，系统会提示“订单支付成功”。

相关操作 在“权限管理”页面，支持的其他操作请参考表1。 表1 相关操作 操作 步骤 延期权限 在“我的权限”页面，勾选需要延期的权限，单击“延期申请”。 取消权限 在“我的权限”页面，勾选需要取消的权限，单击“取消权限”。 查看权限申请信息 在“我的申请”页面，可以查看权限申请状态、审批结果信息。 查看详情：可以查看申请人的详细信息，以及审批人。可撤回“申请状态”为“审批中”的权限申请。 复制审批链接：复制审批链接提供给审批人进行审批。 查看我的权限变更记录 在“我的权限变更记录”界面，通过日期查询权限变更记录。 修改岗位/角色 在“岗位/角色配置”页面，在对应的“操作”列下，单击“编辑”。 “岗位/角色配置”页面仅组织管理员可见。 仅运维中心的一级审批人、二级审批人、三级审批人的“岗位/角色”“岗位/角色描述”可修改。 在岗位/角色中新增成员 在“岗位/角色配置”页面，在对应的“操作”列下，单击“成员列表”。 “岗位/角色配置”页面仅组织管理员可见。

方案架构 系统升级时，若采用蓝绿部署方式，开发人员需进行如下操作： 先将A边服务器（原蓝环境）下线，同时访问流量将全部切分到B边服务器，此时对A边服务器进行升级操作。 A边服务器升级完毕后，将A边服务器设为灰度测试环境，由测试人员对A边服务器进行灰度验证。 灰度验证完毕且功能正常后，A边业务服务器（绿环境）正式上线，并将所有流量切分到A边业务服务器，此时蓝绿部署完毕。 在服务运行过程中，如果A边服务器出现紧急情况，执行蓝绿倒换实现业务快速恢复。 图1 灰度发布原理 若采用金丝雀灰度部署方式，再重复前面的操作，将B边服务器进行升级，并完成灰度测试及正式上线，此时就完成新系统的灰度发布。

附录 A边节点下线-代码示例 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; log_format main '$time_local|$remote_addr[$remote_port]|$request|$request_method|$content_length|' '$content_type|$http_referer|$host|$http_x_forwarded_for|' '$http_true_client_ip|$server_name|$request_uri|$server_addr|$server_port|' '$status|$request_time|$upstream_addr|$upstream_response_time|$cookie_domain_tag'; access_log logs/access.log main; #访问日志：存放路径，日志级别。 error_log logs/error.log; #错误日志：存放路径。 sendfile on; keepalive_timeout 65; upstream portal { # 下面填入A主机IP及应用服务端口 #server X.X.X.X:X; #A节点下线 # 下面填入B主机IP及应用服务端口 server X.X.X.X:X; } upstream portal_test { # 下面填入A主机IP及应用服务端口 server X.X.X.X:X; # 下面填入B主机IP及应用服务端口 server X.X.X.X:X; } server { listen XXX;#填入Nginx端口 server_name localhost; location / { set $backend portal; set $test portal_test; #下面填入灰度验证机器IP #if ( $remote_addr ~* "X.X.X.X") { # set $backend $test; #} proxy_pass https://$backend; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } } 部署节点 # 获取应用进程id pid=`ps -ef | grep app_name | grep -v grep | awk '{print $2}'` if [ -z "$pid" ]; then echo "[app_name pid is not exist.]" else echo "app_name pid: $pid " # 停止该进程 kill -15 $pid fi # 重新启动应用，可通过执行部署脚本和部署命令两种方式启动应用，如下： # 方式一：通过执行部署脚本启动应用 # sh startup.sh # 方式二：通过执行命令启动应用，建议采用nohup后台启动方式 # nohup java -jar /usr/local/app/SpringbootDemo.jar & A边节点灰度上线-代码示例 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; log_format main '$time_local|$remote_addr[$remote_port]|$request|$request_method|$content_length|' '$content_type|$http_referer|$host|$http_x_forwarded_for|' '$http_true_client_ip|$server_name|$request_uri|$server_addr|$server_port|' '$status|$request_time|$upstream_addr|$upstream_response_time|$cookie_domain_tag'; access_log logs/access.log main; #访问日志：存放路径，日志级别。 error_log logs/error.log; #错误日志：存放路径。 sendfile on; keepalive_timeout 65; upstream portal { # 下面填入A主机IP及应用服务端口 #server X.X.X.X:X; #A节点下线 # 下面填入B主机IP及应用服务端口 server X.X.X.X:X; } upstream portal_test { # 下面填入A主机IP及应用服务端口 server X.X.X.X:X; #A节点灰度上线 # 下面填入B主机IP及应用服务端口 #server X.X.X.X:X; } server { listen XXX;#填入Nginx端口 server_name localhost; location / { set $backend portal; set $test portal_test; #下面填入灰度验证机器IP if ( $remote_addr ~* "X.X.X.X") { set $backend $test; } proxy_pass https://$backend; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } } B边节点下线-代码示例 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; log_format main '$time_local|$remote_addr[$remote_port]|$request|$request_method|$content_length|' '$content_type|$http_referer|$host|$http_x_forwarded_for|' '$http_true_client_ip|$server_name|$request_uri|$server_addr|$server_port|' '$status|$request_time|$upstream_addr|$upstream_response_time|$cookie_domain_tag'; access_log logs/access.log main; #访问日志：存放路径，日志级别。 error_log logs/error.log; #错误日志：存放路径。 sendfile on; keepalive_timeout 65; upstream portal { # 下面填入A主机IP及应用服务端口 server X.X.X.X:X; # 下面填入B主机IP及应用服务端口 #server X.X.X.X:X; #B节点下线 } upstream portal_test { # 下面填入A主机IP及应用服务端口 server X.X.X.X:X; # 下面填入B主机IP及应用服务端口 server X.X.X.X:X; } server { listen XXX;#填入Nginx端口 server_name localhost; location / { set $backend portal; set $test portal_test; #下面填入灰度验证机器IP #if ( $remote_addr ~* "X.X.X.X") { # set $backend $test; #} proxy_pass https://$backend; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } } B边节点灰度上线-代码示例 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; log_format main '$time_local|$remote_addr[$remote_port]|$request|$request_method|$content_length|' '$content_type|$http_referer|$host|$http_x_forwarded_for|' '$http_true_client_ip|$server_name|$request_uri|$server_addr|$server_port|' '$status|$request_time|$upstream_addr|$upstream_response_time|$cookie_domain_tag'; access_log logs/access.log main; #访问日志：存放路径，日志级别。 error_log logs/error.log; #错误日志：存放路径。 sendfile on; keepalive_timeout 65; upstream portal { # 下面填入A主机IP及应用服务端口 server X.X.X.X:X; # 下面填入B主机IP及应用服务端口 #server X.X.X.X:X; #B节点下线 } upstream portal_test { # 下面填入A主机IP及应用服务端口 #server X.X.X.X:X; # 下面填入B主机IP及应用服务端口 server X.X.X.X:X; #B节点灰度上线 } server { listen XXX;#填入Nginx端口 server_name localhost; location / { set $backend portal; set $test portal_test; #下面填入灰度验证机器IP if ( $remote_addr ~* "X.X.X.X") { set $backend $test; } proxy_pass https://$backend; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } } 节点上线-代码示例 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; log_format main '$time_local|$remote_addr[$remote_port]|$request|$request_method|$content_length|' '$content_type|$http_referer|$host|$http_x_forwarded_for|' '$http_true_client_ip|$server_name|$request_uri|$server_addr|$server_port|' '$status|$request_time|$upstream_addr|$upstream_response_time|$cookie_domain_tag'; access_log logs/access.log main; #访问日志：存放路径，日志级别。 error_log logs/error.log; #错误日志：存放路径。 sendfile on; keepalive_timeout 65; upstream portal { # 下面填入A主机IP及应用服务端口 server X.X.X.X:X; # 下面填入B主机IP及应用服务端口 server X.X.X.X:X; } upstream portal_test { # 下面填入A主机IP及应用服务端口 server X.X.X.X:X; # 下面填入B主机IP及应用服务端口 server X.X.X.X:X; } server { listen XXX;#填入Nginx端口 server_name localhost; location / { set $backend portal; set $test portal_test; #下面填入灰度验证机器IP #if ( $remote_addr ~* "X.X.X.X") { # set $backend $test; #} proxy_pass https://$backend; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }

实践案例指引 表1 服务最佳实践指引 实践 描述 内网部署 通过代理主机进行内网部署 本实践提供了将应用通过代理主机部署到内网的主机或服务器的完整操作指导，旨在帮助您实现应用的内网部署。 公网部署 通过代理主机实现Windows主机部署 本实践绍如何将应用通过代理主机部署到华为云Windows主机。 灰度部署 基于Nginx实现灰度发布 本实践基于Nginx负载均衡机制，实现应用的蓝绿发布和灰度发布。 基于Kubernetes Nginx-Ingress实现应用的灰度发布 本实践基于Kubernetes原生的特性实现灰度发布。 虚拟机部署 通过自托管资源池实现跨Region虚拟机部署 本实践介绍如何将应用通过自托管资源池部署到华为云其他Region的主机。 云下IDC部署 通过自托管资源池部署应用至云下IDC 本实践介绍如何将应用通过自托管资源池部署到云下IDC的主机或容器集群。 HE2E DevOps实践 HE2E DevOps实践：部署应用 本实践以“DevOps全流程示例项目”为例，介绍如何部署应用至CCE与E CS 。

配置 在配置中，对下拉选择框和下拉弹出框进行设置。 图4 配置 下拉选择框设置 开启多选：开启后，支持自定义默认选项。 默认选择项：下拉框默认的选择项。 字体：下拉框中字体的大小、颜色等设置。 背景颜色：设置下拉框的背景颜色。 边框颜色：默认状态下，下拉框边框的颜色。 边框聚焦颜色：鼠标选中下拉框时，边框的颜色。 边框悬浮颜色：鼠标悬浮在下拉框上时，边框的颜色。 占位符：没有输入内容时，展示的文字内容。 是否禁用：是否禁用该下拉框，禁用后，用户不可选择内容。 是否可输入：禁用后，只能在下拉框中选择，无法输入查找。 图5 设置后效 下拉弹出框设置 最大高度：设置下拉弹出框的最大高度。 背景颜色：设置下拉弹出框的背景色。 字体颜色：设置下拉弹出框中字体的颜色。 选中态背景颜色：设置选中某项内容时，背景的颜色。 选中态字体颜色：设置选中某项内容时，字体的颜色。 鼠标悬浮时背景颜色：设置鼠标悬浮在某项内容上时，背景的颜色。 鼠标悬浮时字体颜色：设置鼠标悬浮在某项内容上时，字体的颜色。

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

购买实例 进入购买Astro大屏应用实例页面。 选择购买的实例版本和购买时长，单击“立即购买”。 购买实例时，支持同时购买页面扩容包，也可以在实例购买后，对页面进行扩容。页面扩容包计费规则，请参见计费项。 图1 购买实例（基础版） 图2 购买实例（专业版） 图3 购买实例（企业版） 选择支付方式，单击“去在线支付”，完成订单支付。 图4 确认付款 订单支付成功后，单击“返回Astro轻应用控制台”。 在Astro大屏应用控制台中，可以查看Astro大屏应用的安装状态。当“实例状态”变为“运行中”时，说明实例已安装好，可以正常使用。 图5 Astro大屏应用控制台

配置 在配置中，设置趋势的样式。 图4 配置 内边距：设置图表和组件边框之间的距离，单位为px。 对齐方式：标题的对齐方式，支持左对齐、居中和右对齐。 显示标题：是否显示组件标题。 标题内容：“显示标题”开关打开后，设置标题内容。 标题字体：“显示标题”开关打开后，设置标题字体、文字粗细、文字大小和文字颜色。 显示数字：是否显示数字。 数字字体：“显示数字”开关打开后，设置数字字体、数字文字大小、数字文字粗细和数字文字颜色。 显示趋势：图表中是否显示趋势图标。 趋势图标大小：趋势图标的大小。 上升趋势数字字体：设置上升趋势数字的字体、大小和颜色等。 持平趋势数字字体：设置持平趋势数字的字体、大小和颜色等。 下降趋势数字字体：设置下降趋势数字的字体、大小和颜色等。 趋势位置：趋势相对于数字的位置。

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

配置 在配置中，设置组件的年月日、背景颜色和时间条颜色等。 图4 配置 星期 显示：是否显示星期。 字体：设置星期字体、颜色和大小等。 年月日 显示：是否显示年月日。 字体：设置年月日字体、颜色和大小等。 时间 显示：是否显示时间。 字体：时间的字体、文字大小和文字颜色等。 卡片背景色：设置组件卡片的背景颜色。 卡片宽度：卡片的宽度，取值范围为[0, 200]，单位为px。 卡片高度：卡片的高度，取值范围为[0, 200]，单位为px。 卡片左间距：卡片和组件左边框的间距，取值范围为[0, 200]。 卡片右间距：卡片和组件右边框的间距，取值范围为[0, 200]。 内部背景颜色：设置组件内部背景颜色。

图形 图形是指组件中，实现 数据可视化 的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色：设置组件中，图表的图形颜色。 统一配置 数据系列：是否显示该系列数据。如果不显示，会隐藏该组件中对应的系列数据。 南丁格尔图：是否使用南丁格尔图。 内半径：设置饼图内半径的值，单位%。 外半径：设置饼图外半径的值，单位%。 圆心横坐标：设置饼图圆心横坐标的值，单位%。 圆心纵坐标：设置饼图圆心纵坐标的值，单位%。 排布顺序：扇区可按顺时针或逆时针排布。 起始角度：扇区起始角度。 最小角度：扇区最小角度。 鼠标悬停：鼠标放在扇区时，该扇区是否放大显示。 所有标签设置：设置为显示后，图表中会显示标签。 所有标签悬浮设置：鼠标悬浮在对应数据系列上时，标签是否显示。 标签位置：标签显示位置，如内部、外部或中间。 标签视觉引导线是否展现：设置为“是”时，标签前会添加引导线。 引导线长度：设置标签引导线的长度。 标签内容：设置标签显示的内容，如数据值、百分比、系列名。 标签文字：设置标签内容的字体、大小和颜色等。 描边：实心圆饼图间系列和整体范围的描边样式。 设置背景：设置饼图的背景。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 下标：数据系列所在的位置。 初始选中：数据项初始是否被选中。 颜色样式：数据系列的颜色样式。 单色：可设置正常颜色和高亮下颜色。 渐变色：可设置渐变样式、渐变方向、起始颜色和结束颜色。 纹理：设置为“纹理”时，需要上传纹理图片，支持设置所有数据项纹理重复或者不重复。 普通标签：未选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值“635”。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比“67.2”%。 普通标签字体：设置标签内容的字体、颜色和大小等。 高亮标签：选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值635。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比67.2%。 高亮标签字体：设置标签内容的字体、颜色和大小等。

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图5 图例 统一配置 图例：是否显示图例，如工程管理、环境管理。图例文字内容来源于数据模型下“s”的取值。 水平对齐方式：设置图例的水平对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 垂直对齐方式：设置图例的垂直对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 排列方向：设置图例的排列方向，支持水平和垂直两种方式。 类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。设置为“滚动翻页”时，支持设置翻页箭头的宽高、图标默认颜色、图标选中颜色和页码字体。 图例总宽高：设置图例项的宽度和高度，单位为“%”。 图例项宽度：设置图例的宽度，支持自动和自定义。 图例间隔：设置图例项之间的间隔。 图例标记 图例标记：设置图例前图标的形状。 标记宽高：设置图例前图标的宽度和高度。 图例系列名 字体：设置图例的字体、颜色和大小。 图例字符：设置图例显示的字符数，支持全显和省略。设置为“省略”时，支持设置图例显示的文字数量。 数据值：图例中是否显示数值。设置为“显示”时，可设置如下参数。 字体：设置图例中数值的字体、大小和颜色等。 数值左间距：设置系列名和数据之间的间距。 前缀：数值前是否显示前缀。 前缀内容：设置前缀的显示内容。 前缀字体：设置前缀的字体、大小和颜色等。 前缀右间距：设置前缀和数值之间的间距。 后缀：数值后是否显示后缀。 后缀内容：设置后缀的显示内容。 后缀字体：设置后缀的字体、大小和颜色等。 后缀左间距：设置后缀和数值之间的间距。 百分比：是否显示百分比。设置为“显示”时，支持设置如下参数。 数字字体：设置百分比中数值的字体、大小和颜色等。 百分号字体：设置百分比中百分号的字体、大小和颜色等。 百分号左间距：设置数值和百分比之间的间距。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题 标题：是否显示该组件的标题，如“π巡报警”。 内容：自定义组件标题的内容。 字体：设置组件标题的字体、大小和颜色等。 对齐：标题相对于组件的对齐方式。 标题背景色：设置标题的背景颜色。 内边距：标题与组件框上下左右四个边界之间的距离，单位默认px。 标题偏移：组件标题与满月饼图之间的偏移量。 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见图2），默认为0，即铺满整个组件。 参考模板：系统预置的组件样式模板，支持默认和带标签两种。 边框圆角：边框的圆角，四个角弧度取值范围为0~500，单位px。 图表背景：图表的背景颜色。 图表标题：设置为“显示”时，可自定义标题的内容、位置、字体大小和颜色等。

操作步骤 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在“项目列表”中，单击对应项目上的。 设置项目封面，单击“确定”。 图片默认为匿名可访问，请勿上传包含敏感数据的图片。 图1 设置项目封面 页面缩略图：使用项目中，页面的缩略图，作为当前项目的封面。 上传封面：单击“上传封面”，从本地上传图片作为项目的封面。建议使用596*328尺寸的图片。 默认封面：使用系统提供的默认封面，作为当前项目的封面。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 图形 统一配置 图标选中色：设置选中前台排序、前台筛选时，图标的显示颜色。 图8 选中前台排序时图标显示的颜色 前台排序：是否开启前台排序功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行排序。 图9 在前台对数据进行排序 前台筛选：是否开启前台筛选功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行筛选。 图10 在前台对数据进行筛选 数据系列：数据系列是一个数组，通常包含多个系列，即通过一个或多个系列配置循环渲染。 图11 数据系列 在数据系列中，拖动某一个系列可以和其他系列组成一个层级，最多支持3层。 图12 新建层级 图13 新建图层 原数据名：原始数据中默认的系列名称，可通过设置“列名”，进行修改。文字内容来源于数据模型的取值，如组件名称、时延和成功率。 类型：选择数据的类型，如单行文本、多行文本、数字、趋势、图片、迷你柱状图、迷你折线图和迷你进度条。不同的类型，展示的参数所有不同，请以界面实际显示的为准。本章节以单行文本为例，进行介绍。选择迷你柱状图和迷你折线图时，支持放大图表显示。 图14 图表放大显示 列名：自定义数据中的系列名称。 数据系列：在图表中，是否显示数据系列。例如，组件名称系列中，单击开启，图表中将会显示组件名称这列，如果关闭，将会隐藏掉该列。 图15 开启数据系列效果 图16 关闭数据系列效果 前台排序：是否开启前台排序功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行排序。“数据系列”设置为“开启”时，才会展示该配置。 图17 在前台对数据进行排序 前台筛选：是否开启前台筛选功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行筛选。 图18 在前台对数据进行筛选 列宽占比(%)：设置对应系列在图表中的占比。 表头对齐方式：设置表头的对齐方式，如居中、左对齐等。 表头背景色：设置表头的背景颜色。 表头字体：设置表头的字体、颜色和大小等。 内容对齐方式：设置表格内容的对齐方式，如居中、左对齐等。 内容字体：设置表格内容的字体、颜色和大小等。

配置 在配置中，设置组件的背景色、表格行数、表头和单元格等。 图5 配置 全局样式 背景色：设置表格的背景颜色。 表格行数：当前表格可视高度展示的数据行数。 边框：设置表格的边框样式。 表头设置 溢出文本：设置表格中超长文本的显示样式，如显示为省略号和换行显示。 表头对齐方式：设置表头的对齐方式，如左对齐、居中或右对齐。 表头行高占比(%)：设置表头行高的占比。 表头背景色：设置表头的背景颜色，所有列的表头背景色同步修改。 表头字体：设置表头字体，所有列的表头字体同步修改。 边框：设置表头的边框样式。 单元格 溢出文本：设置表格中超长文本的显示样式，如显示为省略号、换行显示和滚动显示。 内容对齐方式：设置单元格内的内容对齐方式，如左对齐、居中或右对齐，所有内容对齐方式同步修改。 内容字体：设置单元格的内容字体，所有列的内容字体同步修改。 边框：设置单元格的边框样式。 树状表格 懒加载：开启懒加载时，必须配置全局变量和交互事件。 展开层级：选择树状表格的展开层级。 新增条件格式：单击“新增条件格式”，可增加条件格式。如图6中所示，该设置表示成功率列满足设置的条件（等于80.4%）时，组件名称列显示为红色，否则显示为正常颜色。 树状表格的条件格式，只有在关联关系以及响应数据列是单行文本和数字类型时才会生效。 图6 新增条件格式

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右，如图2）的距离，默认为0，即铺满整个组件。 标题设置 标题：是否显示组件标题。 标题内容：输入标题内容。 标题行高度：设置标题的行高，单位px。 背景色：设置标题背景色。 文本位置：设置标题中文本位置，支持居中、靠左、靠右或自定义。 字体：设置标题的字体、大小和颜色等。 表格操作 列显示/隐藏：在运行态是否可以设置显示/隐藏的列。开启“列显示/隐藏”后，可以设置“悬浮显示”、“图标色”和“图标选中色”。 图4 列显示效果 表格导出：是否开启表格导出功能。开启表格导出后，可以设置“悬浮显示”、“图标色”和“图标选中色”。 下载数据无父子集关系。 悬浮显示：开启悬浮显示后，鼠标移动到表格组件上时，才会显示对应的按钮。 图标色：设置按钮的图标颜色。 图标选中色：设置选中按钮时，按钮图标的颜色。

前提条件 已参考创建 IAM 用户中操作，创建IAM用户。默认情况下，新创建的IAM用户没有任何权限。您需要为其授予权限，或将其加入用户组，并给用户组授权，用户组中的用户将获得用户组的权限。创建用户组时，请给用户组赋予“Astro Canvas InstanceManagement”系统策略，您也可以直接使用系统预置的admin用户组。 图1 赋予用户组Astro Canvas InstanceManagement系统策略 IAM用户创建后，请使用IAM用户登录AstroCanvas。登录后会提示图2中所示信息，此时您需要按照本章节操作，为IAM用户进行授权。授权后，IAM用户才可正常登录AstroCanvas进行可视化应用的开发。 图2 没有该服务访问权限

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题：组件是否显示标题。设置为显示时，支持设置如下属性。 内容：自定义标题的内容。 字体：设置自定义标题的字体、大小和颜色等。 对齐：设置标题的对齐方式，如左对齐、居中或右对齐。 标题背景色：设置标题的背景颜色。 内边距： 设置标题距离组件上下左右边界的距离。 图4 设置上边距 标题偏移量：设置标题与指标之间的距离。 图5 标题偏移量 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题 标题：是否显示该组件标题。 内容：组件标题内容。 字体：文字的字体、大小、颜色设置。 对齐：标题相对于组件的对齐方式。 标题背景色：设置标题的背景颜色。 内边距：标题与组件框上下左右四个边界之间的距离，单位默认px。 标题偏移：组件标题与圆角矩形水位图之间的偏移量。 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见图2），默认为0，即铺满整个组件。 参考模板：系统预置的组件样式模板，支持默认模板和标签模板两种样式。 边框圆角：边框的圆角，四个角弧度取值范围为0~500，单位px。 图表背景：图表的背景颜色。 图表标题：图表标题是否显示，支持自定义或者从系列中获取。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色：设置图表中，图形的颜色。 统一配置 是否展现：是否展示水位图开关。 横坐标(%)：水位图整体在组件位置中的横坐标百分比。 纵坐标(%)：水位图整体在组件位置中的纵坐标百分比。 直径(%)：水位图整体大小宽度。 水波颜色：设置水波颜色。 水波背景色：设置水波背景色。 波纹振幅：水波动画波纹震动大小。 显示双波纹：水波动画是否显示双波纹。 次波纹颜色：显示双波纹时，第二波纹颜色。 标签是否展现：水位图中心标签字符展现开关。 标签位置左偏移(%)：水位图中心标签字符在水位图中的左边偏移位置。 标签位置上偏移(%)：水位图中心标签字符在水位图中的上边偏移位置。 标签字体：水位图中心标签字体设置（字体样式、粗细、大小、颜色）。 波浪上时文本颜色：当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。

操作步骤 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在编辑页面状态下，选中组件，单击组件上方的。 图1 单击数据 在数据类型中，选择“桥接器预置”，并选中所需的桥接器。 设置桥接器预置数据。 图2 设置桥接器参数 桥接器数据类型：桥接器的数据源类型，支持“静态数据”和自定义接口“AstroZero API”。 URL：配置为自定义接口的URL。如何查看自定义接口URL，请参考查看自定义接口。“桥接器数据类型”选择“AstroZero API”时，才显示该参数。 共享数据：是否共享数据。勾选表示某项目里多个组件调用一个公共的请求（请求路径与入参均一致才视为同一公共请求）而访问同一个接口的数据，避免多次调接口。“桥接器数据类型”选择“AstroZero API”时，才显示该参数。 输入数据：系统已预置了静态数据，如果需要自定义静态数据，请重置数据。“桥接器数据类型”选择“静态数据”时，才显示该参数。 刷新周期：每隔多少秒调用一次后台接口，默认配置为“0”，表示只调用一次。 设置完成后，单击“保存”。

参考线 参考线是指为图表组件添加可视化的参考标准，为图表中数据提供具体的参考依据。 图10 参考线 统一配置：设置参考线两端的样式，如圆形、矩形和三角形等。 Y轴参考线 Y轴参考线：是否显示Y轴参考线。 参考线：设置已有参考线的颜色和线型，单击“新增Y轴参考线”，可新增参考线。单击对应参考线后的，可删除参考线。 X轴参考线 X轴参考线：是否显示X轴参考线。 参考线：设置已有参考线的颜色和线型，单击“新增X轴参考线”，可新增参考线。单击对应参考线后的，可删除参考线。

指标 指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。 图11 指标 显示指标：是否显示指标。 指标内容：设置指标内容。 指标字体：设置指标内容的字体、大小和颜色等。 指标类型：设置指标类型，支持总和、平均值和自定义。 数值内容：“指标类型”设置为“自定义”时，支持自定义数值内容。 数值字体：设置数值字体、大小、颜色等。 数值位数：设置数值小数点后的位数。

坐标轴 在坐标轴中，设置图表的x轴和y轴，如是否显示x轴y轴、字体、字体颜色、是否显示刻度等。 图8 坐标轴 x轴 X轴：是否显示X轴。 轴标题：X轴标题。 字体：坐标轴字体、颜色、大小等设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签：刻度标签样式，包括是否自动调节标签、显示所有标签。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 反转：是否对轴数据进行反转。 y轴 Y轴：是否显示Y轴。 轴标题：Y轴标题。 字体：坐标轴字体、颜色、大小设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 最小间隔：坐标轴最小间隔大小。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 轴起始值：设置Y轴的起始值。为方便数据展示，输入为接入数据最大值时，图表Y轴起始值为最大值的一半。 左Y轴单位：设置左侧Y轴的单位。 轴最大值：是否设置左轴的最大值。 图9 设置后效果 反转：是否对轴数据进行反转。 柱间阴影：是否显示柱间阴影，支持设置阴影颜色。 标签展示：设置Y轴标签展示样式，如默认或计数单位。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色：设置图表中，图形的颜色。 统一配置 光圈标记：是否开启光圈标记。 数据排序：是否开启数据排序。 阶梯瀑布：是否阶梯瀑布效果显示。 横向柱条：是否横向柱条效果显示。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置和数值颜色。 数据标签最大值/最小值：是否显示柱状条数值的最大值或者最小值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 柱条颜色：设置柱条颜色，如单色或渐变色，支持自定义柱状条的颜色。 定制最大柱条：支持对最大的柱条自定义设置，包括颜色等。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置、数值颜色、前缀和后缀。