当创建两个X轴的时候,背景和柱状图不能同时缩放
配置项如下
option = {
backgroundColor: '#142058',
// title: {
// textStyle: {
// color: '#00FFFF',
// fontSize: 24
// }
// },
legend: {
top: 20,
textStyle: {
color: '#fff',
},
data: ['男', '女', '111']
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
tooltip: {
show: "true",
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
padding: [8, 10], //内边距
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
formatter: function(params) {
if (params.seriesIndex == "3" || params.seriesIndex == "4" || params.seriesIndex == "5") {
return params.name + '<br>' + params.seriesName + ' : 第 ' + params.value + ' 名';
}
}
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#363e83',
}
},
splitLine: {
show: true,
lineStyle: {
color: '#363e83 ',
}
},
axisLabel: {
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: '12',
},
},
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#363e83',
}
},
axisLabel: {
inside: false,
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: '12',
},
// formatter:function(val){
// return val.split("").join("\n")
// },
},
data: [1,1,1,1,1,1,1]
}, {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: [1,1,1,1,1,1,1]
},
],
dataZoom: [{
type: 'inside',
start: 50,
end: 100
}, {
show: false,
type: 'slider',
y: '90%',
start: 50,
end: 100
}],
series: [{
type: 'bar',
xAxisIndex: 1,
barGap: '100%',
data: [30, 30, 30, 30, 30, 30, 30],
zlevel: 1,
barWidth: '10%',
itemStyle: {
normal: {
show: true,
color: 'rgba(208,160,14,0.3)',
barBorderRadius: [20, 0, 20, 0],
borderWidth: 0,
borderColor: '#333',
}
},
}, {
type: 'bar',
xAxisIndex: 1,
barGap: '100%',
data: [30, 30, 30, 30, 30, 30, 30],
zlevel: 1,
barWidth: '10%',
itemStyle: {
normal: {
show: true,
color: 'rgba(208,160,14,0.3)',
barBorderRadius: [20, 0, 20, 0],
borderWidth: 0,
borderColor: '#333',
}
},
}, {
name: '女',
type: 'bar',
barWidth: '10%',
itemStyle: {
normal: {
show: true,
color: '#d0a00e',
barBorderRadius: [20, 0, 20, 0],
borderWidth: 0,
borderColor: '#333',
}
},
zlevel: 2,
barGap: '100%',
data: [8, 17, 26, 9 , 14 , 12 , 5]
}, {
name: '111',
type: 'bar',
barWidth: '10%',
itemStyle: {
normal: {
show: true,
color: '#d0a00e',
barBorderRadius: [20, 0, 20, 0],
borderWidth: 0,
borderColor: '#333',
}
},
zlevel: 2,
barGap: '100%',
data: [8, 17, 26 , 9 , 14 , 17, 26]
}
]
};