先上代码：

<template>
  <div>
    <div id="map" class="w-100 h-100"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import China from "@/assets/json/China.json";
echarts.registerMap("china", China);
export default {
  name: "ChinaMap",
  data () {
    return {};
  },
  mounted () {
    this.initMap("map");
  },
  methods: {
    initMap (id) {
      let myChart = echarts.init(document.getElementById(id));
      const option = {
        geo: {
          map: "china",
          aspectScale: 1, // 长宽比
          zoom: 1.4,
          top: "20%",
          itemStyle: {
            areaColor: "#42aefe",
            borderColor: "transparent",
            borderWidth: 1,
          },
          tooltip: {
            show: false,
          },
        },
        series: [
          {
            map: "china", // 使用
            type: "map",
            aspectScale: 1, // 长宽比
            zoom: 1.4,
            top: "18%",
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontFamily: "SimHei",
                fontSize: 16,
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
              areaColor: "#42aefe",
            }
          },
        ],
      };
      option && myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
   
  },
};
</script>
<style lang="scss" scoped></style>

博主踩的坑：

以下三个地方的China大小写区分，China大写则是正常展示全部地图，china小写则是以右下角图例的形式。（修改完后图例可能很乱，重启项目即可）

echarts.registerMap("china", China);

geo: { map: "china",}

series: [{ map: "china"}]

实现位置：（参考版本： "echarts": "^5.4.2"）

node_modulesechartslibcoordgeofix
anhai.js

echarts对mapType：“china”做了特殊处理，找了很多China.json都没有找到南海诸岛的点位实际上在是在node_modules里面做的处理