echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点

一、设置地图外边框

给地图添加外边框，同时地图中的区域添加细一点的边框。效果图如下：

这里涉及两种边框，分别在 geo 和 series 种设置。主要代码如下：

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

option = {
backgroundColor: '#000',//画布背景颜色
geo: {
show: true,
map: 'china',
label: {
show: false
},
roam: false,
itemStyle: {
normal: {
areaColor: '#000',
borderWidth: 4, //设置外层边框
borderColor:'#f8911b',
},
emphasis: {
show: false,
// areaColor: '#01215c'
}
}
},
series: [
{
type: 'map',
map: 'china',
label: {
show: false
},
roam: false,
itemStyle: {
normal: {
areaColor: '#000',
borderColor: '#a18a3a',
borderWidth: 1
},
emphasis: {
show: false,
areaColor: null
}
},
}
]
}

二、地图背景渐变

需要给地图整体添加渐变色，而不是给让地图中某一块区域进行渐变，效果图如下：

根据 echart 官网 areaColor 配置项，我们可以看出官方提供了 API 来填充地图区域的颜色。不仅支持纯色之外，还支持渐变色和纹理填充。主要代码实现如下：

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

itemStyle: {
normal: {
areaColor: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: '#24a0fa'
}, {
offset: 1, color: '#15072a'
}],
global: false
}
},
borderColor: '#a18a3a',
borderWidth: 1,

},
emphasis: {
show: false,
areaColor: null
}
},

三、地图阴影,增加立体感

效果图如下:

主要代码如下:

1
2
3
4
5
6
7
8
9

geo: {
itemStyle: {
normal: {
shadowColor: 'rgba(1, 39, 44, 1)',
shadowOffsetX: 0,
shadowOffsetY: 8
}
}
},

四、地图上打点

效果图如下：

主要代码如下：

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

option = {
...
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: 20,
symbol: 'image://https://pic.ulecdn.com/item/user_0102/desc20190115/1fb19e0cf39aafef_-1x-1.png',
symbolRotate: 35,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
}
},
...
]
}

如有需要,请查看完整代码.