---

---

寫在前面

這篇文章其實(shí)我主要是之前留下的一個(gè)心結(jié)，依稀記得之前做了一個(gè)大屏項(xiàng)目的時(shí)候，那個(gè)時(shí)候都忙的沒(méi)時(shí)間整理有關(guān)大屏開發(fā)的文章，這不前兩天逛一個(gè)技術(shù)社區(qū)看到了有人問(wèn)到有關(guān)echarts實(shí)現(xiàn)地圖模塊且彈出下級(jí)城市的地圖如何去實(shí)現(xiàn)，于是乎我回憶了之前的知識(shí)結(jié)合網(wǎng)上的一些知識(shí)點(diǎn)進(jìn)行了整理，希望能給大家?guī)?lái)一些幫助。

涉及知識(shí)點(diǎn)

Echarts實(shí)現(xiàn)可點(diǎn)擊中國(guó)地圖，基于Echarts實(shí)現(xiàn)可查看下級(jí)城市的地圖，jQuery+html5基于echarts.js中國(guó)地圖點(diǎn)擊彈出下級(jí)城市地圖，中國(guó)地圖及下級(jí)城市展示。
版權(quán)聲明：此文原創(chuàng)于CSDN博主-《拄杖盲學(xué)輕聲碼》，主頁(yè)有很多分享的代碼，期待您的訪問(wèn)。

實(shí)現(xiàn)效果

這個(gè)主要為了給大家一個(gè)最終實(shí)現(xiàn)效果的反饋，文尾附完整代碼包的分享鏈接。

1、實(shí)現(xiàn)中國(guó)地圖板塊

1.1創(chuàng)建dom元素

創(chuàng)建一個(gè)map.html,主要用于展示有關(guān)中國(guó)地圖省直轄市和自治區(qū)、特別行政區(qū)及領(lǐng)海的一級(jí)區(qū)域，當(dāng)然其實(shí)這個(gè)里面。

<button id="back">返回全國(guó)</button>
<div id="china-map"></div>

1.2實(shí)現(xiàn)地圖渲染

當(dāng)然在這里我是采用json數(shù)據(jù)羅列方式來(lái)整的，也就是將中國(guó)地圖省直轄市和自治區(qū)、特別行政區(qū)及領(lǐng)海的一級(jí)區(qū)域等用json數(shù)據(jù)的方式進(jìn)行存儲(chǔ)，其實(shí)也可以放json文件的，網(wǎng)上也有很多可以下載的。如下所示實(shí)現(xiàn)方式：

var myChart = echarts.init(document.getElementById('china-map'));var oBack = document.getElementById("back");var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];var provincesText = ['上海', '河北', '山西', '內(nèi)蒙古', '遼寧', '吉林', '黑龍江', '江蘇', '浙江', '安徽', '福建', '江西', '山東', '河南', '湖北', '湖南', '廣東', '廣西', '海南', '四川', '貴州', '云南', '西藏', '陜西', '甘肅', '青海', '寧夏', '新疆', '北京', '天津', '重慶', '香港', '澳門'];var seriesData = [{name: '北京',value: 100}, {name: '天津',value: 0}, {name: '上海',value: 60}, {name: '重慶',value: 0}, {name: '河北',value: 60}, {name: '河南',value: 60}, {name: '云南',value: 0}, {name: '遼寧',value: 0}, {name: '黑龍江',value: 0}, {name: '湖南',value: 60}, {name: '安徽',value: 0}, {name: '山東',value: 60}, {name: '新疆',value: 0}, {name: '江蘇',value: 0}, {name: '浙江',value: 0}, {name: '江西',value: 0}, {name: '湖北',value: 60}, {name: '廣西',value: 60}, {name: '甘肅',value: 0}, {name: '山西',value: 60}, {name: '內(nèi)蒙古',value: 0}, {name: '陜西',value: 0}, {name: '吉林',value: 0}, {name: '福建',value: 0}, {name: '貴州',value: 0}, {name: '廣東',value: 597}, {name: '青海',value: 0}, {name: '西藏',value: 0}, {name: '四川',value: 60}, {name: '寧夏',value: 0}, {name: '海南',value: 60}, {name: '臺(tái)灣',value: 0}, {name: '香港',value: 0}, {name: '澳門',value: 0}];oBack.onclick = function () {initEcharts("china", "中國(guó)");};initEcharts("china", "中國(guó)");// 初始化echartsfunction initEcharts(pName, Chinese_) {var tmpSeriesData = pName === "china" ? seriesData : [];var option = {title: {text: Chinese_ || pName,left: 'center'},tooltip: {trigger: 'item',formatter: '<br/>{c} (p / km2)'},series: [{name: Chinese_ || pName,type: 'map',mapType: pName,roam: false,//是否開啟鼠標(biāo)縮放和平移漫游data: tmpSeriesData,top: "3%",//組件距離容器的距離zoom:1.1,selectedMode : 'single',label: {normal: {show: true,//顯示省份標(biāo)簽textStyle:{color:"#fbfdfe"}//省份標(biāo)簽字體顏色},emphasis: {//對(duì)應(yīng)的鼠標(biāo)懸浮效果show: true,textStyle:{color:"#323232"}}},itemStyle: {normal: {borderWidth: .5,//區(qū)域邊框?qū)挾?/span>borderColor: '#0550c3',//區(qū)域邊框顏色areaColor:"#4ea397",//區(qū)域顏色},emphasis: {borderWidth: .5,borderColor: '#4b0082',areaColor:"#ece39e",}},}]};myChart.setOption(option);myChart.off("click");if (pName === "china") { // 全國(guó)時(shí)，添加click 進(jìn)入省級(jí)myChart.on('click', function (param) {console.log(param.name);// 遍歷取到provincesText 中的下標(biāo)  去拿到對(duì)應(yīng)的省jsfor (var i = 0; i < provincesText.length; i++) {if (param.name === provincesText[i]) {//顯示對(duì)應(yīng)省份的方法showProvince(provinces[i], provincesText[i]);break;}}if (param.componentType === 'series') {var provinceName =param.name;$('#box').css('display','block');$("#box-title").html(provinceName);}});} else { // 省份，添加雙擊 回退到全國(guó)myChart.on("dblclick", function () {initEcharts("china", "中國(guó)");});}}// 展示對(duì)應(yīng)的省function showProvince(pName, Chinese_) {//這寫省份的js都是通過(guò)在線構(gòu)建工具生成的，保存在本地，需要時(shí)加載使用即可，最好不要一開始全部直接引入。loadBdScript('$' + pName + 'JS', './js/map/province/' + pName + '.js', function () {initEcharts(Chinese_);});}// 加載對(duì)應(yīng)的JSfunction loadBdScript(scriptId, url, callback) {var script = document.createElement("script");script.type = "text/javascript";if (script.readyState) {  //IEscript.onreadystatechange = function () {if (script.readyState === "loaded" || script.readyState === "complete") {script.onreadystatechange = null;callback();}};} else {  // Othersscript.onload = function () {callback();};}script.src = url;script.id = scriptId;document.getElementsByTagName("head")[0].appendChild(script);};

