echart map does not display the problem

Problem: The map in echarts is not displayed. On the one hand, because there is a map in echarts version 4.9, this function is lost in version 5.0 and above. If you want other versions, just change the version number after @, and run:

// 安装4.9版本的echarts
npm install [email protected] --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>

Final effect:
insert image description here
share an echarts library here, the address is https://www.isqqw.com/#/homepage

Guess you like

Origin blog.csdn.net/weixin_55966654/article/details/125372419