堆叠 分离

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            let chartData = [
  ['product', 'CB-Loan', 'PB-Loan', 'Other-Loan', 'CB-Deposit', 'PB-Deposit', 'Other-Deposit'],
  ['Last Year', 120, 132, 101, 134, 90, 230, 210],
  ['Last M', 120, 132, 101, 134, 90, 230, 210],
  ['Yesterday', 220, 182, 191, 234, 290, 330, 310],
  ['Today', 220, 182, 191, 234, 290, 330, 310],
  ['Budget', 220, 182, 191, 234, 290, 330, 310],
];

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
    },
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  yAxis: {
    type: 'value',
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisLabel: {
        interval: 0,
      },
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false,
      },
    },
    {
      type: 'category',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
  ],
  dataset: {
    source: chartData,
  },
  series: [
    {
      xAxisIndex: 0,
      type: 'bar',
      barWidth: '30%',
      stack: 'total',
      label: {
        show: true,
      },
    },
    {
      xAxisIndex: 0,
      type: 'bar',
      barWidth: '30%',
      stack: 'total',
      label: {
        show: true,
      },
    },
    {
      xAxisIndex: 0,
      type: 'bar',
      barWidth: '30%',
      stack: 'total',
      label: {
        show: true,
      },
    },
    {
      xAxisIndex: 1,
      barGap: '-200%',
      type: 'bar',
      barWidth: '30%',
      stack: 'total2',
      label: {
        show: true,
      },
    },
    {
      xAxisIndex: 1,
      barGap: '-200%',
      type: 'bar',
      barWidth: '30%',
      stack: 'total2',
      label: {
        show: true,
      },
    },
    {
      xAxisIndex: 1,
      barGap: '-200%',
      type: 'bar',
      barWidth: '30%',
      stack: 'total2',
      label: {
        show: true,
      },
    },
    {
      xAxisIndex: 0,
      type: 'bar',
      barWidth: '30%',
      data: [],
    },
    {
      xAxisIndex: 1,
      type: 'bar',
      barWidth: '30%',
      data: [],
    },
  ],
};