圖表範例集

金控總經理辦公室
翻轉金融 共創美好生活Together, a better life.
圖表範例

先讀共通規則與 ecFit

每一張圖都要守的規則（容器、色彩、px 與縮放、JSON 的限制、數字自洽、匯出）寫在共通規則；再把 ecFit 整段貼進 # custom-js，圖字與間距才跟著投影片等比。兩段都只有規則與程式，沒有畫面。
段內容查法
圖表共通規則先讀再抄ref.py chart 圖表共通規則
ecFit：共用 # custom-js圖表 px 值跟著投影片等比ref.py chart ecFit
查法：ref.py chart 圖表共通規則、ref.py chart ecFit
圖表範例

線尾直接標籤

適用：2–4 條線比趨勢，線尾寫「名稱＋末值」，讀者不必來回對圖例。避免：5 條以上、或末值擠在一起（線尾標籤互壓），改頁面色塊圖例。

endLabel 不算進 containLabel，grid.right 要自己留 px（「名稱＋末值」約 8 字＝96px）。

查法：ref.py chart ec-endlabel
圖表範例

圖下對齊數據列

適用：規模柱＋1–3 列比率（季增率、利差、占比），數字與柱逐一對齊，讀者不必讀軸估值。避免：數據列超過 3 列（改圖＋表並排）、列上的數跟柱是同一個數、柱超過 10 根（數字擠）。

第 2、3 條 xAxis 是只有標籤的類目軸，data 寫字串（保留小數位與「—」），長度與柱數相同。

查法：ref.py chart ec-datarow
圖表範例

上下分層共用 X 軸

適用：金額＋比率（利息淨收益＋淨利差、逾放比＋覆蓋率），取代雙 y 軸：兩個量綱各有刻度、時間仍對齊。避免：兩個指標同單位（畫同一層）、兩者沒有對照關係。

上層 grid 高 28%、下層從 50% 到底。

查法：ref.py chart ec-twotier
圖表範例

小倍數

適用：多家子公司、多個產品同一指標比形狀。避免：各格量級差 10 倍以上（小的看不見）、超過 4×2。注意：每格一組 grid／xAxis／yAxis，gridIndex、xAxisIndex、yAxisIndex 要對好。
查法：ref.py chart ec-multiples
圖表範例

年度｜同期分組圖

適用：半年報、季報：全年走勢與今年同期放同一張，又不會被讀成連續時間。避免：只有同期兩期（直接兩根柱）。注意：類目中間插一個空字串、資料寫 "-"，markLine 在那一格（xAxis:3，類目索引）畫虛線。
查法：ref.py chart ec-fyhalf
圖表範例

柱間成長率括號

適用：同期、季比較：成長率寫在「比較的兩根柱之間」，讀者知道誰比誰。避免：每根柱都標（改 ec-datarow）、括號超過 2 層。

類目軸會把小數 x 取整，括號要掛在第二條隱藏的數值 x 軸（min:-0.5、max:n-0.5，刻度才與類目中心對齊）。

查法：ref.py chart ec-bracket
圖表範例

多年複合成長括號

適用：3 年以上的年複合成長率，括號跨首末兩根。避免：只有兩期（寫增幅就好）。注意：同 ec-bracket 的隱藏數值軸。
查法：ref.py chart ec-cagr
圖表範例

柱間增幅膠囊

適用：逐期增幅，膠囊放在相鄰兩根柱之間（寫的是右邊那根比左邊）。避免：膠囊超過 6 個（改 ec-datarow 數據列）。注意：膠囊＝scatter 標籤加 backgroundColor、borderRadius:99、padding，寬度跟著⋯。
查法：ref.py chart ec-pillbar
圖表範例

線尾增幅膠囊

適用：趨勢線講「每年成長多少」。避免：線上已經有很多注記。注意：markPoint 掛最後一點，symbolSize:0、標籤加底色圓角。
查法：ref.py chart ec-pill
圖表範例

轉折點與事件注記

適用：峰谷、政策事件、制度改變點，一張 ≤4 個。避免：注記重複結論列。注意：高低點用 markPoint 手動寫 coord＋兩行標籤（\n），各自 position 上、下。
查法：ref.py chart ec-turn
圖表範例

圖上局部說明框

