vue+echarts实现地图航线

第一步：echarts的安装。

npm install echarts --save

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

// main.js 中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts // 全局注册 ECharts 组件

<template>
  <div id="app">
    <div id="mapBox" ref="mapBox" />
  </div>
</template>

<script>
// 导入中国地图的JS文件
import '@/assets/china'
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 = [
  [{ 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 = [
  [{ 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 = [
  [{ 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) {
      const result = []
      for (let i = 0; i < data.length; i++) {
        const fromcoords = geoCoordMap[data[i][0]['name']]
        const 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() {
      const 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')
      const 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)
    }
  }
}
</script>

<style scoped>
#mapBox {
  width: 500px;
  height: 400px;
}
</style>

// 导入中国地图的JS文件 import '@/assets/china'