echarts怎么实现堆叠柱状图两列数据对比

如图，查了资料有叠加的，有正负条形图的，但是没看到有这种裂开的

这是两个图,https://echarts.apache.org/examples/zh/editor.html?c=scatter-anscombe-quartet 可以参考下这个示例, 这个是4个图,在一起的, 改一改就跟你这个差不多了

const dataAll = [
  [
    [10.0, "北"],
    [8.0, "上"],
    [14.0, "广"],
    [4.0, "深"]
  ],
  [
    [-10.0, "北"],
    [8.0, "上"],
    [14.0, "广"],
    [4.0, "深"]
  ]
];
const markLineOpt = {
  animation: false,
  label: {
    formatter: 'y = 0.5 * x + 3',
    align: 'right'
  },
  lineStyle: {
    type: 'solid'
  },
  tooltip: {
    formatter: 'y = 0.5 * x + 3'
  },
  data: [
    [
      {
        coord: [0, 3],
        symbol: 'none'
      },
      {
        coord: [20, 13],
        symbol: 'none'
      }
    ]
  ]
};
option = {
  title: {
    text: "Anscombe's quartet",
    left: 'center',
    top: 0
  },
  grid: [
    { left: '7%', top: '7%', width: '38%', height: '38%' },
    { right: '7%', top: '7%', width: '38%', height: '38%' },

  ],
  tooltip: {
    formatter: 'Group {a}: ({c})'
  },
  xAxis: [
    { gridIndex: 0, type:'value',show:false },
    { gridIndex: 1, type:'value' ,show:false },

  ],
  yAxis: [
    { gridIndex: 0,    type:'category' },
    { gridIndex: 1, type:'category' ,show:false },
 
  ],
  series: [
    {
      name: 'I',
      type: 'bar',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: dataAll[0],
      
    },
    {
      name: 'II',
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: dataAll[1],
    
    }
  ]
};

简单改改 就差不多了, 细节的颜色和数值显示 查看配置项就能调出来

通过两个网格绘制