03 · 資料儀表盤

速覽

產出	帶圖表的看板頁面
用時	30 到 60 分鐘
型別	「Dashboard」
難點	不在圖表，在於先想清楚這個看板要回答什麼問題

場景

要一個數據面板：給團隊看的指標看板、給客戶看的效果面板、或者內部工具的控制台。

做之前先回答一個問題

開啟這個看板的人，想知道什麼？

不是「想看什麼資料」，是「想知道什麼」。這兩個的差別決定了看板是有用還是好看：

想看什麼資料	想知道什麼
日活、留存、轉化率	昨天是不是出問題了
各渠道成本	這個月預算還夠不夠
工單量、響應時長	現在需不需要加人

右邊那一列決定了什麼該放大、什麼該報警、什麼可以摺疊起來。左邊那一列只能給你一堆卡片。

提示詞

做一個數據看板。

使用者：[誰會開啟它，多久開啟一次]
他們開啟時想知道：[一句話，一個問題]
如果答案是「有問題」，他們下一步會做什麼：[具體動作]

資料：
[貼上 CSV，或者描述資料結構和欄位含義]

佈局要求：
1. 最上面一行是回答那個核心問題的東西，不超過 3 個數字。
2. 中間是支撐這個判斷的圖表，最多 4 個。
3. 下面是明細表，預設摺疊。

約束：
- 每個數字要有對比基準（環比、同比或者目標值），單獨一個數沒有意義
- 圖表用當前設計系統的配色，不要 ECharts 預設色
- Y 軸從 0 開始
- 狀態要全：載入中、無資料、資料異常、只有一天資料
- 資料如果是示例，明確標註
- 深色模式下圖表也要是深色底

為什麼這麼寫

「他們下一步會做什麼」是最有用的一句。 有了它，看板才知道該在什麼條件下變紅、該把哪個數字放最大。沒有它，所有指標都一樣重要，等於都不重要。

「每個數字要有對比基準」是看板設計的第一條規則。 「昨日訂單 1,240」什麼都說明不了。「昨日訂單 1,240，環比 -18%」才是資訊。

「最上面不超過 3 個數字」 是在逼你排優先順序。一行放六個 KPI 卡片是最常見的失敗——觀眾的眼睛不知道該落在哪。

驗收清單

• [ ] 開啟三秒內能回答那個核心問題
• [ ] 每個數字都有對比基準
• [ ] 圖表配色跟頁面是一套
• [ ] Y 軸從 0 開始（不是的話有明確理由）
• [ ] 載入、空、異常三個狀態都有
• [ ] 深色模式下圖表不是白底
• [ ] 示例資料標註了
• [ ] 窄屏下圖表能橫向滾動，頁面本身不橫滾

變體

接真實資料

把圖表的資料來源改成從這個介面取：
GET /api/metrics?from=&to=

返回結構：
[貼上一個真實的返回示例]

要處理：載入中、請求失敗、返回空陣列、返回欄位缺失。
失敗時要顯示上一次成功的資料並標註「資料可能已過期」。

加時間範圍切換

加一個時間範圍切換：今天 / 7 天 / 30 天 / 自定義。

切換時所有圖表聯動。切換過程中顯示載入態，不要讓頁面跳動。
使用者選過的範圍記住，下次開啟還是那個。

做成給客戶看的版本

基於這個看板做一個對外版本：
- 去掉所有內部指標（成本、人力、工單）
- 保留效果指標
- 每個圖表下面加一句話解釋這個數字意味著什麼
- 頂部加客戶 logo 和報告週期
- 支援匯出 PDF

常見問題

圖表太多，看不過來。

刪。一個看板超過 6 個圖表基本就沒人看了。問自己：哪幾個圖是回答核心問題必需的，其餘的摺疊或者移到二級頁面。

圖表配色跟頁面不搭。

明確說：「圖表用設計系統裡的色板，主色用於最重要的那條資料系列，其餘用中性色階」。

資料量大的時候卡。

在提示詞裡說清楚資料量級：「一次可能返回 5 萬行，需要做聚合或者虛擬滾動」。不說的話它按小資料量做。

匯出的 PDF 圖表糊了。

圖表要用向量渲染，或者匯出時提高 DPI。可以直接要求：「匯出 PDF 時圖表用 SVG 渲染，不要點陣圖」。

相關

• PPT 工作坊 · 第 7 步 — 圖表選型和資料誠實性
• 進階 · Craft — 狀態覆蓋