乐吾乐大屏可视化组态软件【SQL数据源】

乐吾乐大屏可视化组态软件(大屏可视化设计器 - 乐吾乐Le5le)支持直接对接SQL数据源功能,目前仅对企业源码客户开放。

配置SQL数据源

管理员进入可视化管理中心,点击SQL数据源,配置添加SQL数据源。

创建SQL数据源连接

进入大屏可视化编辑器,数据选择SQL数据源

选择数据源,配置轮询间隔,配置sql语句。查询方式支持单条查询和列表(多条)查询。

需要配置关联属性名(自定义),用于图元绑定关联数据源。

点击连接测试,如果有数据返回说明连接成功。

如果查询方式为单条,sql返回数据格式如下:

复制代码
{
    "字段1": "2025-01-14T11:46:47.843368+08:00",
    "字段2": "空气质量传感器-室内",
    "字段3": "26.6",
    "字段4": "temperature",
    //...
}

如果查询方式为列表,可以配置查询第几页及每页数量,sql返回格式如下:

复制代码
[
  {
    "字段1": "2025-01-14T11:46:47.843368+08:00",
    "字段2": "空气质量传感器-室内",
    "字段3": "26.6",
    "字段4": "temperature",
    //...
  },
  {
   "字段1": "2025-01-14T11:46:47.843368+08:00",
    "字段2": "空气质量传感器-室内",
    "字段3": "27.6",
    "字段4": "temperature",
    //...
  },
  //...
]

图元关联SQL数据源

下面以常用图元为例,讲解如何关联SQL数据源数据

基本文本图元

(查询方式单条)两个图元文本text属性,分别绑定"字段2"和"字段3"

图表

官方图表库使用的是开源图表库echarts,用户需要了解echarts的配置。

图表文档说明:https://doc.le5le.com/document/58

  1. 单点绑定

(查询方式列表)一个点位绑定一个数据,配置属性名,例如"echarts.option.series.0.data.5 "这个属性对应的就是该图表图元echarts.option.series[0].data[5]这个属性。完成绑定后,绑定的点位数据就会推送到图表对应的属性。

  1. 整个图表数据绑定

① (查询方式列表)添加一个data属性(内置固定属性),绑定整个SQL列表数据源。

② 建立映射关系

为了确定sql数据源返回的数据具体推送到图表的哪个属性,我们需要配置echarts.dataMap属性,建立SQL数据源数据和图表属性的映射关系。

映射关系如图:

③ 格式转化

如果想做日期显示转换,支持配置timeFormat(转化格式) timeKeys(需要转化的sql推送的字段名)

例如:

上述过程完整echarts配置如下:

复制代码
{
    "option": {
        "barWidth": 10,
        "grid": {
            "bottom": 8,
            "left": 8,
            "right": 8,
            "top": 12,
            "containLabel": true
        },
        "tooltip": {
            "backgroundColor": "rgba(24,24,24,0.95)",
            "borderColor": "rgba(24,24,24,0.95)",
            "trigger": "axis",
            "axisPointer": {
                "type": "none"
            },
            "textStyle": {
                "fontSize": 12,
                "fontWeight": 400
            }
        },
        "fontSize": 10,
        "xAxis": {
            "type": "category",
            "data": [
                "15:52:22",
                "15:52:22",
                "15:52:22",
                "15:52:22",
                "15:52:22",
                "15:52:22"
            ],
            "axisLabel": {
                "fontSize": 12,
                "margin": 10
            },
            "axisTick": {
                "show": false
            }
        },
        "yAxis": {
            "type": "value",
            "max": 100,
            "min": 0,
            "splitNumber": 2,
            "minInterval": 50,
            "axisLabel": {
                "fontSize": 12,
                "margin": 10,
                "textStyle": {
                    "color": "#FFFFFF66"
                }
            }
        },
        "series": [
            {
                "type": "bar",
                "name": "系列1",
                "data": [
                    "26.6",
                    "27.7",
                    "28.8",
                    "0.5",
                    "0.6",
                    "0.7"
                ],
                "itemStyle": {
                    "color": "#4583ff"
                },
                "lineStyle": {
                    "width": 2
                },
                "symbolSize": 5
            }
        ]
    },
    "max": 100,
    "theme": "le-dark",
    "dataMap": {
        "echarts.option.series.0.data": "device_prop_data",
        "echarts.option.xAxis.data": "collect_at"
    },
    "timeKeys": [
        "collect_at"
    ],
    "timeFormat": "`${hours}:${minutes}:${seconds}`"
}

表格

表格文档说明:https://doc.le5le.com/document/68

(查询方式列表)整个表格数据绑定一条sql数据列表

  1. 配置表格列配置,建立SQL字段名和表格列(colkey)的映射关系。
  1. 表格data属性,绑定整个SQL列表数据源。

支持配置timeFormat属性,对日期做格式转化。

相关推荐
数字冰雹16 小时前
从静态模型到数据驱动:图观模型编辑器让工程设备真实还原
编辑器
Highcharts.js18 小时前
3D 图表:有用的可视化工具还是误导性的幻觉?
信息可视化·数据可视化·highcharts·3d图表·图表库·highcharts 3d图表·数据绘图
塔能物联运维18 小时前
物联网数据完整性保障的区块链应用
物联网·区块链
TDengine (老段)19 小时前
TDengine 数字函数 RADIANS 用户手册
大数据·数据库·sql·物联网·时序数据库·tdengine·涛思数据
迷途呀19 小时前
Latex中的错误汇总
论文阅读·笔记·学习·其他·编辑器
MeowKnight95821 小时前
vscode安装、部署和小技巧 记录
ide·vscode·编辑器
塔能物联运维21 小时前
物联网运维中的容器化服务部署与弹性扩展技术
运维·物联网
ZeroMxy1 天前
VSCode 修改默认主题
ide·vscode·编辑器
柱子jason1 天前
我的第一个开源项目【IOT-Tree Server】
物联网·开源·iiot·iot-tree
CiLerLinux1 天前
第一章 FreeRTOS简介
单片机·嵌入式硬件·物联网·gnu