echarts堆叠柱如何在一个柱子上显示两个数据

主要用到这个属性: barGap: "-100%",//实现两个数据在一个柱子上面显示

<template>
  <div>
    <!-- 账单列表开始 -->
    <div class="xfjl_box shaowAll">
      <p class="Ptitle">代理商报表</p>
      <div class="orderRank">代理商成交订单总数量排行版</div>
      <div class="toolS" id="main1" style="width: 100%; height: 500px; margin: 0 auto"> </div>
      <div class="orderRank">代理商成交总金额排行榜</div>
      <div class="toolS" id="main2" style="width: 100%; height: 500px; margin: 0 auto"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { getUsersPage } from '@/api/chengxu'
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.init();
  },
  methods: {
    init () {
      var chartDom1 = document.getElementById('main1');
      var chartDom2 = document.getElementById('main2');
      var myChart1 = echarts.init(chartDom1);
      var myChart2 = echarts.init(chartDom2);
      var option1;
      var option2;
      option1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ['SASS订单', '私有化部署订单']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        title: {//柱状图Y轴的单位
          text: '套',
          align: 'left',
          x: 50,
          y: 10,

        },
        xAxis: [
          {
            type: 'category',
            data: ['代理商1', '代理商2', '代理商3', '代理商4']
          }
        ],
        yAxis: [
          {
            type: 'value',
          }
        ],
        series: [
          {
            name: 'SASS订单',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            barWidth: 30,//控制柱子的宽度
            barGap: "-100%",//实现两个数据在一个柱子上面显示
            data: [320, 332, 121, 334],
            itemStyle: {
              normal: {
                color: '#1CC9B5' //柱子的颜色
              }
            }
          },
          {
            name: '私有化部署订单',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            barGap: "-100%",//实现两个数据在一个柱子上面显示
            barWidth: 30,//控制柱子的宽度
            data: [120, 132, 101, 134],
            itemStyle: {
              normal: {
                color: '#FF9C58' //柱子的颜色
              }
            }
          },
        ]
      };
      option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ['SASS总金额', '私有化部署总金额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        title: {//柱状图Y轴的单位
          text: '万',
          align: 'left',
          x: 50,
          y: 10,

        },
        xAxis: [
          {
            type: 'category',
            data: ['代理商1', '代理商2', '代理商3', '代理商4']
          }
        ],
        yAxis: [
          {
            type: 'value',
          }
        ],
        series: [
          {
            name: 'SASS总金额',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            barWidth: 30,//控制柱子的宽度
            barGap: "-100%",//实现两个数据在一个柱子上面显示
            data: [320, 332, 121, 334],
            itemStyle: {
              normal: {
                color: '#1CC9B5'
              }
            }
          },
          {
            name: '私有化部署总金额',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            barGap: "-100%",//实现两个数据在一个柱子上面显示
            barWidth: 30,//控制柱子的宽度
            data: [120, 132, 101, 134],
            itemStyle: {
              normal: {
                color: '#FF9C58'
              }
            }
          },
        ]
      };
      option1 && myChart1.setOption(option1);
      option2 && myChart2.setOption(option2);
    },
  }
}
</script>

<style scoped lang="scss">
.toolS {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  align-items: center;
  margin: 32px 40.328px 0 40.328px;
}
.shaowAll {
  /* box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05); */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.Ptitle {
  font-size: 18px;
  line-height: 18px;
  color: #222;
  font-weight: 700;
}
.xfjl_box {
  margin: 20px;
}

/**
新增样式
*/
.orderRank {
  width: 96%;
  height: 39px;
  line-height: 39px;
  background-color: rgba(238, 241, 246, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  border: 1px solid rgba(255, 0, 0, 0);
  margin: 30px auto;
}
</style>