华为云用户手册

registerAction 一般用于在初始化阶段注册动作，只有通过此API注册后的事件才会在组件的动作列表中展现。使用方式参考如下： /* @param {obj} widgetInst widget实例 * @param {string} actionName 动作名称 * @param {string/{langKey:string}} actionDescription 动作描述 * @param {array} params 事件触发时传入的参数数组对象 * @param {*} receiveActionCbk 动作的回调函数，在回调函数中定义该动作的执行逻辑 */Studio.registerAction( this, "setSelectedItem", { zh_CN: "设置选中选项", en_US: "Set Selected item" }, [{ name: "itemVal"}], this.setSelectVal.bind(this)); setSelectVal的实现如下： /** * 响应外界组件组件交互，设置下拉框选中值 * @param {*} event */setSelectVal(event) { this.readerVm.$set(this.readerVm.selectConf, "selectValue", event.itemVal);}, 配置动作时，可以在华为云Astro大屏应用画布交付界面，配置itemVal的值为“${e.xxx}”将事件抛出的“xxx”参数复制到itemVal中。然后select组件内统一从itemVal获取数据。select组件的内部处理API如上面代码。

registerEvents 一般用于在组件初始化阶段注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。同样只有注册的事件之后才能通过triggerEvent触发，使用方式参考如下： /* @param {obj} widgetInst 组件对象自身 * @param {string} eventName 事件名 * @param {string/{langKey:string}} eventDescription 事件描述 */Studio.registerEvents(this, "selectItem", { zh_CN: "选中选项", en_US: "Choose Select item",}); 其中，“事件描述”（第三个参数）可以设置为String或者多语言对象。

registerWidget 必须在{widget}.editor.js中注册组件，使用方式参考如下： /* @param {string} widgetName * @param {string} description */Studio.registerWidget("widgetVueTemplate", "The widget template showing how to use the Vue library", params);

registerConnector 必须在connector.js中注册connector，使用方式参考如下： /* @param {string} connectorID * @param {string} connectorName * @param {string} description * @param {obj} connector * @param {obj} model */Studio.registerConnector("BridgeBasicTemplate", "BridgeBasicTemplate", "The bridge template showing how to use a bridge", BridgeBasicTemplate, BridgeBasicTemplateModel); 用户在接入桥接器时，如果预置的桥接器无法满足要求，可自定义桥接器。关于connector/model等参数对象的规则介绍，请参考自定义桥接器。

后续处理 发布为全局模板后，需要联系管理员进行审批，审批通过后，其他租户下的用户才可以使用该模板新建页面。 模板未审核 本租户下的用户登录华为云Astro大屏应用创建页面时，可在“未上线模板”中使用该模板新建页面。 图2 使用未上线模板新建页面 模板已审核 本租户下的用户或其他租户下的用户，可通过如下两种方式使用该模板创建页面。 方式一：在图2中的“预置模板”下，可查看到已审批的模板，并使用该模板新建页面。 方式二：登录华为云Astro低代码平台。在“资产中心”中，可查看到该模板，并可使用该模板新建页面。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 音频卡片 背景 背景色：设置组件卡片的背景颜色。 边框：组件边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见图2），默认为0，即铺满整个组件。

config配置示例 config配置示例如下，设置后效果如图1所示。 { migrateFrom: 'advancedSettings', headerTitle: { zh_CN: '数据映射', en_US: 'Data Mapping' }, belong: 'configuration', config: [ { type: 'select', name: 'commonProps.emphasisFocus', label: { zh_CN: '高亮时淡出', en_US: 'Emphasis Focus' }, value: 'series', options: [ { label: { zh_CN: '不淡出其它图形', en_US: 'None' }, value: 'none', }, { label: { zh_CN: '只聚焦当前高亮的数据的图形', en_US: 'Self' }, value: 'self', }, { label: { zh_CN: '聚焦当前高亮的数据所在的系列的所有图形', en_US: 'Series' }, value: 'series', }, ], }, { type: 'tab', name: 'commonProps.showLabel', label: { zh_CN: '显示标签', en_US: 'Emphasis Focus' }, value: true, options: [ { label: { zh_CN: '显示', en_US: 'Show' }, value: true, }, { label: { zh_CN: '隐藏', en_US: 'Hide' }, value: false, }, ], }, ], }, 图1 config配置设置后效果

