---
title: "坐标轴断轴条形图"
language: "zh"
canonical: "https://g2.antv.antgroup.com/zh/examples/general/interval/bar-axis-breaks/"
version: "5.4.8"
---

# 坐标轴断轴条形图

[运行示例](https://g2.antv.antgroup.com/zh/examples/general/interval/bar-axis-breaks/)

[资料索引](/llms.txt)

页面需要一个 `id="container"` 的 DOM 元素。以下为原始示例源码。

## 源码

```ts
import { Chart } from '@antv/g2';

const axisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const data1 = [1800, 2500, 3100, 4200, 3890, 5200, 5600];
const data2 = [950, 1400, 2200, 1750, 2800, 3300, 2900];
const data3 = [101200, 104800, 102600, 103500, 104200, 102900, 103800];
const data4 = [4120500, 4107800, 4112300, 4109500, 4115000, 4111200, 4108800];

const data = axisData.flatMap((name, i) => [
  { name, value: data1[i], type: 'Sports' },
  { name, value: data2[i], type: 'Strategy' },
  { name, value: data3[i], type: 'Shooter' },
  { name, value: data4[i], type: 'Other' },
]);

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'interval',
  data: data,
  encode: { x: 'name', y: 'value', color: 'type' },
  transform: [{ type: 'dodgeX' }],
  interaction: { tooltip: { shared: true } },
  scale: { y: { nice: true } },
  axis: {
    x: { title: false },
    y: {
      title: false,
      labelAutoHide: false,
      transform: [],
      breaks: [
        {
          start: 6000,
          end: 100000,
          gap: '3%',
        },
        {
          start: 105000,
          end: 4100000,
          gap: '3%',
          vertices: 60,
          verticeOffset: 4,
          compress: 'end',
        },
      ],
    },
  },
});

chart.render();
```