我用Dify+数据库+Echarts搭建了一个能“听懂”人话的数据可视化助手!(含自然语言转SQL)

你是否曾幻想过,

面对复杂的数据,

不再需要手动编写繁琐的SQL,

不再需要费力选择图表类型,

只需像和助手对话一样,

轻松说出你的数据分析需求,

精美的图表便能自动呈现在眼前?

使用效果如下:

Image 我将手把手带你利用dify的工作流编排能力和大型语言模型(LLM),搭建一个能“听懂”我们自然语言指令,自动查询数据库、判断图表类型,并最终生成酷炫Echarts图表的数据可视化助手!

忘记那些写死的SQL和固定的图表吧,是时候让数据分析变得如此智能和随心所欲了!

核心思路很简单: 用户用大白话提问 -> 工作流智能判断是否需要图表及图表类型 -> 将用户问题转化为SQL语句 -> 执行SQL查询数据库 -> 将查询结果处理成图表所需格式 -> 调用相应的Echarts图表插件生成图表 -> (如果不需要图表)LLM总结数据并回复。

听起来很酷?让我们一步步拆解这个工作流是如何搭建的。

1 数据准备

还是用中国历史票房红榜的数据了,使用Mysql数据库。

你可以根据自己的实际业务数据进行替换。

我们选取其中的年份、电影名称、评分、导演、票房来新建数据表。

新建数据库test。

新建数据库表boxoffice结构如下:

Image

-- ------------------------------ Table structure for boxoffice-- ----------------------------DROPTABLE IF EXISTS `boxoffice`;CREATETABLE `boxoffice`  (  `years` varchar(64) CHARACTERSET utf8 COLLATE utf8_unicode_ci NULLDEFAULTNULL,  `movie_name` varchar(255) CHARACTERSET utf8 COLLATE utf8_unicode_ci NULLDEFAULTNULL,  `score` floatNULLDEFAULTNULL,  `director` varchar(64) CHARACTERSET utf8 COLLATE utf8_unicode_ci NULLDEFAULTNULL,  `box_office` floatNULLDEFAULTNULL) ENGINE = MyISAM CHARACTERSET= utf8 COLLATE= utf8_unicode_ci ROW_FORMAT =Dynamic;

数据如下:

Image

2 搭建对话流

这次用到了两个插件,需要提前安装一下。

1、插件市场搜索“db”,找到【rookie_text2data】插件进行安装。

Image

2、插件市场搜索“Echarts”,找到【ECharts图表生成】插件进行安装。

Image

新建一个对话流,这次稍微复杂一点点,整体流程如下:

Image

2.1 开始节点

这里无需特殊配置,它将作为接收用户自然语言提问的入口。

2.2 判断用户问题 (LLM节点)

这是我们工作流的第一个“智能大脑”。

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

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

Image

完整提示词如下:

你是一个智能助手,需要根据用户的问题判断是否需要用图表展示数据,并判断适合的图表类型。  
请严格按照如下JSON格式输出,不要输出多余内容:

{
  "need_chart": true/false,  // 是否需要图表
  "chart_type": "bar/line/pie/none"  // 推荐的图表类型,bar=柱状图,line=折线图,pie=饼图,none=不需要图表
}

判断标准:
- 如果用户问题中包含“趋势”、“变化”、“对比”、“分布”、“比例”、“占比”、“增长”等词,通常需要图表。
- 如果用户问题中有“每年”、“历年”、“随时间”、“随年份”等,推荐折线图(line)。
- 如果用户问题中有“对比”、“排行”、“最多”、“最少”等,推荐柱状图(bar)。
- 如果用户问题中有“占比”、“比例”、“分布”等,推荐饼图(pie)。
- 如果用户只是问具体数值、详情、描述,不需要图表,chart_type 填 none。

示例:
用户问题:“请用图表展示历年票房变化”  
输出:{"need_chart": true, "chart_type": "line"}

