vue2項目如何優雅封裝echarts地圖

這篇文章主要介紹“vue2項目如何優雅封裝echarts地圖”，在日常操作中，相信很多人在vue2項目如何優雅封裝echarts地圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue2項目如何優雅封裝echarts地圖”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

能學到的知識

• 1、echarts地圖模塊封裝，可復用

• 2、echarts地圖自定義彈窗（顯示自定義樣式、自定義數據、自定義圖片），其它圖表的自定義彈窗可參考。

• 3、echarts地圖自定義彈窗動態展示接口數據

• 4、基于姐姐篇實現的，這個地圖模塊也是自適應的

• 5、基于vue2 、vue cli3、echarts 5

效果圖

先上個效果圖吧，說明下實現的效果。

• 1、廣州區域地圖

• 2、自定義彈窗，顯示選中地區的名稱、區號，彈窗加了個小圖片

• 3、基本上圖片、視頻什么的，都可以在自定義彈窗上顯示，這里只展示下自定義彈窗加圖片的方式，視頻同理的，不介紹了，有興趣自己隨便試試就好

• 4、彈窗數據是從模擬接口取的

注意

1、vue中echarts 5.x以下版本和5.x以上版本引入的區別

5.x以下版本

import echarts from 'echarts'

5.x以上版本

import * as echarts from 'echarts'

2、記得在vue.config.js中開啟運行時編譯功能

runtimeCompiler: true

實現

數據準備

|-- public
	|-- data
		|-- 4401.json
		|-- mapdata.json
	|-- images
		|-- map-ic.png

• 1、4401.json是廣州區域的geojson數據，用來給echarts顯示廣州的區域地圖

• 2、mapdata.json是模擬接口請求的假數據，自己隨便自定義了，在獲取數據后，看情況處理下傳到封裝好的echarts地圖模塊就行，這里模擬接口請求的知識可參考這里： https://juejin.cn/post/6995147964427534373/

• 3、map-ic.png地圖自定義彈窗用到的圖片

echarts地圖模塊封裝

|-- src
    |-- components
        |-- chart
            |-- options    // 存放各種圖表的option
                |-- map    // 地圖option
                    |-- index.js

具體代碼如下：

import * as echarts from 'echarts'

const getSimpleMap = (jsonMap, data, config) => {
  if (!echarts.getMap(jsonMap.mark)) {
    echarts.registerMap(jsonMap.mark, jsonMap.json)
  }
  const defaultConfig = {
    tooltip: {
      // 窗口外框
      trigger: 'item',
      padding: 0,
      borderWidth: 0,
      borderColor: '#FFFFFF',
      backgroundColor: '#FFFFFF',
      formatter: (params) => {
        const { data } = params
        const str = `<div style="width:300px;height: 98px;box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.8);
                    color: #fff;text-align:left;border-radius: 6px;">
                    <div style="background-color: rgba(102, 182, 255, 1);height: 44px;line-height: 44px;font-size:14px;font-weight:400;border-top-left-radius: 6px;border-top-right-radius: 6px;display: flex;align-items: center;">
                        <img style="width: 13px;height:16px;margin-left: 24px;margin-right: 3px;" src="images/map-ic.png">${data.name}
                    </div>
                    <div style="width: 100%;height:54px;display: flex;flex-wrap: wrap;">
                        <div style="display: flex;justify-content: space-between;width: 100%;padding-left:15px;padding-right: 15px;">
                            <div style="display:flex;align-items:center;width:132px;">
                                <div style="font-size: 12px;color: #555555;margin-right:10px;">區號：</div>
                                <div style="font-size: 14px;color: #333333;">${data.hoverObj == null ? '' : data.hoverObj.adcode}</div>
                            </div>
                        </div>
                    </div>
                </div>`
        return str
      }
    },
    geo: {
      map: jsonMap.mark,
      type: 'map',
      layoutCenter: ['50%', '50%'],
      layoutSize: '150%',
      zoom: 0.65,
      roam: false,
      itemStyle: {
        normal: {
          areaColor: 'rgba(201, 229, 255, 1)',
          shadowColor: 'rgba(142, 201, 255, 1)',
          shadowOffsetX: -5,
          shadowOffsetY: 12
        }
      }
    },
    series: [
      {
        type: 'map',
        map: jsonMap.mark, // 自定義擴展圖表類型
        zoom: 0.65, // 縮放
        animationDuration: 1200,
        itemStyle: {
          // 地圖樣式
          normal: {
            borderColor: '#FFFFFF',
            borderWidth: 3,
            areaColor: 'rgba(201, 229, 255, 1)'
          }
        },
        label: {
          show: true,
          color: '#666666',
          fontSize: 12,
          fontWeight: 400
        },
        emphasis: {
          // 鼠標移入動態的時候顯示的默認樣式
          label: {
            show: true,
            color: '#FFFFFF',
            fontSize: 15,
            fontWeight: 600
          },
          itemStyle: {
            areaColor: 'rgba(102, 182, 255, 1)',
            borderColor: '#FFFFFF',
            borderWidth: 2
          }
        },
        layoutCenter: ['50%', '50%'],
        layoutSize: '150%',
        data: data
      }
    ]
  }
  const opt = Object.assign({}, defaultConfig, config)
  const { legend, tooltip, series, geo, grid } = opt
  const chartOpt = {
    grid,
    legend,
    tooltip,
    geo,
    series
  }
  return chartOpt
}

