echarts 生成 迁徙图_echarts3 迁徙图 迁入迁出(示例代码)
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:‘‘}
},
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 迁徙图 迁入迁出(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue --- 2.0 编译的实现
- 下一篇： 代码整洁之道--程序员的职业素养