检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
配置项总览 本章节介绍华为云Astro大屏应用支持的组件配置项,您可以通过{widget}.editor.js文件中定义的type字段,来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时,可以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面,从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件,单击。 在自定义事件中,单击“新
行在线分析,实现数据快速变现。更多关于DWS的介绍,请参见DWS产品文档。 新建DWS数据源 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据源”。 在数据源管理页面,单击“新建数据源”。 选择“DWS”,配置数据源参数。
组件响应动作实现 组件除了可以作为事件的触发器,还可以处理事件的响应动作,在响应动作中选择组件响应,就可以选择对应的组件响应动作,数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍,如何实现组件响应动作。 注册动作 在响应动作中,单击“响应动作”,在下拉框中选择对应的响应动作。
代码结构介绍 了解代码目录结构 目录文件详解 父主题: 自定义组件开发规范
删除数据源 数据源删除后,不可恢复,请谨慎操作。 删除数据源 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据源”。 在数据源管理页面,单击待删除数据源中的,选择“删除”。 数据源较多时,您
{widget}.css 文件介绍 {widget}.css为组件的样式文件,在该文件中编写组件的CSS样式。 华为云Astro大屏应用的组件未进行打包编译,CSS样式可能存在互相影响的风险。因为,CSS选择器务必要加上组件id,通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
台分页,需要在组件预览时,将数据中的total字段,添加到数据总数中。 后台分页 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 新建一个大屏页面,从“全部组件 > 文本”中,拖拽“高级表格”组件至画布空白区域。 开启后台分页功能。 图1 开启后台分页
用时,在添加转换器时,需要先筛选、再排序、最后分页,如图1。 图1 转换器添加顺序 后台筛选 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 新建后台筛选转换器。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“转换器 > 全部”,单击“新建转换器”。
echarts组件自定义动作交互设置 echarts组件作为响应器的动作时,可以在自定义动作中设置。 自定义动作交互设置 选中某个echarts组件,单击。 在自定义动作中,单击“新增自定义动作”,修改动作名称为“设置数据高亮”。 图1 新建自定义动作 在动作实现中,输入如下代码,调用echarts提供的动作API。
前了解。 图1 最终呈现效果 开发自定义组件 下载图表模板。 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 单击页面右上角的“管理”,进入华为云Astro大屏应用管理页面。 在左侧导航栏中,选择“页面资产管理 > 组件模板”。 表1 组件模板列表
sourceLable: "label" 选项中标签对应的key,默认为label。 showHint Boolean 否 showHint: false 是否展示提示图标。 事件 表2 事件 事件名称 调用配置项中的方法 说明 回调参数 change change 值改变时触发 (value, data
组件内置API 内置API一览表 Studio对象预置API一览表 magno对象预置API一览表 HttpUtils工具类预置API一览表 SafeUtils安全工具类预置API一览表 父主题: 自定义组件开发规范
自定义组件时,如何设置交互事件的输出变量 操作场景 开发者自定义组件时,可设置交互事件的输出变量,如图1所示,华为云Astro大屏应用支持将事件的输出变量(如“selectValue”)绑定页面级的全局变量(如“status”)。 图1 事件输出参数绑定全局变量 实现逻辑 自定义
json两个国际化文件中定义的国际化内容。 hideWidget 隐藏组件,无入参,使用方式参考如下: this.hideWidget() showWidget 展示组件,无入参,使用方式参考如下: this.showWidget() triggerEvent 从组件内部触发事件,抛出数据。事件注册参考Studio
通用配置示例如下,以global_SelectWidget组件为例,设置后效果如图1所示。本示例中的global_SelectWidget为华为云Astro大屏应用系统预置的下拉框组件,可在“我的资产 > 我的组件”中获取。 { type: 'tab', name: 'multiple'
时启用时,在添加转换器时,需要先筛选、再排序、最后分页,如。 图1 转换器添加顺序 后台排序 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 新建后台排序转换器。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“转换器 > 全部”,单击“新建转换器”。
项的值来判定是否显示,返回true显示function定义。 showInput Boolean 否 showInput: true 是否展示输入框。 事件 表2 事件 事件名称 调用配置项中的方法 说明 回调参数 change change 值改变时触发 (value, data
组件配置项(Config配置) 配置项总览 通用配置 input textarea input-number slider tab switch radio checkbox colorpicker time select list 父主题: 自定义组件开发规范
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题: 代码结构介绍