检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
自定义组件开发规范 代码结构介绍 组件配置项（Config配置） 组件内置API 组件数据接入 组件交互
组件配置项（Config配置） 配置项总览 通用配置 input textarea input-number slider tab switch radio checkbox colorpicker time select list 父主题： 自定义组件开发规范
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
约束与限制 华为云Astro大屏应用实例 表1 华为云Astro大屏应用实例规格约束与限制 限制项 约束与限制 实例版本 华为云Astro大屏应用目前支持的实例版本有：华为云Astro大屏应用基础版、华为云Astro大屏应用专业版和华为云Astro大屏应用企业版。 华为云Astr
购买华为云Astro大屏应用实例 购买华为云Astro大屏应用实例 购买扩容包增加页面数 授权IAM用户使用华为云Astro大屏应用 登录华为云Astro大屏应用界面
气泡位置：设置提示气泡的显示位置，如右上方、正上方。 提示背景：设置提示气泡的背景颜色。 新增条件格式：单击“新增条件格式”，可设置条件和响应数据列的样式。如何新增条件格式，请参见新增条件格式。 数据 在数据中，设置文本编辑组件的数据来源，更多介绍请参见数据接入。 交互 在交互中，配置
轻应用API接口和ROMA API接口等。 数据源管理：新增并管理关系型数据库、DWS、DLI和华为云Astro轻应用等数据源。 数据集管理：新增并管理数据集，配置数据集后，在组件“数据”页签中可选择具体的数据集。 连接器管理：通过新建HTTP连接器，可引入第三方的API作为组件的数据来源。
可新增动作。在动作实现中，编写触发动作的执行逻辑。入参的echartsInst可以使用echarts的API，widgetInst可以使用AstroCanvas组件通用的API。单击“新增参数”，可以定义触发动作时入参字段。如何为自定义动作添加交互，请参见echarts组件自定义动作交互设置。
将鼠标悬浮在日期选择器上，组件名称即为组件ID。 图11 获取组件ID 操作组件。 获取到组件ID后，可以通过AstroCanvas提供的API来操作组件，如显示/隐藏组件。关于API的详细介绍，请参见内置API一览表。 // 显示组件 {widget2}.showWidget(); // 隐藏组件 {widget2}
新增条件格式：单击“新增条件格式”，可增加条件格式。 例如，该组件预置的静态数据如图5所示。期望“series”为“白名单”的“amount”数值标红，参考图6，单击组件上方图标，单击“+ 新增条件格式”，设置条件和响应数据列的样式。 图5 预置数据 图6 新增条件格式 图形 图
式”设置为“颜色”时，才显示该参数。 条件格式：单击“新增条件格式”，可设置条件和响应数据列的样式。如图5中所示，该设置表示sales列满足设置的条件（大于19000）时，id列显示为红色，否则显示为正常颜色。 图5 排行榜新增条件格式 图形 图形是指组件中，实现数据可视化的具体
一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。 表1 组件架构组成 API名称 API解释 是否必须 init(生命周期函数) 组件初始化入口API，初始化组件通用能力，负责注册组件事件和组件动作。
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件，用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription": "Echarts组件模板"
新增条件格式：单击“新增条件格式”，可增加条件格式。如图6中所示，该设置表示成功率列满足设置的条件（等于80.4%）时，组件名称列显示为红色，否则显示为正常颜色。 树状表格的条件格式，只有在关联关系以及响应数据列是单行文本和数字类型时才会生效。 图6 树状表格中新增条件格式 图形
messages-zh/messages-en.json 组件的国际化资源文件，用于配置多语言（本例模板中未体现）。 表3 组件名.js中预置API说明 分类 API及说明 组件实例预置API init方法：主要包含组件渲染需要初始化数据的入口函数。 render方法：负责整个组件渲染的业务逻辑方法。 ge
铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、
内容：设置标题内容。 位置选择：设置标题的显示位置，支持左、右和中。 背景色：设置标题的背景颜色。 字体：设置标题字体、颜色和大小等。 提示框格式：设置提示框的格式，如“系列名称 数值 数据项名称”和“系列名称 数据项名称 数值”。 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如
新增条件格式：单击“新增条件格式”，可增加条件格式。如图7中所示，该设置表示版本问题数列满足设置的条件（大于2200）时，门禁结果列显示为红色，否则显示为正常颜色。 高级表格的条件格式，只有在关联关系以及响应数据列是单行文本和数字类型时才会生效。 图7 新增条件格式 图形 图形
required Boolean 否 required: true 是否必须配置。 组件使用数据集 数据集实例获取。 组件代码中可使用如下API，来获取对应的数据集实例。 ConnectorIns: thisObj.getConnectorInstanceByName('Echar
下拉框鼠标悬浮时背景颜色：设置下拉框鼠标悬浮时的背景颜色。 下拉框鼠标悬浮时字体颜色：设置下拉框鼠标悬浮时的字体颜色。 新增条件格式：单击“新增条件格式”，可增加条件格式。 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图5 基础表格图形
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
