echarts 设置地图外边框以及多个geo实现缩放拖曳同步

一、文章简述：

1.如何设置地图外边框

2.geo设置roam=true时，怎么实现多个geo缩放拖曳同步

3.本文并不是echarts的入门教程，具体的echarts官方文档可访问：echarts官方文档

 

二、echart设置地图外边框

为了方便起见，其他的冗余代码我就省略了，只展示关键代码

var option={
	geo: [{
		zlevel:2,//geo显示级别，默认是0
		map: 'china',//地图名
		roam: false,//设置为false,不启动roam就无所谓缩放拖曳同步了
		zoom:1.1,//缩放级别
		itemStyle:{//顶层地图的样式，如地图区域颜色，边框颜色，边框大小等
			normal:{
				areaColor:'#08407D',
				borderColor:'#00FFFF',
				borderWidth:0.5
			}
			
		},
	},{
		map: 'china',
		roam: false,//roam与上一个geo配置相同
		zoom:1.1,
		itemStyle:{//底层地图样式
			normal:{
                            //此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等
			    borderColor:'#0A609D',
			    borderWidth:2
			},
		},
	},
   ],
   series:[{
	name:'china',
	type:'map',
	mapType:map,
	roam:false,
	geoIndex: 0,
        //指定要用哪个geo的配置，这里使用第一个geo，因为第一个geo的显示级别zlevel更高，展示数据需要在最顶层展示
	//注意：当你设置了geoindex以后，就会使用对应geo的label、itemstyle样式，当前series的label等样式就无效了，
	data:[],//设置地图数据
   }]
};

如果代码无误的话，显示效果应该会如下图所示：

可以根据要求，自己设置外边框的大小，颜色以及阴影效果等等，只要修改第二个geo的itemstyle->normal即可。

 

三、geo设置roam=true时，怎么实现多个geo缩放拖曳同步

由于我们第二部分中，设置roam为false，因此我们的地图是不可缩放拖曳的。

一旦我们设置roam为true，对地图进行缩放拖曳时，上下2层geo是不会同步缩放拖曳，就会导致2个geo分层。如下图所示：

解决办法：添加如下js代码，捕捉georoam事件，使下层geo跟着上层geo一起缩放拖曳：

chart=echarts.init(document.getElementById(''));//chart为当前ECharts实例
//捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳
chart.on('georoam',function(params){
    var option = chart.getOption();//获得option对象
	if(params.zoom!=null&&params.zoom!=undefined){ //捕捉到缩放时
	    option.geo[1].zoom=option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
	    option.geo[1].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
	}else{//捕捉到拖曳时
	    option.geo[1].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
	}
	chart.setOption(option);//设置option
});

本文到此结束，有什么不对的地方还请大家多多指教。