华为云用户手册

预置分类 预置分类为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等），获取数据来展示在页面上。更多介绍，请参见其他数据源。 页面数据源：对接页面级的数据集，以保证数据的复用。页面数据集主要是为了支持多个组件对接同一个数据源的情况，可以减少重复的请求跟重复的配置。更多介绍，请参见页面数据集。

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

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

配置 在配置中，设置组件的全局样式、表头、行和序列号。 图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

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在页面编辑模式下，按照组件分类，查找到对应组件。 您也可以在搜索框中，输入所需的组件（如图1），或者按照图2进行查找。 图1 搜索所需组件 图2 按照分类查找 按住鼠标左键，将目标组件拖拽到画布中。 图3 拖拽组件到画布中 组件添加成功后，会自动展示在画布中。您可以通过拖拽组件边框，调整组件的大小，也可以参考拖拽组件中操作，调整组件的位置。

指标 指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。 图14 指标 显示指标：图表中是否显示指标。 标题内容：自定义指标的文字内容。 标题字体：设置指标标题的字体、大小和颜色等。 自动求和：指标是否自动求和。 数值内容：“自动求和”设置为“否”时，可自定义指标数值。如果为自动求和，此处的值为工程管理value和环境管理value的数据之和。 数值字体：设置指标数值的字体、大小和颜色。

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图8 图例 显示图例：是否显示图例，如工程管理、环境管理。图例文字内容来源于数据模型下“s”的取值。 图9 图例文字来源 图例标记：设置图例前图标的形状和图例的布局。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小。 图例位置(左)：图例到饼图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距：图例到饼图组件顶部距离占组件高度。 图例类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。“图例类型”设置为“滚动翻页”时，支持自定义翻页按钮激活和不激活时的颜色。 图10 翻页按钮激活/不激活颜色 自定义图例显示：开启后，可调整图例名称显示字符长度，如图11。默认关闭，即显示图例所有字符。 图11 显示字符数设置为5效果

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 图形 颜色：设置图表中，图形的颜色。 统一配置：统一配置中设置的内容，对图表中所有数据系列均生效。 数据系列：图表是否显示数据系列。 南丁格尔图：是否使用南丁格尔图。 内半径：设置饼图内半径的值，单位%。 外半径：设置饼图外半径的值，单位%。 圆心横坐标：设置饼图圆心横坐标的值，单位%。 圆心纵坐标：设置饼图圆心纵坐标的值，单位%。 排布顺序：扇区可按顺时针或逆时针排布。 起始角度：扇区起始角度。 最小角度：扇区最小角度。 鼠标悬停：鼠标放在扇区时，该扇区是否放大显示。 所有标签设置：设置为显示后，图表中会显示标签。 所有标签悬浮设置：鼠标悬浮在对应数据系列上时，标签是否显示。 标签位置：标签显示位置，如内部、外部或中间。 标签视觉引导线是否展现：设置为“是”时，标签前会添加引导线。 引导线长度：设置标签引导线的长度。 标签内容：设置标签显示的内容，可以包含数据值、百分比和系列名。 标签文字：设置标签内容的字体、大小和颜色等。 描边：基本饼图间系列和整体范围的描边样式。 设置背景：饼图背景颜色、内外半径设置。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：图表中实际显示的系列名。 下标：数据系列所在的位置。 初始选中：数据项初始是否被选中。 颜色样式：数据系列的颜色样式，支持以下几种。 单色：可设置正常颜色和高亮下颜色。 渐变色：可设置渐变样式、渐变方向、起始颜色和结束颜色。 条件色：单击“新增条件格式”，可设置条件和响应数据列的样式。如图7中所示，该设置表示环境管理满足设置的条件（大于300）时，显示为红色，否则显示为正常颜色。 图7 设置条件格式 纹理：通过上传纹理图片，自定义数据系列的颜色格式。 普通标签：未选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值“635”。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比“67.2”%。 普通标签字体：设置标签内容的字体、颜色和大小等。 高亮标签：选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值635。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比67.2%。 高亮标签字体：设置标签内容的字体、颜色和大小等。

