公寓宿舍echarts 柱状配置项内容和展示

      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]
}