作者由于客户的需求，需要使用世界地图嵌套中国地图里面的省市，但是找了很久也没有找到类似的项目，所以只能自己动手做了，整个心路历程和踩的坑分享给大家 先上效果图：
，
首先是说思路：
先获取到世界地图和中国地图的json数据，这个可以去下面的网址下载：
geojson.cn/
下载的时候需要注意下载GeoJSON格式的：
，
下载完成后，再找到一个世界地图的JSON，展开JSON文件就能发现，两个文件的格式是一模一样的，格式如下：
这个时候只需要将两个地图获取回来的数据进行合并就可以了
import * as echarts from 'echarts'
var mapSerise = [
{
name:"青海",
value:[
101.4038,//经度
36.8207,//维度
292，//数值
],
},
{
name:"内蒙古",
value:[
110.3467,
41.4899,
286
],
},//这是实例数据，需要通过后端传回的数据和中国mapJSON遍历来产生，
]
const chinaMapChart = ref(null)//注册DOM
const chinaJSON = {};
const WorldJSON = {};
async function getMapJson(){
await axios.get('/china.json').then((resp)=>{
chinaJSON = resp.data
})
await axios.get('/world.json').then((resp)=>{
worldJSON = resp.data
})
}
const chinaAndWorldJson = {}
WorldJSON.features = [...worldJson.features,...chinaJSON.features,],//一定要注意顺序，因为后面的数据会覆盖前面的数据，如果顺序错误，会导致世界地图中的中国覆盖住中国省市地图
const mapChart = echarts.init(chinaMapChart.value)//创建地图实例
echarts.registerMap('china',WorldJSON)//注入地图数据
接下来是设置的option，
const worldregions = [
{
//对世界地图中的中国进行样式设置，主要设置边框
name:"China",
itemStyle:{
borderColor:'#48CFD9',
borderWidth:6,
emphasis:{
areaColor:'#001113',
},
},
emphasis:{
disabled:true
},//这个属性非常珍贵，用于取消世界地图中的中国的hover事件，但是无法取消click事件
},
]
WorldJSON.forEach((item)=>{
worldregions.push({
name:item.properties.name,
itemStyle:{
areaColor:'rgba(3,21,37,0.1)',
},
emphasis:{
disabled:true
},//使用这个属性取消世界地图板块的hover事件
})
})
const option = {
tooltip:{
trigger:'item',//触发类型
formatter:'{b}',//提示框浮层内容格式器
},
geo: {
show: true,
map: 'china',
center: [94.114129, 30.550339],
zoom: 3,
label: {
normal: {
show: false,
formatter: '',
},
emphasis: {
show: false,
}
},
selectedMode: true,
roam: true,
itemStyle:{
normal:{
areaColor:'#031525',
borderColor:'#3B5077',
},
emphasis:{
areaColor:'rgba(43,145,183,0.5)',
}
},
scaleLimit: { // 缩放的极限控制
min: 1,
max: 5
},
select:{
itemStyle:{
// areaColor:'rgba(43,145,183,1)',
color:"rgba(17,246,242,0.8)"
},
disabled:true,
},
regions:worldregions,//要对地图中哪些项进行特殊处理，具体可以查询echarts配置文档
},
series:[
{
//世界地图部分配置
type: 'map',
map: 'china',
center: [94.114129, 30.550339],
zoom: 3,
geoIndex: 0,//一定不要删除或更改这一项，否则会出现地图拖动的时候分层的现象
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
formatter: '{b}',
},
emphasis: {
show: false,
textStyle: {
color: '#fff',
}
}
},//图形上的文本标签
roam: true,//是否允许缩放
animation: false,//是否开启动画
itemStyle:{
normal:{
areaColor:'#031525',
borderColor:'#3B5077',
},
emphasis:{
areaColor:'rgba(43,145,183,0.5)',
}
},
select:{
itemStyle:{
areaColor:'rgba(43,145,183,1)',
},
// disabled:false,
},
data:mapSerise,
},
{
//波纹点部分的配置
// name: 'Top5',
type: 'effectScatter',
coordinateSystem: 'geo',
effectType :'ripple',
data: convertData(resData,mapData),
// symbolSize: function(val) {
// return val[2];
// },
symbolSize:16,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: true
}
},
itemStyle: {
color: '#11FEFE',
shadowBlur: 100,
shadowColor: '#12FFFF',
},
},
]
};
mapChart.setOption(option)
到这里就大功告成了，但是还遗留了一些bug，就是国外的地区虽然没有hover的效果了，但是还会有click效果，后续可能要将中国地图和世界地图进行分离来解决
