检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
代码结构介绍 了解代码目录结构 目录文件详解 父主题： 自定义组件开发规范
件，负责样式展示。 {widget}.js：组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。 父主题： 代码结构介绍
packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
装而成。如果将一个页面看成拼图游戏的完整图案，那么Widget相当于拼图的每一小块。 Widget的运行依赖Library，如果缺少相应的Library，则Widget不能正常运行。如果页面要使用前端框架或组件库，例如流行的Vue、Bootstrap、ElementUI等，需要将
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
i18n.json 文件介绍 i18n.json为组件的国际化资源文件，用于配置多语言，目前支持的多语言包含中英文两种，相应的key值分别为['zh-CN','en-US']。多语言文件支持配置在多个Json中，在packageinfo.json中的配置示例如下： "i18n":
在版本管理中，鼠标放在对应版本后的“操作”下，单击。 图1 下载项目版本包 根据业务需求，选择运行容器，单击“下载”。 图2 选择运行容器 运行容器：选择项目包的运行容器。 Astro Canvas：使用该运行容器下载的项目包，可在其他AstroCanvas环境的项目列表中，通过单击“导入项
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
在版本管理中，鼠标放在对应版本后的“操作”下，单击。 图1 下载对应版本的项目包 根据业务需求，选择运行容器，单击“下载”。 图2 选择运行容器 运行容器：选择项目包的运行容器。 Astro Canvas：使用该运行容器下载的项目包，可在其他AstroCanvas环境的项目列表中，通过单击“导入项
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件，用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
}); clickSeries对象中，“desc”是对事件selectItem的解释。“fields”为组件对外暴露的字段及相应描述。相应代码要在{widget}.js中实现如下： this.echartsInst.on('click', 'series', (event) =>
classfication 字段介绍 classfication字段代表的是当前组件需要展示哪些大的配置项分类。AstroCanvas在设计前期对分类也进行了分组，因此这个字段被扩展为双数组形式。一般默认情况下，直接在数组对象的第一个数组中配置即可。如果无配置，则所有属性展示在一个大的分类下。
通流量、环境污染指数、能源消耗情况等数据，帮助城市管理者及时监测城市运行状况，进行智慧决策，提升城市运行效率和居民生活质量。 图1 S市智慧城市大脑 工业制造 在工业制造领域，数据可视化大屏可以展示生产线实时运行状态、设备故障警报、生产效率等数据，帮助工厂管理者实现生产过程的全面
{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件，相当于HTML文件，负责样式展示。 在AstroCanvas中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate"
面右下角会弹框提醒。 开启代码执行异常提醒：勾选后，如果代码执行出现错误，页面右下角会弹框提醒。 开启首屏加载耗时过长提醒：勾选后，如果页面首屏加载耗时超过5秒，页面右下角会弹框提醒。 开启子页面加载状态检查：勾选后，平台会检测iframe子页面的运行状态。 父主题： 项目管理
propertiesConfig 字段介绍 propertiesConfig是一个数组，用于保存组件配置项的相关字段，包括数据接入配置、组件配置项。 图1 propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍，请参见组件数据接入。 组件配置项 配置示例如下
资源设置 库是支撑页面组件运行的第三方依赖，如果缺少相应的库，则组件不能正常运行。在项目的资源设置中，您可以管理页面中使用到的库。 资源设置 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在AstroCanvas界面的项目列表中，单击已创建的项目，进入项目。
包年/包月AstroCanvas到期后，会影响AstroCanvas正常运行。如果您想继续使用，需要在指定的时间内为AstroCanvas续费，否则已创建的项目、页面等功能的使用可能将会受限。AstroCanvas在到期前续费成功，AstroCanvas的运行不受影响。 如果您有订购页面扩容包，执行续费操
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
