我要投稿

Dify结合Echarts实现数据可视化-数据库篇

发布日期：2025-06-04 06:01:43 浏览次数： 1989

作者：北一AI

微信搜一搜，关注“北一AI”

上一篇文章讲了如何读取Excel里的数据并通过Echarts实现数据可视化的操作，其实能从Excel里读取出数据，就同样可以从数据库中读取数据，2者的区别只是数据源不同，一旦查询出数据了，后续的操作都是一样的。我们来看下具体操作。

主要的思路就是先实现自然语言查询数据库，之前的文章有写过如何实现。然后再通过http节点请求数据库，最后把得到的数据处理成Echarts需要的格式，再传给Echarts。一旦从数据库中查询出数据后，后面的操作和Excel是一样的。

先看下整体效果：

工作流如下：

1.开始节点：就是一个输入框，告诉AI我们要统计展示什么样的数据。

2.知识检索：提供数据库表的DDL，这样AI才能理解我们的数据字段，才可以根据自然语言生成查询数据的SQL。

我这里创建了一个销售表，DDL如下，然后造几条数据。

CREATE TABLE sales (

id INT AUTO_INCREMENT PRIMARY KEY,

product_name VARCHAR(50) NOT NULL,

sales_quantity INT NOT NULL,

sales_amount DECIMAL(10, 2) NOT NULL );

把这个DDL保存成一个TXT文件，用这个文件创建一个知识库就可以了。

3.LLM节点：这个LLM节点负责把我们的自然语言转换成SQL语句，至于模型大家可以多测测，看哪个效果好，我这里用的是qwen-coder-turbo-latest，提示词可以按照我的写。

提示词如下：

你是一个数据分析师，擅长使用SQL查询数据库，根据用户数据库的表结构{{#context#}}和用户的查询要求给出对应的sql语句。用户的查询要求是：{{#1741600668823.content#}}。 注意生成的SQL必须经过严格的校验。你可以使用函数在用户输入类似于“求和”或“总和”时，则在sql语句中使用SUM()。用户输入类似于“平均数”或“平均”时，在在sql语句中使用AVG()。要求1.如果用户输入的内容无法生成为sql语句，请直接说“抱歉，该命令无法形成数据库查询操作”。2.当可以生成sql语句时，请确保输出的内容为完整正确的sql语句，除此以外不要输出其他任何信息，不要注释和说明，也不要格式化，不要用markdown格式来输出，直接输出纯文本，也不要输出 \n 这样的回车换行符，确保你生成的sql语句可以直接执行查询操作。3.对于字符串内容的查询请使用LIKE操作而不是等于操作。4.禁止中间过程输出。

4.参数提取器：这个节点的作用是从上一个节点的输出里提取出直接可以执行的合法SQL语句，因为上一个节点返回的数据可能会被包装成md的格式，这里要根据实际的情况调整一下。上一个节点我使用qwen-coder-turbo-latest生成SQL的时候，总是会以md的格式返回，所以我就增加了一个参数提取器。

这里的指令很简单，就是“从输入变量中准确提取出一个可执行的sql语句”即可。

5.HTTP请求节点：把上一个节点的SQL语句发给后台，让后台执行这个SQL查询数据库，然后拿到数据。

这里的参数要和后台接口一致，包括接口url，方法，body的返回格式等等。

后台代码可以任意写，我这里是用flask写了一个简单的查询数据库的接口，代码如下：

@app.route('/query', methods=['POST']) def query():     connection = None     try:         # 获取请求中的 SQL 字符串         data = request.get_json()         sql = data.get('sql')         print(sql)         if not sql:             return jsonify({'error': 'SQL query is required'}), 400          # 检查 SQL 是否为 SELECT 语句         if not sql.strip().lower().startswith('select'):             return jsonify({'error': 'Only SELECT queries are allowed'}), 400          connection = get_db_connection()         with connection.cursor() as cursor:             cursor.execute(sql)             result = cursor.fetchall()             return jsonify(result)     except Exception as e:         return jsonify({'error': str(e)}), 500     finally:         if connection:             connection.close()

6.解析数据库数据：从上一个节点的输出里解析出需要的数据，因为http会返回很多别的数据，比如http状态码之类的数据，这些数据并不需要。

这里其实就是告诉AI把查询到的数据解析成一个json数组，一条数据就是数组里的一个数据。这里只是示例，提示词里写的json字段并不需要和我们数据库的表对应上，因为实际使用的时候，我们的表有很多，并不能确定字段到底是什么。提示词如下：

##角色 你是一位数据库专家，根据{{#1747017252540.body#}}返回的数据，如果code参数等于200，则说明数据返回成功，根据data中的数据封装成json的格式输出。  ###输出示例：  [         {             "SALE_PRICE": "200.0",             "MENDIAN_CODE": "1.0",             "GOODS_NAME": "无线充电器",             "XIAOSHOU_DATE": "2025-01-03",             "SALE_NUMBER": "3.0",             "PAY_WAY": "现金",             "ZK_MONEY": "540.0",             "GOODS_CODE": "1003.0"         },         {             "SALE_PRICE": "7000.0",             "MENDIAN_CODE": "3.0",             "GOODS_NAME": "笔记本电脑",             "XIAOSHOU_DATE": "2025-01-04",             "SALE_NUMBER": "1.0",             "PAY_WAY": "信用卡",             "ZK_MONEY": "6650.0",             "GOODS_CODE": "1004.0"         } ]

7.提取出Echarts格式数据：把上一个节点的输出提取出Echarts需要的数据，其他没用的数据不需要。

8.LLM节点：该节点把上一个节点的输出数据最终转出Echarts渲染图表时需要的数据格式。

提示词如下：

# 角色 你是一个数据整理专家且也是echart方面的专家,根据用户描述智能整理并筛选计算出符合用户的数据,echart图表类型,数据都根据用户描述智能生成,确保echarts的配置项为一个标准且可解析的JSON格式。  ##数据 源数据: {{#context#}} 用户描述: {{#sys.query#}}  ##输出格式示例: ```echarts {   "option": {     "title": {       "text": "示例标题"     },     "series": [       {         "type": "line",         "data": [           5,           20,           36,           10,           10,           20         ]       }     ]   } } ``` # 任务 输出结果仅保留echart相关结构

9.参数提取器：该节点的作用是从上一个节点的输出里提取出Echarts执行时需要的数据，别的数据不需要。这几个参数提取器的作用其实一样，都是从上一个节点的输出数据中获取需要的数据，因为前一个节点的输出数据可能会以md的格式输出，就会有一些不需要的内容。

10.代码执行：这里在节点里写代码，接收上一个节点的数据，生成Echarts图表。

代码如下：

import json  def main(csv_string) -> dict:     echarts_config = json.loads(csv_string)     option = echarts_config.get('option', {})       # 生成输出文件      output = "\n```echarts\n"+ json.dumps(option,indent=2,ensure_ascii=False) + "\n```"      return {"output": output}

11.最后一个直接回复节点：输出上一个节点的内容，即Echarts图表。