專案中需要顯示杭州餘杭區地圖，並且需要區分街道鄉鎮的行政邊界；

效果如下：

實現步驟：

1. 引入echarts （簡單，不知道的自行百度）

　　相關options配置說明，mapOption 是主要配置，seriesData 方法是用來組裝散點圖資料的，程式碼如下：

export const mapOption = {
  title: {
    text: '餘杭區',
    show: false
  },
  tooltip: {
    trigger: 'item',
    confine:true,
    position: 'top',
    formatter: (params) 
 
=> {
      return `<div style="padding:5px;"><span style="color:#FFF;font-size: 14px;">${params.data.name}</span><br /><span style="font-size: 12px;color:#7FC8EF;line-height:16px">物業公司 : ${params.data.companyName}<br />聯絡資訊 : ${params.data.connectMsg}</span></div>`;
    },
  },
  geo: {
    map: 
 
'yuhang',
    aspectScale: 1,   // 地圖寬高比
    width: '100%',
    left: '0',
    // roam: true,
    itemStyle: {
      areaColor: '#1B417D', // 地圖顏色
      borderColor: '#326DDD', // 邊框顏色
      borderWidth: 2, // 地圖描邊線寬
      shadowBlur: 10, // 設定陰影寬度
      shadowColor: 'rgba(255, 255, 255, .2)' // 設定陰影顏色
    },
    label: {
      show: 
 
true, // 高亮時不顯示標題
      color: '#0074B3'
    },
    emphasis: {
      label: {
        show: false // 高亮時不顯示標題
      },
      itemStyle: {
        areaColor: '#0074B3', // 高亮時顏色
        borderColor: '#0074B3' // 高亮時顏色
      }
    }
  },
  color: [/* 動態 */],
  legend: {
    right: 0,
    bottom: 30,
    show: false,
    data: [/* 動態 */],
    type: 'scroll',
    orient: 'vertical',
    textStyle: {
      color: '#fff'
    },
    formatter: function (name) {
      return name.split('&')[0].toString();
    }
  },
  series: [/* 動態 */]
};

export function seriesData() {
  return {
    type: 'effectScatter',
    name: '', /* 動態 */
    coordinateSystem: 'geo',
    legendHoverLink: true,
    data: [
      /* 動態 */
      { name: '1', value: [120.224326, 30.441409] }
    ],
    encode: {},
    // 點的大小
    symbolSize: function () {
      return 10;
    },
    // 何時顯示動效
    showEffectOn: 'render',
    // 設定動效效果
    rippleEffect: {
      brushType: 'fill',
      scale: 4
    },

    // 高亮的標籤和圖形樣式
    emphasis: {
      label: {

        show: false,
        formatter: (params) => {
          console.log(params);
          /*
          * "{a|這段文字採用樣式a}{b|這段文字採用樣式b}這段用預設樣式{x|這段用樣式x}"
          * */
          return `{a|${params.data.name}\n}{b|物業公司 : ${params.data.companyName}\n}{b|聯絡資訊 : ${params.data.connectMsg}\n}`;
        },
        rich: {
          a: {
            // backgroundColor: 'rgba(0,0,0,.5)',
            lineHeight: 24,
            color: '#FFF',
            fontSize: 14,
            padding: [10, 15],
          },
          b: {
            // backgroundColor: 'rgba(0,0,0,.5)',
            lineHeight: 20,
            // color: '#7FC8EF',
            color: '#FFF',
            padding: [10, 15],
          }
        }
      }
    },
    label: {
      formatter: '{b}',
      position: 'top',
      distance: 5, // 與圖形元素的距離
      show: false
    },

    itemStyle: {
      color: 'red', /* 動態 */
      shadowColor: 'red', /* 動態 */
      shadowBlur: 8
    }
  };
}

2. vue 檔案中初始化echarts並呼叫配置方法：

....
// mapoption 檔案儲存了第一步中的設定
import { mapOption, seriesData } from '../ecahrtsDataSet/mapOption';
.....

mounted() {
    // 這裡把按需載入的echarts放到了Vue原型上，yuhangMapJson 是自定義的地圖資料，registerMap方法的第一個引數'yuhang' 要和第一步option中geo.map 屬性相對應
    this.$echarts.registerMap('yuhang', yuhangMapJson);
    this.chartInstance = this.$echarts.init(document.getElementById('conteiner')); // 初始化例項並儲存，為資料請求完成後顯示散點圖
　　 this.setMapOption() // 呼叫第三步中methods中方法渲染地圖
},

3.設定散點圖資料，渲染地圖：

// 設定地圖及打點引數
    setMapOption() {
      mapOption.color = this.pointColor; // pointData 是散點圖資料結構 [{name:'xxx',value:'xxx'}]
      mapOption.series = this.pointData.reduce((res, cur, index) => {
        const itemData = seriesData();
        itemData.name = cur.name;
        itemData.data = [cur];
        itemData.itemStyle.color = this.pointColor[index];
        itemData.itemStyle.shadowColor = this.pointColor[index];
        res.push(itemData);
        return res;
      }, []);
      this.echartsOption = mapOption;
　　　 this.chartInstance.setOption(mapOption);
    }, 

至此地圖就出現在螢幕上了！！

在這個過程中最麻煩的就是獲取自定義的地圖 json 資料了，大致過程如下：

1.通過這個地址拿到杭州餘杭區地圖輪廓資料http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

2. 通過 bigMap 軟體拿到下級街道及鄉鎮的地圖輪廓資料，軟體下載地址：http://www.bigemap.com/reader/download/detail201802016.html

3.在這個網站上拼接鄉鎮街道json資料資料 ：http://geojson.io/#map=10/30.3628/120.0127

！！！ 也有簡單的方法，淘寶上有賣的，三十塊錢，我是出於一個不是很菜的前端的倔強沒有買，畢竟是工作，自己出錢覺得虧，報銷吧 30 不值得。

希望能幫助到個位小夥伴！

可私信交流，或者微信 wl1004516 ：