vue框架，多个echart图表同时resize()

<script>
    var app = new Vue({
        el: '#app',
        data: {
            charts: [],//直接定义一个数组，存放初始化后的图标
        },
        computed: {},
        watch: {},
        beforeCreate () { },
        created () { },
        mounted () {
            this.getUrlData()
            this.setChart()
            window.addEventListener('resize', function () {//监听页面变化，循环resize（），data下charts里的图表实例
                for (let item of this.app.charts) {
                    item.resize()
                }
            })
        },
        destroyed () {
            window.removeEventListener('resize', function () { //移除监听
                for (let item of this.app.charts) {
                    item.resize()
                }
            })
        },
        methods: {
            getUrlData () {
                var mySwiper = new Swiper('#app', {
                    // speed: 300,
                    // autoplay: {
                    //     delay: 2000
                    // },
                    // loop: true, // 循环模式选项
                })

                //获取后台重定向过来的url的参数
                // this.agentcode = this.getQueryVariable('agentcode')

            },
            //获取后台通过url传过来的参数，要那个参数就在getQueryVariable("这里填上参数键");
            getQueryVariable (variable) {
                var query = window.location.search.substring(1)
                var vars = query.split('&')
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split('=')
                    if (pair[0] == variable) {
                        return pair[1]
                    }
                }
                return false
            },

            setChart () {
                const chart2Option = {
                    color: [{
                        type: 'linear',
                        x: 0,
                        y: 1,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#070250' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#1FD7FA' // 100% 处的颜色
                        }],
                    }, {
                        type: 'linear',
                        x: 0,
                        y: 1,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#070250' // 0% 处的颜色 070250
                        }, {
                            offset: 1, color: '#444FDE' // 100% 处的颜色 444FDE
                        }],
                    }],
                    textStyle: {
                        color: '#fff',
                        fontWeight: 'bold',

                    },

                    legend: {
                        show: false,
                    },
                    grid: {
                        show: false,
                        left: '0',
                        top: '0',
                        right: '0',
                        bottom: '45',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        },
                        formatter: function (params) {
                            return params[0].name + ': ' + params[0].value;
                        }
                    },
                    xAxis: {
                        data: ['山东', '内蒙古', '四川', '江苏', '陕西', '河南', '安徽', '云南', '北京', '广东', '河北', '青岛', '深圳'],
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: {
                            color: '#fff',
                            interval: 0,
                            fontWeight: 'lighter',
                            // fontSize: 10,
                            formatter: function (val) {
                                return val.split('').join('\n')
                            },
                        }
                    },
                    yAxis: {
                        splitLine: { show: false },
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: { show: false }
                    },

                    series: [
                        {
                            name: '标保',
                            type: 'bar',
                            data: [158, 203, 172, 158, 203, 172, 158, 203, 172, 158, 203, 172, 333],
                            barGap: '0',
                            label: {
                                show: true,
                                position: "top",
                                fontWeight: "bold",
                                color: '#fff',
                                formatter: '{c}',
                            },
                            colorBy: 'data',
                            barWidth: '10',
                        },
                    ]
                };
                this.initChart('chart2', chart2Option)
                const chart3Option = {
                    textStyle: {
                        color: '#fff',
                        fontWeight: 'bold',
                    },

                    legend: {
                        show: false
                    },
                    grid: {
                        show: false,
                        left: '25',
                        top: '0',
                        right: '20',
                        bottom: '20',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        },
                        formatter: function (params) {
                            return params[0].name + ': ' + params[0].value;
                        }
                    },
                    xAxis: {
                        data: ['2018年', '2019年', '2020年', '2021年', '2022年',],
                        axisTick: { show: true },
                        axisLine: { show: true },
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                    yAxis: {
                        splitLine: { show: false },
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: { show: false }
                    },
                    color: ['#6911CC', '#7C34AD', '#90588D', '#A37B6F', '#BAA462'],
                    series: [
                        {
                            name: '山峰柱状图',
                            type: 'pictorialBar',
                            barCategoryGap: '-130%',
                            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                            itemStyle: {
                                opacity: 0.8,
                            },
                            data: [158, 203, 172, 159, 40],
                            colorBy: 'data',
                            label: {
                                show: true,
                                position: "top",
                                fontWeight: "bold",
                                color: '#fff',
                                formatter: '{c}亿',
                            }
                        },
                    ]
                };
                this.initChart('chart3', chart3Option)
            },
            initChart (id, option) {
                let chartDom = document.getElementById(id);
                let initChartDom = echarts.init(chartDom)
                option && initChartDom.setOption(option)
                this.charts.push(initChartDom)//把初始化后的图表存进data的charts里
            },
            getAgentInfoByCode () {
                const url = 'http://gddatainfo.hualife.cc/gdAdmin/operVisit/getAgentInfoByCode'
                const params = {
                    agentcode: this.agentcode,
                }
                const self = this
                const success = function (response) {
                    console.log(response)
                    if (response.status == 200) {
                        const agentDesc = response.data.data.agentDesc //用热情服务每一位客户,用真诚守护每一位客户  
                    } else {

                        console.log('出错了，状态码：' + response.status)
                    }
                }
                this.Http(url, params, success)
            },
            //axios请求数据封装
            Http (url, param, success) {
                vant.Toast.loading({
                    duration: 0, // 持续展示 toast
                    overlay: true,
                    forbidClick: true,
                    message: '正在加载...',
                    loadingType: 'spinner',
                })
                const paramdata = Qs.stringify(param)
                axios({
                    url: url,
                    method: 'post',
                    data: paramdata,
                })
                    .then(function (response) {
                        if (response.data.status == 200) {
                            success(response)
                            console.log('请求成功')
                        } else {
                            vant.Toast.fail('服务器出错')
                            console.log('服务器出错')
                        }
                    })
                    .catch(function (error) {
                        vant.Toast.fail('请检查网络')
                        console.log(error)
                    })
            },
        },
    })
</script>