企业官网建设流程全解析

ECharts 坐标轴断裂：多区间 gap 配置、分时图与交互控制

【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts

ECharts 坐标轴断裂通过轴上的breaks配置把一段数值范围从轴上"切掉"，让量级悬殊的数据能同屏展示，而不被极端值拉平。本文从真实行为出发，讲怎么配、为什么这么配、什么时候别配。

现象切片：一个极端值压扁其余所有数据

12、88、650、1200、7435 五个点画在同一根线性轴上：7435 把轴拉伸了数倍，前四根柱子缩成噪音，650 和 1200 的差异肉眼不可辨。这不是数据的问题，是映射的问题——像素高度按整段轴域分配，小值根本分不到空间。对数轴虽然也能缓解，但会改变读者对比例差的直觉感知，而业务报表里"两根柱子高度差"往往就是读者要读的信息。

🔧 坐标轴断裂就是为这种情况设计的：把一段数值范围从轴上切走，让剩余区间拿到足够的显示高度，同时保持每段内部的线性映射。

机制速写：它到底对 Scale 做了什么

它不改你的数据，series.data里的 7435 还是 7435。改的是坐标映射：原来一条数值 → 像素的线性函数，被断裂点切成若干段，start到end之间的值域从像素空间里整体跳过，只留一个gap宽的缺口；刻度、网格线、数据点都按这段函数重新定位，但标签文字仍显示原值。断裂附近的普通刻度还会被裁剪，避免和锯齿线挤在一起。

🔧 实现上，用户输入的breaks先经parseAxisBreakOption校验解析，再由createBreakScaleMapper生成分段映射器注入 scale，门面在 src/scale/break.ts，AxisBreakOption的类型形态定义在 src/util/types.ts。

原理清楚了，看看配置本身有多短。

最小可行配置：12 行的双区间断裂柱状图

下面这段把 Y 轴切了两段，让极端值 7435 不再压垮小值柱：

// 12 行最小配置：柱状图双区间断裂 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] // ← 关键：7435 不再压垮其余四根 }] };

几个容易忽略的细节：

• start/end使用轴的值域坐标，需要升序且不重叠；
• gap是屏幕上的缺口尺寸：数字为像素，字符串为轴长百分比（如'10%'）；
• gap为0时断裂表现为一条锯齿线，两侧数据视觉上直接相连；
• breakArea子配置控制断裂区域的背景与边框样式，默认透明无边框；
• 时间轴上start/end可直接传Date对象。

可运行的完整示例在 test/axis-break.html，看顶部main0案例，关注锯齿线与数据点的相对位置。

数值轴搞定了，时间轴才是真正的硬骨头。

组合 · 边界 · 陷阱

股票分时图｜时间轴断裂应取 gap 为 0

股票分时图要藏掉午间休市 11:30-13:00，否则这段空档会把全天的价格线拉出一截台阶。时间轴断裂直接传Date，gap通常取0——休市时间本来就不该在屏幕上占空间。下面这段同时处理了断裂处的轴标签：

// 时间轴断裂：隐藏午休，轴标签在断裂点标出被藏区间 xAxis: { type: 'time', breaks: [{ start: new Date('2024-04-09 11:30'), // 午休开始 end: new Date('2024-04-09 13:00'), // 午休结束 gap: 0 // ← 关键：非交易时段不留缺口 }], axisLabel: { formatter: (value, index, extra) => { if (extra && extra.break) { // ← 关键：extra 只在断裂点有值 return '11:30-13:00'; // 在断裂点标出被藏的区间 } return echarts.time.format(value, '{HH}:{mm}'); } } }

test/axis-break.html 的main3（Intraday stock chart）案例带一个"重置断裂"按钮，点击可把午休恢复原样，方便对比断裂前后两种状态。断裂区间本质是毫秒时间戳比较，数据生成和断裂配置混用时区概念，会让被藏区间偏移到你没预期的位置。

dataZoom 联动｜百分比缺口与像素缺口行为不同

图表一旦加上 dataZoom，两种gap写法的差别就显现了：像素缺口缩放后保持绝对宽度，百分比缺口随轴长等比缩放，放大缩小后断裂既不霸屏也不会被挤到看不见。数据量大、预期用户会缩放时，优先百分比：

// 百分比缺口：dataZoom 缩放时缺口宽度始终与轴长成比例 yAxis: { breaks: [ { start: 4234, end: 7000, gap: '10%' }, // ← 关键：按当前轴长的百分比 { start: 11234, end: 13000, gap: '40%' } ] }

缩放联动效果见 test/axis-break-2.html 的main_gap_percent_break_2，重点对比不同缩放范围下缺口宽度的表现。

交互控制｜用 start/end 定位断裂

断裂不必一次配死。展开时把被藏区间"伸出来"显示，折叠时再压回去，这给"看完整数据"留了出口。三个 action 定义在 src/component/axis/axisAction.ts，轴的定位写法和其他组件一致（index/id/name 三选一），下面的代码展开指定断裂并监听状态变化：

// 动态展开/折叠断裂，并监听状态变化 chart.dispatchAction({ type: 'expandAxisBreak', // 或 collapseAxisBreak / toggleAxisBreak yAxisIndex: 0, breaks: [{ start: 123, end: 2012 }] // ← 关键：用 start/end 定位断裂 }); chart.on('axisbreakchanged', (event) => { event.breaks.forEach((brk) => { console.log(brk.isExpanded, brk.old.isExpanded); // 现值与旧值 }); });

action 生效后，getOption()返回的breaks会带上isExpanded状态，做持久化或还原 UI 时读状态即可，不必自己记。

陷阱三行式

⚠️陷阱一：非法区间被静默丢弃

• 错法：start > end、缺start或end、两个区间重叠。
• 后果：不抛异常，该区间被校验过滤，图表按无此断裂绘制，问题不可见。
• 改法：配置前自行排序去重；各类非法输入的行为在 test/axis-break.html 的main_validate_breaks_*系列案例中有复现，可逐个对照。

⚠️陷阱二：start 与 end 相同却设了 gap

• 错法：写出{ start: 2345, end: 2345, gap: 100 }这类退化区间。
• 后果：ECharts 将其退化为gap: 0，只画一条锯齿线，看起来完全没断。
• 改法：只想在轴上标记一个"点"不属于断裂的能力；想要缺口就给区间一个真实宽度。

⚠️陷阱三：以为断裂后数据被重映射了

• 错法：断裂后把"断裂值"写进 tooltip 或二开组件的计算逻辑。
• 后果：断裂只改像素映射，tooltip、series.data、formatter拿到的都是原值。
• 改法：需要提示"区间被跳过"时，在axisLabel.formatter里用extra.break标记即可。

决策清单：什么时候该上坐标轴断裂

• 数据存在量级断层，且断层两侧都要可读——两条同时成立才用断裂
• 被藏区间的业务含义能一句话说清（午休、非营业日、异常尖峰）——说不清就别切
• 目标读者能理解"缺口不等于零长度"——做不到就补展开/折叠交互，至少在断裂点明确标注
• 没有二开逻辑依赖"像素差推导轴域"——映射不再全局线性后，这类逻辑会失效
• 断裂数量克制，一般在三处以内——每多一处，读者要多做一次心智拼接

留一个开放问题：断裂区间是动态的（每次刷新数据重算）时，breaks该跟随重算还是固定为业务预期区间？前者贴合当前分布，后者状态稳定可解释，哪个更合适取决于你的数据分布是否可预期。

【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts