ECharts 坐標軸斷裂多區(qū)間 gap 配置、分時圖與交互控制【免費下載鏈接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser項目地址: https://gitcode.com/GitHub_Trending/echa/echartsECharts 坐標軸斷裂通過軸上的breaks配置把一段數(shù)值范圍從軸上切掉讓量級懸殊的數(shù)據(jù)能同屏展示而不被極端值拉平。本文從真實行為出發(fā)講怎么配、為什么這么配、什么時候別配?，F(xiàn)象切片一個極端值壓扁其余所有數(shù)據(jù)12、88、650、1200、7435 五個點畫在同一根線性軸上7435 把軸拉伸了數(shù)倍前四根柱子縮成噪音650 和 1200 的差異肉眼不可辨。這不是數(shù)據(jù)的問題是映射的問題——像素高度按整段軸域分配小值根本分不到空間。對數(shù)軸雖然也能緩解但會改變讀者對比例差的直覺感知而業(yè)務(wù)報表里兩根柱子高度差往往就是讀者要讀的信息。 坐標軸斷裂就是為這種情況設(shè)計的把一段數(shù)值范圍從軸上切走讓剩余區(qū)間拿到足夠的顯示高度同時保持每段內(nèi)部的線性映射。機制速寫它到底對 Scale 做了什么它不改你的數(shù)據(jù)series.data里的 7435 還是 7435。改的是坐標映射原來一條數(shù)值 → 像素的線性函數(shù)被斷裂點切成若干段start到end之間的值域從像素空間里整體跳過只留一個gap寬的缺口刻度、網(wǎng)格線、數(shù)據(jù)點都按這段函數(shù)重新定位但標簽文字仍顯示原值。斷裂附近的普通刻度還會被裁剪避免和鋸齒線擠在一起。 實現(xiàn)上用戶輸入的breaks先經(jīng)parseAxisBreakOption校驗解析再由createBreakScaleMapper生成分段映射器注入 scale門面在 src/scale/break.tsAxisBreakOption的類型形態(tài)定義在 src/util/types.ts。原理清楚了看看配置本身有多短。最小可行配置12 行的雙區(qū)間斷裂柱狀圖下面這段把 Y 軸切了兩段讓極端值 7435 不再壓垮小值柱// 12 行最小配置柱狀圖雙區(qū)間斷裂 const option: echarts.EChartsCoreOption { yAxis: { type: value, breaks: [ { start: 123, end: 2012, gap: 10 }, // 像素缺口123~2012 只留 10px { start: 2305, end: 7400, gap: 0 } // gap 0不留缺口只畫一條鋸齒線 ] }, series: [{ type: bar, data: [12, 88, 650, 1200, 7435] // ← 關(guān)鍵7435 不再壓垮其余四根 }] };幾個容易忽略的細節(jié)start/end使用軸的值域坐標需要升序且不重疊gap是屏幕上的缺口尺寸數(shù)字為像素字符串為軸長百分比如10%gap為0時斷裂表現(xiàn)為一條鋸齒線兩側(cè)數(shù)據(jù)視覺上直接相連breakArea子配置控制斷裂區(qū)域的背景與邊框樣式默認透明無邊框時間軸上start/end可直接傳Date對象?？蛇\行的完整示例在 test/axis-break.html看頂部main0案例關(guān)注鋸齒線與數(shù)據(jù)點的相對位置。數(shù)值軸搞定了時間軸才是真正的硬骨頭。組合 · 邊界 · 陷阱股票分時圖時間軸斷裂應(yīng)取 gap 為 0股票分時圖要藏掉午間休市 11:30-13:00否則這段空檔會把全天的價格線拉出一截臺階。時間軸斷裂直接傳Dategap通常取0——休市時間本來就不該在屏幕上占空間。下面這段同時處理了斷裂處的軸標簽// 時間軸斷裂隱藏午休軸標簽在斷裂點標出被藏區(qū)間 xAxis: { type: time, breaks: [{ start: new Date(2024-04-09 11:30), // 午休開始 end: new Date(2024-04-09 13:00), // 午休結(jié)束 gap: 0 // ← 關(guān)鍵非交易時段不留缺口 }], axisLabel: { formatter: (value, index, extra) { if (extra extra.break) { // ← 關(guān)鍵extra 只在斷裂點有值 return 11:30-13:00; // 在斷裂點標出被藏的區(qū)間 } return echarts.time.format(value, {HH}:{mm}); } } }test/axis-break.html 的main3Intraday stock chart案例帶一個重置斷裂按鈕點擊可把午休恢復原樣方便對比斷裂前后兩種狀態(tài)。斷裂區(qū)間本質(zhì)是毫秒時間戳比較數(shù)據(jù)生成和斷裂配置混用時區(qū)概念會讓被藏區(qū)間偏移到你沒預期的位置。dataZoom 聯(lián)動百分比缺口與像素缺口行為不同圖表一旦加上 dataZoom兩種gap寫法的差別就顯現(xiàn)了像素缺口縮放后保持絕對寬度百分比缺口隨軸長等比縮放放大縮小后斷裂既不霸屏也不會被擠到看不見。數(shù)據(jù)量大、預期用戶會縮放時優(yōu)先百分比// 百分比缺口dataZoom 縮放時缺口寬度始終與軸長成比例 yAxis: { breaks: [ { start: 4234, end: 7000, gap: 10% }, // ← 關(guān)鍵按當前軸長的百分比 { start: 11234, end: 13000, gap: 40% } ] }縮放聯(lián)動效果見 test/axis-break-2.html 的main_gap_percent_break_2重點對比不同縮放范圍下缺口寬度的表現(xiàn)。交互控制用 start/end 定位斷裂斷裂不必一次配死。展開時把被藏區(qū)間伸出來顯示折疊時再壓回去這給看完整數(shù)據(jù)留了出口。三個 action 定義在 src/component/axis/axisAction.ts軸的定位寫法和其他組件一致index/id/name 三選一下面的代碼展開指定斷裂并監(jiān)聽狀態(tài)變化// 動態(tài)展開/折疊斷裂并監(jiān)聽狀態(tài)變化 chart.dispatchAction({ type: expandAxisBreak, // 或 collapseAxisBreak / toggleAxisBreak yAxisIndex: 0, breaks: [{ start: 123, end: 2012 }] // ← 關(guān)鍵用 start/end 定位斷裂 }); chart.on(axisbreakchanged, (event) { event.breaks.forEach((brk) { console.log(brk.isExpanded, brk.old.isExpanded); // 現(xiàn)值與舊值 }); });action 生效后getOption()返回的breaks會帶上isExpanded狀態(tài)做持久化或還原 UI 時讀狀態(tài)即可不必自己記。陷阱三行式??陷阱一非法區(qū)間被靜默丟棄錯法start end、缺start或end、兩個區(qū)間重疊。后果不拋異常該區(qū)間被校驗過濾圖表按無此斷裂繪制問題不可見。改法配置前自行排序去重各類非法輸入的行為在 test/axis-break.html 的main_validate_breaks_*系列案例中有復現(xiàn)可逐個對照。??陷阱二start 與 end 相同卻設(shè)了 gap錯法寫出{ start: 2345, end: 2345, gap: 100 }這類退化區(qū)間。后果ECharts 將其退化為gap: 0只畫一條鋸齒線看起來完全沒斷。改法只想在軸上標記一個點不屬于斷裂的能力想要缺口就給區(qū)間一個真實寬度。??陷阱三以為斷裂后數(shù)據(jù)被重映射了錯法斷裂后把斷裂值寫進 tooltip 或二開組件的計算邏輯。后果斷裂只改像素映射tooltip、series.data、formatter拿到的都是原值。改法需要提示區(qū)間被跳過時在axisLabel.formatter里用extra.break標記即可。決策清單什么時候該上坐標軸斷裂數(shù)據(jù)存在量級斷層且斷層兩側(cè)都要可讀——兩條同時成立才用斷裂被藏區(qū)間的業(yè)務(wù)含義能一句話說清午休、非營業(yè)日、異常尖峰——說不清就別切目標讀者能理解缺口不等于零長度——做不到就補展開/折疊交互至少在斷裂點明確標注沒有二開邏輯依賴像素差推導軸域——映射不再全局線性后這類邏輯會失效斷裂數(shù)量克制一般在三處以內(nèi)——每多一處讀者要多做一次心智拼接留一個開放問題斷裂區(qū)間是動態(tài)的每次刷新數(shù)據(jù)重算時breaks該跟隨重算還是固定為業(yè)務(wù)預期區(qū)間前者貼合當前分布后者狀態(tài)穩(wěn)定可解釋哪個更合適取決于你的數(shù)據(jù)分布是否可預期。【免費下載鏈接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser項目地址: https://gitcode.com/GitHub_Trending/echa/echarts創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考