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

原创已于 2025-05-15 19:16:14 修改 · 1.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#信息可视化

于 2025-05-15 18:10:33 首次发布

人工智能AI 同时被 2 个专栏收录

12 篇文章

订阅专栏

Dify

10 篇文章

订阅专栏

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

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

核心特点

丰富的图表类型
支持30+种图表类型，包括折线图、柱状图、饼图、散点图、雷达图、地图、热力图、树图、旭日图等
支持多维数据分析展示

强大的交互功能
提供数据缩放、拖拽重计算、数据区域选择等交互功能
支持图例、工具箱、数据区域缩放、视觉映射等组件


import csv
import json

def 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.问题判断

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

模型选择: 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行，中间可以使用省略号.