Dify+Echarts实现数据可视化

在跟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 = "```echartsn" + json.dumps(echarts_config, indent=2, ensure_ascii=False) + "n```"    return {"output":output}

6、输出结果。