检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
创建关系型数据库数据源时,如果数据库类型选择“GaussDB”或“PostgreSQL”,还支持从指定的schema中,选择数据表。如果不指定schema,默认从public类型的数据库表中获取数据。其中,“pg_catalog”为指定的schema,“pg_index”为数据库中的表。 select
桥接器模型名称需要和使用该自定义桥接器的组件中定义的模型名称相同,否则在组件中设置数据源时,桥接器实例无法选择到该桥接器。 桥接器模型名称可在使用该桥接器的组件中查看。例如,在玫瑰花饼图中使用自定义桥接器,请按照如下操作获取模型名称。 返回AstroCanvas界面,在主菜单中,选择“我的资产”。
上传自定义组件 将自定义组件上传到AstroCanvas中,并在页面中使用。 上传自定义组件 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,选择“我的资产”,进入我的资产页面。 在左侧导航栏中,选择“我的组件”,单击“添加组件”,进入添加组件页面。
新建并开发自定义组件 操作场景 当系统预置的组件无法满足用户需求时,用户可自定义组件包进行上传,在页面中进行使用。在开发自定义组件前,请仔细阅读自定义组件开发规范章节内容,了解组件的开发规范。下面以开发网站中常用的柱状图(vue2+Echarts)组件为例,向您介绍如何开发自定义组件。
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时,可以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面,从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件,单击。 在自定义事件中,单击“新增自定义事件”
tsWidgetTemplate组件为例,在“{Widget}”.editor.js文件中,可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时,默认组件需要对接数据集。配置示例如下: { type: 'dataSetting'
组件自定义事件实现 组件之间的交互,主要包括组件自定义事件和组件响应动作,本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器,当用户操作组件(比如下拉框选中选项)时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
echarts组件自定义动作交互设置 echarts组件作为响应器的动作时,可以在自定义动作中设置。 自定义动作交互设置 选中某个echarts组件,单击。 在自定义动作中,单击“新增自定义动作”,修改动作名称为“设置数据高亮”。 图1 新建自定义动作 在动作实现中,输入如下代码,调用echarts提供的动作API。
自定义组件说明 新建并开发自定义组件 上传自定义组件 父主题: 组件管理
制。 自定义分类 自定义分类时,可以使用分类的对象形式,对象中可以配置的字段如下表所示。 表2 自定义分类对象中的字段 字段 类型 示例 说明 tip Object tip: { "zh_CN": "图形", "en_US": "Series" } 鼠标悬浮提示,采用对象形式。 name
在页面中,拖入一个日期选择器组件到画布中。 图2 拖拽日期选择器到画布中 选中日期选择器,单击,进入交互设置页面。 按照下图,设置自定义动作。 自定义组件动作时,通过输入关键词,可以联想出组件的信息。 图3 设置自定义动作 /* * 可以像示例这样获取到组件对象,然后编写js代码
设置桥接器预置数据。 图2 设置桥接器参数 桥接器数据类型:桥接器的数据源类型,支持“静态数据”和自定义接口“AstroZero API”。 URL:配置为自定义接口的URL。如何查看自定义接口URL,请参考查看自定义接口。“桥接器数据类型”选择“AstroZero API”时,才显示该参数。
Query:请求的参数,通常指的是URL中“?”后的附加参数。 Header:Header中需要的参数,支持“字符串”和“表达式”两种。“字段类型”设置为“表达式”时,单击“默认值”,可将5中鉴权信息中返回的参数赋值给连接器的请求参数。 Body:当请求类型为POST时,还需要设置Body
belong: "configuration", 归属于classfication中哪一个分类。 config Array config: [] config数组中,每一个对象保存的配置项信息。config中,配置项的介绍,请参见组件配置项(Config配置)。 父主题: {widget}
}.editor.js文件中定义的type字段,来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number 计数器 slider 滑块 切换类型 tab 切换 switch
Studio对象预置API一览表 表1 Studio对象预置API一览表 API API说明 registerWidget 定义组件。 registerConnector 定义桥接器。 registerEvents 注册事件,只有通过此API注册后的事件才会在组件的事件列表中展现。 registerAction
配置项说明 表1 input配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input" 配置项类型。 subType String 否 subType: "password" 子类型,支持的类型有number、password。 value
value: '我是checkbox的类型', label: { zh_CN: 'checkbox的类型', en_US: 'checkbox Type Example' }, checkLabel: { zh_CN: 'checkbox的类型', en_US: 'checkbox
dEvent init中抽取的独立逻辑,注册组件对外暴露的的事件和动作。 按需实现,组件定义事件和动作时使用。 getMockData 组件在没有对接外部数据源时,使用的获取桩数据的API自定义实现。考虑数据集天然支持二维数组对象,桩数据结构统一为二维数组对象[{id:3,nam
刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍,如何实现组件响应动作。 注册动作 在响应动作中,单击“响应动作”,在下拉框中选择对应的响应动作。 图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 *