Dify基于Echarts插件打造可视化报表

示例代码

📎 附件：echarts-demo.zip（zip, 1KB）

原文链接：https://www.yuque.com/attachments/yuque/0/2025/zip/2424104/1749879893966-801ab4bf-909c-4cb0-82b8-e2e367867137.zip

课程内容

1. Echarts图表生成
2. Echarts插件使用
3. Excel 案例

前言

厌倦了盯着冰冷、枯燥的数据却找不到重点？

想象一下，只需简单几步，这些数据就能变身为令人惊艳的炫酷图表，瞬间抓住所有人的眼球！

释放数据的真正潜力，用 Echarts 让你的数据 “活” 起来，讲述它自己的故事。

图表作为一种直观、高效的数据呈现方式，能够化繁为简，让冰冷的数据焕发活力，帮助我们更好地理解和分析信息。

今天分享一下如何利用 Dify 平台，结合强大的 Echarts 图表库，轻松搭建工作流。

下图是 Echarts 官网上各种图表示例，是不是还挺炫酷的。

今

Echarts图表生成

echarts官网案例地址：https://echarts.apache.org/examples/zh/index.html#chart-type-pie

核心的逻辑

import json
import ast

def main() -> dict:
    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'}
                ]
            }
        ]
    };
    # 生成输出文件
    output = f'```echarts\n{json.dumps(option, ensure_ascii=False)}\n```'
    return {
        "result": output,
    }

我们只需要把对应的option转换为echarts格式的数据就可以了。所以实现起来还是非常简单的。要做动态的展示的话只需要把option的x轴和series中的数据替换掉就可以了。

运行的效果

Echarts插件使用

运行效果

Excel 案例

通过加载Excel中的数据，然后通过大模型来处理获取到满足Echarts需要的格式数据。

文档提取器处理简单

在文档提取器后的大模型需要结合用户的输入来动态的从Excel数据中获取到满足条件的数据

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

# 任务
先从数据中提取出满足用户要求的数据 {{#sys.query#}} 然后把数据转换为 csv 格式

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

用户提示词

用户输入的信息: {{#sys.query#}}

然后就是后续的参数提取器

之后的大模型把提取的数据转换为对应的json数据