Echarts 地图开发中需要实现地图阴影；
下图是一个失败的demo,真正需要的是为整个地图添加边框阴影而不是为每个区域添加
1.最简单的实现方法，用geo实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图样式</title>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="../echarts.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background: #000036;
}
#map_container{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="map_container"></div>
</div>
<script>
/*
* GEO实现阴影与边框
*/
$(function () {
var data_obj = {
'1000000': {
'map_data_all': [
{id: "110000", value: 2395274, name: "\u5317\u4eac\u5e02", "level": "1"}, {
id: "120000",
value: 1087242,
name: "\u5929\u6d25\u5e02",
"level": "1"
}, {id: "130000", value: 2405260, name: "\u6cb3\u5317\u7701", "level": "1"}, {
id: "140000",
value: 1160702,
name: "\u5c71\u897f\u7701",
"level": "1"
}, {id: "150000", value: 836075, name: "\u5185\u8499\u53e4\u81ea\u6cbb\u533a", "level": "1"}, {
id: "210000",
value: 2158982,
name: "\u8fbd\u5b81\u7701",
"level": "1"
}, {id: "220000", value: 995060, name: "\u5409\u6797\u7701", "level": "1"}, {
id: "230000",
value: 982917,
name: "\u9ed1\u9f99\u6c5f\u7701",
"level": "1"
}, {id: "310000", value: 3783735, name: "\u4e0a\u6d77\u5e02", "level": "1"}, {
id: "320000",
value: 6089455,
name: "\u6c5f\u82cf\u7701",
"level": "1"
}, {id: "330000", value: 4289162, name: "\u6d59\u6c5f\u7701", "level": "1"}, {
id: "340000",
value: 2145624,
name: "\u5b89\u5fbd\u7701",
"level": "1"
}, {id: "350000", value: 2007123, name: "\u798f\u5efa\u7701", "level": "1"}, {
id: "360000",
value: 1330358,
name: "\u6c5f\u897f\u7701",
"level": "1"
}, {id: "370000", value: 4959744, name: "\u5c71\u4e1c\u7701", "level": "1"}, {
id: "410000",
value: 2780641,
name: "\u6cb3\u5357\u7701",
"level": "1"
}, {id: "420000", value: 2237163, name: "\u6e56\u5317\u7701", "level": "1"}, {
id: "430000",
value: 1664850,
name: "\u6e56\u5357\u7701",
"level": "1"
}, {id: "440000", value: 7836737, name: "\u5e7f\u4e1c\u7701", "level": "1"}, {
id: "450000",
value: 1344085,
name: "\u5e7f\u897f\u58ee\u65cf\u81ea\u6cbb\u533a",
"level": "1"
}, {id: "460000", value: 522202, name: "\u6d77\u5357\u7701", "level": "1"}, {id: "500000", value: 1396810, name: "\u91cd\u5e86\u5e02", "level": "1"}, {
id: "510000",
value: 2740271,
name: "\u56db\u5ddd\u7701",
"level": "1"
}, {id: "520000", value: 1040494, name: "\u8d35\u5dde\u7701", "level": "1"}, {
id: "530000",
value: 1215803,
name: "\u4e91\u5357\u7701",
"level": "1"
}, {id: "540000", value: 99404, name: "\u897f\u85cf\u81ea\u6cbb\u533a", "level": "1"}, {
id: "610000",
value: 1504225,
name: "\u9655\u897f\u7701",
"level": "1"
}, {id: "620000", value: 786220, name: "\u7518\u8083\u7701", "level": "1"}, {id: "630000", value: 180966, name: "\u9752\u6d77\u7701", "level": "1"}, {
id: "640000",
value: 298887,
name: "\u5b81\u590f\u56de\u65cf\u81ea\u6cbb\u533a",
"level": "1"
}, {id: "650000", value: 760534, name: "\u65b0\u7586\u7ef4\u543e\u5c14\u81ea\u6cbb\u533a", "level": "1"}, {
id: "710000",
value: 0,
name: "\u53f0\u6e7e\u7701",
"level": "1"
}, {id: "810000", value: 0, name: "\u9999\u6e2f\u7279\u522b\u884c\u653f\u533a", "level": "1"}, {
id: "820000",
value: 0,
name: "\u6fb3\u95e8\u7279\u522b\u884c\u653f\u533a",
"level": "1"
}],
},
'110000': {
'map_data_all': [
{name: "朝阳区", value: 498208, id: 220104},
{name: "海淀区", value: 395226, id: 110108},
{name: "丰台区", value: 234487, id: 110106},
{name: "通州区", value: 114415, id: 320612},
{name: "昌平区", value: 105656, id: 110114},
{name: "东城区", value: 103707, id: 110101},
{name: "西城区", value: 101420, id: 110102},
{name: "大兴区", value: 85330, id: 110115},
{name: "房山区", value: 68722, id: 110111},
{name: "怀柔区", value: 63215, id: 110116},
{name: "顺义区", value: 59300, id: 110113},
{name: "密云区", value: 55098, id: 110228},
{name: "平谷区", value: 50744, id: 110117},
{name: "石景山区", value: 50115, id: 110107},
{name: "门头沟区", value: 36631, id: 110109},
{name: "延庆区", value: 17687, id: 110229}],
}
};
// 四分位
function count(data) {
var data = data.slice(0);
var markData = data.sort(function (a, b) {
return a - b;
}),
n = markData.length;
var index3,
//较小四分位数
//中位数（二分位）
Q3 = 0; //较大四分位数
var num3 = (3 * n + 1) / 4,
index3 = parseInt(num3);
if (n >= 2) {
//公式：a[3]+(a[4]-a[3])*小数位
Q3 = parseFloat(markData[index3 - 1]) + parseFloat((markData[index3] - markData[index3 - 1]) * (num3 - index3));
} else if (n == 1) {
Q3 = parseFloat(markData[0]);
}
console.log(Q3)
return {
Q3: Q3.toFixed(2),
max: n == 0 ? 0 : markData[n - 1]
}
}
var my_charts = echarts.init(document.getElementById('map_container'));
function drow_map(maptype,data){
$.getJSON('./ChinaJson/'+maptype+'.js', function (geoJson) {
var mapdata3 = [];
for (var key in data[maptype].map_data_all) {
var onedata = data[maptype].map_data_all[key];
var val = onedata['value'];
if (!val) {
val = ""
} else {
// val=val.replace(/^[1-9]\d*/i,'')
}
mapdata3.push(val);
}
my_charts.hideLoading();
echarts.registerMap(maptype, geoJson);
my_charts.setOption(
option = {
title: {
subtext: '全国企业分布',
},
tooltip: {
trigger: 'item',
formatter: function (params) {
console.log(params)
if ($.isArray(params.value)) {
// return ''
return params.name + ' : ' + params.value[params.value.length-1];//鼠标放上去显示value
} else {
return params.name + ' : ' + params.value;//鼠标放上去显示value
}
},
textStyle: {
color: '#fff'
}
},
visualMap: {
min: 0,
max: parseFloat(count(mapdata3).Q3),
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
// color: ['#0098EB', 'rgba(6,61,235,1)', '#0000AC'],
color: ['#16edff', '#a665f9', '#6865f9'],
},
textStyle: {
color: '#fff'
}
},
geo: {
map: maptype,
itemStyle: {
normal: {
borderColor: '#9757cf',
borderWidth: 6,
shadowColor: '#4a088b',
shadowOffsetX: '15',
shadowOffsetY: '30',
color: {
type: 'linear-gradient',
x: 0,
y: 30,
x2: 7,
y2: 0,
colorStops: [{
offset: 0,
color: '#4a088b' // 0% 处的颜色
}, {
offset: 1,
color: '#6908bf' // 50% 处的颜色
}],
global: true // 缺省为 false
},
},
emphasis: {
areaColor: '#070F4F'
}
},
zlevel: 2
},
series: [
{
type: 'map',
map: maptype,
tooltip: {
show: false
},
label: {
normal: {
show: false,
textStyle: {
color: '#fff',
fontSize: 14,
textBorderWidth: 1,
textBorderColor: '#000000',
textShadowColor: '#000',
textShadowBlur: 2,
}
},
emphasis: {
show: false,
textStyle: {
color: '#fff',
fontSize: 14,
textBorderWidth: 1,
textShadowColor: '#2732ff',
textShadowBlur: false,
}
}
},
roam: true,
itemStyle: {
normal: {
borderColor: '#D2FFFF',
borderWidth: 1.5,
},
emphasis: {
areaColor: 'rgb(111,81,248)'
}
},
zlevel: 4,
data: data[maptype].map_data_all
}
]
});
});
}
drow_map('1000000', data_obj)
});
</script>
</body>
</html>
实现效果：
下图就是上图的分解
2.我想要实现的最终效果是可以加阴影加边框，还能下钻三级（直接用geo就有点难了）
下面是加阴影后的一个效果图
将全国所有地区合并，就是一个图了，可以任意叠加地图，为每个地图添加边框阴影
最终实现类似这样的效果
1641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