将页面发布为全局模板 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在项目列表中，单击页面所在的项目，进入项目。 在所有页面中，单击待发布为全局模板的页面。 单击“编辑页面”，进入大屏开发页面。 在大屏开发页面，单击，选择“发布为全局模板”。 填写模板名称、描述、所属服务和封面等信息，单击“确定”。 图1 填写全局模板信息 名称：输入生成模板的名称，名称长度为1~32个字符，可包括中文、字母、数字及下划线。 描述：生成模板的描述信息，可按需进行设置。 发布方：设置模板的发布方。 发布模板库：设置模板库的语言，此处的语言是指模板库所在系统的语言。设置后在对应的系统语言模板库中，即可查看到该模板。 封面：为模板添加封面，可截图获取封面也可以自定义封面。

创建项目变量 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在华为云Astro大屏应用界面的项目列表中，单击已创建的项目，进入项目。 在主菜单中，选择“项目设置”，进入项目设置页面。 在页面右上角，选择“编辑项目”，获取项目编辑权限。 在左侧菜单栏中，选择“项目变量”，单击“添加变量”。 设置新建变量的参数，单击“确定”。 图1 添加变量 变量：输入新建项目变量的名称，只能由字母、数字组成，且必须以字母开头。 默认值：新建项目变量的默认取值。 变量说明：新建项目变量的说明信息，可以是变量的含义或用途等。 作用域：选择项目变量作用的页面，可以是项目中的所有页面也可以是某一个或多个页面。 设置完成后，单击“保存”，完成变量的创建。 创建多个项目变量时，单击“开启调序”，可调整项目变量的顺序。调整变量顺序对页面中引用的变量无任何影响，只影响视觉效果。

使用项目变量 参考创建页面中操作，创建所需的页面。 在页面上方的工具栏中，单击，可查看到创建项目变量中创建的项目变量。 如果在页面中新建一个页面级全局变量，且变量的名称和项目变量一致（如ProjectVariable），则只有页面全局变量会生效。 图2 查看项目变量 在数据或交互动作中，使用项目变量。 选中页面中的组件，单击组件上方的，在组件数据中使用项目变量。 图3 在组件数据中使用项目变量 选中页面中组件，单击组件上方的，在交互动作中使用项目变量。 图4 在交互动作中使用项目变量 更新项目变量。 方式一：通过交互动作，更新变量。 图5 在交互动作中更新变量 方式二：通过自定义动作，更新项目变量。 图6 通过自定义动作更新变量 其中，key为项目变量的名称，value为项目变量的值。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 指标卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题：组件是否显示标题。设置为显示时，支持设置如下属性。 内容：自定义标题的内容。 字体：设置自定义标题的字体、大小和颜色等。 对齐：设置标题的对齐方式，如左对齐、居中或右对齐。 标题背景色：设置标题的背景颜色。 内边距： 设置标题距离组件上下左右边界的距离。 图4 设置上边距 标题偏移量：设置标题与指标之间的距离。 图5 标题偏移量 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。

配置示例 select配置示例如下，配置后效果如图1所示。 {type: 'select',name: 'commProps.mySelect',value: 'Border',label: {zh_CN: '边框',en_US: 'Border'},options: [{value: 'Full',label: {zh_CN: '全边框',en_US: 'Full'}},{value: 'Corner',label: {zh_CN: '角边框',en_US: 'Corner'}},{value: 'No Border',label: {zh_CN: '无边框',en_US: 'No Border'}}]} 图1 select配置后效果

配置示例 tab配置示例如下，配置后效果如图1所示。 {type: 'tab',name: 'commProps.myTab',value: true,label: {zh_CN: 'tab的类型',en_US: 'tab Type Example'},options: [{label: {zh_CN: '开启',en_US: 'Enable'},value: true},{label: {zh_CN: '关闭',en_US: 'Disable'},value: false}]} 图1 tab配置后效果

