61-design/echarts-beautifier-v2

ECharts Beautifier v2

從數據直接建立可互動、可匯報的 ECharts HTML。專為數據分析師優化：先理解分析目標，然後剖析數據、選擇圖表、選擇視覺風格，最後交付帶有敘述背景的自包含 HTML 產出物。

請勿將此轉變為 ECharts 編碼教學。使用者應無需編寫 options、JavaScript 或 CSS。

工作流程

步驟 0：分析簡報

在選擇圖表前推斷使用者的目標：

• 趨勢：隨時間的變化、季節性、峰值、下降、成長。
• 比較：排名、群組差異、目標達成、前後對比。
• 組成：份額、貢獻、結構、組合變動。
• 分佈：分散程度、集中度、異常值、長尾。
• 轉換：漏斗、流失、階段效率。
• 流程：來源與目標之間的移動、路徑、遷移、歸因。
• 定位：雙指標取捨、象限、泡泡比較。
• 異常：異常值、閾值違反、特殊區段。
• 摘要：跨多個視圖的執行或運營敘述。

如果意圖明確，自動適應。如果多個意圖會導致實質不同的結論，提出一個簡潔的澄清問題。

步驟 1：數據輸入與可靠性

依此順序偏好結構化數據：Excel/CSV/JSON、複製的表格文字、清晰的表格螢幕截圖、清晰的圖表螢幕截圖、模糊或未標註的圖片。

對於圖片，首先提取結構化行和列。如果提取不完整或近似，將結果標記為估計/不完整，並在精度重要時要求原始數據。當輸入為圖片或螢幕截圖時，請閱讀 references/image-data-input.md。

步驟 2：數據剖析

識別：時間粒度、度量、維度、分子/分母、單位、樣本大小、缺失值、異常值、重複行、總計、百分比是否已計算，以及排名或份額計算是否有效。

步驟 3：圖表路線

首先根據分析意圖，其次根據數據結構選擇圖表。當圖表選擇不明顯時，請閱讀 references/chart-selection-matrix.md 以獲取路線矩陣。

始終在輸出中說明圖表選擇及簡短原因，例如：「選擇水平排名長條圖，因為該任務需要比較許多帶有長標籤的類別。」

步驟 4：樣式路線

根據受眾和用途選擇一種報告樣式：

• 商業報告：精緻的執行摘要。
• 運營審查：密集的運營監控。
• 探索分析：帶有篩選器和比較的分析師工作區。
• 深色螢幕：儀表板或指揮中心顯示。
• 嵌入式：用於文檔、維基或輕量分享的緊湊 HTML。

在製作主題化的 HTML 產出物之前，請閱讀 references/style-recipes.md。

步驟 5：HTML 交付

使用 ECharts 生成自包含的 HTML 頁面。包括：

• 標題、副標題與分析簡報。
• 關鍵發現或當前最佳解讀。
• 數據來源與可靠性說明。
• 圖表選擇原因。
• 互動式工具提示、傳奇/篩選器（如有用）、響應式佈局與行動裝置行為。
• 必要的標註，用於標記峰值、低谷、閾值、基線、流失或象限標籤。

避免削弱閱讀速度的裝飾性複雜性。在讓圖表變美之前，先讓它有用。

驗證清單

在交付之前：

• 所選圖表符合既定的分析目標。
• 度量、分母、單位與時間粒度假設可見或已記錄。
• HTML 無控制台錯誤渲染，並能在行動裝置上調整大小。
• 工具提示提供足夠細節供分析師審查。
• 敘述不誇大超出數據可靠性的範圍。
• 所有生成的文件命名清晰，並在為使用者建立交付物時放置在新的輸出資料夾中。

範例

使用 examples/ 中的文件作為簡潔的路線範例：

• 01_trend_sales.json
• 02_ranking_channels.json
• 03_composition_category.json
• 04_funnel_conversion.json
• 05_heatmap_time_segment.json
• 06_sankey_user_flow.json
• 07_quadrant_strategy.json
• 08_image_table_retention.json