图表通用配置


图表是 DTV 中最重要的部分。它们是功能强大的可视化工具,可用于以很多不同的方式展示数据。

每个图表的配置面板中包含一部分通用的配置项,你可以在本文了解这些通用配置项。有关每个图表特殊的配置项,可查看对应图表的文档页面。


备注

DTV 图表配置面板正在持续升级中,对于通用配置以及已升级的图表,文档默认按新版界面说明。对于未升级图表,文档仍沿用旧版说明。已升级的图表列表,参见 图表新版配置说明。

配置数据


配置图表,第一步是配置图表中的数据。按照以下步骤为图表配置数据源:


../_images/overview_14.png

前提条件


新增图表默认使用的是演示数据,如需自定义数据,点击 选择真实数据源,按下列步骤更新数据项。

步骤 1:选择数据源


在 数据源 中,你需要为图表指定 1 个数据源,作为图表获取数据的来源通道。DTV 支持的数据源类型及其使用说明,参见 数据源概述。

../_images/overview_15.png

步骤 2:选择类别


在 类别 中,你需要为图表进一步限定数据的请求结构和返回参数。更多信息,参见 数据源的类别。

  • 默认类别:选择 模型管理 等默认类别,将使用数据源默认的数据结构。图表请求数据时,需提供数据源 默认的请求参数。图表中可以展示与模型关联的属性、指标和测点。

  • 数据集:当默认类别无法满足需求时,可创建数据集,自定义请求参数和返回结构。用户在配置图表时,可以指定请求参数的值,并指定返回哪些数据项。

../_images/data_category.png

步骤 3:(可选)配置数据源参数


当已选数据源中定义了 请求参数,可为数据源参数指定参数值,进一步定义数据的请求方式、时间范围等。

  1. 在 维度聚合 下方,选择 展开参数。

  2. 根据以下说明,配置所需参数的值。


../_images/data_2.png

步骤 4:添加数据项


数据项是数据源提供的返回参数,在图表中,你可以定义图表需要展示哪些返回参数,以及展示的形式等。

  1. 依次选择 维度、对比、指标、扩展 的 添加数据项,将 1 个或多个数据项添加到指定的位置。有关维度、对比、指标和扩展的关系,参见 数据源概述。

  2. 若数据项不满足要求,可在 添加数据项 弹窗中选择 + 添加计算字段,将已有数据项进行简单运算,构成 1 个新数据项。有关计算字段的说明,参见 计算字段。

  3. 添加后,数据项将列在面板中。


../_images/overview_16.png


备注

如果更改 类别,已配置的数据项将失效,但不会被自动清除。可将鼠标悬浮在已选数据项名称上,替换 当前数据项,以保留图表样式。或选择数据项对应的 ×,移除 当前数据项,从头开始重新配置图表样式。

扩展字段的适用范围


扩展 字段与维度、指标不同,它不会直接生成图表元素(扇形、柱形、行等),而需要图表在 样式 中提供对应的配置项来引用它。因此扩展字段是否生效,取决于具体图表。


当前会使用扩展字段的图表如下:

图表

扩展字段的用途

多指标卡

通过 描述 将扩展字段的数值展示在指标数值下方;通过 占比总值 指定计算占比时的总值。

指标卡

通过 占比总值 指定计算占比时的总值。

饼图

通过 展示扩展字段 替换中心总和或图例中的数值,参见 饼图。

条形图

通过 悬浮显示数据 在提示框中替代指标数值显示,参见 条形图。

表格

作为 子表格 的数据来源。扩展字段不会在主表格中生成列,参见 表格。

进度条

通过 匹配字段 决定图标的显示条件;通过 进度条名称 指定左侧标签的名称(需已添加对比字段)。

堆叠进度条

通过 汇总名称 指定汇总项的名称(仅 标题布局 为底部时生效)。

柱状图、折线图、散点图等

作为 标面 匹配数据的来源,以及气泡系列的气泡大小来源。这些图表不会在提示框中展示扩展字段。

时间线

在 额外展示字段 中勾选后,展示在提示框、表格视图和导出文件中。


备注

未列入上表的图表,其配置面板同样会显示 扩展 数据项入口,但它们没有引用扩展字段的配置项,添加后不会对图表产生任何效果。

步骤 5:(可选)其它配置


你可以继续配置数据值的聚合方式、展示顺序等。

聚合展示数值


维度聚合 支持通过不同视角来聚合图表中展示的数据。当你为图表配置了 对比 或 维度 数据项时,可以聚合具有相同维度/对比数值的指标数值。

../_images/overview_12.png


例如,选择了 维度 为 localtime,有多个指标值的 localtime 为 2022-12,在不聚合的情况下,默认按维度升序排列,图表中展示最后一条指标数据。

../_images/overview_11.png

配置了 维度聚合 后,维度同为 2022-12 的指标值将聚合展示,默认按 求和 方式聚合,按维度值升序排列,图表中展示最后一条数据。

../_images/overview_21.png


又如,选择了 对比 为 localtime,有多个指标值的 localtime 为 2022-12,在不聚合的情况下,默认按对比升序排列,图表中展示每个对比数值对应的最后一条指标数据。

../_images/overview_4.png

聚合后,对比项同为 2022-12 的指标值将聚合展示,默认按 求和 方式聚合,按对比值升序排列,图表中展示最后一条数据。


如有需要,可以选择数据项对应的 求和,切换其它聚合方式。

../_images/overview_3.png


DTV 支持使用以下函数进行聚合:

函数

说明

求和

展示指标值的未加权总和。

平均

展示指标值的平均值。

去空平均

展示非空指标值的平均值。例如,如果有 10 个值,其中 6 个是非空值,则真值平均将返回 6 个非空值的平均值(而平均函数将返回所有 10 个值的平均值)。

最大

展示返回数据中,该指标的最大值。

最小

展示返回数据中,该指标的最小值。

最前

展示第 1 个指标值。

最后

展示最后一个指标值。

计数

展示指标在维度下的数据条数。

去重计数

展示指标在维度下的去重数据条数。

对数值排序


当一个数据项展示了多个数值时,可对各项数值进行升序或降序排列。默认为升序。

当多个类别都设置了排序顺序时,排序的优先级为 对比 > 维度 > 指标 > 扩展:先按优先级最高的类别排序;该类别的数值相同时,再依次按后续类别的排序顺序排列。

  • 如果同一类别下有多个数据项,则添加的第 1 个数据项将优先排序。

  • 未设置排序顺序的数据项不参与排序,优先级顺延给下一个设置了排序顺序的数据项。


