华为云用户手册

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

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在项目列表中，单击对应项目上的。 在项目发布中，单击待发布版本后的，设置该版本为当前发布版本。 如何新建项目版本并发布，请参见发布及安装项目。 图1 发布版本 设置项目访问限制。 图2 设置项目访问限制 按照项目限制：项目中页面首次完成验证后，其余页面无需二次验证。例如，页面A、B、C设置了Token认证，页面D、E、F设置了分享码。勾选按照项目限制时，校验过页面A的Token认证后，不会再校验页面B和C。校验了页面D的分享码后，同样不会再校验页面E和F。 按照页面限制：项目遵循各页面访问限制。 返回项目列表，将鼠标放在对应的项目上，单击，即可预览发布后项目版本的页面。

如何添加一个成员 在Astro低代码平台中，租户管理员可以为组织添加一个或多个成员，并赋予成员不同的权限。添加成员的流程，如图1所示。 图1 添加一个成员 租户管理员登录Astro低代码平台。 此处的租户管理员是指 注册华为账号 并开通华为云的账号。租户管理员拥有Astro低代码平台和所有子服务的全部权限。一个组织中，只能有一个租户管理员。 在组织中，邀请成员。 组织中添加的成员，在Astro低代码平台和子服务（Astro Flow、Astro Canvas和Astro Pro）均可使用。 手动添加成员：按需为组织手动添加成员，详细介绍请参见手动添加成员。 批量导入成员：通过模板，一次性导入所需的成员详细介绍请参见批量导入成员。 一键公开邀请：开启组织成员一键邀请功能后，将生成链接，成员可通过链接申请加入组织。详细介绍，请参见一键公开邀请成员。 在Astro低代码平台中添加的成员，只能是华为账号或者是华为账号的子账号（ IAM 用户）。如何注册华为账号并添加子账号，请参见注册华为账号并开通华为云和创建IAM用户。 服务授权 对组织中已邀请的成员进行服务授权，授权通过后，才可以正常使用AstroCanvas。为Astro低代码平台添加成员时，不需要执行此操作。 赋予成员不同角色权限 根据自身业务需求，为成员添加Astro低代码和子服务AstroCanvas权限。 父主题： 为组织添加成员

组件配置项 配置示例如下，配置后效果如图2所示，组件配置项详细介绍请参见表1。 { migrateFrom: "advancedSettings", headerTitle: { zh_CN: "下拉选择框设置", en_US: "Setting the select box" }, belong: "configuration", config: [ { type: "text", name: "defaultSelectValue", parentName: "selectConfObj", value: "请选择", label: { zh_CN: "默认选择项", en_US: "Default selection" }, }, { type: "select", name: "fontFamily", parentName: "selectConfObj", label: { zh_CN: "字体", en_US: "Font" }, value: "sans-serif", noClearable: true, options: [ { label: "sans-serif", value: "sans-serif", selected: "true", }, ], showFunc: function () { return false; }, }, { type: "select", name: "fontWeight", parentName: "selectConfObj", value: "normal", label: { zh_CN: "字体粗细", en_US: "Font Weight" }, noClearable: true, options: [ { label: { zh_CN: "正常", en_US: "Normal" }, value: "normal", }, { label: { zh_CN: "粗体", en_US: "Bold" }, value: "bold", }, { label: { zh_CN: "细体", en_US: "Lighter" }, value: "lighter", }, ], showFunc: function () { return false; }, }, { type: "slider", name: "fontSize", parentName: "selectConfObj", label: { zh_CN: "字体大小", en_US: "Font Size" }, value: 12, min: 0, max: 200, showInput: true, showFunc: function () { return false; }, }, { type: "colorpicker", name: "fontColor", parentName: "selectConfObj", label: { zh_CN: "字体颜色", en_US: "Font Color" }, value: "", showFunc: function () { return false; }, }, { type: "font", subType: "notChart", prop: "commProps", parentName: "commProps", label: { zh_CN: "字体", en_US: "Font" }, fontFamilyKey: "fontFamily", fontWeightKey: "fontWeight", fontSizeKey: "fontSize", fontColorKey: "fontColor", }, { type: "colorpicker", name: "backgroundColor", parentName: "selectConfObj", label: { zh_CN: "背景颜色", en_US: "Background Color" }, value: "", }, { type: "colorpicker", name: "borderColor", parentName: "selectConfObj", label: { zh_CN: "边框颜色", en_US: "Border Color" }, value: "", }, { type: "colorpicker", name: "borderColorFocus", parentName: "selectConfObj", label: { zh_CN: "边框聚焦颜色", en_US: "Border Focus Color" }, value: "", }, { type: "colorpicker", name: "borderColorHover", parentName: "selectConfObj", label: { zh_CN: "边框悬浮颜色", en_US: "Border floating Color" }, value: "", }, { type: "text", name: "placeholder", parentName: "selectConfObj", label: { zh_CN: "占位符", en_US: "Placeholder" }, value: "请选择", }, { type: "tab", name: "disabled", parentName: "selectConfObj", label: { zh_CN: "是否禁用", en_US: "Disable" }, value: false, options: [ { label: { zh_CN: "禁用", en_US: "Disable" }, value: true, }, { label: { zh_CN: "可用", en_US: "Available" }, value: false, }, ], }, ], } 图2 设置后效果 表1 组件配置项说明 字段 类型 示例 说明 migrateFrom String migrateFrom: "advancedSettings" 固定写法，配置后非AstroCanvas平台右侧属性面板会过滤掉配置项。 headerTitle Object headerTitle: { zh_CN: "行配置", en_US: "Row Configuration" }, 标题，需要国际化。 belong String belong: "configuration", 归属于classfication中哪一个分类。 config Array config: [] config数组中，每一个对象保存的配置项信息。config中，配置项的介绍，请参见组件配置项（Config配置）。

