仪表指针实践

image.png

您可对仪表指针的名称(北京温度)及指标值(32)进行数据配置。具体的操作步骤如下:

  1. 拖拽一个"仪表指针"组件到中间的画布上(即图中3-->4)。
    image

  2. 准备数据。
    (1) 进入数据表页面。选择上图 红框1中的『数据表』Tab进入到数据表创建页面。
    (2) 新建数据表。

第一步:命名数据表,选择数据类型。此处我们选择一个静态CSV数据,点击下一步。

image

第二步:在CSV文本框中建入模拟数据,如下图所示,点击确定,数据表即创建完成。

注:确保逗号为英文字符。

image

image

第三步:如果我们的原始列值与期望的显示值有差异,则可以对创建好的数据表进行变形。如下图所示:

image

此处我们的温度传感器采集的温度列 数值精度太高,我们可将该列的数值进行小数点后余两位数的处理,通过以下操作完成数据列的变形:

  • 基础列: 选择温度列。
  • 语法窗:用JS语句编写数据处理方法。可使用任何原生JS对象如Math,Number(toFixed,toPrecision)来达到数值计算及数值精度转换的目的。比如此处使用了toFixed()方法对单元格数据进行了格式化。
  • 该列属性:选择数据输出的类别。:经过上述语法窗中函数处理过后的返回值如果与"该列属性"类型不匹配,物可视对其做了基本的转换。比如,toFixed()方法返回一个string类型的值,而我们选择输出number类型的值,此情况下不会报错,最终生成的温度值是Number类型的。

又比如,我们新建一个状态列,可被绑定在仪表指针的名称上。设定温度值大于32℃为高温(用"H"表示),反之为低温(用"L"表示)。

image

到此,我们已创建好了一份令人满意的数据。

image

  1. 配置/绑定数据。

切换至『仪表盘』Tab,在右侧『数据绑定』界面选择指标值,点击右侧绑定按钮。

image.png

弹出如下弹窗

image

我们选择刚才创建好的数据表test,点击北京的温度列,再点击下方绑定按钮,即完成了指标值数据的绑定。

经过数据绑定后的指标值被数据表中的数据驱动着,不可手动更改值。再次点击绑定按钮,可以更换绑定值或者对数据进行解绑。

使用同样的方式绑定指标名称。我们的最终效果图如下:

默认主题:

image

荧光主题:

image