../_images/metric_card_11.gif

对数据项排序


对于多个数据项,可通过拖拽调整数据项之间的展示顺序。


../_images/metric_card_10.gif

别名


添加数据项后,图表中默认以数据项的名称作为展示名称。你可以通过 别名 自定义展示名称。


../_images/metric_card_37.png


在部分图表中,如果不需要展示名称,可将 字段名称 修改为 无名称。


../_images/metric_card_36.png

单位


单位展示在指标的数值旁边。默认情况下,图表中展示数据项自带的单位。如果数据项没有默认单位,或你需要自定义其它单位,可在数据项的设置中配置 单位。


各图表在数据项中提供的单位设置详略不同:指标卡、多指标卡、饼图、多指标饼图、3D 饼图、多指标 3D 饼图和堆叠进度条提供完整的单位设置,参见下文 按数据项配置单位。


../_images/metric_card_41.png

按数据项配置单位


以下图表已将单位配置迁移至 数据 标签页,在单个数据项的设置中配置:指标卡、饼图、3D 饼图、堆叠进度条。


  • 单位:选择 单位库 时从 DTV 单位库 中选择标准单位;选择 自定义 时手动输入单位名称。自定义的单位不参与单位换算。

  • 单位显示方式:

    • 显示数据单位:展示数据项自带的单位。

    • 显示指定单位:固定展示所指定的单位,选择该方式后显示 显示单位 配置项。

    • 随数据变化显示单位:按数据量级自动换算为简便写法,选择该方式后显示 最小单位 配置项,用于限定换算的下限。

  • 指定为全局单位:将该数据项的单位作为整个组件的单位。仅 多指标饼图 和 堆叠进度条 提供该配置项,且不适用于 扩展 数据项。

配置样式


在 样式 标签页中为图表配置样式。

快捷样式切换


已升级为新版配置面板的图表,在 样式 标签页顶部提供 快捷样式切换,以缩略图列出与当前图表相近的几种预设样式。选择一张缩略图并 应用 后,图表切换为该预设,切换时会最大程度保留已有配置,仅改变样式。

可切换的范围限定在同一组预设内,例如柱状图可在基础柱状图、柱状目标图、堆叠柱状图之间切换。各图表可切换的预设,参见对应图表的文档。


备注

未升级新版配置面板的图表不提供该功能。已升级的图表列表,参见 图表新版配置说明。

标题


在图表配置的 基本 标签页中,配置图表标题的内容、布局和样式。


../_images/overview_17.png

标题内容


设置标题的内容。点击右侧的眼睛图标,可控制标题的显示或隐藏。标题支持两种取值方式:

  • 静态值:直接输入固定的标题文字。

  • 动态值:应用开发人员可使用全局参数、组件变量和组件数据,将图表标题设为随上下文变化的动态值。支持以下占位符:

    • 导航器参数:${parameter_key}。当终端用户更改导航器或全局筛选条件时,标题将显示当前筛选值。

    • 组件变量:@{parameter_key}。标题将显示组件变量的当前值。

    • 组件数据:#{field_ID}。标题将显示图表中数据项的实际值。

    例如,输入 ${mdmId} 后,标题将展示当前选择的 mdmId 值。

备注

终端用户导出图表数据时,系统会自动将图表标题及导出内容中的变量解析为当前筛选值或实际数据值,生成业务语义明确的数据文件。

标题布局


设置标题文字和图标的对齐方式。选择 切换 可在不同布局之间切换。

  • 居左:标题文字:默认项。

  • 居左:图标+标题文字:可单独定义 图标 类型和 图标样式,包括内置样式和上传自定义图片。

  • 居左:标题文字+图标:可单独定义 图标 类型和 图标样式,包括内置样式和上传自定义图片。

标题字体


设置标题文字的字体、字号和颜色,并可设置加粗(B)、斜体(I)和下划线(U)样式。

标题内边距


设置标题文字与标题栏左侧的距离,单位为 px。

标题栏高度


设置标题栏的高度。

  • 跟随页面:标题栏高度与页面设置保持一致。

  • 自定义:手动输入标题栏的高度值。

标题栏背景


设置标题栏的背景。

  • 跟随页面:背景与页面设置保持一致。

  • 自动:使用系统默认的背景。

  • 颜色:自定义背景的颜色。

  • 自定义:上传图片作为背景。上传图片后,可进一步设置图片的展示方式:

    • 默认:按图片原始尺寸展示。

    • 拉伸:将图片拉伸至铺满标题栏。

    • 自适应:保持图片比例,自适应标题栏大小。

组件

组件尺寸


组件尺寸是由网格的数量决定的。通过拖拽或直接编辑数值,来更新组件的尺寸。什么是网格 >>


../_images/metric_card_26.gif

组件内边距


设置组件内容区域与组件边界之间的上、下、左、右间距,单位为 px。调整内边距不会改变组件尺寸;当内容与边界距离过近或需要为装饰元素预留空间时,可分别增大对应方向的间距。

圆角


分别设置组件四角的圆角半径,包含 左上、右上、左下 和 右下,单位为 px,默认均为 8 px。

组件装饰


为组件增加一条装饰线,起到视觉分隔的作用。下拉列表可选 无(默认)、上装饰线 或 下装饰线,右侧的 颜色 设置装饰线的颜色。

组件背景


设置组件内容区域的背景,可选以下 3 种方式:

  • 自动:使用当前主题的默认背景。选择该项时,效果 和 阴影样式 不显示。

  • 颜色:默认项。在右侧的颜色选择器中指定背景颜色,支持纯色和渐变色。

  • 自定义:选择图片作为背景。选择该项后显示 背景图样式,可选 默认(按图片原始尺寸展示)、拉伸(默认项,拉伸至铺满组件)、适应(保持比例自适应)或 适应居中(保持比例自适应并居中)。

效果


设置组件背景的视觉效果,可选 阴影效果(默认)、毛玻璃 或 无效果。选择 阴影效果 时,右侧可设置阴影的 颜色。组件背景 为 自动 时不显示该配置项。

阴影样式


仅当 效果 为 阴影效果 时显示,分别设置阴影的 X偏移、Y偏移、模糊 和 扩展,单位为 px,默认依次为 0、0、20 和 0。

系列、坐标轴、图例和标记的适用范围


