Vue中使用echarts@4.x中國地圖及AMap相關API的使用

一、此 demo 實現的基本功能

• 中國地圖的顯示
• 地圖點擊下鑽的功能
• 地圖相關組件的使用，例 tooltip...

二、實現思路

初始使用下載本地的中國 geo 格式的 json 數據來繪制地圖，點擊某一區划（例：山東省）時，以點擊的區划名稱使用 AMap.DistrictSearch(opts) 構造函數查詢下一級的區划信息（例：青島市區划 id 為 370200）和業務數據整合處理；然后以點擊的區划 id 用AMapUI中的組件DistrictExplorer相關方法獲取下一級的地圖 json 數據，繼而繪制下一級地圖（例：青島市），再點下同...

三、引入 echarts

因為 echarts 在 5.0 及之后版本因 包體積優化和法規規定 取消了內置 json 地圖數據，但仍然可以下載之前版本的依賴包來使用或下載曾經內置的地圖數據。

若要引地圖 json 數據，建議下載 echarts@4.9.0 ，這是 echarts 取消內置前的最新版本地圖 json 數據，之前的版本地圖數據比如 3.x，2.x 或多或少在地圖邊界和島嶼精度部分有所不准，親測~

1. 通過 npm 方式下載 echarts

$ npm i echarts@4.9.0

2. 引入 echarts

import echarts from 'echarts'

3. 相關 api 說明

1. echarts.registerMap

echarts 方法：在 echarts 5.0 及之后版本取消了registerMap 此方法，所以最新 echarts（v5.2.2）版本引用會報錯，所以這里我使用 v4.9.0 來注冊地圖。

// registerMap 接收兩個參數
// 第一個是地圖名稱，china 為顯示右下角南海諸島，china1 則不顯示右下角南海諸島
// 第二個參數是繪制地圖所需的json數據，在這里我下載了兩個版本的json數據放在本地引用來使用，見下文

echarts.registerMap('china', chinaJson)

2. echarts.init

echarts 方法：創建一個 ECharts 實例，返回 echartsInstance，不能在單個容器上初始化多個 ECharts 實例

// 創建實例，接收三個參數
// 參數dom：實例容器，一般是一個具有高寬的div元素
// 參數theme：可選，應用的主題。可以是一個主題的配置對象
// 參數opts：可選，附加參數

this.myChart = echarts.init(dom, theme, opts)

3. echartsInstance.on

實例方法：綁定事件處理函數（對應 off：解綁事件處理函數）

// 創建實例，接收三個參數
// 參數eventName：事件名稱，全小寫，例如'click'，'mousemove', 'legendselected'
// 參數query：可選，過濾條件，能夠只在指定的組件或者元素上進行響應。可為 string 或者 Object
// 參數handler：事件處理函數

this.myChart.on(eventName, query, handler)

4. echartsInstance.setOption

實例方法：設置圖表實例的配置項以及數據，萬能接口，所有參數和數據的修改都可以通過 setOption 完成，ECharts 會合並新的參數和數據，然后刷新圖表。

配置項部分用法見下文五、echarts 部分配置項。官方配置項手冊

// 參數 option：配置項

this.myChart.setOption(option)

四、AMap 相關 api 使用說明

1. 引入 AMap

<!-- html文件 -->

<!--引入高德地圖JSAPI，key值是在AMap官方申請的哦，plugin是項目中用到的插件 -->
<script src="//webapi.amap.com/maps?v=2.0&key=bb36205e1ab4869979c6505a3cc362ee&plugin=AMap.DistrictSearch"></script>

<!--引入UI組件庫（1.1版本） -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>

2. AMap.DistrictSearch(opt)

插件，行政區查詢服務，提供行政區相關信息。官方文檔

/** 
參數opts：對象，實例時的配置
opts：{
  level: String, 關鍵字對應的行政區級別或商圈，可選值
  showbiz: Boolean, 是否顯示商圈，默認值true
  extensions: String，是否返回行政區邊界坐標點。默認值：base，不返回行政區邊界坐標點，取值：all，返回完整行政區邊界坐標點
  subdistrict：Number，默認1，顯示下級行政區級數（行政區級別包括：國家、省/直轄市、市、區/縣4個級別），商圈為區/縣下一級。0不返回下一級區划，1返回下一級區划，2...，3...。
}
**/

const districtSearch = new AMap.DistrictSearch(opts)
// 根據關鍵字查詢行政區或商圈信息 關鍵字支持：行政區名、citycode、adcode、商圈名，默認值：“全國”
districtSearch.search(obj.data.name, (status, result) => {
  console.log('加載區划信息', status, result)
})

