echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点
一、设置地图外边框
给地图添加外边框，同时地图中的区域添加细一点的边框。效果图如下：
这里涉及两种边框 ，分别在 geo 和 series 种设置 。主要代码如下：
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 来填充地图区域的颜色。不仅支持纯色之外，还支持渐变色和纹理填充。主要代码实现如下：
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
}
},
三、地图阴影,增加立体感
效果图如下:
主要代码如下:
geo: {
itemStyle: {
normal: {
shadowColor: 'rgba(1, 39, 44, 1)',
shadowOffsetX: 0,
shadowOffsetY: 8
}
}
},
四、地图上打点
效果图如下：
主要代码如下：
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'
}
}
},
...
]
}