vue3+echarts绘制中国地图

最近接到一个需求是做一个中国地图 样式大概是这样的

需求是要去掉南海，但是由于csdn地图校验，图片如果没有南海会出现图片违规情况，要实现去掉南海，百度查阅相关资料都是说要这样，这个方法的大概意思就是：在地图中对特定的区域配置样式。穿梭车

regions: [
          {
   
            name: "南海诸岛",
            value: 0,
            itemStyle: {
   
              normal: {
   
                opacity: 0,
                label: {
   
                  show: false,
                },
              },
            },
          },
        ],

经实现还是不行，因为可能是因为我用的china.json的问题，只有一部分小的那个南海群岛去掉了，但是地图鸡脚那个地方的依旧显示。百度后需要替换json数据，穿梭车里边包含2个json，一个是去掉了南海诸岛，一个是保留的，加上上边的代码可以完整实现。

代码

首先我们需要引入echarts，现在echarts应该已经到5了，我们开发的时候建议看v5的版本

npm install echarts --save 或者
cnpm install echarts --save

引入成功后

import * as echarts from 'echarts'
import china from '../public/china.json';
echarts.registerMap('china', china);
app.config.globalProperties.$echarts = echarts

//注意如果不显示的话，需要给myMap增加固定的高和宽
<div id="myMap" ref="myMap" class="border"></div>

<script>
import {
   
  defineComponent,
  ref,
  getCurrentInstance,
  onMounted,
} from "vue";
export default defineComponent({
   
setup(){
   
let {
    proxy } = getCurrentInstance();
const chart = ref(null);
const mapOption = ref({
   
      backgroundColor: "#FFFFFF",
      geo: {
   
        map: "china",
        roam: false,
        zoom: 1.2,
        scaleLimit: {
    min: 0, max: 3 }, // 缩放级别
        regions: [
          {
   
            name: "南海诸岛",
            value: 0,
            itemStyle: {
   
              normal: {
   
                opacity: 0,
                label: {
   
                  show: false,
                },
              },
            },
          },
        ],
        itemStyle: {
   
          areaColor: "#BEDAEE", //默认的地图板块颜色
          borderWidth: 1,
          borderColor: "#009ce0",
        },
      },
      title: {
   
        text: "资源池分步",
        x: "center",
        y: 20,
      },
      tooltip: {
   
        trigger: "item",
      },

      //配置属性
      series: [
        {
   
          name: "数据",
          type: "map",
          mapType: "china",
          roam: false,
          geoIndex: 0,
          label: {
   
            normal: {
   
              show: false, //省份名称,
            },
            emphasis: {
   
              show: false,
            },
          },
          data: [
            {
    name: "北京", value: Math.round(Math.random() * 500) },
            {
    name: "天津", value: Math.round(Math.random() * 500) },
            {
    name: "上海", value: Math.round(Math.random() * 500) },
            {
    name: "重庆", value: Math.round(Math.random() * 500) },
            {
    name: "河北", value: Math.round(Math.random() * 500) },
            {
    name: "河南", value: Math.round(Math.random() * 500) },
            {
    name: "云南", value: Math.round(Math.random() * 500) },
            {
    name: "辽宁", value: Math.round(Math.random() *