支持私有云部署
AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


Dify+Echarts实现数据可视化

发布日期:2025-03-28 06:29:03 浏览次数: 1678 作者:时光瞭望塔
推荐语

利用Dify和Echarts,轻松实现数据的可视化展示,提升智能对话体验。

核心内容:
1. 理解数据可视化的重要性及其在智能对话中的应用
2. 通过Dify实现从Excel文档到统计报表的步骤解析
3. 利用Python和Echarts构建图表的代码示例与说明

杨芳贤
53A创始人/腾讯云(TVP)最具价值专家
在跟AI对话的过程中,我们有时候可能需要它为我们以图表的形式展现数据,又或者在智能问数的场景下,以图表的方式展现问数的数据结果,可以极大程度提高用户体验性,大概如下图所示:
话不多说,让我们来看看怎么在dify中做到这样吧。
以下以导入一个Excel文档为例,让Didy输出统计报表。
新建一个ChatFlow,共包括6个步骤,如下图所示:
1、开始节点:维护可上传文件。
2、文档提取器节点:提取文档内容
3、大模型处理节点:上一步提取的文档内容提交给大模型整理和转换格式,自行设置好提示词。
4、参数提取节点:将上一步大模型处理的数据再次做提取。
5、代码执行节点:使用Python组装Echarts参数。
代码如下:
import csvimport 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": "line", "xAxisIndex": 1, "yAxisIndex": 1},            {"type": "line", "xAxisIndex": 1, "yAxisIndex": 1},            {"type": "line", "xAxisIndex": 1, "yAxisIndex": 1},            {"type": "line", "xAxisIndex": 1, "yAxisIndex": 1},            {"type": "line", "xAxisIndex": 1, "yAxisIndex": 1},            {"type": "line", "xAxisIndex": 1, "yAxisIndex": 1}        ]    }    # 生成输出文件    output = "```echarts\n" + json.dumps(echarts_config, indent=2, ensure_ascii=False) + "\n```"    return {"output":output}
6、输出结果。

调试:可以输入进行调试,调试过程可以看到每个步骤执行的过程,包括执行时间、使用token、输入输出。
发布:
运行:点击运行会弹出一个新窗口,就可以直接跟AI聊天了。

关于Echarts:
在第五步组装Echarts参数,可以参考Echarts官网的图表示例进行组装。
官网:https://echarts.apache.org/zh/index.html
示例:

以上以一个Demo的形式介绍在Dify中如何做图表展示,重点还是在组装参数和结果输出,其他可以忽略。如果按照我的步骤还跑不出来的,可以私信我要DSL文件导入测试。

53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询