华为云用户手册

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

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

图形 图形是指组件中，实现 数据可视化 的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 区域图图形 颜色：设置组件中，图表的图形颜色。 统一配置 折线类型：设置图形中折线类型，包括平滑和不平滑。 折线宽度：设置折线的宽度。 拐点尺寸：设置折线的拐点尺寸。 数据标签：是否显示数据标签，支持设置标签颜色。 数据标签最大值/最小值/平均值：设置数据标签的最大值、最小值或平均值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 折线类型：设置图形中折线类型，包括平滑和不平滑。 折线宽度：设置图形中折线的宽度。 折线颜色：设置折线颜色，支持单色和渐变色。如果开启了阈值线，渐变会随着阈值线值变化。 折线不透明度：设置折线的不同透明度。 拐点尺寸：设置拐点尺寸。 拐点颜色：设置拐点显示的颜色。 拐点不透明度：设置拐点不透明度。 区域颜色：设置折线图中区域颜色。 数据标签：是否显示数据标签，支持设置标签颜色、前缀和后缀。 数据标签最大值/最小值/平均值：设置数据标签的最大值、最小值或平均值。

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

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

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图10 实心圆饼图图例 统一配置 图例：是否显示图例，如工程管理、环境管理。图例文字内容来源于数据模型下“s”的取值。 水平对齐方式：设置图例的水平对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 垂直对齐方式：设置图例的垂直对齐方式，支持顶部对齐、居中、底部对齐和按照百分比设置。 排列方向：设置图例的排列方向，支持水平和垂直两种方式。 类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。设置为“滚动翻页”时，支持设置翻页箭头的宽高、图标默认颜色、图标选中颜色和页码字体。 图例总宽高：设置图例项的宽度和高度，单位为“%”。 图例项宽度：设置图例的宽度，支持自动和自定义。 图例间隔：设置图例项之间的间隔。 图例标记 图例标记：设置图例前图标的形状。 标记宽高：设置图例前图标的宽度和高度。 图例系列名 字体：设置图例的字体、颜色和大小。 图例字符：设置图例显示的字符数，支持全显和省略。设置为“省略”时，支持设置图例显示的文字数量。 数据值：图例中是否显示数值。设置为“显示”时，可设置如下参数。 字体：设置图例中数值的字体、大小和颜色等。 数值左间距：设置系列名和数据之间的间距。 前缀：数值前是否显示前缀。 前缀内容：设置前缀的显示内容。 前缀字体：设置前缀的字体、大小和颜色等。 前缀右间距：设置前缀和数值之间的间距。 后缀：数值后是否显示后缀。 后缀内容：设置后缀的显示内容。 后缀字体：设置后缀的字体、大小和颜色等。 后缀左间距：设置后缀和数值之间的间距。 百分比：是否显示百分比。设置为“显示”时，支持设置如下参数。 数字字体：设置百分比中数值的字体、大小和颜色等。 百分号字体：设置百分比中百分号的字体、大小和颜色等。 百分号左间距：设置数值和百分比之间的间距。

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

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

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图7 玫瑰花饼图图例 统一配置 图例：是否显示图例，如工程管理、环境管理。图例文字内容来源于数据模型下“s”的取值。 水平对齐方式：设置图例的水平对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 垂直对齐方式：设置图例的垂直对齐方式，支持顶部对齐、居中、底部对齐和按照百分比设置。 排列方向：设置图例的排列方向，支持水平和垂直两种方式。 类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。设置为“滚动翻页”时，支持设置翻页箭头的宽高、图标默认颜色、图标选中颜色和页码字体。 图例总宽高：设置图例项的宽度和高度，单位为“%”。 图例项宽度：设置图例的宽度，支持自动和自定义。 图例间隔：设置图例项之间的间隔。 图例标记 图例标记：设置图例前图标的形状。 标记宽高：设置图例前图标的宽度和高度。 图例系列名 字体：设置图例的字体、颜色和大小。 图例字符：设置图例显示的字符数，支持全显和省略。设置为“省略”时，支持设置图例显示的文字数量。 数据值：图例中是否显示数值。设置为“显示”时，可设置如下参数。 字体：设置图例中数值的字体、大小和颜色等。 数值左间距：设置系列名和数据之间的间距。 前缀：数值前是否显示前缀。 前缀内容：设置前缀的显示内容。 前缀字体：设置前缀的字体、大小和颜色等。 前缀右间距：设置前缀和数值之间的间距。 后缀：数值后是否显示后缀。 后缀内容：设置后缀的显示内容。 后缀字体：设置后缀的字体、大小和颜色等。 后缀左间距：设置后缀和数值之间的间距。 百分比：是否显示百分比。设置为“显示”时，支持设置如下参数。 数字字体：设置百分比中数值的字体、大小和颜色等。 百分号字体：设置百分比中百分号的字体、大小和颜色等。 百分号左间距：设置数值和百分比之间的间距。

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

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

