vue2項目中封裝echarts地圖的優(yōu)雅方法
更新時間：2022年03月19日 14:09:20 作者：liyoro2
這篇文章主要給大家介紹了關于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圖表代碼
按代碼總覽的目錄去代碼里找著看就行了。
總結
以上，就是對echarts地圖模塊的封裝，還有自定義彈窗的實現(xiàn)。使用和復用都比較方便了。
最近才發(fā)現(xiàn) www.makeapie.com 停服了，挺好用的東西來的，感謝這么多年的奉獻。
有需求的可轉(zhuǎn)移到 PPChart，算是一個替代品了
到此這篇關于vue2項目中封裝echarts地圖的優(yōu)雅方法的文章就介紹到這了,更多相關vue2封裝echarts地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
參考資料
相關文章
vue-cli或vue項目利用HBuilder打包成移動端app操作
這篇文章主要介紹了vue-cli或vue項目利用HBuilder打包成移動端app操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
vue watch如何深度監(jiān)聽數(shù)組每一項的變化
這篇文章主要介紹了vue watch如何深度監(jiān)聽數(shù)組每一項的變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了極度舒適的Vue彈窗Dialog最佳使用方案實戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了vue使用CSS插件scss時代碼報紅問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue3.0安裝element?plus依賴的過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue-cli3在main.js中console.log()會報錯的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue 如何使用遞歸組件，幫助大家更好的理解和使用vue，完成開發(fā)需求，感興趣的朋友可以了解下2020-10-10
這篇文章主要為大家介紹了Vue3之使用js實現(xiàn)動畫示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
本文詳細講解了Vue3生命周期函數(shù)和方法。對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-12-12