检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
表格字段:展示创建关系型数据库数据集中,接入的关系型数据库中的数据。 配置:从表格字段中,拖拽所需的字段到X轴数据、Y轴数据或系列中。 刷新周期:每隔多少秒从关系型数据库中读取一次数据,默认配置为“0”,表示只获取一次。 共享数据:是否共享数据。勾选后,如果多个组件调用了相同的关系型数据库请求,不会各自只调用,而是共享结果数据。
Server数据库的架构名称。当“数据库类型”配置为“MS SQL Server”时,该参数才会显示。 用户名:登录数据库的用户名。 密码:登录数据库用户对应的密码。 数据库名称:数据库实例的名称。 描述:新建数据源的描述信息。 单击“连接测试”,显示“连接成功”,表示数据源可以调通。
在组件模板列表中,单击所需的模板模板,进入模板详情页。 图1 预置组件模板 在模板详情页,单击“下载”,将模板下载到本地。 认识Widget包目录结构 解压下载到本地的组件Widget包,认识组件结构。如解压EchartsWidgetTemplate组件包,其目录结构如图2所示。
代码结构介绍 了解代码目录结构 目录文件详解 父主题: 自定义组件开发规范
json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题: 代码结构介绍
i18n.json 文件介绍 i18n.json为组件的国际化资源文件,用于配置多语言,目前支持的多语言包含中英文两种,相应的key值分别为['zh-CN','en-US']。多语言文件支持配置在多个Json中,在packageinfo.json中的配置示例如下: "i18n":
EchartsWidgetTemplate = EchartsWidgetTemplate.extend({ // 组件事件配置项,定义组件事件结构及说明,给全局变量映射使用 eventConfig: { clickSeries: { desc: { zh_CN:
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件,用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
参考创建并提交Spark SQL作业中操作,创建队列、数据库和表。 例如,创建了数据库tpch,且数据库中预置了所需的表。 图1 tpch数据库 单击已创建的数据库tpch,进入tpch数据库。 (可选)双击对应的表,右侧会显示对应的查询语句,单击“设置”,添加标签。 为作业添加标签后
图形-自定义 series 图表的系列数据配置。 legend 图例-自定义 legend 图表的图例显示/隐藏、样式控制配置。 tooltip 提示-自定义 tooltip 图表的悬浮提示配置。 coordinate 坐标轴-自定义 coordinate 图表的X、Y坐标轴配置。 referenceLine
propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍,请参见组件数据接入。 组件配置项 配置示例如下,配置后效果如图2所示,组件配置项详细介绍请参见表1。 { migrateFrom: 'advancedSettings', headerTitle: { zh_CN:
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件,相当于HTML文件,负责样式展示。 在AstroCanvas中自定义组件时,需要在服务端提前渲染的部分,可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate"
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题: 目录文件详解
测试API接口:用于测试该接口,单击“测试API接口”,“样例报文”中会显示输出结果。 样例报文:对应API接口的响应样例报文数据格式,元数据结构由该样例报文经转换器处理后的数据结构确定。单击“格式化”,可对样例报文进行格式化处理。 转换器:选择转换器,用于对数据进行转换处理。 数据预览:单击“数据预
树状下拉框是一种带有树形结构的下拉框,通常用于选择有限选项数据的级联场景。 在大屏设计页面,从“全部组件 > 文本”中,拖拽“树状下拉框”组件至画布空白区域,如图1。 图1 树状下拉框 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。
组件事件暴露的变量结构,以及事件和对外透传变量的业务含义。eventConfig配置好后,在组件配置交互时可以将事件的itemVal传递给页面全局变量中,供其他组件使用。 典型示例 典型的eventConfig示例如下: // 组件事件配置项,定义组件事件结构及说明,给全局变量映射使用
设置发行说明后,单击“提交”。 在桥接器列表中,可查看到已上传的桥接器。 使用自定义桥接器 参考创建大屏&PC端项目中操作,创建一个项目。 项目创建后,参考使用空白画布新建页面中操作,新建一个空白页面。 进入开发页面,从“全部组件 > 图表”中,拖拽玫瑰花饼图组件到画布中。 图4 拖拽玫瑰花饼图到画布中
在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构,应包含表1中API。其中,init、render和beforeDestory为组件的通用生命周期函数,其余为推荐模板实现。 表1 组件架构组成 API名称 API解释 是否必须 init(生命周期函数) 组
Canvas预置的桥接器模板,您可以自定义桥接器。自定义桥接器时,需要先下载桥接器模板,根据组件的数据结构,对桥接数据进行对接和改造。如何自定义桥接器,请参见自定义桥接器。 查看桥接器模板 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,单
{widget}.css 文件介绍 {widget}.css为组件的样式文件,在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译,CSS样式可能存在互相影响的风险。因为,CSS选择器务必要加上组件id,通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate