陰影實現方式是：
css3翻轉畫布層，
疊加幾層陰影顏色的geo地圖，陰影的邊也是其中一層，調整各個畫布層的位置確保視覺上最符合設計。
其中漸變可不加，有點冗餘。
js代碼:
//默認地圖配置
const defaultMapOption={
tooltip:{
show:false,
trigger:'item',
showDelay:100,
padding:0,
confine:true,
},
geo: [
{
map:'FZ',
roam:false,
zoom:1.1,
zlevel:2,
z:1,
aspectScale:1.05,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor:'#013a67',
borderWidth:2,
areaColor: '#0aade4',
},
emphasis: {
borderWidth:2,
areaColor: '#07aae1',
borderColor:'#013a67'
}
}
},
{
map:'FZ',
roam:false,
zoom:1.1,
zlevel:0,
aspectScale:1.05,
center:[338.04,310.15],
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor:'#639fdb',
borderWidth:1.5,
areaColor: '#003b65'
},
emphasis: {
borderWidth:1.5,
areaColor: '#003b65',
borderColor:'#639fdb'
}
}
},
{
map:'FZ',
roam:false,
zlevel:1,
zoom:1.1,
z:1,
aspectScale:1.05,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor:'#013a67',
borderWidth:2,
areaColor: '#0aade4',
shadowColor: 'rgba(1,58,101, 1)',
shadowBlur: 0,
shadowOffsetX:0,
shadowOffsetY:10
},
emphasis: {
borderWidth:3,
areaColor: '#07aae1',
borderColor:'#013a67'
}
}
},
{
map:'FZ',
roam:false,
zlevel:1,
zoom:1.1,
z:1,
aspectScale:1.05,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor:'#013a67',
borderWidth:2,
areaColor: '#0aade4',
shadowColor: 'rgba(1,58,101, 1)',
shadowBlur: 0,
shadowOffsetX:-1,
shadowOffsetY:10
},
emphasis: {
borderWidth:3,
areaColor: '#07aae1',
borderColor:'#013a67'
}
}
},
{
map:'FZ',
roam:false,
zoom:1.1,
zlevel:1,
z:1,
aspectScale:1.05,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor:'#013a67',
borderWidth:2,
areaColor: '#0aade4',
shadowColor: 'rgba(1,58,101, 1)',
shadowBlur: 0,
shadowOffsetX:-1,
shadowOffsetY:14
},
emphasis: {
borderWidth:3,
areaColor: '#07aae1',
borderColor:'#013a67'
}
}
},
{
map:'FZ',
roam:false,
zoom:1.1,
zlevel:1,
z:1,
aspectScale:1.05,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor:'#013a67',
borderWidth:2,
areaColor: '#0aade4',
shadowColor: 'rgba(1,58,101, 1)',
shadowBlur: 0,
shadowOffsetX:-1,
shadowOffsetY:21
},
emphasis: {
borderWidth:3,
areaColor: '#07aae1',
borderColor:'#013a67'
}
}
},
],
series:[
{
name:'標籤',
type:'effectScatter',
effectType:'ripple',
rippleEffect:{
brushType:'stroke',
period:3
},
coordinateSystem:'geo',
symbolSize: function (val){
return val[2] / 200;
},
symbol:'circle',
geoIndex:0,
label: {
normal: {
position: 'top',
show: true
},
emphasis: {
show: true,
color:'#fff'
}
},
zlevel:5
},
{
name:'散點圖',
type:'effectScatter',
effectType:'ripple',
rippleEffect:{
brushType:'stroke',
period:3
},
coordinateSystem:'geo',
symbolSize: function (val){
return val[2] / 200;
},
symbol:'circle',
geoIndex:0,
label: {
//show:false
},
itemStyle:{
borderColor:'#f1c74b',
color:'#f1c74b'
},
emphasis:{
itemStyle:{
borderColor:'#f68454',
color:'#f68454'
}
},
zlevel:3
},
{
name:'地圖圖形',
mapType:'FZ',
type:'map',
geoIndex:0,
data:[],
itemStyle:{
areaColor:'#fff',
borderWidth:1.5
},
zlevel:1
},
{
name:'地圖連線',
type:'lines',
geoIndex:0,
lineStyle: {
color: '#fff7e5',
width: 0.5,
curveness: 0.3
},
zlevel:4
},
{
name:'地圖陰影',
mapType:'FZ',
type:'map',
geoIndex:1,
aspectScale:1,
data:[],
itemStyle:{
areaColor:'rgb(30,49,108)',
borderWidth:7
},
zlevel:0
}
]
};
//根據數據計算配置，併合並得到所有配置
function getopt(data){
var geoCoordMap={
'城廂區':[346.04,236.15],
'荔城區':[460.09,190.64],
'涵江區':[405.91,473.09],
'仙遊縣':[161.26,328.13],
'秀嶼區':[552.6,156.36],
'湄洲島管委會':[482.6,20.3],
'市直屬':[326.04,376.15],
'北岸管委會':[472.6,106.3]
};
var geoCoordMap1={
'城廂區':[346.04,256.15],
'荔城區':[460.09,222.64],
'涵江區':[405.91,433.09],
'仙遊縣':[161.26,328.13],
'秀嶼區':[552.6,200.36],
'湄洲島管委會':[482.6,100.3],
'市直屬':[326.04,346.15],
'北岸管委會':[472.6,159.3]
};
var coneGeo=this.deepClone(geoCoordMap),me=this;
var spName='市直屬';
var planePath = 'path://M14.367,28.444 L11.003,67.087 L7.600,28.437 L0.014,28.429 L10.675,0.008 L21.298,28.452 L14.367,28.444 Z';
var color=[colorObj.red,'#e96e16','#f2b30b'];
function convertData(data,geoCoordMap) {
var res = [];
var labelStyle={
normal: {
position:'top',
lineHeight:16,
formatter: function(param){
return '{a|'+param.name+' '+param.value[2]+'}\n\n{b| }';
},
rich:{
a:{
color:'#fff',
padding:5,
backgroundColor:'',
fontSize:defautFont()
},
b:{
width:1,
height:40,
backgroundColor:'',
align:'center'
}
}
}
};
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name],thiscolor;
if (geoCoord) {
var tepdata={
name: data[i].name,
value: geoCoord.concat(data[i].value)
};
if(tepdata.name=='市直屬'){
tepdata.label={
position:'right'
};
tepdata.symbolSize=15;
tepdata.symbol='path://M1077.529145 388.206248C1072.06379 371.533456 1056.511742 360.326019 1039.008769 360.326019L686.956883 360.326019 578.161726 27.824884C572.876243 11.207437 557.37954 0 539.765877 0 522.262904 0 506.710856 11.207437 501.370028 27.700357L392.450343 360.326019 40.467639 360.326019C22.909321 360.326019 7.398781 371.533456 2.002608 388.206248-3.462747 404.713004 2.528389 422.963139 16.682967 433.119014L301.504067 638.533348 192.764255 971.214355C187.243555 987.776457 193.234691 1005.860556 207.444614 1016.127121 221.474665 1026.338342 240.845544 1026.338342 254.944776 1016.127121L539.765877 810.588261 824.642322 1016.127121C831.629675 1021.191223 839.972989 1023.820128 848.371649 1023.820128 856.701127 1023.820128 865.099787 1021.191223 872.142485 1016.127121 886.297062 1005.860556 892.288199 987.776457 886.767498 971.214355L778.138377 638.533348 1062.793441 433.119014C1076.934183 422.963139 1082.869974 404.713004 1077.529145 388.206248Z';
tepdata.itemStyle={
color:'#ff3d3d',
borderColor:'#ff3d3d'
}
}
if(i<3){
thiscolor=color[0];
}else if(i<5){
thiscolor=color[1];
}else{
thiscolor=color[2];
}
var style=me.deepClone(labelStyle),newStyle={
normal: {
rich:{
a:{
backgroundColor:thiscolor
},
b:{
backgroundColor:thiscolor
}
}
}
};
newStyle=me.extendOption(style,newStyle);
tepdata.label=newStyle;
tepdata.itemStyle={
color:thiscolor,
borderColor:thiscolor
};
res.push(tepdata);
}
}
return res;
}
function coverLinesData(data){
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i],fromName=dataItem['fromName'],toName=dataItem['toName'];
var fromCoord = geoCoordMap[fromName];
var toCoord = geoCoordMap[toName];
if (fromCoord && toCoord) {
dataItem.coords=[fromCoord, toCoord];
dataItem.effect={
show: true,
period: 6,
trailLength:.5,
symbol: planePath,
symbolSize: [10,30]
};
if(fromName==spName){
dataItem.effect.color='#ffda8a';
}else{
dataItem.effect.color='#ef4c3a';
}
res.push(dataItem);
}
//剔除有數據的連線
if(coneGeo[fromName]){
delete coneGeo[fromName];
}
if(coneGeo[toName]){
delete coneGeo[toName];
}
}
return {res:res,coneGeo:coneGeo};
}
var sData=this.deepClone(data.series[0].data);//深度複製
//排序
sData=this.sortData(sData);
//bg.src='images/bar_top2.png';
for(var j=0;j<sData.length;j++){
var tempD=sData[j];
/* tempD.itemStyle={
color:'rgba(128, 128, 128,0)'
};*/
switch(tempD.name){
case '仙遊縣':
tempD.itemStyle={
color: {
type: 'linear',
x: 0,
y: 0,
x2:0,
y2: 1,
colorStops: [{
offset: 0, color: '#07a7e0' // 0% 處的顏色
}, {
offset: 1, color: '#26cefe' // 100% 處的顏色
}],
globalCoord: false // 缺省爲 false
}
};
break;
case '荔城區':
tempD.itemStyle={
color:{
type: 'linear',
x: 0,
y: 0,
x2:0,
y2: 1,
colorStops: [{
offset: 0, color: '#10b4e9' // 0% 處的顏色
}, {
offset: 1, color: '#20c6f8' // 100% 處的顏色
}],
globalCoord: false // 缺省爲 false
}
};
break;
case '城廂區':
tempD.itemStyle={
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#0eb1e7' // 0% 處的顏色
}, {
offset: 1, color: '#21c8f9' // 100% 處的顏色
}],
globalCoord: false // 缺省爲 false
}
};
break;
case '秀嶼區':
tempD.itemStyle={
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#00a1da' // 0% 處的顏色
}, {
offset: 1, color: '#14b8ed' // 100% 處的顏色
}],
globalCoord: false // 缺省爲 false
}
};
break;
case '涵江區':
tempD.itemStyle={
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#17bcf0' // 0% 處的顏色
}, {
offset: 1, color: '#26ceff' // 100% 處的顏色
}],
globalCoord: false // 缺省爲 false
}
};
break;
case '莆田市':
tempD.itemStyle={
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#1348ac' // 0% 處的顏色
}, {
offset: 1, color: '#1650b3' // 100% 處的顏色
}],
globalCoord: false // 缺省爲 false
}
};
break;
case '福州市':
tempD.itemStyle={
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#144cb0' // 0% 處的顏色
}, {
offset: 1, color: '#1a5ec1' // 100% 處的顏色
}],
globalCoord: false // 缺省爲 false
}
};
break;
case '寧德市':
tempD.itemStyle={
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#1959bd' // 0% 處的顏色
}, {
offset: 1, color: '#1e6ace' // 100% 處的顏色
}],
globalCoord: false // 缺省爲 false
}
};
break;
case '南平市':
tempD.itemStyle={
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#1a5cbe' // 0% 處的顏色
}, {
offset: 1, color: '#2070d2' // 100% 處的顏色
}],
globalCoord: false // 缺省爲 false
}
};
break;
}
}
var maxValue=sData[0].value,maxSize=25,minSize= 5,
lineDataObj=coverLinesData(data.series[0].lines);
var resData=convertData(sData,geoCoordMap),resDataLabel=convertData(sData,geoCoordMap1),
lineData=lineDataObj.res,
noLineData=[];
coneGeo=lineDataObj.coneGeo;
//構造無數據lines
for(var key in coneGeo){
var fromCoord = geoCoordMap[spName];
var toCoord = geoCoordMap[key];
noLineData.push({
name:spName+'-'+key,
fromName:spName,
toName:key,
value:10,
coords:[fromCoord,toCoord],
effect:{
symbolSize: 0,
color:'rgba(255,255,255,0)'
}
});
}
lineData=lineData.concat(noLineData);
var curveness={//區縣曲線方向弧度
'涵江區':{fromcurveness:-0.4,tocurveness:0.4},
'仙遊縣':{fromcurveness:0.6,tocurveness:-0.6},
'城廂區':{fromcurveness:-0.25,tocurveness:0.25},
'北岸管委會':{fromcurveness:-0.2,tocurveness:0.2},
'湄洲島管委會':{fromcurveness:-0.25,tocurveness:0.25},
'荔城區':{fromcurveness:-0.35,tocurveness:-0.35},
'秀嶼區':{fromcurveness:-0.6,tocurveness:0.6}
};
for(var i=0;i<lineData.length;i++){
//線條處理
var tempD=lineData[i];
if(curveness[tempD.fromName]){
tempD.lineStyle={
curveness:curveness[tempD.fromName].fromcurveness
};
}
if(curveness[tempD.toName]){
tempD.lineStyle={
curveness:curveness[tempD.toName].tocurveness
};
}
}
var thisOption={
series:[
{
//標籤
data:resDataLabel,
symbolSize:1,
label:{
//offset:[40,40],
distance:50
},
animationDelay:1000,
animationDuration:1500
//zIndex
},
{
//點
data:resData,
symbolSize:function(value) {
var p = value[2] / maxValue, size;
size = p * maxSize;
if (size <= minSize) {
size = minSize;
}
return size
},
animationDelay:2000,
animationDuration:2000
},{
//圖形
data:sData,
left:0,
itemStyle:{
borderColor:'#097cac',
shadowColor: 'rgba(255, 255, 255, 1)',
shadowBlur: 10
}
},{
//線
type:'lines',
data:lineData,
effect: {
show: true,
delay:2000
},
animationDelay:1000,
animationDuration:1500
},{
//陰影
data:data.series[0].data
}
]
};
var mapOption=this.extendOption(defaultMapOption,thisOption);
return mapOption;
}
//獲得echarts實例
function echartSetOpt(id,opt){
var echartsInstance=echarts.init(document.getElementById(id));
echartsInstance.setOption(opt);
return echartsInstance;
},
//初始化地圖
function echartMapInit (id,data){
var opt =echartMapOpt(data);
var ins=echartSetOpt(id,opt);
var ids=$('#'+id).find('canvas'),cs=$('#'+id).find('canvas:last-child');
ids.css({
'transform':'rotateX(45deg)',
'transform-origin':'50% 50%',
'transform-style':'preserve-3d'
});
cs.css({
'transform':'rotateX(0deg)',
'transform-origin':'50% 60%',
'transform-style':'preserve-3d'
});
return ins;
}
//地圖數據 區域數據+連接線數據
var mapData={
series:[{
name:'地圖',
data:[
{name:'市直屬',value:2320},
{name:'城廂區',value:520},
{name:'荔城區',value:1600},
{name:'涵江區',value:1200},
{name:'仙遊縣',value:2235},
{name:'秀嶼區',value:2365},
{name:'北岸管委會',value:365},
{name:'湄洲島管委會',value:1365}
],
lines:[
{name:'市直屬-涵江區',fromName:'市直屬',toName:'涵江區',value:20},
{name:'荔城區-市直屬',fromName:'荔城區',toName:'市直屬',value:20},
{name:'仙遊縣-市直屬',fromName:'仙遊縣',toName:'市直屬',value:10}
]
}]
};
var map1;
//350300.json是地圖geojson數據
$.get('./javascript/map/350300.json', function (geoJson) {
//註冊地圖，用於配置中
echarts.registerMap('FZ', geoJson);
map1=echartMapInit('map1',mapData);
});
html:
<div class="map-chart" id="map1"></div>
<!-- map-chart設置div的高度寬度等樣式-->