方法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
}
]