一、准备工作

1、echarts版本： ^5.5.1

2、去掉海南数据的json文件

二、获取删除过后的json文件

1、DataV.GeoAtlas地理小工具系列 (aliyun.com)

在网站输入这个复制的，新建一个json文件粘贴进去。

接下来需要删除两个地方，不要删错！！！！！

   1、

全局搜索海南，只保留圈出来的第一个数组（海南），其余全部删除（群岛数据）。

   2、

从这里折叠起来，全部删除。

得到的json文件就是不显示群岛的json文件，如果需要显示群岛就不用删除！

注意：如果删错可能导致地图缩小到很小，不知道什么原因，我出现过这种问题，一定不要删除错误！！！

<template>
    <i-icon name="fanhui" class="goback-icon" @click.native="goBack"></i-icon>
    <div ref="mapChartRef" style="height: 100%; width: 100%"></div>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import geoJson from './china.json'
import { ElMessage } from "element-plus";

const mapChartRef = ref();
const initChinaMap = ref();
const initAdCode = ref(100000); // 默认中国地图的编码
const currentMapName = ref("china");; // 默认地图的名称
const mapList = ref([]); // 当前展示的省市区所有数据
const historyInfo = ref([]); // 记录历史点击的省市区，用于返回查询
var dataNum = [];
const balloonColor = (num) => {
    if (num > 30) {
        return '#c45656'
    }
    return '#ffcc00'
}


// 获取地图数据
const getMapData = async (code) => {
    initAdCode.value = code
    if (code !== 100000) {
        const data = await axios
            .get(`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json`)
            .then((res) => {
                mapList.value = [];
                if (res.status === 200) {
                    // 获取当前选中的省市区的所有名称和编码
                    res.data.features.forEach((item) => {
                        mapList.value.push(item.properties);
                    });
                    renderChart(currentMapName.value, res.data);
                }
            })
            .catch(() => { });
        return data;
    } else {
        geoJson.features.forEach((item) => {
            mapList.value.push(item.properties);
            var name = item.properties.name,
                cp = item.properties.center;
            if (cp) {
                dataNum.push({
                    name: name,
                    value: cp.concat(Math.round(Math.random() * 100))
                })
            }
        });
        renderChart('china', geoJson);
    }
};

const seriesMap = (mapName) => {
    const commonSeries = {
        type: "map",
        map: mapName, // 地图名称
        data: [],
        zoom: "1.2", // 当前视角的缩放比例
        label: {
            show: true,
            formatter: '{b}',
            color: "#fff",
        },
        emphasis: { //高亮
            show: true,
            label: {
                show: true,
                formatter: '{b}',
                color: "#000",
            }
        },
        itemStyle: {
            areaColor: '#213dc8',
            borderColor: '#6a98ff',
            borderWidth: 1,
        },
    }
    let series = []
    if (initAdCode.value === 100000) {
        series = [{
            name: '黄色热气球',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: [50, 50],
            label: {
                show: true,
                color: '#000',
                fontSize: 9,
                formatter(value) {
                    return value.data.value[2]
                }
            },
            itemStyle: {
                color: (e) => {
                    return balloonColor(e.data.value[2])
                }, // 标志颜色'#ffcc00'
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            zlevel: 1,
            data: dataNum
        }]
    }
    return [commonSeries, ...series]
}
// 渲染地图
const renderChart = (mapName, mapData) => {
    // 注册: registerMap('地图名称', 地图数据）, 地图名称须和option里面的map一致
    echarts.registerMap(mapName, mapData);
    // 地图配置项
    const option = {
        geo: {
            // nameMap: {
            //     China: '中国',
            // },
            map: mapName,
            label: {
                emphasis: {
                    show: false,
                },
            },
            zoom: 1.2,
            itemStyle: {
                normal: {
                    borderColor: 'rgba(255,209,163, .5)', //区域边框颜色
                    areaColor: 'rgba(73,86,166,.1)', //区域颜色
                    borderWidth: 0.5, //区域边框宽度
                    shadowBlur: 5,
                    shadowColor: 'rgba(107,91,237,.7)',
                },
                emphasis: {
                    borderColor: '#FFD1A3',
                    areaColor: 'rgba(102,105,240,.3)',
                    borderWidth: 1,
                    shadowBlur: 5,
                    shadowColor: 'rgba(135,138,255,.5)',
                },
            },
        },
        // 提示浮窗样式
        series: seriesMap(mapName),
        selectedMode: "single", //选择模式，单选，只能选中一个地市
        select: {//这个就是鼠标点击后，地图想要展示的配置
            disabled: true,//可以被选中
            itemStyle: {
                color: '#fff',
                borderColor: '#FFD1A3',
                areaColor: 'rgba(102,105,240,.2)',
                borderWidth: 1,
                shadowBlur: 5,
                shadowColor: 'rgba(135,138,255,.5)',
            }
        }
    };

    // 渲染
    initChinaMap.value.setOption(option, true);

    // 防止多次触发click事件，重要！！！
    initChinaMap.value.off("click");

    // 下钻
    initChinaMap.value.on("click", (params) => {
        const activeItem = mapList.value.find((item) => item.name == params.name);
        // 判断有子级的时候才可以下钻
        if (activeItem && activeItem.adcode && activeItem.childrenNum) {
            historyInfo.value.push(activeItem);
            currentMapName.value = params.name;
            getMapData(activeItem.adcode);
        } else {
            ElMessage.warning('暂无下级！')
        }
    });
};

onMounted(() => {
    initChinaMap.value = echarts.init(mapChartRef.value);
    getMapData(initAdCode.value);
});

// 返回上一级
const goBack = () => {
    const lastItem = historyInfo.value.pop();
    if (lastItem && lastItem.parent && lastItem.parent.adcode) {
        getMapData(lastItem.parent.adcode);
    }
};
</script>

<style scoped>
.goback-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    cursor: pointer;
}
</style>

代码贴出来了，自己看吧！我的思路是把全国地图和下钻的serios分开了，因为其他省的不需要热气球显示数字。

还有一个需要注意的点是如果设置地图div盒子为500*500你会发现没有铺满容器，但是大屏还是铺满容器好看，所以我设置了zoom:1.2，但是只设置serios里面的zoom:1.2会导致分层，就是这样

很明显吧，导致这个的原因是里面的geo没有放大就导致外面一层放大里面还是原样，所以

geo也需要给1.2

这样就可以得到铺满屏幕的地图了！！！

下钻也很成功。

！！！！注意：如果地图请求接口报错403

可以在index.html加

<meta name=”referrer” content=”no-referrer”>

记得重启！！！

其实还有一种办法。

首页 - ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com

直接用这个网站的接口就不用分两种情况了，数据就是海南省缩略的。