echarts 5.4 版本 map 地图下钻，显示南沙群岛缩略图，海南三沙市编辑隐藏

需求：渲染中国地图，支持下钻，同时南沙群岛显示在地图右下脚，三沙市边界隐藏

geoJson 数据可从 阿里云-dataV-下载
如果要展示 南海诸岛需要将地图类型设置为china, 将海南省中的三沙市坐标删除

<template>
<div ref="echartInstance"></div>
</template>
<script>
import * as echarts from 'echarts'
import { registerMap } from 'echarts'
import geoJson from './geoJson.json'

const CITY_LEVEL = {
  country: 'country', // 全国
  province: 'province',
  city: 'city', // 市
  district: 'district' // 县一级
}


export default {
  name: 'chinaMap',
  data() {
	return {
		curLevel: {
			level: CITY_LEVEL.country, // 默认国家
			adcode: '100000'
		},
		levelStack: [] // 下钻的栈
	}
	},
  methods: {
	init(){
		// 此处将南沙群岛的边界过滤掉，或者也可以直接在geoJson中删除
		geoJson.features = geoJson.features.filter(item => item.properties.adcode !== '100000_JD')
		const ecahrtInstance = echarts.init(this.$refs.echartInstance)
		// geoJson 文件可直接使用从阿里云下载文件
		registerMap(‘china’, geoJson)
		const option = {
			  geo: {
			  	map: 'china'
			  },
			  series: [
				{
				 type: 'map',
				 map: 'china'
				}
			]
		}

		ecahrtInstance.setOption(option , true)
		ecahrtInstance.on('click', (params) => {
			// 可以从数据中拿到当前需要展示的省市区adcode 获取对应的geoJson 文件
			const {level, adcode} = this.curLevel
			this.levelStack.push({level, adcode})
			fetch(`/api/${params.adcode}.json`).then(res => {
				// 此处重新渲染echats 操作	
			})
			})
		}	
	}
}
</script>

最终效果：