最終效果圖
地圖整體設(shè)置漸變色办斑，會(huì)設(shè)置到每一塊都是顏色漸變外恕，并不是整體一個(gè)顏色漸變過去杆逗。如下圖：
直接設(shè)置漸變色效果
顯然這不是我們想要的效果。
網(wǎng)上大部分地圖漸變色案例鳞疲，是使用的visualMap比例尺效果實(shí)現(xiàn)的罪郊，但是這個(gè)效果是依據(jù)地圖塊對(duì)應(yīng)的 value 數(shù)值的大小自動(dòng)分配顏色，對(duì)于一些想自定義整體漸變色的場景不是很方便了尚洽。
通過echarts官方的配置文檔發(fā)現(xiàn)geo中的一個(gè)屬性regions悔橄，此屬性的作用是：在地圖中對(duì)特定的區(qū)域配置樣式。
以汕頭市地圖為例，顏色：深藍(lán)----淺藍(lán)漸變癣疟，方向：左下----右上挣柬。
此方法麻煩之處是，需要UI提供一下每個(gè)塊的漸變顏色和漸變方向睛挚，然后單獨(dú)設(shè)置每個(gè)塊的漸變色邪蛔，最后整體效果就可以達(dá)到想要的效果了。
geo: {
type: 'map',
map: '汕頭',
selectedMode: 'single', //是否支持多個(gè)選中扎狱，single單選侧到，multiple多選
aspectScale: 0.8, //地圖長度比
roam: false,
zoom: 1,
regions: [{
name: '潮南區(qū)',
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: '潮陽區(qū)',
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' //鼠標(biāo)懸停的顏色
}
}
},{
name: '濠江區(qū)',
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' //鼠標(biāo)懸停的顏色
}
}
},{
name: '金平區(qū)',
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' //鼠標(biāo)懸停的顏色
}
}
},{
name: '龍湖區(qū)',
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' //鼠標(biāo)懸停的顏色
}
}
},{
name: '澄海區(qū)',
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' //鼠標(biāo)懸停的顏色
}
}
},{
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' //鼠標(biāo)懸停的顏色
}
}
}]
}
其中x,y,x2,y2四個(gè)屬性，相當(dāng)于坐標(biāo)系中的方向淤击，范圍從 0 - 1匠抗，相當(dāng)于在圖形包圍盒中的百分比。
可以試著修改四個(gè)值污抬，感受一下方向和效果的變化汞贸，找到自己想要的效果。
