ECharts 坐标轴断裂怎么用对：处理极端值与数据断层的 4 步决策

ECharts 坐标轴断裂怎么用对处理极端值与数据断层的 4 步决策【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts上周同事的销售折线图一个 10 万级的异常点把其余 9 个点压成了贴地直线。ECharts 的坐标轴断裂Axis Break就是为这种数据断层准备的让坐标轴跳过一段区间剩下的数据重新摊开。但用之前得先判断该不该用下面按判断、配置、翻车点、交互四步过一遍。先判断这几类数据断层该不该用坐标轴断裂断裂的本质是让轴跳过[start, end]这段区间数据仍被映射只是这段区间不占或少占像素。所以该不该用取决于两件事——这段区间是不是不值得看的信息以及读图的人能不能接受轴看起来连续、其实断了一段的误读空间。场景建议理由极端值与其余数据差 1~2 个量级且该区间绝对值不重要用跳过量级差小数据重新摊开时间轴上有整段无数据午休、节假日、非交易时段用断裂比留白更符合时间不连续的语义只想弱化极端值但读数精度必须保证不用改用type: log对数刻度或用 markLine 标注异常点分类轴要跳过个别类别如某月数据缺失用按类别索引断裂其余类别间距保持只有 1~2 个点异常且这个点本身是业务重点慎用 ⚠️断裂容易把重点变成被省略的内容先考虑清洗数据或单独成图拿不准时问自己一个问题跳过这段区间后剩下的数据是否更好读了。是就用不是优先试对数刻度。最小可用配置ECharts breaks 只写 3 个字段下面这段在柱状图的数值轴上跳过一个区间是能让图表跑起来的最短写法。chart.setOption({ yAxis: { type: value, breaks: [{ start: 123, end: 2012 }] // 跳过 123~2012gap 缺省为 0 }, series: [{ type: bar, data: [12, 88, 650, 1200, 7435] }] });把start/end改成你自己数据的极值区间即可想有明显缺口就补一个gap如gap: 10%。注意gap写数字时单位是数据值单位和start/end一致不是像素。3 类高频场景的断裂配置骨架数值轴、时间轴、分类轴三个骨架各覆盖一种轴类型实际项目里只换轴和breaks字段其余图表配置不用动。数值轴跳过量级差这段在 y 轴跳两个量级区间并给断裂区域加了淡色背景和虚线边框让这里断了一眼可见。yAxis: { type: value, breaks: [ { start: 1000, end: 9000, gap: 20% }, // 缺口占轴范围 20% { start: 15000, end: 25000, gap: 5000 } // 数字 gap 单位是数据值 ], breakArea: { itemStyle: { color: rgba(0,0,0,0.05), borderType: dashed } } }改breaks里的start/end适配你要跳的区间只调断裂外观就只动breakArea.itemStyle。时间轴隐藏非交易时段这是股票分时图的骨架午休 11:30~13:00 直接不进图。xAxis: { type: time, breaks: [ { start: 2024-04-09 11:30:00, end: 2024-04-09 13:00:00, gap: 3% } ], axisLabel: { formatter: val echarts.time.format(val, {HH}:{mm}) } }改start/end为你的非交易时段即可若 series 数据是毫秒时间戳start/end也建议写成new Date(...)保证同一时间源。分类轴跳过个别类别分类轴的start/end是类别索引从 0 开始。xAxis: { type: category, data: [周一, 周二, 周三, 周四, 周五, 周六], breaks: [{ start: 3, end: 4, gap: 0.5 }] // 跳过索引 3~4 的类别 }改start/end为要跳过的类别索引gap单位是类别数0.5即半个类别的缺口。4 个容易翻车的断裂细节区间重叠、时区、gap 与 dataZoom每点按症状 → 原因 → 一行修复说都是实际联调里常见的。断裂区间互相重叠症状断裂区域顺序错乱、刻度错位。原因breaks数组里多个区间互相覆盖解析时各取一段。修复先合并再传入。❌ breaks: [{ start: 100, end: 500 }, { start: 300, end: 700 }] ✅ breaks: [{ start: 100, end: 500 }, { start: 600, end: 700 }]时间轴断裂混用时间源症状断裂位置偏移断裂段和数据段对不上。原因start/end一个用本地时间字符串、一个用 UTC 时间戳时区混了。修复统一成一个来源。❌ { start: new Date(2024-04-09 11:30), end: Date.UTC(2024, 3, 9, 13) } ✅ { start: new Date(2024-04-09 11:30), end: new Date(2024-04-09 13:00) }gap 为 0 的视觉歧义症状轴看起来完全连续读图的人默认数据也是连续的。原因零高度断裂区域默认没有视觉强调肉眼会直接脑补过去。修复给可见gap如gap: 2%或给breakArea.itemStyle上背景色。dataZoom 联动后缺口忽大忽小症状缩放后断裂缺口的像素尺寸突然变大或变小。原因数字gap是数据值单位轴范围一变对应像素就跟着变。修复gap改百分比字符串如gap: 15%像素缺口随轴范围等比缩放。用 dispatchAction 把断裂做成可交互如果用户需要按需查看完整数据可以用 action 切换断裂状态不用重设整个 option。下面这段把按钮绑定到toggleAxisBreak切换 yAxis 0 的第一个断裂区间。document.getElementById(btn).onclick function () { chart.dispatchAction({ type: toggleAxisBreak, yAxisIndex: 0, breaks: [{ start: 1000, end: 9000 }] }); };把type换成expandAxisBreak或collapseAxisBreak就是只展开或只收起breaks的start/end必须与轴上对应断裂项一致才能定位到它。 想让断裂区域本身可点再给breakArea加一个expandOnClick: true按钮文案同步可以监听axisbreakchanged事件。如果只能记住三件事跳过的区间不值得看量级差、非交易时段才用断裂需要精确读绝对值的先试对数刻度。gap优先用百分比字符串——数字是数据单位缩放后会变形。断裂默认是误导源务必给它可见的gap或断裂区域样式别让轴假装连续。想动手感受可以直接跑仓库 test 目录下的axis-break.html、axis-break-2.html里面的展开/收起按钮就是上面这套 action 的完整用法。【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考