每次用Echarts开发地图时，都要去查官网API，或者在百度的茫茫大海中捞针，非常麻烦，于是打算把每次的配置都总结一下。
1. 效果图
2. 代码如下：
options: {
tooltip: {
show: true,
trigger: 'item',
showDelay: 0,
backgroundColor: 'rgba(255,255,255,.6)',
transitionDuration: 0.2,
formatter: function (params: any) {
if (params.data) {
return '<h3 style="color:#29667b;text-align:center;font-size:14px;font-weight:bold;line-height:20px;">[' + params.name + ']</h3>' +
'<p style="color:#26677b;font-size:12px;">累积客户数：' + params.data.value + '</p>'
}
}
},
/* visualMap:地图图例配置、包括图例渐变色、地图渐变色的配置等*/
visualMap: {
type: "piecewise",
realtime: false,
calculable: true,
orient: 'horizontal', /*配置图例的方向为水平方向*/
pieces: [
{
min: 0,
max: 1000,
label: '0-1000',
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#45E9FF' // 0% 处的颜色
},
{
offset: 1,
color: '#015DE6' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
{
min: 1000,
max: 5000,
label: '1000-5000',
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(107, 241,214)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(25, 210,210, 0.6)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
{
min: 5000,
max: 10000,
label: '5000-10000',
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255, 225,121, 0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 182,10)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
{
min: 10000,
label: '10000以上',
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FFD8B1' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 97,132)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}],
itemSymbol: '',
itemWidth: 30,
itemHeight: 15,
left: 'center',
bottom:'bottom',
show: true,
textStyle: {
color: '#ffffff',
fontSize: 16,
},
},
geo: {
show: true,
zoom: 1.25,
type: 'map',
map: mapName,
left: '10%',
right: '14%',
top: '10%',
bottom: '22%',
layoutSize: '100%',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
// areaColor: '#031525',
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(27,132,199,0.7)'
}, {
offset: 1, color: 'rgba(46,197,251,0.7)'
}],
global: false
},
borderColor: '#003DA4',
borderWidth: 0,
shadowColor: 'rgba(7,209,209, .3)',
shadowBlur: 0
},
emphasis: {
areaColor: '#2B91B7'
}
}
},
series: [
{
name: '散点',
zoom: 1.25,
type: 'scatter',
effect: {
show: false
},
coordinateSystem: 'geo',
symbolSize: function (val: any) {
const v = document.documentElement.clientWidth / 1680
return Number(val[2]) * 0.00005 * v
},
label: {
normal: {
formatter: '{}',
position: 'right',
show: true
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
mapType: 'china',
zoom: 1.25,
map: mapName,
// geoIndex: 0,
left: '10%',
right: '14%',
top: '10%',
bottom: '22%',
aspectScale: 0.85, // 长宽比
showLegendSymbol: false, // 存在legend时显示
roam: false,
itemStyle: {
normal: {
label: { show: false },
areaColor: '#031525',
borderColor: '#0041AE',
borderWidth: 1
},
emphasis: {
label: { show: false },
areaColor: '#021553'
}
},
// animation: false,
data
},
/*配置地图中数值top30*/
// {
// name: 'Top 30',
// zoom: 1.25,
// aspectScale: 0.85, // 长宽比
// type: 'effectScatter',
// coordinateSystem: 'geo',
// data: convertData(
// data.sort(function (a, b) {
// return b.value - a.value
// }).slice(0, 29)
// ),
// symbolSize: function (val: any) {
// const v = document.documentElement.clientWidth / 1680
// return Number(val[2]) * 0.00005 * v
// },
// showEffectOn: 'render',
// rippleEffect: {
// brushType: 'stroke'
// },
// hoverAnimation: true,
// label: {
// normal: {
// formatter: '',
// position: 'left',
// show: true
// }
// },
// itemStyle: {
// show: false,
// normal: {
// color: '#ef9156',
// shadowBlur: 10,
// shadowColor: '#f6bc6d'
// }
// },
// zlevel: 1
// },
// {
// 'type': 'lines',
// 'zoom': 1.25,
// 'zlevel': 2,
// 'effect': {
// 'show': true,
// 'period': 4,
// 'trailLength': 0.02,
// 'symbol': 'arrow',
// 'symbolSize': 8 * (document.documentElement.clientWidth / 1680)
// // symbolSize: function (val: any) {
// // const v = document.documentElement.clientWidth / 1680
// // console.log(Number(val))
// // return 8 * v
// // }
// },
// 'lineStyle': {
// 'normal': {
// 'width': 1.5,
// 'opacity': 0.6,
// 'color': '#f9d37a',
// 'curveness': 0.2
// }
// },
// 'tooltip': {
// 'trigger': 'item'
// },
// 'data': seriesData(
// data.sort(function (a, b) {
// return b.value - a.value
// }).slice(0, 29)
// )
// }
]
}
