检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
{widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor.js文件只在组件编辑状态被加
'Series Name' }, }, ], }, }, clickSeries字段对应组件{widget}.js文件中，注册的事件id。 window.Studio.registerEvents(this, 'clickSeries', {
name: 'tooltip' } ] ], 图1 设置后效果 父主题： {widget}.editor.js
config数组中，每一个对象保存的配置项信息。config中，配置项的介绍，请参见组件配置项（Config配置）。 父主题： {widget}.editor.js
作列表中展现。 inReader 判断当前页面状态是开发态或预览态。 registerWidget 必须在{widget}.editor.js中注册组件，使用方式参考如下： /* @param {string} widgetName * @param {string} description
配置项总览 本章节介绍AstroCanvas支持的组件配置项，您可以通过{widget}.editor.js文件中定义的type字段，来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
组件对接数据配置开关 组件的数据可来自于静态数据或通过数据集获取，以EchartsWidgetTemplate组件为例，在“{Widget}”.editor.js文件中，可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下：
自定义组件开发过程如下，也可以直接单击下载链接，获取自定义组件示例包“SelectWidget.zip”。 在组件的“global_SelectWidget.editor.js”文件中，新增eventConfig配置。 eventConfig其实是一个对象，里面包含组件触发的自定义事件、自定义事件的说明以及事件对外输出的变量名、变量含义。
注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例： 在文件global_SelectWidget.editor.js中定义事件 eventConfig: { sendSelect:
ibrary包含的js和css文件名，并打成Zip包。该场景中Zip包为“MintUI.zip”，单击链接获取该包。 图1 MintUI库文件结构 packageinfo.json包含所要引入的文件。例如，MintUI库需要引入的文件有“js/index.js”和“css/index
i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
{widget}.editor.js：组件核心渲染文件。组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。 {widget}.flt：组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 {widget}.js：组件逻辑文件，整个Wi
css，EchartsWidgetTemplate.editor.js修改为BarGraph.editor.js，EchartsWidgetTemplate.ftl修改为BarGraph.ftl，EchartsWidgetTemplate.js修改为BarGraph.js。 图3 修改后效果 进入重名后的BarGraph
注册动作 在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。 图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params thisObj: 组件实例 */ Studio.registerAction( thisObj
@param {*} props {} */ magno.savePropertiesForWidget({ // 属性应该与editor.js中的属性对应 barChartProps: JSON.stringify(_this.barPropList), barCommProps:
Warehouse Service，简称DWS）是完全托管的企业级云上数据仓库服务，具备免运维、在线扩展、高效的多源数据加载能力，兼容PostgreSQL生态。助力企业经济高效地对海量数据进行在线分析，实现数据快速变现。更多关于DWS的介绍，请参见DWS产品文档。 操作步骤 参考登录A
Warehouse Service，简称DWS）是完全托管的企业级云上数据仓库服务，具备免运维、在线扩展、高效的多源数据加载能力，兼容PostgreSQL生态。助力企业经济高效地对海量数据进行在线分析，实现数据快速变现。更多关于DWS的介绍，请参见DWS产品文档。 前提条件 连接的数据源已创建，如何创建请参见DWS数据源。
json，并在文件中写入如下内容： { "js": [ { "name": "d3js.org_d3.v4.min" } ] } 将脚本d3js.org_d3.v4.min.js和packageinfo.json打包为
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
