实践05: Dify实现爬取JD化妆品排行ECharts图表可视化-优快云博客

本文链接：https://blog.youkuaiyun.com/jackalvin/article/details/148664347

估计时长：1.5小时

实践目标：

通过本实践案例，我们可以快速上手Dify基于Chatflow聊天工作流类型开发的智能体应用。在Step-by-Step的步骤指导下，不仅掌握了智能体开发的流程规范，同时根据开发需求针对性对Dify的关键概念、各组件以及规则进行学习，真正做到"以动手实践为导向的做中学和学中做"的目的，用到什么就学习什么。当然，如想要更好掌握Dify的开发技巧，还需系统性学习Dify的核心知识点，多多练习。

了解Dify智能体ChatFlow聊天工作流的基本操作；
掌握使用Dify自带工具数据爬虫获取网络数据；
掌握从Dify Marketplace安装并ECharts插件工具实现数据可视化。

前置技能：

如果需要了解Dify的本地部署搭建以及系统配置相关技术的学习者可以参考以下文档：

实践运行效果：

快速知识点：

什么是工作流？

工作流（即工作流程）通过将复杂的任务分解成较小的步骤（节点）降低系统复杂度，减少了对提示词技术（自然语言任务指令）和模型推理能力的依赖，提高了 LLM 应用面向复杂任务的性能，提升了系统的可解释性、稳定性和容错性。

下图为Dify工作流操作界面，每一个小方块成为一个节点，节点是工作流的关键构成，每个节点都有自己个性化的功能，就好比公司不同的岗位，多岗位协同才能完成或处理复杂的问题。工作流通过不同功能节点的有序链接，实现执行一系列操作的组合。

Dify工作流分为两种类型：

Chatflow：面向对话类情景，包括客户服务、语义搜索、以及其他需要在构建响应时进行多步逻辑的对话式应用程序。
Workflow：面向自动化和批处理情景，适合高质量翻译、数据分析、内容生成、电子邮件自动化等应用程序。

本案例学习创建 ChatFlow类型应用 完成对JD化妆品排行网络数据的采集以及图表可视化操作。

实验操作：

本操作实现以对话方式完成对JD化妆品排行榜数据的网络采集（Dify内置网页爬虫工具），使用LLM大模型（Qwen2.5:7B）完成对网络采集数据的格式化处理。最后将LLM模型处理好的数据通过参数提取器输入到图表工具（ECharts图表生成），工具最终完成数据图表可视化展现。

本案例工作流编排（共6个节点）

具体操作分为9个步骤，如下：

步骤1：Dify配置安装Echarts图表插件工具
步骤2：创建一个空白应用
步骤3：编排配置【开始】节点参数
步骤4：添加并设置【网页爬取】工具
步骤5：添加并设置【LLM】数据处理节点
步骤6：编排设置【参数提取器】节点
步骤7：添加设置【Echarts图表生成】工具
步骤8：编排设置【直接回复】节点
步骤9：调试运行

步骤1：Dify配置安装Echarts图表插件工具

ECharts图表生成工具属于第三方提供，因此Dify工具仓默认没有。需要从 Dify市场 下载安装。

1.1 点击主界面上部【工具】按钮，这里展示当前Dify的工具仓。之后点击下面的【Dify 市场】链接，进入到 Dify Marketplace。

1.2 在 Dify市场 收索框输入工具名称关键字【ECharts】，点击查询结果中的【ECharts图表生成】工具卡片，进入到工具详情介绍和安装界面。

1.3 在详情界面，点击【安装】按钮，Dify会自动化下并部署工具插件。

1.4 成功安装【ECharts图表生成】工具插件后，我们可以在Dify工具仓中看到。

恭喜！【EChart图表生成】工具插件安装成功。

步骤2：创建一个空白应用

2.1 在首页点击顶部【工作室】，选择【创建空白应用】进入到新应用创建引导界面。

2.2 在应用创建引导界面，选择【Chatflow】类型，填写新应用的名字 JD数据分析助手，点击【创建】按钮，进入到智能体编排界面。

2.3 进入到应用编排界面后，首先删除模板流程节点【LLM】和【直接回复】，保留【开始】节点。

Tips：如何删除流程的节点？