export default {
  getSimpleMap
}

自定義彈窗主要是在tooltip的formatter里面實現，自定義好html彈窗，把params里要顯示的數據顯示到對應的地方就OK了。

個人喜歡直接純html實現好設計給的彈窗樣式，然后直接復制到formatter里面。每次遇到不同的設計，就修改下formatter里面的html和匹配下要顯示的數據就行了。這里可以進一步封裝的，有興趣的可以試試。

頁面調用

<chart-view
      class="map-view"
      :chart-option="mapOpt"
      height="100%"
      @click="handleMapClick" />

• 1、 :chart-option="mapOpt"這個是給封裝的echarts地圖模塊的傳參，接口數據要經過處理，具體看下一節

• 2、@click="handleMapClick"這里是點擊地圖時，對應區域的數據，用于有下一步的操作，例如地圖下鉆

接口數據處理

initMap(url) {
    mapRequest(url).then((res) => {
        const mapData = res.data
        const jsonMap = { mark: this.mapName, json: mapData }

        const data = mapData.features.map((item) => {
          const { name, adcode } = item.properties

          let hoverObj = {}

          const objIndex = findElem(this.mapPopData, 'adcode', adcode)
          if (objIndex !== -1) {
            hoverObj = this.mapPopData[objIndex]
          } else {
            hoverObj = null
          }
          return {
            name,
            hoverObj: hoverObj
          }
        })
        this.mapOpt = this.$eChartFn.getSimpleMap(jsonMap, data)
    }).catch((err) => {
        console.log(err, '加載地圖失敗')
    })
}

這里對地圖geojson數據和接口返回數據進行匹配處理，達到彈窗數據是對應地區數據的效果。

地圖geojson數據是必有adcode字段的，所以接口數據mapPopData最好也是加上此字段，用來匹配。 上面代碼里的hoverObj是匹配好的每個區域的數據，最終形成數組data，通過以下代碼給封裝的echarts模塊傳參

this.mapOpt = this.$eChartFn.getSimpleMap(jsonMap, data)

具體代碼可以參考echartMapTest文件夾里面的index.js文件

代碼總覽

涉及的文件如下（具體參考代碼）：

|-- public
	|-- data
		|-- 4401.json
		|-- mapdata.json
	|-- images
		|-- map-ic.png
|-- src
	|-- api
		|-- map.js    // 獲取地圖geojson數據、地圖彈窗接口模擬數據
    |-- components
        |-- chart
            |-- index.vue    // 圖表單文件組件，供界面調用
            |-- index.js    // 實現自動化導入options里的圖表option
            |-- options    // 存放各種圖表的option
                |-- map    // 地圖option
                    |-- index.js
    |-- views
        |-- echartMapTest    // 實例所在
            |-- index.vue
            |-- index.scss
            |-- index.js
	|-- utils
		|---utils.js
|-- main.js    // 全局引入echarts圖表

到此，關于“vue2項目如何優雅封裝echarts地圖”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！