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