首页
/ 10分钟解决数据断层难题：ECharts坐标轴断裂功能完全指南

10分钟解决数据断层难题：ECharts坐标轴断裂功能完全指南

2026-02-05 05:48:17作者：侯霆垣
echarts
ECharts 是一款基于 JavaScript 的开源可视化库，提供了丰富的图表类型和交互功能，支持在 Web、移动端等平台上运行。强大的数据可视化工具，支持多种图表类型和交互方式。易于上手、可扩展性强、性能优异、具有良好的视觉效果。用于数据分析和展示，适用于前端和后端开发。
项目地址：https://gitcode.com/GitHub_Trending/echa/echarts

你是否遇到过这样的困境？当数据中出现极端值时，图表要么被压缩成一条直线，要么大部分数据挤在一起无法分辨。比如显示公司近五年销售额时，其中某一年因特殊原因暴增10倍，传统图表会让其他年份的数据差异完全消失。ECharts的坐标轴断裂（Axis Break）功能正是为解决这类问题而生，它能在保持数据真实性的同时，让图表重新变得清晰可读。

读完本文后，你将掌握：

  • 3种核心断裂场景的实现方法
  • 动态控制断裂显示的交互技巧
  • 90%开发者都会踩的5个坑及解决方案
  • 股票分时图、年度报表等实战案例代码

一、快速上手：10行代码实现基础断裂

坐标轴断裂功能通过breaks配置项实现，核心是定义需要断裂的数值范围。以下是最基础的实现示例，适用于柱状图、折线图等大多数图表类型：

option = {
  yAxis: {
    type: 'value',
    // 定义断裂区间
    breaks: [{
      start: 123,    // 断裂开始值
      end: 2012,     // 断裂结束值
      gap: 10        // 断裂缺口大小（像素）
    }, {
      start: 2305,
      end: 7400,
      gap: 0         // 缺口为0时显示为折线
    }]
  },
  series: [{
    type: 'bar',
    data: [12, 88, 650, 1200, 7435]  // 包含极端值的数据
  }]
};

这个配置会在Y轴上创建两个断裂区间，分别跳过123-2012和2305-7400的数值范围，让原本被极端值(7435)压缩的小数据(12,88,650)重新获得合适的展示空间。完整示例可参考test/axis-break.html中的实现。

二、场景化实战：从基础到高级

2.1 数值轴断裂：解决数据量级差异

当数据中存在数量级差异时（如大部分值在0-100，个别值达10000以上），可通过数值轴断裂让图表重获可读性。关键配置包括：

  • start/end: 定义断裂的数值范围
  • gap: 控制断裂缺口大小，支持像素值或百分比
  • breakArea: 自定义断裂区域样式
yAxis: {
  type: 'value',
  breaks: [
    {start: 1000, end: 9000, gap: '30%'},  // 占Y轴高度30%的缺口
    {start: 15000, end: 25000, gap: 50}    // 固定50像素缺口
  ],
  breakArea: {
    itemStyle: {
      color: 'rgba(255,0,0,0.1)',  // 断裂区域背景色
      borderType: 'dashed'        // 虚线边框
    }
  }
}

test/axis-break-2.html中的"main_gap_percent_break_1"案例展示了不同百分比缺口的视觉效果，建议实际运行代码观察不同配置下的差异。

2.2 时间轴断裂：股票分时图的秘密武器

金融领域的分时图常需要隐藏非交易时段（如午休、隔夜），时间轴断裂是最佳解决方案。ECharts支持直接使用Date对象定义时间范围：

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: (value, index, extra) => {
      if (extra && extra.break) {
        return `${extra.break.start.getHours()}:${extra.break.start.getMinutes()}-${extra.break.end.getHours()}:${extra.break.end.getMinutes()}`;
      }
      return echarts.time.format(value, '{HH}:{mm}');
    }
  }
}

这段代码实现了股票交易日中午休时段的隐藏，使图表仅展示有效交易时间的数据。完整案例可参考test/axis-break.html中"Intraday stock chart"部分，该案例还包含了动态重置断裂区间的交互按钮实现。

2.3 多维度断裂：复杂报表的高级技巧

在复杂数据可视化场景中，可能需要同时对X轴和Y轴进行断裂，或在一个轴上定义多个断裂区间。以下是一个多维度断裂的典型配置：

option = {
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    breaks: [{start: 1, end: 2, gap: 0.2}]  // 隐藏Feb数据
  },
  yAxis: {
    type: 'value',
    breaks: [
      {start: 100, end: 300, gap: '20%'},   // 第一个断裂区间
      {start: 500, end: 800, gap: '10%'}    // 第二个断裂区间
    ]
  },
  series: [/* 多个系列数据 */]
};

test/axis-break.html中的"main2"案例展示了分类轴断裂的效果，特别适合需要跳过某些类别数据的场景。

三、交互控制：让断裂效果动态化

3.1 动态切换断裂状态

通过ECharts的action接口，可实现断裂状态的动态切换，提升用户交互体验：

// 展开指定断裂区间
chart.dispatchAction({
  type: 'expandAxisBreak',
  yAxisIndex: 0,  // 指定坐标轴索引
  breaks: [{start: 123, end: 2012}]  // 要展开的断裂区间
});

// 折叠断裂区间（恢复断裂状态）
chart.dispatchAction({
  type: 'collapseAxisBreak',
  yAxisIndex: 0,
  breaks: [{start: 123, end: 2012}]
});

// 切换断裂状态（展开/折叠切换）
chart.dispatchAction({
  type: 'toggleAxisBreak',
  yAxisIndex: 0,
  breaks: [{start: 123, end: 2012}]
});

test/axis-break.html顶部的交互按钮就是使用这些API实现的，建议运行该示例并点击按钮体验动态效果。

3.2 结合数据缩放的断裂控制

当图表包含dataZoom组件时，需要确保断裂区间能随缩放范围动态调整。关键是监听dataZoom事件，在缩放范围变化时更新断裂配置：

myChart.on('dataZoom', function(params) {
  const start = params.startValue;
  const end = params.endValue;
  
  // 根据当前缩放范围动态调整断裂区间
  myChart.setOption({
    yAxis: {
      breaks: calculateBreaksByRange(start, end)  // 自定义函数计算断裂区间
    }
  });
});

test/axis-break-2.html中的"main_gap_percent_break_2"案例展示了这种高级交互场景，当使用dataZoom缩放时，断裂区间会智能调整以保持最佳可视化效果。

四、避坑指南：90%开发者会犯的错误

4.1 断裂区间重叠问题

错误示例：定义重叠的断裂区间

breaks: [
  {start: 100, end: 500, gap: 10},  // 区间1
  {start: 300, end: 700, gap: 10}   // 与区间1重叠
]

解决方案：确保断裂区间严格有序且不重叠

breaks: [
  {start: 100, end: 500, gap: 10},  // 先定义小范围
  {start: 600, end: 700, gap: 10}   // 确保与前一区间有间隔
]

ECharts会自动忽略重叠的断裂区间，并在控制台输出警告，可通过test/axis-break.html中的"main_validate_breaks_2"案例查看具体效果。

4.2 断裂与数据标签冲突

当数据标签位置与断裂区间重叠时，会导致显示混乱。解决方案是通过labelLayout配置调整标签位置：

yAxis: {
  breaks: [/* 断裂配置 */],
  axisLabel: {
    // 防止标签重叠
    hideOverlap: true,
    // 自定义标签布局
    labelLayout: {
      moveOverlap: 'shiftY'  // 垂直方向移动避免重叠
    }
  }
}

4.3 时间轴断裂的时区问题

在处理时间轴断裂时，务必注意时区一致性问题：

// 错误做法：混合使用不同时区
breaks: [{
  start: new Date('2024-04-09 11:30:00'),  // 本地时区
  end: new Date(Date.UTC(2024, 3, 9, 9, 30))  // UTC时区
}]

// 正确做法：统一使用UTC时间
breaks: [{
  start: new Date(Date.UTC(2024, 3, 9, 3, 30)),  // 统一UTC时间
  end: new Date(Date.UTC(2024, 3, 9, 5, 0))
}]

test/axis-break.html中的"main3"案例展示了正确的时间轴断裂实现，包含时区处理的最佳实践。

五、实战案例：从理论到实践

5.1 股票分时图（含午休断裂）

以下是一个完整的股票分时图实现，包含交易时段断裂、动态更新和交互控制：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 使用国内CDN引入ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 100%; height: 400px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('main'));
    
    // 模拟股票数据
    function generateStockData() {
      const data = [];
      const date = new Date('2024-04-09 09:30:00');
      const lunchStart = new Date('2024-04-09 11:30:00');
      const lunchEnd = new Date('2024-04-09 13:00:00');
      const endTime = new Date('2024-04-09 15:00:00');
      
      let price = 1669;
      while (date <= endTime) {
        // 跳过午休时间
        if (!(date >= lunchStart && date < lunchEnd)) {
          price += (Math.random() - 0.5) * 2;  // 随机波动
          data.push([date.getTime(), price.toFixed(2)]);
        }
        date.setMinutes(date.getMinutes() + 1);  // 每分钟一个数据点
      }
      return data;
    }
    
    const option = {
      title: {text: '股票分时图（含午休断裂）'},
      tooltip: {trigger: 'axis'},
      xAxis: {
        type: 'time',
        interval: 30 * 60 * 1000,  // 30分钟刻度
        breaks: [{
          start: new Date('2024-04-09 11:30:00'),
          end: new Date('2024-04-09 13:00:00'),
          gap: 0
        }],
        axisLabel: {
          formatter: (value, index, extra) => {
            if (extra && extra.break) {
              return `${extra.break.start.getHours()}:${extra.break.start.getMinutes()}-${extra.break.end.getHours()}:${extra.break.end.getMinutes()}`;
            }
            return echarts.time.format(value, '{HH}:{mm}');
          }
        }
      },
      yAxis: {type: 'value', axisLabel: {formatter: n => n}},
      series: [{type: 'line', data: generateStockData(), symbolSize: 0}]
    };
    
    chart.setOption(option);
    
    // 添加交互按钮
    document.body.insertAdjacentHTML('beforeend', `
      <button onclick="toggleBreak()">切换午休断裂</button>
    `);
    
    window.toggleBreak = function() {
      const breaks = option.xAxis.breaks.length ? [] : [{
        start: new Date('2024-04-09 11:30:00'),
        end: new Date('2024-04-09 13:00:00'),
        gap: 0
      }];
      chart.setOption({xAxis: {breaks: breaks}});
    };
  </script>
