echarts geo地图加投影两种方法
方法1，geo中加多个地图图形，叠加。缩放时 可能会不一致，需要捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳
geo: [{zlevel: 3,//geo显示级别，默认是0 【最顶层图形】map: 'BJ',//地图名roam: true,scaleLimit: {min: 1,max: 4},zoom: 1.2,label: {show: true,fontSize: 12,color: "#000000"},itemStyle: {borderColor: "#fff",borderWidth: 1.5,// emphasis:},emphasis: {label: {fontSize: 12,color: '#fff',fontWeight: 'bold'},itemStyle: {areaColor: "#008A8A",shadowColor: "rgba(0,10,10,0.53)",shadowBlur: 10,shadowOffsetY: 8,shadowOffsetX: 6,focus: "none",label: {show: true,},borderWidth: 3,borderColor: '#fff'}},select: {label: {fontSize: 12,color: '#fff',fontWeight: 'bold'},itemStyle: {areaColor: "#008A8A",shadowColor: "rgba(0,10,10,0.53)",shadowBlur: 10,shadowOffsetY: 8,shadowOffsetX: 6,focus: "none",label: {show: true,},borderWidth: 3,borderColor: '#fff'}},selectedMode: 'single',},{zlevel: 2,//geo显示级别，默认是0 【第二层图形】map: "BJ",roam: true,scaleLimit: {min: 1,max: 4},zoom: 1.2,label:{show:false},itemStyle: {//此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等borderColor: '#fff',borderWidth: 4,shadowColor: '#008A8A',shadowOffsetY: 6,shadowOffsetX: 3,},emphasis: {disabled: true}},{zlevel: 1,//geo显示级别，默认是0 【最底层层图形】map: "BJ",roam: true,scaleLimit: {min: 1,max: 4},zoom: 1.2,label:{show:false},itemStyle: {//底层地图样式//此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等borderColor: '#fff',borderWidth: 4,shadowColor: '#AAD8D9',shadowOffsetY: 10,shadowOffsetX: 6,},emphasis: {disabled: true}}],series: [{name: "xxx量",type: "map",geoIndex: 0,data: this.dataList}] //捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳this.myChart.on('georoam', function (params) {var option = _this.myChart.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一起改变option.geo[2].zoom = option.geo[0].zoom;option.geo[2].center = option.geo[0].center;} else {//捕捉到拖曳时option.geo[1].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变option.geo[2].center = option.geo[0].center;}_this.myChart.setOption(option);//设置option});
方法2，直接加阴影。这样会在最上层显示出阴影的分界线，效果不好
geo: {map: "BJ",roam: true,scaleLimit: {min: 1,max: 4},zoom: 1.2,label: {show: true,fontSize: "11",color: "#000000"},itemStyle: {borderColor: "#fff",borderWidth: 2,shadowColor: '#008A8A',shadowOffsetY: 8,shadowOffsetX: 6,emphasis: {areaColor: "#008A8A",shadowColor: "rgba(0,10,10,0.53)",shadowBlur: 10,shadowOffsetY: 8,shadowOffsetX: 6,focus: "none",label: {show: true,},borderWidth: 3,borderColor: '#fff'}},emphasis: {label: {fontSize: 12,color: '#fff',fontWeight: 'bold'},},selectedMode: 'single',},series: [{name: "xxx量",type: "map",geoIndex: 0,data: this.dataList}]