下面的 系列、坐标轴、图例、标记 四个区块由 柱状图、折线图、散点图 三个分组下的以下预设提供,这些预设共用同一个组件和同一套配置面板:

  • 柱状图 分组:基础柱状图、柱状目标图、堆叠柱状图、箱线图

  • 折线图 分组:基础折线图、基础点线图、基础面积图

  • 散点图 分组:基础散点图、气泡图


备注

  • 瀑布图 虽然位于 柱状图 分组下,但它是独立组件,四个区块都不提供,参见 瀑布图。

  • 表格 也有一个名为 系列 的区块,饼图 和 多指标饼图 也有名为 标记 的区块,但它们与本文所述的同名区块含义完全不同,参见 表格 和 饼图。

系列


以下配置项位于 系列 区块中。除 系列 列表内的项目按单个系列生效外,其余项目作用于整个图表。

布局


设置图表的绘制方向。

  • 纵向:维度轴水平排列,图形从左向右延伸,这是最常见的方向。

  • 横向:维度轴竖向排列,图形从上向下延伸,适合维度标签较长或需要横向比较的场景。

切换布局后,轴样式配置面板中的”显示 X 轴”/”显示 Y 轴”标签也会随之互换,以反映实际坐标方向。

展示千分位


当数值过大时,可以勾选 展示千分位,图表中的数值将展示千分位分隔符,例如“722550”转换为“722,550”,便于阅读量级较大的数字。

最大数据条数


限制图表一次最多渲染的维度数量。当数据量过大时,可通过此配置项裁剪数据,防止浏览器因渲染过多数据点而出现卡顿。

按数据返回的先后顺序保留最先出现的 N 个维度值,并完整保留这些维度值对应的所有数据;其余维度的数据被丢弃。因此该配置项需要图表已添加 维度 才生效。

添加系列


一个系列将一个指标与一种图表类型和视觉样式绑定。点击 + 添加 打开 添加系列 对话框,填写以下两项后创建系列:

  • 名称:系列的显示名称,用作图例文字,支持配置多语言。

  • 类型:系列的图表类型,可选 箱线图、散点图、柱状、点线、面积、线型、目标 或 气泡。

编辑系列


创建后,列表中的每一项按“类型:系列名称”的形式显示,例如 柱状:发电量。点击 编辑 图标可重新修改名称和类型,点击 × 可删除系列。

展开系列面板可配置该类型适用的其余项目,面板仅显示所选类型适用的配置项。以下是通用配置项:

  • 数据项:选择该系列绑定的指标字段,默认为空。箱线图 类型没有这一项,改为用 最大值、最小值、中位数、最大 1/4 值、最小 1/4 值 五个下拉分别绑定指标字段。

  • 颜色:设置柱形、线形、点等图形的颜色,支持纯色和渐变色。箱线图 类型的对应配置项名为 箱体背景色。

  • 小数位数:设置该系列数值在图表中显示的小数位数,支持 0 到 3 位,默认 2 位,不影响源数据。

  • 匹配副 Y 轴:勾选后,该系列的数据映射到副 Y 轴,适合在量级差异较大的指标之间比较。副 Y 轴的显示与样式在 坐标轴 区块中配置。默认不勾选。

  • 标记预测数据:勾选后,时间戳晚于当前时间的数据点以特殊样式显示,便于区分历史数据与预测数据。默认不勾选。

  • 对比:默认已勾选。勾选后,该系列按 数据 页中配置的对比字段自动拆分为多个系列,每个对比值对应一组柱形。未配置对比字段时,勾选与否不影响展示。

  • 对比色板:勾选 对比 后显示,默认 渐变色板(按梯度自动分配颜色),另可选 纯色色板(每组使用纯色)或 自定义色板。

  • 颜色 JSON:对比色板 选 自定义色板 后显示,用于按对比值指定颜色。参见 颜色 JSON。


其余配置项由所选 类型 决定,参见各图表文档:

系列类型

类型专属配置项

柱状

圆角

线型

线型(含线型、线宽、平滑)

面积

面积颜色、线型

点线

线型、点(含形状、尺寸)

散点图

散点尺寸

目标

目标高度

气泡

取值字段、气泡尺寸

箱线图

最大值、最小值、中位数、最大1/4值、最小1/4值、箱体背景色、边线

颜色 JSON


颜色 JSON 是一个多行文本框,以 JSON 格式精细控制各区域的颜色。配置格式为二维数组,每个内层数组包含 2 个 RGBA 颜色值,分别表示该区域渐变的起始色和结束色。

该文本框默认为空,此时图表使用内置调色板。配置项的提示浮层中给出了下面这段示例,可点击 复制全部 复制后粘贴修改:

[
  ["rgba(220, 87, 255, 1)", "rgba(255, 152, 224, 1)"],
  ["rgba(17, 186, 101, 1)", "rgba(187, 243, 74, 1)"],
  ["rgba(57, 40, 250, 1)", "rgba(142, 133, 255, 1)"],
  ["rgba(245, 10, 34, 1)", "rgba(245, 69, 192, 1)"],
  ["rgba(10, 100, 255, 1)", "rgba(71, 255, 237, 1)"],
  ["rgba(132, 39, 245, 1)", "rgba(245, 98, 218, 1)"],
  ["rgba(0, 133, 128, 1)", "rgba(46, 236, 172, 1)"],
  ["rgba(255, 170, 0, 1)", "rgba(255, 230, 92, 1)"],
  ["rgba(255, 88, 2, 1)", "rgba(255, 213, 0, 1)"],
  ["rgba(0, 115, 133, 1)", "rgba(46, 236, 232, 1)"],
  ["rgba(243, 56, 10, 1)", "rgba(255, 129, 19, 1)"],
  ["rgba(10, 175, 229, 1)", "rgba(133, 228, 255, 1)"]
]

每个颜色对应图表中的一个区块或柱形。RGBA 格式中,前三个数值表示红、绿、蓝通道(0–255),第四个数值表示透明度(0–1)。颜色数组中的条目按顺序依次对应各区块;条目数量少于区块数量时,多余的区块循环使用颜色。

条形间距


设置相邻条形之间的间距,单位为百分比,默认 75%。数值越大,条形越细、间隙越宽。

仅在至少一个系列的 类型 为 柱状 时显示。

最大柱状宽度


限制 X 轴每一列的宽度,单位为 px。数据条数较少时,可避免柱形在宽组件中显示过宽。

