Echarts官網：https://echarts.apache.org/zh/index.html

ECharts 是一個由百度團隊開發的、基于 JavaScript 的開源可視化圖表庫，它提供了豐富的圖表類型和強大的交互功能，能夠幫助開發者輕松創建專業級的數據可視化應用。

核心特點

1. 豐富的圖表類型
   • 支持30+種圖表類型，包括折線圖、柱狀圖、餅圖、散點圖、雷達圖、地圖、熱力圖、樹圖、旭日圖等
   • 支持多維數據分析展示
2. 強大的交互功能
   • 提供數據縮放、拖拽重計算、數據區域選擇等交互功能
   • 支持圖例、工具箱、數據區域縮放、視覺映射等組件

import csv
import jsondef main(csv_string):# 將CSV字符串分割成行lines = csv_string.strip().split('\n')# 使用csv模塊讀取數據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# 創建完整的ECharts配置echarts_config = {"legend": {},"tooltip": {},"dataset": {"source": data},"xAxis": [{"type": "category", "gridIndex": 0},{"type": "category", "gridIndex": 1}],"yAxis": [{"gridIndex": 0},{"gridIndex": 1}],"grid": [{"bottom": "55%"},{"top": "55%"}],"series": [# 第一個網格中的折線圖系列{"type": "bar", "seriesLayoutBy": "row"},{"type": "bar", "seriesLayoutBy": "row"},{"type": "bar", "seriesLayoutBy": "row"},{"type": "bar", "seriesLayoutBy": "row"},# 第二個網格中的柱狀圖系列{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1},{"type": "bar", "xAxisIndex": 1, "yAxisIndex": 1}]}# 生成輸出文件output = "```echarts\n" + json.dumps(echarts_config, indent=2, ensure_ascii=False) + "\n```"return {"output":output}

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};option && myChart.setOption(option);

完整工作流：

目錄

1.安裝插件

2.問題判斷

3.自然語言轉SQL

4.執行SQL語句

5.條件分支-是否需要圖表

6.處理圖表數據

7.參數提取

8.條件分支--圖形判斷

9.畫圖

10.不畫圖

11.測試效果

---

1.安裝插件

2.問題判斷

它負責分析用戶的原始問題，判斷是否需要圖表，并初步確定合適的圖表類型（柱狀圖、折線圖、餅圖，或不需要圖表）。

模型選擇:?deepseek-ai/DeepSeek-V3

提示詞如下：?

