仪表盘

仪表盘可以直观地表现出某个指标的实际情况,主要用于指标占比的展现。例如,通过仪表盘展示某一类商品的库存状态,可以看到库存充足还是需要补货。本文为您介绍如何为仪表盘添加数据并配置样式。

效果图

image

配置数据

  1. 在组件库区域的图表中,找到仪表盘并拖至画布中。image

  2. 数据区域中选择所需数据集,并按照以下说明配置图表的字段数据。image

    • 指针角度/度量中,拖入需要展示的核心指标,例如需要查看订单金额的表现情况,则拖入订单金额字段。

    • 目标值/度量中,为指针角度中的度量值设置目标值,以查看其完成度及占比情况,例如输入订单金额的目标值,以查看当前订单金额指标的完成度。支持拖入动态字段,或手动输入目标值。

      • 动态字段:根据业务数据动态更新目标值,适用于需要根据时间及业务状况自动调整目标值的场景,例如库存水平等变动较频繁的指标。

      • 手动输入:为进度值设定一个固定的目标数值,适用于目标固定的场景,例如年度销售目标、项目预算等。

    • ③ 在起点值/度量中,设置指针的起始值,即表盘刻度的起点。支持拖入动态字段,或手动输入目标值。

      • 动态字段:当起点值需要随数据变化而自动更新时,您可以将起始值设置为动态值。例如:在展示销售业绩的仪表盘中,如果希望每个月的起点值自动调整为该月第一天的销售额,那么可以将一个代表月初销售额的动态字段设置为起始值。

      • 手动输入:当您有一个明确且固定不变的起始点值时,可以直接手动输入起始值。例如:年度销售额需要从0开始积累,此时即可将0设为起始值。

您还可以对数据进行以下操作:image

配置样式

位置和尺寸

您可以在配置区对组件进行如下设置。

image

  • 调整组件的对齐方式(①):支持左对齐、居中和右对齐等。

  • 调整组件的尺寸(②):以左上角为原点,设置XY轴的值,调整位置。

  • 调整组件的角度(③):设置旋转角度的值。

  • 调整组件的大小(④):设置WH的值,调整组件的宽度和高度。

  • 锁定组件(⑤):锁定组件后,无法调整组件的大小。

  • 调整透明度(⑥):设置组件的透明度。

仪表样式

您可以在仪表样式区域,设置仪表盘的样式,支持的操作如下。

image

  • 可视化样式切换:设置仪表盘的整体样式,支持选择标准扇形刻度

  • 颜色模式:设置仪表盘的颜色模式,支持单色或按区块分色。

    • 当选择单色模式时,整个仪表盘将使用同一种颜色,您可以在主题色中自定义数据条的具体颜色,并设置背景色image

    • 当选择按区块分色时,不同数据区间可使用不同的颜色表达,您需要在数据映射区间中设置数据的分区方式,并在主题色中自定义具体颜色。image

  • 透明度:设置数据条的透明度。

  • 半径占比:设置仪表盘的半径大小。

  • 圆角:设置仪表盘的圆角值。

  • 内部刻度线:设置是否显示仪表盘内部刻度线,并选择其展示方式为百分比原数据值

数据标签

您可以在数据标签区域,进行如下操作。image

  • 主标签:设置主标签样式。

    • 标签样式:设置主标签的显示形式。支持选择显示指针值显示百分比

    • 文本样式:设置主标签名称及数值的文本样式,支持设置字体颜色、大小等。

  • 副标签:选择是否开启副标签,并设置副标签的样式。

    • 文本:设置副标签的文本样式,支持设置字体颜色、大小等。

    • 占比值小数位数:设置占比值保留几位小数。

动效

动效区域,设置仪表盘的展示动效。image

  • 开启指针动效:设置是否开启指针在移动时的动画效果。

  • 开启轨道流光效果:设置是否在轨道上开启流动的光影效果。

  • 开启流光效果:设置是否在数据条上开启流动的光影效果,支持在开启的状态下设置其颜色流光时长