检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。 表1 组件架构组成 API名称 API解释 是否必须 init(生命周期函数) 组件初始化入口API，初始化组件通用能力，负责注册组件事件和组件动作。
组件对接同一个数据源的情况，可以减少重复的请求跟重复的配置。 页面设置 华为云Astro大屏应用可视化开发页面，支持配置页面屏幕大小、适应方式、背景颜色或背景图片等，更多介绍请参见如何进行设置页面。 图2 页面设置 全局变量设置 华为云Astro大屏应用支持设置页面级的全局变量，
required Boolean 否 required: true 是否必须配置。 组件使用数据集 数据集实例获取。 组件代码中可使用如下API，来获取对应的数据集实例。 ConnectorIns: thisObj.getConnectorInstanceByName('Echar
面加载进度条。 开启浏览器内存使用率异常提醒：勾选后，如果浏览器内存使用率超过70%，页面右下角会弹框提醒。 开启资源访问耗时过长提醒：勾选后，如果单个资源访问耗时超过1秒，页面右下角会弹框提醒。 开启接口请求错误提醒：勾选后，如果接口请求出现错误，页面右下角会弹框提醒。 开启代
仪表盘 仪表盘是指通过仪表的特殊展示方式，对数据进行展示。 在大屏设计页面，从“全部组件 > 仪表盘”中，拖拽“仪表盘”组件至画布空白区域，如图1。 图1 仪表盘 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。
器预置。 静态数据 选择该方式时，页面会获取“输入数据”中的静态数据展示在页面上，详情请参见静态数据。 华为云Astro大屏应用已预置了静态数据，如果需要自定义静态数据，请重置数据。 数据集 选择在“数据中心”中配置的数据集，作为组件数据来源。选择此方式时，请确保数据集已在数据中心创建，详情请参见数据中心。
标题配置 文本设置 文本内容：设置文本内容。 字体：设置输入文本内容的字体、大小和颜色等。 文字间距：设置文字之间的距离。 对齐方式：设置文本内容对齐方式，支持左对齐、居中和右对齐。 问号提示 问号提示：是否显示问号提示。 提示文本：输入问号提示的文本信息。 问号大小：设置问号图标的大小。
示”。 标题：翻牌器标题是否显示，默认为“隐藏”。 标题内容：设置标题的内容。“标题”设置为“显示”时，才显示该参数。 标题对齐方式：设置标题的对齐方式，支持左对齐、居中和右对齐。“标题”设置为“显示”时，才显示该参数。 标题字体：设置标题的字体、大小和颜色。“标题”设置为“显示”时，才显示该参数。
内容对齐方式：文本内容为多行时，支持居中、左对齐、右对齐和两端对齐。 文本位置：文本内容为一行时，支持居中、左对齐和右对齐。 行高：设置行高。 文字间距：设置文字之间的间距。 首行缩进：文本首行是否缩进，设置为0，表示不缩进。 文本滚动 滚动显示：文本是否滚动显示。 滚动方式：设置
日历卡片 背景色：设置日历卡片的背景颜色。 边框色：设置日历卡片边框的颜色。 日期块的高度：设置每个日期块的高度。 日期块对齐方式：设置日期块的对齐方式，如左对齐、右对齐、居中。 日历头部 年月字体：设置日历头部年月字体、文字大小、年月文字颜色等。 快捷按钮字体：设置日历头部右侧快捷按钮字体、字体大小和颜色等。
购买实例，在已购买的实例中单击“操作 > 页面扩容”。 图1 单击页面扩容 设置扩容页面的个数，单击“去支付”。 图2 页面扩容 选择支付方式，单击“去在线支付”，完成订单支付。 订单支付成功后，单击“返回Astro轻应用控制台”。 在华为云Astro大屏应用已购买的实例中，可查看到扩容的页面数量。
为云Astro轻应用中已安装的一个应用即可。 API接口：API接口的URL，本示例选择“getWarnDetailByStatus”接口。 参数：接口入参，当有入参时，系统会自动展示，需要设置参数默认值等。 单击“展开”，设置API的参数默认值为变量alarmstatus，并赋
查询配置：单击“新增查询”，可增加promQL查询，最多只支持添加8条，支持设置变量。 测试API接口：用于测试该接口，单击“测试API接口”，“样例报文”中会显示输出结果。 样例报文：对应API接口的响应样例报文数据格式，数据集的元数据结构由该样例报文经转换器处理后的数据结构确定。
将鼠标悬浮在日期选择器上，组件名称即为组件ID。 图11 获取组件ID 操作组件。 获取到组件ID后，可以通过AstroCanvas提供的API来操作组件，如显示/隐藏组件。关于API的详细介绍，请参见内置API一览表。 // 显示组件 {widget2}.showWidget(); // 隐藏组件 {widget2}
框”中选择某个告警状态时，通过配置的交互事件将告警状态赋值给全局变量，“多区域折线图”组件呈现的数据来源于封装了华为云Astro轻应用某API接口的数据集，将该接口的入参与全局变量绑定，则“多区域折线图”组件呈现的告警数据会随着全局变量值变化而变化。 如图1所示，也可以不使用“下
标题字体：设置标题的字体、颜色和大小等。 配置 在配置中，设置多趋势组件的数值、主要趋势和次要趋势等。 图4 多趋势配置 统一配置 > 对齐方式：设置组件的对齐方式，支持左对齐、居中和右对齐。 数值：趋势中是否显示数值，设置为“显示”时支持设置如下属性。 字体：设置数值的字体、大小和颜色等。
再从数据输入中，拖拽一个数据输入节点到右侧画布中，数据集选择已创建的“多数据流2”。 图6 再添加一个数据输入节点 选中转换器，“联合方式”选择“转换器”，并新增一个转换器。 您也可以将“联合方式”设置为“连接”，通过连接实现数据的汇总，如图8。 左连接：返回左表中的所有行，如果左表中的行在右表中没有匹配
台。 在已购买的实例中，单击“升级服务”。 在升级规格页面，选择目标资源规格，单击“去支付”。 图1 选择资源规格 进入支付页面，选择支付方式，确认付款，支付订单后即可完成规格升级。
可从下方左侧面板选择字段名、函数或者直接输入函数，如图2。 图2 按需设置表达式 测试API接口：用于测试该接口，单击“测试API接口”，“样例报文”中会显示输出结果。 样例报文：对应API接口的响应样例报文数据格式，数据集的元数据结构由该样例报文经转换器处理后的数据结构确定。
Canvas，简称AstroCanvas）是华为云Astro低代码平台提供的可视化页面构建服务，提供了丰富的可视化组件、灵活的数据接入和多种方式页面构建能力，支持多屏适配，帮助开发者快速构建和发布专业水准的实时可视化应用。 商用 产品介绍 计费说明 快速入门 用户指南 最佳实践 2
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