自定义动作参数说明 在自定义动作中，支持直接使用的参数如下： eventParam：组件传递出的参数。 以日期选择器组件为例，介绍如何获取eventParam。 在页面中，拖入一个日期选择器组件到画布中。 图2 拖拽日期选择器到画布中 选中日期选择器，单击，进入交互设置页面。 按照下图，设置自定义动作。 图3 设置自定义动作 /* * 可以像示例这样获取到组件对象，然后编写js代码 * 示例中表示，触发当前事件后，会隐藏组件widget16 * 帮助文档：https://support.huaweicloud.com/usermanualcanvas-astrozero/astrozero_05_7025.html * 可以直接使用的参数 * eventParam: 组件传递出的参数 * data: 交互动作信息对象 * $pageStore: 保存页面中全局变量的对象 * 你可以用$pageStore.setItems([{key:'id',value:'123'}])来批量更新全局变量 */ // {widget16}.hideWidget() console.log(eventParam); console.log(data); console.log($pageStore); 单击页面上方的，保存页面。 单击，在预览页面，设置日期选择器的开始时间和结束时间。 图4 预览效果 设置完成后，按F12，在“Console”页签，即可获取查看eventParam。 图5 eventParam data：保存最详细的动作信息对象。 图6 查看data $pageStore：保存页面中全局变量的对象。 如果在全局变量中，配置了一个field变量，并设置默认值为1。在自定义动作中，通过打印$pageStore（如图3），可以获取到全局变量。 图7 定义全局变量field 图8 查看$pageStore $pageStore.setItems([{key:'id',value:'123'}])：批量更新全局变量。其中，key为全局变量名，value为全局变量的值。 图9 全局变量

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色：设置图表中，图形的颜色。 统一配置 是否展现：是否展示水位图开关。 横坐标：水位图整体在组件位置中的横坐标百分比。 纵坐标：水位图整体在组件位置中的纵坐标百分比。 直径：水位图整体大小宽度。 水波颜色：设置水波颜色。 水波背景色：设置水波背景色。 波纹振幅：水波动画波纹震动大小。 显示双波纹：水波动画是否显示双波纹。 次波纹颜色：显示双波纹时，第二波纹颜色。 标签是否展现：水位图中心标签字符展现开关。 标签位置左偏移：水位图中心标签字符在水位图中的左边偏移位置。 标签位置上偏移：水位图中心标签字符在水位图中的上边偏移位置。 标签字体：水位图中心标签字体设置（字体样式、粗细、大小、颜色）。 波浪上时文本颜色：当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。

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

