告别Excel手动制图：10分钟教你用Dify+ECharts生成智能图表！全程干货简单易懂！建议收藏！！

本文介绍了一种使用Dify知识库存储ECharts模板，通过AI自动生成动态图表的解决方案。该方案将数据与展示分离，实现了模板复用、智能匹配、数据分离和即时生成的技术优势。文章详细提供了柱状图、折线图、饼图三种常见图表模板的配置方法，并展示了如何通过Dify工作流实现从用户需求到图表生成的完整流程。该方法能将原本需要30分钟的手工制图缩短至3秒，大幅提升数据可视化效率。

嘴巴吃糖了

1112人浏览 · 2025-09-01 11:02:32

嘴巴吃糖了 · 2025-09-01 11:02:32 发布

引言

还在为每天重复制作相似的数据图表而烦恼吗？每次老板要个销售报表，你都得打开Excel，复制数据，调整格式，生成图表…这套流程下来至少半小时。

今天教你一个神技：用Dify知识库存储ECharts模板，让AI自动生成动态图表！3分钟配置完成，以后只需要告诉AI你的数据，瞬间生成专业图表。

想象一下：“帮我生成一个本月销售趋势图，数据是1月100万，2月120万，3月150万”，AI立刻给你一个完美的可视化图表。这就是我们今天要实现的效果！

方案原理：让AI成为你的图表专家

核心思路解析

这个方案的精髓在于数据与展示分离：

在这里插入图片描述

工作流程：

模板存储：将各种图表的ECharts配置作为结构化文本存入Dify知识库
智能检索：LLM根据用户需求自动匹配最合适的图表模板
数据填充：将真实数据替换模板中的占位符
即时渲染：输出标准ECharts代码，前端自动显示图表

技术优势

模板复用：一次创建，无限使用
智能匹配：AI自动选择最合适的图表类型
数据分离：模板与数据独立，便于维护
即时生成：秒级响应，告别手工制图

实战配置：手把手教你搭建

第一步：准备ECharts图表模板

首先创建几个常用的图表模板，以柱状图为例：

{
"title":{
"text":"{{CHART_TITLE}}",
"left":"center"
},
"tooltip":{
"trigger":"axis",
"axisPointer":{
"type":"line"
},
"formatter":"{b} : {c}"
},
"xAxis":{
"type":"category",
"data":{{X_AXIS_DATA}}
},
"yAxis":{
"type":"value",
"name":"{{Y_AXIS_NAME}}"
},
"series":[{
"name":"{{SERIES_NAME}}",
"type":"bar",
"data":{{SERIES_DATA}},
"itemStyle":{
"color":"rgba(255, 99, 132, 0.8)"
}
}]
}

关键点说明：

• {{CHART_TITLE}}：图表标题占位符
• {{X_AXIS_DATA}}：X轴数据占位符
• {{SERIES_DATA}}：系列数据占位符
• 占位符格式统一使用双花括号，便于LLM识别和替换

第二步：上传到Dify知识库

1. 创建知识库文档

• 登录Dify控制台
• 进入"知识库"模块
• 创建新文档"ECharts图表模板库"

1. 组织模板内容

