graphic-chart
將資料生成為 PNG 格式的資料視覺化圖表。使用 Apache ECharts v6 在無頭 Chromium（透過 Playwright）中渲染 HTML，並以 2 倍視網膜品質進行螢幕截圖。
CDN：https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js
關鍵規則（每次生成前請閱讀）
area類型 →type: 'line'+areaStyle: {}— ECharts 沒有type: 'area'。doughnut→type: 'pie'+radius: ['40%', '70%']— ECharts 沒有type: 'doughnut'。- 就緒訊號：在
chart.setOption()之前註冊chart.on('finished', fn)— ECharts 錯誤 #14101/#17500：如果在 setOption 之後註冊監聽器，它將默默地永遠不會觸發。請務必在 setOption 之前註冊finished和rendered事件。 - 必須顯式設定
xAxis.type: 'category'— ECharts 不會從資料推斷。忘記此項會產生空白圖表。 - 類別標籤放在
xAxis.data中，而不是data.labels陣列中。ECharts 結構是扁平的：{ xAxis, yAxis, series, grid, title, legend }— 不要嵌套在data或options下。 - 資料標籤是內建的 — 在任何系列上使用
label: { show: true }即可。無需外掛。 - 透過逐項
itemStyle高亮特定長條/資料點 — 將{ value: N, itemStyle: { color: '#...' } }直接放入data陣列。請勿使用 Chart.js 風格的backgroundColor陣列。 - ECharts 初始化使用
<div>容器，而非<canvas>—echarts.init(document.getElementById('chart'))。容器 div 需要明確的尺寸。 - 在 Option 中設定
animation: false— 停用動畫以實現即時渲染。仍須在 setOption 之前為就緒訊號註冊finished+rendered事件。 - 絕不在聊天中轉儲 HTML。 儲存到檔案，僅顯示摘要。
- 標題說明洞察，而非主題。 使用「營收在 12 個月內成長 3 倍」，而非「每月營收」。
- 圓餅圖/甜甜圈圖：使用 body
padding: 64px 80px和.chart-container { max-height: 860px }— 防止無標題時圖表邊緣貼齊容器邊界。
步驟 1：接收輸入
必填： chart_type、data
可選參數與預設值：
| 參數 | 預設值 | 說明 |
|---|---|---|
| chart_type | — | bar / line / area / pie / doughnut / scatter / radar / treemap |
| data | — | JSON 陣列或 CSV — 必填 |
| title | — | 說明洞察，≤10 個字 |
| subtitle | — | 一句話的上下文說明行 |
| style | clean-slate | clean-slate / midnight-editorial / matt-gray / electric-burst / brutalist |
| dimensions | 1080x1080 | WxH 像素（輸出 PNG 為 2 倍，透過 deviceScaleFactor） |
| x_label | — | X 軸標籤文字 |
| y_label | — | Y 軸標籤文字 |
| source | — | 在頁尾顯示的資料來源 |
| highlight | — | 要強調的資料標籤（例如「Q4」、「Dec」、索引 3） |
如果缺少 chart_type 或 data，請準確詢問：
「要建立圖表，我需要：
- 圖表類型 — bar / line / area / pie / doughnut / scatter / radar / treemap
- 資料 — 以 JSON 陣列或 CSV 格式提供（例如，使用標籤
['Q1','Q2','Q3','Q4','Q5']的[12, 18, 22, 25, 31]）可選：標題、風格（預設：clean-slate）、尺寸（預設：1080×1080）、高亮某個特定資料點」
如果兩者都存在 → 跳到步驟 2。
步驟 2：內部架構（不對使用者顯示）
1. 正規化圖表類型：
area→line+areaStyle: {}（在系列中）doughnut→pie+radius: ['40%', '70%']（在系列中）horizontal bar→bar+ 交換 xAxis/yAxis（類別軸在 y 軸）- 所有其他類型：按原樣使用
2. 讀取 references/chart-library.md — 載入此圖表類型的完整設定規格。
3. 讀取 references/style-presets.md — 載入所選風格的 CSS 權杖與資料調色盤。
4. 確定設計方向：
| 決策 | 推斷依據 |
|---|---|
| 語氣 | 專業 / 編輯風格 / 大膽 / 技術性 — 配合資料的受眾 |
| 資料故事 | 此圖表證明的單一洞察（將成為標題） |
| 高亮策略 | 哪個資料點需要視覺強調以及原因？ |
| 背景 | 淺色（clean-slate, matt-gray）或深色（midnight-editorial, electric-burst, brutalist） |
5. 解析資料：
- 簡單陣列
[12, 18, 22]→ series.data，標籤另行提供 - 物件陣列
[{x: 'Jan', y: 12}]→ xAxis.data 取自 x 鍵，series.data 取自 y 值 - CSV：將標題行解析為 xAxis.data，將資料行解析為 series.data
- 多系列：多個
series條目，每個條目包含type、name、data - 散佈圖：
series.data: [[x1,y1], [x2,y2], ...]格式
6. 解析尺寸： `