华为云用户手册

配置示例 radio配置示例如下，配置后效果如图1所示。 {type: 'radio',name: 'commProps.myRadio',value: '我是radio的类型',label: {zh_CN: 'radio的类型',en_US: 'radio Type Example'},sourceLabel: 'label',sourceKey: 'value',options: [{value: 'happy',label: {zh_CN: '开心',en_US: 'primary'}},{value: 'sad',label: {zh_CN: '不开心',en_US: 'dashed'}}]} 图1 radio配置后效果

事件 表2 事件 事件名称 调用配置项中的方法 说明 回调参数 input blur 在input值改变时触发 (event, data, field) change change 仅在输入框失去焦点或用户按下回车时触发 (data, field) blur blur 在输入框获得焦点时触发 (value, data, field) focus focus 在输入框失去焦点时触发 (value, data, field)

配置示例 input配置示例如下，配置后效果如图1所示。 {type: 'text',name: 'commProps.myText',value: '我是text的类型',label: {zh_CN: 'text的类型',en_US: 'text Type Example'},placeholder: {zh_CN: '请输入标题内容',en_US: 'Enter the title content.'},prefix: '↑',suffix: '%'} 图1 input配置设置后效果

文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。 表1 组件架构组成 API名称 API解释 是否必须 init(生命周期函数) 组件初始化入口API，初始化组件通用能力，负责注册组件事件和组件动作。 是 render(生命周期函数) 组件核心渲染API，负责组件的实例化、数据调用及事件、动作的实际实现。 是 beforeDestroy(生命周期函数) 组件销毁回调事件，负责组件在销毁期间的内存释放逻辑实现，需要把组件绑定的一些dom事件及全局的引用销毁。 是 initContainer render中抽取的独立逻辑，初始化组件container，所有组件逻辑统一。 统一实现，无需改动。 getInitProps render中抽取的独立逻辑，基于默认prop和组件配置的props进行融合处理，并返回。 建议实现。 initI18n 初始化组件message-en/message-zh的多语言信息，统一注册到独立的i18nVue实例中，供组件获取桩数据、获取默认配置、初始化组件统一使用。 建议实现。 initReaderVm render中抽取的独立逻辑，初始化运行态组件VM实例。在实例中获取数据并实现组件的核心渲染。 建议实现。 registerWidgetActionAndEvent init中抽取的独立逻辑，注册组件对外暴露的的事件和动作。 按需实现，组件定义事件和动作时使用。 getMockData 组件在没有对接外部数据源时，使用的获取桩数据的API自定义实现。考虑数据集天然支持二维数组对象，桩数据结构统一为二维数组对象[{id:3,name:'zhangsan'}]。某些场景假如只需要一个简单值val，可以设置组件桩数据设置为简单二维对象数组[{val:123}]。 -

预置分类 预置分类为华为云Astro大屏应用预置的分类，包含的图标和名称如下所示： 表1 预置分类包含的图标和名称 name 分类 图标关键字 图标 说明 card 卡片-自定义 card - configuration 配置-自定义 configuration 组件级的配置项建议放到该分类中，如背景、标题等。 series 图形-自定义 series 图表的系列数据配置。 legend 图例-自定义 legend 图表的图例显示/隐藏、样式控制配置。 tooltip 提示-自定义 tooltip 图表的悬浮提示配置。 coordinate 坐标轴-自定义 coordinate 图表的X、Y坐标轴配置。 referenceLine 参考线-自定义 referenceLine 图表的X、Y轴参考线配置。 metrics 指标-自定义 metrics 图表的指标配置，如显示/隐藏、内容和样式控制。

自定义分类 自定义分类时，可以使用分类的对象形式，对象中可以配置的字段如下表所示。 表2 自定义分类对象中的字段 字段 类型 示例 说明 tip Object tip: { "zh_CN": "图形", "en_US": "Series" } 鼠标悬浮提示，采用对象形式。 name String name: "code" 分类的key及系统预置的图标。name值为预置类型时，tip和iconSrc非必填。name字段值应与belong字段映射。 iconSrc String iconSrc: "image/setting.png" 图标地址。组件文件下，image文件中的setting.png。

配置示例 colorpicker配置示例如下，配置后效果如图1所示。 {type: 'colorpicker',name: 'commProps.myColorpicker',value: 'rgb(208,162,46)',label: {zh_CN: 'colorpicker的类型',en_US: 'colorpicker Type Example'}} 图1 colorpicker配置后效果

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

