检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
启网格后,支持设置网格的大小和颜色。 图2 开启网格后效果 适应方式 根据需要选择页面适配方式。其中,等比缩放水平铺满、等比缩放垂直铺满和全铺满默认拥有自适应能力,无自适应指页面不会根据不同大小终端设备自适应显示。 图3 适应方式 背景 设置页面的背景图片或者颜色。选择图片作为背
对齐:标题相对于组件的对齐方式。 标题背景色:设置标题的背景颜色。 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
标题偏移:组件标题与基本柱图之间的偏移量。 图5 标题偏移 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
将组件保存为卡片 将组件保存为卡片,方便后期有需要时,随时调用“我的卡片”中的组件。 将组件保存为卡片 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在编辑页面状态下,选中组件,单击右键,选择“保存为卡片”。 图1 选择保存为卡片 您也可以在“图
页面为例进行介绍。 前提条件 已获取对应的页面模板文件,详情请参见下载当前页面。 通过页面模板文件新建页面 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在项目列表中,单击已创建项目的名称,进入对应的项目页面。 在项目中,单击,选择本地的页面模板文件,单击“打开”。
组件交互 组件自定义事件实现 组件响应动作实现 父主题: 自定义组件开发规范
新建echarts单击系列事件 在事件实现中,输入如下代码,即echarts实例的“单击系列”动作将会发送此事件,携带参数为echarts传递的事件对象。 echartsInst.on('click', 'series', triggerCurrentEvent); 单击“新增字段”,设置字段名称为“seriesIndex”。
每一个工作空间,都对应一个新的华为云Astro大屏应用。在华为云Astro大屏应用中,通过创建工作空间,可实现对租户下的资源进行隔离与授权。 使用约束 只有租户管理员(实例创建者),才能执行创建工作空间的操作。 新建工作空间 租户管理员参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
样式。单击“清除样式”,可清除已设置的装饰样式。 背景 背景颜色:组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
标题偏移:组件标题与折柱图之间的偏移量。 图5 标题偏移 背景 背景色:折柱图背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
单击“清除样式”,可清除已设置的装饰样式。 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片的边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
总数量标题内容:设置图表总数量下的标题内容,如总数据。 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
卡片边框)和图表元素构成。 图3 高德地图卡片 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
(可选)新建目录 为了便于集中管理数据集,可以为数据集指定目录。 新建一个目录 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据集 > 全部”。 单击“所有数据集”,再单击“...”,选择“新增目录”。
组件图层位置移动 操作场景 在华为云Astro大屏应用大屏开发页面,支持将组件图层向上、向下移动一层或移动至底层等,帮助您更加合理有效的排列大屏上的组件。 位置层次越靠前,表示组件在画布中的显示越靠前。 位置层次越靠后,表示组件在画布中的显示越靠后。 当两个组件重叠时,位置靠前的组件会覆盖位置靠后的。
如何设置页面间参数传递 华为云Astro大屏应用开发中,可通过设置组件的事件和动作属性来实现组件与组件、组件与页面之间的交互。在组件的交互响应事件中,可通过“页面跳转”响应动作传递页面参数。当跳转页面时,当前页面参数会传入到打开的页面中,支持自定义传参为固定值,也可绑定页面级全局变量。
通过参数控制响应动作 在设置组件交互动作时,可以通过选择事件参数、全局变量或固定值,明确有哪些类型的参数可以传递。 通过参数控制响应动作 参考创建大屏&PC端项目中操作,新建一个大屏项目。 参考使用空白画布新建页面中操作,新建一个空白页面,如页面一,并拖入实心圆饼图和下拉选择框。
标题偏移:组件标题与实心圆饼图之间的偏移量。 图5 标题偏移 背景 背景色:设置组件卡片的背景颜色。 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
的数据来源于封装了华为云Astro轻应用某API接口的数据集,将该接口的入参与全局变量绑定,则“多区域折线图”组件呈现数据会随着全局变量值变化而变化。 图1 告警监控页面 步骤1 新建数据集 参考华为云Astro轻应用数据源中操作,新建数据源。 图2 新建华为云Astro轻应用数据源
代码结构介绍 了解代码目录结构 目录文件详解 父主题: 自定义组件开发规范