华为云用户手册

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

文件介绍 {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，即铺满整个组件。 上边距：图表到组件边框顶部的距离。 右边距：图表到组件边框右侧的距离。 下边距：图表到组件边框底部的距离。 左边距：图表到组件边框左侧的距离。

6、配置页面数据 组件是大屏、移动端页面的组成元素，配置页面数据即为配置组件数据。AstroCanvas中，组件的数据来源包括如下几种： 桥接器预置 通过桥接器动态调用后台的接口，来获取后台数据展示在页面上。更多介绍，请参见桥接器预置。 静态数据 使用系统预置的静态数据展示在页面上。更多介绍，请参见静态数据。 数据集 选择在“数据中心”中配置的数据集，作为组件数据来源。选择此方式时，请确保数据集已在数据中心创建。更多介绍，请参见数据中心。 数据源：直接从数据源（关系型数据库、Roma连接器、DLI和DWS等），获取数据来展示在页面上。更多介绍，请参见其他数据源。 页面数据源：对接页面级的数据集，以保证数据的复用。页面数据集主要是为了支持多个组件对接同一个数据源的情况，可以减少重复的请求跟重复的配置。更多介绍，请参见页面数据集。

配置 在配置中，设置组件的样式、颜色和对齐方式。 图4 配置 样式设置：设置勾选框的样式，支持圆角、方形和圆形。 颜色设置 字体颜色：未选中状态下，选项字体的颜色。 背景颜色：选项背景的颜色。 选中态背景颜色：选中状态下，选择框背景的颜色。 边框颜色：未选中状态下，选择框边框的颜色。 边框聚焦颜色：鼠标选中选择框时，边框的颜色。 边框悬浮颜色：鼠标悬浮在选择框上时，边框的颜色。 不可用边框色：不可选的选择框边框颜色。 不可用背景色：不可选的选择框背景色。 不可用字体颜色：不可选的选项字体颜色。 选中态字体颜色：选中状态下，选项字体的颜色。 对齐设置 放大倍数：组件发布后，选择框在页面占位相对于开发态中放大的倍数。在大屏页面中，放大倍数建议设置大一些。 右边距：选择框相对于组件右边框的距离。 上边距：选择框相对于组件上边框的距离。 全选：是否显示全选框。

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

配置 在配置中，设置组件的全局样式、表头、行和序列号。 图4 配置 全局样式 排行榜行数：设置排行榜的行数。 背景色：设置排行榜背景的颜色。 自动轮播：是否开启自动轮播功能。开启后，支持设置轮播速度和单行停顿时间。 表头设置 显示表头：是否显示表头。 表头行高占比(%)：设置表头的行高占比。 背景色：设置表头的背景颜色。 对齐方式：设置表头的对齐方式，如水平居中、居左和居右。 表头字体：设置表头的字体、颜色和大小等。 行配置 换行显示：是否开启换行显示。 行背景色：设置行的背景颜色，支持设置奇数、偶数行背景颜色和自定义行背景颜色。 行背景色设置为“自定义”时，背景色序列号配置规则如下： 单行生效：直接配置对应序号。 非连续性多行生效：使用中文逗号“，”或英文逗号“,”，分隔对应序号。 连续多行生效：使用横线“-”，连接首尾序号。 序列号 显示序列号：是否显示序列号。 宽度占比(%)：设置序列号的宽度占比。 序列号样式：设置序列号的样式。 图5 设置效果 对齐方式：设置序列号的对齐方式。 字体：设置序列号的字体、颜色和大小等。 背景样式：设置序列号的背景样式，如颜色、图片。设置为“颜色”时，可选择背景样式，如圆形、椭圆和矩形。 背景色：自定义背景的颜色。“背景样式”设置为“颜色”时，才会显示该参数。 填充方式：设置背景图片的填充方式，如拉伸、居中等。“背景样式”设置为“图片”时，才会显示该参数。 图片：推荐使用JPG、JPEG、PNG和GIF格式的图片，且图片大小不超过500MB。“背景样式”设置为“图片”时，才会显示该参数。 背景宽度(%)：设置序列号背景的宽度占比。 背景高度(%)：设置序列号背景的高度占比。 特殊序列号：是否显示特殊序列号。设置为“显示”时，支持设置特殊序列号的字体、特殊样式和背景色。 字体：设置特殊序列号的字体、颜色和大小等。 特殊样式：设置特殊序列号的样式，支持设置为颜色或图片。 填充方式：设置图片的填充方式，如拉伸、居中、普通和平铺。“特殊样式”设置为“图片”时，才显示该参数。 图片：设置特殊样式的背景图片，支持从本地或连接器中选择图片。推荐使用JPG、JPEG、PNG和GIF格式的图片，每张图片的大小不能超过50MB。“特殊样式”设置为“图片”时，才显示该参数。 圆角：设置矩形的边框圆角，设置为0时为直角，设置为100时显示为圆形。“特殊样式”设置为“颜色”，且选择“矩形”时，才显示该参数。 背景色：设置特殊样式的背景颜色，支持设置为圆形和矩形。“特殊样式”设置为“颜色”时，才显示该参数。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 图形 统一配置 对齐方式：设置组件的对齐方式，如水平居中、居左和居右。 字体：设置组件的字体、大小和颜色等。 评星大小：设置评星显示星星的大小号。 数据系列 原数据名：原始数据中默认的数据名，内容来源于数据模型的值。 列名：自定义图表中列的显示名称。 宽度占比(%)：设置列名的宽度占比。 显示方式：设置数据的显示方式，数据为图片地址时可以展示为图片。 对齐方式：设置数据的对齐方式。 字体：“显示方式”设置为“文字”时显示该参数，设置文字显示的字体、颜色等。 图宽占比(%)：“显示方式”设置为“图片”时显示该参数，设置图形的宽度占比。 图高占比(%)：“显示方式”设置为“图片”时显示该参数，设置图形的高度占比。 最大分值：“显示方式”设置为“评星”时显示该参数，设置5颗星的最大分值 。 评星固定为五颗星，当数据的最大值不等于5时，需填写数据的最大分值。 显示星数=实际数值/评分最大分值x5颗星。 当数据超过最大值的时候，显示5颗星。 默认颜色：“显示方式”设置为“评星”时显示该参数，设置5颗星中不显示星星的颜色。 选中颜色：“显示方式”设置为“评星”时显示该参数，设置5颗星中显示星星的颜色。 半星：“显示方式”设置为“评星”时显示该参数，设置是否显示半星。

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

背景信息 用户开启了Token签名验证功能，系统返回用以生成签名的Token（用于生成签名的token不可公开），例如token=j5TZLK1DQ*****Ntquo/ErqonR0=。 假设，某用户系统嵌入了AstroCanvas大屏页面，通过Token计算签名，最终得到的分享页面链接为（如果对该分享链接进行了篡改，那么页面将无法访问）： https://dmax.***.com/magno/render/share/xxx?_dmax_time=1669621495545&name=cloud&age=36&dept=cloud&_dmax_signature=DVX7Qy******o5rs%3D 其中： _dmax_time=1669621495545：为AstroCanvas页面用户分享链接生成时间戳。如果开启了有效期设置，_dmax_time值要小于有效期值，单位为毫秒时间戳。 _dmax_signature=DVX7Qy******o5rs%3D：为Token对URL进行计算得出的签名，用于身份验证。 name=cloud&age=36&dept=cloud：为用户自定义扩展参数。

分享URL签名说明 Token签名校验，是针对整个URL计算并得出的签名。其中，“_dmax_time”为签名生成时的时间戳（该参数值可自定义，默认为计算签名时的时间）。“_dmax_signature”为最终对URL进行计算得出的签名。 在计算签名时，会对参数按照key升序排序，且将多个相同key的参数值进行合并。 例如，用于计算签名的URL输入如下： https://dmax.***.com/magno/render/share/xxx?_dmax_time=1669621495545&name=cloud&age=35&dept=cloud&age=36 则通过对参数排序，相同参数合并后（例如age），得到的用于计算的URL为： https://dmax.***.com/magno/render/share/xxx?_dmax_time=1669621495545&age=35,36&dept=cloud&name=cloud