该配置项恒定显示,即使图表中没有 柱状 类型的系列。

堆叠柱状图


勾选后,多个柱状系列按分类堆叠在同一根柱形上,适合同时展示总量和构成。默认不勾选。

仅在至少一个系列的 类型 为 柱状 时显示。

坐标轴


坐标轴 区块顶部提供三条轴的显示开关和整体留白设置,下方按 X 轴、Y 轴 和 副 Y 轴 分别展开。三条轴共有一批同名同义的配置项,参见 轴的通用配置项;随 标签字段类型 变化的部分参见 标签字段类型配置项。

哪条轴承载分类、哪条轴承载指标由 系列 区块中的 布局 决定:纵向布局下 X 轴为分类轴、Y 轴为指标轴,横向布局下两者互换。三条轴的配置项并不完全一致,只出现在部分轴上的项目已在下文逐项标注。


备注

热力图 和 帕累托图 也提供 坐标轴 区块,但配置项是本节内容的子集,并各有专属项目,参见 热力图 和 帕累托图。条形图 和 瀑布图 的 轴样式 是另一套配置项,名称也不一致,不适用本节内容,参见 条形图 和 瀑布图。

轴的显示和留白


  • 显示 X 轴、显示 Y 轴、显示副 Y 轴:分别控制三条轴的显示。取消勾选后,该轴对应的样式区块随之隐藏。副 Y 轴仅在至少一个系列勾选了 匹配副 Y 轴 时才有实际意义。

  • 固定坐标轴留白:默认不勾选,由系统自动为标签预留空间。勾选后才显示 顶部偏移、底部偏移、左侧偏移 和 右侧偏移 四项(单位为 px),用于避免标签被裁切或图表过于贴近边缘。

轴的通用配置项


以下配置项在 X 轴、Y 轴和副 Y 轴中含义相同。

轴名称


  • 名称:轴的名称或单位,显示在轴旁边,例如 kWh。点击眼睛按钮 eye 可单独隐藏名称,点击地球图标可配置多语言。隐藏名称后,对应的字体配置项不再显示。

  • 名称轴线间距:轴名称与轴线之间的距离。勾选 自动 时由系统计算,取消勾选后可手动输入数值。

  • 单位字体:设置轴名称的字体、字号、颜色和加粗、倾斜样式。

  • 自适应单位:勾选后,数值按量级自动转换为简便写法,例如 22000 吨 显示为 2.2 万吨。DTV 的单位库及其自适应逻辑,参见 DTV 单位库。

标签设置


  • 标签字段类型:决定该轴的标签按哪种字段类型解析,可选 值、类别 或 时间。选择后,面板只显示该类型适用的格式配置项,切换类型会重置已配置的格式。分类轴默认为 类别,指标轴默认为 值。

  • 倾斜角度:以度为单位旋转刻度标签的文字方向,默认 0(水平)。正值为逆时针旋转,负值为顺时针旋转,绝对值越接近 90,标签越接近竖排;有效区间为 -90 到 90。该项只旋转刻度标签,不影响轴名称。标签较长时,可通过倾斜避免相邻标签相互遮挡。

    旋转后的标签外接框变高(横向轴)或变宽(纵向轴),系统会自动为标签预留更多空间,绘图区相应被压缩。倾斜角度越大,预留的空间越多。如需自行控制这部分留白,可勾选 固定坐标轴留白 手动指定各方向的偏移,参见 轴的显示和留白。

  • 标签长度(仅 X 轴):限制标签显示的字符数,超出部分显示为省略号(…)。勾选 自动 时由系统根据组件宽度决定。

  • 标签字体:设置刻度标签的字体、字号、颜色和加粗、倾斜样式。

  • 标签轴线间距:刻度标签与轴线之间的距离,同样支持 自动 或手动输入。

  • 显示最大值标签(仅 X 轴):勾选后,轴上始终显示最大值处的标签,避免该标签因排布规则被省略。默认不勾选。

轴线和网格线


  • 轴线范围:默认由系统根据数据自动计算。取消勾选 默认 后,可手动指定 Min(最小值)、Max(最大值)和 Seg(分段数),便于聚焦特定数值区间或统一多个图表的轴范围。

  • 坐标轴:设置轴线的线型、粗细和颜色。点击眼睛按钮 eye 可切换显示或隐藏。

  • 网格线:设置由该轴刻度延伸出的网格线的线型、粗细和颜色。点击眼睛按钮 eye 可切换显示或隐藏。

  • 显示标尺:勾选后,轴旁出现可拖动的范围标尺,终端用户可在运行时聚焦局部数据区间。数据条数较多时尤其有用,默认不勾选。

标签字段类型配置项


选择不同的 标签字段类型 后,面板显示对应的格式配置项:

类别


分类轴的默认类型,按维度值逐一展示标签,不提供额外的格式配置项。

值


指标轴的默认类型,按数值刻度展示标签。

  • 格式:设置数值标签的显示格式,可选 auto(默认)、none、k、m 或 g。

  • 小数位数(仅 Y 轴和副 Y 轴):设置标签保留的小数位数,默认 1 位,不影响源数据。勾选 自动舍弃末尾零 后,小数末尾的 0 不显示,例如 1.0 显示为 1。该项默认勾选。

时间


按时间刻度展示标签,适用于绑定时间字段的轴。

  • 格式类型(仅 Y 轴和副 Y 轴):可选 内置 或 自定义,仅 标签字段类型 = 时间 时出现。选 内置 时,格式 为下拉选择;选 自定义 时,格式 变为输入框,可手动填写格式串。

  • 格式:设置时间标签的显示格式,例如 YYYY-MM-DD HH:mm:ss、YYYY-MM-DD、MM-DD HH:mm、HH:mm。

  • 插补方式(仅 X 轴):决定缺失的时间点如何补齐,可选 首尾插补、首端与中间插补、中间插补(默认)或 无。

  • 设置分段匹配规则(仅 X 轴):点击按钮打开对话框,配置时间刻度的分段规则。对话框中可勾选 关联全局过滤器:不勾选时,按 粒度 和 格式 逐条添加规则;勾选后,可将规则绑定到导航器参数或全局过滤器,按过滤值分别指定粒度和时间格式。

  • 窗口起始时间 / 窗口结束时间(仅 X 轴):仅在 插补方式 选 无 时可设置,用于限定时间轴展示的区间。

图例


