如图,Y轴名称太长会显示不全,containLabel: true已配置echarts 柱状配置项内容和展示

左侧截图是我项目中的截图。 代码为我项目中的代码,echarts各个配置项完全一致,数据是随机写的。但是在我的项目里,若y轴名称过长会导致显示不全,在这里没事,不知道为什么。跟div有关??containLabel: true 写着呢,bar不根据我y轴的文字多少去按比例改变长度自适应。求助!

配置项如下
      option = {
    toolbox: {
        right: '2%',
        feature: {
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: '#323232',
                opacity: 0.1
            },
        }
    },
    legend: {
        itemGap: 20,
        itemWidth: 30,
        itemHeight: 10,
        data: ['type_1', 'type_2', 'type_3', 'type_4', 'type_5', 'type_6', 'type_7']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: ['#e4e4e4'],
                type: 'dashed',
                width: 1
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            margin: 15,
            textStyle: {
                align: 'right',
                color: '#323232',
                fontSize: 12
            }
        },
        data: ["名称1","名称2","名称3名称3名称3","名称4","名称5","名称6", "名称7名称7名称7名称7名称7名称7名称7名称7名称7名称7名称7", "名称8", "名称9", "名称10", "名称11", "名称12"]
    },
    series: [{
        name: 'type_1',
        type: 'bar',
        stack: '总量',
        label: {
            normal: {
                show: true,
                position: 'insideRight',
                formatter: function(d) {
                    return d.value > 0 ? d.value : "";
                }
            }
        },
        barWidth: 30,
        itemStyle: {
            normal: {
                color: '#ffae01',
                barBorderRadius: [2, 2, 2, 2],
                borderColor: '#fff',
            }
        },
        data: [0,0,0,0,0,10,20,30,40,50,60,70]
    }, {
        name: 'type_2',
        type: 'bar',
        stack: '总量',
        label: {
            normal: {
                show: true,
                position: 'insideRight',
                formatter: function(d) {
                    return d.value > 0 ? d.value : "";
                }
            }
        },
        barWidth: 30,
        itemStyle: {
            normal: {
                color: '#ff6600',
                barBorderRadius: [2, 2, 2, 2],
                borderColor: '#fff',
            }
        },
        data: [0,0,0,0,0,10,20,30,40,50,60,70]
    }, {
        name: 'type_3',
        type: 'bar',
        stack: '总量',
        label: {
            normal: {
                show: true,
                position: 'insideRight',
                formatter: function(d) {
                    return d.value > 0 ? d.value : "";
                }
            }
        },
        barWidth: 30,
        itemStyle: {
            normal: {
                color: '#00d789',
                barBorderRadius: [2, 2, 2, 2],
                borderColor: '#fff',
            }
        },
        data: [0,0,0,0,0,10,20,30,40,50,60,70]
    }, {
        name: 'type_4',
        type: 'bar',
        stack: '总量',
        label: {
            normal: {
                show: true,
                position: 'insideRight',
                formatter: function(d) {
                    return d.value > 0 ? d.value : "";
                }
            }
        },
        barWidth: 30,
        itemStyle: {
            normal: {
                color: '#00a8ff',
                barBorderRadius: [2, 2, 2, 2],
                borderColor: '#fff',
            }
        },
        data: [0,0,0,0,0,10,20,30,40,50,60,70]
    }, {
        name: 'tyoe_5',
        type: 'bar',
        stack: '总量',
        label: {
            normal: {
                show: true,
                position: 'insideRight',
                formatter: function(d) {
                    return d.value > 0 ? d.value : "";
                }
            }
        },
        barWidth: 30,
        itemStyle: {
            normal: {
                color: '#ab74e9',
                barBorderRadius: [2, 2, 2, 2],
                borderColor: '#fff',
            }
        },
        data: [0,0,0,0,0,10,20,30,40,50,60,70]
    }, {
        name: 'type_6',
        type: 'bar',
        stack: '总量',
        label: {
            normal: {
                show: true,
                position: 'insideRight',
                formatter: function(d) {
                    return d.value > 0 ? d.value : "";
                }
            }
        },
        barWidth: 30,
        itemStyle: {
            normal: {
                color: '#08c8e5',
                barBorderRadius: [2, 2, 2, 2],
                borderColor: '#fff',
            }
        },
        data: [0,0,0,0,0,10,20,30,40,50,60,70]
    }, {
        name: 'type_7',
        type: 'bar',
        stack: '总量',
        label: {
            normal: {
                show: true,
                position: 'insideRight',
                formatter: function(d) {
                    return d.value > 0 ? d.value : "";
                }
            }
        },
        itemStyle: {
            normal: {
                barBorderRadius: [2, 2, 2, 2],
                color: '#fc6769',
                borderColor: '#fff',
            }
        },
        barWidth: 30,
        data: [0,0,0,0,0,10,20,30,40,50,60,70]
    }]
};
    
截图如下