vue中拖放窗口时echarts图表自适应

1.

<div id="cityEchart" ref="chart222">

        </div>

2. data

data(){
        return {
            cityEchart: null
        }
    },

3. methods

citySortEchar(){
            this.cityEchart = this.$echarts.init(this.$refs.chart222)
            var option = {
                color: ['linear-gradient(#e66465, #9198e5)'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '16%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['浙江', '江苏', '河南', '安徽', '湖北', '云南', '江西'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#657CA8'
                            }
                        },
                        splitLine: {
                            show: false,//去除网格线
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        },
                    }
                ],
                yAxis : [
                    {
                        name: '人数',
                        nameTextStyle: {
                            color: '#fff',
                            fontSize : 14
                        },
                        splitLine: {
                            show: true,//去除网格线
                            lineStyle:{
                                color: ['rgba(101,124,168,0.55)'],  //网格线颜色
                                 1,
                                type: 'solid'
                            }
                        },
                        axisLine: {
                            show: false,//不显示坐标轴线
                        },
                        axisLabel: {show: true,interval: 0,textStyle: {color: '#fff',fontSize: 14}},
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '30%',   //柱形宽度
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#52C5FF'
                                }, {
                                    offset: 1,
                                    color: '#228FFE'
                                }]),
                            }
                        },
                        data:[5522, 4487, 3700, 3544, 2844, 1944, 1345]
                    }
                ]
            };
            this.cityEchart.setOption(option);
            window.addEventListener('resize', this.resizeHandler)
        },
        resizeHandler() {
            this.cityEchart.resize()
        },