你是一個智能助手，需要根據用戶的問題判斷是否需要用圖表展示數據，并判斷適合的圖表類型。  請嚴格按照如下JSON格式輸出，不要輸出多余內容：
{"need_chart": true/false,  // 是否需要圖表"chart_type": "bar/line/pie/none"  // 推薦的圖表類型，bar=柱狀圖，line=折線圖，pie=餅圖，none=不需要圖表
}判斷標準：
1.如果用戶問題中包含“趨勢”、“變化”、“對比”、“分布”、“比例”、“占比”、“增長”等詞，通常需要圖表。
2.如果用戶問題中有“每年”、“歷年”、“隨時間”、“隨年份”等，推薦折線圖（line）。
3. 如果用戶問題中有“對比”、“排行”、“最多”、“最少”等，推薦柱狀圖（bar）。
4. 如果用戶問題中有“占比”、“比例”、“分布”等，推薦餅圖（pie）。
5. 如果用戶只是問具體數值、詳情、描述，不需要圖表，chart_type 填 none。示例：
用戶問題：“請用圖表展示歷年票房變化”  
輸出：{"need_chart": true, "chart_type": "line"}用戶問題：“各導演的票房占比是多少？”  
輸出：{"need_chart": true, "chart_type": "pie"}用戶問題：“哪吒之魔童降世的票房是多少？”  
輸出：{"need_chart": false, "chart_type": "none"}現在請判斷下面這個問題：
{{#1746791066048.input#}}

3.自然語言轉SQL

這個節點是實現“自然語言對話數據庫”的核心。它會將用戶的原始問題（sys.query）和我們預設的數據庫表結構信息結合，智能地生成可執行的SQL語句。

輸入變量:

• 數據表名稱:?****
• 查詢語句:?{{sys.query}}?(引用開始節點的用戶輸入)

數據庫配置: 正確填寫數據庫類型、IP、端口、庫名、用戶名、密碼。

可以根據實際情況自定義提示詞：

你是一位精通SQL語言的數據庫專家,熟悉MySQL數據庫。你的的任務是檢查該Sql語句是否有錯。如果有錯請更正，沒有錯則輸出Sql語句。回答要求：
1.不能包含任何多余的信息。
2.必須是可以執行的SQL語句。
3.刪除掉Sql中的\n，用空格替換。
4.只需要查詢本日價格，不需要多余信息.注意:實體為‘類型’，需要在大類和小類中間加上‘-’

4.執行SQL語句

此節點負責連接數據庫，并執行上一步生成的SQL語句。

• 輸入變量:
  • 待執行的SQL語句:?{{rookie_text2data.text}}?(引用上一個節點的輸出，即生成的SQL語句)
• 數據庫配置: 正確填寫數據庫類型、IP、端口、庫名、用戶名、密碼。
• 返回數據格式:?TEXT。

5.條件分支-是否需要圖表

這是一個邏輯判斷節點，它會根據第一個LLM節點【判斷用戶問題】的輸出，決定工作流是走向“生成圖表”的分支，還是走向“無需圖表，直接文字回答”的分支。

6.處理圖表數據

上一個條件分支走到需要圖表，工作流會進入這個LLM節點。

它的核心任務是將SQL查詢結果（目前是TEXT格式）和第一個LLM判斷出的圖表類型（target_chart_type），轉換為后續代碼節點或圖表插件所需的格式化數據。

SYSTEM
你是一個數據格式化專家。你的核心任務是根據已執行的SQL查詢結果和用戶指定的圖表類型，將數據轉換為特定圖表工具所需的輸入格式。## 輸出變量說明:
1.根據{{#1746791092689.text#}}的數據,進行抽取,我要2個數據，data是y軸的數據，x-axis是x軸的數據，以便我后續生成柱狀圖、折線圖、條形圖等圖形；
2.根據用戶最原始的自然語言查詢{{#1746791066048.input#}}，生成表的標題title標準輸出格式：
'''
title：
data：
x-axis：
'''
其中每個“data與x-axis”，每個文本之間用 ";" 分隔示例輸出:
title："產品銷售額柱狀圖",
data： "5500;7200",
x-axis： "產品A;產品B",

7.參數提取

因為數據是一個文本格式text，需要具體提取出參數，大家可以也去試試大模型結構化輸出

這里使用簡單的參數提取節點

title：
data：
x-axis：

8.條件分支--圖形判斷

判斷代碼節點的chart_type類型，給到不同的圖表插件。

9.畫圖

這些是你預設的、能夠接收格式化數據并（理想情況下）輸出可渲染Echarts圖表的工具。

• 輸入變量 (以餅圖為例):
  • 標題:?{{轉換數據節點輸出.unpacked_title}}
  • 數據:?{{轉換數據節點輸出.unpacked_data}}
  • 分類:?{{轉換數據節點輸出.unpacked_labels}}
• 輸出: 這些插件的輸出應該是Dify可以直接渲染的圖表格式（例如，包含?```echarts ... ```?的文本）。

10.不畫圖

如果最初判斷用戶問題不需要圖表，工作流會進入這個分支。

這里我們用一個LLM節點，根據用戶的問題和“執行SQL”節點返回的（TEXT格式）查詢結果，用自然語言生成一段簡潔的文字回答。

你是數據分析專家，分析并輸出sql查詢結果.數據是：{{#1746791092689.text#}}
問題是：{{#1746791066048.input#}}
Sql語句：{{#1747016584129.text#}}回答要求:
1.列出詳細數據，優先以表格方式列出數據。
2.如果數據超過10行，就只列出前十行和最后3行，中間可以使用省略號.

11.測試效果

"請查詢普鋼綜合指數，時間范圍是2025.1.1-5.6，并把指數信息按照折線圖繪制",