vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法
前言
以前寫(xiě)過(guò) vue項(xiàng)目中封裝echarts的比較優(yōu)雅的方式，大屏可視化里面，除了數(shù)據(jù)圖表很常用，顯示省市地圖區(qū)域也是很常用到的，這是姐妹篇。
區(qū)域地圖選區(qū)域時(shí)，需要彈窗展示數(shù)據(jù)，樣式是各種各樣的，各種排列的數(shù)據(jù)、圖文混搭、視頻......這里除了封裝echarts區(qū)域地圖模塊，還介紹了下自定義彈窗的實(shí)現(xiàn)、自定義彈窗動(dòng)態(tài)加載接口數(shù)據(jù)的方式
能學(xué)到的知識(shí)
- 1、echarts地圖模塊封裝，可復(fù)用
- 2、echarts地圖自定義彈窗（顯示自定義樣式、自定義數(shù)據(jù)、自定義圖片），其它圖表的自定義彈窗可參考。
- 3、echarts地圖自定義彈窗動(dòng)態(tài)展示接口數(shù)據(jù)
- 4、基于姐姐篇實(shí)現(xiàn)的，這個(gè)地圖模塊也是自適應(yīng)的
- 5、基于vue2 、vue cli3、echarts 5
效果圖
先上個(gè)效果圖吧，說(shuō)明下實(shí)現(xiàn)的效果。
- 1、廣州區(qū)域地圖
- 2、自定義彈窗，顯示選中地區(qū)的名稱、區(qū)號(hào)，彈窗加了個(gè)小圖片
- 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中開(kāi)啟運(yùn)行時(shí)編譯功能
runtimeCompiler: true
實(shí)現(xiàn)
數(shù)據(jù)準(zhǔn)備
|-- public |-- data |-- 4401.json |-- mapdata.json |-- images |-- map-ic.png
- 1、4401.json是廣州區(qū)域的geojson數(shù)據(jù)，用來(lái)給echarts顯示廣州的區(qū)域地圖
- 2、mapdata.json是模擬接口請(qǐng)求的假數(shù)據(jù)，自己隨便自定義了，在獲取數(shù)據(jù)后，看情況處理下傳到封裝好的echarts地圖模塊就行，這里模擬接口請(qǐng)求的知識(shí)可參考這里： vue本地模擬服務(wù)器請(qǐng)求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ū)號(hào)：</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, // 自定義擴(kuò)展圖表類型
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: {
// 鼠標(biāo)移入動(dòng)態(tài)的時(shí)候顯示的默認(rèn)樣式
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里面實(shí)現(xiàn)，自定義好html彈窗，把params里要顯示的數(shù)據(jù)顯示到對(duì)應(yīng)的地方就OK了。
個(gè)人喜歡直接純html實(shí)現(xiàn)好設(shè)計(jì)給的彈窗樣式，然后直接復(fù)制到formatter里面。每次遇到不同的設(shè)計(jì)，就修改下formatter里面的html和匹配下要顯示的數(shù)據(jù)就行了。這里可以進(jìn)一步封裝的，有興趣的可以試試。
頁(yè)面調(diào)用
<chart-view
class="map-view"
:chart-option="mapOpt"
height="100%"
@click="handleMapClick" />- 1、 :chart-option="mapOpt"這個(gè)是給封裝的echarts地圖模塊的傳參，接口數(shù)據(jù)要經(jīng)過(guò)處理，具體看下一節(jié)
- 2、@click="handleMapClick"這里是點(diǎn)擊地圖時(shí)，對(duì)應(yīng)區(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, '加載地圖失敗')
})
}這里對(duì)地圖geojson數(shù)據(jù)和接口返回?cái)?shù)據(jù)進(jìn)行匹配處理，達(dá)到彈窗數(shù)據(jù)是對(duì)應(yīng)地區(qū)數(shù)據(jù)的效果。
地圖geojson數(shù)據(jù)是必有adcode字段的，所以接口數(shù)據(jù)mapPopData最好也是加上此字段，用來(lái)匹配。 上面代碼里的hoverObj是匹配好的每個(gè)區(qū)域的數(shù)據(jù)，最終形成數(shù)組data，通過(guò)以下代碼給封裝的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 // 實(shí)現(xiàn)自動(dòng)化導(dǎo)入options里的圖表option
|-- options // 存放各種圖表的option
|-- map // 地圖option
|-- index.js
|-- views
|-- echartMapTest // 實(shí)例所在
|-- index.vue
|-- index.scss
|-- index.js
|-- utils
|---utils.js
|-- main.js // 全局引入echarts圖表代碼
按代碼總覽的目錄去代碼里找著看就行了。
總結(jié)
以上，就是對(duì)echarts地圖模塊的封裝，還有自定義彈窗的實(shí)現(xiàn)。使用和復(fù)用都比較方便了。
最近才發(fā)現(xiàn) www.makeapie.com 停服了，挺好用的東西來(lái)的，感謝這么多年的奉獻(xiàn)。
有需求的可轉(zhuǎn)移到 PPChart，算是一個(gè)替代品了
到此這篇關(guān)于vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法的文章就介紹到這了,更多相關(guān)vue2封裝echarts地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
參考資料
相關(guān)文章
vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作
這篇文章主要介紹了vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題
這篇文章主要介紹了vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題,文中還給大家提到了vue中axios解決跨域問(wèn)題和攔截器使用，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
vue watch如何深度監(jiān)聽(tīng)數(shù)組每一項(xiàng)的變化
這篇文章主要介紹了vue watch如何深度監(jiān)聽(tīng)數(shù)組每一項(xiàng)的變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn)
這篇文章主要為大家介紹了極度舒適的Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue使用CSS插件scss時(shí)代碼報(bào)紅問(wèn)題
這篇文章主要介紹了vue使用CSS插件scss時(shí)代碼報(bào)紅問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3.0安裝element?plus依賴的過(guò)程
這篇文章主要介紹了vue3.0安裝element?plus依賴的過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue 如何使用遞歸組件，幫助大家更好的理解和使用vue，完成開(kāi)發(fā)需求，感興趣的朋友可以了解下2020-10-10
Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析
這篇文章主要為大家介紹了Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
本文詳細(xì)講解了Vue3生命周期函數(shù)和方法。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-12