js代碼：
function getAttackMapChart(){
var success = function(o){
var geoCoordMap = {'上海': [121.48,31.22],'阿富汗':[67.709953,33.93911],'安哥拉':[17.873887,-11.202692],'阿爾巴尼亞':[20.168331,41.153332],'阿聯酋':[53.847818,23.424076],'阿根廷':[-63.61667199999999,-38.416097],'亞美尼亞':[45.038189,40.069099],'法屬南半球和南極領地':[69.348557,-49.280366],'澳大利亞':[133.775136,-25.274398],'奧地利':[14.550072,47.516231],'阿塞拜疆':[47.576927,40.143105],'布隆迪':[29.918886,-3.373056],'比利時':[4.469936,50.503887],'貝寧':[2.315834,9.30769],'布基納法索':[-1.561593,12.238333],'孟加拉國':[90.356331,23.684994],'保加利亞':[25.48583,42.733883],'巴哈馬':[-77.39627999999999,25.03428],'波斯尼亞和黑塞哥維那':[17.679076,43.915886],'白俄羅斯':[27.953389,53.709807],'伯利茲':[-88.49765,17.189877],'百慕大':[-64.7505,32.3078],'玻利維亞':[-63.58865299999999,-16.290154],'巴西':[-51.92528,-14.235004],'文萊':[114.727669,4.535277],'不丹':[90.433601,27.514162],'博茨瓦納':[24.684866,-22.328474],'中非共和國':[20.939444,6.611110999999999],'加拿大':[-106.346771,56.130366],'瑞士':[8.227511999999999,46.818188],'智利':[-71.542969,-35.675147],'中國':[104.195397,35.86166],'象牙海岸':[-5.547079999999999,7.539988999999999],'喀麥隆':[12.354722,7.369721999999999],'剛果民主共和國':[21.758664,-4.038333],'剛果共和國':[15.827659,-0.228021],'哥倫比亞':[-74.297333,4.570868],'哥斯達黎加':[-83.753428,9.748916999999999],'古巴':[-77.781167,21.521757],'北塞浦路斯':[33.429859,35.126413],'塞浦路斯':[33.429859,35.126413],'捷克共和國':[15.472962,49.81749199999999],'德國':[10.451526,51.165691],'吉布提':[42.590275,11.825138],'丹麥':[9.501785,56.26392],'多明尼加共和國':[-70.162651,18.735693],'阿爾及利亞':[1.659626,28.033886],'厄瓜多爾':[-78.18340599999999,-1.831239],'埃及':[30.802498,26.820553],'厄立特里亞':[39.782334,15.179384],'西班牙':[-3.74922,40.46366700000001],'愛沙尼亞':[25.013607,58.595272],'埃塞俄比亞':[40.489673,9.145000000000001],'芬蘭':[25.748151,61.92410999999999],'斐':[178.065032,-17.713371],'福克蘭羣島':[-59.523613,-51.796253],'法國':[2.213749,46.227638],'加蓬':[11.609444,-0.803689],'英國':[-3.435973,55.378051],'格魯吉亞':[-82.9000751,32.1656221],'加納':[-1.023194,7.946527],'幾內亞':[-9.696645,9.945587],'岡比亞':[-15.310139,13.443182],'幾內亞比紹':[-15.180413,11.803749],'赤道幾內亞':[10.267895,1.650801],'希臘':[21.824312,39.074208],'格陵蘭':[-42.604303,71.706936],'危地馬拉':[-90.23075899999999,15.783471],'法屬圭亞那':[-53.125782,3.933889],'圭亞那':[-58.93018,4.860416],'洪都拉斯':[-86.241905,15.199999],'克羅地亞':[15.2,45.1],'海地':[-72.285215,18.971187],'匈牙利':[19.503304,47.162494],'印尼':[113.921327,-0.789275],'印度':[78.96288,20.593684],'愛爾蘭':[-8.24389,53.41291],'伊朗':[53.688046,32.427908],'伊拉克':[43.679291,33.223191],'冰島':[-19.020835,64.963051],'以色列':[34.851612,31.046051],'意大利':[12.56738,41.87194],'牙買加':[-77.297508,18.109581],'約旦':[36.238414,30.585164],'日本':[138.252924,36.204824],'哈薩克斯坦':[66.923684,48.019573],'肯尼亞':[37.906193,-0.023559],'吉爾吉斯斯坦':[74.766098,41.20438],'柬埔寨':[104.990963,12.565679],'韓國':[127.766922,35.907757],'科索沃':[20.902977,42.6026359],'科威特':[47.481766,29.31166],'老撾':[102.495496,19.85627],'黎巴嫩':[35.862285,33.854721],'利比里亞':[-9.429499000000002,6.428055],'利比亞':[17.228331,26.3351],'斯里蘭卡':[80.77179699999999,7.873053999999999],'萊索托':[28.233608,-29.609988],'立陶宛':[23.881275,55.169438],'盧森堡':[6.129582999999999,49.815273],'拉脫維亞':[24.603189,56.879635],'摩洛哥':[-7.092619999999999,31.791702],'摩爾多瓦':[28.369885,47.411631],'馬達加斯加':[46.869107,-18.766947],'墨西哥':[-102.552784,23.634501],'馬其頓':[21.745275,41.608635],'馬裏':[-3.996166,17.570692],'緬甸':[95.956223,21.913965],'黑山':[19.37439,42.708678],'蒙古':[103.846656,46.862496],'莫桑比克':[35.529562,-18.665695],'毛里塔尼亞':[-10.940835,21.00789],'馬拉維':[34.301525,-13.254308],'馬來西亞':[101.975766,4.210484],'納米比亞':[18.49041,-22.95764],'新喀里多尼亞':[165.618042,-20.904305],'尼日爾':[8.081666,17.607789],'尼日利亞':[8.675277,9.081999],'尼加拉瓜':[-85.207229,12.865416],'荷蘭':[5.291265999999999,52.132633],'挪威':[8.468945999999999,60.47202399999999],'尼泊爾':[84.12400799999999,28.394857],'新西蘭':[174.885971,-40.900557],'阿曼':[55.923255,21.512583],'巴基斯坦':[69.34511599999999,30.375321],'巴拿馬':[-80.782127,8.537981],'祕魯':[-75.015152,-9.189967],'菲律賓':[121.774017,12.879721],'巴布亞新幾內亞':[143.95555,-6.314992999999999],'波蘭':[19.145136,51.919438],'波多黎各':[-66.590149,18.220833],'北朝鮮':[127.510093,40.339852],'葡萄牙':[-8.224454,39.39987199999999],'巴拉圭':[-58.443832,-23.442503],'卡塔爾':[51.183884,25.354826],'羅馬尼亞':[24.96676,45.943161],'俄羅斯':[105.318756,61.52401],'盧旺達':[29.873888,-1.940278],'西撒哈拉':[-12.885834,24.215527],'沙特阿拉伯':[45.079162,23.885942],'蘇丹':[30.217636,12.862807],'南蘇丹':[31.3069788,6.876991899999999],'塞內加爾':[-14.452362,14.497401],'所羅門羣島':[160.156194,-9.64571],'塞拉利昂':[-11.779889,8.460555],'薩爾瓦多':[-88.89653,13.794185],'索馬里蘭':[46.8252838,9.411743399999999],'索馬里':[46.199616,5.152149],'塞爾維亞共和國':[21.005859,44.016521],'蘇里南':[-56.027783,3.919305],'斯洛伐克':[19.699024,48.669026],'斯洛文尼亞':[14.995463,46.151241],'瑞典':[18.643501,60.12816100000001],'斯威士蘭':[31.465866,-26.522503],'敘利亞':[38.996815,34.80207499999999],'乍得':[18.732207,15.454166],'多哥':[0.824782,8.619543],'泰國':[100.992541,15.870032],'塔吉克斯坦':[71.276093,38.861034],'土庫曼斯坦':[59.556278,38.969719],'東帝汶':[125.727539,-8.874217],'特里尼達和多巴哥':[-61.222503,10.691803],'突尼斯':[9.537499,33.886917],'土耳其':[35.243322,38.963745],'坦桑尼亞聯合共和國':[34.888822,-6.369028],'烏干達':[32.290275,1.373333],'烏克蘭':[31.16558,48.379433],'烏拉圭':[-55.765835,-32.522779],'美國':[-95.712891,37.09024],'烏茲別克斯坦':[64.585262,41.377491],'委內瑞拉':[-66.58973,6.42375],'越南':[108.277199,14.058324],'瓦努阿圖':[166.959158,-15.376706],'西岸':[35.3027226,31.9465703],'也門':[48.516388,15.552727],'南非':[22.937506,-30.559482],'贊比亞':[27.849332,-13.133897],'津巴布韋':[29.154857,-19.015438]};
o = '"["俄羅斯","巴西","日本","泰國","美國","菲律賓","韓國"]';
var json = eval(o);
console.info("地區 " + json);
/*
記錄下起點城市和終點城市的名稱，以及權重
數組第一位爲終點城市，數組第二位爲起點城市，以及該城市的權重，就是圖上圓圈的大小
*/
var SHData = [];
// SHData = json;
var obj1 = {name: '上海'};
for(var i = 0; i < json.length; i++){
SHData[i] = new Array();
var obj = {name: json[i]};
SHData[i][0] = obj1;
SHData[i][1] = obj;
}
// var SHData = jsonObj;
var SHData1 = [
[{name: '上海'}, {name: "芬蘭"}],
[{name: '上海'}, {name: "德國"}],
[{name: '上海'}, {name: "英國"}],
[{name: '上海'}, {name: "加拿大"}],
[{name: '上海'}, {name: "美國"}],
[{name: '上海'}, {name: "澳大利亞"}],
[{name: '上海'}, {name: "瑞士",value: 30}],
[{name: '上海'}, {name: "日本",value: 30}],
[{name: '上海'}, {name: "印度",value: 30}],
[{name: '上海'}, {name: "東南亞",value: 30}]
];
console.info("SHData1 "+SHData1);
console.info("SHData "+SHData);
var convertData = function(data) {
var res = [];
for(var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[1].name];
var toCoord = geoCoordMap[dataItem[0].name];
if(fromCoord && toCoord) {
res.push([fromCoord, toCoord])
}
}
return res;
}
var series = [];// 3D飛線
var dser = []; // 2D散點座標
[['上海', SHData]].forEach(function(item, i) {
dser.push({
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
brushType: 'stroke'
},
label: {
fontSize:24,
show: true,
position: 'right',
formatter: '{b}'
},
itemStyle: {
normal: {
color: '#f5f802'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name],
// symbolSize: dataItem[1].value / 4
symbolSize: 5
};
})
},{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'left',
fontSize:18,
formatter: '{b}'
}
},
itemStyle: {
normal: {
color: '#ff0000'
}
},
data: [{
name: item[0],
value: geoCoordMap[item[0]],
symbolSize:parseInt(Math.random()*20+10),
label: {
normal: {
position: 'right'
}
}
}]
})
series.push({
type: 'lines3D',
/*effect: {
show: true,
period: 3,//速度
trailOpacity: 0.5,
trailLength: 0.3//尾部陰影
},
lineStyle: {//航線的視圖效果
color: '#3E3A9A',
width: 3,
opacity: 0.6
},*/
effect: {
show: true,
trailWidth: 3,
trailLength: 0.15,
trailOpacity: 1,
trailColor: 'rgb(30, 30, 60)'
},
lineStyle: {
width: 2,
color: 'rgb(50, 50, 150)',
// color: 'rgb(118, 233, 241)',
opacity: 0.5
},
blendMode: 'lighter',
data: convertData(item[1])// 特效的起始、終點位置，一個二維數組，相當於coords: convertData(item[1])
})
});
var canvas = document.createElement('canvas');
var myChart = echarts.init(canvas, null, {
width: 4096,
height: 2048
});
myChart.setOption({
backgroundColor: 'rgba(6,15,34,0.8)',
title: {
show:true
},
geo: {
roam: false,
type: 'map',
map: 'world',
left:0,
top:0,
right: 0,
bottom: 0,
boundingCoords: [[-180, 90], [180, -90]],
zoom:0,
itemStyle: {
borderColor:'#000d2d',
normal: {
areaColor: '#124A68',
borderColor:'rbg(0,45,108)'
},
emphasis: {
areaColor: '#357cf8'
}
},
label:{
fontSize:24
}
},
roam: false,
series:dser
});
var option = {
backgroundColor: 'rgba(0,0,0,0)',//canvas的背景顏色
globe: {
baseTexture:myChart,
top: '5%',
left: '1%',
displacementScale: 0,
environment:'none',
shading: 'color',
viewControl: {
distance:155,
autoRotate: false
}
},
roam: false,
series:series
};
echarts.init(document.getElementById("earth_map")).setOption(option, true);
}
$.baseAjax('ScmSecurity!getAttackLocation.action', 'POST', null, success, null);
}
html代碼：
<div id="earth_map"></div>
<script src="browse/js/lib/echarts/echarts-4.2.min.js"></script>
<script src="browse/js/lib/echarts/echarts-gl.min.js"></script>
<script src="browse/js/lib/echarts/world.js"></script>
css樣式：
#earth_map {
background-color: rgba(6, 11, 30,0.5);
height: 100%;
width: 760px;
display: inline-block;
float: right;
margin-right: 140px;
}
實現效果：
