首先,我们正常引入echarts和地图json,然后获取dom初始化echarts,这些步骤省略
然后地图的基本配置我们也是知道通过series的type:map来决定的
series: [
{
type: 'map',
map: 'china', //echarts.registerMap的时候设置的名称
aspectScale: 0.85, //长宽比
zoom: 1.2, //放大缩小
roam: false, //鼠标缩放关闭
top: '9%',
left: '11%',
....
}
]
上面几个是常用的地图配置,其他的配置如label、itemstyle、emphasis(高亮)、select(选中)则和其他的图表类似可以看文档,根据需要来修改配置
当我们把该option配置完成时就能看到一个基础的地图了
然后我们给地图添加阴影的效果,与其说是阴影不如说是地图下的错位图层,多加了几层所形成的效果
这里我们通过geo给地图添加其他图层,geo和我们刚才说的series内的配置基本一样
geo: [
{
map: 'china',
aspectScale: 0.85,
zoom: 1.2,
top: '9%',//***********重点**********距离顶部的位置,每层向下一个百分比
left: '11%',
roam: false,
z: 5,//*********重点*********可以看成是css的z-index,数字越大图层越高,我这里设置了5个,然后页面有点卡,根据实际需要来添加,3个其实就能看出效果了
regions: [
{ // 隐藏南海诸岛,因为顶层已经添加过了
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0 // 为 0 时不绘制该图形
}
},
label: {
show: false
}
}
],
itemStyle: {
areaColor: '#004b75',//****重点****每个图层的背景色,根据需要来调,由亮变暗,下面的几个颜色也一样
borderColor: '#195175',
borderWidth: 2,
shadowColor: '#0f4c74',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
},
emphasis: {
......
},
select: {
......
},
tooltip: {
show: false
},
},
{
map: 'china',
aspectScale: 0.85,
zoom: 1.2,
top: '10.5%',//根据自己需要来设置
left: '11%',
roam: false,
z: 4,//变小,也就是被压在下面
itemStyle: {
areaColor: '#004b75',//记得改颜色
borderColor: '#195175',
borderWidth: 2,
shadowColor: '#0f4c74',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
},
......//其他的配置一样,重复添加
},
{
.....修改上述的几个配置,满足自己的需要
},
...
]
这样我们在原有图层的基础上添加了几层阴影效果,这样就会有3d的感觉了