適用：標「這一點、這一段」的局部事實（改口徑、異常值原因），一張圖只放一個。避免：寫整頁結論（那是結論列的工作）。注意：框＝markPoint 標籤的白底＋borderType:"dashed"＋padding，寬度跟著字走，框內 ≤20⋯。
查法：ref.py chart ec-callout
圖表範例

時期色帶＋預測虛線

適用：長期趨勢標時期（寬鬆、升息；舊制、新制）、實績接預測。避免：時期劃分沒有依據、色帶超過 3 段。注意：markArea 的 data 寫成 [[起點{name, xAxis, itemStyle}, 終點{xAxis}]⋯。
查法：ref.py chart ec-era
圖表範例

預測區間扇形

適用：利率、成長率展望、壓力情境：預測不是一個點。避免：沒有區間的單點預測。注意：同一個 stack 兩條線：先放下緣（線透明），再放「上緣－下緣」並開 areaStyle。
查法：ref.py chart ec-fan
圖表範例

目標區間帶

適用：資本適足率、成本收入比這類有法定或目標區間的指標。避免：沒有明確目標值。注意：markArea 兩端寫 yAxis 值，色帶用達標色的淡底、標籤 insideTopLeft。
查法：ref.py chart ec-band
圖表範例

目標柱虛線框

適用：目標值和實績並排（「20X8 要降到 45」）。避免：目標柱畫成實心同色（讀者會當成實績）。注意：最後一筆 itemStyle.color:"transparent"＋borderType:"dashed"，標籤寫⋯。
查法：ref.py chart ec-targetbar
圖表範例

瀑布最小骨架

適用：損益橋、資本適足變動。避免：超過 10 根（合併小項或拆兩張）。注意：可見那條一律寫正值（這一段的長度），增減靠顏色分（增加漲紅、減少跌綠、期初期末藍）。
查法：ref.py chart ec-waterfall
圖表範例

瀑布延伸

適用：中間要交代一次小計的損益橋、費用變動。避免：超過 10 根、類目名超過 6 字（改橫向，x／y 對調）。注意：佔位規則同 ec-waterfall，小計柱從 0 起算。
查法：ref.py chart ec-bridge
圖表範例

對照瀑布

適用：本期與去年同期的組成直接比。避免：兩期的因素不同。注意：兩個 grid 上下各一組瀑布（兩組 stack 名不同），兩條 yAxis 寫同一個 max，高度才能直接比。
查法：ref.py chart ec-bridge2
圖表範例

發散條

適用：各業別增減、預算增減，正負兩側一眼分開。避免：全部同號（改一般長條）。注意：橫向 bar 負值自然往左。
查法：ref.py chart ec-diverge
圖表範例

剪刀差

適用：證明收入跑得比費用快（營運槓桿）。避免：只有兩個時點（改文字＋.hero）。注意：兩線都指數化（起點＝100）。
查法：ref.py chart ec-jaws
圖表範例

同業排名長條

適用：同業 ROE、成本收入比、市占排名，一眼看出自家位置。避免：超過 15 家（只列前 10＋自家）。注意：yAxis.inverse:true，資料端先由高到低排好。
查法：ref.py chart ec-peer
圖表範例

區間條＋中位＋目前值

適用：「現在落在歷史區間的哪裡」：估值、利率、同業分布。避免：只有一個值。注意：透明佔位柱（最低）＋區間柱（最高－最低）同一個 stack。
查法：ref.py chart ec-range
圖表範例

啞鈴圖

適用：兩期或兩群在多個面向上的差距（能力評分、滿意度前後）。避免：只有一個面向、超過 12 列。注意：透明佔位柱墊到兩點較小值、細柱（barWidth:3）寬＝兩點差，當作連線。
查法：ref.py chart ec-dumbbell
圖表範例

定位散點

適用：策略定位、同業估值定位：「我們在哪、要走到哪」。避免：沒有真數據（改本檔「2×2 四宮格」）、點超過 15 個。注意：同業一條系列（灰）、自家一條（焦點色），平均線 {type:"average", valueDim:"x"} 掛在同業⋯。
查法：ref.py chart ec-position
圖表範例

循環散點軌跡

適用：景氣位置、兩個指標的軌跡：現在在哪一象限、往哪走。避免：讀者不熟又沒有讀法（旁邊要一句「右上＝兩者皆擴張」）。注意：x、y 都是數值軸的 line（data 寫 [x,y]）。
查法：ref.py chart ec-trail
圖表範例

堆疊柱＋右側逐段變動欄

適用：放款、存款結構：看得到結構，也看得到每段變多少，右欄兼作直接標籤。避免：超過 5 段、有段太薄（<8%，標籤會疊）。注意：只在最後一筆每段掛 label.position:"right"，grid.right 留 176px。
查法：ref.py chart ec-segdelta
圖表範例

多期 100% 堆疊

適用：資產配置、營收組成的今昔結構。避免：超過 6 段。注意：每期各段加總 100（yAxis.max:100），段內標占比。
查法：ref.py chart ec-stack100
圖表範例

馬賽克

適用：區域×產品的規模結構同時看，限 3×3 以內。避免：要精確比較（面積不精確，改 ec-heat 或兩張長條）。注意：ECharts 沒有原生馬賽克，custom 系列要寫函式、JSON 放不進去。
查法：ref.py chart ec-mekko
圖表範例

並列雙圓環

適用：兩群的組成（銀行／證券、今年／去年），中心放總額。避免：內外環（讀者要先對照半徑才知道哪環是誰）、切片超過 5 個。

中心總額用 title（left:"center"、top:"middle"，對齊 center:["50%","50%"]）。

查法：ref.py chart ec-donut2
圖表範例

桑基流量

適用：資金流向、客戶轉介、案件流：量從哪裡來、到哪裡去。避免：節點超過 12 個、節點名超過 6 字。注意：color 只留一色（節點預設輪流上紅藍，沒有語意），連線 color:"source" 淡化。
查法：ref.py chart ec-sankey
圖表範例

泡泡矩陣

適用：兩種分類交叉的件數（機構類型×發展階段），數字寫在圓內。避免：超過 5×6（改 ec-heat 熱力或表格）。注意：x、y 都是類目軸的 scatter，data 寫 [x 索引, y 索引, 件數]。
查法：ref.py chart ec-bubblegrid
圖表範例

下三角相關係數熱力

適用：相關係數、曝險分布、月份×指標，大矩陣先找熱點。避免：小於 4×4（直接寫數字）。注意：色階要自己寫 visualMap.inRange.color（藍淡→深）並用 seriesIndex:0 只管資料格。
查法：ref.py chart ec-heat
圖表範例

概念示意曲線

適用：概念本身有形狀（微笑曲線、生命週期、J 曲線）。避免：讓人誤以為是真實數據：圖名或 .u 一定寫「示意」、軸不標數值（可加本檔「頁面狀態章」.stamp）。

數值 x 軸（－0.5～6.5）＋smooth:true，每點的 name 當標籤。

查法：ref.py chart ec-concept
圖表範例

2×2 小圖陣

四個指標一頁總覽：小圖用任一範例，每張寫 min-height:8.5em（預設最小高 12em，兩列會頂到內容區）。四格標頭寫同類名詞；每張圖都要讀細節時改一頁一圖。
線尾直接標籤
目標區間帶
同業排名長條
多期 100% 堆疊
查法：ref.py chart ec-lay-2x2
圖表範例

其他骨架

這三種圖還沒有完整範例，只有骨架：series 類型與要設的幾個 option。甘特不經 ECharts 的版本在片段範例集（版面片段的甘特），多數時程頁用那一種就夠。
圖種series 類型骨架重點適用/避免
漏斗funnelsort:'descending'、gap:2、label.position:'inside'轉換、案件流／避免 >5 層
雷達radarradar.indicator 各軸 max 統一量綱能力/風險多維／避免 >2 系列（讀不清）
甘特custom（renderItem）或橫向 bar 佔位ECharts 無原生甘特；簡版用橫向 bar＋透明佔位起點（custom 要函式，JSON 放不進去）里程碑、專案時程／多任務長軸改拆頁；不經 ECharts 的版本見本檔「甘特 gantt」.gantt
查法：ref.py chart 其他骨架

圖表照原文組頁，
換掉數字先對等式

圖表範例的寫法以 references/snippets.md 為準

翻轉金融 共創美好生活Together, a better life.