检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
地图 高德地图 地图 OpenLayers地图 父主题： 组件介绍
文件介绍 {widget}.html为组件DOM结构文件，相当于HTML文件，负责样式展示。 在华为云Astro大屏应用中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate" v-cloak> <div
通过选择包年/包月的计费模式，您可以预先购买华为云Astro大屏应用云服务资源并获得一定程度的价格优惠。本文将介绍包年/包月华为云Astro大屏应用资源的计费规则。如果您需要快速了解华为云Astro大屏应用服务不同计费模式的具体价格，请参见华为云Astro大屏应用价格详情。 适用场景
设置getWarnDetailByStatus数据集 应用：选择调用自定义接口所属的应用，本示例选择华为云Astro轻应用中安装的“告警服务Mock应用”。 此处的“告警服务Mock应用”仅为示例，在实际使用时，选择华为云Astro轻应用中已安装的一个应用即可。 API接口：API接口的URL，
复制项目版本 项目创建完成后，支持将项目中发布的版本复制到其他工作空间。 复制项目版本 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在项目列表中，将鼠标放在对应的项目上，单击。 选择对应的工作空间和项目版本，单击“确定”。 图1 选择工作空间和项目版本
组件间交互 操作场景 组件间交互是指在同一页面中，不同组件之间进行的交互事件。组件和组件之间可互为触发器和响应器，根据用户所定义的事件不同，可定义组件行为、赋值全局变量以及响应自定义动作。 本章节以在同一区域中，添加多个组件，使用tab来切换不同tab页签下需要呈现的组件为例，向您介绍如何设置组件间的交互能力。
{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。 华为云Astro大屏应用的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时，可以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面，从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件，单击。 在自定义事件中，单击“新
上传自定义组件 将自定义组件上传到AstroCanvas中，并在页面中使用。 上传自定义组件 参考登录华为云Astro大屏应用界面中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”，进入我的资产页面。 在左侧导航栏中，选择“我的组件”，单击“添加组件”，进入添加组件页面。
“开发与运维 > Astro轻应用（原AppCube）”，进入华为云Astro轻应用服务控制台。 在左侧导航栏中，选择“Astro大屏应用”，进入华为云Astro大屏应用服务控制台。 在已购买的实例中，单击“升级服务”。 在升级规格页面，选择目标资源规格，单击“去支付”。 图1 选择资源规格
组件自定义事件实现 组件之间的交互，主要包括组件自定义事件和组件响应动作，本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器，当用户操作组件（比如下拉框选中选项）时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
如何在数据集或跳转事件动作中设置变量 在组件的数据集或组件的跳转事件动作中，是支持设置变量的。 在数据集或事件动作中设置变量 在大屏编辑页面上方，单击，新建并设置页面级全局变量。 例如，新增全局变量“url”，设置变量说明为“数据详情页面URL”。 图1 新增全局变量 从“全部组件
的“Astro大屏应用”，进入华为云Astro大屏应用服务控制台。 在华为云Astro大屏应用服务控制台，单击“Astro 低代码平台”，进入华为云Astro低代码平台界面。 为IAM用户进行服务授权。 对IAM用户进行服务授权操作后，该用户即可拥有进入华为云Astro大屏应用平台的基础权限。
包和购买时长进行计费。华为云Astro大屏应用提供了三种不同的套餐版本，均为包年/包月购买方式。如果您需要快速了解华为云Astro大屏应用服务的具体价格，请参见华为云Astro大屏应用价格详情。 表1标“*”的计费项为必选计费项。 表1 计费项 计费项 计费说明 计费模式 计费公式
版本中的private-deploy-版本号.jar包。 升级已部署的华为云Astro大屏应用服务 方式一：创建新目录，重新部署华为云Astro大屏应用 在华为云Astro大屏应用服务控制台，单击实例中的“进入首页”，进入华为云Astro大屏应用界面。 在页面右上角，单击“账号名”，选择“本地部署”。
DLI数据集 基于数据湖探索（Data Lake Insight，简称DLI）服务的数据集。 前提条件 连接的数据源已创建，如何创建请参见DLI数据源。 在DLI构建数据 登录DLI服务控制台。 参考创建并提交Spark SQL作业中操作，创建队列、数据库和表。 例如，创建了数据库tpch，且数据库中预置了所需的表。
通过参数控制响应动作 在设置组件交互动作时，可以通过选择事件参数、全局变量或固定值，明确有哪些类型的参数可以传递。 通过参数控制响应动作 参考创建大屏&PC端项目中操作，新建一个大屏项目。 参考使用空白画布新建页面中操作，新建一个空白页面，如页面一，并拖入实心圆饼图和下拉选择框。
组件响应动作实现 组件除了可以作为事件的触发器，还可以处理事件的响应动作，在响应动作中选择组件响应，就可以选择对应的组件响应动作，数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍，如何实现组件响应动作。 注册动作 在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。
通用设置 在通用设置中，可以设置网页图标、开启页面加载动画等功能。 项目通用设置 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在华为云Astro大屏应用界面的项目列表中，单击已创建的项目，进入项目。 在主菜单中，选择“项目设置”，进入项目设置页面。
节中的操作完成数据迁移，防止云服务资源释放，导致项目数据丢失。 数据迁移 登录华为云Astro轻应用中的业务大屏界面，导出项目数据。 使用华为账号，登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。 在左侧导航栏上方，单击，选择服务实例所在的区域项目。 单击，在查
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