1.3點(diǎn)擊地圖進(jìn)入城市及返回

其實(shí)核心方法在于：

function showProvince(pName, Chinese_) {//這寫省份的js都是通過(guò)在線構(gòu)建工具生成的，保存在本地，需要時(shí)加載使用即可，最好不要一開始全部直接引入。loadBdScript('$' + pName + 'JS', './js/map/province/' + pName + '.js', function () {initEcharts(Chinese_);});}// 加載對(duì)應(yīng)的JSfunction loadBdScript(scriptId, url, callback) {var script = document.createElement("script");script.type = "text/javascript";if (script.readyState) {  //IEscript.onreadystatechange = function () {if (script.readyState === "loaded" || script.readyState === "complete") {script.onreadystatechange = null;callback();}};} else {  // Othersscript.onload = function () {callback();};}script.src = url;script.id = scriptId;document.getElementsByTagName("head")[0].appendChild(script);};

這個(gè)里面有一個(gè)訪問(wèn)不同js文件的，因?yàn)獒槍?duì)不同省份（直轄市，自治區(qū)，特別行政區(qū)等）我都匯總了一個(gè)js文件，其實(shí)里面存放的就是它所管轄的地方城市信息，部分展示如下：

其中里面的內(nèi)容我可以截圖大家看一下：

其實(shí)從上面不難難發(fā)現(xiàn)為啥點(diǎn)擊進(jìn)去能做到看到具體城市的地圖，主要還是臨時(shí)存儲(chǔ)數(shù)據(jù)的讀取，當(dāng)然如果大家有更好的實(shí)現(xiàn)方式可以留言哈，一起互相學(xué)習(xí)互相進(jìn)步！

2、源碼分享

2.1 百度網(wǎng)盤

鏈接：https://pan.baidu.com/s/1cSPIjMkxw28WjzzFQJa6rg
提取碼：hdd6

2.2 123云盤

鏈接：https://www.123pan.com/s/ZxkUVv-kpI4.html
提取碼：hdd6

2.3 郵箱留言

評(píng)論區(qū)留下您的郵箱賬號(hào)，博主看到第一時(shí)間發(fā)給您，祝您生活愉快！

---

總結(jié)

以上就是今天要講的內(nèi)容，本文主要介紹了Echarts實(shí)現(xiàn)可點(diǎn)擊中國(guó)地圖，基于Echarts實(shí)現(xiàn)可查看下級(jí)城市的地圖，jQuery+html5基于echarts.js中國(guó)地圖點(diǎn)擊彈出下級(jí)城市地圖，中國(guó)地圖及下級(jí)城市展示，也期待大家一起進(jìn)步哈，2023年一起加油！！！

版權(quán)聲明：此文原創(chuàng)于CSDN博主-《拄杖盲學(xué)輕聲碼》，主頁(yè)有很多分享的代碼，期待您的訪問(wèn)。