用户问题:“各导演的票房占比是多少?”  
输出:{"need_chart": true, "chart_type": "pie"}

用户问题:“哪吒之魔童降世的票房是多少?”  
输出:{"need_chart": false, "chart_type": "none"}

现在请判断下面这个问题:
{{#sys.query#}}

2.3 自然语言转SQL(ROOKIE_TEXT2DATA)

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

输入变量:

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

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

大模型:我这里就用DeepSeek V3了。

Image

返回数据格式为TEXT,就是自然语言转成的SQL语句。

Image

自定义提示词:

表名:boxoffice
字段说明:
- years:年份,int
- movie_name:电影名,string
- score:评分,float
- director:导演,string
- box_office:票房,int

注意事项:
- 如有分组统计,请使用SUM、AVG等聚合函数,不要直接用原始字段。
- 所有非聚合字段必须出现在GROUP BY中。
- 只输出SQL语句,不要解释。

示例查询:
1. 查询每个导演的总票房:SELECT director, SUM(box_office) FROM boxoffice GROUP BY director;
2. 查询每年票房最高的电影:SELECT years, movie_name, MAX(box_office) FROM boxoffice GROUP BY years;

之所以选择这个插件,因为支持自定义提示词,这样就可以把表结构及注意事项都写在提示词中。

2.4 执行SQL(ROOKIE_EXCUTE_SQL)

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

  • 输入变量:

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

  • 返回数据格式: TEXT。

Image

Image

2.5 条件分支-判断是否需要图表

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

Image

2.6 处理图表数据

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

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

Image

完整提示词如下:

SYSTEM
你是一个数据格式化专家。你的核心任务是根据已执行的SQL查询结果和用户指定的图表类型,将数据转换为特定图表工具所需的输入格式。

## 上下文变量说明:
*`target_chart_type`: (String) 用户期望生成的图表类型,值为 "bar"、"pie" 或 "line"。此信息来源{{#1746780564950.text#}}。
*`sql_execution_result`: (JSON Array) SQL查询的执行结果,来源于{{#context#}}例如 `[{"category": "A", "value": 10}, {"category": "B", "value": 20}]`。
*`user_original_query`: (String) 用户最原始的自然语言查询,可用于辅助生成图表标题,,来源于{{#sys.query#}}。

## 图表工具输入规范:
1.**柱状图 (bar):**
    * 标题 (String)
    * 数据 (String): 数字用 ";" 分隔 (例如:"150;280;200")
    * x轴 (String): 文本用 ";" 分隔 (例如:"一月;二月;三月")

2.**饼图 (pie):**
    * 标题 (String)
    * 数据 (String): 数字用 ";" 分隔 (例如:"30;50;20")
    * 分类 (String): 文本用 ";" 分隔 (例如:"类型A;类型B;类型C")

3.**线性图表 (line):**
    * 标题 (String)
    * 数据 (String): 数字用 ";" 分隔 (例如:"10;15;13;18")
    * x轴 (String): 文本用 ";" 分隔 (例如:"周一;周二;周三;周四")

## 任务指令:

1.**解析核心数据**:
    * 将输入的 `sql_json_string_result` (它是一个字符串) **作为 JSON 进行解析**。解析后的结果可能是单个 JSON 对象(如果SQL只返回一行)或一个 JSON 对象数组(如果SQL返回多行)。我们将其称为 `core_sql_data`。
    * 例如,如果 `sql_json_string_result` 是字符串 `"[{\"colA\": \"val1\", \"colB\": 10}]"`,那么 `core_sql_data` 就是实际的数组 `[{"colA": "val1", "colB": 10}]`。
    * 如果 `sql_json_string_result` 是字符串 `"{\"colA\": \"val1\", \"colB\": 10}"`,那么 `core_sql_data` 就是实际的对象 `{"colA": "val1", "colB": 10}`。为了统一处理,如果它是单个对象,请将其视为只包含一个元素的数组。

2.**生成图表标题**: 参考 `user_original_query`,生成一个简洁明了的 `chart_tool_title`。

3.**数据提取与格式化 (基于 `core_sql_data`)**:
    * 分析 `core_sql_data`。数组中的每个对象代表一个数据点。你需要从中识别出用作标签/类别/x轴的字段(通常是文本或日期类型)和用作数值/数据的字段(通常是数字类型)。
    ***根据 `target_chart_type` 指示的类型进行处理:**
        ***若为 "bar"**:
            * 从 `core_sql_data` 中提取所有对象的数值字段值,用 ";" 连接成 `chart_tool_data_string`。
            * 提取所有对象的标签字段值,用 ";" 连接成 `chart_tool_label_string` (对应x轴)。
        ***若为 "pie"**:
            * 从 `core_sql_data` 中提取所有对象的数值字段值,用 ";" 连接成 `chart_tool_data_string`。
            * 提取所有对象的标签字段值,用 ";" 连接成 `chart_tool_label_string` (对应分类)。
        ***若为 "line"**:
            * 从 `core_sql_data` 中提取所有对象的数值字段值,用 ";" 连接成 `chart_tool_data_string`。
            * 提取所有对象的标签字段值,用 ";" 连接成 `chart_tool_label_string` (对应x轴).
    * 确保 `core_sql_data` 中至少有一个标签/类别字段和一个数值字段可供提取。如果字段不明确(例如,多个数字列),优先选择第一个文本/日期字段作为标签,第一个数字字段作为数据,或根据 `user_original_query` 中的暗示选择。

4.**构建输出**:
    * 以严格的JSON对象格式输出以下字段:
        *`chart_tool_title` (String)
        *`chart_tool_data_string` (String)
        *`chart_tool_label_string` (String)
        *`chart_type_final` (String, 其值应等于输入的 `target_chart_type`)

## 示例(假设变量已按上述说明传入):

* 若 `target_chart_type` = "bar"
* 若 `sql_json_string_result` (字符串) = `"[{\"product_name\": \"产品A\", \"total_sales\": 5500}, {\"product_name\": \"产品B\", \"total_sales\": 7200}]"`
* 若 `user_original_query` = "查询产品销售额柱状图"

期望的输出JSON:
```json
{
  "chart_tool_title": "产品销售额柱状图",
  "chart_tool_data_string": "5500;7200",
  "chart_tool_label_string": "产品A;产品B",
  "chart_type_final": "bar"
}

2.7 代码节点转换数据

功能就是提取LLM的数据,作为图表节点的输入。

Image

完整代码如下:

import json
import re # 导入正则表达式模块

defmain(llm_data_input):
    llm_data_str = llm_data_input

    # 1. 清理 Markdown 代码块标记 (保持你现有的健壮清理逻辑)
    llm_data_str = llm_data_str.strip()
    if llm_data_str.startswith("```json"):
        llm_data_str = llm_data_str[len("```json"):]
    elif llm_data_str.startswith("```"):
        llm_data_str = llm_data_str[len("```"):]
    if llm_data_str.endswith("```"):
        llm_data_str = llm_data_str[:-len("```")]
    llm_data_str = llm_data_str.strip()
    
    data = {}
    try:
        data = json.loads(llm_data_str)
    except json.JSONDecodeError as e:
        return {
            "unpacked_title": f"Error: Invalid JSON - {e}",
            "unpacked_data": "",
            "unpacked_labels": "",
            "chart_type": "error_invalid_json"
        }

    title = data.get("chart_tool_title", "无标题")
    original_data_string = data.get("chart_tool_data_string", "") # 获取原始数据字符串
    label_string = data.get("chart_tool_label_string", "")
    chart_type = data.get("chart_type_final")

    if chart_type isNone:
        chart_type = "unknown_type_from_llm"

    # 2. 清理和验证 data_string (这是关键的修改部分)
    cleaned_data_parts = []
    if original_data_string: # 只有当原始数据字符串非空时才处理
        parts = original_data_string.split(';')
        for part in parts:
            part = part.strip() # 移除每个部分前后的空格
            if part: #确保部分不是空字符串
                try:
                    # 尝试转换为 float 来验证它是否是有效数字
                    # 我们仍然以字符串形式保存,因为插件期望分号分隔的字符串
                    float(part) # 如果这里失败,会抛出 ValueError
                    cleaned_data_parts.append(part)
                except ValueError:
                    cleaned_data_parts.append("0") # 方案 b: 替换为 "0"
                    # print(f"Warning: Invalid data part '{part}' replaced with '0'.")
            else:
                # 如果部分是空字符串 (例如来自 ";;"),也替换为 "0" 或跳过
                cleaned_data_parts.append("0") # 方案 b: 替换为 "0"
                # print(f"Warning: Empty data part replaced with '0'.")
    
    unpacked_data = ";".join(cleaned_data_parts)

    return {
        "unpacked_title": title,
        "unpacked_data": unpacked_data, # 使用清理过的数据字符串
        "unpacked_labels": label_string, # 标签字符串通常不需要转为数字,所以保持原样
        "chart_type": chart_type
    }

2.8 条件分支

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

Image

2.9 饼图、柱状图、折线图

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

  • 输入变量 (以饼图为例):

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

Image

Image

Image

2.10 不需要图表LLM分析

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

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

Image

提示词如下:

请根据用户问题和查询结果,用简洁的中文自然语言回答。
用户问题:{{#sys.query#}}
查询结果:{{#context#}}

注意查询结果中票房数据不用换算,原数据展示,单位为万元

2.11 回复节点

这是工作流的终点,负责将生成的结果(无论是图表还是文字回答)展示给用户。

你需要配置此节点,使其能够正确接收并展示来自不同分支的输出。

Image

2.12 开场白设置

在Dify应用的“提示词编排”或“开场白”设置中,你可以设计一个友好的欢迎语和一些示例问题,引导用户开始提问。

点击预览按钮,找到右下角“管理”:

Image

点击编写开场白。

Image

设置开场白和开场问题。

Image

3 测试

测试生成3种格式的图表及无需生成图表的问题。

1、饼图测试。测试问题:各导演的票房占比是多少?

Image

可以看一下工作流具体是怎么工作的?

自然语言转SQL:

Image

转换数据:最后给图表插件传递的参数。

Image

2、折线图测试。测试问题:各导演的票房占比是多少?

Image

3、柱形图测试。测试问题:评分最高的五部电影。

Image

4、普通问题测试,无需生成图表,直接回答。

Image

通过Dify工作流的巧妙搭建,我们成功地让数据可视化助手学会了“聆听”。

自然语言转SQL,再到Echarts图表,一切都那么自然而高效。

如何零基础入门 / 学习AI大模型?

大模型时代,火爆出圈的LLM大模型让程序员们开始重新评估自己的本领。 “AI会取代那些行业?”“谁的饭碗又将不保了?”等问题热议不断。

不如成为「掌握AI工具的技术人」,毕竟AI时代,谁先尝试,谁就能占得先机!

想正式转到一些新兴的 AI 行业,不仅需要系统的学习AI大模型。同时也要跟已有的技能结合,辅助编程提效,或上手实操应用,增加自己的职场竞争力。

但是LLM相关的内容很多,现在网上的老课程老教材关于LLM又太少。所以现在小白入门就只能靠自学,学习成本和门槛很高

那么我作为一名热心肠的互联网老兵,我意识到有很多经验和知识值得分享给大家,希望可以帮助到更多学习大模型的人!至于能学习到多少就看你的学习毅力和能力了 。我已将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

这份完整版的大模型 AI 学习资料已经上传CSDN,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费

👉 福利来袭CSDN大礼包:《2025最全AI大模型学习资源包》免费分享,安全可点 👈

全套AGI大模型学习大纲+路线

AI大模型时代的学习之旅:从基础到前沿,掌握人工智能的核心技能!

read-normal-img

640套AI大模型报告合集

这套包含640份报告的合集,涵盖了AI大模型的理论研究、技术实现、行业应用等多个方面。无论您是科研人员、工程师,还是对AI大模型感兴趣的爱好者,这套报告合集都将为您提供宝贵的信息和启示。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

👉学会后的收获:👈
基于大模型全栈工程实现(前端、后端、产品经理、设计、数据分析等),通过这门课可获得不同能力;

能够利用大模型解决相关实际项目需求: 大数据时代,越来越多的企业和机构需要处理海量数据,利用大模型技术可以更好地处理这些数据,提高数据分析和决策的准确性。因此,掌握大模型应用开发技能,可以让程序员更好地应对实际项目需求;

• 基于大模型和企业数据AI应用开发,实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能, 学会Fine-tuning垂直训练大模型(数据准备、数据蒸馏、大模型部署)一站式掌握;

能够完成时下热门大模型垂直领域模型训练能力,提高程序员的编码能力: 大模型应用开发需要掌握机器学习算法、深度学习框架等技术,这些技术的掌握可以提高程序员的编码能力和分析能力,让程序员更加熟练地编写高质量的代码。

👉 福利来袭CSDN大礼包:《2025最全AI大模型学习资源包》免费分享,安全可点 👈

img

这份完整版的大模型 AI 学习资料已经上传CSDN,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费

作为普通人,入局大模型时代需要持续学习和实践,不断提高自己的技能和认知水平,同时也需要有责任感和伦理意识,为人工智能的健康发展贡献力量。

### Dify 中使用 ECharts 进行数据可视化 #### 配置环境 为了在 Dify 平台中成功部署并运行带有 ECharts 图表的应用程序,需先确认前端框架支持 JavaScript 库引入。通常情况下,在 HTML 文件头部加入如下脚本标签即可加载最新版本的 ECharts: ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> ``` 此 CDN 地址提供了稳定快速访问途径[^1]。 #### 初始化图表容器 创建一个用于容纳图表显示区域的 `div` 元素,并赋予特定 ID 或类名以便后续定位与操作。例如: ```html <div id="main" style="width: 600px;height:400px;"></div> ``` 这段代码片段定义了一个固定大小为 600x400 像素的矩形框作为绘图空间[^2]。 #### 编写初始化逻辑 利用 JavaScript 动态生成图表实例并与上述 DOM 节点关联起来。这里给出一段简单的例子说明如何完成这一过程: ```javascript // 获取DOM节点 var mainDiv = document.getElementById('main'); // 创建ECharts实例 var myChart = echarts.init(mainDiv); // 定义图表配置选项 var option = { title: { text: 'Dify 数据展示' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 设置图表参数 myChart.setOption(option); ``` 该段代码实现了基本柱状图绘制功能,其中包了标题、坐标轴以及序列等必要组成部分[^3]。 #### 结合 Django 后端提供动态数据源 如果希望进一步增强交互性和实时更新能力,则可以通过 AJAX 请求从服务器拉取最新的统计数据填充至客户端渲染层。假设已经搭建好基于 Python 的 Web API 接口 `/api/getData` 返回 JSON 格式的响应体,那么可以在之前的 JS 代码基础上做适当调整以适应新的需求: ```javascript $.get('/api/getData').done(function(response){ var parsedResponse = $.parseJSON(response); myChart.setOption({ // 更新series中的data字段等内容... series : [ {name:'销量',type:'bar',data:parsedResponse.sales} ] }); }); ``` 此处展示了当接收到异步回调后怎样安全解析并应用新获取的数据集到现有视图结构之中[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值