图例 按钮组可选 无图例 或 有图例,选择 无图例 时以下配置项隐藏。图例显示的文字是各系列的 名称。

  • 图例位置:从图标中选择图例相对图表的位置,可选底部居中(默认)、左侧、顶部居中、顶部居右和右侧。

  • 图例边距:仅在 图例位置 选 顶部居右 时显示。默认勾选 自动,取消勾选后可分别设置 上 和 右 的边距。

  • 紧凑布局:勾选后,图例项紧凑排列,系列较多时可节省空间。默认不勾选。

  • 大小:分别设置图例图标的 大小 和图例项之间的 间距,单位为 px。勾选 自动 时由系统按组件尺寸计算。

  • 图例字体:设置图例文字的字体、字号、颜色和加粗、倾斜样式。


备注

热力图 也提供 图例 区块,但不提供 紧凑布局 和 图例边距,大小 改为设置图例色块的 宽度 和 高度,并多一项热力图专属的 滑动精度,参见 热力图。饼图、多指标饼图、3D 饼图 和 多指标 3D 饼图 的 图例 区块使用另一套配置项,参见 饼图 和 3D 饼图。

标线、标记和标面


标记 区块用于在图表上叠加参考信息,包含 标线、标记 和 标面 三组配置,每组都通过 + 添加 新增,通过 × 删除。

三者都只能引用当前已配置的数据项,且数据项默认为空,新增后必须手动选择,否则标注无法正确定位:标面 在未选择数据项时不会绘制;标线 和 标记 在未选择数据项时的位置不确定。若所选数据项被从 数据 页移除,对应的标注配置会被自动删除。


备注

饼图 和 多指标饼图 也有名为 标记 的区块,但其内容是 数据标签 的相关配置,与本节所述的标线、标记和标面无关,参见 饼图。

标线


标线在指定位置绘制一条参考线,常用于展示阈值或目标基准。

  • 名称:标线的名称,显示在图表中,支持配置多语言。

  • 选择数据项:标线计算所依据的数据来源,取值来自 数据 页中配置的第 1 个 维度 字段和所有 指标 字段,不含扩展字段。默认为空。

  • 类型:标线的取值方式,可选 最大值、最小值、平均值(默认)、中位数、自定义固定值 或 参数。数据项为时间和字符串类型时,标线类型不支持 自定义固定值 与 平均值。

  • 数值:仅在 类型 选 自定义固定值 或 参数 时显示,用于指定标线的取值。除直接填写数值外,还可引用变量:页面参数写作 ${key},组件参数写作 @{key},组件数据写作 #{fieldId}。

  • 名称位置:名称相对标线的位置,可选 标线右侧、标线上方(默认)或 标线下方。

  • 数值字体:设置标线数值和名称的字体、字号、颜色和加粗、倾斜样式。

  • 标线格式:设置标线的线型、粗细和颜色,默认虚线 1pt。

  • Hover 展示内容:终端用户将鼠标悬浮在标线上时显示的说明文字,支持配置多语言。留空时显示默认内容。

  • 隐藏箭头:勾选后,不显示标线末端的箭头。默认不勾选。

标记


标记在特定数据点上叠加标识,帮助终端用户快速定位极值。

  • 数据项:标记计算所依据的数据来源,取值只来自 数据 页中配置的 指标 字段,不含维度和扩展字段。默认为空。

  • 类型:标记的数据点,可选 最大值(默认)或 最小值。

  • 数据展示形式:标记旁展示的内容,可选 数值(默认)、文字 或 文字 + 数值。下方的 文字内容、文字字体 和 数值字体 随此项显示或隐藏:选 数值 时只显示 数值字体;选 文字 时只显示 文字内容 和 文字字体;选 文字 + 数值 时三项都显示。

  • 文字内容:展示在标记旁的文字。

  • 文字字体:设置 文字内容 的字体、字号、颜色和加粗、倾斜样式。

  • 数值字体:设置标记数值的字体、字号、颜色和加粗、倾斜样式。

  • 样式:标记的形状和 大小。形状可选 点(默认)、圆、方形、圆角方形、三角形、菱形、气泡 或 箭头;大小默认 8px。

  • 颜色:分别设置 图形 和 气泡 的颜色,均支持纯色和渐变色。

标面


标面对轴上的特定值或区间添加背景高亮,适合标记异常批次或特殊状态区间。

  • 作用轴:标面作用的坐标轴,可选 X 轴(默认)或 Y 轴。

  • 数据项:标面区间的数据来源,取值只来自 数据 页中配置的 扩展 字段。默认为空,未选择时不绘制标面。

  • 识别方式:可选 匹配(默认,高亮该字段取值精确匹配的分类)或 数值区间(高亮该字段取值落在指定区间内的分类)。

  • 颜色规则:点击 + 新增 添加规则。匹配 方式下为每个取值指定高亮颜色,数值区间 方式下为每个区间指定起止值和高亮颜色。可添加多条规则,冲突时以靠上的规则优先。

描述


描述是为指标数值添加其它附加信息。例如,当你需要在指标数值下方同时展示去年同期的数值,或上一季度的数值,可以配置为描述。

配置 描述 前,确保已在 数据 页中添加 扩展 字段。扩展 中的数据将作为描述值的来源。选择一个 扩展字段 作为某一指标数据的附加信息。选择后,扩展项的数值将展示在指标的数值下方。


../_images/metric_card_21.png

颜色规则


颜色规则定义每个指标的数值大小和数值颜色之间的关系,让用户能够快速注意到异常或临界值。例如,当指标数值为 0-10 时,展示为黑色,当数值为 11-20 时,展示为红色。


../_images/metric_card_33.png


注意:

  • 数值支持动态传参。更多信息,参见 使用动态参数。

  • 有多个冲突的颜色规则时,最上层的规则优先。你可以上下拖拽来更改规则的顺序。


以下图表支持配置颜色规则:

  • 环形仪表盘

  • 指针仪表盘

  • 进度条

  • 指标卡和多指标卡

  • 水球图

  • 热力图

  • 表格

  • 富文本

备注

  • 热力图的颜色规则在 着色方式 选择 分段 后配置,除数值区间外还支持按字符串匹配着色,详见 热力图的样式 > 颜色规则。

  • 多指标卡的状态圆点使用另一套独立的颜色规则,同样支持按字符串匹配,详见 状态圆点。

  • 列表和告警列表的颜色配置(条件颜色)使用文本匹配,不使用上述数值范围规则,详见 列表的样式 > 条件格式。

