华为云用户手册

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

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在AstroCanvas界面的项目列表中，单击已创建的项目，进入项目。 在主菜单中，选择“项目设置”，进入项目设置页面。 参考设置项目锁中操作，获取项目锁。 在左侧导航栏中，选择“组件”。 单击“本地调试设置”，进行本地调试设置。 在本地开发组件后，频繁的打包组件包上传至公共环境再查看页面显示效果，是一件效率极低的事情。通过该配置，可打通本地环境与公共环境，实现实时在线调测组件。 单击“检查更新”，检查组件是否有版本更新，若有新版本组件，请单击“升级所有插件”。 您也可以单击待升级插件后的，对组件进行升级。 图1 升级组件 单击“启用模拟数据”，对项目中的组件数据来源进行统一控制。 在页面中，组件数据可来自模拟数据或访问业务接口获取。通过是否开启“启用模拟数据”，可对项目中的组件数据来源进行统一控制。 在进行前台页面开发时，经常要通过桥接器动态调用后台的接口来获取后台数据。在页面实际开发过程中，可能后台接口还未开发完成，这时可通过修改桥接器使用静态数据来进行调测。但是当组件较多时，用户逐个修改组件的桥接器配置会过于繁琐，可直接将桥接器配置为调用后台接口，在“项目设置”中打开“启用模拟数据”开关，一键开启当前项目中所有桥接器使用模拟数据，也可以在“组件”页签的组件前单独通过开关图标设置各组件的桥接器是否使用模拟数据，对个别组件进行个性化设置，有效减少手动修改操作。 该功能的实现原理是：系统在桥接器代码中已增加mockData属性来记录桥接器是否启用了模拟数据，同时在桥接器父类代码中预置了getMockData函数，开发人员只需在自定义桥接器中自己覆写getMockData函数，实现获取模拟数据的逻辑即可。当“启用模拟数据”开关打开时，mockData属性会记录启用了模拟数据，getMockData函数将界面实际配置的桥接器数据覆盖，从而使用模拟数据替换界面桥接器配置的后台接口。当调测结束时，须关闭“启用模拟数据”。 桥接器中getMockData函数示例代码如下： getMockData: function() { return new OverlaysDataViewModel(); },