Astro Canvas中角色 在Astro Canvas角色列表中，系统为您预置了“管理员”、“开发者”、“数据分析师”、“数据工程师”和“访问者”五个角色。 表2 角色说明 角色名称 角色说明 管理员 拥有大屏开发权限、数据中心开发权限和添加用户到管理员、开发者、数据分析师、数据工程师和访问者权限。 开发者 拥有大屏开发权限、数据中心开发权限。 数据分析师 拥有大屏开发权限、数据中心只读权限。 数据工程师 拥有大屏只读权限、数据中心开发权限。 访问者 拥有大屏只读权限、数据中心只读权限，通常为查看报表的用户（例如决策者、CXO）或者查看数据结果的一线业务人员。

配置示例 配置示例一，配置后效果如图1所示。 { type: "list", name: "commProps.rowCusBg", displayMode: "simple", showLabel: false, labelOnce: true, allowNone: true, label: { zh_CN: "背景色", en_US: "Background Color" }, helpLink: "https://***.html", showFunc: function (vm) { return vm.commProps.rowBgType === "custom"; }, events: { addItemFunc: function () { return { color: "rgba(11,129,246,1)", row: "" }; }, }, 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 示例一配置效果 配置示例二，配置后效果如图2所示。 { type: "list", name: "options.topSerialBg", displayMode: "simple", showLabel: false, labelOnce: true, allowNone: true, label: { zh_CN: "背景色", en_US: "Background Color" }, helpLink: "https://***.html", showFunc: function (vm) { return ( vm.commProps.showSerialNumber && vm.options.showTopSerialNumber && vm.options.topSerialStyle === "color" ); }, } 图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。

操作步骤 租户管理员使用华为账号，参考如何登录Astro低代码平台中操作，登录Astro低代码平台。 在左侧导航栏中，选择“组织管理”，进入组织管理页面。 在“企业信息”页签，设置邮件服务器相关参数，单击“保存”。 图1 设置邮件服务器 发件人：填写发件人的邮箱地址。 SMTP地址：开通邮箱SMTP功能时，配置的服务器地址和端口号。简单邮件传输协议 SMTP（SimpleMailTransferProtocol，简称SMTP），是一种提供可靠且有效电子邮件传输的协议。常用的邮件服务器地址及端口，如表1所示。 用户名：邮箱的用户名，请输入1~32个字符，可包括中文、字母、数字及下划线。 密码：邮箱开通SMTP功能时生成的授权密码，是一段随机字符，如图2所示。 图2 授权密码 SSL链接访问：开启后，可以通过SSL链接方式访问邮件服务器。SSL链接是指在客户端和服务器之间建立的一种加密连接方式，它可以保证数据在传输过程中不会被破解、窃取或篡改等。

使用说明 使用租户邮件服务器发送邮件时，需要在组织中配置邮件服务器相关信息。常用的邮件服务器地址及端口，如表1所示。 表1 常用邮箱SMTP服务器地址及端口 邮箱 SMTP服务器地址 服务端口 163邮箱 smtp.163.com SSL协议时，配置为465或者994 其他协议时，配置为25 126邮箱 smtp.126.com 25 QQ邮箱 smtp.qq.com 使用SSL协议，端口为465或587 腾讯 企业邮箱 smtp.exmail.qq.com 465 华为企业邮箱 smtp.sparkspace.huaweicloud.com 465

文件介绍 {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}]。 -

