第 7 步 · 用 ECharts 把資料講成結論

如果 deck 裡有市場對比、時間趨勢、採納曲線、調研結果、技術基準或者研究結論，用真圖表，別用截圖和靜態圖。

因為 deck 是 HTML 的，ECharts 可以直接嵌進頁面裡——它能跟著 deck 的配色走，資料變了能改，投影上放大也不糊。

提示詞

請掃一遍整份 deck，找出哪些頁面加 ECharts 視覺化會更容易理解。

只在真正有用的地方用 ECharts。

以下情況可以考慮圖表：
1. 對比
2. 隨時間的趨勢
3. 排名
4. 市場份額
5. 採納曲線
6. 調研結果
7. 前後指標對比
8. 技術基準

要求：
1. 不要每一頁都加圖表。
2. 每一處選最合適的圖表型別。
3. 圖表樣式要跟 deck 的視覺系統一致。
4. 有真實資料就用真實資料。
5. 如果缺少確切資料，用明確標註過的示意資料，並告訴我這裡需要核實。
6. 圖表的位置要能支撐這一頁的核心資訊。

更新完之後總結：
1. 哪些頁加了圖表。
2. 用了什麼圖表型別。
3. 用的是什麼資料。
4. 哪些資料點需要核實。

第 5 條是全書最重要的一條約束之一

「缺資料就用明確標註過的示意資料，並告訴我」。

這條對應的是 OpenDesign 的一條產品級規則：缺少真實資料時用誠實的佔位符，不編造數字。你在提示詞裡再強調一次，是因為圖表比文字更容易讓人相信——一根柱子畫在那裡，觀眾預設它是真的。

上臺被問「這個 32% 哪來的」而你答不上來，是最難看的一種翻車。

選什麼圖表

內容型別	建議圖表	為什麼
市場增長	折線圖或面積圖	表現方向和勢頭
競品對比	條形圖或雷達圖	差距一眼可見
類別佔比	餅圖、環形圖或矩形樹圖	分佈一眼可見
流程階段	漏斗圖或堆疊條形圖	表現轉化或推進

補充幾條實操經驗：

• 超過 5 個類別的時候，別用餅圖。 換成橫向條形圖，標籤好放，也好讀。
• 趨勢線超過 4 條就該拆。 拆成小多圖，或者只留要講的那兩條，其餘灰掉當背景。
• 柱狀圖的 Y 軸從 0 開始。 不從 0 開始能放大差異，但那是誤導，被人指出來一次信任就沒了。

圖表要跟 deck 是一套

第 3 條那句「樣式跟 deck 的視覺系統一致」，實際上要檢查這幾項：

• [ ] 用的是 deck 的配色，不是 ECharts 預設那套藍橙
• [ ] 字型跟正文一致
• [ ] 網格線和座標軸的灰度跟 deck 的中性色階一致
• [ ] 圖表的圓角、陰影跟卡片一致
• [ ] 深色 deck 上圖表也是深色底，不是白底一塊

最後一條經常出問題。ECharts 預設白底，放在深色頁上像貼了張紙。

一張圖講一件事

圖表頁最容易犯的錯是把所有資料都畫上去。一頁一個圖表，一個圖表一個結論。

標題寫結論，不寫話題：

• 差：「使用者增長資料」
• 好：「Q3 之後增長來自老使用者推薦，不是投放」

標題寫完結論，圖表就變成證據，觀眾知道該看哪裡。

資料準備

如果你手上有真實資料，最省事的做法是直接給它：

這一頁用下面的真實資料畫圖，不要改動數值：

月份,新增使用者,留存率
2026-01,1240,0.62
2026-02,1580,0.65
2026-03,2010,0.71

圖表型別：雙軸組合圖，柱狀表示新增，折線表示留存率。
標題寫成結論。

貼上 CSV 是最不容易出錯的給法。

常見坑

坑	表現	怎麼辦
每頁都有圖表	deck 變成報表	「不要每一頁都加」留著
編數字	上臺被問住	第 5 條留著，並逐張核對來源
ECharts 預設配色	圖表跟 deck 像兩套東西	明確要求用 deck 的色板
圖例太小	投影上看不清	要求最小字號，或者把圖例改成直接標註
Y 軸不從 0 開始	被質疑誤導	明確要求從 0 開始，除非有理由不這麼做

下一步

第 8 步 · 動效與 Three.js 的剋制用法 — 到這裡 deck 已經能用了，後面兩步是錦上添花，也是最容易做過頭的兩步。