vue中使用Echarts?map圖實(shí)現(xiàn)下鉆至縣級(jí)的思路詳解
今天給大家分享echarts map地圖下鉆至縣級(jí),因?yàn)轫?xiàng)目需求需要實(shí)現(xiàn) map 圖下鉆至縣級(jí),也找了很多博客,但是基本都是同一篇博客。
好在最終還是實(shí)現(xiàn)了,先上動(dòng)圖:

基本思路都是一致的,獲取鼠標(biāo)點(diǎn)擊的參數(shù)跳轉(zhuǎn)至指定的 JSON
需要注意的是,因?yàn)槲沂侵苯訌?vue-cli2 直接跳到 vue-cli4 ,還奇怪怎么讀取不到JSON,查找后才知道 vue-cli3 往后的項(xiàng)目基礎(chǔ)架構(gòu)對(duì)比舊版本有些區(qū)別。
以前大家都習(xí)慣在根目錄下的 static文件夾下創(chuàng)建 JSON 文件,vue-cli3、4沒(méi)有 static文件夾了,創(chuàng)一個(gè) static文件夾在下面也不行,結(jié)果會(huì)報(bào)錯(cuò),請(qǐng)求 404找不到文件。
正確的路徑是在 public 文件夾下引入
話不多說(shuō),步驟如下:
1 - 首先初始化全國(guó) map
initEcharts("china");
function initEcharts(map) {
let option = {
geo: {
map: map,
roam: false,
scaleLimit: {
min: 1.2,
max: 3
},
zoom: 1.2,
//圖形上的文本標(biāo)簽,可用于說(shuō)明圖形的一些數(shù)據(jù)信息
label: {
normal: {
show: true,
fontSize: "10",
color: "rgba(0,0,0,0.7)"
}
},
//地圖區(qū)域的多邊形 圖形樣式,有 normal 和 emphasis 兩個(gè)狀態(tài)
itemStyle: {
//normal 是圖形在默認(rèn)狀態(tài)下的樣式;
normal: {
borderColor: "rgba(0, 0, 0, 0.2)"
},
//emphasis 是圖形在高亮狀態(tài)下的樣式,比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r。
emphasis: {
areaColor: "#F3B329",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
},
series: [
{
name: "信息量",
type: "map",
//這里是'china',及因?yàn)閖s中注冊(cè)的名字,如果是上海市,則該出需pName 指的是'shanghai'
mapType: map,
geoIndex: 0
// data: dataList
}
]
};
myChart.setOption(option);
}2 - 定義省份及市區(qū)數(shù)組,由于太長(zhǎng)了我就不放了 (后面需要引用對(duì)應(yīng)的JSON,這些 JSON 和源碼 我會(huì)打包到 github ,需要自取)
3 - 點(diǎn)擊事件
// 點(diǎn)擊觸發(fā)
myChart.on("click", param => {
if (param.name in provinces) {
// 處理省模塊
let names = param.name;
for (let key in provinces) {
if (names == key) {
showProvince(provinces[key], key);
break;
}
}
} else if (param.name in cityMap) {
// 處理市模塊
let names = param.name;
for (let key in cityMap) {
if (names == key) {
showCitys(cityMap[key], key);
break;
}
}
}
});4 - 渲染 map
//展示對(duì)應(yīng)的省
function showProvince(eName,param) {
console.log(eName, param)
$.getJSON(`/map/province/${eName}.json`, data=>{
that.$echarts.registerMap(param, data);
alert("省")
initEcharts(param);
})
}
//展示對(duì)應(yīng)市
function showCitys(cName, param) {
console.log(cName, param)
// 顯示縣級(jí)地圖
$.getJSON(`/map/city/${cName}.json`, data=>{
that.$echarts.registerMap(param, data);
alert("縣")
initEcharts(param);
})
}寫在最后:
代碼有很多還需要優(yōu)化的地方,但是暫解了我的燃眉之急,畢竟我還是個(gè)畢業(yè)不久的切圖仔,源碼放在下面,希望能幫到大家 ----https://github.com/RuanChon/mapChart
到此這篇關(guān)于vue中使用Echarts map圖實(shí)現(xiàn)下鉆至縣級(jí)的文章就介紹到這了,更多相關(guān)vue Echarts map圖下鉆至縣級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題
這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
前端設(shè)置cookie之vue-cookies使用及說(shuō)明
這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法
下面小編就為大家分享一篇vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue element-ui table組件動(dòng)態(tài)生成表頭和數(shù)據(jù)并修改單元格格式 父子組件通信
這篇文章主要介紹了vue element-ui table組件動(dòng)態(tài)生成表頭和數(shù)據(jù)并修改單元格格式 父子組件通信,需要的朋友可以參考下2019-08-08
vue watch監(jiān)控對(duì)象的簡(jiǎn)單方法示例
這篇文章主要給大家介紹了關(guān)于vue watch監(jiān)控對(duì)象的簡(jiǎn)單方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01

