Dify+ECharts让数据可视化全自动

Dify知识库存储ECharts模板,让AI自动生成动态图表!3分钟配置完成,以后只需要告诉AI你的数据,瞬间生成专业图表。

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

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

核心思路解析

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

Dify+ECharts让数据可视化全自动

工作流程:

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代码

Dify+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万
Dify+ECharts让数据可视化全自动

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

用户输入:

制作一个用户来源分析饼图:
搜索引擎:45%
社交媒体:30%
直接访问:15%
其他:10%
Dify+ECharts让数据可视化全自动

进阶优化:让系统更智能

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

(0)
打赏 微信赞赏 微信赞赏 支付宝赞赏 支付宝赞赏
上一篇 2025-09-01 17:38
下一篇 2025-09-07 14:53

相关推荐

发表回复

登录后才能评论
扫码了解
扫码了解
反馈建议
分享本页
返回顶部