点击节点右上角的【…】，在弹出菜单中选择【删除】即可。具体操作如下图所示：

最终，当前应用编排界面只保留一个【开始】节点即可。如下图所示：

OK，到此我们的新应用就创建好了。

步骤3：编排配置【开始】节点参数

我们需要在应用启动时，首先让用户输入需要爬取的网页地址和生成的图表标题名称两个参数。因此我们首先要对【开始】节点进行属性编辑。

点击【开始】节点，在右侧弹出的节点属性编辑菜单中，点击输入字段右侧的【+】添加变量。具体操作如下图所示：

按照以上方法，给【开始】节点依次添加两个变量参数，最终效果如下图所示：

【变量1】用于接收用户输入的网页地址。变量名称：strURL，显示名称：爬取网址

【变量2】用于接收用户输入的图表名称。变量名称：strTableName，显示名称：图表名称

到此，【开始】节点操作完毕！

步骤4：添加并设置【网页爬取】工具

按照工作流程设计，应用会根据用户输入的爬取网页地址，调用【网页爬取】工具完成对网页数据的爬取采集，为后续对采集的数据进行有效数据提炼和处理做好准备。

Tips：每一个节点的【输出】就是下一个节点的【输入】，关联的节点之间环环相扣。

4.1 添加【网页爬取】工具节点

网页爬取工具是Dify工具仓默认自带的工具，我们只需要点击【开始】节点卡片右侧的【+】图标，选择【工具】下的【网页爬虫】即可。具体操作如下图所示：

从弹出的节点添加菜单中选择上方的【工具】类别

在【工具】类别中，找到【网络爬取】工具，点开找到【网页爬虫】

添加好【网络爬虫】工具后，找到右侧工具属性菜单中的输入变量，我们要将【开始】节点用于存储用户输入爬取网页的 地址变量strURL 填写进来，作为【网络爬虫】的输入目标参数。

Tips：在所有节点或工具的（输入/输出）变量文本框中，只要输入斜杠"/"，就会自动弹出在本应用中合法且可用的变量里列表。我们根据需求，选择要添加的变量即可。这种方式便于变量的查询，提高准确度。

选择好输入变量后，文本框就会显示来自【开始】节点的strURL。

OK，到此网络爬虫工具节点编辑完毕！

步骤5：添加并设置【LLM】数据处理节点

我们在【数据爬虫】工具节点后，添加【LLM】数据处理节点。这个节点很关键。它要接受上一个节点【数据爬虫】节点的结果（即网页的所有采集数据），同时通过LLM大语言模型（Qwen2.5:7B）的推理能力，根据用户自定义的提示词指令，完成将网页爬取到的数据进行个性化处理。最终输出处理后的结果（结果自动存储在该节点的输出变量中）。具体步骤如下：

5.1 创建【LLM】数据处理节点。在节点编排界面中，点击【网页爬虫】工具节点卡片的【+】，在弹出的菜单中，选择【LLM】节点。

Tips：也可以通过【网页爬虫】节点的属性编辑菜单中，找到【下一步】中的【选择下一个节点】点击添加。

5.2 编辑节点大模型参数。在【LLM】右侧的节点属性中，修订该节点名称为 LLM数据处理器，点击图表，设置模型的温度参数为0，提升模型推理的准确度。

5.3 设置节点变量。为【LLM】数据处理器节点设置上下文变量，点击文本框，在变量下列表中的选择 网页爬虫 下的 text 变量。该text变量存放着上一个节点【网页爬虫】节点的输出数据（即目标网页的所有爬取信息）。

5.4 设置大模型系统提示词推理分析数据。在System中编写LLM大模型的 系统提示词，明确模型的身份角色、要处理的数据、以及具体要完成的推理分析任务和最终的输出要求。

SYSTEM 系统提示词：

#角色
假设你是一名数据分析资深专家
#数据
{{#1749964647932.text#}}
#任务
- 从{{#1749964647932.text#}}中提炼出来化妆品排名前10的数据；
- 数据按照评价人数从高到低排序；
- 将化妆品排名数据转换成ECharts柱状图能够接受的json参数数据格式；
- x轴为化妆品名称，保留商品名称前四个字；
- y轴为化妆品的评价人数。
#要求
仅输出最终的json数据即可。