配置 在配置中，设置时间选择器的类型、输入框和弹出框的字体颜色等。 图4 时间选择器配置 时间选择器的类型 选择器类型：支持时间范围和瞬时两种。 快捷时间：是否显示快捷时间，默认为“显示”。“选择器类型”设置为“时间范围”时，才显示该参数。 图5 显示快捷时间效果 值类型：支持实时和固定时间两种类型。选择实时，快捷时间为now形式，如图6。 图6 值类型为实时 快捷时间字体颜色：设置快捷时间的字体颜色。 选中字体颜色：设置选中快捷时间时，快捷时间字体的颜色。 选中背景颜色：设置选中快捷时间时，快捷时间背景的颜色。 输入框设置 下方输入框的设置，对时间选择器组件中所有输入框生效。 字体：设置输入框中文字的字体、大小和颜色等。 背景颜色：设置输入框的背景颜色。 边框颜色：设置输入框边框的颜色。 边框聚焦颜色：当鼠标单击或键盘操作将焦点置于时间选择器组件上时，边框所呈现的颜色。 边框悬浮颜色：当鼠标指针悬停在时间选择器组件上时，组件边框所呈现的颜色。 分隔符：开始时间和结束时间之间的分隔符。 开始时间占位符：开始时间输入框中没有选择具体时间时，显示的文字内容。 图7 删除静态数据中数据时显示的效果 结束时间占位符：结束时间输入框中没有选择具体时间时，显示的文字内容。 弹出框设置 下方弹出框的设置，对时间选择器组件中所有弹出框生效。 放大倍数：组件发布后，时间弹出框在页面占位相对于开发态中放大的倍数。在大屏页面中，放大倍数建议设置大一些。 背景颜色：时间弹出框背景的颜色。 字体颜色：时间弹出框中时间的颜色。 悬浮字体颜色：鼠标指针悬停在时间弹出框上，显示的字体颜色。 选中字体颜色：时间弹出框中，选中状态时间的字体颜色。 选中背景颜色：时间弹出框中，选中状态时间的背景颜色。 分割线颜色：时间弹出框中分割线的颜色。 图8 分割线颜色 前月后月的日期颜色：时间弹出框中，上个月日期和下个月日期的日期颜色。 图9 前月后月的日期颜色