3. DistrictExplorer

加載繪制地圖所需的 geo 格式的 json 數據。（行政區划瀏覽） 提供了全國范圍內到區縣一級的行政區划數據（含邊界），同時提供一些輔助功能，比如區划面繪制、事件監聽，以及快速判斷經緯度所屬的子級區划等。官方文檔

// 使用

AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
  let districtExplorer = new DistrictExplorer({
    eventSupport: true, // 打開事件支持
    map: null, // 地圖對象實例。僅僅獲取數據，不涉及地圖相關的操作時，可以不設置
  })
  districtExplorer.loadAreaNode(obj.data.cityCode, (error, areaNode) => {
    if (error) return
    const mapJson = {}
    // 返回該區域中全部的子級區划Feature數組
    mapJson.features = areaNode.getSubFeatures() || []
    console.log('繪制地圖所需的json數據', mapJson)
  })
})

五、echarts 部分配置項

const option = {
  visualMap: {
    // 視覺映射組件配置
    type: 'continuous', // 定義為連續型 visualMap
    show: true,
    bottom: '5%',
    left: '2%',
    text: ['高', '低'], // 兩端的文本
    min: 0, // 指定 visualMapContinuous 組件的允許的最小值
    max: 100, // 指定 visualMapContinuous 組件的允許的最大值
    inRange: {
      // 定義 在選中范圍中 的視覺元素
      color: ['#fff', '#A0CFFF', '#409EFF'], // 圖元的顏色
    },
    calculable: true, // 是否顯示拖拽用的手柄（手柄能拖拽調整選中范圍）
  },
  tooltip: {
    // 提示框組件
    trigger: 'item',
    formatter: function (item) {
      if (item.name == '南海諸島') {
        return ''
      } else {
        return item.name + '<br>業務數據：' + (item.value || 0) + ' 個'
      }
    },
  },
  series: [
    // 系列列表。每個系列通過 type 決定自己的圖表類型
    {
      type: 'map', // 系列列表。每個系列通過 type 決定自己的圖表類型
      map: 'china', // 地圖。china 為中國全國地圖+右下角南海諸島，china1 為中國全國地圖
      name: '業務數據', // 系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列
      aspectScale: 0.75, // 用於 scale 地圖的長寬比
      zoom: 1.2, // 地圖縮放多少倍
      roam: true, // 允許縮放和平移
      mapType: '自定義地圖',
      selectedMode: 'single', // 點擊區域，會處於選中狀態，single單選
      showLegendSymbol: false, // 在圖例相應區域顯示圖例的顏色標識（系列標識的小圓點），存在 legend 組件時生效
      // center: [100.97, 35.71], // 初始化時的地圖位置，可通過改變地圖中心視角的經緯度來實現地圖的平移
      itemStyle: {
        // 地圖區域的多邊形圖形樣式
        normal: {
          // 正常時的樣式
          color: '#ccc', // 圖形的顏色
          borderColor: '#303133', // 圖形的描邊顏色
          areaColor: '#d4f7fc', // 地圖區域顏色
          borderWidth: 0.5, // 描邊線寬。為 0 時無描邊
          label: {
            // 設置地圖區域名的文本樣式，例如地名的字體大小等
            show: true, // 顯示地區的文本名稱,默認是不顯示的，默認狀態是hoverORclick才顯示
            fontSize: 12,
            textStyle: {
              color: '#606266',
            },
          },
        },
        emphasis: {
          // 選中后的樣式
          areaColor: '#4382F6',
          borderColor: '#fff',
          areaStyle: {
            color: '#fff',
          },
          label: {
            show: true,
            fontSize: 12,
            textStyle: {
              color: '#003767',
            },
          },
        },
      },
      data: this.mapData, // 地圖系列中的數據內容數組。數組項可以為單個數值
    },
  ],
}

六、地圖 json 數據說明及 demo 效果圖

1. 地圖 json 數據說明比較

• echarts@5.0 版本之前內置的 geo 地圖 json 數據（這里特指v4.9.0）是不顯示海南省下方的南海諸島海域，所以地圖較方正。

• 阿里datav的地圖 json 數據是顯示海南省下方的南海諸島海域，所以地圖偏高。

2. demo 效果圖

1. 使用echarts@4.9.0內置的地圖 json 數據繪制

2. 使用阿里datav下載的地圖 json 數據繪制

demo gitee 地址