【人工智能-agent】--Dify+Mysql+Echarts搭建了一个能“听懂”人话的数据可视化助手！

Echarts官网：https://echarts.apache.org/zh/index.html

ECharts 是一个由百度团队开发的、基于 JavaScript 的开源可视化图表库，它提供了丰富的图表类型和强大的交互功能，能够帮助开发者轻松创建专业级的数据可视化应用。

核心特点

1. 丰富的图表类型
   • 支持30+种图表类型，包括折线图、柱状图、饼图、散点图、雷达图、地图、热力图、树图、旭日图等
   • 支持多维数据分析展示
2. 强大的交互功能
   • 提供数据缩放、拖拽重计算、数据区域选择等交互功能
   • 支持图例、工具箱、数据区域缩放、视觉映射等组件

import csv
import jsondef main(csv_string):# 将CSV字符串分割成行lines = csv_string.strip().split('\n')# 使用csv模块读取数据reader = csv.reader(lines)# 将所有行转换为列表data = [row for row in reader]# 将数字字符串转换为浮点数for row in data[1:]:  # 跳过标题行for i in range(1, len(row)):try:row[i] = float(row[i])except ValueError:pass# 创建完整的ECharts配置echarts_config = {"legend": {},"tooltip": {},"dataset": {"source": data},"xAxis": [{"type": "category", "gridIndex": 0},{"type": "category", "gridIndex": 1}],"yAxis": [{"gridIndex": 0},{"gridIndex": 1}],"grid": [{"bottom": "55%"},{"top": "55%"}],"series": [# 第一个网格中的折线图系列{"type": "bar", "seriesLayoutBy": "row"},{"type": "bar", "seriesLayoutBy": "row"},{"type": "bar", "seriesLayoutBy": "row"},{"type": "bar", "seriesLayoutBy": "row"},# 第二个网格中的柱状图系列{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1}]}# 生成输出文件output = "```echarts\n" + json.dumps(echarts_config, indent=2, ensure_ascii=False) + "\n```"return {"output":output}

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};option && myChart.setOption(option);

完整工作流：

目录

1.安装插件

2.问题判断

3.自然语言转SQL

4.执行SQL语句

5.条件分支-是否需要图表

6.处理图表数据

7.参数提取

8.条件分支--图形判断

9.画图

10.不画图

11.测试效果

---

1.安装插件

2.问题判断

它负责分析用户的原始问题，判断是否需要图表，并初步确定合适的图表类型（柱状图、折线图、饼图，或不需要图表）。

模型选择: deepseek-ai/DeepSeek-V3

提示词如下： 

