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]
});
}
}
return res;
};
//航班颜色
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
};