使用说明 数据湖探索 （Data Lake Insight，简称 DLI ）是完全兼容Apache Spark、Apache Flink、openLooKeng（基于Apache Presto）生态，提供一站式的流处理、批处理、交互式分析的Serverless融合处理分析服务。用户不需要管理任何服务器，即开即用。支持标准SQL/Spark SQL/Flink SQL，支持多种接入方式，并兼容主流数据格式。数据无需复杂的抽取、转换、加载，使用SQL或程序就可以对云上CloudTable、RDS、DWS、 CSS 、OBS、E CS 自建数据库以及线下数据库的异构数据进行探索。更多关于DLI的介绍，请参见DLI产品文档。

什么是AstroCanvas Astro大屏应用（Astro Canvas，简称AstroCanvas）是华为云Astro低代码平台提供的可视化页面构建服务，提供了丰富的可视化组件、灵活的数据接入和多种方式页面构建能力，支持多屏适配，帮助开发者快速构建和发布专业水准的实时可视化应用。通过AstroCanvas一站式 数据可视化 开发，可分钟级构建业务大屏、移动端页面。 AstroCanvas大屏 具有日常监测、分析判断、应急指挥、展示汇报等多种功能，可广泛应用于商业、金融、制造等行业。 图1 AstroCanvas大屏 AstroCanvas移动端页面 提供流式布局（即向下排列）画布的组件布局能力，适用于开发复杂的移动端页面。 图2 AstroCanvas移动端页面 父主题： 初识AstroCanvas

开发场景说明 人员来访统计大屏用于展示园区中人员相关信息，例如人员类型，人员流量及在园人数等。大屏页面构想，如图1所示。 图1 大屏页面效果 图1中大屏页面由下列组件拼装而成，组件介绍顺序为从上到下、从左到右。 表1 组件说明 组件 说明 文本编辑 文本编辑组件，用于展示标题，例如人员来访统计。 水平基本柱图 统计当前人员类型，如总公司员工、合作员工、访客人员、安防人员、保洁人员。 基本柱图 统计入园和出园人数。 区域图 统计昨日在园人数。

操作步骤 组织中成员参考如何登录Astro低代码平台中操作，登录Astro低代码平台。 在弹出的页面，单击“设置个人联系方式” 。 在“个人信息”页签，单击基本信息中的“编辑个人信息”。 在个人信息编辑页面，单击用户姓名后的“修改”，修改用户姓名。 图1 修改用户姓名 单击联系电话后的“绑定”，绑定联系电话。 图2 绑定联系电话 单击邮箱后的“绑定”，绑定邮箱。 执行此操作前，请确保租户管理员已在“组织层级”页签，开启“允许成员修改邮箱”功能，否则此处的邮箱不支持修改。 图3 允许成员修改邮箱功能已开启 个人信息修改完成后，单击“退出编辑”。

文件示例 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', {});

典型示例 典型的eventConfig示例如下： // 组件事件配置项，定义组件事件结构及说明。给全局变量映射使用 eventConfig: { selectItem: { desc: { "zh_CN": "选中选项", "en_US": "Choose Select item" }, fields: [ { name: "itemVal", desc: { zh_CN: "选中值", en_US: "Select Item Val" } } ] } }, clickSeries字段对应组件{widget}.js文件中，注册的事件id。 Studio.registerEvents(this, "selectItem", { zh_CN: "选中选项", en_US: "Choose Select item", }); selectItem对象中，“desc”是对事件selectItem的解释。“fields”为组件对外暴露的字段及相应描述。相应代码要在{widget}.js中实现如下： emitSelectItem(itemVal) { widgetInst.triggerEvent("selectItem", { itemVal }); },

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

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 图形 表盘设置：展开或收起表盘，设置为展开时，需设置如下参数。 起始角度：设置表盘的起始角度。 结束角度：设置表盘的结束角度。 区间最小值：设置表盘的区间最小值。 区间最大值：设置表盘的区间最大值。 分段个数：设置表盘的分段个数。 半径：设置表盘的半径大小。 横坐标：设置表盘的横坐标。 纵坐标：设置表盘的纵坐标。 宽度：设置表盘的边框宽度。 阴影颜色：设置表盘边框阴影颜色。 阴影大小：设置表盘边框阴影大小。 指针长度：设置表盘指针的长度。 指针宽度：设置表盘指针的宽度。 指针颜色：设置表盘指针的颜色。 指针固定点：是否显示指针的固定点。设置为显示时，支持设置固定点的大小、颜色等。 图7 指针固定点 固定点大小：设置指针固定点的大小，取值范围为[0.0, 100.0]。 固定点颜色：设置指针固定点的颜色。 固定点边线宽：设置指针固定点边框的线宽。 固定点边线颜色：设置指针固定点边框的颜色。 单位设置：是否显示单位。设置为显示时，支持设置单位、水平相对位置、垂直相对位置、单位字体等。 详情设置：是否显示详情。设置为显示时，支持设置详情水平相对位置，详情垂直相对位置、详情字体等。 刻度设置：是否显示刻度。设置为显示时，支持设置标签与刻度线距离、刻度标签字体、背景颜色、内边距等。 轴线分段颜色：单击“轴线分段颜色”，可新增分段，支持设置轴线的位置和默认颜色。

