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

堆积柱状图y轴用了datazoom,然后设置了最大最小值,一开始有一部分数据是不显示的要向上拖才会显示,问题是那些后来才出现的柱状图会出现重叠,正确的是显示方式应该是推积显示的

下面是图表开始时候的状态

向上拖后

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)