??? 我的主頁：YYDataV???歡迎點贊 👍 收藏 ?留言，歡迎多多交流

目錄

??效果展示??

一、方案架構

1、地圖模塊

2、關鍵技術

二、編碼實現 （基于篇幅及可讀性考慮，此處展示部分關鍵代碼）

1、html 頁面布局

2、引入地圖文件

3、繪制地圖氣泡圖，視覺映射效果

4、動態加載geoJson數據

5、GeoJSON數據格式

三、源碼下載

---

近年來，數據可視化大屏的出現，掀起一番又一番的浪潮，眾多企業主紛紛想要打造屬于自己的 “酷炫吊炸天” 的霸道總裁大屏駕駛艙。

話不多說，開始分享干貨，歡迎討論！QQ微信同號： 6550523今天分享的是數據可視化中非常重要的組件【中國各省市地圖】，地圖優點太多了，它可以非常炫酷清晰的呈現出地區和企業數據之間的關系，達到一目了然的效果。

??效果展示??

?

一、方案架構

1、地圖模塊

包含以下城市：?常州，淮安，連云港，南京，南通，蘇州，宿遷，泰州，無錫，徐州，鹽城，揚州，鎮江。

2、關鍵技術

• Echarts 地理坐標系(geo)
• Echarts各地區不同的散點氣泡圖大小(effectScatter)
• Echarts各地區不同的視覺映射顏色效果(visualMap)
• 國際標準數據集(geoJSON)

二、編碼實現 （基于篇幅及可讀性考慮，此處展示部分關鍵代碼）

1、html 頁面布局

<h2>江蘇 - jiang1_su1</h2> <table> <tr><td><div id="chang2_zhou1" class="citymap"></div></td><td><div id="huai2_an1" class="citymap"></div></td><td><div id="lian2_yun2_gang3" class="citymap"></div></td><td><div id="nan2_jing1" class="citymap"></div></td></tr><tr><td><div id="nan2_tong1" class="citymap"></div></td><td><div id="su1_zhou1" class="citymap"></div></td><td><div id="su4_qian1" class="citymap"></div></td><td><div id="tai4_zhou1" class="citymap"></div></td></tr><tr><td><div id="wu2_xi2" class="citymap"></div></td><td><div id="xu2_zhou1" class="citymap"></div></td><td><div id="yan2_cheng2" class="citymap"></div></td><td><div id="yang2_zhou1" class="citymap"></div></td></tr><tr><td><div id="zhen4_jiang1" class="citymap"></div></td> </tr> </table>

2、引入地圖文件

<!-- 江蘇 --> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_chang2_zhou1.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_huai2_an1.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_lian2_yun2_gang3.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_nan2_jing1.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_nan2_tong1.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_su1_zhou1.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_su4_qian1.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_tai4_zhou1.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_wu2_xi2.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_xu2_zhou1.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_yan2_cheng2.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_yang2_zhou1.js"></script> <script src="js/shape-with-internal-borders/jiangsu/jiang1_su1_zhen4_jiang1.js"></script>

3、繪制地圖氣泡圖，視覺映射效果

function make_city(cityName, chartDom) {myChart = echarts.init(document.getElementById(chartDom), window.gTheme);var option = {title: {text: cityName + "市 地圖",left: "center",},tooltip: {trigger: "item",formatter: function (params) {if (typeof params.value == "object") {value = params.value[2];} else if (typeof params.value == "number") {value = params.value;} else {value = 0;}return params.name + " : " + value + "億元";},},visualMap: {realtime: true,calculable: true,seriesIndex: 0,},geo: [{map: cityName,roam: true,layoutCenter: ["50%", "50%"],layoutSize: "120%",selectedMode: "single",zoom: 0.7,},],series: [{name: "地圖",type: "map",coordinateSystem: "geo",geoIndex: 0,data: [],},{name: "Top 5",type: "effectScatter",coordinateSystem: "geo",geoIndex: 0,data: [],symbolSize: function (val) {return val[2] / 20;},rippleEffect: {brushType: "stroke",},},],};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();}); }

4、動態加載geoJson數據

function asyncData(filename, idContainer) {$.getJSON(filename).done(function (data) {dataNoCoordinate = data.map(handleData);dataDesc = data.sort(function (a, b) {return b.value[2] - a.value[2];}).slice(0, 5);var myChart = echarts.init(document.getElementById(idContainer));myChart.setOption({series: [{ data: dataNoCoordinate },{data: dataDesc,},],});}); }

5、GeoJSON數據格式

{"type":"FeatureCollection","features":[{"type":"Feature","id":"320402","properties":{"name":"天寧區","cp":[119.999219,31.792787],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[119.9609375,31.798828125],[119.9609375,31.798828125],[119.9599609375,31.798828125],[119.9580078125,31.7998046875],[119.955078125,31.80078125],[119.94921875,31.802734375],[119.9501953125,31.802734375],[119.9501953125,31.8037109375],[119.9482421875,31.8037109375],[119.9482421875,31.8037109375],[119.94921875,31.8046875],[119.951171875,31.8046875],[119.951171875,31.8046875],[119.951171875,31.8046875],[119.9521484375,31.8056640625],[119.951171875,31.8076171875],[119.951171875,31.8095703125],[119.951171875,31.8095703125],[119.9521484375,31.8095703125],[119.9541015625,31.8095703125],[119.9560546875,31.810546875],[119.9560546875,31.810546875],[119.9560546875,31.8095703125],[119.95703125,31.80859375],[119.95703125,31.80859375],[119.9580078125,31.80859375],[119.9580078125,31.80859375],[119.958984375,31.8095703125],[119.9599609375,31.8095703125],[119.9609375,31.8095703125],[119.9609375,31.8095703125],[119.9609375,31.8095703125],[119.9619140625,31.810546875],[119.962890625,31.810546875],[119.962890625,31.80859375],[119.962890625,31.80859375],[119.96484375,31.80859375],[119.96484375,31.8095703125],[119.9658203125,31.8095703125],[119.966796875,31.8095703125],[119.970703125,31.80859375],[119.9716796875,31.8076171875],[119.970703125,31.8056640625],[119.9716796875,31.8046875],[119.9736328125,31.8046875],[119.974609375,31.8046875],[119.974609375,31.8046875],[119.974609375,31.8046875],[119.974609375,31.8046875],

三、源碼下載

含HTTP服務+本省市的GeoJSON數據+Echarts圖表：

【源碼】數據可視化：基于Echarts+GeoJson實現的地圖視覺映射散點（氣泡）組件【14】-江蘇省.zip-企業管理文檔類資源-CSDN下載

本次分享結束，歡迎討論！QQ微信同號： 6550523

總結

以上是生活随笔為你收集整理的❤️数据可视化❤️：基于Echarts + GeoJson实现的地图视觉映射散点（气泡）组件【14】 - 江苏省的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。