堆叠柱状图如何在X轴叠加单位使用echarts category配置项内容和展示

如图。属性,包含多个进度,通过堆叠图展示,如何让进度1和进度2展示在对应的属性上方和堆叠柱状图下方

配置项如下
                  var option = {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                        type: 'shadow',        // 默认为直线,可选为:'line' | 'shadow'
                    },
                    formatter: (param) => {
                        // console.dir(param);
                        return param.seriesName + "年:" + param.data
                    }
                },
                legend: {
                    // selectedMode:false,//取消图例上的点击事件
                    data: ['2017', '2018']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        interval: 10,
                        data: ['属性1.1', '属性1.2', '属性1.3', '属性1.4'],
                        axisTick: {
                            show: true
                        },
                        offset: 30,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: '2017',
                        type: 'bar',
                        stack: '进度1',
                        data: [121, 32, 142, 52],
                        color: '#F7A35C',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            // rotate:-90
                            position: 'bottom',
                            color: '#000'
                            // padding: [13, 14, 15,16]
                        },
                    },
                    {
                        name: '2018',
                        type: 'bar',
                        stack: '进度1',
                        data: [24.5, 11.1, 25.1, 13.21],
                        color: '#90ED7D',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2017',
                        type: 'bar',
                        stack: '进度2',
                        data: [24.5, 11.1, 25.1, 13.2],
                        color: '#F7A35C',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2018',
                        type: 'bar',
                        stack: '进度2',
                        data: [121, 32, 142, 52],
                        color: '#90ED7D',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2017',
                        type: 'bar',
                        stack: '进度3',
                        data: [24.5, 11.1, 25.1, 13.21],
                        color: '#F7A35C',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2018',
                        type: 'bar',
                        stack: '进度3',
                        data: [24.5, 11.1, 25.1, 13.21],
                        color: '#90ED7D',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2017',
                        type: 'bar',
                        stack: '进度4',
                        data: [121, 32, 142, 52],
                        color: '#F7A35C',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2018',
                        type: 'bar',
                        stack: '进度4',
                        data: [24.5, 11.1, 25.1, 13.21],
                        color: '#90ED7D',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2017',
                        type: 'bar',
                        stack: '进度5',
                        data: [24.5, 11.1, 25.1, 13.21],
                        color: '#F7A35C',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2018',
                        type: 'bar',
                        stack: '进度5',
                        data: [24.5, 11.1, 25.1, 13.21],
                        color: '#90ED7D',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2017',
                        type: 'bar',
                        stack: '进度6',
                        data: [24.5, 11.1, 25.1, 13.21],
                        color: '#F7A35C',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },
                    {
                        name: '2018',
                        type: 'bar',
                        stack: '进度6',
                        data: [24.5, 11.1, 25.1, 13.21],
                        color: '#90ED7D',
                        label: {
                            show: true,
                            formatter: (param) => {
                                return param.stack;
                            },
                            position: 'bottom',
                            color: '#000'
                        },
                    },

                ]
            };
            console.log(option.legend);
            var showLabelLengend = option.legend.data[0];
            if (option.legend.data.length > 1) {
                var series = option.series;
                for (var i = 0; i < series.length; i++) {
                    if (series[i].name == showLabelLengend) {
                        series[i].label.show = true;
                    } else {
                        series[i].label.show = false;
                    }
                }
            }


            myChart.on('legendselectchanged', function (params) {
                var option = this.getOption();
                // console.dir(option.series);
                // console.dir(params);
                var selected = Object.getOwnPropertyNames(params.selected);
                var showLabelLengend = null;
                for (var i = 0; i < selected.length; i++) {
                    debugger;
                    if (params.selected[selected[i]] == true) {
                        showLabelLengend = selected[i];
                        break;
                    }
                }
                var series = option.series;
                for (var i = 0; i < series.length; i++) {
                    if (series[i].name == showLabelLengend) {
                        series[i].label.show = true;
                    } else {
                        series[i].label.show = false;
                    }
                }
                console.dir(option.series);
                myChart.setOption(option);
            });


            // console.log(option.legend.length);
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
    
截图如下