</body>
</html>

这个案例完整实现了股票分时图的午休时段断裂，包含数据生成、断裂配置和交互控制等完整功能。实际应用中，只需将generateStockData()函数替换为真实数据源即可。

5.2 年度销售报表（多区间断裂）

对于包含季节性波动的年度销售数据，多区间断裂能有效平衡不同季节的数据差异：

option = {
  title: {text: '年度销售额趋势（含季节性断裂）'},
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    type: 'value',
    breaks: [
      {start: 500, end: 1500, gap: '15%'},  // 跳过常规波动区间
      {start: 3000, end: 5000, gap: '20%'}   // 跳过旺季高峰区间
    ]
  },
  series: [{
    type: 'bar',
    data: [350, 420, 280, 6500, 6800, 7200, 220, 180, 250, 7000, 7500, 8200]
  }]
};

test/axis-break.html中的"main0"案例提供了类似的实现，通过多区间断裂，将季节性波动的销售额数据清晰地展示在同一图表中。

六、高级配置：打造专业级可视化效果

6.1 自定义断裂样式

通过breakArea配置项可完全自定义断裂区域的视觉效果：

yAxis: {
  breaks: [{start: 100, end: 500, gap: 20}],
  breakArea: {
    // 折线振幅（0表示直线）
    zigzagAmplitude: 5,
    // 断裂区域样式
    itemStyle: {
      color: 'rgba(0,0,0,0.05)',    // 背景色
      borderColor: '#999',         // 边框色
      borderWidth: 1,              // 边框宽度
      borderType: 'dashed'         // 边框类型
    }
  }
}

test/axis-break.html中的"main_break_style_3"案例展示了不同断裂样式的效果对比，包括实线边框、虚线边框和不同背景透明度的配置。

6.2 响应式断裂调整

在响应式布局中，需要根据容器尺寸动态调整断裂缺口大小：

// 监听容器尺寸变化
window.addEventListener('resize', function() {
  const containerWidth = document.getElementById('main').clientWidth;
  // 根据宽度计算合适的缺口大小
  const gap = containerWidth < 600 ? 5 : 10;
  
  chart.setOption({
    yAxis: {
      breaks: [{start: 100, end: 500, gap: gap}]
    }
  });
  
  chart.resize();  // 调整图表大小
});

这种响应式调整确保在移动设备和桌面设备上都能获得最佳的断裂显示效果。

七、总结与最佳实践

坐标轴断裂是处理极端值和数据断层的强大工具，但也应谨慎使用，过度断裂会导致数据失真。以下是经过实践检验的最佳实践：

  1. 最小必要原则：仅在数据差异超过10倍时使用断裂，避免过度断裂
  2. 清晰标识：断裂处必须有明确的视觉标识，避免用户误解数据连续性
  3. 交互提示：提供展开/折叠断裂的交互方式，允许用户查看完整数据
  4. 测试验证：在不同屏幕尺寸和数据分布下测试断裂效果

ECharts的坐标轴断裂功能为解决数据可视化中的极端值问题提供了优雅的解决方案。通过本文介绍的基础配置、场景案例和高级技巧，你可以轻松应对各类数据断层挑战，打造专业级的数据可视化效果。完整的API文档和更多案例可参考项目中的test/axis-break.html和test/axis-break-2.html文件。

掌握坐标轴断裂功能后，你还可以探索ECharts的其他高级特性，如动态数据更新、3D可视化等，进一步提升数据可视化水平。如有疑问或发现新的应用场景，欢迎参与ECharts社区讨论，共同完善这一强大的可视化工具。

点赞+收藏+关注，获取更多ECharts高级技巧。下期预告：《ECharts数据可视化性能优化实战》

echarts
ECharts 是一款基于 JavaScript 的开源可视化库，提供了丰富的图表类型和交互功能，支持在 Web、移动端等平台上运行。强大的数据可视化工具，支持多种图表类型和交互方式。易于上手、可扩展性强、性能优异、具有良好的视觉效果。用于数据分析和展示，适用于前端和后端开发。
项目地址：https://gitcode.com/GitHub_Trending/echa/echarts
登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
27
11
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
525
3.72 K
pytorchpytorch
Ascend Extension for PyTorch
Python
332
395
flutter_flutterflutter_flutter
暂无简介
Dart
766
189
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
878
586
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
336
165
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
302
352
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
1
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.33 K
748
agent-studioagent-studio
openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力
TSX
985
246