vue2項目中封裝echarts地圖的優(yōu)雅方法

更新時間：2022年03月19日 14:09:20 作者：liyoro2

這篇文章主要給大家介紹了關(guān)于vue2項目中封裝echarts地圖的優(yōu)雅方法,需要的朋友可以參考下

前言

以前寫過 vue項目中封裝echarts的比較優(yōu)雅的方式，大屏可視化里面，除了數(shù)據(jù)圖表很常用，顯示省市地圖區(qū)域也是很常用到的，這是姐妹篇。

區(qū)域地圖選區(qū)域時，需要彈窗展示數(shù)據(jù)，樣式是各種各樣的，各種排列的數(shù)據(jù)、圖文混搭、視頻......這里除了封裝echarts區(qū)域地圖模塊，還介紹了下自定義彈窗的實現(xiàn)、自定義彈窗動態(tài)加載接口數(shù)據(jù)的方式

能學到的知識

1、echarts地圖模塊封裝，可復用
2、echarts地圖自定義彈窗（顯示自定義樣式、自定義數(shù)據(jù)、自定義圖片），其它圖表的自定義彈窗可參考。
3、echarts地圖自定義彈窗動態(tài)展示接口數(shù)據(jù)
4、基于姐姐篇實現(xiàn)的，這個地圖模塊也是自適應的
5、基于vue2 、vue cli3、echarts 5

效果圖

先上個效果圖吧，說明下實現(xiàn)的效果。

1、廣州區(qū)域地圖
2、自定義彈窗，顯示選中地區(qū)的名稱、區(qū)號，彈窗加了個小圖片
3、基本上圖片、視頻什么的，都可以在自定義彈窗上顯示，這里只展示下自定義彈窗加圖片的方式，視頻同理的，不介紹了，有興趣自己隨便試試就好
4、彈窗數(shù)據(jù)是從模擬接口取的

注意

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

5.x以下版本

import echarts from 'echarts'

5.x以上版本

import * as echarts from 'echarts'

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

runtimeCompiler: true

實現(xiàn)

數(shù)據(jù)準備

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

1、4401.json是廣州區(qū)域的geojson數(shù)據(jù)，用來給echarts顯示廣州的區(qū)域地圖
2、mapdata.json是模擬接口請求的假數(shù)據(jù)，自己隨便自定義了，在獲取數(shù)據(jù)后，看情況處理下傳到封裝好的echarts地圖模塊就行，這里模擬接口請求的知識可參考這里： vue本地模擬服務器請求mock數(shù)據(jù)
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;">區(qū)號：</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: {
          // 鼠標移入動態(tài)的時候顯示的默認樣式
          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里面實現(xiàn)，自定義好html彈窗，把params里要顯示的數(shù)據(jù)顯示到對應的地方就OK了。

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

頁面調(diào)用

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

1、 :chart-option="mapOpt"這個是給封裝的echarts地圖模塊的傳參，接口數(shù)據(jù)要經(jīng)過處理，具體看下一節(jié)
2、@click="handleMapClick"這里是點擊地圖時，對應區(qū)域的數(shù)據(jù)，用于有下一步的操作，例如地圖下鉆

接口數(shù)據(jù)處理

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數(shù)據(jù)和接口返回數(shù)據(jù)進行匹配處理，達到彈窗數(shù)據(jù)是對應地區(qū)數(shù)據(jù)的效果。

地圖geojson數(shù)據(jù)是必有adcode字段的，所以接口數(shù)據(jù)mapPopData最好也是加上此字段，用來匹配。上面代碼里的hoverObj是匹配好的每個區(qū)域的數(shù)據(jù)，最終形成數(shù)組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數(shù)據(jù)、地圖彈窗接口模擬數(shù)據(jù)
    |-- components
        |-- chart
            |-- index.vue    // 圖表單文件組件，供界面調(diào)用
            |-- index.js    // 實現(xiàn)自動化導入options里的圖表option
            |-- options    // 存放各種圖表的option
                |-- map    // 地圖option
                    |-- index.js
    |-- views
        |-- echartMapTest    // 實例所在
            |-- index.vue
            |-- index.scss
            |-- index.js
	|-- utils
		|---utils.js
|-- main.js    // 全局引入echarts圖表

代碼

按代碼總覽的目錄去代碼里找著看就行了。

總結(jié)

以上，就是對echarts地圖模塊的封裝，還有自定義彈窗的實現(xiàn)。使用和復用都比較方便了。

最近才發(fā)現(xiàn) www.makeapie.com 停服了，挺好用的東西來的，感謝這么多年的奉獻。

有需求的可轉(zhuǎn)移到 PPChart，算是一個替代品了

到此這篇關(guān)于vue2項目中封裝echarts地圖的優(yōu)雅方法的文章就介紹到這了,更多相關(guān)vue2封裝echarts地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

參考資料

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

vue2項目中封裝echarts地圖的優(yōu)雅方法

目錄

前言

能學到的知識

效果圖

注意

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

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

實現(xiàn)

數(shù)據(jù)準備

echarts地圖模塊封裝

頁面調(diào)用

接口數(shù)據(jù)處理

代碼總覽

代碼

總結(jié)

參考資料

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

vue2項目中封裝echarts地圖的優(yōu)雅方法

目錄

前言

能學到的知識

效果圖

注意

1、vue中echarts 5.x以下版本和5.x以上版本引入的區(qū)別

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

實現(xiàn)

數(shù)據(jù)準備

echarts地圖模塊封裝

頁面調(diào)用

接口數(shù)據(jù)處理

代碼總覽

代碼

總結(jié)

參考資料

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

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

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