文件示例 EchartsWidgetTemplate = EchartsWidgetTemplate.extend({ // 组件事件配置项，定义组件事件结构及说明，给全局变量映射使用 eventConfig: { clickSeries: { desc: { zh_CN: "点击系列", en_US: "Click Series" }, fields: [ { name: 'seriesIndex', desc: { zh_CN: '系列索引', en_US: 'Series Index' }, }, { name: 'seriesName', desc: { zh_CN: '系列名', en_US: 'Series Name' }, }, ], }, }, // 配置项大的分类 classfication: [[{ name: 'configuration' }, { name: 'tooltip' }]], // 组件详细配置 propertiesConfig: [ { config: [ { type: 'dataSetting', mapping: { x: { keyName: 'dataX', keyTitle: { zh_CN: 'X轴数据', en_US: 'X axis Data' }, limitNumber: '1', type: 'category', label: 'x', required: true, }, y: { keyName: 'value', keyTitle: { zh_CN: 'Y轴数据', en_US: 'Y axis Data' }, limitNumber: '1', type: 'value', label: 'y', required: true, }, s: { label: 's', limitNumber: '1', series: [ { type: '', label: '', required: false, }, ], }, }, mock: {}, name: 'EchartsWidgetTemplateConnector', model: 'CommonViewModel', }, ], }, { 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, }, ], }, ], }, { migrateFrom: 'advancedSettings', headerTitle: { zh_CN: '提示', en_US: 'Tooltip' }, belong: 'tooltip', config: [ { type: 'select', name: 'commonProps.axisPointerType', label: { zh_CN: '指示器', en_US: 'Axis Pointer' }, value: 'shadow', options: [ { label: { zh_CN: '直线指示器', en_US: 'Line' }, value: 'line', }, { label: { zh_CN: '阴影指示器', en_US: 'Shadow' }, value: 'shadow', }, { label: { zh_CN: '无指示器', en_US: 'None' }, value: 'none', }, ], }, ], } ], // 仅在组件首次被创建时调用一次，必填 create: function (cbk) { if (cbk) { this._super(); cbk(); } },});// 注册组件，必填window.Studio.registerWidget('EchartsWidgetTemplate', 'EchartsWidgetTemplate', {});

配置 在配置中，设置视频组件的视频地址、视频封面、视频播放等。 图4 视频配置 视频 视频地址：视频的URL地址，视频支持格式有MP4、OGG、MOV和WEBM。 封面：选择图片，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 保持原比例：选择是否保持原比例。视频组件中，配置项的配置高于数据配置。 播放 自动播放：打开页面后是否自动播放视频。 循环播放：是否循环播放视频。 静音播放：播放视频时是否静音。静音后，在播放视频时无法调整音量。 控制条：选择是否开启视频控制条。

通过参数控制响应动作 参考创建大屏&PC端项目中操作，新建一个大屏项目。 参考使用空白画布新建页面中操作，新建一个空白页面，如页面一，并拖入实心圆饼图和下拉选择框。 选中实心圆饼图，单击，进入交互设置页面。 设置实心圆饼图和下拉选择框之间的交互动作。 在作为触发器中，单击“+ 交互事件”，选择“当点击数据时”。 在响应动作中，单击“+ 响应动作”，选择“组件响应”。 在动作详情中，设置具体的响应动作。 本示例中，通过选择事件参数，来控制组件值的变化，即单击实心圆饼图中某个数据系列时，下拉选择框中的值随之改变。 图1 设置动作详情 设置完成后，单击“确定”。 单击，保存页面，单击，预览效果。

配置示例 time配置示例如下，配置后效果如图1所示。 {type: 'time',name: 'commProps.myTime',value: '',label: {zh_CN: 'time-picker的类型',en_US: 'time-picker Type Example'},placeholder: {zh_CN: '请输入标题内容',en_US: 'Enter the title content.'}} 图1 time配置后效果

配置示例 checkbox配置示例如下，配置后效果如图1所示。 {type: 'checkbox',name: 'commProps.myCheckbox',value: '我是checkbox的类型',label: {zh_CN: 'checkbox的类型',en_US: 'checkbox Type Example'},checkLabel: {zh_CN: 'checkbox的类型',en_US: 'checkbox Type Example'}} 图1 checkbox配置后效果

配置示例 slider配置示例如下，配置后效果如图1所示。 {type: 'slider',name: 'commProps.mySliderStr',value: '64%',label: {zh_CN: 'sliderstr的类型',en_US: 'sliderstr Type Example'},append: '%',step: '0.01',stepStrictly: true,precision: '2',min: '20',max: '100',showInput: true} 图1 配置后效果

组件配置项 配置示例如下，配置后效果如图2所示，组件配置项详细介绍请参见表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, }, ], }, ], }, 图2 propertiesConfig配置设置后效果 表1 组件配置项说明 字段 类型 示例 说明 migrateFrom String migrateFrom: "advancedSettings" 固定写法，配置后非华为云Astro大屏应用平台右侧属性面板会过滤掉配置项。 headerTitle Object headerTitle: { zh_CN: "行配置", en_US: "Row Configuration" }, 标题，需要国际化。 belong String belong: "configuration", 归属于classfication中哪一个分类。 config Array config: [] config数组中，每一个对象保存的配置项信息。config中，配置项的介绍，请参见组件配置项（Config配置）。

getUrlParam 用于获取查询字符串中的参数，使用方式参考如下： /* * 例如某个页面的URL为“https://10.10.10.1:12900/magno/render/cool__app_0000000000NABzEjpNIH/page1?param=1”, 通过执行 * HttpUtils.getUrlParam("param")返回该参数的值“1”。 */HttpUtils.getUrlParam("param")

refreshToken 用于手动刷新页面的accesstoken，通常用在执行退出逻辑时，执行该方法刷新页面的accesstoken。使用方式参考如下： /* @param {*} connector * @param {*} successCallBack * @param {*} errorCallback */HttpUtils.refreshToken(connector,successCallBack,successCallBack)

getCsrfToken 通过ajax的方式，调用平台的接口时使用，使用方式参考如下： /* * 如果使用平台桥接器的方式，平台会自动在请求header中添加csrf-token头。 */HttpUtils.getCsrfToken(function(csrfToken) { $.ajax({ headers: { CS RF-Token: csrfToken }, })});

setLocalStorage 用于设置某个localStorage的值，使用方式参考如下： /* @param {string} key * @param {string/obj} value * @param {number} expires */HttpUtils.setLocalStorage("key","value",1000) 内置API支持设置localstorage的失效时间，单位为s。

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为项目变量的值。