render 组件核心渲染API，负责组件的实例化、数据调用及事件、动作的实际实现。主逻辑建议如下： render() { var thisObj = this; var widgetProperties = thisObj.getProperties(); // 获取组件属性 var elem = thisObj.getContainer(); // 获取组件dom，对后续操作dom的逻辑备用 var items = thisObj.getItems(); var connectorProperties = thisObj.getConnectorProperties(); // 获取组件Connector数据 // 监听resize事件, 画布resize时需要重新绘制一下，如果有其他需要，参数可以传入函数，resize时会调用 this.registerResizeEvent(); },

getConnectorInstanceByName 通过Connector名称获取Connector实例，再通过process方法调用接口获得数据。使用方式参考如下： const connectorInst = thisObj.getConnectorInstanceByName('selectDataConnector'); /** * @param renderCbk 成功回调 * @param errCbk 失败回调 */ connectorInst.process(renderCbk, errCbk) 其中，“connectorInst”用来调用数据源数据接口。

getContainer 一般用于在初始化阶段，获取组件dom，无入参，使用方式参考如下： var elem = thisObj.getContainer(); var readerVm = new Vue({ el:$("#select", elem)[0], }), getContainer是页面上组件的父容器，具有唯一标识。组件内操作dom的场景必须都加上这个父容器，如上面的代码。

getMessages 一般用于在初始化阶段，获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用，无入参，使用方式参考如下： const i18n = HttpUtils.getI18n({ locale: HttpUtils.getLocale(), messages: thisObj.getMessages() }); getMessages()返回messages-en.json和messages-zh.json两个国际化文件中定义的国际化内容。

init 组件初始化入口API，初始化组件通用能力，负责注册组件事件和组件动作。主逻辑建议如下： init() { this._super.apply(this, arguments); // 组件通用能力构建，调用父类constructor,必须要写 this.render(); // 渲染组件 this.registerWidgetActionAndEvent(); // 注册组件事件和动作 },

callFlowConn 监听必要的dom尺寸变化事件，使用方式参考如下： /** * 根据组件配置的数据类型（数据集、桥接器、数据源、静态数据）获取数据， 未配置默认调用getMockData * @param {*} connector Connector实例 * @param {*} param 参数, 没有特殊需求可以直接传入 {} ，如果传入 { test: 1 }, 发起请求时请求体会带上 test 的值 * @param {*} callbackFunc 将数据传入回调函数 */ this.callFlowConn(this.connectorIns, param, this.dealRespData.bind(this));

页面数据来源介绍 组件是大屏应用页面的组成元素，配置页面数据即为配置组件数据。AstroCanvas中，页面组件的数据来源包括非数据源（包括桥接器预置、静态数据和数据集等）和数据源（包括关系型数据库、Roma连接器、AstroZero和HTTP连接器等）。选中组件，单击组件上方的，即可配置组件在页面呈现数据的来源。 图1 配置组件数据 非数据源 桥接器预置 通过桥接器动态调用后台的接口，来获取后台数据展示在页面上，相关配置请参见桥接器预置。 静态数据 选择该方式时，页面会获取“输入数据”中的静态数据展示在页面上，详情请参见静态数据。 AstroCanvas已预置了静态数据，如果需要自定义静态数据，请重置数据。 数据集 选择在“数据中心”中配置的数据集，作为组件数据来源。选择此方式时，请确保数据集已在数据中心创建，详情请参见数据中心。 不是所有的组件都支持数据源设置，组件开发时的属性配置代码中添加“dataSetting”相关配置时，才支持数据源设置。例如“基本柱图”组件的“BarChart_Widget.editor.js”中定义代码如下： propertiesConfig: [ { config: [ { "type": "connectorV2", "name": "BarOrLineChartDataConnector", "label": "BarOrLineChartDataConnector", "model": "SingleRepireDataViewModel", "value": "" }, { "type": "dataSetting", "mapping": { "x": { "type": "category", "label": "x", "required": true }, "y": { "type": "value", "label": "y", "required": true }, "s": { "label": "s", "series": [ { "type": "", "label": "", "required": false } ] } }, "mock": {}, "model": "SingleRepireDataViewModel" } ] } ], 页面数据集：通过页面数据集，可实现多个组件对接同一个数据输入，从而减少重复的请求和配置。更多介绍，请参见页面数据集。 数据源 支持直接从数据源（关系型数据库、Roma连接器、 DLI 和DWS等），获取数据来展示在页面上。更多介绍，请参见其他数据源。 父主题： 数据接入

注册动作 图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params this: 组件实例 * @params "setSelectedItem": 动作名称 * @params { zh_CN: "设置选中选项", en_US: "Set Selected item" }：响应动作的描述，需要国际化 * @params [{ name: "itemVal", type: "text" }]：配置动作时可以配置itemVal的值为${e.xxx}将事件抛出的xxx参数复制到itemVal中，然后select组件内统一从itemVal获取数据 * @params this.setSelectVal.bind(this): this.setSelectVal 为响应动作函数 */ Studio.registerAction( this, "setSelectedItem", { zh_CN: "设置选中选项", en_US: "Set Selected item" }, [{ name: "itemVal", type: "text" }], // 配置动作时可以配置itemVal的值为${e.xxx}将事件抛出的xxx参数复制到itemVal中。然后select组件内统一从itemVal获取数据 this.setSelectVal.bind(this) );

响应动作函数 /** * 数据刷新的响应动作函数示例 * 文件global_SelectWidget.js中, 与render函数平级定义 * @params event: 保存着事件发出的参数，itemVal为配置动作时将事件抛出的参数复制到itemVal中 */ setSelectVal(event) { this.readerVm.$set(this.readerVm.selectConf, "selectValue", event.itemVal); },

图形 图形是指组件中，实现 数据可视化 的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 图形 颜色：设置图表中，图形的颜色。 统一配置 光圈标记：是否开启光圈标记。 数据排序：是否开启数据排序。 阶梯瀑布：是否阶梯瀑布效果显示。 横向柱条：是否横向柱条效果显示。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置和数值颜色。 数据标签最大值/最小值：是否显示柱状条数值的最大值或者最小值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 柱条颜色：设置柱条颜色，如单色或渐变色，支持自定义柱状条的颜色。 定制最大柱条：支持对最大的柱条自定义设置，包括颜色等。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置、数值颜色、前缀和后缀。

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图7 图例 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记：设置图例小图标形状。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小等。 左间距：图例到柱图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距：图例到柱图组件顶部距离占组件高度。 翻页按钮：翻页按钮的颜色。 翻页按钮不激活：翻页按钮不激活时的颜色。 自定义图例显示：是否开启自定义图例显示设置。开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

指标 指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。 图11 指标 显示指标：是否显示指标。 指标内容：设置指标内容。 指标字体：设置指标内容的字体、大小、颜色等。 指标类型：设置指标类型，支持总和、平均值和自定义。 数值内容：“指标类型”设置为“自定义”时，支持自定义数值内容。 数值字体：设置数值字体、大小、颜色等。 数值位数：设置数值小数点后的位数。

坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图10 坐标轴 x轴 X轴：是否显示X轴。 轴标题：X轴标题。 字体：坐标轴字体、颜色、大小设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签：刻度标签样式，包括是否自动调节标签、显示所有标签。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 标签行为：标签字数过多时是否进行处理，包括字数过多是否换行、字数过多是否省略和字数过多不做处理。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 反转：是否对轴数据进行反转。 y轴 Y轴：是否显示Y轴。 轴标题：Y轴标题。 字体：坐标轴字体、颜色、大小设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 最小间隔：坐标轴最小间隔大小。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 轴起始值：设置Y轴的起始值。为方便数据展示，输入为接入数据最大值时，图表Y轴起始值为最大值的一半。 左Y轴单位：设置左侧Y轴的单位。 反转：是否对轴数据进行反转。 柱间阴影：柱间是否显示阴影，支持自定义阴影颜色。 标签展示：设置Y轴标签展示样式，如默认或计数单位。

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在“项目列表”中，将鼠标悬浮在需要发布的项目上，单击，发布项目。 在版本管理中，单击“+ 新建版本”。 设置版本号和版本描述（可选），勾选待发布的页面，选择页面版本，单击“确定”。 只有已生成发布链接的页面，才会显示在如图1所示页面中。您可以根据自身业务需求，选择发布一个或多个页面。 图1 新建版本 单击，设置项目当前发布版本。 图2 设置当前发布版本 在弹出的提示框中，单击“确定”。 发布成功后，页面显示“版本发布成功”。 设置项目访问限制。 图3 设置项目访问限制 按照项目限制：项目中页面首次完成验证后，其余页面无需二次验证。例如，页面A、B、C设置了Token认证，页面D、E、F设置了分享码。勾选按照项目限制时，校验过页面A的Token认证后，不会再校验页面B和C。校验了页面D的分享码后，同样不会再校验页面E和F。 按照页面限制：项目遵循各页面访问限制。 关闭项目发布页面，在项目列表中单击项目上的，可访问项目。 全屏模式显示效果最佳（快捷键F11），否则部分区域可能有滚动条或显示不全。

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在编辑页面状态下，选中组件，单击组件上方的。 图1 单击数据 在数据类型中，选择“桥接器预置”，并选中所需的桥接器。 设置桥接器预置数据。 图2 设置桥接器参数 桥接器数据类型：桥接器的数据源类型，支持“静态数据”和自定义接口“AstroZero API”。 URL：配置为自定义接口的URL。如何查看自定义接口URL，请参考查看自定义接口。“桥接器数据类型”选择“AstroZero API”时，才显示该参数。 共享数据：是否共享数据。勾选表示某项目里多个组件调用一个公共的请求（请求路径与入参均一致才视为同一公共请求）而访问同一个接口的数据，避免多次调接口。“桥接器数据类型”选择“AstroZero API”时，才显示该参数。 输入数据：系统已预置了静态数据，如果需要自定义静态数据，请重置数据。“桥接器数据类型”选择“静态数据”时，才显示该参数。 刷新周期：每隔多少秒调用一次后台接口，默认配置为“0”，表示只调用一次。 设置完成后，单击“保存”。

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

操作步骤 租户管理员使用华为账号，参考如何登录Astro低代码平台中操作，登录Astro低代码平台。 在左侧导航栏中，选择“组织管理” 。 在“组织层级”页签，单击“邀请成员”，进入邀请成员页面。 选择“手动添加成员”，设置用户信息。 图1 设置待添加的用户信息 姓名：待添加用户的姓名。 手机：待添加用户的手机号。 部门：用户所属的部门。 邮箱：待添加用户的邮箱地址。 工号：待添加用户的工号。 设置完成后，单击“保存”，如果需要继续添加用户，请单击“保存并继续添加”。 在企业成员列表中，可查看到已添加的成员。 图2 查看成员信息

指标 指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。 图11 指标 显示指标：是否显示指标。 指标内容：设置指标内容。 指标字体：设置指标内容的字体、大小和颜色等。 指标类型：设置指标类型，支持总和、平均值和自定义。 数值内容：“指标类型”设置为“自定义”时，支持自定义数值内容。 数值字体：设置数值字体、大小、颜色等。 数值位数：设置数值小数点后的位数。

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图5 图形 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记：设置图例小图标形状。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小。 左间距：图例到柱图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距：图例到柱图组件顶部距离占组件高度。 翻页按钮：翻页按钮的颜色。 翻页按钮不激活：翻页按钮不激活时的颜色。 自定义图例显示：是否开启自定义图例显示设置。开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

参考线 参考线是指为图表组件添加可视化的参考标准，为图表中数据提供具体的参考依据。 图10 参考线 统一配置：设置参考线两端的样式，如圆形、矩形和三角形等。 Y轴参考线 Y轴参考线：是否显示Y轴参考线。 参考线：设置已有参考线的颜色和线型，单击“新增Y轴参考线”，可新增参考线。单击对应参考线后的，可删除参考线。 X轴参考线 X轴参考线：是否显示X轴参考线。 参考线：设置已有参考线的颜色和线型，单击“新增X轴参考线”，可新增参考线。单击对应参考线后的，可删除参考线。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色：设置图表中，图形的颜色。 统一配置 光圈标记：是否开启光圈标记。 数据排序：是否开启数据排序。 阶梯瀑布：是否阶梯瀑布效果显示。 横向柱条：是否横向柱条效果显示。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置和数值颜色。 数据标签最大值/最小值：是否显示柱状条数值的最大值或者最小值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 柱条颜色：设置柱条颜色，如单色或渐变色，支持自定义柱状条的颜色。 定制最大柱条：支持对最大的柱条自定义设置，包括颜色等。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置、数值颜色、前缀和后缀。

坐标轴 在坐标轴中，设置图表的x轴和y轴，如是否显示x轴y轴、字体、字体颜色、是否显示刻度等。 图8 坐标轴 x轴 X轴：是否显示X轴。 轴标题：X轴标题。 字体：坐标轴字体、颜色、大小等设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签：刻度标签样式，包括是否自动调节标签、显示所有标签。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 反转：是否对轴数据进行反转。 y轴 Y轴：是否显示Y轴。 轴标题：Y轴标题。 字体：坐标轴字体、颜色、大小设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 最小间隔：坐标轴最小间隔大小。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 轴起始值：设置Y轴的起始值。为方便数据展示，输入为接入数据最大值时，图表Y轴起始值为最大值的一半。 左Y轴单位：设置左侧Y轴的单位。 轴最大值：是否设置左轴的最大值。 图9 设置后效果 反转：是否对轴数据进行反转。 柱间阴影：是否显示柱间阴影，支持设置阴影颜色。 标签展示：设置Y轴标签展示样式，如默认或计数单位。

初识Astro低代码平台 Astro低代码平台是华为云自主研发的全场景低代码平台，通过零码、低码、流程、大屏、智能助手和高低码结合，全方位助力客户实现企业数字化转型。 图1 Astro低代码平台 表1 Astro低代码平台功能介绍 功能 功能描述 总览 Astro低代码平台总览页面，在总览页面可以从常用模板开始，体验您的自动化之旅，也可以学习Astro产品，为您的工作提速、增效。 Flow 自动化工作流，您的智能业务流程定制专家。更多介绍，请参见《Astro工作流 成长地图》。 Canvas 可视化大屏，为您提供多端数据驾驶舱观感体验。 Zero 轻应用，通过该平台可轻松构建专业级应用，创新随心所欲，敏捷超乎想象。更多介绍，请参见《Astro轻应用 成长地图》 。 Pro 企业应用，通过元数据多租，高低代码协同等能力，快速构建企业核心业务应用，提高多层级/多分支企业的应用构建效率。更多介绍，请参见《Astro企业应用 成长地图》 。 组织管理 便捷配置组织的各类信息、角色和授权关系，让您对组织用户的管理游刃有余。 业务管理 轻松管理业务门户，定制化配置符合组织风格的应用管理平台，多场景应用形成企业自由组合能力和系统化解决方案。 资产中心 通过官方发布的各类专业模板，开箱即用，构建快、选择多、标准化，轻松搭建符合企业业务需要的应用。 连接器 海量连接器帮助拼装能力、联接云端、打通行业，让应用无所不能。 产品学习 通过丰富的零码、低码、工作流教学课程，介绍Astro中的各类应用，帮助用户轻松学习、快速上手搭建。 论坛交流 低代码平台Astro交流论坛，是华为云用户的聚集地。这里有来自Astro各服务的技术牛人，为您快速解决技术难题。 父主题： Astro低代码平台

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在“项目列表”中，单击对应项目上的。 设置项目封面，单击“确定”。 图片默认为匿名可访问，请勿上传包含敏感数据的图片。 图1 设置项目封面 页面缩略图：使用项目中，页面的缩略图，作为当前项目的封面。 上传封面：单击“上传封面”，从本地上传图片作为项目的封面。建议使用596*328尺寸的图片。 默认封面：使用系统提供的默认封面，作为当前项目的封面。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题 标题：是否显示该组件标题。 内容：组件标题内容。 字体：文字的字体、大小、颜色设置。 对齐：标题相对于组件的对齐方式。 标题背景色：设置标题的背景颜色。 内边距：标题与组件框上下左右四个边界之间的距离，单位默认px。 标题偏移：组件标题与水位图之间的偏移量。 背景 背景色：水位图的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见图2），默认为0，即铺满整个组件。 上边距：图表到组件边框顶部的距离。 右边距：图表到组件边框右侧的距离。 下边距：图表到组件边框底部的距离。 左边距：图表到组件边框左侧的距离。 参考模板：系统预置的组件样式模板，支持默认模板和标签模板两种样式。 边框圆角：边框的圆角，四个角弧度取值范围为0~500，单位px。 图表背景：图表的背景颜色。 图表标题：图表标题是否显示，支持自定义或者从系列中获取。

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图6 图例 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例选择模式：设置图例选择模式，支持单个和多个。 小图标：设置图例小图标样式，如圆形、矩形、三角形等。 图列排列：设置图例的排列样式，如水平、垂直。 图例宽度：设置图例的宽度。 图例高度：设置图例的高度。 位置选择：设置图例的显示位置，支持左、右和居中显示。 图例间隔：设置图例之间的间隔。 字体：设置小图标的字体、颜色和大小等。图例文字内容来源于数据模型下“s”的取值。 文字风格：设置小图标文字的风格，支持设置为正常、斜体和倾斜体。 图例类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。 翻页按钮：翻页按钮的颜色。 翻页按钮不激活：翻页按钮不激活时的颜色。 自定义图例显示：开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图9 坐标轴 基本信息 半径：设置图表的半径。 横坐标：设置图表的横坐标。 纵坐标：设置图表的纵坐标。 绘制类型：设置图表绘制类型，支持多边形和圆形。 指示器名称 显示名称：是否显示名称。 文字风格：设置名称显示风格，支持正常、斜体和倾斜体。 字体：设置名称的字体、大小和颜色等。 指示器名称与指示器轴的距离：设置指示器名称与指示器轴之间的距离。 轴分割段数：设置轴分割段数。 分割线 显示分割线：是否显示分割线。 颜色设置：设置分割线颜色，单击“新增颜色设置”，可添加新的颜色。 分割区域 显示分割区域：是否显示分割区域。 颜色设置：设置分割区域颜色。 坐标轴轴线 显示轴线：是否显示轴线。 轴线颜色：设置轴线颜色。 数据系列 名称：系列的名称。 最大值：设置系列的最大值。 最小值：设置系列的最小值。 颜色：设置系列颜色。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图5 图形 颜色：设置图表中，图形的颜色。 统一配置 标记图形：设置标记的图形，如圆形、矩形等。 标记大小：设置标记的大小。 折线宽度：设置折线的宽度。 折线类型：设置折线类型，如实线、虚线等。 数据标签：是否显示数据标签，支持设置标签的字体、大小、颜色。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 标记图形：设置标记的图形，支持无、圆形、矩形和圆角矩形。 标记大小：设置标记的大小。 折线拐点标志颜色：设置折线拐点的标志颜色。 折线宽度：设置折线宽度。 折线类型：设置折线类型，支持实线、点线和虚线。 折线不透明度：设置折线的不透明度。 折线颜色：设置折线颜色。 区域填充不透明度：设置区域填充的不透明度。 区域填充颜色：设置区域填充颜色。 数据标签：是否显示标签。设置为显示时，支持设置标签的字体、颜色和大小等。