echart 堆积柱状图用到datazoom的时候,一开始不显示的部分出现重叠

堆积柱状图y轴用了datazoom,然后设置了最大最小值,一开始有一部分数据是不显示的要向上拖才会显示,问题是那些后来才出现的柱状图会出现重叠,正确的是显示方式应该是推积显示的
下面是图表开始时候的状态
clipboard.png
向上拖后
clipboard.png
6,7两个柱状图发生了重叠!!!
代码

let chart3 = this.$echarts.init( document.getElementById('chart3'))
              let option3 = {
                tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                  }
                },
                legend: {
                  data: ['直接领取访问', '分享码领取红包']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true,
                },
                xAxis:  {
                  name:'红包数量',
                  type: 'value',
                  position: 'top',
                },
                yAxis: {
                  name:'经销商排名',
                  inverse:true,
                  type: 'category',
                  data: ['经销商(1)','经销商(2)','经销商(3)','经销商(4)','经销商(5)','经销商(6)','经销商(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)
阅读 9.9k
2 个回答

将dataZoom的filterMode改为'empty'

dataZoom: [
    {
        filterMode: 'empty'
    }
]

我也遇见了这种问题,放大的时候叠加柱状图就会出问题,搞了半天,终于发现了是版本的问题,楼主用的应该是echarts的4.0左右的版本吧,我换成了3.6版本的就不会出现楼主说的柱状图重叠的问题了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题