Dify集成 Echarts 实现智能数据报表集成与展示实战详解

一、前言

二、Dify介绍

[2.1 Dify是什么](#2.1 Dify是什么)

[2.2 Dify核心特性](#2.2 Dify核心特性)

[2.2.1 Dify特点](#2.2.1 Dify特点)

[2.2.2 多模型支持](#2.2.2 多模型支持)

[2.3 基于Dify 开发数据报表优势](#2.3 基于Dify 开发数据报表优势)

[三、基于Dify 集成Echarts实现报表展示操作过程](#三、基于Dify 集成Echarts实现报表展示操作过程)

[3.1 Dify 集成使用Echarts使用方式一](#3.1 Dify 集成使用Echarts使用方式一)

[3.1.1 创建应用](#3.1.1 创建应用)

[3.1.2 配置代码执行节点](#3.1.2 配置代码执行节点)

[3.1.3 更换其他图表](#3.1.3 更换其他图表)

[3.2 Dify 集成使用Echarts使用方式二](#3.2 Dify 集成使用Echarts使用方式二)

[3.2.1 安装Echarts插件](#3.2.1 安装Echarts插件)

[3.2.2 添加Echarts插件节点](#3.2.2 添加Echarts插件节点)

[3.2.3 配置Echarts插件节点参数](#3.2.3 配置Echarts插件节点参数)

[3.3 读取excel 生成数据图表](#3.3 读取excel 生成数据图表)

[3.3.1 配置开始节点](#3.3.1 配置开始节点)

[3.3.2 添加文档提取器节点](#3.3.2 添加文档提取器节点)

[3.3.3 配置大模型节点](#3.3.3 配置大模型节点)

[3.3.4 配置参数提取器节点](#3.3.4 配置参数提取器节点)

[3.3.5 配置大模型节点](#3.3.5 配置大模型节点)

[3.3.6 增加参数提取器节点](#3.3.6 增加参数提取器节点)

[3.3.7 增加代码节点](#3.3.7 增加代码节点)

[3.3.8 连接结束节点](#3.3.8 连接结束节点)

[3.3.9 效果测试](#3.3.9 效果测试)

四、写在文末

一、前言

随着AI智能体的发展，智能体在很多领域开始大展身手。对传统的业务系统来说，实现一个新的功能，从设计到最终开发完成，这个过程的耗时可能非常长。当AI智能体走进人们的视野，并逐渐被越来越多的人使用之后，人们惊讶的发现，一个可以实现商用的应用系统，只需要短短的几天，甚至几个小时就可以快速做出来。这让人有理由相信，智能体已经强大到什么程度了，究竟智能体的潜力是不是没有上限呢？本篇以Dify为例来，来搭建一个传统的应用系统中常用的功能，即数据大屏展示。

二、Dify介绍

2.1 Dify是什么

Dify 是一个开源的大模型应用开发平台，旨在帮助开发者快速构建、部署和管理基于大型语言模型（LLM）的 AI 应用。它提供了一套完整的工具链，支持从提示词工程（Prompt Engineering）到应用发布的全流程，适用于企业级 AI 解决方案和个人开发者项目。

官网入口：Dify: Production-Ready AI Agent Builder

中文站入口：Dify：企业级 AI Agent 开发平台

2.2 Dify核心特性

2.2.1 Dify特点

Dify 具备如下核心特点：

可视化编排工作流
- 通过低代码界面设计 AI 应用流程，无需深入编程即可构建复杂的 LLM 应用。
- 支持对话型（Chat App）和文本生成型（Completion App）应用。
多模型支持
- 兼容主流大模型 API，如 OpenAI GPT、Anthropic Claude、Cohere、Hugging Face 等。
- 支持私有化部署的 Llama 2、ChatGLM、通义千问等开源模型。
灵活的提示词工程
- 提供 Prompt 模板、变量插值、上下文管理等功能，优化 AI 输出效果。
- 支持 RAG（检索增强生成），可结合外部知识库提升回答准确性。
数据管理与持续优化
- 记录用户与 AI 的交互日志，用于分析和迭代改进模型效果。
- 支持 A/B 测试，对比不同提示词或模型版本的表现。
企业级功能
- 支持多租户、权限管理，适合团队协作开发。
- 可私有化部署，保障数据安全。

2.2.2 多模型支持

在dify控制台，内置了非常多大模型可供用户选择使用，比如GPT系列，DeepSeek模型、千问系列模型等，基于这些模型，应用开发者可以自由灵活的选择并使用。

2.3 基于Dify 开发数据报表优势

基于 Dify 开发数据报表具有以下优势，结合其低代码、AI 集成能力和灵活部署特性，可显著提升数据分析和可视化效率，具体来说：

1）低代码/无代码开发，降低技术门槛

拖拽式设计：通过可视化界面快速构建报表，无需深入编码，业务人员可直接参与开发。
预置模板：复用行业通用报表模板（如销售、运营分析），缩短开发周期。
快速迭代：灵活调整字段、图表类型和数据源，适应动态业务需求。

2）强大的 AI 集成能力

自然语言查询（NLQ）：用户可通过对话（如"显示上月销售额趋势"）生成实时报表，降低SQL/技术依赖。
智能洞察：自动分析数据异常、趋势预测（如集成Python模型或Dify内置AI），生成解释性文本辅助决策。
多模态输出：支持图表、文本摘要、语音播报等多种呈现方式。

3）多数据源整合与实时处理

统一连接层：对接数据库（MySQL、PostgreSQL）、API、Excel及云服务（如AWS S3），消除数据孤岛。
实时/批处理支持：通过Dify工作流配置定时任务或流式数据处理，确保报表时效性。
数据清洗与转换：内置ETL工具（如字段映射、过滤），减少预处理环节。

4）企业级部署与安全控制

私有化部署：支持本地或私有云部署，保障敏感数据不外流。
权限精细化：基于角色（RBAC）控制报表访问、编辑权限，满足合规要求（如GDPR）。
审计日志：追踪报表修改、访问记录，增强数据治理。

5）交互性与协作增强

动态筛选与下钻：用户可自定义时间范围、维度交互分析，无需重新开发。
共享与嵌入：一键分享链接或嵌入其他系统（如企业微信、OA），提升协作效率。
评论与标注：团队成员直接在报表上添加注释，促进上下文沟通。

6）性能优化与扩展性

缓存机制：对高频查询数据缓存，加速加载速度。
分布式支持：横向扩展应对海量数据（如日志分析场景）。
插件生态：集成第三方BI工具（如Tableau插件）或自定义Python脚本扩展功能。

7）成本效益

减少人力投入：开发效率提升50%+，尤其适合中小团队。
资源复用：同一平台可同时开发报表、AI应用（如客服分析机器人），降低工具采购成本。

三、基于Dify 集成Echarts实现报表展示操作过程

接下来通过案例操作演示实现一下基于Dify 集成Echarts实现报表展示操作过程

3.1 Dify 集成使用Echarts使用方式一

3.1.1 创建应用

创建一个空白应用，创建一个ChatFlow 应用，如下，填写应用名称和引用描述

确认无误后点击创建，创建成功后跳转到下面的配置页面

3.1.2 配置代码执行节点

Echarts 官方示例文档地址：Examples - Apache ECharts，如下，官方提供了很多类型的图标样例可供参考和使用

在dify中，提供了代码节点用于执行开发者的代码，接下来添加一个代码节点，如下：

在代码执行这里，提供了2种语言的代码，js和python，可以根据自己的需要选择，比如我这里使用python3代码，参考如下代码：

python 复制代码

import json
 
def main():
    option = {
        "xAxis": {
            "type": "category",
            "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        "yAxis": {
            "type": "value"
        },
        "series": [
            {
                "data": [120, 200, 150, 80, 70, 110, 130],
                "type": "bar"
            }
        ]
    }
 
    # 将字典转换为格式化的 JSON 字符串
    option_json = json.dumps(option, indent=2)
    
    # 构建正确的 Markdown 代码块
    output = "```echarts\n" + option_json + "\n```"
    
    return {"result": output}

将上面的代码复制到右侧的代码框中

连接结束节点进行测试，结束节点的回复使用上一个代码节点的输出，然后点击发布更新，再预览执行，可以看到下面的柱状图效果就出来了

3.1.3 更换其他图表

基于上一步的代码配置，如果你想展示其他的官网上面的图表效果，只需要做2步即可。

1）复制官网demo的js样式代码

如下，找到一个饼状图的demo的js代码，拷贝option中的代码

2）替换上一步代码节点中option部分

在上一步的python代码中，用本次的demo中的option代码替换一下，待替换的代码如下：

python 复制代码

option = {
        "tooltip": {
                "trigger": 'item'
        },
        "legend": {
                "top": '5%',
                "left": 'center'
        },
        "series": [{
                "name": 'Access From',
                "type": 'pie',
                "radius": ['40%', '70%'],
                "avoidLabelOverlap": False,
                "itemStyle": {
                        "borderRadius": 10,
                        "borderColor": '#fff',
                        "borderWidth": 2
                },
                "label": {
                        "show": False,
                        "position": 'center'
                },
                "emphasis": {
                        "label": {
                                "show": True,
                                "fontSize": 40,
                                "fontWeight": 'bold'
                        }
                },
                "labelLine": {
                        "show": False
                },
                "data": [{
                        "value": 1048,
                        "name": 'Search Engine'
                },
                {
                        "value": 735,
                        "name": 'Direct'
                },
                {
                        "value": 580,
                        "name": 'Email'
                },
                {
                        "value": 484,
                        "name": 'Union Ads'
                },
                {
                        "value": 300,
                        "name": 'Video Ads'
                }]
        }]
};

替换完成之后，再次更新发布并预览，此时就可以看到饼状图的效果展示了，是不是很简单。

3.2 Dify 集成使用Echarts使用方式二

3.2.1 安装Echarts插件

在dify的插件市场，搜索Echarts，选择第一个点击安装即可

安装成功后可以在我的插件市场中看到自己安装的所有插件

3.2.2 添加Echarts插件节点

仍然使用上面的应用，这次选择增加一个插件节点，如下，选择工具，在工具一栏就能看到上一步增加的Echarts插件工具，选择一个柱状图

3.2.3 配置Echarts插件节点参数

在柱状图的节点配置参数中，重点关注两个必填项，即"数据"和"X轴"的数据格式

在测试过程中，可以先从Echarts官网中拷贝一个数据填充进去

拷贝样例中的数据到节点配置参数中，如下：

这样配置完成后，点击发布更新预览，此时就能得到一个柱状图的效果了

3.3 读取excel 生成数据图表

接下来通过一个实际操作案例，通过读取本地excel的数据，最后通过dify集成echarts插件生成一个图表进行展示，基于上面创建的应用，下面看具体的操作过程。

3.3.1 配置开始节点

开始节点，需要配置文件类型参数，以读取用户上传的excel文件，如下在开始节点配置参数中，添加一个单文件类型的输入参数

3.3.2 添加文档提取器节点

首先，需要读取用户上传的excel并解析数据，所以这里需要首先添加一个文档提取器节点，如下

入参选择开始节点的file

3.3.3 配置大模型节点

配置一个大模型节点，将上一步提取出来的数据进行格式转换，转为csv格式的数据输出，首先需要配置如下提示词：

bash 复制代码

# 角色
你是一个数据整理专家，擅长数据格式的整合和数据转换

# 数据


# 任务
先从数据中提取出满足用户要求的数据

 然后把数据转换为csv格式


# 输出
把csv格式的数据输出

配置用户提示信息

3.3.4 配置参数提取器节点

上一步大模型节点会输出csv格式的结果，但是不一定能够满足Echarts图表展示中需要的参数格式形式，所以需要通过参数提取器，转为特定的格式才行，增加一个参数提取器节点

点击工具导入，在弹出框中填写如下信息

3.3.5 配置大模型节点

增加一个大模型节点，将上一步提取出来的参数转为json格式数据，因为Echarts图表最终需要json格式的参数，在系统提示词中配置如下内容

bash 复制代码

# 角色
你是一个csv格式数据转json数据的技术专家，擅长把csv格式转为对应的json数据

# 数据
这个数据只有两列

#任务
把csv中的两列数据转为对应的json数据

比如：
水果,数量,价格\n 苹果,10,50 \n 香蕉,12,38 \n 荔枝,15,60
\n 李子,12,35

转换为：
{
        "name": ["《苹果》","《香蕉》","《荔枝》","李子"],
        "values": [10,12,15,13]
}

# 输出
把上面转换得到的json数据输出即可

3.3.6 增加参数提取器节点

再增加一个参数提取器节点，将上一步的json参数提取并输出为特定格式的字符串，放到变量中，给下一步使用

3.3.7 增加代码节点

增加一个代码节点，将上一步的json字符串数据，拼装为echarts要求的格式的数据，完整的示例代码如下：

python 复制代码

import json
import re
def main(jsonData: str) -> dict:
    
    #去除换行符和制表符
    clean_str = re.sub(r'[\n\t]','',jsonData)
    clean_str = re.sub(r'\\"','"',clean_str)

    #去除转义的双引号（将\"替换为"）
    name_pattern = r'"name":\s*\[(.*?)\]'
    values_pattern = r'"values":\s*\[(.*?)\]'

    #提取name和values的值
    name_match = re.search(name_pattern,clean_str)
    values_match = re.search(values_pattern,clean_str)

    names = []
    if name_match:
        names = re.findall(r'"([^"]*)"',name_match.group(1))

    values = []
    if values_match:
        values = [float(num.strip()) for num in values_match.group(1).split(',')]

    option = {
        "xAxis": {
            "type": "category",
            "data": names
        },
        "yAxis": {
            "type": "value"
        },
        "series": [
            {
                "data": values,
                "type": "bar"
            }
        ]
    };
 
    # 构建正确的 Markdown 代码块
    output = f'```echarts\n{json.dumps(option,ensure_ascii=False)}\n```'
    
    return {"result": output}

3.3.8 连接结束节点

连接到结束节点，回复内容使用上一个节点的输出result

3.3.9 效果测试

在本地准备一个如下csv文件

点击右侧发布之后，点击预览，上传本次的文件，最终得到下面的柱状图

四、写在文末

本文通过实际操作案例详细介绍了基于Dify集成Echarts完成一个数据报表的集成与展示的完整过程，感兴趣的同学还可以基于此做更深入的研究，本篇到此结束，感谢观看。