ECharts 坐标轴断裂实战指南3 行配置修复极端值压扁图表问题【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts柱状图里一个 10 倍的离群点把其余数据压成了贴轴的一条细条——这大概是数据可视化里最常见的翻车现场。ECharts 坐标轴断裂Axis Break可以把轴上的一段区间直接切掉剩下的数据自动拉伸铺满图表。下面从该不该用讲到怎么配、怎么动、怎么避坑。先看原理断裂切掉的是轴的哪一段坐标轴断裂挂坐标轴配置上工作方式一句话就能说清把 [start, end] 这段数值从轴上挖掉轴上对应位置只留一个宽为gap的缺口其余区间的线性映射不受影响。数据落在被挖掉的区间里就不会被展示也不会占据任何空间。这套逻辑由比例尺层的断裂映射实现核心源码在 src/scale/breakImpl.ts断裂区域的绘制逻辑在 src/component/axis/axisBreakHelperImpl.ts。数值轴value、时间轴time、分类轴category都支持仓库自带完整示例页 test/axis-break.html。使用判断坐标轴断裂该用还是不该用先给结论再谈配置场景建议存在个别极值量级超过其余数据 10 倍以上小值被压扁✅ 适合这是它的主场时间轴上有无意义时段午休、休市、停机✅ 适合纯拼接效果数据连续无断层只是想让中间看起来平缓点❌ 慎用断裂会暗示数据不连续量级差异是普遍现象而非个别点❌ 优先换log刻度轴断裂区间占全轴 80% 以上❌ 信息被切掉了大部分换图表或双图更合适最小配置3 行代码启用数值轴断裂option { yAxis: { type: value, breaks: [ { start: 123, end: 2012, gap: 10 }, { start: 2305, end: 7400 } ] }, series: [{ type: bar, data: [12, 88, 650, 1200, 7435] }] };配置项速查对应 src/util/types.ts 中的AxisBreakOption配置项取值说明start/endnumber / Date / string断裂区间两端分类轴上为要跳过的类别索引gapnumber / string缺口宽度。number 是数据单位非像素35%表示占轴范围的百分比缺省为 0isExpandedboolean该断裂的初始展开 / 折叠状态breakAreaobject断裂区样式zigzagAmplitude锯齿线振幅默认 4、itemStyle背景/边框、expandOnClick点击断裂标记即展开默认true场景一数值轴断裂救回被极值压扁的小数值配置要点断裂区间从数据分布反推把数据稀疏、没有看点的区间切掉而不是把极值所在的区间切掉gap建议用百分比字符串这样窗口缩放、数据更新时缺口比例稳定多段断裂之间留足间距避免两个断裂标记视觉粘连yAxis: { type: value, breaks: [ { start: 1000, end: 9000, gap: 35% }, { start: 15000, end: 25000, gap: 15% } ] }test/axis-break.html的 main0 就是这个形态两个断裂区间配合柱线混合系列展示。场景二时间轴断裂股票分时图隐藏午休start/end直接接受 Date 对象或时间字符串gap: 0得到纯拼接效果无缺口视觉上时间被缝合xAxis: { type: time, breaks: [{ start: new Date(2024-04-09 11:30:00), end: new Date(2024-04-09 13:00:00), gap: 0 }] }补充两个实用点axisLabel.formatter的第三个参数带break字段可据此识别断裂处的标签并单独格式化分时图完整案例见test/axis-break.html的 main3Intraday stock chart含动态重置断裂区间的按钮场景三分类轴断裂跳过无关类别分类轴上用类别索引定位要跳过的段适合中间几类与本主题无关的报表xAxis: { type: category, data: [Jan, Feb, Mar, Apr, May, Jun], breaks: [{ start: 1, end: 2 }] // 跳过 Feb索引 1 }注意gap在分类轴上表示跳过的格数多数场景保持默认 0 即可跳过的类别直接不占空间。动态交互动态切换断裂状态内置三个 action结构一致靠type区分// 切换 Y 轴 123~2012 断裂的展开 / 折叠 chart.dispatchAction({ type: toggleAxisBreak, // 另有 expandAxisBreak / collapseAxisBreak yAxisIndex: 0, // 支持传 all breaks: [{ start: 123, end: 2012 }] }); chart.on(axisbreakchanged, (e) { console.log(e.breaks); // 本次受影响的断裂信息 });别忘了breakArea.expandOnClick默认为true用户直接点击断裂标记本身就能展开零代码获得交互入口。配合 dataZoom 时在缩放回调里重算断裂区间再下发chart.on(dataZoom, () { const [start, end] chart.getOption().dataZoom[0]; chart.setOption({ yAxis: { breaks: buildBreaksByRange(start, end) } }); });test/axis-break-2.html的 main_gap_percent_break 系列案例演示了百分比缺口在不同缩放范围下的表现建议跑一遍对比。细节打磨断裂区域样式与响应式缺口breakArea决定切口长什么样常用字段yAxis: { breaks: [{ start: 100, end: 500, gap: 20 }], breakArea: { zigzagAmplitude: 6, // 锯齿振幅0 则为直线 itemStyle: { color: rgba(0,0,0,0.05), // 断裂区背景 borderType: dashed // 虚线边框 } } }zigzagMinSpan/zigzagMaxSpan控制锯齿的密度范围默认 4~20响应式布局下优先用百分比gap代替固定值容器变化时缺口比例自动稳定确需按宽度切换时在resize监听里更新gap后调用chart.resize()避坑清单4 个高频问题的现象、原因与修正#现象原因修正1配了多段断裂轴上只出现一段区间相互重叠或包含重叠段被忽略按start排序后确保区间互不重叠对照test/axis-break.html的 main_validate_breaks 系列案例自查2窗口缩放后断裂标记忽大忽小、位置漂移gap写了 number它是数据单位像素宽度随轴范围变化改用百分比字符串如35%它相对轴范围计算像素表现稳定3时间轴断裂位置偏了 8 小时start/end混用了本地时间与 UTC 时间两端统一时区口径要么都用new Date(YYYY-MM-DD HH:mm:ss)要么都用Date.UTC(...)4轴标签挤在断裂标记旁边重叠常规刻度标签离断裂位置太近保持breakLabelLayout默认moveOverlap: auto开启标签会自动避让自定义axisLabel.formatter时利用第三个参数的break字段单独处理上线前自查清单断裂区间内确实无数据或无信息量而不是为了好看硬切断裂标记保持可见breakArea.show默认为true避免读者误判数据连续提供了看完整数据的路径点击断裂处展开或一个collapseAxisBreak按钮还原时间轴断裂的start/end与轴、tooltip 使用同一时区口径在移动端与桌面端两种宽度下都目检过断裂标记与标签断裂功能克制使用是它长期好用的前提。下一篇我们看 ECharts 的 markPoint / markLine 标注体系把断裂、极值、阈值标在一张图上讲清楚。【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考