乐吾乐大屏可视化组态软件（大屏可视化设计器 - 乐吾乐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}`"
}