vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法
更新時(shí)間：2022年03月19日 14:09:20 作者：liyoro2
這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法,需要的朋友可以參考下
前言
以前寫過 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é)到的知識
- 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è)效果圖吧，說明下實(shí)現(xiàn)的效果。
- 1、廣州區(qū)域地圖
- 2、自定義彈窗，顯示選中地區(qū)的名稱、區(qū)號，彈窗加了個(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中開啟運(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ù)，用來給echarts顯示廣州的區(qū)域地圖
- 2、mapdata.json是模擬接口請求的假數(shù)據(jù)，自己隨便自定義了，在獲取數(shù)據(jù)后，看情況處理下傳到封裝好的echarts地圖模塊就行，這里模擬接口請求的知識可參考這里： vue本地模擬服務(wù)器請求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, // 自定義擴(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ù)顯示到對應(yīng)的地方就OK了。
個(gè)人喜歡直接純html實(shí)現(xiàn)好設(shè)計(jì)給的彈窗樣式，然后直接復(fù)制到formatter里面。每次遇到不同的設(shè)計(jì)，就修改下formatter里面的html和匹配下要顯示的數(shù)據(jù)就行了。這里可以進(jìn)一步封裝的，有興趣的可以試試。
頁面調(diào)用
<chart-view
class="map-view"
:chart-option="mapOpt"
height="100%"
@click="handleMapClick" />- 1、 :chart-option="mapOpt"這個(gè)是給封裝的echarts地圖模塊的傳參，接口數(shù)據(jù)要經(jīng)過處理，具體看下一節(jié)
- 2、@click="handleMapClick"這里是點(diǎn)擊地圖時(shí)，對應(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, '加載地圖失敗')
})
}這里對地圖geojson數(shù)據(jù)和接口返回?cái)?shù)據(jù)進(jìn)行匹配處理，達(dá)到彈窗數(shù)據(jù)是對應(yīng)地區(qū)數(shù)據(jù)的效果。
地圖geojson數(shù)據(jù)是必有adcode字段的，所以接口數(shù)據(jù)mapPopData最好也是加上此字段，用來匹配。 上面代碼里的hoverObj是匹配好的每個(gè)區(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 // 實(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é)
以上，就是對echarts地圖模塊的封裝，還有自定義彈窗的實(shí)現(xiàn)。使用和復(fù)用都比較方便了。
最近才發(fā)現(xiàn) www.makeapie.com 停服了，挺好用的東西來的，感謝這么多年的奉獻(xiàn)。
有需求的可轉(zhuǎn)移到 PPChart，算是一個(gè)替代品了
到此這篇關(guān)于vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法的文章就介紹到這了,更多相關(guān)vue2封裝echarts地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
參考資料
相關(guān)文章
解決vue組件中使用v-for出現(xiàn)告警問題及v for指令介紹
這篇文章主要介紹了解決vue組件中使用v-for出現(xiàn)告警問題,在文中給大家介紹了v for指令，需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue.js 2.0實(shí)現(xiàn)簡單分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
如何使用 vue-cli 創(chuàng)建模板項(xiàng)目
這篇文章主要介紹了如何使用 vue-cli 創(chuàng)建模板項(xiàng)目，幫助大家更好的理解和學(xué)習(xí)vue框架的知識，感興趣的朋友可以了解下2020-11-11
Vue項(xiàng)目優(yōu)化打包之前端必備加分項(xiàng)
相信現(xiàn)在很多人都是用Vue做過了各種項(xiàng)目,但是項(xiàng)目代碼做完和上線并不代表這結(jié)束,還有上線以后的優(yōu)化也是很重要的一點(diǎn),這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目優(yōu)化打包的相關(guān)資料,需要的朋友可以參考下2021-09-09
axios中post請求json和application/x-www-form-urlencoded詳解
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請求的庫,相比于原生的XMLHttpRequest對象,axios簡單易用,下面這篇文章主要給大家介紹了關(guān)于axios中post請求json和application/x-www-form-urlencoded的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue中inheritAttrs的使用實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
如何刪除vue項(xiàng)目下的node_modules文件夾
這篇文章主要介紹了如何刪除vue項(xiàng)目下的node_modules文件夾，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue 換膚方案驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
如何搭建一個(gè)完整的Vue3.0+ts的項(xiàng)目步驟
這篇文章主要介紹了如何搭建一個(gè)完整的Vue3.0+ts的項(xiàng)目步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
buildAdmin開源項(xiàng)目引入四種圖標(biāo)方式詳解
這篇文章主要為大家介紹了buildAdmin開源項(xiàng)目引入四種圖標(biāo)方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02