ECharts implements a histogram with two columns overlapping each other

Today we need to use echarts to draw a histogram with two columns overlapping each other. The two-column or multi-column charts in the example of the echarts document are all displayed side by side. After consulting the echarts configuration item document, it has been implemented so far. Not much to say. , the above code:

Chart styles that need to be implemented:

echarts configuration:

option = {
  color: ['#3398DB'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '预算数据',
      type: 'bar',
      barWidth: '60%',
      color: '#EAF6FE',
      data: [100, 520, 200, 350, 400, 370, 260]
    },
    {
      name: '实际数据',
      type: 'bar',
      barWidth: '60%',
      color: '#60BBFD',
      barGap: '-100%',
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};

In fact, looking at the configuration code, we can see that the property that controls the overlap of two columns is series.barGap

Let’s take a look at the official explanation of this attribute:

 If you see this, I hope I can help you quickly~