升级已部署的华为云Astro大屏应用服务 方式一：创建新目录，重新部署华为云Astro大屏应用 在华为云Astro大屏应用服务控制台，单击实例中的“进入首页”，进入华为云Astro大屏应用界面。 在页面右上角，单击“账号名”，选择“本地部署”。 图1 选择本地部署 在本地部署信息中，单击“版本列表”，下载华为云Astro大屏应用运行环境部署包。 图2 下载新版本的运行环境部署包 进入旧版本的私有化部署目录，停止旧版本的华为云Astro大屏应用服务。 cd /home/canvas_private/AstroCanvas_Runtimesh stop.sh 参考私有化部署安装指导中操作，创建一个新目录，部署新版本的华为云Astro大屏应用。 方式二：替换旧版本中的private-deploy-版本号.jar包 获取新版私有化部署包并解压。 在华为云Astro大屏应用服务控制台，单击实例中的“进入首页”，进入华为云Astro大屏应用界面。 在页面右上角，单击“账号名”，选择“本地部署”。 在本地部署信息中，单击“版本列表”，下载华为云Astro大屏应用运行环境部署包。 图3 下载新版本运行环境部署包 解压已获取的华为云Astro大屏应用运行环境部署包，获取private-deploy-版本号.jar包。 进入私有化部署安装指导中私有化部署的华为云Astro大屏应用目录。 cd /home/canvas_private/AstroCanvas_Runtime 将目录中private-deploy-版本号.jar包替换为1.d中的新包。 图4 替换jar包 替换成功后，重新启动华为云Astro大屏应用服务。 cd /home/canvas_private/AstroCanvas_Runtimesh stop.shsh start.sh

文件示例 {"widgetApi": [{"name": "EchartsWidgetTemplate"}],"widgetDescription": "Echarts组件模板","authorName": "李四","width": "500","height": "360","i18n": [{"name": "messages-en"},{"name": "messages-zh"}],"requires": [{"name": "global_Vue","version": "100.8.7"},{"name": "global_VueI18n","version": "100.7.8"},{"name": "global_echarts","version": "102.0.4"}]}

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 OpenLayers地图卡片 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右，如图2）的距离，默认为0，即铺满整个组件。

