echarts graph adaptive window when dragging and dropping vue

1.

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

        </div>

2. data

data(){
        return {
            city chart: null
        }
    },

 

3. methods

citySortEchar(){
            this.cityEchart = this.$echarts.init(this.$refs.chart222)
            var option = {
                color: ['linear-gradient(#e66465, #9198e5)'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {             // axis indicator axis valid trigger 
                        type: 'Shadow'         // Default is linear, optionally: 'Line' | 'Shadow' 
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '16%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type : 'category',
                        the Data: [ 'Zhejiang', 'Jiangsu Province', 'Henan', 'Anhui', 'Hubei', 'Yunnan', 'Jiangxi' ],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#657CA8'
                            }
                        },
                        splitLine: {
                            Show: to false , // remove gridlines 
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        name: 'Number' ,
                        nameTextStyle: {
                            color: '#fff',
                            fontSize : 14
                        },
                        splitLine: {
                            Show: to true , // remove gridlines 
                            lineStyle: {
                                Color: [ 'RGBA (101,124,168,0.55)'],   // gridline color 
                                width:. 1 ,
                                type: 'solid'
                            }
                        },
                        axisLine: {
                            Show: to false , // do not show coordinate axes 
                        },
                        axisLabel: {show: true,interval: 0,textStyle: {color: '#fff',fontSize: 14}},
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name: 'direct access' ,
                        type:'bar',
                        barWidth: '30% ',    // column width 
                        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()
        },