自定义动作参数说明 在自定义动作中，支持直接使用的参数如下： 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 全局变量

获取组件对象并操作组件 获取组件。 在“图层”页面，选中日期选择器组件。 图10 选中日期选择器组件 将鼠标悬浮在日期选择器上，组件名称即为组件ID。 图11 获取组件ID 操作组件。 获取到组件ID后，可以通过华为云Astro大屏应用提供的API来操作组件，如显示/隐藏组件。关于API的详细介绍，请参见内置API一览表。 // 显示组件 {widget2}.showWidget(); // 隐藏组件 {widget2}.hideWidget();

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

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

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图5 渐变色饼图图例 统一配置 图例：是否显示图例，如工程管理、环境管理。图例文字内容来源于数据模型下“s”的取值。 水平对齐方式：设置图例的水平对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 垂直对齐方式：设置图例的垂直对齐方式，支持顶部对齐、居中、底部对齐和按照百分比设置。 排列方向：设置图例的排列方向，支持水平和垂直两种方式。 类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。设置为“滚动翻页”时，支持设置翻页箭头的宽高、图标默认颜色、图标选中颜色和页码字体。 图例总宽高：设置图例项的宽度和高度，单位为“%”。 图例项宽度：设置图例的宽度，支持自动和自定义。 图例间隔：设置图例项之间的间隔。 图例标记 图例标记：设置图例前图标的形状。 标记宽高：设置图例前图标的宽度和高度。 图例系列名 字体：设置图例的字体、颜色和大小。 图例字符：设置图例显示的字符数，支持全显和省略。设置为“省略”时，支持设置图例显示的文字数量。 数据值：图例中是否显示数值。设置为“显示”时，可设置如下参数。 字体：设置图例中数值的字体、大小和颜色等。 数值左间距：设置系列名和数据之间的间距。 前缀：数值前是否显示前缀。 前缀内容：设置前缀的显示内容。 前缀字体：设置前缀的字体、大小和颜色等。 前缀右间距：设置前缀和数值之间的间距。 后缀：数值后是否显示后缀。 后缀内容：设置后缀的显示内容。 后缀字体：设置后缀的字体、大小和颜色等。 后缀左间距：设置后缀和数值之间的间距。 百分比：是否显示百分比。设置为“显示”时，支持设置如下参数。 数字字体：设置百分比中数值的字体、大小和颜色等。 百分号字体：设置百分比中百分号的字体、大小和颜色等。 百分号左间距：设置数值和百分比之间的间距。

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

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

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

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

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

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 基本折线图图形 颜色：设置组件中，图表的图形颜色。 统一配置 折线类型：设置图形中折线类型，包括平滑和不平滑。“折线类型”选择“平滑”时，基本折线图近似曲线图。 折线宽度：设置图形中折线的宽度，取值范围为0~100。 拐点尺寸：设置拐点尺寸，取值范围为0~100。 数据标签：是否显示数据标签，支持设置标签颜色。 数据标签最大值/最小值/平均值：设置数据标签的最大值、最小值或平均值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 折线类型：设置图形中折线类型，包括平滑和不平滑。 折线宽度：设置图形中折线的宽度。 折线颜色：设置折线颜色，支持单色和渐变色。如果开启了阈值线，渐变会随着阈值线值变化。 折线不透明度：设置折线的不同透明度。 拐点尺寸：设置拐点尺寸。 拐点颜色：设置拐点显示的颜色。 拐点不透明度：设置拐点不透明度。 区域颜色：设置折线图中区域颜色。 数据标签：是否显示数据标签，支持设置标签颜色、前缀和后缀。 数据标签最大值/最小值/平均值：设置数据标签的最大值、最小值或平均值。 图8 最终设置效果

