Echarts中地图不显示问题总结

        在引入Echarts后，发现绘制中国地图时map无法显示；这是由于echarts 4.9.0以后的版本移除了map地图，而项目中安装的echarts版本为5.4.0。官方文档描述如下[1]：

v5 移除了内置的 geoJSON（原先在 echarts/map 文件夹下）。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们，可以去从老版本中得到，或者自己寻找更合适的数据然后通过

        既然知道是由于高版本移除map导致地图不显示，解决echarts5地图不显示的问题，可尝试以下方案：

方案1、降低echarts版本

        简单粗暴，删除原有5.4.0版本，下载4.9.0版本的echarts

npm uninstall echarts
npm install [email protected] --save

        除使用地图需要增加： import 'echarts/map/js/china.js'。其余使用步骤如常：

import * as echarts from 'echarts';
import 'echarts/map/js/china.js'

drawMap() {
  let that = this
  // 初始化echarts实例
  const mapChart = echarts.init(document.getElementById("mapChart"));
  //窗口尺寸改变
  window.addEventListener("resize",function(){
    mapChart.resize();
  })
  var option = {
    tooltip: {
      formatter: function(params, ticket, callback) {
        return params.name + "：" + params.value;
      } // 数据格式化
    },
    visualMap: {
      min: 0,
      // max: this.maxData,
      max: this.provinceMaxValue,
      left: "right",
      top: "bottom",
      text: ["高", "低"], // 取值范围的文字
      textStyle: {
        color: "#f5f9f5"
      },
      inRange: {
        color: ["#f5f9f5", "#006edd"] // 取值范围的颜色
      },
      show: true // 图注
    },

    // label: {
    //   show: true,
    //   position: 'inner',
    //   formatter: '{a}%'
    // },
    geo: {
      map: "china",
      roam: false, // 不开启缩放和平移
      zoom: 1.23, // 视角缩放比例
      label: {
        normal: {
          show: true,
          fontSize: "12",
          color: "#00000099"
        },
        emphasis: {
          textStyle: {
            color: "#00000099"
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(0, 0, 0, 0.2)"
        },
        emphasis: {
          areaColor: "#F3B329", // 鼠标选择区域颜色
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    },
    series: [
      {
        name: "数量",
        type: "map",
        geoIndex: 0,
        // data: this.dataList
        data: this.regionCountList
      }
    ]
  };
  mapChart.setOption(option);
  mapChart.on("click", function(params) {
    if (that.categoryValue === '' || that.A0Code === '') {
      that.$message({
        showClose: true,
        message: '品类和A0不可为空！',
        type: 'warning'
      });
      return
    }

    const loading = that.$loading({
        lock: true,
        text: '数据获取中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    const paramData={
      category: that.categoryValue,
      deviceModel: parseInt(that.A0Code),
      // brandCodeSet: this.brandCodeSet,
      province: that.formatterProvince(params.name),
      // subCategory:
    }
    statDeviceSoftVersion(paramData).then((response) => {
      loading.close();
      if(response && response.errorCode === '0') {
        let pieData = []
        response.result.versionItemList.forEach(item => {
          pieData.push({
            name: '版本：' +  item.softwareVersion + ' 比例：' + item.ratio +'%',
            value: item.ratio
          })
        })
        that.drawPieChart(that.formatterProvince(params.name), pieData)
      }
    }).catch((error) => {
      that.$message.error('获取版本数据出错：' +error);
      loading.close();
      reject(error.toString())
    });
    // alert(params.name);
  });
},

方案2、增加map文件

        既然echarts V5版删除了map文件，那么通过在node_modules/echarts中添加回map文件夹，如下图。至于map文件可以通过网盘获取，也可以安装4.9.0版本后拷贝出来，此处，若安装低版本后地图直接可用没任何问题，就不用增加map文件。

方案3、多版本echarts解决地图问题

        通过安装多个版本echarts，并在不同场景使用不同的版本。首先，安装不同版本依赖

npm install [email protected]
npm install echarts4@npm:echarts@^4.9.0

        在main.js或者不同页面内注册时加以区分[2]

import * as echarts from 'echarts'

// 需要引入地图的页面
import * as echarts4 from 'echarts4'
// 加载echarts4版本总的china.js
import 'echarts4/map/js/china.js'
echarts4.registerMap('china', chinaMap)

[1] v4 升级 v5 指南 - 版本特性 - 入门篇 - 使用手册 - Apache ECharts

[2] echarts5 没有map（实现中国地图+按需引入）_echarts5地图-CSDN博客