图形 图形是指组件中，实现 数据可视化 的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图5 OpenLayers地图图形 统一配置 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层：单击“新增图层”，可新建图标图层、标签图层、飞线图层、基础热力图层、面图层和线图层。 图6 新建图标图层 基本配置 类型：固定为“图标图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层样式 显示类型：设置图标的显示类型，支持均分显示和区间显示。 图标图片：“显示类型”设置为“均分显示”时，会根据图标图片的数量，将图标值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的图标。“显示类型”设置为“区间显示”时，可设置不同的区间，当图标值落在对应的区间内，显示对应的颜色值，区域范围外的图标将不显示。 图片宽度：设置图片的宽度。为空时，宽度按图片比例显示，宽高都为空时按图片原始大小显示。 图片高度：设置图片的高度。为空时，高度按图片比例显示，宽高都为空时按图片原始大小显示。 图片比例：设置图片的宽高比，即图片的宽度与高度的比值 上下偏移：设置图标根据点经纬度的上下偏移。 左右偏移：设置图标根据点经纬度的左右偏移。 图层标签 标签：是否开启图标标签。 标签悬浮：开启时，图标鼠标悬浮时显示标签。关闭时，标签常显。 系列名：标签是否显示系列名，对应静态数据中的“label”字段。 系列名字体：设置系列名的字体、大小和颜色等。“标签悬浮”设置为“开启”时，显示该配置项。 数值：标签是否显示数值，对应静态数据中的“value”字段。 数值字体：设置数值字体。“标签悬浮”设置为“开启”时，显示该配置项。 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图7 新建标签图层 基本配置 类型：固定为“标签图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 标签样式 文本颜色：设置标签中文本的颜色。 系列名：标签是否显示系列名，对应静态数据中的“label”字段。 系列显示字符数：系列中显示的字符个数。例如，取值设置为“2”，则只会显示2个字符，多余的内容显示为“A省...”。 系列名字体：设置系列名的字体、大小和颜色等。 数值：标签是否显示数值，对应静态数据中的“value”字段。 数值显示字符数：数值中显示的字符个数。 数值字体：设置数值的字体、大小和颜色等。 显示类型：设置标签背景的显示类型，支持均分显示和区间显示。 颜色设置：“显示类型”设置为“均分显示”时，会根据颜色设置的数量，将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的背景颜色。“显示类型”设置为“区间显示”时，可设置不同的区间，当标签值落在对应的区间内，显示对应的背景颜色，区域范围外的图标将不显示。 上下偏移：设置标签根据点经纬度的上下偏移。 左右偏移：设置标签根据点经纬度的左右偏移。 标签图标 标签图标：是否显示标签图标。 显示类型： 标签图标的显示类型，支持均分显示和区间显示。 图标图片：“显示类型”设置为“均分显示”时，会根据图标图片的数量，会将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的图标。“显示类型”设置为“区间显示”时，可设置不同的区间，当标签值落在对应的区间内，显示对应的图标，区域范围外的图标将不显示。 图片宽度：设置图片的宽度。为空时宽度按图片比例显示，宽高都为空时按图片原始大小显示。 图片高度：设置图片的高度。为空时高度按图片比例显示，宽高都为空时按图片原始大小显示。 上下偏移：设置图标根据点经纬度的上下偏移。 左右偏移：设置图标根据点经纬度的左右偏移。 图8 新建飞线图层 基本配置： 类型：固定为“飞线图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层样式 显示类型：设置飞线颜色的显示类型，支持均分显示和区间显示。 颜色设置：根据颜色设置的数量，会将飞线值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的颜色。“显示类型”设置为“均分显示”时，才显示该配置项。 填充颜色：根据设置不同的区间，当飞线值落在对应的区间内，显示对应的颜色值。区域范围外的飞线将不显示。“显示类型”设置为“区间显示”时，才显示该配置项。 选中色：选中图层时，图层显示的颜色。 宽度：设置飞线的起点宽度。 动画效果 脉冲效果：是否开启飞线的脉冲效果。 脉冲点长度：设置脉冲长度，开启脉冲效果后显示该配置项。 脉冲点速度：设置脉冲速度，开启脉冲效果后显示该配置项。 脉冲点颜色：设置脉冲点的颜色，开启脉冲效果后显示该配置项。 图层标签 标签悬浮：飞线鼠标悬浮时，是否显示标签。 系列名：标签是否显示系列名。 系列名内容：请输入系列名内容。 系列名字体：设置系列名的字体、颜色和大小等。 数值：标签是否显示数值，对应静态数据中的“value”字段。 数值字体：设置数值的字体、颜色和大小等。 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图9 新建基础热力图层 基本配置 类型：固定为“基础热力图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层样式 颜色设置：设置图层的颜色，单击“新增颜色设置”，可添加新的颜色。 最大值：热力值的最大值，默认为数据中的最大值，也可以自定义设置，会控制热力的最热区域的显示效果。 最小值：热力值的最小值，默认为数据中的最小值，也可以自定义设置，会控制热力的最冷区域的显示效果。 半径：设置热力的聚合半径。 模糊半径：热力图在渲染过程中，用于控制热力图的模糊效果。 图10 新建线图层 基本配置 类型：固定为“线图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层样式 显示类型：设置图标的显示类型，支持“单色”和“分类显示”。 “显示类型”设置为“分类显示”时，线颜色ID配置规则如下： 单线生效：直接配置对应线ID。 多条线生效：使用中文逗号“，”或英文逗号“,”，分隔对应线ID。 未设置线ID的线颜色默认走单色类型设置颜色。 如果某个线ID设置了多个颜色，最下面设置的颜色优先级最高。 线颜色：设置线的颜色。“显示类型”设置为“单色”时，才显示该配置项。 颜色设置：根据实际需求，设置线ID的颜色。“显示类型”设置为“分类显示”时，才显示该配置项。 线宽类型：设置线宽度的类型，支持统一宽度和分类宽度。 线宽度：指定图层中线条的宽度。“线宽类型”设置为“统一宽度”时，才会显示该参数。 线宽：根据自身需求，设置分别设置线的宽度。“线宽类型”设置为“分类宽度”时，才会显示该参数。 线样式：设置线条的样式，支持实线、长虚线、短虚线和点线。 图层标签 标签悬浮：开启时，鼠标悬浮在图层上时会显示标签。 标签字体：设置标签的字体、大小和颜色等。 图11 新建面图层 基本配置 类型：固定为“面图层”。 图层：显示或隐藏图层。 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 图层透明度：设置图层的透明度。 图层样式 显示类型：设置图标的显示类型，支持“单色”和“分类显示”。 面颜色：设置图层中面的颜色。“显示类型”设置为“单色”时，才显示该配置项。 选中色：选中图层中面时，面显示的颜色。 边框：是否显示图层中面的边框。 边框样式：设置边框的样式，如虚线、实线。“边框”设置为“开启”时，才显示该配置项。 虚线参数：设置虚线的参数，格式为[实线长度, 虚线长度]或者[实线长度, 虚线长度, 实线长度, 虚线长度]。“边框样式”设置为“虚线”时，才显示该配置项。 描边颜色：设置边框的颜色。“边框”设置为“开启”时，才显示该配置项。 描边宽度：设置边框的宽度。“边框”设置为“开启”时，才显示该配置项。 颜色设置：根据实际需求，设置面ID的颜色。“显示类型”设置为“分类显示”时，才显示该配置项。 图层标签 标签悬浮：开启时，鼠标悬浮在图层上时会显示标签。 标签字体：设置标签的字体、大小和颜色等。