显示提示


显示提示 控制终端用户将鼠标悬浮在图表上时是否弹出提示框。提示框的内容由各图表决定,一般包含所悬浮位置的类别名、系列名、数值和单位。

该配置项的位置随配置面板的版本而不同:

  • 旧版配置面板:位于 基本 > 其他 标签页,名称为 显示提示。

  • 新版配置面板:位于 其它 标签页,名称为 显示鼠标悬停时提示。已升级的图表列表,参见 图表新版配置说明。


以下图表提供该配置项:

图表

位置

说明

柱状图(含箱线图)、折线图、散点图

其它 标签页

提示框按分类汇总,列出该分类下各系列的名称、颜色和数值。

饼图、多指标饼图、3D 饼图、多指标 3D 饼图

其它 标签页

参见 饼图。

玫瑰图

基本 > 其他 标签页

悬浮到扇形上时显示类别名和数值。

热力图

其它 标签页

悬浮到色块上时显示对应的行、列和数值。

条形图

基本 > 其他 标签页

参见 条形图。

列表、告警列表、拓扑图、3D 图表、按钮

基本 > 其他 标签页

入口存在但不生效:这几个组件不读取该配置,勾选与否都不改变运行时的提示行为。


未列入上表的图表不提供该配置项,是否显示提示框由组件自身决定,不可配置。例如瀑布图和帕累托图的提示框始终显示;各仪表盘、水球图、指标卡和多指标卡没有提示框,只在文本被截断时以原生浮层显示完整内容。

配置过滤器

添加图表内部过滤器


过滤器支持用户通过指定的条件过滤单个图表中的数据。过滤器置于图表内,可以通过配置调动位置,显示于标题的右侧或底部。


通过以下步骤,添加内部过滤器:

  1. 在配置面板的 过滤器 标签页中,选择 添加。

  2. 在 名称 输入框中,指定内部过滤器的名称。

  3. 从 位置 列表中,选择要放置内部过滤器的位置。如果选择 隐藏,则内部过滤器将不可见。

  4. 从 类型 列表中,选择要使用的内部过滤器类型。

    备注

    当选择 多选下拉 时,若没有配置过滤器名称,则多选下拉占位符将显示 请选择,若配置过滤器名称,则占位符将显示过滤器名称。

  5. 在 字体 字段中,配置过滤器文本的字体。

  6. 根据不同过滤器类型,配置 字段选项。

  7. 在 联动组件字段 中,选择要过滤的数据字段以及相应条件。

  8. 选择 确定。

启用指标筛选器


当数据项具有 指标 时,支持勾选 启用指标筛选器。

启用对比筛选器


当数据项具有 对比 时,支持勾选 启用对比筛选器。

过滤器字体


启用一键清空


组件联动导航器


备注

该功能仅适用于单页应用中的图表。


在单页应用中,通过配置图表与导航器的联动关系,当用户在导航器中选择筛选项时,图表会根据导航器传递的参数值,动态更新图表数据。

在图表配置过程中,根据以下指引完成配置:

  1. 进入图表的配置抽屉,选择 过滤器 标签页。

  2. 在 组件联动导航器 区域,点击 数据联动 展开配置项。

  3. 选择 点击配置联动,打开 导航器与组件的数据联动 弹窗。

  4. 在弹窗中选择导航器参数和联动的数据项:

    • 导航器参数:来自 导航配置 步骤中你定义的筛选器、资产类型等。

    • 联动的数据项:从图表正在使用的数据源中选择数据项。数据项又分为 2 类:

      • 数据源参数:图表给数据源的请求参数,定义了每一次请求的条件,例如数据的开始时间和结束时间。

      • 数据项:数据源的返回参数,图表在这些返回参数中选择需要的数据项,以指标、扩展、维度等形式展示在图表中。

    • 联动条件:导航器参数与图表数据之间满足条件时,产生联动。

  5. 点击 确定 保存联动配置。


图表与导航器的联动还可以在 关联配置 页面完成。更多信息,参见 关联导航器与组件。

联动其它组件


配置组件联动后,终端用户在图表中执行触发行为(例如点击某个维度区域)时,被联动的组件会按指定条件重新取数,只展示符合条件的数据,从而实现从主图表下钻到明细组件的效果。

适用范围


以下组件的 过滤器 标签页中提供 联动其它组件 区域:

  • 表格

  • 饼图、玫瑰图

  • 柱状图

  • 折线图

  • 散点图

  • 条形图、帕累托图

  • 热力图

  • 进度条

  • 地图、3D 图表、按钮


未列出的组件不提供该功能,其 过滤器 标签页中不显示 联动其它组件 区域,例如瀑布图、多指标饼图、3D 饼图、多指标 3D 饼图、Timeline、列表、告警列表、资产列表、指标卡、多指标卡、各仪表盘、水球图、拓扑图、设备状态矩阵、富文本、图片、视频和嵌入式框架。

此外,该功能仅在画布中的组件上提供,组件模板中不提供。

可选的触发行为


本组件中的触发行为 的可选项由组件按 数据 标签页中已配置的字段自动生成:

  • 柱状图、折线图、散点图 分组下的各预设:包含 点击 :raw-html-m2r:`<维度名>` 区域,以及每个已添加系列对应的 点击 :raw-html-m2r:`<系列名>`:raw-html-m2r:`<系列类型>`**,例如 **点击 发电量 柱状。

  • 进度条:为每个 指标 字段生成一项 点击 :raw-html-m2r:`<指标名>` 区域。指标配置了 别名 时,显示别名。

  • 其余支持联动的组件:只生成一项 点击 :raw-html-m2r:`<第1个维度名>` 区域。


因此,组件未配置 维度(进度条为未配置 指标)时,可选的触发行为为空,+ 添加 按钮不可用。每个触发行为只能配置一条联动,所有触发行为都已配置后,+ 添加 按钮同样不可用。

