能量等级指示图echarts 柱状配置项内容和展示

      option = {
    title:[{
        text: 'Energy efficiency rating',
        x: '31%',
        textAlign: 'center'
    }, {
        text: 'Cunrent %',
        x: '71%',
        textAlign: 'center'
    }, {
        text: 'Potential %',
        x: '88%',
        textAlign: 'center'
    }],
    grid: [
        {x: '3%', y: '5%', width: '60%', height: '94%', containLabel: true},
        {x: '63%', y: '5%', width: '17%', height: '94%', containLabel: true},
        {x: '80%', y: '5%', width: '17%', height: '94%', containLabel: true},
    ],
    xAxis: [{
        gridIndex: 0,
        type: 'value',
        min: 0,
        max: 110,
        boundaryGap: [0, 0.01],
        splitLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        axisLine: { show: false }
    }, {
        gridIndex: 1,
        type: 'value',
        min: 0,
        max: 10,
        boundaryGap: [0, 0.01],
        splitLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        axisLine: { show: false }
    }, {
        gridIndex: 2,
        type: 'value',
        min: 0,
        max: 10,
        boundaryGap: [0, 0.01],
        splitLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        axisLine: { show: false }
    }],
    yAxis: [{
        gridIndex: 0,
        type: 'category',
        data: ['A','B','C','D'],
        inverse: true,
        axisLabel: { show: false },
        axisTick: { show: false },
        axisLine: { show: false }
    }, {
        gridIndex: 1,
        data: ['A','B','C','D'],
        type: 'category',
        axisLabel: { show: false },
        axisTick: { show: false },
        // axisLine: { show: false }
    },
    {
        gridIndex: 2,
        data: ['A','B','C','D'],
        type: 'category',
        axisLabel: { show: false },
        axisTick: { show: false },
        // axisLine: { show: false }
    }],
    series: [
        {
            xAxisIndex: 0,
            yAxisIndex: 0,
            type: 'bar',
            stack: 'level',
            label: { 
                show: true,
                position: 'insideLeft'
            },
            data: [
                { value: 70, label: { formatter: '1%-25%', fontSize: '20', padding: [0, 0, 0, 8] }, itemStyle: { color: '#337849' } },
                { value: 80, label: { formatter: '26%-50%', fontSize: '20', padding: [0, 0, 0, 8] }, itemStyle: { color: '#86bd45' } },
                { value: 90, label: { formatter: '51%-75%', fontSize: '20', padding: [0, 0, 0, 8] }, itemStyle: { color: '#fba92b' } },
                { value: 100, label: { formatter: '76%-100%', fontSize: '20', padding: [0, 0, 0, 8] }, itemStyle: { color: '#d2232a' } }
            ]
            
        },
        {
            name: '59 %',
            xAxisIndex: 1,
            yAxisIndex: 1,
            type: 'bar',
            data: [0, {
                value: 9,
                label: { show: true, formatter: '{a}', fontSize: '30', padding: [0, 0, 0, 8] }, 
                itemStyle: { color: '#fba92b' }
            }, 0, 0]
        },
        {
            name: '40 %',
            xAxisIndex: 2,
            yAxisIndex: 2,
            type: 'bar',
            data: [0, 0, {
                value: 9,
                label: { show: true, formatter: '{a}', fontSize: '30', padding: [0, 0, 0, 8] }, 
                itemStyle: { color: '#86bd45' }
            }, 0]
        },
        {
            type: 'bar',
            stack: 'level',
            label: { 
                show: true,
                position: 'insideLeft'
            },
            data: [
                { value: 0, label: { formatter: 'A', fontSize: '30', color: '#337849' } },
                { value: 0, label: { formatter: 'B', fontSize: '30', color: '#86bd45' } },
                { value: 0, label: { formatter: 'C', fontSize: '30', color: '#fba92b' } },
                { value: 0, label: { formatter: 'D', fontSize: '30', color: '#d2232a' } }
            ]
        }
    ]
};