在Dify中使用Echarts生成一个图表

huan_19932025-03-24 14:59

1、需求

在Dify中通过文件上传的方式，获取到文件数据，然后通过Echarts进行图表的展示。

整体思路如下： 开始节点(文件上传 ) -> 文档提取器(获取文档内容 ) -> 参数提取器（整理需要获取的参数 ）-> 代码执行节点（构建echarts图表需要的参数 ）-> 显示节点（进行图表的展示）

2、操作步骤

2.1 开始节点设置添加文件

此处设置文件的变量名称为input_file

2.2 通过文档提取器提取文档中的内容

文档提取器提取到的内容如下：

2.3 通过参数提取器进行参数的提取

提示词如下：

复制代码

将输入转换成一个字符串，示例如下 :
"[['1月', '2月'], ['260','60']]"

2.4 代码执行节点进行数据的转换

完整的代码如下：

js 复制代码

function main({json_str}) {
    // 1. 替换单引号为双引号（JSON标准格式）
    let jsonString = json_str.replace(/'/g, '"');
    // 2. 解析为 JavaScript 数组
    const json = JSON.parse(jsonString);
console.info(json);
    let option = {
        xAxis: {
            type: 'category',
            data: json[0]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: json[1],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
            }
        ]
    };

   let output = "```echarts\n" + JSON.stringify(option) + "\n```";

    return {
        result: output
    }
}

2.5 添加显示节点显示图表

3、运行结果

4、完整DSL文件

https://gitee.com/huan1993/configuration/blob/master/ai/dify/使用Echarts生成图表.yml