堆积柱状图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)
将dataZoom的filterMode改为'empty'