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

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

news 2025/8/11 5:16:45

目录

一、前言

二、Dify介绍

2.1 Dify是什么

2.2 Dify核心特性

2.2.1 Dify特点

2.2.2 多模型支持

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

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

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

3.1.1 创建应用

3.1.2 配置代码执行节点

3.1.3 更换其他图表

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

3.2.1 安装Echarts插件

3.2.2 添加Echarts插件节点

3.2.3 配置Echarts插件节点参数

3.3 读取excel 生成数据图表

3.3.1 配置开始节点

3.3.2 添加文档提取器节点

3.3.3 配置大模型节点

3.3.4 配置参数提取器节点

3.3.5 配置大模型节点

3.3.6 增加参数提取器节点

3.3.7 增加代码节点

3.3.8 连接结束节点

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代码，参考如下代码：

import jsondef 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代码替换一下，待替换的代码如下：

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格式的数据输出，首先需要配置如下提示词：

# 角色
你是一个数据整理专家，擅长数据格式的整合和数据转换# 数据# 任务
先从数据中提取出满足用户要求的数据然后把数据转换为csv格式# 输出
把csv格式的数据输出

配置用户提示信息

3.3.4 配置参数提取器节点

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

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

3.3.5 配置大模型节点

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

# 角色
你是一个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要求的格式的数据，完整的示例代码如下：

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完成一个数据报表的集成与展示的完整过程，感兴趣的同学还可以基于此做更深入的研究，本篇到此结束，感谢观看。

http://www.lryc.cn/news/615687.html

相关文章：

  • 复杂项目即时通讯从android 5升级android x后遗症之解决 ANR: Input dispatching timed out 问题 -优雅草卓伊凡
  • 咪咕MGV3200-KLH_GK6323V100C_板号E503744_安卓9_短接强刷包-可救砖
  • WebAssembly技术详解：从浏览器到云原生的高性能革命
  • Flutter 与 Android NDK 集成实战：实现高性能原生功能
  • Vue3 组件化开发
  • Solana上Launchpad混战：新颖性应被重视
  • 一个“加锁无效“的诡异现象
  • BGP 笔记
  • Python 中的 Mixin
  • 第4章 程序段的反复执行2 while语句P128练习题（题及答案）
  • 【动态数据源】⭐️@DS注解实现项目中多数据源的配置
  • Datawhale AI夏令营第三期，多模态RAG方向 Task2
  • 深度学习入门Day8：生成模型革命——从GAN到扩散模型
  • pytorch llm 计算flops和参数量
  • Busybox编译、制作initramfs，并在QEMU中运行
  • 束搜索（Beam Search）：原理、演进与挑战
  • Java -- 日期类-第一代-第二代-第三代日期
  • NLP：Transformer输出部分
  • 第十九天-输入捕获实验
  • AI编程工具 | Trae介绍
  • Linux高级编程-文件操作
  • SpringBoot 集成 MapStruct
  • Vue 3.6 Vapor模式完全指南：告别虚拟DOM，性能飞跃式提升
  • 使用GTX ip core + SDI IP core实现SDI设计
  • Vue3 路由
  • C++算法练习：单词识别
  • 决策树技术详解：从理论到Python实战
  • 【ref、toRef、toRefs、reactive】
  • 多级缓存详解
  • 《励曼旋耕》Liman Rotary Tillage