海南三沙市地图：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.curLevelthis.levelStack.push({level, adcode})fetch(`/api/${params.adcode}.json`).then(res => {// 此处重新渲染echats 操作})})}}}</script>

最终效果：