配置联动


  1. 进入图表的配置抽屉,选择 过滤器 标签页。

  2. 在 联动其它组件 区域,点击 + 添加 打开 添加组件联动 配置抽屉。

  3. 选择 本组件中的触发行为,例如 点击 AssetName 区域。

  4. 在 刷新的组件 中,选择 选择 打开 选择作用组件 弹窗,勾选需要联动刷新的组件:

    • 组件 页签:列出当前画布上的组件。

    • 容器内组件 页签:列出容器和阵列容器内的组件,并显示各组件的 所属容器 和 容器页签。

    • 位于隐藏区的组件也可选择,列表中会以图标标注。

  5. 在 刷新条件 中,为每个已选组件配置一条或多条条件,选择 添加条件 可增加条件行:

    • 本组件数据项:触发时从本组件取值的数据项。柱状图、折线图、散点图 各预设和进度条可选择 维度、对比、指标、扩展 中的数据项,其余组件只能选择 维度 数据项。

    • 条件:取到的值与联动组件数据项之间的比较方式,可选 =、!=、>、>=、<、<=、like 或 in。

    • 联动组件数据项:被联动组件中接收该值的数据项,也可以选择其数据源参数。选择数据源参数时,条件 固定为 =。

  6. 选择 确定 保存。已保存的联动按触发行为列在 联动其它组件 区域中,可拖拽调整顺序,或选择 编辑、删除 图标修改和移除。

运行时的联动效果


  • 终端用户执行触发行为后,取到的值作为数据源参数或查询条件参与被联动组件的数据请求,被联动组件重新取数,而不是在已返回的数据上做前端筛选。

  • 源组件中可触发联动的区域在鼠标悬浮时显示为手型指针,已触发的区域会高亮。

  • 配置了联动的组件在右上角显示 重置链接 图标,已触发联动时图标高亮。终端用户选择该图标后,联动值被清除,被联动组件恢复展示全部数据。

  • 导航器、全局过滤器、容器或阵列容器的筛选值发生变化时,所有组件的联动值会被自动重置。

  • 联动条件与导航器联动、内部过滤器作用在同一个数据项上时,最后一次触发的值生效;作用在不同数据项上时同时生效。


备注

只能联动当前画布内的组件。被联动的组件从画布中删除后,对应的联动配置会自动清除;复制组件时,联动配置不会被复制。

配置其他项


在 其他 标签页中,可配置图表的交互动作、刷新频率等。

(左侧)标题交互


你可以定义用户在图表标题上的交互动作,包括鼠标悬浮时提示文字、点击标题时可跳转等。当用户查看页面时,标题右侧将出现“>”图标。

例如,当配置下列内容时:


../_images/overview_7.png


用户在页面中可进行以下操作:


../_images/overview_6.gif


当 触发动作 设置为 弹窗 时,可以通过 画布跳转 在弹窗中打开目标画布。终端用户触发该交互后,系统会以弹窗形式展示目标画布,并联动展示画布中的图表及图表数据项。

右侧 … 交互


你可以定义图表的其它交互动作。当用户查看页面时,图表右上角将出现 … 按钮,用户将鼠标悬浮在 … 上,可打开更多交互。


../_images/metric_card_34.png


现支持配置以下交互动作:

  • 最大化组件:用户可全屏展示该组件。

  • 导出组件数据:用户可将图表中正在展示的数据导出为 CSV 格式。CSV 文件中的数据按 维度、对比、指标 和 扩展 的顺序排列。默认使用数据项的原始名称,如果为数据项定义了 别名,则文件中将使用 别名。同时,若为数据项配置了 单位,也将导出单位。

  • 自定义配置:新增其它交互动作。

最大化组件


为了让图表的视图更清晰,可以将图表根据浏览器大小放大至撑满页面的全屏效果,以展示最大化图表。


通过以下步骤,启用图表数最大化:

  1. 图表和容器对应的复选框位于不同位置:

    • 对于图表,打开 图表设置 面板并选择 基本 标签页。

    • 对于容器,在 容器设置 中,选择 其他选项 标签页。

  2. 选中 允许最大化 复选框。

  3. 选择 保存。


通过以下步骤,最大化图表:

  1. 发布页面,通过 URL 打开页面。

  2. 将鼠标移动到图表上,然后选择图表右上角的 最大化 maximize_widget_icon 以最大化图表。


../_images/maximized_view_widgets.gif


备注

  • 如果 导出组件数据 和 最大化组件 框都已选中,它们将都展示在省略号(…)下。将鼠标移动到该按钮上方,功能将显示在下拉菜单中。

  • 过滤器不支持最大化,最大化功能仅适用于图表组件和容器中的组件。

导出组件数据


用户可以从图表导出数据,以便在本地计算机上进一步分析。数据将导出为 CSV 文件。


按照以下步骤,启用图表数据导出:

  1. 在所选图表的 图表设置 面板中,选择 基本 > 其他选项。

  2. 选中 允许数据导出 复选框。

  3. 选择 保存。


按照以下步骤,导出图表数据:

  1. 发布页面,通过 URL 打开页面。

  2. 将鼠标移动到图表上,选择图表右上角的 导出 CSV export_data_icon,下载导出的 CSV 文件。


CSV 文件中的数据按 维度、对比、指标 和 扩展 的顺序排列,各类别中的数据项按图表设置面板中的顺序排列。如果数据项具有 别名,导出的 CSV 文件将使用该别名;否则,使用原始名称。若数据项配置了单位,也将导出单位。


../_images/alias.png


备注

嵌入式框架、图片 和 富文本 图表不支持数据导出。

导出 CSV 时的动态变量解析


终端用户导出图表数据时,系统会根据当前筛选值和图表的实际数据,自动解析图表标题、CSV 标题及数据内容中的动态变量占位符。导出的 CSV 文件将使用解析后的实际值,便于识别数据对应的业务上下文。

支持的变量类型:

  • 导航器参数:使用语法 ${parameter_key},由页面的导航器或全局过滤器提供当前筛选值。

  • 组件变量:使用语法 @{parameter_key},引用组件变量的当前值。

  • 组件数据:使用语法 #{field_ID},引用组件内数据项的实际值。


示例:

如果图表标题配置为 ${location} Station Daily Report,且终端用户在全局过滤器中选择 Beijing,导出的 CSV 文件标题行将显示为 Beijing Station Daily Report。CSV 数据行中的变量也会替换为当前筛选值或实际数据值。


更多关于动态参数的说明,参见 配置仪表盘参数。

交互设置


部分图表支持为指标、对比标签等可点击区域配置交互动作,例如点击后跳转页面、打开弹窗或触发 HTTP 请求。点击图表配置面板中的 交互设置 按钮,即可打开配置弹窗。

配置完成后,终端用户点击该区域时将触发对应动作。若配置了 交互显示名称,用户将鼠标悬浮在该区域时会显示该名称作为操作提示。


交互显示名称


