当前位置：首页 > news >正文

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

news 2025/7/4 8:53:20

1、需求

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

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

2、操作步骤

2.1 开始节点设置添加文件

开始节点设置添加文件
此处设置文件的变量名称为input_file

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

在这里插入图片描述
文档提取器提取到的内容如下：

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

通过参数提取器进行参数的提取
提示词如下：

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

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

代码执行节点进行数据的转换
完整的代码如下：


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