自定义组件-华为云

智能数据洞察 DATAARTS INSIGHT-创建自定义组件:步骤二：下载开发者工具并制作开发包

步骤二：下载开发者工具并制作开发包单击开发者平台界面右上角的“下载开发者工具”，下载开发包保存在本地。解压压缩包配置开发包，详细开发包介绍请参见自定义组件开发包说明。开发自定义组件需要的环境准备：node.js建议20以上版本、npm建议10.5.0以上版本。进入insight-dev-tools文件夹，以windows系统管理员身份启用命令行（cmd），并确保在insight-dev-tools路径。 npm install 组件内部的link连接。 npm link 组件初始化。 insight init 图1 初始化 “1”代表初始化命令。 “2”代表选择语言。 “3”代表组件名称，用户可自定义。 “4”代表组件别名，用户可自定义。 “5”代表组件版本号，用户可自定义。 “6”代表组件的描述，用户根据需求自定义。初始化后，insight-dev-tools文件夹中出现src目录，src目录中包含组件的配置目录。图2 src目录 gui.js：组件的配置，包括样式、数据和交互。 index.js：实现配置文件。 index.less：样式配置文件。 package.json：依赖包文件。进入src目录，构建组件，构建后src目录下出现dist文件夹（dist文件中的index.js指的当前实现的组件包）。进入src目录。 cd .\src\ 构建组件。 insight build

智能数据洞察 DATAARTS INSIGHT 自定义组件

华为云Astro大屏应用-组件数据接入:多数据集

多数据集部分组件可能存在使用多个数据源的情况，例如地图组件可能存在多个图层，相应配置可以如下： propertiesConfig: [ { config: [ { type: "dataSetting", name: 'heatMapDataConnector', mapping: {} }, { type: "dataSetting", name: 'DistrictDataConnector', mapping: {} } ], } ],

华为云Astro大屏应用自定义组件开发规范

华为云Astro大屏应用-组件数据接入:组件使用静态数据

组件使用静态数据华为云Astro大屏应用通过调用组件定义的getMockData，来获取默认静态数据。 getMockData() { const seviceWaterLevel = this.$t('setting.seviceWaterLevel'); const seviceLoad = this.$t('setting.seviceLoad'); return [ { x: '00:00', y: 11.69, s: seviceWaterLevel, }, { x: '02:30', y: 17.46, s: seviceWaterLevel, }, { x: '05:00', y: 28.57, s: seviceWaterLevel, }, { x: '07:30', y: 12.7, s: seviceWaterLevel, }, { x: '10:00', y: 18.99, s: seviceWaterLevel, }, { x: '12:30', y: 3.7, s: seviceWaterLevel, }, { x: '15:00', y: 18.52, s: seviceWaterLevel, }, { x: '17:30', y: 23.81, s: seviceWaterLevel, }, { x: '20:00', y: 10.58, s: seviceWaterLevel, }, { x: '22:30', y: 15.82, s: seviceWaterLevel, }, { x: '24:00', y: 3.76, s: seviceWaterLevel, }, { x: '00:00', y: 5.69, s: seviceLoad, }, { x: '02:30', y: 12.46, s: seviceLoad, }, { x: '05:00', y: 18.57, s: seviceLoad, }, { x: '07:30', y: 25.7, s: seviceLoad, }, { x: '10:00', y: 13.99, s: seviceLoad, }, { x: '12:30', y: 9.7, s: seviceLoad, }, { x: '15:00', y: 20.52, s: seviceLoad, }, { x: '17:30', y: 28.81, s: seviceLoad, }, { x: '20:00', y: 15.58, s: seviceLoad, }, { x: '22:30', y: 19.82, s: seviceLoad, }, { x: '24:00', y: 9.76, s: seviceLoad, }, ]; }, 配置数据数据时，下图中的“静态数据”选项即为静态数据，支持直接在线编辑静态数据。图3 静态数据

华为云Astro大屏应用自定义组件开发规范

华为云Astro轻应用-在线开发AstroZero高级页面自定义组件:操作场景

操作场景当AstroZero低代码平台提供的预置高级组件无法满足您的开发需求时，开发者可以自定义组件包，并上传到AstroZero中。自定义组件包上传到AstroZero中后，可在高级页面中使用。自定义组件的开发流程如下：下载组件模板将AstroZero系统预置的模板到本地。开发自定义组件基于下载的模板，在本地根据自身业务需求开发组件。上传组件到组件库并使用组件将开发完的自定义组件上传到组件库，并在高级页面中使用。

华为云Astro轻应用为AstroZero高级页面添加自定义组件

智能数据洞察 DataArts Insight-gui.json规范:组件数据面板配置

