华为云用户手册

坐标轴 在坐标轴中，设置图表的x轴和y轴，如是否显示x轴y轴、字体、字体颜色、是否显示刻度等。 图6 热力图坐标轴 x轴 X轴：是否显示X轴。 坐标轴分割段数：设置坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。 最小值：设置坐标轴的最小值。 最大值：设置坐标轴的最大值。 刻度标签旋转的角度：控制刻度标签的旋转，在文字过长时可以避免重叠。 轴线显示：控制是否显示轴线。 刻度显示：控制是否显示刻度。 线的颜色：轴线的颜色。 标签显示：是否显示刻度标签。打开后需要设置刻度标签字体、字体颜色、大小、粗细。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 网格线是否显示：是否显示轴网格线、轴网格线的类型和颜色设置。 y轴 Y轴：是否显示Y轴。 最小值：设置坐标轴的最小值。 最大值：设置坐标轴的最大值。 轴线显示：控制是否显示轴线。 刻度显示：控制是否显示刻度。 线的颜色：轴线的颜色。 标签显示：是否显示刻度标签。打开后需要设置刻度标签字体、字体颜色、大小、粗细。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 网格线是否显示：是否显示轴网格线、轴网格线的类型和颜色设置。

同项目不同页面之间的跳转 当项目场景较多，一屏无法完全涵盖所有内容或需要额外查询时，为了性能考虑，通常会采取传递参数在另外的页面进行查询后，在当前页面展现，这时就需要在同项目中不同页面间来回跳转。 例如，新建三个页面（页面一、页面二和页面三），向页面一（默认主页）中拖入玫瑰花饼图和基本饼图，向页面二中拖入多区域折线图并发布，向页面三中拖入基本柱图并发布。 参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。 参考使用空白画布新建页面中操作，新建一个空白页面，如页面一，并拖入玫瑰花饼图和基本饼图。 图1 页面一 单击，保存页面后单击，发布页面。 参考上述操作，新建页面二和页面三，分别拖入多区域折线图和基本柱图，并发布。 图2 页面二 图3 页面三 在页面一中，选中玫瑰花饼图，单击组件上方的，设置玫瑰花饼图和页面二之间的交互。 图4 与页面二之间的交互 页面类型：选择待跳转页面的类型，支持选择本项目内页面或外部页面。 内部页面：选择待跳转的具体页面。“页面类型”设置为“内部页面”时，才显示该配置。 外部页面地址：选择待跳转的外部页面地址，可以直接输入地址，也可以设置为全局变量。“页面类型”设置为“外部页面”时，才显示该配置。 页面打开方式：设置跳转页面的打开方式，如新窗口、当前窗口或弹窗。设置为弹窗时，可指定弹窗的高度和宽度。本示例设置为弹窗，并设置弹窗的高度和宽度为50%。 设置页面参数：支持设置为“固定参数”和“变量参数”，设置为“变量参数”时，参数值可以设置为全局变量。设置后，跳转页面的地址中会带上此处设置的参数，格式为“跳转页面URL?参数名=参数值”。 图5 设置为固定参数 图6 设置为变量参数 图7 跳转页面地址中会带上设置的参数 在页面一中，选中基本饼图，单击组件上方的，设置基本花饼图和页面三之间的交互。 图8 与页面三之间的交互 单击，保存页面后单击，预览效果。 图9 单击玫瑰花饼图弹出页面二 图10 单击基本饼图弹出页面三

跳转外部页面 外部页面跳转和项目内部页面跳转类似，只是交互动作的选择项不同，同时需要填入外部页面的连接地址。 参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。 参考使用空白画布新建页面中操作，新建一个空白页面，并拖入玫瑰花饼图。 选中玫瑰花饼图，单击组件上方的，进入交互设置页面。 设置本页面与外部页面之间的跳转。 图11 设置与外部交付的页面 外部页面由于同源策略限制，暂不支持弹窗打开。 在填写外部页面地址时，需要将“http://”或“https://”请求头也一并填入。 单击，保存页面后单击，预览效果。

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

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

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

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

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

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

