第一步：安裝依賴包

1. npm install echarts --save
2. 在main.js 中全域性引入

   import echarts from 'echarts'
   Vue.prototype.$echarts = echarts
   

第二步：引入地圖檔案（此處路徑可以參照node_modules 資料夾裡的，echarts依賴包中具體路徑寫）
1.中國地圖 import "echarts/map/js/china.js";
2.省地圖 import "echarts/map/js/province/neimenggu.js";（注意map 需要從’china’改為中中文“內蒙古”）
3.市地圖 （npm 安裝的echarts 裡沒有市資料，如有人知道怎麼安裝可以留言指正我，目前我的解決方案是去github 下載市地圖資料包

import baotoushi from '../../../static/json/huhehaoteshi.json'

*注意：如果下載的json檔案放在本地不能正常載入，可能是因為 1. 程式碼格式不對 2.需要放在static 靜態資料夾中 3.初始化時地圖名字應該寫對應省的名字，如點選進入“包頭市”，那麼下面的name 需要設定為“內蒙古”
chart.setOption(option);
that.$echarts.registerMap(name, baotoushi);

第三步：初始化地圖
1.<div id="mapChart" ></div>
3. 在mounted鉤子中呼叫

mounted() {
    this.getMap();
  },

3.在data 中定義下面需要的引數，如mapList等
4. 在methods 中定義方法(裡面一些內容可以刪掉)

getMap() {
	 let mapOption = {
            title: "", //標題
            tooltip: { //此處是根據後端資料進行hover 展示的提示框，可用官網上預設的
              trigger: "item",
              formatter: function(params) {
                return params.name + " ( " + params.data.value[2] + " ) " + "</br>"
                       +"飛機" + " : " + params.data.aircraftNum + "</br>";
              }
            },
            legend: { //標籤
                orient: 'vertical',
                y: 'bottom',
                x:'right',
                data:['行蹤軌跡'],
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {//顏色軸，可以根據資料點的值大小，展示不同的顏色，或用來展示地圖塊的不同顏色
              min: 0,
              max: 200,
              calculable: true,
              inRange: {
                color: ["#3dda8e", "#eac736", "#d94e5d"]
              },
              textStyle: {
                color: "#fff"
              }
            },
            geo: {//配置地圖引數
              map: "china",
              label: {
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  areaColor: "#058bd2",
                  borderColor: "#111"
                },
                emphasis: {
                  areaColor: "#1e67b2"
                }
              }
            },
            series: [
              {//根據資料展示點，並顯示為波紋效果
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                //波紋效果
                rippleEffect: {
                    period: 2,
                    brushType: 'stroke',
                    scale: 3
                },
                label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                //圓點大小
                symbolSize: 16,
                data: convertData(data),
              }
            ]
          };
          //用$echarts是因為上面註冊使用的 Vue.prototype.$echarts
          let myChart = this.$echarts.init(document.getElementById('mapChart'));
          myChart.setOption(mapOption);
}
 

5. 如需跟後端互動，需請求展示資料的介面
   此處介面axios請求二次封裝過，請自行修改為適合自己專案的

export const getTrajectoryMapList = param => {
    return req.post('/joureny/getcity',param)
}

this.$api.getTrajectoryMapList(needData).then(res => {
        if (res.reCode == 0) {
          let keyMap = [];
          let data = [];
          res.data.forEach(item => {
            //城市和經緯度的陣列
            keyMap.push([item.city, [item.longitude, item.latitude]]);
            //滑鼠劃過顯示資訊的陣列
            data.push({
              name: item.city,
              value: item.number
            });
          });
          let geoCoordMap = new Map(keyMap);//此處為es6的map 語法，用來處理鍵值對
          let convertData = function(data) {//覆蓋點的樣式
            let res = [];
            for (let i = 0; i < data.length; i++) {
              let geoCoord = geoCoordMap.get(data[i].name);//es6map 語法
              if (geoCoord) {
                res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value),
                });
              }
            }
            return res;
          };
          this.getMap(); //此處呼叫地圖例項
         }
      })