echart 堆積柱狀圖用到datazoom的時候,一開始不顯示的部分出現(xiàn)重疊

堆積柱狀圖y軸用了datazoom,然后設置了最大最小值,一開始有一部分數(shù)據(jù)是不顯示的要向上拖才會顯示,問題是那些后來才出現(xiàn)的柱狀圖會出現(xiàn)重疊,正確的是顯示方式應該是推積顯示的
下面是圖表開始時候的狀態(tài)

向上拖后

6,7兩個柱狀圖發(fā)生了重疊!!!
代碼

let chart3 = this.$echarts.init( document.getElementById('chart3'))
              let option3 = {
                tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐標軸指示器，坐標軸觸發(fā)有效
                    type : 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
                  }
                },
                legend: {
                  data: ['直接領取訪問', '分享碼領取紅包']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true,
                },
                xAxis:  {
                  name:'紅包數(shù)量',
                  type: 'value',
                  position: 'top',
                },
                yAxis: {
                  name:'經(jīng)銷商排名',
                  inverse:true,
                  type: 'category',
                  data: ['經(jīng)銷商(1)','經(jīng)銷商(2)','經(jīng)銷商(3)','經(jīng)銷商(4)','經(jīng)銷商(5)','經(jīng)銷商(6)','經(jīng)銷商(7)'],
                  nameLocation: 'start',
                  nameGap: 30,
                  axisLabel:{
                    rotate:-45
                  }
                },
                dataZoom: [
                  { // 第一個 dataZoom 組件
                    type:'inside',
                    yAxisIndex: [0],// 表示這個 dataZoom 組件控制 第一個 和 第三個 yAxis
                    filterMode: 'filter',
                    startValue: 0,
                    endValue: 4,
                  },
                ],
                grid: [
                  {
                    width:'80%'
                  }
                ],
                series: [
                  {
                    name: '直接領取訪問',
                    type: 'bar',
                    "stack": '1',
                    label: {
                      normal: {
                        show: true,
                        position: 'insideRight'
                      }
                    },
                    data: [320, 302, 250, 254, 264, 270, 230]
                  },
                  {
                    name: '分享碼領取紅包',
                    type: 'bar',
                    stack: '1',
                    label: {
                      normal: {
                        show: true,
                        position: 'insideRight'
                      }
                    },
                    data: [120, 132, 101, 134, 90, 220, 210]
                  }
                ]
              };
              chart3.setOption(option3)