用Dify知识库存储ECharts模板,让AI自动生成动态图表!3分钟配置完成,以后只需要告诉AI你的数据,瞬间生成专业图表。
想象一下:”帮我生成一个本月销售趋势图,数据是1月100万,2月120万,3月150万”,AI立刻给你一个完美的可视化图表。这就是我们今天要实现的效果!
方案原理:让AI成为你的图表专家
核心思路解析
这个方案的精髓在于数据与展示分离:

工作流程:
1. 模板存储:将各种图表的ECharts配置作为结构化文本存入Dify知识库
2. 智能检索:LLM根据用户需求自动匹配最合适的图表模板
3. 数据填充:将真实数据替换模板中的占位符
4. 即时渲染:输出标准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图表模板库”
2. 组织模板内容
# 柱状图模板
适用场景:对比不同类别的数值大小
模板代码:
```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}%”:显示标签格式(名称:百分比)
3. 优化检索设置
- 文档分割长度:1000字符
- 检索模式:混合检索
- Top K:3(确保能检索到多个相关模板)
第三步:配置智能工作流
在Dify中创建一个新的工作流应用:
1. 输入节点:接收用户的图表需求
2. 知识检索节点:从模板库中检索合适的图表模板
3. LLM节点:分析用户数据并填充模板
4. 输出节点:返回完整的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应用或移动应用中。
转载作品,原作者:老王AIGC,文章来源:https://mp.weixin.qq.com/s/e5RaNU4nfkc0HRDeCtiQhw
微信赞赏
支付宝赞赏 