ThingsBoard教程(7):Dashboard展示时序值

1,100 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第17天,点击查看活动详情

概述

上一篇文章,我们使用MQTTX模拟了数据上报,接下来我们介绍下dashboard,使用TB提供的部件库创建两个部件,分别展示flow、balance两个时序值:

  • 为flow 创建Timeseries Line Chart ,显示流量实时变化曲线
  • 为balance创建Entities table,显示账户当前余额

1.创建Dashboard

  • 打开仪表盘库,点击“+”,选择“创建新的仪表板”
  • 填写标题:myDashboard,点击添加

1.png

2.添加实体别名

在创建部件以前,我们需要添加实体别名。实体别名是对小部件中使用的单个实体或一组实体的引用,创建好实体别名后才能在部件中去使用设备的数据。

  • 在仪表板库列表中找到我们创建的仪表板,点击打开仪表板
  • 点击右下方“铅笔”图标,进入编辑模式
  • 点击右上角实体别名的图标,添加一个”waterMeter01“的别名。

2.png

3.创建流量实时值曲线部件

接下来我们先创建一个Timeseries Line Chart ,显示流量实时变化曲线

  • 点击右下角“+”,选择“创建一个新部件”
  • 选择Charts中的“Timeseries Line Chart”部件
  • 在数据源中,我们选择刚刚定义的“waterMeter01”实体,然后选择flow属性,点击确定保存

4.png

5.png

我们从新上报几条数据以后,可以看到数据变化曲线:

5.png

4.创建余额实时值部件

  • 点击右下角“+”,选择“创建一个新部件”
  • 选择Cards中的“Entities table”部件
  • 在数据源中,我们选择刚刚定义的“waterMeter01”实体,然后选择balance属性,点击确定保存

6.png

我们可以看到当前水表余额实时值:

7.png

结束语

这样我们就完成了使用dashboard显示实时值的示例,其他的TB提供的部件有很多,大家可以逐一尝试一下。

8.png