管理页面版本 开发好某个大屏页面，例如在页面中拖入基本饼图组件，保存后单击发布图标。 图1 开发页面 打开“发布链接”开关，生成发布后的页面链接。 单击“+ 新建版本”，会生成一个页面版本。 图2 新建第一个版本 单击新建版本后的，将该版本设置为当前发布页。 图3 设置发布页 在页面版本的操作列中，您还可以执行如下操作： ：预览该版本页面。 ：编辑该版本页面。 ：删除该版本页面。当前版本页面设置为发布页后，不支持删除。 关闭页面发布设置，返回设计页面，拖入其他组件，如折线图组件，保存页面。 图4 拖入其他组件 单击页面上方的，单击“+新建版本”，会生成第二个版本。 生成的第二个版本会显示在上方，由于发布页设置的是第一个版本的页面，这时用户通过发布后的链接访问页面，页面仍是第一个版本，不会看到第二个版本新建的折线图组件。 图5 新建第二个版本

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图5 散点图图形 颜色：设置图表中图形的颜色。 统一配置 标记图形：设置标记的图形，如圆形、矩形、三角形等。 数据标签：是否显示数据标签，支持设置标签颜色。 数据标签最大值/最小值/平均值：设置数据标签的最大值、最小值或平均值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 标记图形：设置标记的图形样式，如圆形、矩形、三角形等。 标记大小：设置标记的大小。 颜色设置：设置标记颜色样式，支持纯色、线性渐变和径向渐变。 颜色：设置标记的颜色。 边框颜色：设置标记边框颜色。 图形透明度：散点图散点的透明度，取值0~1。 数据标签：显示散点对应的数值标签。 图表标注和标线最大值：显示散点数据的最大值。 图表标注和标线最小值：显示散点数据的最小值。 图表标注和标线平均值：显示散点数据的平均值。

坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图9 散点图坐标轴 x轴 X轴：是否显示X轴。 X轴坐标轴类型：设置X轴坐标轴类型，支持连续数据、类目轴和时间轴。 坐标轴分割段数：设置X轴坐标轴段数。 最大值：X轴线标签数据的最大值。 最小值：X轴线标签数据的最小值。 坐标轴名称：设置X轴坐标轴显示名称。 坐标轴名称字体：坐标轴字体、颜色、大小设置。 刻度标签旋转的角度：设置刻度标签旋转的角度。 轴线显示：是否显示轴线。 刻度显示：是否显示刻度线。设置为显示时，支持设置线的颜色。 刻度标签字体：设置标签的字体、颜色和大小。 网格线是否显示：是否显示网格线。设置为显示时，支持设置线的类型和颜色。 y轴 Y轴：是否显示Y轴。 Y轴坐标轴类型：设置Y轴坐标轴类型，支持连续数据、类目轴和时间轴。 最大值：Y轴线标签数据的最大值。 最小值：Y轴线标签数据的最小值。 坐标轴名称：设置X轴坐标轴显示名称。 坐标轴名称字体：坐标轴字体、颜色、大小设置。 轴线显示：是否显示轴线。 刻度显示：是否显示刻度线。设置为显示时，支持设置线的颜色。 刻度标签字体：设置标签的字体、颜色和大小。 网格线是否显示：是否显示网格线。设置为显示时，支持设置线的类型和颜色。

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

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

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

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

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图5 气泡图图形 颜色：设置表单中，图形的颜色。 统一配置 标记图形：设置标记的图形，如圆形、矩形、三角形等。 数据标签：是否显示数据标签，支持设置标签颜色。 数据标签最大值/最小值/平均值：设置数据标签的最大值、最小值或平均值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 标记图形：设置标记的图形样式，如圆形、矩形、三角形等。 颜色设置：设置标记颜色样式，支持纯色、线性渐变和径向渐变。 颜色：设置标记的颜色。 边框颜色：设置标记边框颜色。 阴影颜色：设置标记阴影颜色。 阴影大小：设置标记阴影大小。 水平方向偏移距离：气泡图中气泡在水平方向上的偏移位置。 垂直方向偏移距离：气泡图中气泡在垂直方向上的偏移位置。 图形透明度：气泡图中气泡的透明度。 数据标签：显示气泡图对应的数值标签。 图表标注和标线最大值：显示对应数据系列数据的最大值。 图表标注和标线最小值：显示对应数据系列数据的最小值。 图表标注和标线平均值：显示对应数据系列数据的平均值。

坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图9 气泡图坐标轴 X轴 X轴：是否显示X轴。 X轴坐标轴类型：设置X轴坐标轴类型，支持连续数据、类目轴和时间轴。 坐标轴分割段数：设置X轴坐标轴段数。 最大值：X轴标签能显示的最大值。 最小值：X轴标签能显示的最小值。 坐标轴名称：设置X轴坐标轴显示名称。 坐标轴名称字体：坐标轴字体、颜色、大小等设置。 刻度标签旋转的角度：设置刻度标签旋转的角度。 轴线显示：是否显示轴线。 刻度显示：是否显示刻度线。设置为显示时，支持设置线的颜色。 刻度标签字体：设置标签的字体、颜色和大小等。 网格线是否显示：是否显示网格线。设置为显示时，支持设置线的类型和颜色。 Y轴 Y轴：是否显示Y轴。 Y轴坐标轴类型：设置Y轴坐标轴类型，支持连续数据、类目轴和时间轴。 最大值：Y轴能显示的最大值。 最小值：Y轴能显示的最小值。 坐标轴名称：设置X轴坐标轴显示名称。 坐标轴名称字体：坐标轴字体、颜色、大小设置。 轴线显示：是否显示轴线。 刻度显示：是否显示刻度线。设置为显示时，支持设置线的颜色。 刻度标签字体：设置标签的字体、颜色和大小。 网格线是否显示：是否显示网格线。设置为显示时，支持设置线的类型和颜色。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图8 高级表格图形 统一配置 图标选中色：设置选中后台排序、后台筛选时，图标的显示颜色。 图9 选中后图标颜色 列自适应：开启后，表格中的列会根据内容自适应。 固定列：设置首列和尾列的样式。当开启“列自适应”后，不支持设置固定列样式。 后台排序：是否开启后台排序功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行排序。后台排序的使用示例，请参见如何使用高级表格的后台排序功能。 图10 在后台对数据进行排序 后台筛选：是否开启后台筛选功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行筛选。后台筛选的使用示例，请参见如何使用高级表格的后台筛选功能。 图11 在后台对数据进行筛选 数据系列：数据系列是一个数组，通常包含多个系列，即通过一个或多个系列配置循环渲染。 图12 数据系列 在数据系列中，拖动某一个系列可以和其他系列组成一个层级，最多支持3层。 图13 新建层级 原数据名：原始数据中默认的系列名称，可通过设置“列名”，进行修改。文字内容来源于数据模型的取值，如名称、门禁结果等。 类型：选择数据的类型，可选单行文本、多行文本、数字、趋势、图片、迷你柱状图、迷你折线图和迷你进度条。不同的类型，展示的参数所有不同，请以界面实际显示的为准。选择迷你柱状图和迷你折线图时，支持放大图表显示。 图14 开启迷你柱状图放大图表功能 图15 预览放大效果 列名：自定义图表中数据系列的显示名称。 数据系列：在图表中，是否显示数据系列。例如，名称系列中，单击开启，图表中将会显示名称这列，如果关闭，将会隐藏掉该列。 合并同类：开启后，对每列内连续且相同内容的单元格进行合并。 后台排序：是否开启后台排序功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行排序。 图16 开启后台排序 后台筛选：是否开启后台筛选功能。开启后，在预览表格时会显示下图中的图标，用于对表格中的数据进行筛选。 图17 开启后台筛选 列宽占比(%)：设置对应系列在图表中的占比。 表头对齐方式：设置表头的对齐方式，如居中、左对齐等。 表头背景色：设置表头的背景颜色。 表头字体：设置表头的字体、颜色和大小等。 内容对齐方式：设置表格内容的对齐方式，如居中、左对齐等。 内容字体：设置表格内容的字体、颜色和大小等。

