You need to enable JavaScript to run this app.
导航
数字大屏仪表图
最近更新时间:2025.03.07 14:30:11首次发布时间:2024.09.13 14:30:51
我的收藏
有用
有用
无用
无用

1.概述

仪表图类似于汽车仪表盘外观,表盘上有刻度和指针,指针指向当前数据所对应的位置。刻度通常分为多个区间,每个区间代表不同的数据范围。仪表图能直观地反映出某个指标的当前值以及其与目标值或范围的关系,聚焦于单个关键指标,使重要数据更醒目。

2.快速入门

(1)选择组件-图表中的仪表图,大屏中心将出现一个仪表图组件。

(2)在下方选择数据源,将字段(仅支持一个指标)拖至右侧数据配置-数据可视化-值区域,并配置排序筛选。

(3)配置样式。

3.功能介绍

3.1 样式-整体视觉

颜色
在“颜色”一栏中,可以设置仪表图的颜色、渐变。选择第一个颜色圆盘,可对仪表图的颜色进行自定义。

图表样式
配置背景颜色、展开角度、半径、圆角等

动画
可以为仪表图配置入场、更新、循环动画。

3.2 样式-图内元素

指标: 勾选后可在仪表图中心展示总计数值。可修改数值的标题及其样式,以及数值的样式 。

**指针&刻度:**可设置指针与刻度样式

**标题:**勾选后可在仪表图中心展示标题。在数据配置中可通过更改展示名称更改标题。

目标值样式: 设置目标值线的颜色、粗细及标签的字体样式等。

目标值占比: 勾选后可在目标直线中间显示占比,可设置目标值占比的字体、颜色、字号等。

3.3 最大最小值&目标值设置

仪表图可设置最大最小值和目标值。支持固定值(输入数字)和动态值(拖拽指标字段)。

  • 最大值:指针指向最右端时的数值刻度大小
  • 最小值:指针指向最左端时的数值刻度大小
  • 目标值:目标直线在仪表中的位置

3.4 区间设置

区间设置开启后,可以设置仪表图分段配色,支持按比例划分和按数值划分两种形式。

  • 按比例划分:按照最大值、最小值的百分比拆分。最小值显示0%,最大值显示100%。可根据需要增加或者减少分阶。

Image

  • 按数值划分:按照指标数值进行拆分,可根据需要增加或者减少分阶。设置的区间如果为无效区间,则不进行该区间的绘制。

    例如,指标最小值为0,最大值为1000。若设置的区间为[最小值, -200],[-200,100],[100,1500],[1500,最大值],则实际生效的区间为[0,100],[100, 1000]。

3.5 数据

3.5.1 数据来源

参考 数字大屏-数字大屏数据来源 模块,可以选择 Static(静态数据)、Dataset(数据集)、API 和 JavaScript 四种数据来源。选定后在数据可视化-数据来源中,选择对应的数据来源。 也可在下方查询模块中切换数据来源。

3.5.2 数据可视化

选定数据源后,可以将字段拖拽至右侧数据配置-数据可视化中,配置成值/筛选字段。

  • 值:指标字段
  • 排序:仅对数据进行排序,由于仪表图呈现的是聚合效果,因此不会影响绘图。
  • 筛选:将作为筛选条件的字段拖拽入“数据筛选”一栏后,即可设置筛选条件。维度字段、指标字段、日期字段在筛选操作上有细微的区别,可以参考维度筛选指标筛选日期筛选

点击右侧值/排序/筛选中字段胶囊,可以设置字段信息、字段聚合方式、数据格式等。

3.6 交互

交互面板中新建交互,选择所需的事件类型。针对该事件设置所需的响应,可通过Event.RowData.['字段区域名'].['字段展示名称']获取到当前点击的图元数据。图元点击事项具体操作可以查看《具体文档》。