配置项如下
var myColor = ['#006af1', '#01a9f0', '#3fa967', '#ffb310', '#ff7611', '#f55555'];
var colorList = ['#d6e6fd', '#d6f0fd', '#e0f1e7','#fff3d9','#ffead9','#fee4e5']
option = {
tooltip: {
show: "true",
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#e9e9e9',
}
},
axisLabel: {
inside: false,
textStyle: {
color: '#333',
fontWeight: 'normal',
fontSize: 12,
}
},
data: ['应到', '正常', '请假', '迟到', '早退', '旷课']
}, {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: []
}, ],
yAxis: {
type: "value",
name: '',
splitNumber: 6,
axisLabel: {
textStyle: {
color: "#333"
}
},
nameTextStyle: {
color: "#fff",
fontSize: 12
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "#e9e9e9"
}
},
axisTick: {
show: false
}
},
series: [{
type: 'bar',
xAxisIndex: 1,
animation: false,
itemStyle: {
normal: {
show: true,
color: function(params) {
return colorList[params.dataIndex]
},
barBorderRadius: 0,
borderWidth: 0,
borderColor: '#333',
}
},
barWidth: '30%',
data: [33, 33, 33, 33, 33, 33]
},
{
type: 'bar',
itemStyle: {
normal: {
show: true,
color: function(params) {
return myColor[params.dataIndex]
},
borderWidth: 0,
borderColor: '#333',
}
},
label: {
normal: {
show: false,
}
},
barWidth: '30%',
data: [8, 15, 10, 6, 8, 15]
}
],
};