配置 在配置中，设置组件的全局样式、表头设置、行、序列号等。 图6 高级表格配置 全局样式 背景色：设置表格的背景颜色。 表格行数：设置当前表格可视高度展示的数据行数。 边框：设置表格的边框样式。 表头设置 溢出文本：设置表格中超长文本的显示样式，如显示为省略号和换行显示。 表头对齐方式：设置表头的对齐方式，如左对齐、居中或右对齐。所有列的表头对齐方式同步修改。 表头行高占比(%)：设置表头行高的占比。 表头背景色：设置表头的背景颜色，所有列的表头背景色同步修改。 表头字体：设置表头字体，所有列的表头字体同步修改。 边框：设置表头的边框样式。 行配置 奇行背景色：设置奇数行数据的背景颜色。 偶行背景色：设置偶数行数据的背景颜色。 单元格 溢出文本：设置表格中超长文本的显示样式，如显示为省略号、换行显示和滚动显示。 内容对齐方式：设置单元格内的内容对齐方式，如左对齐、居中或右对齐，所有列的内容对齐方式同步修改。 内容字体：设置单元格的内容字体，所有列的内容字体同步修改。 边框：设置单元格的边框样式。 序列号：表格中序列号设置。 序列号：设置表格中是否显示序列号，默认为关闭。 序列名：设置序列号的名称。 列宽占比：设置序列号在表格中的列宽占比。 背景色：设置序列号的背景颜色。 半径：设置序列号的半径。 圆角：设置序列号圆角，0为直角。 字体：设置序列号的字体、大小和颜色等。 轮播 轮播：是否开启轮播功能。开启后，支持设置轮播速度。 轮播速度：设置轮播速度。 分页 后台分页：数据接入有行数上限（当前为500行），超出行数后原来的方式无法动态获取所有的数据，此时可以使用后台分页功能，将表格分页显示。后台分页使用示例，请参见如何使用高级表格的后台分页功能。 行高：设置分页的行高，单位px。 单页数量：设置每页显示数据条数，以“,”隔开。 文本位置：设置分页文本显示位置，支持靠左、靠右和居中显示。 背景色：设置分页背景颜色。 字体：设置分页的字体、大小和颜色等。 选中框颜色：设置选中分页时边框的颜色，包括每页/条的边框、选中当前页的填充色边框和前往第几页的边框。 分页框宽度：设置分页框的宽度，单位为px。 下拉框背景颜色：设置下拉框的背景颜色。 下拉框字体颜色：设置下拉框的字体颜色。 下拉框选中态背景颜色：设置下拉框选中态的背景颜色。 下拉框选中态字体颜色：设置下拉框选中态的字体颜色。 下拉框鼠标悬浮时背景颜色：设置下拉框鼠标悬浮时的背景颜色。 下拉框鼠标悬浮时字体颜色：设置下拉框鼠标悬浮时的字体颜色。 新增条件格式：单击“新增条件格式”，可增加条件格式。如图7中所示，该设置表示版本问题数列满足设置的条件（大于2200）时，门禁结果列显示为红色，否则显示为正常颜色。 高级表格的条件格式，只有在关联关系以及响应数据列是单行文本和数字类型时才会生效。 图7 新增条件格式

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 高级表格卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右，如图2）的距离，默认为0，即铺满整个组件。 标题设置 标题：是否显示组件标题。 标题内容：输入标题内容。 标题行高度：设置标题的行高，单位px。 背景色：设置标题背景色。 文本位置：设置标题中文本位置，支持居中、靠左、靠右或自定义。 字体：设置标题的字体、大小和颜色等。 表格操作 列显示/隐藏：在运行态是否可以设置显示/隐藏的列。开启“列显示/隐藏”后，可以设置“悬浮显示”、“图标色”和“图标选中色”。 图4 列显示效果 表格导出：是否开启表格导出功能。开启表格导出后，可以设置“悬浮显示”、“图标色”和“图标选中色”。 图5 导出开启效果 悬浮显示：开启后，鼠标移动到表格组件上时，才会显示对应的按钮。 图标色：设置按钮的图标颜色。 图标选中色：设置选中按钮时，按钮图标的颜色。

新建Prometheus数据源 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“数据中心”。 在左侧导航栏中，选择“数据源”。 在数据源管理页面，单击“新建数据源”。 选择“Prometheus”，配置数据源参数。 图1 新建Prometheus数据源 数据源名称：数据源的名称，用于标识该数据源。长度为1~32个字符，可包括中文、字母、数字及下划线，且不能以下划线开头或结尾。 服务地址：返回Prometheus数据的接口所在服务地址的URL。输入的URL地址中，支持包含变量，例如“https:example.{region}.com”。地址中的变量，在使用数据源时，支持修改，如图3。 图2 服务地址包含变量 图3 更改变量 接口鉴权方式：设置接口的鉴权方式，支持无身份认证和基本身份认证（用户名/密码）两种。 无身份认证：不需要任何验证信息，直接调用的接口，通常用于访问一些公开的接口。 基本身份认证（用户名/密码）：通过输入用户名和密码，来进行用户身份验证。 用户名：“基本身份认证”鉴权中的用户名部分。“接口鉴权方式”设置为“基本身份认证（用户名/密码）”时，才显示该参数。 密码：“基本身份认证”鉴权中的密码部分。“接口鉴权方式”设置为“基本身份认证（用户名/密码）”时，才显示该参数。 描述：新建数据源的描述信息，长度不能超过128个字符。 单击“连接测试”，显示“连接成功”，表示数据源可以调通。 单击“保存”，完成数据源的创建。

配置 在配置中，为图观端场景编辑器设置容器名称和场景地址。 图2 图观端场景编辑器配置 容器名称：设置容器的名称，命名必须唯一。名称是组件的唯一标识，设置后其他3D组件会通过这个标识，识别到这个容器，并在容器上进行渲染。 场景地址：设置渲染的3D场景地址。 选择场景：单击“选择场景”，可以在“场景”中新建场景或选择已有场景，也可以从“案例库”中选择场景。 输入场景URL：直接输入图观的二次开发场景地址。

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

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

