阴影实现方式是:
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的高度宽度等样式-->