关于echarts 加载矢量数据不显示的问题的一种情况

<script>
import axios from 'axios'
// import china from '../../public/static/map/china.json'
export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      mapData: {} // 所获取的省份的地图矢量数据
    }
  },
  mounted () {
    this.intChart()
    // this.$nextTick(() => {
    //   this.intChart()
    // })
  },
  methods: {
    async intChart () {
      this.chartInstance = this.$echarts.init(this.$refs.map_ref)
      // 获取中国地图的矢量数据
      // http://localhost:8999/static/map/china.json
      // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
      const ret = await axios.get('http://localhost:8999/static/map/china.json')
      // console.log(china)
      this.$echarts.registerMap('china', ret.data)
      console.log(ret.data)

      console.log(this.$echarts)
      console.log(this.$echarts.getMap())

      const initOption = {
        geo: {
          type: 'map',
          map: 'china'
        }
      }
      // this.chartInstance.setOption(initOption)
      this.chartInstance.setOption(initOption)
    }
  }
}

以上为js代码  检查了好久都没有找出原因

最后打开网页检查  以下为html

<template>
  <div class='com-container' >
    <div class='com-chart' ref='map_ref'></div>
  </div>
</template>

后来发现 没给宽高  后来试试了

<template>
  <div class='com-container' >
    <div class='com-chart' ref='map_ref' style="width:100%;height:100%"></div>
  </div>
</template>

啊  数据出现了 原来是因为没给宽高 没出现