echarts3 遷徙圖 遷入遷出
阿新 • • 發佈:2018-03-21
col 經緯度 each bte 名稱 ica type tex cti
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 };
echarts3 遷徙圖 遷入遷出