配置 在配置中，设置地图组件的基本信息、地图控件和地图控制，如是否显示比例尺、是否支持缩放、拖拽等。 图4 OpenLayers地图配置 地图基本配置 地图链接：输入地图的链接。 切片大小：设置地图瓦片（Tile）的尺寸。 坐标系投影方式：将地理坐标系转换为平面坐标系的过程和方法，直接在下拉框中选择或者手工输入。 范围：地图底图所覆盖的地理范围。 单位：根据选择的坐标系投影方式自动关联，不可配置。 地图中心经度：设置地图中心点的经度。 地图中心维度：设置地图中心点的经度。 缩放级别：设置地图的缩放级别，取值范围为2~26。 缩放范围：设置地图可以缩放的范围，取值范围为2~26。

文件介绍 i18n.json为组件的国际化资源文件，用于配置多语言，目前支持的多语言包含中英文两种，相应的key值分别为['zh-CN','en-US']。多语言文件支持配置在多个Json中，在packageinfo.json中的配置示例如下： "i18n": [{"name": "messages-en" // 组件的多语言文件,相应文件为messages-en.json},{"name": "messages-zh" // 组件的多语言文件,相应文件为messages-zh.json}],

配置示例 input-number配置示例如下，配置后效果如图1所示。 {type: 'input-number',name: 'commProps.myInputNumber',value: '88',label: {zh_CN: 'input-number的类型',en_US: 'input-number Type Example'},step: '0.01',stepStrictly: true,precision:'2',placeholder: {zh_CN: '请输入标题内容',en_US: 'Enter the title content.'},min: '20',max: '100'} 图1 input-number配置设置后效果

新建Prometheus数据源 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在主菜单中，选择“数据中心”。 在左侧导航栏中，选择“数据源”。 在数据源管理页面，单击“新建数据源”。 选择“Prometheus”，配置数据源参数。 图1 新建Prometheus数据源 数据源名称：数据源的名称，用于标识该数据源。长度为1~32个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 服务地址：返回Prometheus数据的接口所在服务地址的URL。输入的URL地址中，支持包含变量，例如“https:example.{region}.com”。地址中的变量，在使用数据源时，支持修改，如图3。 图2 服务地址包含变量 图3 更改变量 接口鉴权方式：设置接口的鉴权方式，支持无身份认证和基本身份认证（用户名/密码）两种。 无身份认证：不需要任何验证信息，直接调用的接口，通常用于访问一些公开的接口。 基本身份认证（用户名/密码）：通过输入用户名和密码，来进行用户身份验证。 用户名：“基本身份认证”鉴权中的用户名部分。“接口鉴权方式”设置为“基本身份认证（用户名/密码）”时，才显示该参数。 密码：“基本身份认证”鉴权中的密码部分。“接口鉴权方式”设置为“基本身份认证（用户名/密码）”时，才显示该参数。 描述：新建数据源的描述信息，长度不能超过128个字符。 单击“连接测试”，显示“连接成功”，表示数据源可以调通。 单击“保存”，完成数据源的创建。

文件示例 messages-zh.json配置示例 { "zh-CN": { "dataSetting.s": "系列", "setting": "EchartsWidgetTemplate配置" }} messages-en.json配置示例 { "en-US": { "dataSetting.s": "Series", "setting": "EchartsWidgetTemplate Setting" }}

getSafeUrl() 对外部链接进行xss安全过滤 ，获取安全的绝对URL地址，使用方式参考如下： /* * @param {*} url */SafeUtils.getSafeUrl(url);SafeUtils.getSafeUrl('/test.html') //return:https://华为云Astro大屏应用 域名 /test.htmlSafeUtils.getSafeUrl('javascript:alert(123)') //return:'unsafe:' 只有安全的链接才会被访问，其他形式的URL都会响应一个“unsafe:”，无法访问。

代码优化 参考新建转换器中操作，新建一个转换器。 在“测试数据”中，选择所需的数据源。 在“function filter(dataset)”中，输入转换器的数据处理代码。 在页面右下方单击，进入盘古助手。 在盘古助手中，单击“快捷指令”，选择“代码优化”。 图1 选择代码优化 盘古助手会对当前转换器中的代码进行优化。 如果优化后的代码更佳，可单击，将“function filter(dataset)”中转换器的数据处理代码替换为优化后的代码。 图2 代码优化

配置项说明 表1 list配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "list" 配置项类型。 name String 是 name:"intervalColors" 双向绑定list名称。 label Object 否 label: { "zh_CN": "中文标签", "en_US": "English Label" } 配置项的标签，需要国际化。 listFixed Boolean 否 listFixed: true 列表个数固定，不展示新增、删除功能，默认为true展示。 labelOnce Boolean 否 labelOnce: true 仅在list首项展示一次label。 设置为true时，只有list中第一项展示list label。 设置为false时，每一项都展示label。 showIndex Boolean 否 showIndex: true label末尾显示计数。 设置为true时，label末尾进行计数(index+1)展示为label1，label2…。 设置false时，每一个label内容相同。 displayMode String 否 displayMode: “box”displayMode: “simple” 显示为下拉框中或平铺。 box：显示在下拉框中。 simple：直接显示。 events Object 是 events: { addItemFunc: function (vm, index) { return { size: 1, color: 'rgba(11,129,246,1)'} }, itemDelCallBack: function (values) { if (values && values.length) { values[values.length - 1].size = 1; } }, }, 增加和删除list中一项。默认有增加删除功能，所以需要添加addItemFunc和itemDelCallBack函数。 如果noAdd为true，不需要添加。 childItems Array 是 childItems: [ { type: "colorpicker", name: "color", value: "rgba(11,129,246,1)", width: 26, showInput: false, }, { type: "input-number", name: "number", prop: "number", label: "序列号" originFrom: "advanceEditvm", value: "123", width: 74, labelWidth: 20, }] list中每一项含有的基础配置项。 基础配置项中可以通过加入width调整一行中的占比，例如3个options的width是20,30,30，三个配置项就会出现在一行。如果width是20,30,70，前两个会在一行，第三个占第二行的70%。 如果不加入width或者width占比为100，就会单独占一行。 基础配置项中也增加了labelWidth，在有label的情况下可以通过输入数字控制label的宽度（单位为px）。 tip Object 否 tip: { zh_CN: "当前排行榜展示的数据行数", en_US: "Number of data rows displayed in the current ranking page.", } label后会显示info提示。 allowNone Boolean 否 allowNone: true, 是否允许删除到空。默认为false，不允许删除到空。 helpLink String 否 helpLink: "http://..." 使用helpIcon。

配置示例 配置后效果，如图1所示。 { type: "list", name: "commProps.rowCusBg", displayMode: "simple", labelOnce: true, allowNone: true, label: { zh_CN: "背景色", en_US: "Background Color" }, helpLink: "https://***.html", childItems: [ { type: "colorpicker", name: "color", originFrom: "advanceEditvm", value: "", width: 26, showInput: false, }, { type: "string", name: "row", originFrom: "advanceEditvm", label: { zh_CN: "序列号", en_US: "Serial Number" }, value: "", width: 74, }, ],}, 图1 list配置后效果

注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例： 在文件global_SelectWidget.editor.js中定义事件 eventConfig: { sendSelect: { desc: { zh_CN: "当选中选项时", en_US: "Select Choose" }, fields: [ { name: "selectValue", desc: { zh_CN: "选项值", en_US: "Select Choose" }, }, ], }, }, 在文件global_SelectWidget.js的init钩子中注册事件 * @params thisObj: 组件实例，等同于this* @params "sendSelect": 事件key值* @params { "zh_CN": "当选中选项时", "en_US": "Select Choose" }: 事件描述，国际化* @params []: 空数组，固定写法 （内部组件暂时没有用到过）*/Studio.registerEvents(thisObj, "sendSelect", { "zh_CN": "当选中选项时", "en_US": "Select Choose" }, []); 图1 自定义事件配置后效果 表1 eventConfig字段说明 字段 类型 说明 sendSelect String 自定义事件的key值。 desc Object 自定义事件的中英文描述。 fields Array 自定义事件中，暴露给全局变量的内容。

配置 在配置中，为图观端场景编辑器设置容器名称和场景地址。 图2 图观端场景编辑器配置 容器名称：设置容器的名称，命名必须唯一。名称是组件的唯一标识，设置后其他3D组件会通过这个标识，识别到这个容器，并在容器上进行渲染。 场景地址：设置渲染的3D场景地址。 选择场景：单击“选择场景”，可以在“场景”中新建场景或选择已有场景，也可以从“案例库”中选择场景。 输入场景URL：直接输入图观的二次开发场景地址。

响应动作函数 以数据刷新的响应动作函数为例，向您介绍组件的响应动作函数。 /*** 数据刷新的响应动作函数示例 * 文件global_SelectWidget.js中, 与render函数平级定义*/confirmLocationWidgetCbk: function (param) { if (param && param.eventParam && this.vm) { this.vm.getDataEntry(param.eventParam); } },// 获取当前输入框值getInputValue: function () {if (this.vm && this.vm.selectConfObj) { return this.vm.selectConfObj.selectValue; }},// 设置组件双向绑定的值setInputWidgetValue: function (value) { this.vm.selectConfObj.selectValue = value; if (this.editVm?.selectConfObj) { this.editVm.selectConfObj.selectValue = value; }this.advanceEditvm?.save();},// 更新组件配置setWidgetProperties: function (selectConfObj) {magno.savePropertiesForWidget({ selectConfObj: JSON.stringify(selectConfObj), });},setInput: function (value) { this.vm.selectConfObj.selectValue = value.customizeVal; if (this.editVm?.selectConfObj) { this.editVm.selectConfObj.selectValue = value.customizeVal; } this.advanceEditvm?.save();},

注册动作 在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。 图1 响应动作 /*** 文件global_SelectWidget.js中, 在init钩子中注册响应动作* @params thisObj: 组件实例*/Studio.registerAction(thisObj,'confirmLocationWidgetCbk','confirmLocationWidgetCbk',[],$.proxy(thisObj.confirmLocationWidgetCbk, thisObj),[], ); Studio.registerAction(thisObj, 'getInputValue', 'getInputValue', [], $.proxy(thisObj.getInputValue, thisObj), []); Studio.registerAction(thisObj,'setInputWidgetValue','setInputWidgetValue',[],$.proxy(thisObj.setInputWidgetValue, thisObj),[], ); Studio.registerAction(thisObj,'setWidgetProperties','setWidgetProperties',[],$.proxy(thisObj.setWidgetProperties, thisObj),[], ); Studio.registerAction(thisObj,'setInput','setInput',[{ name: 'customizeVal', type: 'text' }],$.proxy(thisObj.setInput, thisObj),[], );