可选。设置该交互动作对终端用户显示的名称,用于说明点击后的操作。不填则不显示名称。


触发动作


点击后执行的动作类型:

选项

说明

无动作

不执行任何动作。用于临时禁用已配置的交互。

在新页面打开

在浏览器新标签页中打开目标地址。

替换当前页面

在当前标签页跳转至目标地址,替换当前页面。

弹窗

在当前页面以弹窗形式打开目标地址。支持配置弹窗位置(居中或跟随点击位置)。

侧边抽屉

在页面右侧以抽屉形式展开目标内容,支持配置抽屉宽度和标题。

底部抽屉

在页面底部以抽屉形式展开目标内容,支持配置抽屉高度和标题。

HTTP 请求

点击后向指定接口发送 HTTP 请求,不进行页面跳转。选择该动作后不再显示 跳转方式。详见 HTTP 请求。

通过 SDK 派发事件

点击后派发一个自定义事件,由嵌入 DTV 页面的外部应用接收并处理。详见 SDK 事件派发。


跳转方式


触发动作为 在新页面打开、替换当前页面、弹窗、侧边抽屉 或 底部抽屉 时,需选择跳转的目标类型:

  • 不跳转:不设置跳转目标。

  • URL 跳转:输入任意 URL 作为跳转目标。详见 URL 跳转。

  • 应用门户:选择应用门户内的一个应用及菜单页面作为跳转目标。部分图表(如列表的内容区域)通过该类型跳转到应用中心页面。

  • 画布跳转:从当前应用的画布列表中选择一个画布作为跳转目标。该选项仅在触发动作为 弹窗 时才可能出现,且不在所有配置入口中提供。


备注

触发动作为 HTTP 请求 或 通过 SDK 派发事件 时不涉及页面跳转,不显示 跳转方式。

URL 跳转


当 触发动作 为 新页面打开 或 替换当前页面 时,你可以输入任意 URL。


../_images/overview_5.png


当 触发动作 为 弹窗、底部抽屉、侧边抽屉 时,仅支持输入相同域名下的相对路径。

例如,当配置下列内容时:


../_images/overview_6.png


用户在页面中可进行以下操作:


../_images/overview_5.gif

HTTP 请求


定义 HTTP 请求后,用户点击交互按钮,将自动触发一次 HTTP 请求。

  • 服务地址:需填写相对路径。

  • 接口的返回格式必须为:{code: '', data: {}, message: ''}。

  • 状态码: 0 或者 200 表示成功,其它状态码一律视为失败。

  • 请求反馈:用户触发请求后,页面中是否提示 “请求成功”/“请求失败”。

SDK 事件派发


选择 通过 SDK 派发事件 后,图表将支持接收 DTV SDK 派发的事件。开发者使用了 DTV SDK 提供的 API 或功能,当用户点击标题时,SDK 将主动派发一个事件,这个事件可以被其它代码监听和响应。

请求合并


当页面内多个图表使用同一数据源,且同时刷新时,在 组件设置 中勾选 请求合并 可将该图表的请求与其它图表的请求合并,提升响应速度。默认开启。仅当 页面设置 中同时开启了 请求合并 时,图表内开启才生效。


../_images/metric_card_35.png

刷新频率


选择图表从数据源检索数据和自动刷新的频率。

你也可以点击 刷新数据 按钮,手动刷新数据。


../_images/overview_8.png

标识码


图表的标识码。通过 DTV SDK 从外部派发事件时,如果提供了标识码,则只有该标识码的对象会响应。

描述


描述是对图表的补充说明。用户将鼠标悬浮在图表标题上时,将看到这段提示。


../_images/overview_9.png

开启趋势分析


对指标数据 开启趋势分析 后,用户将鼠标悬浮在指标数据上时,将打开 趋势分析 弹窗,查看所选指标的数据趋势曲线。


../_images/overview_10.png


以下图表支持趋势分析:

  • 多指标卡

  • 表格

  • 进度条

备注

拓扑图也提供趋势分析,但它是组件自带的运行时功能:终端用户点击节点中的测点即可加入趋势分析,无需为每个指标单独开启,只需在样式中配置 趋势分析超链接。详见 拓扑图。

资产聚合


勾选 资产聚合 后,在趋势分析弹窗中将对多个资产的同一指标数据进行聚合。

资产参数


资产参数是自定义趋势分析曲线中需要展示的资产数据。

  • 不开启资产聚合时,曲线图中展示图表所用数据源返回的资产 ID。可通过 #{mdmId} 格式引用多个资产 ID,ID 之间用英文逗号隔开。

  • 开启资产聚合后,曲线图中展示图表所用数据源请求参数中定义的资产 ID。可通过 @{mdmId} 格式多个资产 ID,ID 之间用英文逗号隔开。

复制和粘贴图表样式


复制和粘贴样式,是可以像复制和粘贴文本一样,在同类型图表之间复制和粘贴样式,快速复用图表的样式。

备注

仅支持在当前 OU 粘贴到同类型图表,且目标图表已开启复制/粘贴样式的功能。如有需要,可联系系统管理员为某类图表开启复制/粘贴功能。


当你已配置好 A 图表,希望能在同类型的 B 图表中复用 A 图表的样式,减少配置步骤,可按照以下操作:

  1. 在 A 图表的配置面板下方选择 复制样式。

  2. 打开 B 图表的配置面板,选择 粘贴样式,将 A 图表的以下内容粘贴到 B 图表中:

    • 标题字体

    • 背景色

    • 组件装饰

    • 组件内间距

    • 图标样式

    • 过滤器字体


../_images/overview_11.gif


备注

  • 复制的内容仅在当前会话中有效。若在浏览器中关闭当前页面,复制的内容将丢失。

  • 部分与数据项关联的样式配置,将按顺序逐个粘贴。若原图表的数据项少于目标图表的数据项,按顺序逐个粘贴,剩余的数据项将保留原有样式。

  • 使用到扩展字段的功能,例如标线、标面、同环比等,暂不支持粘贴。


目前仅支持以下类型的图表:

  • 表格

  • 列表

  • 告警列表

  • 饼图

  • 玫瑰图

  • 柱状图

  • 折线图

  • 散点图

  • 箱线图

  • 条形图

  • 瀑布图

  • 热力图

  • 环形仪表盘

  • 指针仪表盘

  • 进度条

  • 堆叠进度条

  • 水球图

  • 指标卡

  • 富文本

  • 按钮