配置 在配置中，设置翻牌器组件的样式和动画。 图4 翻牌器配置 样式设置 字体：设置翻牌器字体、大小和颜色等。 数字背景：翻牌器中数字是否显示背景。“动画类型”设置为“翻牌类型”时，不支持隐藏背景。 数字背景颜色：设置翻牌器中数字的背景颜色。“数字背景”设置为“显示”时，才会显示该参数。 数字间隔：设置翻牌器数字之间的距离，单位为px。 卡片内边距：设置翻牌器数字与组件卡片之间的边距。 千分逗号：数字是否显示千分逗号，默认为“显示”。 标题：翻牌器标题是否显示，默认为“隐藏”。 标题内容：设置标题的内容。“标题”设置为“显示”时，才显示该参数。 标题对齐方式：设置标题的对齐方式，支持左对齐、居中和右对齐。“标题”设置为“显示”时，才显示该参数。 标题字体：设置标题的字体、大小和颜色。“标题”设置为“显示”时，才显示该参数。 单位：是否显示单位，默认为“隐藏”。 单位内容：设置单位的内容。“单位”设置为“显示”时，才会显示该参数。 单位字体：设置单位的字体、大小和颜色。“单位”设置为“显示”时，才会显示该参数。 动画设置 动画类型：设置翻牌器动画类型，支持普通类型、滚动类型和翻牌类型。 动画时间：设置动画时间，取值范围为[200, 100000]，单位为ms。 单次变换间隔：设置动画单次变换间隔时间，取值范围为[50, 1000]，单位为ms。

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

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

轮播配置 在轮播配置中，设置轮播页面的切换配置、自动播放和分页配置等。 图4 轮播页面轮播配置 轮播设置 页面：添加轮播的页面，可以选择本项目内的页面，也可以选择外部页面，但添加的页面数不能超过10个。 图5 选择本项目内的页面 图6 选择外部页面 滚动条：是否显示滚动条，如自动或隐藏。 切换配置 切换箭头：是否显示页面切换箭头。 切换方向：设置页面切换方向，如水平、垂直。 切换方式：设置页面切换方式，如淡出、推出、展示等。 自动播放 自动轮播：设置轮播方式，支持手动和自动。 间隔时间：设置轮播的间隔时间，不大于24秒。 分页配置 分页标志：是否显示分页标志。 标志选择：选择分页标志样式，如点、线等。

组件使用静态数据 AstroCanvas通过调用组件定义的getMockData，来获取默认静态数据。 getMockData() { const seviceWaterLevel = this.$t('setting.seviceWaterLevel'); const seviceLoad = this.$t('setting.seviceLoad'); return [ { x: '00:00', y: 11.69, s: seviceWaterLevel, }, { x: '02:30', y: 17.46, s: seviceWaterLevel, }, { x: '05:00', y: 28.57, s: seviceWaterLevel, }, { x: '07:30', y: 12.7, s: seviceWaterLevel, }, { x: '10:00', y: 18.99, s: seviceWaterLevel, }, { x: '12:30', y: 3.7, s: seviceWaterLevel, }, { x: '15:00', y: 18.52, s: seviceWaterLevel, }, { x: '17:30', y: 23.81, s: seviceWaterLevel, }, { x: '20:00', y: 10.58, s: seviceWaterLevel, }, { x: '22:30', y: 15.82, s: seviceWaterLevel, }, { x: '24:00', y: 3.76, s: seviceWaterLevel, }, { x: '00:00', y: 5.69, s: seviceLoad, }, { x: '02:30', y: 12.46, s: seviceLoad, }, { x: '05:00', y: 18.57, s: seviceLoad, }, { x: '07:30', y: 25.7, s: seviceLoad, }, { x: '10:00', y: 13.99, s: seviceLoad, }, { x: '12:30', y: 9.7, s: seviceLoad, }, { x: '15:00', y: 20.52, s: seviceLoad, }, { x: '17:30', y: 28.81, s: seviceLoad, }, { x: '20:00', y: 15.58, s: seviceLoad, }, { x: '22:30', y: 19.82, s: seviceLoad, }, { x: '24:00', y: 9.76, s: seviceLoad, }, ]; }, 配置数据数据时，下图中的“静态数据”选项即为静态数据，支持直接在线编辑静态数据。 图3 静态数据