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增加固定的高和宽

还有一张地图是这样的

在这里插入图片描述

这里边也去掉了南海，如果你的需要增加，请按照最上边修改China.json,并修改下边regions的南海诸岛的样式
每个地图板块的颜色不一样。这个百度我没找到方法，所以就自己看文档找到了一个实现方法，如果有更好的方法实现方法，可以共同交流。
实现方法见下

//记住一定要给这个id加宽高