echart地图不显示问题

问题：使用echarts中的地图不显示，一方面因为echarts4.9版本下有地图，5.0版本以上失去这个功能，想要别的版本把@后的版本号改掉就行，运行：

// 安装4.9版本的echarts
npm install echarts@4.9.0 --save
// 卸载echarts运行：
npm uninstall echarts

<template>
  // 2.准备一个具备大小的DOM容器
  <div id="project_map" style="width:70%;height:100%;"></div>
</template>

<script>

// 1.导入echart
import * as echarts from 'echarts';
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)

import { projectInformationCount } from '@/api/project_information/project_overview'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui';

export default {
  data () {
    return {
      area0_count: [],
    }
  },
  mounted () {
    this.getCount()
    this.project_map_chart();
  },
  methods: {
    // 获取数据
    getCount () {
      projectInformationCount({
        token: getToken(),
      }).then(res => {
        this.area0_count = res.area0_count
 
        this.project_map_chart();
      }).catch(error => {
        Message.error(error)
      })
    },
   
    // 制作地图
    mapChart (id) {
      //3. 初始化echarts实例对象
      var myChart = echarts.init(document.getElementById(id))
      //4. 指定配置项和数据
      var option = {
        geo: {
          map: 'china',//这里的名称需要和china.js: echarts.registerMap('china',{})中的名称一致
          label: { show: true }, //显示省份
          roam: true, //缩放
        },
        series: [], //地图上二开点线特效数组，按需添加
      }
      //5. 将配置项和数据设置给实例对象（mychart）
      myChart.setOption(option)

      // 6. 当我们浏览器缩放的时候，图表也等比例缩放
      window.addEventListener('resize', function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize()
      })
    },

    // 地图
    project_map_chart (e) {
      this.mapChart('project_map');
    },
  }
}
</script>

最后效果：

在这里分享一个echarts的库，地址是https://www.isqqw.com/#/homepage