最终效果图
地图整体设置渐变色，会设置到每一块都是颜色渐变，并不是整体一个颜色渐变过去。如下图：
直接设置渐变色效果
显然这不是我们想要的效果。
网上大部分地图渐变色案例，是使用的visualMap比例尺效果实现的，但是这个效果是依据地图块对应的 value 数值的大小自动分配颜色，对于一些想自定义整体渐变色的场景不是很方便了。
通过echarts官方的配置文档发现geo中的一个属性regions，此属性的作用是：在地图中对特定的区域配置样式。
以汕头市地图为例，颜色：深蓝----浅蓝渐变，方向：左下----右上。
此方法麻烦之处是，需要UI提供一下每个块的渐变颜色和渐变方向，然后单独设置每个块的渐变色，最后整体效果就可以达到想要的效果了。
geo: {
type: 'map',
map: '汕头',
selectedMode: 'single', //是否支持多个选中，single单选，multiple多选
aspectScale: 0.8, //地图长度比
roam: false,
zoom: 1,
regions: [{
name: '潮南区',
itemStyle: {
normal: {
areaColor: { //地图色
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#003ddf' // 0% 处的颜色
}, {
offset: 1, color: '#0069e6' // 100% 处的颜色
}],
global: false // 缺省为 false
},
},
}
},{
name: '潮阳区',
itemStyle: {
normal: {
areaColor: { //地图色
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#004fdd' // 0% 处的颜色
}, {
offset: 1, color: '#0096f6' // 100% 处的颜色
}],
global: false // 缺省为 false
},
},
emphasis: {
areaColor: '#0036bf' //鼠标悬停的颜色
}
}
},{
name: '濠江区',
itemStyle: {
normal: {
areaColor: { //地图色
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#0059e0' // 0% 处的颜色
}, {
offset: 1, color: '#0075eb' // 100% 处的颜色
}],
global: false // 缺省为 false
},
},
emphasis: {
areaColor: '#0036bf' //鼠标悬停的颜色
}
}
},{
name: '金平区',
itemStyle: {
normal: {
areaColor: { //地图色
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#0071e9' // 0% 处的颜色
}, {
offset: 1, color: '#008ff4' // 100% 处的颜色
}],
global: false // 缺省为 false
},
},
emphasis: {
areaColor: '#0036bf' //鼠标悬停的颜色
}
}
},{
name: '龙湖区',
itemStyle: {
normal: {
areaColor: { //地图色
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#0073ea' // 0% 处的颜色
}, {
offset: 1, color: '#0091f4' // 100% 处的颜色
}],
global: false // 缺省为 false
},
},
emphasis: {
areaColor: '#0036bf' //鼠标悬停的颜色
}
}
},{
name: '澄海区',
itemStyle: {
normal: {
areaColor: { //地图色
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#0082ef' // 0% 处的颜色
}, {
offset: 1, color: '#00aeff' // 100% 处的颜色
}],
global: false // 缺省为 false
},
},
emphasis: {
areaColor: '#0036bf' //鼠标悬停的颜色
}
}
},{
name: '南澳县',
itemStyle: {
normal: {
areaColor: { //地图色
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#0083f0' // 0% 处的颜色
}, {
offset: 1, color: '#0096f6' // 100% 处的颜色
}],
global: false // 缺省为 false
},
},
emphasis: {
areaColor: '#0036bf' //鼠标悬停的颜色
}
}
}]
}
其中x,y,x2,y2四个属性，相当于坐标系中的方向，范围从 0 - 1，相当于在图形包围盒中的百分比。
可以试着修改四个值，感受一下方向和效果的变化，找到自己想要的效果。
