Echarts地图之——如何让地图显示出3d感_echarts3d立体地图效果

首先，我们正常引入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%',
        ....
	}
]
1
2
3
4
5
6
7
8
9
10
11
12

上面几个是常用的地图配置，其他的配置如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,
        },
        ......//其他的配置一样，重复添加
	},
	{
		.....修改上述的几个配置，满足自己的需要
	},
	...
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

这样我们在原有图层的基础上添加了几层阴影效果，这样就会有3d的感觉了