新建连接器 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在主菜单中，选择“数据中心”。 在左侧导航栏中，选择“连接器”。 在连接器管理页面，单击“新建连接器”。 设置基本信息。 图2 基本信息（无身份验证） 图3 基本信息（AK/SK） 图4 基本信息（API Key） 图5 API鉴权 连接器名称：输入新建连接器的名称，长度为1~32个字符，可包括中文、字母、数字及下划线。 类型：选择连接器类型，便于管理连接器。单击“新建类型”，可自定义连接器类型。 上传图标：单击“+”，可设置连接器显示的图标。 描述：新建连接器的描述信息，可按需进行设置。 请求协议：设置连接器请求协议。 域名 ：请求的Host地址，不需要带上“http://”或“https://”协议头，同时也不需要“/”结尾。 域名参数：配置域名参数，包含字段名称、默认值和字段描述。连接器配置中，当域名中配置“{字段名}”参数时，才会显示该参数。 图6 配置域名参数 接口鉴权方式：设置接口鉴权方式，支持API鉴权、AK/SK、API Key和无身份验证。 API鉴权：填写API鉴权信息后，可在连接器中选择其响应参数，作为连接器请求参数的值。 无身份验证：不需要任何验证信息，直接调用接口，通常用于访问一些公开的接口。 AK/SK：通过访问密钥进行接口鉴权。访问密钥即AK/SK（Access Key ID/Secret Access Key），是您访问系统的身份凭证，系统通过AK识别访问用户的身份，通过SK进行签名验证，通过加密签名验证可以确保请求的机密性、完整性和请求者身份的正确性。 API Key：使用API密钥进行授权，鉴权信息可以附加在Query或Header中。 鉴权信息：“接口鉴权方式”设置为“API鉴权”时，才会显示该参数。单击“新建鉴权信息”，设置鉴权信息。 图7 新建鉴权信息 API鉴权名称：设置API鉴权名称，长度为1~32个字符，可包括中文、字母、数字及下划线。 API鉴权描述：设置API鉴权描述信息。 API鉴权地址：设置API鉴权地址，通过输入字符“{xx}”可在请求参数Path列表中使用变量“xx”。 请求方式：设置接口请求方式，支持GET和POST。 请求参数：设置接口请求参数。设置成功后，可单击“测试API接口”，可进行接口调试。 返回参数：设置接口返回参数，此处的响应参数，可作为连接器请求参数的值。 参数位置：把鉴权信息附加在Query或Header中，请根据实际需求进行配置。“接口鉴权方式”设置为“API Key”时，才会显示该参数。 参数名称：API Key的名称，请根据实际需求进行配置。“接口鉴权方式”设置为“API Key”时，才会显示该参数。 设置执行动作。 图8 添加动作 图9 将鉴权信息中返回的参数赋值给连接器中Header参数 动作名称：设置新增动作的名称，长度为1~32个字符，可包括中文、字母、数字及下划线。 动作描述：新增动作的描述信息。 请求地址：设置请求地址，通过输入字符“{xx}”可在请求参数Path列表中使用变量“xx”。 请求方法：请根据接口类型，选择请求方法。 请求参数 Query：请求的参数，通常指的是URL中“?”后的附加参数。 Header：Header中需要的参数，支持“字符串”和“表达式”两种。“字段类型”设置为“表达式”时，单击“默认值”，可将5中鉴权信息中返回的参数赋值给连接器的请求参数。 Body：当请求类型为POST时，还需要设置Body，可以使用默认值也可以根据实际需求进行填写。 Path：URL中配置的带大括号的变量。例如{pathParam} ，其中pathParam会作为变量名。 返回参数：设置返回参数。在Body中，可以贴一段预期结果的json，使用时可以解析出字段格式。 认证信息设置完成后，单击“测试”，测试接口是否有效。 测试成功后，单击“保存”，完成连接器的创建。

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

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

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

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

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

将组件保存为卡片 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在编辑页面状态下，选中组件，单击右键，选择“保存为卡片”。 图1 选择保存为卡片 您也可以在“图层”中，将鼠标悬浮在组件上，单击右键选择“保存为卡片”。 图2 在图层中将组件保存为卡片 在卡片设置中，输入卡片的名称，单击“保存”。 图3 设置卡片的名称 查看保存的卡片。 方式一：在编辑页面“我的卡片”中，查看已保存的卡片。 图4 在编辑页面查看保存的卡片 方式二：在“我的资产”中，查看已保存的卡片。 图5 在我的资产中查看

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