检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
代码结构介绍 了解代码目录结构 目录文件详解 父主题： 自定义组件开发规范
了解代码目录结构 当系统预置的组件无法满足用户需求时，用户可自定义组件并上传到AstroCanvas中使用。AstroCanvas为您预置了一些组件模板（Widget包），您可以基于组件模板开发自定义组件。 获取组件模板包 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。 表1 组件架构组成 API名称 API解释 是否必须 init(生命周期函数) 组
packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
图形-自定义 series 图表的系列数据配置。 legend 图例-自定义 legend 图表的图例显示/隐藏、样式控制配置。 tooltip 提示-自定义 tooltip 图表的悬浮提示配置。 coordinate 坐标轴-自定义 coordinate 图表的X、Y坐标轴配置。 referenceLine
{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件，相当于HTML文件，负责样式展示。 在AstroCanvas中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate"
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件，用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
}); clickSeries对象中，“desc”是对事件selectItem的解释。“fields”为组件对外暴露的字段及相应描述。相应代码要在{widget}.js中实现如下： this.echartsInst.on('click', 'series', (event) =>
i18n.json 文件介绍 i18n.json为组件的国际化资源文件，用于配置多语言，目前支持的多语言包含中英文两种，相应的key值分别为['zh-CN','en-US']。多语言文件支持配置在多个Json中，在packageinfo.json中的配置示例如下： "i18n":
propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍，请参见组件数据接入。 组件配置项 配置示例如下，配置后效果如图2所示，组件配置项详细介绍请参见表1。 { migrateFrom: 'advancedSettings', headerTitle: { zh_CN:
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
在大屏设计页面，从“地图”中，拖拽“高德地图”组件至画布空白区域，如图1。 图1 高德地图 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无
时，用户可设置跳转携带相关参数。 同项目不同页面之间的跳转 当项目场景较多，一屏无法完全涵盖所有内容或需要额外查询时，为了性能考虑，通常会采取传递参数在另外的页面进行查询后，在当前页面展现，这时就需要在同项目中不同页面间来回跳转。 例如，新建三个页面（页面一、页面二和页面三），向
跳转到Astro低代码平台。 在Astro低代码平台的“组织管理 > 角色与权限 > Astro Canvas”中，单击“创建工作空间”。 输入空间名称（如工作空间A），单击“保存”。 在AstroCanvas角色列表中，可查看到已创建的工作空间。 图1 查看工作空间 父主题： 创建工作空间
始化相关的操作，包括echarts的主题等。 图5 初始化代码块 单击“参数说明”，可查看初始化代码块的参数说明。 单击，可复制初始化代码。 单击，可最大化初始化代码块页面。 实例化代码块：和初始化代码块类似，实例化代码块的目的是构造echarts setOption所需要的op
新建一个大屏页面，从“全部组件 > 文本”中，拖拽“高级表格”组件至画布空白区域。 开启后台排序功能。 图2 开启后台排序 新建全局变量。 后台排序需要搭配全局变量使用，请创建sortType、sortField。 图3 新建排序全局变量。 交互设置。 选中高级表格组件，单击，进行组件交互设置。 添加“点击排序时”交互动作。
新建一个大屏页面，从“全部组件 > 文本”中，拖拽“高级表格”组件至画布空白区域。 开启后台筛选功能。 图2 开启后台筛选 新建全局变量。 后台筛选需要搭配全局变量使用，请创建filters变量。 图3 新建筛选全局变量。 交互设置。 选中高级表格组件，单击，进行组件交互设置。 添加“点击筛选时”交互动作。
组件设置 在组件设置中，查看并管理当前项目中已引用到的所有组件。 组件设置 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在AstroCanvas界面的项目列表中，单击已创建的项目，进入项目。 在主菜单中，选择“项目设置”，进入项目设置页面。 参考设置项目锁中操作，获取项目锁。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
