vue2項目如何優(yōu)雅封裝echarts地圖
這篇文章主要介紹“vue2項目如何優(yōu)雅封裝echarts地圖”，在日常操作中，相信很多人在vue2項目如何優(yōu)雅封裝echarts地圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue2項目如何優(yōu)雅封裝echarts地圖”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
在長樂等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站制作、成都做網(wǎng)站 網(wǎng)站設(shè)計制作按需規(guī)劃網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站制作,長樂網(wǎng)站建設(shè)費用合理。
能學(xué)到的知識
1、echarts地圖模塊封裝，可復(fù)用
2、echarts地圖自定義彈窗（顯示自定義樣式、自定義數(shù)據(jù)、自定義圖片），其它圖表的自定義彈窗可參考。
3、echarts地圖自定義彈窗動態(tài)展示接口數(shù)據(jù)
4、基于姐姐篇實現(xiàn)的，這個地圖模塊也是自適應(yīng)的
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地圖模塊就行，這里模擬接口請求的知識可參考這里： 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;">區(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ù)顯示到對應(yīng)的地方就OK了。
個人喜歡直接純html實現(xiàn)好設(shè)計給的彈窗樣式，然后直接復(fù)制到formatter里面。每次遇到不同的設(shè)計，就修改下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"這里是點擊地圖時，對應(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ù)和接口返回數(shù)據(jù)進行匹配處理，達到彈窗數(shù)據(jù)是對應(yīng)地區(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)自動化導(dǎo)入options里的圖表option |-- options // 存放各種圖表的option |-- map // 地圖option |-- index.js |-- views |-- echartMapTest // 實例所在 |-- index.vue |-- index.scss |-- index.js |-- utils |---utils.js |-- main.js // 全局引入echarts圖表
到此，關(guān)于“vue2項目如何優(yōu)雅封裝echarts地圖”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)站標題：vue2項目如何優(yōu)雅封裝echarts地圖
分享URL：http://chinadenli.net/article8/goghip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、小程序開發(fā)、服務(wù)器托管、建站公司、手機網(wǎng)站建設(shè)、網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 企業(yè)營銷型網(wǎng)站建設(shè)五要點，企業(yè)建站必看 2016-08-23
- 企業(yè)建站必須考慮的三個問題 2022-05-30
- 商業(yè)企業(yè)建站的一些基本常識。 2016-11-02
- 企業(yè)建站怎樣做網(wǎng)絡(luò)數(shù)據(jù)分析 2016-11-27
- 網(wǎng)站建設(shè)中企業(yè)建站注意事項 2023-01-03
- 企業(yè)建站流程大揭秘 2016-10-07
- 企業(yè)建站中服務(wù)器的參考因素 2014-06-29
- 企業(yè)建站如何防止被騙 2021-05-02
- ASP與PHP企業(yè)建站優(yōu)勢的分析 2016-10-30
- 企業(yè)建站手機網(wǎng)站建設(shè)不可或缺 2022-12-21
- 企業(yè)建站的原則是什么 2013-07-11
- 企業(yè)建站的價值點（一） 2016-11-27