Echarts地图之——如何让地图显示出3d感

地图之——如何让地图显示出3d感"/>

Echarts地图之——如何让地图显示出3d感

首先，我们正常引入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的感觉了