getSafeUrl() 对外部链接进行xss安全过滤 ，获取安全的绝对URL地址，使用方式参考如下： /* * @param {*} url */ SafeUtils.getSafeUrl(url); SafeUtils.getSafeUrl('/test.html') //return:https://appcube.cn-north-4.huaweicloud.com/test.html SafeUtils.getSafeUrl('javascript:alert(123)') //return:'unsafe:' 只有安全的链接才会被访问，其他形式的URL都会相应一个“unsafe:”，无法访问。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 时间轴 时间轴方向：时间轴的方向，支持水平方向和垂直方向。 自动轮播：是否展示自动轮播效果。 间隔时间：间隔的时间。 停留时间：停留的时间。 轴条默认样式：设置轴条的默认颜色。 轴条选中样式：设置轴条选中时的颜色。 轴条粗细：轴条的粗细。 轴标签 默认标签字体：设置标签默认的字体、大小、颜色等。 选中标签字体：设置选中标签时，显示的字体、大小、颜色等。 标签旋转：设置标签旋转角度。 默认描述字体：设置标签默认的描述字体、颜色、大小等。 选中描述字体：设置选中标签时的描述字体、颜色、大小等。 描述旋转：设置描述文字旋转角度。 轴节点 类型：轴节点的类型，支持时间型、类目型和数值型。 节点形状：设置节点的形状，支持圆形和菱形。 节点默认样式：设置节点默认样式的颜色。 节点选中样式：设置选中节点时的颜色。 节点大小：设置节点的大小。

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

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色：设置图表中，图形的颜色。 统一配置 是否展现：是否展示水位图开关。 横坐标(%)：水位图整体在组件位置中的横坐标百分比。 纵坐标(%)：水位图整体在组件位置中的纵坐标百分比。 直径(%)：水位图整体大小宽度。 水波颜色：设置水波颜色。 水波背景色：设置水波背景色。 波纹振幅：水波动画波纹震动大小。 显示双波纹：水波动画是否显示双波纹。 次波纹颜色：显示双波纹时，第二波纹颜色。 标签是否展现：水位图中心标签字符展现开关。 标签位置左偏移(%)：水位图中心标签字符在水位图中的左边偏移位置。 标签位置上偏移(%)：水位图中心标签字符在水位图中的上边偏移位置。 标签字体：水位图中心标签字体设置（字体样式、粗细、大小、颜色）。 波浪上时文本颜色：当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。

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等参数对象的规则介绍，请参考自定义桥接器。

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

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或者多语言对象。

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); }, 配置动作时，可以在AstroCanvas画布交付界面，配置itemVal的值为“${e.xxx}”将事件抛出的“xxx”参数复制到itemVal中。然后select组件内统一从itemVal获取数据。select组件的内部处理API如上面代码。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色：设置组件中，图表的图形颜色。 统一配置 数据系列：是否显示该系列数据。若不显示，会隐藏该组件中对应的系列数据。 南丁格尔图：是否使用南丁格尔图。 内半径：设置饼图内半径的值，单位%。 外半径：设置饼图外半径的值，单位%。 圆心横坐标：设置饼图圆心横坐标的值，单位%。 圆心纵坐标：设置饼图圆心纵坐标的值，单位%。 排布顺序：扇区可按顺时针或逆时针排布。 起始角度：扇区起始角度。 最小角度：扇区最小角度。 鼠标悬停：鼠标放在扇区时，该扇区是否放大显示。 所有标签设置：设置为显示后，图表中会显示标签。 所有标签悬浮设置：鼠标悬浮在对应数据系列上时，标签是否显示。 标签位置：标签显示位置，如内部、外部或中间。 标签视觉引导线是否展现：设置为“是”时，标签前会添加引导线。 引导线长度：设置标签引导线的长度。 标签内容：设置标签显示的内容，如数据值、百分比、系列名。 标签文字：设置标签内容的字体、大小和颜色等。 描边：实心圆饼图间系列和整体范围的描边样式。 设置背景：设置饼图的背景。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 下标：数据系列所在的位置。 初始选中：数据项初始是否被选中。 颜色样式：数据系列的颜色样式。 单色：可设置正常颜色和高亮下颜色。 渐变色：可设置渐变样式、渐变方向、起始颜色和结束颜色。 纹理：设置为“纹理”时，需要上传纹理图片，支持设置所有数据项纹理重复或者不重复。 普通标签：未选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值“635”。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比“67.2”%。 普通标签字体：设置标签内容的字体、颜色和大小等。 高亮标签：选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值635。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比67.2%。 高亮标签字体：设置标签内容的字体、颜色和大小等。

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图5 图例 显示图例：是否展示图例。 图例标记：设置图例小图标形状和图例列表布局朝向。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小。图例文字内容来源于数据模型下“s”的取值。 图例位置(左)：图例到饼图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距：图例到饼图组件顶部距离占组件高度。 图例类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。 翻页按钮：翻页按钮的颜色。 翻页按钮不激活：翻页按钮不激活时的颜色。 自定义图例显示：开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

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

配置 在配置中，设置组件的页签样式、导航页签和默认路由。 图4 配置 页签样式统一配置 页签方向：设置页签的显示方向，如水平方向、垂直方向。 位置：设置页签的位置，支持默认和自定义两种方式。 快捷设置：设置页签的显示位置，如居左、居右或居中。“位置”设置为“默认”时，才显示该配置。 上间距(%)：设置页签距离组件上边界的距离。“位置”设置为“自定义”时，才显示该配置。 左间距(%)：设置页签距离组件左边界的距离。“位置”设置为“自定义”时，才显示该配置。 导航页签：在导航页签，可删除或新增路由，也可对路由进行如下设置。 页签内容：设置当前路由页签的显示内容。 页签路由：选择当前路由页签关联的页面，只能选择已发布的页面。 默认文字：设置路由页签默认文字的字体、颜色和大小等。 默认样式：设置路由的默认样式，支持设置为颜色和自定义。 悬浮文字：设置鼠标悬浮在路由上时，页签内容的字体、大小和颜色等。 悬浮样式：鼠标悬浮在路由上时，路由显示的样式，支持设置为颜色和自定义。 点击文字：设置单击路由时，页签内容的字体、大小和颜色等。 点击样式：设置单击路由时的样式，支持设置为颜色和自定义。 默认路由：进入路由导航时，默认显示的页面。

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