# 柱状图模板
适用场景：对比不同类别的数值大小
模板代码：
```json
{
  "title": {
    "text": "{{CHART_TITLE}}",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis",
    "axisPointer": {
      "type": "line"
    },
    "formatter": "{b} : {c}"
  },
  "xAxis": {
    "type": "category",
    "data": {{X_AXIS_DATA}}
  },
  "yAxis": {
    "type": "value",
    "name": "{{Y_AXIS_NAME}}"
  },
  "series": [{
    "name": "{{SERIES_NAME}}",
    "type": "bar",
    "data": {{SERIES_DATA}},
    "itemStyle": {
      "color": "rgba(255, 99, 132, 0.8)"
    }
  }]
}

关键点说明：

• {{CHART_TITLE}}：图表标题占位符
• {{X_AXIS_DATA}}：X轴分类数据，如[“一月”, “二月”, “三月”]
• {{Y_AXIS_NAME}}：Y轴名称占位符
• {{SERIES_NAME}}：数据系列名称占位符
• {{SERIES_DATA}}：柱状图数据，如[120, 200, 150]

折线图模板

适用场景：展示数据随时间的变化趋势
模板代码：

{
"title":{
"text":"{{CHART_TITLE}}",
"left":"center"
},
"tooltip":{
"trigger":"axis",
"axisPointer":{
"type":"cross"
},
"formatter":"{b} : {c}"
},
"xAxis":{
"type":"category",
"data":{{X_AXIS_DATA}},
"boundaryGap":false
},
"yAxis":{
"type":"value",
"name":"{{Y_AXIS_NAME}}"
},
"series":[{
"name":"{{SERIES_NAME}}",
"type":"line",
"data":{{SERIES_DATA}},
"smooth":true,
"lineStyle":{
"color":"rgba(54, 162, 235, 1)",
"width":2
},
"itemStyle":{
"color":"rgba(54, 162, 235, 0.8)"
},
"areaStyle":{
"color":"rgba(54, 162, 235, 0.1)"
}
}]
}

关键点说明：

• {{CHART_TITLE}}：图表标题占位符
• {{X_AXIS_DATA}}：X轴时间数据，如[“1月”, “2月”, “3月”]
• {{Y_AXIS_NAME}}：Y轴名称占位符
• {{SERIES_NAME}}：数据系列名称占位符
• {{SERIES_DATA}}：折线图数据，如[820, 932, 901]
• smooth: true：开启平滑曲线效果
• areaStyle：添加面积填充效果

饼图模板

适用场景：展示各部分占整体的比例
模板代码：

{
"title":{
"text":"{{CHART_TITLE}}",
"left":"center"
},
"tooltip":{
"trigger":"item",
"formatter":"{a} <br/>{b} : {c} ({d}%)"
},
"legend":{
"orient":"vertical",
"left":"left"
},
"series":[{
"name":"{{SERIES_NAME}}",
"type":"pie",
"radius":"50%",
"center":["50%","60%"],
"data":{{PIE_DATA}},
"emphasis":{
"itemStyle":{
"shadowBlur":10,
"shadowOffsetX":0,
"shadowColor":"rgba(0, 0, 0, 0.5)"
}
},
"label":{
"show":true,
"formatter":"{b}: {d}%"
}
}]
}

关键点说明：

• {{CHART_TITLE}}：图表标题占位符
• {{SERIES_NAME}}：数据系列名称占位符
• {{PIE_DATA}}：饼图数据，格式如[{“value”: 1048, “name”: “搜索引擎”}, {“value”: 735, “name”: “直接访问”}]
• radius: "50%"：饼图半径大小
• center: ["50%", "60%"]：饼图中心位置
• emphasis：鼠标悬停时的高亮效果
• label.formatter: "{b}: {d}%"：显示标签格式（名称：百分比）

1. 优化检索设置

• 文档分割长度：1000字符
• 检索模式：混合检索
• Top K：3（确保能检索到多个相关模板）

第三步：配置智能工作流

在Dify中创建一个新的工作流应用：

1. 输入节点：接收用户的图表需求
1. 知识检索节点：从模板库中检索合适的图表模板
1. LLM节点：分析用户数据并填充模板
1. 输出节点：返回完整的ECharts代码

LLM提示词模板：

你是一个专业的ECharts数据可视化专家。根据用户提供的数据和需求，从检索到的模板中选择最合适的一个，并生成标准的ECharts配置。

用户需求：{{user_input}}
检索到的模板：{{retrieval_result}}

请严格按以下步骤操作：
1. 分析用户数据类型和可视化目标
2. 从检索结果中选择最匹配的图表模板
3. 将用户数据按ECharts标准格式填入占位符
4. 输出完整且可直接使用的ECharts option配置

输出要求：
- 必须输出标准的ECharts option JSON格式
- 所有占位符{{}}必须被实际数据替换
- 确保JSON语法完全正确，可直接用于echarts.setOption()
- 数据格式严格遵循ECharts规范：
  * 字符串用双引号包围
  * 数组格式正确：["item1", "item2"]
  * 数值不加引号：[100, 200, 300]
- 图表标题简洁明了，符合数据内容

输出格式示例：
echarts
{
  "title": {"text": "销售数据统计", "left": "center"},
  "xAxis": {"type": "category", "data": ["1月", "2月", "3月"]},
  "yAxis": {"type": "value"},
  "series": [{"name": "销售额", "type": "bar", "data": [120, 200, 150]}]
}

注意：输出的JSON必须能够直接复制粘贴到ECharts中使用，不允许有任何语法错误。

实战演示：从数据到图表一步到位

测试案例1：销售数据柱状图

用户输入：

帮我生成一个季度销售对比图，数据如下：
Q1: 280万
Q2: 320万
Q3: 380万
Q4: 420万

测试案例2：用户占比饼图

用户输入：

制作一个用户来源分析饼图：
搜索引擎：45%
社交媒体：30%
直接访问：15%
其他：10%

进阶优化：让系统更智能

1. 扩展模板库

根据业务需求，持续添加新的图表模板：

• 散点图（相关性分析）
• 雷达图（多维度对比）
• 热力图（数据密度展示）
• 仪表盘（KPI监控）

2. 智能数据处理

在LLM节点中增加数据预处理逻辑：

数据处理规则：
1. 自动识别数据类型（数值、日期、分类）
2. 处理缺失值和异常值
3. 自动格式化（千分位、百分比等）
4. 智能推荐图表类型

3. 样式主题定制

创建企业专属的图表主题：

{
"color":["#5470c6","#91cc75","#fac858","#ee6666"],
"backgroundColor":"#ffffff",
"textStyle":{
"fontFamily":"Microsoft YaHei",
"fontSize":12
}
}

FAQ常见问题解答

Q1：模板检索不准确怎么办？
A：优化知识库文档的描述信息，为每个模板添加详细的适用场景说明，提高检索精度。

Q2：生成的图表样式不满意？
A：可以在模板中预设多套样式主题，让用户选择，或者通过追加指令进行样式调整。

Q3：支持哪些数据格式？
A：支持JSON、CSV文本、表格数据等多种格式，LLM会自动进行格式转换。

Q4：如何处理大数据量？
A：建议对数据进行预处理和采样，避免前端渲染压力过大，同时可以添加数据分页功能。

Q5：能否集成到现有系统？
A：完全可以！通过Dify的API接口，可以轻松集成到任何Web应用或移动应用中。

总结

通过Dify知识库+ECharts的组合，我们成功打造了一个智能图表生成系统。这个方案的核心价值在于：

✅ 效率提升：从30分钟手工制图到3秒AI生成
✅ 质量保证：专业模板确保图表美观统一
✅ 灵活扩展：模板库可持续丰富和优化
✅ 成本降低：一次配置，长期受益
✅ 无依赖部署：纯前端实现，无需安装外部插件或组件

无论你是数据分析师、产品经理，还是运营人员，这个智能图表生成器都能大幅提升你的工作效率。赶紧动手试试吧，让AI成为你的专属图表设计师！

下一步，你可以尝试集成更多图表类型，或者添加数据源连接功能，打造属于自己的数据可视化平台。

最后

为什么要学AI大模型

当下，⼈⼯智能市场迎来了爆发期，并逐渐进⼊以⼈⼯通⽤智能（AGI）为主导的新时代。企业纷纷官宣“ AI+ ”战略，为新兴技术⼈才创造丰富的就业机会，⼈才缺⼝将达 400 万！

DeepSeek问世以来，生成式AI和大模型技术爆发式增长，让很多岗位重新成了炙手可热的新星，岗位薪资远超很多后端岗位，在程序员中稳居前列。

在这里插入图片描述

与此同时AI与各行各业深度融合，飞速发展，成为炙手可热的新风口，企业非常需要了解AI、懂AI、会用AI的员工，纷纷开出高薪招聘AI大模型相关岗位。
在这里插入图片描述
最近很多程序员朋友都已经学习或者准备学习 AI 大模型，后台也经常会有小伙伴咨询学习路线和学习资料，我特别拜托北京清华大学学士和美国加州理工学院博士学位的鲁为民老师给大家这里给大家准备了一份涵盖了AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频 全系列的学习资料，这些学习资料不仅深入浅出，而且非常实用，让大家系统而高效地掌握AI大模型的各个知识点。