Dify+Echarts实现数据可视化

在和AI对话的过程中，数据可视化越来越成为一个刚需。比如智能问数场景下，当用户问“上个月各区域的销售额对比”，如果能直接甩出一张柱状图或折线图，体验感瞬间拉满。下面这张图展示了最终效果——AI把一个Excel表格，直接变成了专业的统计报表。

那么，具体怎么在Dify里实现这个能力？以最常见的“导入一个Excel文档，让Dify输出统计报表”为例，我们只需要新建一个ChatFlow，总共走6步，就能搞定。整体流程如下：

——维护可上传文件的功能。这个节点用来让用户上传Excel文档，是整个人机交互的入口。

——把上传的文档内容解析出来。这一步没什么花哨，就是把Excel里的数据变成大模型能读懂的文本格式。

——把上一步提取出来的文档内容，提交给大模型进行整理和格式转换。关键是要写好提示词，告诉模型你需要什么样的输出结构（比如CSV字符串、JSON等）。这一步相当于让大模型做“数据清洗+格式预检”。

——把大模型处理好的数据，再精确提取一次。这一步主要是为了让后续的代码执行节点拿到干净、结构化的数据，避免原始字符串里的脏数据干扰。

——这是核心步骤。用Python把上一步提取的CSV数据，组装成Echarts需要的JSON配置。具体代码如下（需要安装csv和json库，这两个是Python内置的，直接可用）：

import csv
import json

def 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}

注意代码里的关键点：先把CSV字符串解析成二维数组，然后把数值型字段转成float（避免后续字符串错误），最后按照Echarts官网的多图表布局组装配置。这里的配置用了两个网格（grid），上半部分展示柱状图，下半部分展示折线图，视觉上非常清晰。

——配置完成后，保存并发布。在调试阶段，可以输入测试数据，观察每一步的执行时间、Token消耗、输入输出是否正确。发布后，点击“运行”按钮会弹出一个新窗口，直接就可以和AI聊天了——上传一个Excel，就能看到图表报表。

关于Echarts的配置细节，第五步只是用了柱状图+折线图的组合示例。实际使用时，可以到Echarts官网（https://echarts.apache.org/zh/index.html）参考官方示例，替换series中的type和对应的数据绑定方式。比如改成饼图、散点图，甚至混合地图，都是可行的。

这个Demo的核心其实就两步：

，。其他步骤（文档提取、参数提取、开始节点）都是标准操作。只要把这两点掌握，你就能让Dify输出的图表活起来。