组件数据面板配置 dataSlot：组件的数据面板槽位相关配置。示例如下： 123456789 "data": { "version": "2.0" "dynamicData": { "slots": [...]， "filter": true, "sort": true}, } 表5 dataSlot参数说明参数是否必选参数类型描述 version 是 “2.0” 值固定为“2.0”。 slots 是 Slot[] 数据面板中的数据配置区域，参考slots参数说明。 filter 是 Boolean 数据面板中是否展示过滤槽位。 sort 是 Boolean 数据面板中是否展示排序槽位。图2 组件数据面板 dataSlot配置示例示例中dataSlot参数如下： 1 2 3 4 5 6 7 8 9101112131415161718 "dataSlot": { "version": "2.0", "dynamicData": { "slots": [ { "areaId": "area_value", "label": "度量槽位", "rule": { "maxColNum": 1, "mimColNum": 0, "needAggregator": true } } ], "filter": true, "sort": true }}, 其中slots为槽位的定义如下：表6 slots参数说明参数是否必选参数类型描述 areaId 是 String 数据槽位类型，可选值参考AreaId说明。 label 是 String 数据槽位展示名称。 rule 否 Object 配置数据槽位规则和限制，参考rule说明。 AreaId说明 AreaId标识数据面板槽位类型，AreaId值如下：表7 AreaId值说明值描述 area_column 列槽位，支持维度和度量。 area_type 维度槽位，只能拖拽维度字段。 area_value 度量槽位，只能支持度量字段。 area_color 颜色图例槽位，只支持维度，用于对数据进行分类。 rule说明 rule为数据面板槽位规则信息，rule参数说明如下：表8 rule值说明值是否必选类型描述 minColNum 否 Number 数据面板槽位最少需要的字段个数。 maxColNum 否 Number 数据面板槽位最多支持的字段个数。 dataType 否 String[] 支持的字段类型，可选值为“STRING”、“DATE”、“NUMBER”，不配置该字段则默认为匹配AreaId对应的类型。AreaId说明。 typeErrorTip 否 String 向数据面板槽位拖拽字段类型和槽位不匹配时的提示内容。

智能数据洞察 DataArts Insight 自定义组件开发包说明

智能数据洞察 DataArts Insight-gui.json规范:组件交互面板配置

组件交互面板配置 event：组件的交互相关配置。示例如下： "event": { "eventConfig": [ { "type": "select" } ]} Event为key：value形式的对象，其中key值为交互事件名称定义，value值为交互事件的相关配置，具体如下：表9 event value参数说明参数是否必选参数类型描述 eventConfig 是 Arrary 交互配置，值为数组。表10 eventConfig参数说明参数是否必选参数类型说明 type 是 select、drive、link select：允许组件在交互面板里通过交互编辑的方式定义交互事件，该事件和drive、link类型不支持同时配置。 isMultivalue：值为true时，操作符只能为“in”，适用于多选下拉。值为false时，操作符包括“=”、“≠”“﹥”等，适用于单选下拉。如图4所示，此时isMultivalue值为true。说明： select、isMultivalue只支持大屏，不支持仪表板。 drive：允许组件在交互面板里配置联动，和select类型不支持同时配置。 link：允许组件在交互面板里配置跳转。图3 type为select的交互入口图4 type为select的示例图5 type为link和drive示例

智能数据洞察 DataArts Insight 自定义组件开发包说明

智能数据洞察 DataArts Insight-gui.json规范:组件样式配置

组件样式配置 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930313233343536373839 "style": [ { "label": "全局样式", "labelId": "global_style", "isExpand": true, "children": [ { "label": "字体大小", "name": "fontSize", "type": "number", "min": 12, "max": 32, "value": 12 }, { "label": "字体粗细", "name": "fontWeight", "type": "select", "options": [ { "key": "Normal", "value": "normal" }, { "key": "Bold", "value": "bold" } ], "value": "normal" }, { "label": "颜色", "name": "color", "type": "color", "value": "#ffffff" } ] } ], Style参数为数组形式，其中每个数据元素将形成一个样式配置项，每个数据元素还能包含相关的子配置项，最多支持两层，具体参数说明如下：表2 Style参数说明参数是否必选参数类型描述 label 是 String 配置项标签名称。 isExpand 否 Boolean 是否展开子配置项。 true：展开。 false：不展开。 name 是 String 配置项key值，用户在命名时要注意唯一性（只限于当前组件）。配置项的其他属性参数否 - 不同UI类型具有不同的属性参数，请参见UI类型介绍。 children 否 Array of children object 配置项所拥有的子配置项，如下图所示全局样式下包含字体和颜色等配置。表3 children参数说明参数是否必选参数类型描述 label 是 String 子配置项标签名称。 type 是 String 样式配置输入框类型，DataArts Insight开放的UI类型请参见UI类型介绍。 name 是 String 子配置项key值，用户在命名时要注意唯一性（只限于当前组件）。 value 是 String | Number 子配置项样式取值。子配置项的其他属性参数是 - 不同UI类型具有不同的属性参数，请参见UI类型介绍。示例如下所示：图1 style示例表4 样式面板示例说明区域编号描述 1 对应字段isExpand。 2 对应字段label。 3 对应字段type，此处type分别为number、select、color类型。

智能数据洞察 DataArts Insight 自定义组件开发包说明

云服务器内容精选

自定义组件

7*24

备案

专业服务

退订

建议反馈

售前咨询热线