geoCoordMap ={‘上海‘: [121.4648,31.2891],‘佛山‘: [112.8955,23.1097],‘保定‘: [115.0488,39.0948],‘蘭州‘: [103.5901,36.3043],‘包頭‘: [110.3467,41.4899],‘北京‘: [116.4551,40.2539],‘天津‘: [117.4219,39.4189],‘常州‘: [119.4543,31.5582],‘廣州‘: [113.5107,23.2196],

};//航班線路

var BJData =[

[{name:‘北京‘,value:90}, {name:‘廣州‘,value:90}]

];//航班線路

var GZData =[

[ {name:‘廣州‘,value:90},{name:‘北京‘,value:90}]

];//箭頭的svg

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‘;//push進去航班線路開始-結束地點-經緯度

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]

});

}

}returnres;

};//航班顏色

var color = [‘#a6c84c‘, ‘#ffa022‘, ‘#46bee9‘];//航班數據

var series =[];//遍歷航班

[[‘廣州‘, GZData]].forEach(function(item, i) {//打印航班線路

console.log(convertData(item[1]))//配置

series.push({//系列名稱，用于tooltip的顯示

name: item[0] + ‘ Top10‘,

type:‘lines‘,//用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中

zlevel: 1,//出發到目的地 的白色尾巴線條

//線特效的配置

effect: {

show:true,//特效動畫的時間，單位為 s

period: 6,//特效尾跡的長度。取從 0 到 1 的值，數值越大尾跡越長

trailLength: 0.7,//特效標記的顏色

color: ‘#fff‘,//特效標記的大小

symbolSize: 3},//出發到目的地 的線條顏色

lineStyle: {

normal: {

color: color[i],

width:0,//fu度

curveness: 0.2}

},//開始到結束數據

data: convertData(item[1])//data:

},//出發地信息

{

name:‘廣州‘,

type:‘lines‘,

coordinateSystem:‘geo‘,

zlevel:2,

rippleEffect: {

brushType:‘stroke‘},

label: {

normal: {

show:true,

position:‘right‘,

formatter:‘{a}‘}

},

effect: {

show:true,

period:6,

trailLength:0,

symbol: planePath,

symbolSize:15},

lineStyle: {

normal: {

color: color[i],

width:1,

opacity:0.4,

curveness:0.2}

},

data: convertData(item[1])

},//目的地信息

{

name:‘北京‘,

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:‘#404a59‘,

title : {

text:‘北京到廣州‘,

subtext:‘可否顯示北京這個出發地點？‘,

left:‘center‘,

textStyle : {

color:‘#fff‘}

},

tooltip : {

trigger:‘item‘},

legend: {

orient:‘vertical‘,

top:‘bottom‘,

left:‘right‘,

data:[‘廣州 Top10‘],

textStyle: {

color:‘#fff‘},

selectedMode:‘single‘},

geo: {

map:‘china‘,//鼠標移入是否顯示省份

label: {

emphasis: {

show:true}

},

roam:true,

itemStyle: {

normal: {

areaColor:‘#323c48‘,

borderColor:‘#404a59‘},

emphasis: {

areaColor:‘#2a333d‘}

}

},

series: series

};

總結

以上是生活随笔為你收集整理的echarts 生成 迁徙图_echarts3 迁徙图 迁入迁出(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。