检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
面，可从下方左侧面板选择字段名、函数或者直接输入函数，如图5。 图5 表达式设置 单击“保存”，完成数据集的创建。 在组件中使用数据集 返回AstroCanvas项目列表页面。 进入开发页面，拖拽所需组件（如基本柱图）到画布中。 图6 拖拽基本柱图到画布中 选中该组件，单击组件上方的，进入组件数据页面。
thisObj), [], ); 响应动作函数 以数据刷新的响应动作函数为例，向您介绍组件的响应动作函数。 /** * 数据刷新的响应动作函数示例 * 文件global_SelectWidget.js中, 与render函数平级定义 */ confirmLocationWidgetCbk:
在左侧导航栏中，选择“数据源”。 在数据源管理页面，单击“新建数据源”。 选择“关系型数据库”，配置数据源参数。 图1 新建关系型数据库数据源 数据源名称：新建数据源的名称，用于标识该数据源。长度为1~32个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 数据库类型：数据库支持的类型，按需选择。
Destory为组件的通用生命周期函数，其余为推荐模板实现。 表1 组件架构组成 API名称 API解释 是否必须 init(生命周期函数) 组件初始化入口API，初始化组件通用能力，负责注册组件事件和组件动作。 是 render(生命周期函数) 组件核心渲染API，负责组件的实例化、数据调用及事件、动作的实际实现。
解组件的开发规范。下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。 本节使用的示例组件开发过程中使用了前端开发框架Vue及Echarts，请提前了解。 图1 最终呈现效果 操作步骤 下载图表模板。 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
ECharts图表”中，拖拽“基础折线图”组件至画布空白区域，如图1。 图1 Echarts图表 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 卡片装饰：卡片装饰设置，可根据自身的
的组件前单独通过开关图标设置各组件的桥接器是否使用模拟数据，对个别组件进行个性化设置，有效减少手动修改操作。 该功能的实现原理是：系统在桥接器代码中已增加mockData属性来记录桥接器是否启用了模拟数据，同时在桥接器父类代码中预置了getMockData函数，开发人员只需在自定
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值来判定是否显示，返回true显示
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值
内置API一览表 表1 内置API一览表 API API说明 init 组件渲染的入口函数，组件自己实现继承，使用推荐模板即可。 render 整个组件渲染的业务逻辑实现入口，组件自己实现继承。 getConnectorProperties 获取Connector对接的配置值，用于查看与Connector相关的信息。
取值。 图例标记：设置图例小图标形状。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小。图例文字内容来源于数据模型下“s”的取值。 左间距：图例到饼图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距：图例到饼图组件顶部距离占组件高度。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