你是一个智能助手，需要根据用户的问题判断是否需要用图表展示数据，并判断适合的图表类型。  请严格按照如下JSON格式输出，不要输出多余内容：
{"need_chart": true/false,  // 是否需要图表"chart_type": "bar/line/pie/none"  // 推荐的图表类型，bar=柱状图，line=折线图，pie=饼图，none=不需要图表
}判断标准：
1.如果用户问题中包含“趋势”、“变化”、“对比”、“分布”、“比例”、“占比”、“增长”等词，通常需要图表。
2.如果用户问题中有“每年”、“历年”、“随时间”、“随年份”等，推荐折线图（line）。
3. 如果用户问题中有“对比”、“排行”、“最多”、“最少”等，推荐柱状图（bar）。
4. 如果用户问题中有“占比”、“比例”、“分布”等，推荐饼图（pie）。
5. 如果用户只是问具体数值、详情、描述，不需要图表，chart_type 填 none。示例：
用户问题：“请用图表展示历年票房变化”  
输出：{"need_chart": true, "chart_type": "line"}用户问题：“各导演的票房占比是多少？”  
输出：{"need_chart": true, "chart_type": "pie"}用户问题：“哪吒之魔童降世的票房是多少？”  
输出：{"need_chart": false, "chart_type": "none"}现在请判断下面这个问题：
{{#1746791066048.input#}}

3.自然语言转SQL

这个节点是实现“自然语言对话数据库”的核心。它会将用户的原始问题（sys.query）和我们预设的数据库表结构信息结合，智能地生成可执行的SQL语句。

输入变量:

• 数据表名称: ****
• 查询语句: {{sys.query}} (引用开始节点的用户输入)

数据库配置: 正确填写数据库类型、IP、端口、库名、用户名、密码。

可以根据实际情况自定义提示词：

你是一位精通SQL语言的数据库专家,熟悉MySQL数据库。你的的任务是检查该Sql语句是否有错。如果有错请更正，没有错则输出Sql语句。回答要求：
1.不能包含任何多余的信息。
2.必须是可以执行的SQL语句。
3.删除掉Sql中的\n，用空格替换。
4.只需要查询本日价格，不需要多余信息.注意:实体为‘类型’，需要在大类和小类中间加上‘-’

4.执行SQL语句

此节点负责连接数据库，并执行上一步生成的SQL语句。

• 输入变量:
  • 待执行的SQL语句: {{rookie_text2data.text}} (引用上一个节点的输出，即生成的SQL语句)
• 数据库配置: 正确填写数据库类型、IP、端口、库名、用户名、密码。
• 返回数据格式: TEXT。

5.条件分支-是否需要图表

这是一个逻辑判断节点，它会根据第一个LLM节点【判断用户问题】的输出，决定工作流是走向“生成图表”的分支，还是走向“无需图表，直接文字回答”的分支。

6.处理图表数据

上一个条件分支走到需要图表，工作流会进入这个LLM节点。

它的核心任务是将SQL查询结果（目前是TEXT格式）和第一个LLM判断出的图表类型（target_chart_type），转换为后续代码节点或图表插件所需的格式化数据。

SYSTEM
你是一个数据格式化专家。你的核心任务是根据已执行的SQL查询结果和用户指定的图表类型，将数据转换为特定图表工具所需的输入格式。## 输出变量说明:
1.根据{{#1746791092689.text#}}的数据,进行抽取,我要2个数据，data是y轴的数据，x-axis是x轴的数据，以便我后续生成柱状图、折线图、条形图等图形；
2.根据用户最原始的自然语言查询{{#1746791066048.input#}}，生成表的标题title标准输出格式：
'''
title：
data：
x-axis：
'''
其中每个“data与x-axis”，每个文本之间用 ";" 分隔示例输出:
title："产品销售额柱状图",
data： "5500;7200",
x-axis： "产品A;产品B",

7.参数提取

因为数据是一个文本格式text，需要具体提取出参数，大家可以也去试试大模型结构化输出

这里使用简单的参数提取节点

title：
data：
x-axis：

8.条件分支--图形判断

判断代码节点的chart_type类型，给到不同的图表插件。

9.画图

这些是你预设的、能够接收格式化数据并（理想情况下）输出可渲染Echarts图表的工具。

• 输入变量 (以饼图为例):
  • 标题: {{转换数据节点输出.unpacked_title}}
  • 数据: {{转换数据节点输出.unpacked_data}}
  • 分类: {{转换数据节点输出.unpacked_labels}}
• 输出: 这些插件的输出应该是Dify可以直接渲染的图表格式（例如，包含 ```echarts ... ``` 的文本）。

10.不画图

如果最初判断用户问题不需要图表，工作流会进入这个分支。

这里我们用一个LLM节点，根据用户的问题和“执行SQL”节点返回的（TEXT格式）查询结果，用自然语言生成一段简洁的文字回答。

你是数据分析专家，分析并输出sql查询结果.数据是：{{#1746791092689.text#}}
问题是：{{#1746791066048.input#}}
Sql语句：{{#1747016584129.text#}}回答要求:
1.列出详细数据，优先以表格方式列出数据。
2.如果数据超过10行，就只列出前十行和最后3行，中间可以使用省略号.

11.测试效果

"请查询普钢综合指数，时间范围是2025.1.1-5.6，并把指数信息按照折线图绘制",