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
};