辅助开发能力强大 云上云下协同 打通云上、云下环境，提供版本差异可视化对比和双向合入能力，解决客户私有云部署场景下的双向修改、同步难题。 健康度检查 提供页面健康度检查能力，对慢请求、错误请求、系统资源占用高等情况实时提示，有效帮助开发人员发现、定位和解决问题。 子页面、多 域名 支持嵌入子页面，每个子页面可以设置与主页面不同的域名，从而N倍提升主页加载速度。 组件统一交互配置 提供页面内全部组件的交互配置统一视图，支持跨子页面的交互配置。 模拟数据/业务接口一键切换 支持对项目中的组件使用模拟数据还是访问业务接口进行一键统一切换，也可以对个别组件个性化设置，有效减少开发、演示、生产等不同环境切换时的手动修改操作。

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

在组件中使用数据集 返回AstroCanvas项目列表页面。 进入开发页面，拖拽所需的组件（如基本柱图）到画布中。 图5 拖拽基本柱图到画布中 选中该组件，单击组件上方的，进入组件数据页面。 在“数据类型”下拉框中，选择“数据集”，选择创建数据集中创建的数据集。 配置全局变量。 全局变量可以理解为参数变量，用于控制组件之间参数的传递，从而达到交互的目的，例如图表联动、自定义字段等功能。如何使用全局变量，可参考如何基于页面级的全局变量实现组件交互~如何通过全局变量，实现组件数据的动态变化。本示例不做配置。 在组件预览中，选择要展示的表字段，即从左边栏中拖入到右边栏中，单击“保存”。 图6 拖拽字段到坐标轴 表格字段：展示创建数据集中，获取的数据。 配置：从表格字段中，拖拽所需的字段到X轴数据、Y轴数据和系列中。 刷新周期：每隔多少秒从AstroZero中读取一次数据，默认配置为“0”，表示只获取一次。 共享数据：是否共享数据。勾选后，如果多个组件调用了相同的桥接器URL请求，不会各自只调用，而是共享结果数据。 选中基本柱图组件，单击组件上方的，设置标题内容为“各市1月降雨量(mm)”。 图7 设置图表标题 单击页面上方的，保存设置页面。 单击，进入预览页面，预览效果。 图8 最终呈现效果

组件使用数据集 数据集实例获取。 组件代码中可使用如下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 是否必须配置。

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在项目列表的所有项目中，单击页面所在的项目，进入项目。 在所有页面中，单击对应的页面，单击“编辑页面”，进入大屏开发页面。 在工具栏中，单击，进入页面发布设置。 在“版本管理”区域，单击需要回退版本后的，单击“继续编辑”，进行回退。 若回退前希望保存当前页面，请单击“发布新版本”，将当前页面发布为新版本，再单击需要回退版本后的，单击“继续编辑”，进行回退。 图1 回退到历史版本 图2 提示

自定义分类 自定义分类时，可以使用分类的对象形式，对象中可以配置的字段如下表所示。 表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。

classfication示例 classfication配置示例如下，其对应效果如图1所示。 classfication: [ [ { name: 'card', }, { name: 'configuration', }, { tip: { zh_CN: '图形', en_US: 'Figure', }, name: 'figure', iconSrc: 'image/series.png', }, ], ], 图1 设置后效果

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

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