echarts|vue和echarts实现地图航线 javascript|vue.js

vue和echarts实现地图航线效果图：

文章图片

第一步：echarts的安装。

npm install echarts --save

第二步：在vue项目中的main.js中进行导入echarts，放在其原型上方便利用。
main.js代码：

import Vue from 'vue' import App from './App.vue' const echarts = require("echarts") Vue.config.productionTip = false Vue.prototype.$echarts = echarts new Vue({ render: h => h(App), }).$mount('#app')

【echarts|vue和echarts实现地图航线】app.vue中的代码：

> //导入中国地图的JS文件 import './china.js' var geoCoordMap = { '上海': [121.4648,31.2891], '乌鲁木齐': [87.9236,43.5883], '兰州': [103.5901,36.3043], '北京': [116.4551,40.2539], '南京': [118.8062,31.9208], '南宁': [108.479,23.1152], '南昌': [116.0046,28.6633], '南通': [121.1023,32.1625], '厦门': [118.1689,24.6478], '合肥': [117.29,32.0581], '呼和浩特': [111.4124,40.4901], '咸阳': [108.4131,34.8706], '哈尔滨': [127.9688,45.368], '大连': [122.2229,39.4409], '天津': [117.4219,39.4189], '太原': [112.3352,37.9413], '威海': [121.9482,37.1393], '宁波': [121.5967,29.6466], '广州': [113.5107,23.2196], '成都': [103.9526,30.7617], '扬州': [119.4653,32.8162], '拉萨': [91.1865,30.1465], '昆明': [102.9199,25.4663], '杭州': [119.5313,29.8773], '株洲': [113.5327,27.0319], '武汉': [114.3896,30.6628], '汕头': [117.1692,23.3405], '沈阳': [123.1238,42.1216], '济南': [117.1582,36.8701], '济宁': [116.8286,35.3375], '海口': [110.3893,19.8516], '淮安': [118.927,33.4039], '深圳': [114.5435,22.5439], '温州': [120.498,27.8119], '烟台': [120.7397,37.5128], '珠海': [113.7305,22.1155], '石家庄': [114.4995,38.1006], '福州': [119.4543,25.9222], '秦皇岛': [119.2126,40.0232], '绍兴': [120.564,29.7565], '苏州': [120.6519,31.3989], '西宁': [101.4038,36.8207], '西安': [109.1162,34.2004], '贵阳': [106.6992,26.7682], '郑州': [113.4668,34.6234], '重庆': [107.7539,30.1904], '银川': [106.3586,38.1775], '长春': [125.8154,44.2584], '长沙': [113.0823,28.2568], '青岛': [120.4651,36.3373], }; var BJData = https://www.it610.com/article/[ [{name:'北京'}, {name:'深圳',value:71}], [{name:'北京'}, {name:'重庆',value:64}], [{name:'北京'}, {name:'广州',value:58}], [{name:'北京'}, {name:'长沙',value:29}], [{name:'北京'}, {name:'海口',value:28}], [{name:'北京'}, {name:'南京',value:25}], [{name:'北京'}, {name:'武汉',value:23}], [{name:'北京'}, {name:'南昌',value:23}], [{name:'北京'}, {name:'烟台',value:21}], [{name:'北京'}, {name:'温州',value:17}], [{name:'北京'}, {name:'沈阳',value:14}], [{name:'北京'}, {name:'西宁',value:13}], [{name:'北京'}, {name:'合肥',value:9}], [{name:'北京'}, {name:'呼和浩特',value:9}], [{name:'北京'}, {name:'南通',value:8}], [{name:'北京'}, {name:'乌鲁木齐',value:1}], [{name:'北京'}, {name:'兰州',value:15}]]; var SHData = https://www.it610.com/article/[ [{name:'上海'},{name:'深圳',value:136}], [{name:'上海'},{name:'北京',value:132}], [{name:'上海'},{name:'广州',value:117}], [{name:'上海'},{name:'厦门',value:65}], [{name:'上海'},{name:'哈尔滨',value:61}], [{name:'上海'},{name:'成都',value:59}], [{name:'上海'},{name:'大连',value:55}], [{name:'上海'},{name:'重庆',value:53}], [{name:'上海'},{name:'西安',value:49}], [{name:'上海'},{name:'沈阳',value:49}], [{name:'上海'},{name:'青岛',value:48}], [{name:'上海'},{name:'长春',value:47}], [{name:'上海'},{name:'长沙',value:32}], [{name:'上海'},{name:'天津',value:30}], [{name:'上海'},{name:'昆明',value:30}], [{name:'上海'},{name:'武汉',value:27}], [{name:'上海'},{name:'太原',value:24}], [{name:'上海'}, {name:'乌鲁木齐',value:4}], [{name:'上海'}, {name:'兰州',value:14}] ]; var GZData = https://www.it610.com/article/[ [{name:'广州'},{name:'上海',value:153}], [{name:'广州'},{name:'北京',value:138}], [{name:'广州'},{name:'杭州',value:104}], [{name:'广州'},{name:'成都',value:89}], [{name:'广州'},{name:'重庆',value:84}], [{name:'广州'},{name:'南京',value:75}], [{name:'广州'},{name:'昆明',value:62}], [{name:'广州'},{name:'西安',value:62}], [{name:'广州'},{name:'海口',value:58}], [{name:'广州'},{name:'郑州',value:51}], [{name:'广州'},{name:'武汉',value:49}], [{name:'广州'},{name:'天津',value:39}], [{name:'广州'},{name:'青岛',value:36}], [{name:'广州'},{name:'济南',value:35}], [{name:'广州'},{name:'宁波',value:34}], [{name:'广州'}, {name:'乌鲁木齐',value:23}], [{name:'广州'}, {name:'兰州',value:25}] ]; //航线上的飞机模型的矢量图 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'; export default { name: 'App', mounted() { this.initMap() }, methods: { //用于返回起点名字、终点名字、起点坐标、终点坐标 returnCoords(data) { let result = []; for(let i = 0; i < data.length; i++) { let fromcoords = geoCoordMap[data[i][0]["name"]]; let tocoords = geoCoordMap[data[i][1]["name"]]; result.push({ fromname: data[i][0]["name"], toname: data[i][1]["name"], coords: [fromcoords, tocoords], value: data[i][1]["value"] }) } return result }, //返回航线和飞机的颜色：三种颜色（起点为广州的、上海的、北京的） returnColor(index) { return index === 0 ? "#6beef4" : (index === 1 ? "#ecc021" : "#73fa3b") }, //初始化 initMap() { let series = []; [GZData, SHData, BJData].forEach((item, index) => { series.push({ type: "lines", //series.type = "lines"表名是想渲染模拟迁徙的模板 name: index === 0 ? "广州" : (index === 1 ? "上海" : "北京"), //鼠标hover到航线上去显示不同的内容 zlevel: index === 0 ? 0 : (index === 1 ? 1 : 2), //zleve控制飞机的图标的分层 effect: { show: true, symbol: planePath, //把矢量图planPath赋值给symbol symbolSize: 18 // 控制矢量图的大小 }, //线条的样式 lineStyle: { curveness: 0.2, //控制线条的弯曲度 color: this.returnColor(index),//不同的起点显示不同的线条样式 width: 3 //线条的宽度 }, data: this.returnCoords(item) //所有的航线起始地点的数据 }) }) this.myEcharts = this.$echarts.init(this.$refs.mapBox, "dark") let option = { title: { text: "中国航空航线图" //整个的标题 }, //geo用于显示地图坐标 geo: { map: "china", //导入的china.js，该文件中注册的china地图。 zoom: 1.2, //默认显示的缩放倍数 roam: true, //是否开启鼠标的缩放 scaleLimit: { //控制鼠标缩放的最小倍数，最大倍数 min: 1, max: 1 },label: { show: true, //控制省份名称的显示隐藏 offset: [0, 0], // 控制省份名称的偏移量 color: "white" // 省份名称的字体颜色 },//板块的颜色 itemStyle: { areaColor: '#3151f0', //每个板块的颜色 borderColor: '#404a59' //板块的边界颜色 }, //鼠标移入某板块的样式设置 emphasis: { //移入该板块时的板块颜色 itemStyle: { areaColor: 'red', }, //省份的名称颜色 label: { color: "white" } }, }, series: series, //显示的数据//鼠标hover到航线上显示数据 tooltip: { show: true, formatter: function (data){ //返回该航线的数据 return data.data.fromname + ">>>" + data.data.toname+"："+data.data.value } }, } this.myEcharts.setOption(option) } } } > #mapBox { width: 1200px; height: 800px; }