element ui+echarts实现走马灯

这个是效果图，再不改变宽口大小的时候echats的图标是图一，改变窗口大小之后才会自适应。

未改变窗口大小：

改变窗口大小之后，图像就会自适应。

HTML代码

<div id="stairOne" class="stairOne" style="width:35%;">
                <!-- 雷达轮播图 -->
                <el-carousel height="409px" :autoplay="false">
                    <el-carousel-item>
                        <div class="panel" style="height: 409px;margin-bottom: 0px;">
                            <div id="Map-cal-proportionChart" style="width:100%"></div>
                            <div class="panel-footer"></div>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item>
                        <div class="panel" style="height: 409px;margin-bottom: 0px;">
                            <div id="Map-cal-proportionChart2" style="width:100%"></div>
                            <div class="panel-footer"></div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <!--<div class="panel">
                    <div id="Map-cal-proportionChart"></div>
                    <div class="panel-footer"></div>
                </div>-->
            </div>

js代码

//雷达图的轮播图初始化
        var Carousel = new Vue({
            el: "#stairOne",
            data: {},
            mounted: function () {
                initMap();
                //var a = $("#stairOne").width() - 10;
                //$("#Map-cal-proportionChart").width(a);
                //$("#Map-cal-proportionChart2").width(a);
            }
        });

initMap 初始化方法

function initMap() {
    proportionChartInstantiation = echarts.init(document.getElementById('Map-cal-proportionChart'));
    proportionChartInstantiation2 = echarts.init(document.getElementById('Map-cal-proportionChart2'));
    //图5服务台单量分布
    proportionChart = {
        color: colors,
        toolbox: {
            show: true,
            feature: {
                myTool2: {
                    show: true,
                    title: '刷新',
                    icon: 'image://../../images/刷新.png',
                    onclick: function () {
                        MapPersonList4("false");
                    }
                }
            }
        },
        title: {
            subtext: '票易通完结率：0\n\n服务台完结率：0\n\n总完结率：0',
            //top: 5,
            left: "3%",
            textStyle: {
                //文字颜色
                color: textcolor
            }
        },
        tooltip: {
            trigger: 'item'
        },
        radar: {
            center: ['50%', '55%'],//位置
            indicator: [
                { text: '重开量', max: 100 },
                { text: '关单量', max: 100 },
                { text: '转单量', max: 100 },
                { text: '响应量', max: 100 },
                { text: '触碰量', max: 100 }
            ]
        },
        series: {
            name: '工单汇总',
            type: 'radar',
            //symbol: 'none',
            areaStyle: {},
            label: {
                show: true,
                position: 'bottom',
                color: 'navajowhite'
            },
            //设置仪表盘位置
            lineStyle: {
                width: 1
            },
            emphasis: {
                areaStyle: {
                    color: 'rgba(0,250,0,0.3)'
                }
            },
            data: [{
                value: [22, 100, 44, 100, 40]
            }]
        }
    };

    proportionChart2 = {
        color: colors,
        toolbox: {
            show: true,
            feature: {
                myTool2: {
                    show: true,
                    title: '刷新',
                    icon: 'image://../../images/刷新.png',
                    onclick: function () {
                        MapPersonList4("false");
                    }
                }
            }
        },
        title: {
            subtext: '票易通完结率：0\n\n服务台完结率：0\n\n总完结率：0',
            //top: 5,
            left: "3%",
            textStyle: {
                //文字颜色
                color: textcolor
            }
        },
        tooltip: {
            trigger: 'item'
        },
        radar: {
            center: ['50%', '55%'],//位置
            indicator: [
                { text: '服务台', max: 100 },
                { text: '关单量', max: 100 },
                { text: '转单量', max: 100 },
                { text: '响应量', max: 100 },
                { text: '触碰量', max: 100 }
            ]
        },
        series: {
            name: '工单汇总',
            type: 'radar',
            //symbol: 'none',
            areaStyle: {},
            label: {
                show: true,
                position: 'bottom',
                color: 'navajowhite'
            },
            //设置仪表盘位置
            lineStyle: {
                width: 1
            },
            emphasis: {
                areaStyle: {
                    color: 'rgba(0,250,0,0.3)'
                }
            },
            data: [{
                value: [22, 33, 44, 100, 40]
            }]
        }
    };
    proportionChartInstantiation.setOption(proportionChart)
    proportionChartInstantiation2.setOption(proportionChart2)
    // 当浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让图表调用 resize这个方法
        proportionChartInstantiation.resize();
        proportionChartInstantiation2.resize();
    });
};

有那个大神能帮忙解答一下，已经设置了echarts容器的宽度为100%，实际再打断点测试的时候在new Vue 中运行的时候是100px，但是页面加载完成后F12看容器是没有问题的是100%宽度。是在不知道哪里出问题了，可能是element 的走马灯初始化在echarts图初始化之前运行。但是不太清楚怎么调整了。请大神指导

已解决，记录一下。自己太笨了。

//雷达图的轮播图初始化
        var Carousel = new Vue({
            el: "#stairOne",
            data: {},
            mounted: function () {
                initMap();
                //获取容器对象
                var myChart = echarts.init(document.getElementById('Map-cal-proportionChart'));
                var myChart2 = echarts.init(document.getElementById('Map-cal-proportionChart2'));
                this.$nextTick(() => {
                //调用echarts的resize 
                    myChart.resize();
                    myChart2.resize();
                })
                //var a = $("#stairOne").width() - 10;
                //$("#Map-cal-proportionChart").width(a);
                //$("#Map-cal-proportionChart2").width(a);
            }
        });