百分比立体柱状图echarts pictorialBar配置项内容和展示

百分比圆柱图,显示各值在总值中的占比

配置项如下
      option = {
    backgroundColor: '#0e202d',
    tooltip: {
        formatter: '{a0}<br />{b0}: {c0}%',
    },
    xAxis: {
        data: ["本年", "上年"],
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false,
        }
    },
    yAxis: {
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    series: [{
        name: 'top1',
        type: 'pictorialBar',
        symbolSize: [150, 65],
        symbolOffset: [0, -30],
        z: 10,
        silent: true,
        itemStyle: {
            normal: {
                color: 'rgb(18, 101, 138, .8)'
            }
        },
        data: [{
            value: 100,
            symbolPosition: 'end'
        }, {
            value: 100,
            symbolPosition: 'end'
        }]
    }, {
        name: 'top2',
        type: 'pictorialBar',
        symbolSize: [100, 45],
        symbolOffset: [0, -20],
        z: 10,
        silent: true,
        itemStyle: {
            normal: {
                color: '#3ca2ce'
            }
        },
        data: [{
            value: 100,
            symbolPosition: 'end'
        }, {
            value: 100,
            symbolPosition: 'end'
        }]
    }, {
        name: 'middle',
        type: 'pictorialBar',
        symbolSize: [100, 45],
        symbolOffset: [0, -20],
        z: 10,
        silent: true,
        itemStyle: {
            normal: {
                color: '#1594cc',
            }
        },
        data: [{
            value: 40,
            symbolPosition: 'end'
        }, {
            value: 80,
            symbolPosition: 'end'
        }]
    }, {
        name: 'bottom1',
        type: 'pictorialBar',
        symbolSize: [100, 45],
        symbolOffset: [0, 20],
        z: 12,
        silent: true,
        itemStyle: {
            normal: {
                color: '#ae77df',
            }
        },
        data: [100, 100]
    }, {
        name: 'bottom2',
        type: 'pictorialBar',
        symbolSize: [150, 65],
        symbolOffset: [0, 30],
        z: 1,
        silent: true,
        itemStyle: {
            normal: {
                color: 'rgb(18, 101, 138, .8)',
            }
        },
        data: [100, 100]
    }, {
        type: 'bar',
        name: '容量费收入',
        stack: true,
        itemStyle: {
            normal: {
                color: '#ae77df',
            }
        },
        barWidth: 100,
        data: [40, 80]
    }, {
        type: 'bar',
        name: '供电收入',
        stack: true,
        itemStyle: {
            normal: {
                color: '#1594cc',
            }
        },
        barWidth: 100,
        data: [60, 20]
    }]
};
    
截图如下