var pic = 'data:image/png;base64,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'
var room = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAPFBMVEUAAABKlfNMl/NKl/NKlvNKlvNKlfNAj/9LlfJLlvRJlvJJlvNIl/dKlvJKlfNKlfRKlvJKlvRKlPJLlvNNahX2AAAAE3RSTlMAgEB/wNCQEPBwUD8g4LAwoF9PlDlXUQAAAJFJREFUOMvt0csKAjEMheHTsXd7mTHv/65aXdQWQoMiuvBfhg8CCb5ePTFd3OA2YtMDVH0+ZogYSMY+b9tY+MD7kVg4l6MQkpdC+sN3oZdBBTgrgAqtsoYVd7GGSQoDWvsa+gggiM6Ttf/9F34Knm+FCR7EVjBkOacTpmookwHfpvQSdmxNh4tcbDijJcAJr3UFPi4x3UUk2hAAAAAASUVORK5CYII='
var data = [{
name: '干部宿舍楼',
total: 120,
use: 60,
empty: 60,
}, {
name: '公寓住房',
total: 110,
use: 40,
empty: 70,
}]
// 计算总数
var total = 0;
var seriesOption = []
data.map((item, index) => {
total+=item.total
seriesOption.push({
name: '柱背景',
type: 'bar',
xAxisIndex: index,
yAxisIndex: index,
data: [{
}, {
name: item.name,
value: item.total,
rate: (item.use / item.total).toFixed(2) * 100 + '%',
}],
barWidth: 16,
itemStyle: {
normal: {
barBorderRadius: 8,
color: '#DFEEFF'
}
},
label: {
show: true,
position: 'insideRight',
formatter: params => {
return `{pb|使用率：${params.data.rate}}`
},
rich: {
pb: {
color: '#4B96F3',
padding: [0, 0, -30, 0]
}
}
}
})
seriesOption.push({
value: item.use,
max: item.total,
name: item.name,
zlevel: 2,
type: 'bar',
yAxisIndex: index,
xAxisIndex: index,
data: [{
}, {
value: item.use,
use:item.use,
empty:item.empty,
total:item.total
}],
label:{
show:true,
color:'transparent',
position:'insideLeft',
formatter:params=>{
console.log(params)
return `{pb|}\n{imgIcon|} {normalText|房间：${params.data.total}间}
\n\n{circleYellow|●} {normalText|使用：${params.data.use}间}
\n\n{circleGreen|●} {normalText|空闲：${params.data.empty}间}`
},
rich:{
circleYellow:{
color:'#FFA83E',
width:16,
height:16,
fontSize:20,
lineHeight:20,
padding:[0,0,0,4]
},
pb:{
padding:[0,0,200,0]
},
circleGreen:{
color:'#36C78B',
fontSize:20,
width:16,
height:16,
lineHeight:20,
padding:[0,0,0,4]
},
imgIcon:{
backgroundColor:{
image:room,
},
width:20,
height:20,
},
normalText:{
fontSize:15,
height:20,
textVeticalAlign:'middle',
color:'#666666'
}
}
},
rate: item.total === 0 ? 0 : (item.use / item.total).toFixed() * 100 + '%',
barGap: '-100%',
barWidth: 16,
itemStyle: {
normal: {
barBorderRadius: 8,
color: '#4B96F3'
}
}
})
})
option = {
graphic: {
elements: [{
type: 'image',
left: 'center',
top: 25,
style: {
image: pic,
width: 136,
height: 136,
textAlign: 'center'
}
}, {
type: 'text',
left: 'center',
top: 180,
style: {
text: '房间总数',
fill: '#333333',
fontSize:16,
}
}, {
type: 'rect',
left: 'center',
top: 200,
textVeticalAlign:'middle',
shape:{
width:80,
height:36,
},
style: {
color:'#FFFFFF',
fontSize:20,
fontWeight:'bold',
text:total,
fill: '#4B96F3',
}
}]
},
grid: [{
left: '5%',
top: '5%',
width: '30%',
bottom: '5%',
containLabel: true,
}, {
left: '35%',
top: '5%',
width: '30%',
bottom: '5%',
containLabel: true,
}, {
left: '65%',
top: '5%',
width: '30%',
bottom: '5%',
containLabel: true,
}],
yAxis: [{
type: 'category',
data: ['', '干部宿舍楼'],
gridIndex: 0,
axisLabel: {
inside: true,
padding: [0, 0, 48, 0],
color: '#333333',
fontWeight: 'bold'
},
axisTick: {
show: false,
},
axisLine: {
show: false,
}
}, {
type: 'category',
data: ['', '公寓住房'],
gridIndex: 2,
axisLabel: {
inside: true,
padding: [0, 0, 48, 0],
color: '#333333',
fontWeight: 'bold'
},
axisTick: {
show: false,
},
axisLine: {
show: false,
}
}],
xAxis: [{
type: 'value',
gridIndex: 0,
max: data[0].total,
show: false,
}, {
type: 'value',
gridIndex: 2,
max: data[1].total,
show: false,
}],
series: [...seriesOption]
}