当前位置： 首页 > news >正文

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

news 2025/7/4 11:35:52

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，并把指数信息按照折线图绘制",

http://www.dtcms.com/a/191736.html

相关文章：

  • 【Linux系统】从 C 语言文件操作到系统调用的核心原理
  • 校园网规划与设计方案
  • 医院网络安全托管服务(MSS)深度解读与实践路径
  • 学习黑客LAN与WAN详解-网络通信的局域与广域之旅
  • 华为2024年报：鸿蒙生态正在取得历史性突破
  • PCIe数据采集系统
  • 【系统架构师】2025论文《WEB系统性能优化技术》
  • Axure中继器高保真交互原型的核心元件
  • tomcat 400 The valid characters are defined in RFC 7230 and RFC 3986
  • 解锁数据密码：企业数据体系如何开启业务增长新引擎
  • 漏洞修复：tomcat 升级版本 spring-boot-starter-tomcat 的依赖项
  • 使用 TypeScript + dhtmlx-gantt 在 Next.js 中实现
  • 鸿蒙OSUniApp 制作自定义弹窗与模态框组件#三方框架 #Uniapp
  • 使用itextsharp5.0版本来合并多个pdf文件并保留书签目录结构
  • 从AlphaGo到ChatGPT：AI技术如何一步步改变世界？
  • 使用 Apache POI 生成 Word 文档
  • 第 83 场周赛：较大分组的位置、隐藏个人信息、连续整数求和、统计子串中的唯一字符
  • WordPress_Relevanssi Sql注入漏洞复现（CVE-2025-4396）
  • 2025最新ChatGPT Plus令牌(Token)限制完全指南：每日/每月用量详解与突破方法
  • 国产化Word处理控件Spire.Doc教程：通过C# 删除 Word 文档中的超链接
  • 网络安全-等级保护(等保) 2-5 GB/T 25070—2019《信息安全技术 网络安全等级保护安全设计技术要求》-2019-05-10发布【现行】
  • 2023CCPC河南省赛暨河南邀请赛个人补题ABEFGHK
  • Spark SQL 之 Analyzer
  • 基于vue3的权限管理系统脚手架搭建项目实战（二）：登录与路由权限控制
  • 一个基于 Spring Boot 的实现，用于代理百度 AI 的 OCR 接口
  • React与Docker中的MySQL进行交互
  • DeepSeek执行流程加速指南：跨框架转换与编译优化的核心策略全解析
  • Python60日基础学习打卡D26
  • 记一次bug排查(.exe链接mysql失败)-每天学习一点点
  • 【知识聚合】Java相关技术网址聚合