云服务器内容精选
-
组件交互面板配置 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示例
-
组件数据面板配置 dataSlot：组件的数据面板槽位相关配置。 示例如下： 1 2 3 4 5 6 7 8 9 "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 9 10 11 12 13 14 15 16 17 18 "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 向数据面板槽位拖拽字段类型和槽位不匹配时的提示内容。
-
组件样式配置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 "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管理控制台。 单击管理控制台左上角的，选择区域。 单击开发者平台，进入开发者平台管理界面。 单击操作列的“编辑”，进入编辑组件界面。编辑相关参数，确认无误，单击“确定”。 编辑后的自定义组件需要重新发布。 表1 自定义组件参数说明 参数 描述 状态 有三种状态：开发中、待发布、已发布，不同的状态使用不同的颜色标记。 开发中（灰色）：注册了组件但未上传开发包。 待发布（蓝色）：上传了开发包组件信息，但是组件还未发布。 已发布（绿色）：表示自定义组件已发布，用户可以在大屏/仪表板组件列表中查看并使用该组件。 说明： 不发布自定义组件，大屏/仪表板组件列表不显示创建的自定义组件。 已发布的自定义组件，编辑信息确认后，即使手动改回去，发布按钮也会由置灰变为高亮。 如果开发包删除，组件不能发布。 编辑组件需要重新发布。 开发包 开发包的状态：待上传、已上传。 待上传：注册了组件但未上传开发包。 已上传：开发包已上传。 是否显示 显示：组件默认状态，当组件发布后，可以在组件列表里看到该组件。 隐藏：在组件列表中隐藏，隐藏后的组件在大屏/仪表板自定义列表中不可见。 说明： 隐藏已发布后的组件，已经使用该组件的大屏/仪表板不受影响，隐藏后的组件在大屏/仪表板自定义列表中不可见。
-
操作场景 当AstroZero低代码平台提供的预置高级组件无法满足您的开发需求时，开发者可以自定义组件包，并上传到AstroZero中。自定义组件包上传到AstroZero中后，可在高级页面中使用。自定义组件的开发流程如下： 下载组件模板 将AstroZero系统预置的模板到本地。 开发自定义组件 基于下载的模板，在本地根据自身业务需求开发组件。 上传组件到组件库并使用组件 将开发完的自定义组件上传到组件库，并在高级页面中使用。
-
操作场景 当AstroZero低代码平台提供的预置高级组件无法满足您的开发需求时，开发者可以自定义组件包，并上传到AstroZero中。自定义组件包上传到AstroZero中后，可在高级页面中使用。自定义组件的开发流程如下： 下载组件模板 将AstroZero系统预置的模板到本地。 开发自定义组件 基于下载的模板，在本地根据自身业务需求开发组件。 上传组件到组件库并使用组件 将开发完的自定义组件上传到组件库，并在高级页面中使用。
-
场景描述 本节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。如图1所示，页面中主要包含标签栏和详情展示两部分，通过切换标签栏来控制详情展示中的内容。 图1 页面示例 在页面开发中，通过两个自定义组件（标签页组件、详情展示组件）实现上述场景，其中标签页组件包含产品类别（手机、笔记本、平板等），详情展示组件用于展示不同产品类别的图片信息。两个组件通过事件和动作机制实现交互，在标签页组件中注册标签切换事件，此事件绑定详情展示组件中切换产品图片的动作。 本节使用的示例组件开发过程中使用了前端开发框架Vue及组件库Element。
-
组件使用数据集 数据集实例获取。 组件代码中可使用如下API，来获取对应的数据集实例。 ConnectorIns: thisObj.getConnectorInstanceByName('SelectDataConnector') || '' 调用数据集，获取数据。 thisObj.callFlowConn( this.ConnectorInsTabel, connParam, getFlowCallTabel); 例如，调用了dmax_line这个数据集，返回值如下图所示： 图1 返回值 这个数据因为键值名称并不是label、value，所以并不能渲染。此时需要一层映射，例如将city映射到label上，将code映射到value上。但是每次这个映射都不固定，需要交给用户自行配置，所以提出了映射的概念，即mapping。 图2 映射 由用户自己决定将什么字段拖拽映射到什么字段。例如，将city字段映射到了“选项标签展示值”字段，即label中，将code字段映射到了“选项值”字段，即value中。 [{ "city": "斗罗大陆", "pid": "null", "code": 0, "hasChildren": "true", "bool": 1 }, { "city": "武魂殿", "pid": 0, "code": 11111, "hasChildren": "true", "bool": 1 }] 映射后结果： [{ "label": "斗罗大陆", "pid": "null", "value": 0, "hasChildren": "true", "bool": 1 }, { "label": "武魂殿", "pid": 0, "value": 11111, "hasChildren": "true", "bool": 1 }] 组件在获取数据时，获取到的是经过映射转换的数据，可以直接使用label、value等固定字段。
-
组件使用静态数据 AstroCanvas通过调用组件定义的getMockData，来获取默认静态数据。 getMockData: function () { return { "dataValue": [ { "label": "周六", "value": "Sunday" }, { "label": "周日", "value": "Monday" }, { "label": "周一", "value": "Tuesday" } ] }; } 配置数据数据时，下图中的“静态数据”选项即为静态数据，支持直接在线编辑静态数据。 图3 静态数据
-
多数据集 部分组件可能存在使用多个数据源的情况，例如地图组件可能存在多个图层，相应配置可以如下： propertiesConfig: [ { config: [ { type: "dataSetting", name: 'heatMapDataConnector', mapping: {} }, { type: "dataSetting", name: 'DistrictDataConnector', mapping: {} } ], } ],
-
组件对接数据配置开关 组件的数据可来自于静态数据或通过数据集获取，在“{Widget}”.editor.js文件中，可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下： propertiesConfig: [{ type: 'dataSetting', name: 'selectDataConnector', mapping: { label: { keyTitle: { zh_CN: '选项标签展示值', en_US: 'Option label' }, limitNumber: '1', type: 'any', }, value: { keyTitle: { zh_CN: '选项值', en_US: 'Option value' }, limitNumber: '1', type: 'any', required: true, }, }, }, }] 表1 数据集字段说明 字段 类型 是否必填 示例 说明 type String 是 type: "dataSetting" dataSetting为数据集类型。 mapping Object 否 mapping 数据集数据拖拽的配置项。 name String 是 selectDataConnector 数据集实例的唯一标识。 表2 mapping字段说明 字段 类型 是否必填 示例 说明 type String 是 type: "value" 根据type校验拖入字段，为枚举值。 value: 数字 dateString: 日期 catacary: 任意字符 numberOrString: number或者String类型 keyTitle Object 是 keyTitle: { zh_CN: "X轴数据", en_US: "X axis Data" } 标题，需要国际化。 limitNumber String 否 type: '1' 拖拽字段个数限制。 1：只能拖拽一个字段。 1+：可以拖拽多个字段。 required Boolean 否 required: true 是否必须配置。
-
场景描述 本节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。如图1所示，页面中主要包含标签栏和详情展示两部分，通过切换标签栏来控制详情展示中的内容。 图1 页面示例 在页面开发中，通过两个自定义组件（标签页组件、详情展示组件）实现上述场景，其中标签页组件包含产品类别（手机、笔记本、平板等），详情展示组件用于展示不同产品类别的图片信息。两个组件通过事件和动作机制实现交互，在标签页组件中注册标签切换事件，此事件绑定详情展示组件中切换产品图片的动作。 本节使用的示例组件开发过程中使用了前端开发框架Vue及组件库Element。
更多精彩内容
CDN加速
GaussDB
文字转换成语音
免费的服务器
如何创建网站
域名网站购买
私有云桌面
云主机哪个好
域名怎么备案
手机云电脑
SSL证书申请
云点播服务器
免费OCR是什么
电脑云桌面
域名备案怎么弄
语音转文字
文字图片识别
云桌面是什么
网址安全检测
网站建设搭建
国外CDN加速
SSL免费证书申请
短信批量发送
图片OCR识别
云数据库MySQL
个人域名购买
录音转文字
扫描图片识别文字
OCR图片识别
行驶证识别
虚拟电话号码
电话呼叫中心软件
怎么制作一个网站
Email注册网站
华为VNC
图像文字识别
企业网站制作
个人网站搭建
华为云计算
免费租用云托管
云桌面云服务器
ocr文字识别免费版
HTTPS证书申请
图片文字识别转换
国外域名注册商
使用免费虚拟主机
云电脑主机多少钱
鲲鹏云手机
短信验证码平台
OCR图片文字识别
SSL证书是什么
申请企业邮箱步骤
免费的企业用邮箱
云免流搭建教程
域名价格
