ECharts 根据屏幕变化更改大小地图

<!--这是地图-->
<template>
  <div>
    <div ref="contractRateChart02" class="mar-0-auto pull-left" :style="{width:'95%',height: charHeightTop+'px'}"></div>
    <Modal v-model="showNoModal" title="提示">
      <p style="color:#F54C44;fontSize:14px;">暂未统计到此地区家庭医生签约服务数据</p>
      <div slot="footer">
        <Button type="primary" @click="okClick">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {getJson} from '@/api/api'
  import { mapState , mapGetters , mapActions} from 'vuex'

  // 引入echar
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入饼图。
  require('echarts/lib/chart/pie')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入折线图。
  require('echarts/lib/chart/line')
  // 引入地图。
  require('echarts/lib/chart/map')

  require('echarts/map/js/china.js') // 引入中国地图数据

  // import hebei from '../../../../assets/json/hebei/hebei.json'

  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/toolbox')
  require('echarts/lib/component/legend')

  import {homeProvinceGetHeatMapData} from '@/api/api'

  let contractRateChartInit02;
  export default {
    name: 'char-top-row-map',
    data(){
      return {
        showNoModal:false,
        areaPinyin:'hebei',
        pinyin:'',
        cityData:[],
        screenWidth: document.body.clientWidth,   // 这里是给到了一个默认值 （这个很重要）
      }
    },
    props: [
      'charHeightTop',
      'bindData'
    ],
    com