将Dify文档中的CSV数据提取并用ECharts可视化工具开发指南

image.png

开始

本文将分步骤讲解如何使用Dify平台,创建从文档文本提取到CSV转换,再到ECharts可视化的完整工作流。我们将逐步说明如何自动分析Excel文档并构建交互式仪表盘。

环境准备

Dify账号:创建账号并准备工作区
示例数据:准备数值型Excel格式文档

聊天流程创建

1. 从Dify仪表盘选择「聊天流程」

设置工作流名称为「文档可视化工具」

image.png

2. 添加「文档上传」组件作为输入字段

image.png

3. 向流程中添加文本提取工具

配置从上传文档中提取文本
将提取结果传递给后续步骤处理

image.png

4. LLM进行CSV转换

#角色
你是数据整理专家,负责数据格式整理和格式转换。
#数据
{{#1742042932212.text#}}
#任务
将数据转换为CSV格式并输出。

image.png

image.png

5. 使用Python脚本生成ECharts

image.png

import csv
import json

def main(csv_string):
    lines = csv_string.strip().split('\n')
    reader = csv.reader(lines)
    data = [row for row in reader]

    # 转换数值(除表头行和第一列外)
    for row in data[1:]:
        for i in range(1, len(row)):
            try:
                row[i] = float(row[i])
            except ValueError:
                pass

    cols = len(data[0])
    rows = len(data) - 1

    echarts_config = {
        "legend": {},
        "tooltip": {},
        "dataset": {
            "source": data
        },
        "xAxis": [
            {
                "type": "category",
                "gridIndex": 0,
                "data": data[0][1:]  # 列标签(排除第一列)
            },
            {
                "type": "category",
                "gridIndex": 1,
                "data": [row[0] for row in data[1:]]  # 行标签(第二行之后的第一列)
            }
        ],
        "yAxis": [
            {"type": "value", "gridIndex": 0},
            {"type": "value", "gridIndex": 1}
        ],
        "grid": [
            {"bottom": "55%"},
            {"top": "55%"}
        ],
        "series": []
    }

    # 行方向的柱状图系列(每行生成一个系列)
    row_series = []
    for row in data[1:]:
        row_series.append({
            "type": "bar",
            "seriesLayoutBy": "row",
            "name": row[0],
            "xAxisIndex": 0,
            "yAxisIndex": 0
        })

    # 列方向的柱状图系列(每列生成一个系列,排除第一列)
    col_series = []
    for col_idx in range(1, cols):
        col_series.append({
            "type": "bar",
            "seriesLayoutBy": "column",
            "name": data[0][col_idx],
            "xAxisIndex": 1,
            "yAxisIndex": 1
        })

    echarts_config["series"] = row_series + col_series

    output = "\n```echarts\n" + json.dumps(echarts_config, indent=2, ensure_ascii=False) + "\n```"
    return {"output": output}

6. 输出提取的文本和ECharts图表

image.png

7. 发布和运行应用

image.png

image.png

8. 测试运行

上传Excel文件

image.png

image.png

发送消息后自动可视化

image.png

生成类似以下双柱状图:

image.png

总结

该工具的特点:

  • 支持多种文档格式(Excel/PDF/文本)
  • LLM自动格式转换
  • 极短开发周期(数小时即可构建)

下一步建议:

  • 添加数据分析(平均值/相关性分析)
  • 仪表盘UI定制

通过Dify的可视化功能,尝试优化您的业务数据分析流程!参考本文内容,构建数据驱动型决策流程吧!

### ECharts 详细介绍 ECharts 是由百度开源的数据可视化工具库,能够流畅地处理大规模数据并提供丰富的交互功能[^1]。该库支持多种类型的图表和组件,适用于各类终端设备上的 Web 应用程序开发。 #### 下载与引入 对于初学者来说,在开始之前需先获取 scharts.js 文件,并将其正确加载到 HTML 页面中。这一步骤确保了后续可以顺利调用 ECharts API 来创建所需图形对象。 ```html <!-- 引入 echarts --> <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> ``` #### 编写基础代码 完成资源准备之后,则可以在 `index.html` 中定义容器元素用于容纳即将绘制出来的图表实例;接着初始化 chart 实例并通过 setOption 方法传入具体设置项来呈现最终效果图表。 ```javascript // 初始化chart实例 var myChart = echarts.init(document.getElementById('main')); // 设置option选项 myChart.setOption({ title: { text: '某站点用户访问来源' }, tooltip: {}, legend: { data:['人数'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', // bar表示柱状图 data: [5, 20, 36, 10, 10, 20] }] }); ``` #### 基础配置详解 为了更好地理解如何定制化自己的图表样式,了解一些常用的基础配置参数是非常有帮助的。这些配置涵盖了标题、提示框、坐标轴等多个方面,可以根据实际需求灵活调整以满足不同场景下的应用要求。 - **title**: 图形顶部显示的文字说明; - **tooltip**: 当鼠标悬停于某个数据点上方时弹出的信息窗口; - **legend**: 记录每种颜色代表哪一类系列名称的小图标集合; - **xAxis/yAxis**: 分别对应横纵两个方向上的刻度标签及其属性设定; - **series**: 描述各个序列间关系以及它们各自携带的具体数值列表。 #### 自适应布局 为了让页面内的图表能随着浏览器窗口大小变化而自动缩放,可以通过监听 resize 事件或者采用立即执行函数的方式使图表尺寸动态更新。 ```javascript window.addEventListener("resize", function () { myChart.resize(); }); (function(){ var timer; window.onresize = function() { clearTimeout(timer); timer = setTimeout(function(){ myChart.resize(); }, 200); }; })(); ``` ### 使用高级特性——地图扩展 除了基本的功能外,ECharts 还提供了诸如地理信息系统(GIS)的支持,比如通过安装特定插件如 `echarts-extension-amap` 就能在网页上轻松嵌入基于高德地图的服务接口,从而实现在真实地理位置基础上叠加统计分析结果的效果[^3]。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值