乐吾乐大屏可视化组态软件【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

单点绑定

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

整个图表数据绑定

① （查询方式列表）添加一个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数据列表

配置表格列配置，建立SQL字段名和表格列（colkey）的映射关系。

表格data属性，绑定整个SQL列表数据源。

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