資料可視化前言：https://blog.csdn.net/diviner_s/article/details/115933789
專案最終效果圖：
此篇博客為自己學習pink老師的課后完成的專案的總結與記錄，僅供交流參考，著作權所有，轉載請標注原作者！
使用echarts技術做的可視圖，此外其專案包含 的技術有html、css、js、jquerry、ajax、websocket、koa等，
文章目錄
- 模擬航班飛行路線
- 資料預處理
- 1.地圖經緯度坐標存盤
- 2.路線規劃
- 3.定義converData陣列
- 特效設定
- option設定
模擬航班飛行路線
這個動態模擬飛行路線展示的是從鄭州去往其他城市的動態躍遷圖，
今天分享的是“反轉大地球”上面的模擬從鄭州去往其他地區的動態路線，是不是看著很nice！！！
資料預處理
坐標依附于一個自定義的Echarts圖層物件，也就是我們那個河南圖層，
引入這個檔案：
<script src="js/echarts-map-henan.js"></script>
1.地圖經緯度坐標存盤
首先在ECharts地圖的坐標需要我們存盤在一個geoCoord屬性里，它是一個JS的字典物件，由鍵／值對組成，鍵表示點的名稱，值則表達它的坐標，由經緯度組成，它是一個陣列，
var geoCoordMap = {
// 由鍵/值對組成：位置名稱/經緯度坐標
上海: [121.4648, 31.2891],
東莞: [113.8953, 22.901],
東營: [118.7073, 37.5513],
中山: [113.4229, 22.478],
臨汾: [111.4783, 36.1615],臨沂: [118.3118, 35.2936],丹東: [124.541, 40.4242],麗水: [119.5642, 28.1854],烏魯木齊: [87.9236, 43.5883],佛山: [112.8955, 23.1097],保定: [115.0488, 39.0948],蘭州: [103.5901, 36.3043],包頭: [110.3467, 41.4899],北京: [116.4551, 40.2539],北海: [109.314, 21.6211],南京: [118.8062, 31.9208],南寧: [108.479, 23.1152],南昌: [116.0046, 28.6633],南通: [121.1023, 32.1625],廈門: [118.1689, 24.6478],臺州: [121.1353, 28.6688],合肥: [117.29, 32.0581],呼和浩特: [111.4124, 40.4901],咸陽: [108.4131, 34.8706],哈爾濱: [127.9688, 45.368],唐山: [118.4766, 39.6826],嘉興: [120.9155, 30.6354],大同: [113.7854, 39.8035],大連: [122.2229, 39.4409],天津: [117.4219, 39.4189],太原: [112.3352, 37.9413],威海: [121.9482, 37.1393],寧波: [121.5967, 29.6466],寶雞: [107.1826, 34.3433],宿遷: [118.5535, 33.7775],常州: [119.4543, 31.5582],廣州: [113.5107, 23.2196],廊坊: [116.521, 39.0509],延安: [109.1052, 36.4252],張家口: [115.1477, 40.8527],徐州: [117.5208, 34.3268],德州: [116.6858, 37.2107],惠州: [114.6204, 23.1647],成都: [103.9526, 30.7617],揚州: [119.4653, 32.8162],承德: [117.5757, 41.4075],拉薩: [91.1865, 30.1465],無錫: [120.3442, 31.5527],日照: [119.2786, 35.5023],昆明: [102.9199, 25.4663],杭州: [119.5313, 29.8773],棗莊: [117.323, 34.8926],柳州: [109.3799, 24.9774],株洲: [113.5327, 27.0319],武漢: [114.3896, 30.6628],汕頭: [117.1692, 23.3405],江門: [112.6318, 22.1484],沈陽: [123.1238, 42.1216],滄州: [116.8286, 38.2104],河源: [114.917, 23.9722],泉州: [118.3228, 25.1147],泰安: [117.0264, 36.0516],泰州: [120.0586, 32.5525],濟南: [117.1582, 36.8701],濟寧: [116.8286, 35.3375],海口: [110.3893, 19.8516],淄博: [118.0371, 36.6064],淮安: [118.927, 33.4039],深圳: [114.5435, 22.5439],清遠: [112.9175, 24.3292],溫州: [120.498, 27.8119],渭南: [109.7864, 35.0299],湖州: [119.8608, 30.7782],湘潭: [112.5439, 27.7075],濱州: [117.8174, 37.4963],濰坊: [119.0918, 36.524],煙臺: [120.7397, 37.5128],玉溪: [101.9312, 23.8898],珠海: [113.7305, 22.1155],鹽城: [120.2234, 33.5577],盤錦: [121.9482, 41.0449],石家莊: [114.4995, 38.1006],福州: [119.4543, 25.9222],秦皇島: [119.2126, 40.0232],紹興: [120.564, 29.7565],聊城: [115.9167, 36.4032],肇慶: [112.1265, 23.5822],舟山: [122.2559, 30.2234],蘇州: [120.6519, 31.3989],萊蕪: [117.6526, 36.2714],菏澤: [115.6201, 35.2057],營口: [122.4316, 40.4297],葫蘆島: [120.1575, 40.578],衡水: [115.8838, 37.7161],衢州: [118.6853, 28.8666],西寧: [101.4038, 36.8207],西安: [109.1162, 34.2004],貴陽: [106.6992, 26.7682],連云港: [119.1248, 34.552],邢臺: [114.8071, 37.2821],邯鄲: [114.4775, 36.535],鄭州: [113.4668, 34.6234],鄂爾多斯: [108.9734, 39.2487],重慶: [107.7539, 30.1904],金華: [120.0037, 29.1028],銅川: [109.0393, 35.1947],銀川: [106.3586, 38.1775],鎮江: [119.4763, 31.9702],長春: [125.8154, 44.2584],長沙: [113.0823, 28.2568],長治: [112.8625, 36.4746],陽泉: [113.4778, 38.0951],青島: [120.4651, 36.3373],韶關: [113.7964, 24.7028],阿克蘇地區: [80.2671, 41.1749],安陽: [114.352482, 36.103442],鶴壁: [114.295444, 35.748236],濮陽: [115.041299, 35.768234],新鄉: [113.883991, 35.302616],焦作: [113.238266, 35.23904],濟源: [112.590047, 35.090378],三門峽: [111.194099, 34.777338],洛陽: [112.434468, 34.663041],鄭州: [113.665412, 34.757975],開封: [114.341447, 34.797049],商丘: [115.650497, 34.437054],許昌: [113.826063, 34.022956],平頂山: [113.307718, 33.735241],漯河: [114.026405, 33.575855],周口: [114.649653, 33.620357],南陽: [112.540918, 32.999082],駐馬店: [114.024736, 32.980169],信陽: [114.075031, 32.123274],
};
2.路線規劃
這里規劃的是畢業生從鄭州去往去其他城市作業的路線(虛擬資料)
陣列【起點—終點，人數】
//路線起點-終點，人數
var XAData = [
[{ name: "鄭州" }, { name: "鄭州", value: 79 }],
[{ name: "鄭州" }, { name: "洛陽", value: 6 }],
[{ name: "鄭州" }, { name: "周口", value: 14 }],
[{ name: "鄭州" }, { name: "安陽", value: 10 }],
[{ name: "鄭州" }, { name: "駐馬店", value: 3 }],
[{ name: "鄭州" }, { name: "新鄉", value: 11 }],
[{ name: "鄭州" }, { name: "鶴壁", value: 15 }],
[{ name: "鄭州" }, { name: "開封", value: 3 }],
[{ name: "鄭州" }, { name: "平頂山", value: 12 }],
[{ name: "鄭州" }, { name: "商丘", value: 2 }],
[{ name: "鄭州" }, { name: "信陽", value: 6 }],
[{ name: "鄭州" }, { name: "許昌", value: 21 }],
[{ name: "鄭州" }, { name: "焦作", value: 11 }],
[{ name: "鄭州" }, { name: "北京", value: 2 }],
[{ name: "鄭州" }, { name: "杭州", value: 23 }],
[{ name: "鄭州" }, { name: "廈門", value: 1 }],
[{ name: "鄭州" }, { name: "蘇州", value: 12 }],
[{ name: "鄭州" }, { name: "武漢", value: 8 }],
[{ name: "鄭州" }, { name: "重慶", value: 14 }],
[{ name: "鄭州" }, { name: "上海", value: 22 }],
[{ name: "鄭州" }, { name: "深圳", value: 18 }],
[{ name: "鄭州" }, { name: "惠州", value: 4 }]
];
3.定義converData陣列
注意：這里是將路線規劃中的地點名稱轉化為經緯度存盤在陣列里【經緯度在地圖經緯度陣列里鍵值對尋找，通過鍵找到值】
// 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) { //當經緯度都有時，將鍵值對push進res陣列中
res.push({
fromName: dataItem[0].name,//出發地點名
toName: dataItem[1].name,//目標地點名
coords: [fromCoord, toCoord],//將出發點經緯度，目標點經緯度存放在coords陣列中
value: dataItem[1].value//存value值
});
//res陣列格式[[{fromName: "鄭州"}, {toName: "鄭州"}, {coords: [[113.665412, 34.757975],[113.665412, 34.757975]]}, {value: 79}],[...],...]
}
}
return res;
};
特效設定
上面的路線具體是由三層分布：
-
紅線動態特效
-
箭頭移動特效
-
坐標點特效(漣漪效果)
看代碼圖：
整體效果：
對于這三層我們需要使用zlevel函式配置分層，下方代碼有注釋，
上js代碼，不懂配置函式看后面標注！
//箭頭樣式
var planePath =
"path://M482.73408 403.02592a40.96 40.96 0 0 1 59.71968-1.90464l144.81408 144.7936a40.96 40.96 0 1 1-57.91744 57.9584l-115.79392-115.8144-115.95776 115.95776a40.96 40.96 0 0 1-57.91744-57.93792l143.0528-143.0528z";
//var planePath = 'arrow';
var color = ["#a6c84c", "#ffa022", "#46bee9"]; //航線的顏色
var series = [];
[
["鄭州", XAData]
].forEach(function (item, i) {
console.log(item[0])
series.push(
{//紅線動態特效
name: item[0] + " Top1",//此時item[0]存盤的是鄭州,即此時name為“鄭州Top1”
type: "lines",
zlevel: 1, //zlevel用于Canvas分層，不同的zlevel值的圖形會放置在不同的Canvas中，值大的在值小的上面，
effect: {
show: true,//是否展示特效
period: 6,//影片的周期，秒數，
trailLength: 0.7,//特效尾跡的長度，取從 0 到 1 的值，數值越大尾跡越長，
color: "red", //arrow箭頭的顏色
symbolSize: 3//線兩端的標記大小，可以是一個陣列分別指定兩端，也可以是單個統一指定
},
lineStyle: {
normal: {
color: color[i],
width: 0,// 飛行路線寬度
curveness: 0.2//邊的曲度，支持從 0 到 1 的值，值越大曲度越大，
}
},
data: convertData(item[1])
},
{//箭頭移動動態路線
name: item[0] + " Top2",
type: "lines",
zlevel: 2,//同上
symbol: ["none", "arrow"],//圖元的圖形類別
symbolSize: 10,
effect: {
show: true,//是否展示特效
period: 6,//影片的周期，秒數，
trailLength: 0,//特效尾跡的長度，取從 0 到 1 的值，數值越大尾跡越長，
symbol: planePath,//箭頭的樣式，前面有定義，
symbolSize: 11//這里指箭頭大小，
},
lineStyle: {
normal: {
color: color[i],
width: 1,// 飛行路線寬度
opacity: 0.6,
curveness: 0.2//邊的曲度，支持從 0 到 1 的值，值越大曲度越大，
}
},
data: convertData(item[1])
},
{//坐標點特效設定
name: item[0] + " Top3",
type: "effectScatter",//帶有漣漪特效影片的氣泡圖
coordinateSystem: "geo",//使用地理坐標系
zlevel: 2,//控制圖層前后顯示，值大的在值小的上面（覆寫式 ），
rippleEffect: {//漣漪特效相關配置，
brushType: "stroke"//設定為波紋式特效
},
label: {
normal: {
show: false,
position: "right",
formatter: "{b}"
}
},
symbolSize: function (val) {
return 10;
},
itemStyle: {
normal: {
color: color[i]
},
emphasis: {
areaColor: "#2B91B7"
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
}
);
});
option設定
var myChart = echarts.init(document.querySelector(".map .chart"));
var option = {
tooltip: {//當滑鼠放航線上提示框的顯示
trigger: "item",
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return "城市：" + params.data.name + "<br />人數：" + params.data.value[2];
} else if (params.seriesType == "lines") {
return (
params.data.fromName + "---->" + params.data.toName +
"<br />人數：" + params.data.value
);
} else {
return params.name;
}
}
},
legend: {//右下角圖例組件設定
orient: "vertical",//圖例串列的布區域向
top: "bottom",
left: "right",
data: ["鄭州 Top1"],
textStyle: {
color: "#fff"
},
selectedMode: "multiple"
},
geo: {
map: "henan",//這里使用的echarts庫河南圖層！
label: {
// emphasis: {
show: true,
color: "#fff"
// }
},
// 把河南地圖放大了1.2倍
zoom: 1.2,
roam: true,
// 是否開啟滑鼠縮放和平移漫游，默認不開啟，如果只想要開啟縮放或者平移，可以設定成 'scale' 或者 'move'，設定成 true 為都開啟
itemStyle: {
normal: {
// 地圖省份的背景顏色
areaColor: "rgba(20, 41, 87,0.6)",
borderColor: "#195BB9",
borderWidth: 1
},
emphasis: {//對應的滑鼠懸浮效果
areaColor: "#2B91B7"
}
}
},
series: series//前方series陣列已經配置好
};
myChart.setOption(option);
每條路線的都有起始點，type 為 lines，然后增加effect屬性增加運動效果，思路是通過螢屏坐標轉換實作的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/286261.html
標籤：其他