vue中使用Echarts?map圖實(shí)現(xiàn)下鉆至縣級的思路詳解
今天給大家分享echarts map地圖下鉆至縣級,因?yàn)轫?xiàng)目需求需要實(shí)現(xiàn) map 圖下鉆至縣級,也找了很多博客,但是基本都是同一篇博客。
好在最終還是實(shí)現(xiàn)了,先上動圖:
基本思路都是一致的,獲取鼠標(biāo)點(diǎn)擊的參數(shù)跳轉(zhuǎn)至指定的 JSON
需要注意的是,因?yàn)槲沂侵苯訌?vue-cli2 直接跳到 vue-cli4 ,還奇怪怎么讀取不到JSON,查找后才知道 vue-cli3 往后的項(xiàng)目基礎(chǔ)架構(gòu)對比舊版本有些區(qū)別。
以前大家都習(xí)慣在根目錄下的 static文件夾下創(chuàng)建 JSON 文件,vue-cli3、4沒有 static文件夾了,創(chuàng)一個(gè) static文件夾在下面也不行,結(jié)果會報(bào)錯(cuò),請求 404找不到文件。
正確的路徑是在 public 文件夾下引入
話不多說,步驟如下:
1 - 首先初始化全國 map
initEcharts("china"); function initEcharts(map) { let option = { geo: { map: map, roam: false, scaleLimit: { min: 1.2, max: 3 }, zoom: 1.2, //圖形上的文本標(biāo)簽,可用于說明圖形的一些數(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)動高亮?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中注冊的名字,如果是上海市,則該出需pName 指的是'shanghai' mapType: map, geoIndex: 0 // data: dataList } ] }; myChart.setOption(option); }
2 - 定義省份及市區(qū)數(shù)組,由于太長了我就不放了 (后面需要引用對應(yīng)的JSON,這些 JSON 和源碼 我會打包到 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
//展示對應(yīng)的省 function showProvince(eName,param) { console.log(eName, param) $.getJSON(`/map/province/${eName}.json`, data=>{ that.$echarts.registerMap(param, data); alert("省") initEcharts(param); }) } //展示對應(yīng)市 function showCitys(cName, param) { console.log(cName, param) // 顯示縣級地圖 $.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)下鉆至縣級的文章就介紹到這了,更多相關(guān)vue Echarts map圖下鉆至縣級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2.0使用Sortable.js實(shí)現(xiàn)的拖拽功能示例
本篇文章主要介紹了vue2.0使用Sortable.js實(shí)現(xiàn)的拖拽功能示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-02-02一文搞懂vue中provide和inject實(shí)現(xiàn)原理對抗平庸
這篇文章主要為大家介紹了vue中provide和inject實(shí)現(xiàn)原理的深入理解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02Vue3+Elementplus實(shí)現(xiàn)面包屑功能
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-11-11Vue3中element-plus全局使用Icon圖標(biāo)的過程詳解
我們在用vue開發(fā)網(wǎng)站的時(shí)候,往往圖標(biāo)是起著很重要的作,這篇文章主要給大家介紹了關(guān)于Vue3中element-plus全局使用Icon圖標(biāo)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01Vue通過字符串關(guān)鍵字符實(shí)現(xiàn)動態(tài)渲染input輸入框
這篇文章主要為大家詳細(xì)介紹了Vue如何通過字符串關(guān)鍵字符實(shí)現(xiàn)動態(tài)渲染input輸入框。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-12-12vue實(shí)現(xiàn)動態(tài)添加數(shù)據(jù)滾動條自動滾動到底部的示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)動態(tài)添加數(shù)據(jù)滾動條自動滾動到底部的示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07