echarts 生成 迁徙图_Echarts世界级迁徙图

@media screen and (min-width: 767px) {

#main{height:800px;padding: 0 30px 0 30px;}

}

@media screen and (max-width: 767px) {

#main{height:200px;padding: 0px;}

}

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({

visualMap: {

min: 0,

max: 100,

text:['业务量(件)/年'],

realtime: false,

calculable: false,

color: ['orangered','yellow','lightskyblue'],

show:false,

padding:0,

},

series: [{

// 图标类型

type: 'map',

}]

});

// 指定图表的配置项和数据

var geoCoordMap = {

'阿富汗':[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]};

var ZGData = [

[{name:'中国'}, {name:'美国',value:95}],

[{name:'中国'}, {name:'也门',value:90}],

[{name:'中国'}, {name:'乌干达',value:80}],

[{name:'中国'}, {name:'泰国',value:70}],

];

// 小飞机图

var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

var convertData = function (data) {

var res = [];

for (var i = 0; i < data.length; i++) {

var dataItem = data[i];

var fromCoord = geoCoordMap[dataItem[0].name];

var toCoord = geoCoordMap[dataItem[1].name];

if (fromCoord && toCoord) {

res.push({

fromName: dataItem[0].name,

toName: dataItem[1].name,

coords: [fromCoord, toCoord]

});

}

}

return res;

};

// 颜色组 #a6c84c:浅绿;#ffa022:橙色;#46bee9:蓝色

var color = ['#a6c84c', '#ffa022', '#46bee9'];

var series = [];

[['中国',ZGData]].forEach(function (item, i) {

series.push({

name: item[0],

type: 'lines',

zlevel: 1,

effect: {

show: true,

period: 6,

trailLength: 0.7,

color: '#fff',

symbolSize: 3

},

lineStyle: {

normal: {

color: color[i],

width: 1,

curveness: 0.2

}

},

data: convertData(item[1])

},

{

// 飞机/线条

name: item[0],

type: 'lines',

zlevel: 2,

effect: {

show: true,

period: 6,

trailLength: 0,

symbol: planePath,

symbolSize: 15

},

lineStyle: {

normal: {

// 飞机及线条颜色

color: 'red',

// 线条粗细

width: 5,

// 线条透明度

opacity: 0.4,

curveness: 0.2

}

},

data: convertData(item[1])

},

{

// 标注点

name: item[0],

type: 'effectScatter',

coordinateSystem: 'geo',

zlevel: 2,

// rippleEffect: {

// brushType: 'stroke'

// },

// label: {

// normal: {

// show: true,

// position: 'right',

// formatter: '{b}'

// }

// },

symbolSize: function (val) {

return val[2] / 8;

},

// itemStyle: {

// normal: {

// color: color[i]

// }

// },

data: item[1].map(function (dataItem) {

return {

name: dataItem[1].name,

value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])

};

})

});

});

option = {

// 整个图标背景颜色

backgroundColor: '#aacef5',

title : {

// 图表标题

text: '业务范围',

// 副标题

subtext: '',

// 位置

left: 'center',

// 字体颜色

textStyle : {

color: '#fff'

}

},

// 提示

tooltip : {

trigger: 'item',

// 提示内容 出发地:{a};目的地:{b};坐标及数值:{c}

formatter: "{b}"

},

// 右下角按钮不同区域

// legend: {

// orient: 'vertical',

// top: 'bottom',

// left: 'right',

// data:['中国 Top10'],

// textStyle: {

// color: '#fff'

// },

// selectedMode: 'single'

// },

geo: {

// 地图范围 world or china

map: 'world',

label: {

emphasis: {

show: false

}

},

// 滚轮缩放

roam: false,

itemStyle: {

normal: {

// 地图区块颜色

areaColor: '#ffde7fa1',

// 地图区块描边色

borderColor: '#404a59'

},

emphasis: {

// 鼠标触碰色

areaColor: 'yellow'

}

}

},

series: series

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);