echarts sets the outer border of the map, the gradient color of the map background and the shadow of the map, increasing the three-dimensional effect and marking on the map
1. Set the outer border of the map
Add an outer border to the map, and add a thinner border to the area in the map. The effect picture is as follows:
There are two kinds of borders involved here, which are respectively set in geo and series. The main code is as follows:
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
}
},
}
]
}
2. Map background gradient
It is necessary to add gradient color to the map as a whole, instead of gradient to a certain area in the map. The rendering is as follows:
According to the areaColor configuration item on the echart official website, we can see that the official API is provided to fill the color of the map area. Not only supports solid colors, but also supports gradient colors and texture fills. The main code implementation is as follows:
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
}
},
3. Map shadows to increase the three-dimensional effect
The effect diagram is as follows:
the main code is as follows:
geo: {
itemStyle: {
normal: {
shadowColor: 'rgba(1, 39, 44, 1)',
shadowOffsetX: 0,
shadowOffsetY: 8
}
}
},
4. Dots on the map
The renderings are as follows:
The main code is as follows:
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'
}
}
},
...
]
}