echart地圖城市經緯度

使用geo時，導入china.js，填數劇時，前兩列映射到經緯度，第三列映射到值,嵌套數組

//轉換數據示例 //取地圖映射數據function convertData(data){//將所有區域存入數組let repeatArea = [];for(var j=0; j<data.length; j++){repeatArea.push(data[j]["城市"]);}//將區域轉集合去重let setArea = new Set(repeatArea);//將區域轉回數組let singleArea = Array.from(setArea);//console.log(singleArea);//遍歷數據,將相同地區數據相加//1.建立與去重城市數據同長度的數組 存儲訂單數量var orderAmount = [];orderAmount.length = singleArea.length;//記錄去重區域長度var areaLength = orderAmount.length;//console.log(areaLength);//區域每一項值訂單數量初始化0for(var i=0; i<orderAmount.length; i++){orderAmount[i]=0;}//遍歷json數據,填入訂單數量for(var i=0; i<data.length; i++){for(var j=0; j<areaLength; j++){if(singleArea[j] == data[i]["城市"]){orderAmount[j] += eval(data[i]["訂單數量"]);}}}//console.log(orderAmount);var res = [];//記錄經緯度以及值//合并城市及城市數據//每個城市數據為一個數組var cityArea = [];cityArea.length = areaLength;for(var i=0; i<areaLength; i++){//把城市每一項初始為空數組cityArea[i] = [];//填入城市,對應總訂單數量cityArea[i].push(singleArea[i], orderAmount[i]);//取經緯度var geoCoord = geoCoordMap[cityArea[i][0]];//console.log(geoCoord);//res.push(geoCoord);if(geoCoord){//console.log(geoCoord);res.push(geoCoord.concat(cityArea[i][1],cityArea[i][0]));} }console.log(res);return res;} //經緯度 var geoCoordMap = {"海門":[121.15,31.89],"鄂爾多斯":[109.781327,39.608266],"招遠":[120.38,37.35],"舟山":[122.207216,29.985295],"齊齊哈爾":[123.97,47.33],"鹽城":[120.13,33.38],"赤峰":[118.87,42.28],"青島":[120.33,36.07],"乳山":[121.52,36.89],"金昌":[102.188043,38.520089],"泉州":[118.58,24.93],"萊西":[120.53,36.86],"日照":[119.46,35.42],"膠南":[119.97,35.88],"南通":[121.05,32.08],"拉薩":[91.11,29.97],"云浮":[112.02,22.93],"梅州":[116.1,24.55],"文登":[122.05,37.2],"上海":[121.48,31.22],"攀枝花":[101.718637,26.582347],"威海":[122.1,37.5],"承德":[117.93,40.97],"廈門":[118.1,24.46],"汕尾":[115.375279,22.786211],"潮州":[116.63,23.68],"丹東":[124.37,40.13],"太倉":[121.1,31.45],"曲靖":[103.79,25.51],"煙臺":[121.39,37.52],"福州":[119.3,26.08],"瓦房店":[121.979603,39.627114],"即墨":[120.45,36.38],"撫順":[123.97,41.97],"玉溪":[102.52,24.35],"張家口":[114.87,40.82],"陽泉":[113.57,37.85],"萊州":[119.942327,37.177017],"湖州":[120.1,30.86],"汕頭":[116.69,23.39],"昆山":[120.95,31.39],"寧波":[121.56,29.86],"湛江":[110.359377,21.270708],"揭陽":[116.35,23.55],"榮成":[122.41,37.16],"連云港":[119.16,34.59],"葫蘆島":[120.836932,40.711052],"常熟":[120.74,31.64],"東莞":[113.75,23.04],"河源":[114.68,23.73],"淮安":[119.15,33.5],"泰州":[119.9,32.49],"南寧":[108.33,22.84],"營口":[122.18,40.65],"惠州":[114.4,23.09],"江陰":[120.26,31.91],"蓬萊":[120.75,37.8],"韶關":[113.62,24.84],"嘉峪關":[98.289152,39.77313],"廣州":[113.23,23.16],"延安":[109.47,36.6],"太原":[112.53,37.87],"清遠":[113.01,23.7],"中山":[113.38,22.52],"昆明":[102.73,25.04],"壽光":[118.73,36.86],"盤錦":[122.070714,41.119997],"長治":[113.08,36.18],"深圳":[114.07,22.62],"珠海":[113.52,22.3],"宿遷":[118.3,33.96],"咸陽":[108.72,34.36],"銅川":[109.11,35.09],"平度":[119.97,36.77],"佛山":[113.11,23.05],"海口":[110.35,20.02],"江門":[113.06,22.61],"章丘":[117.53,36.72],"肇慶":[112.44,23.05],"大連":[121.62,38.92],"臨汾":[111.5,36.08],"吳江":[120.63,31.16],"石嘴山":[106.39,39.04],"沈陽":[123.38,41.8],"蘇州":[120.62,31.32],"茂名":[110.88,21.68],"嘉興":[120.76,30.77],"長春":[125.35,43.88],"膠州":[120.03336,36.264622],"銀川":[106.27,38.47],"張家港":[120.555821,31.875428],"三門峽":[111.19,34.76],"錦州":[121.15,41.13],"南昌":[115.89,28.68],"柳州":[109.4,24.33],"三亞":[109.511909,18.252847],"自貢":[104.778442,29.33903],"吉林":[126.57,43.87],"陽江":[111.95,21.85],"瀘州":[105.39,28.91],"西寧":[101.74,36.56],"宜賓":[104.56,29.77],"呼和浩特":[111.65,40.82],"成都":[104.06,30.67],"大同":[113.3,40.12],"鎮江":[119.44,32.2],"桂林":[110.28,25.29],"張家界":[110.479191,29.117096],"宜興":[119.82,31.36],"北海":[109.12,21.49],"西安":[108.95,34.27],"金壇":[119.56,31.74],"東營":[118.49,37.46],"牡丹江":[129.58,44.6],"遵義":[106.9,27.7],"紹興":[120.58,30.01],"揚州":[119.42,32.39],"常州":[119.95,31.79],"濰坊":[119.1,36.62],"重慶":[106.54,29.59],"臺州":[121.420757,28.656386],"南京":[118.78,32.04],"濱州":[118.03,37.36],"貴陽":[106.71,26.57],"無錫":[120.29,31.59],"本溪":[123.73,41.3],"克拉瑪依":[84.77,45.59],"渭南":[109.5,34.52],"馬鞍山":[118.48,31.56],"寶雞":[107.15,34.38],"焦作":[113.21,35.24],"句容":[119.16,31.95],"北京":[116.46,39.92],"徐州":[117.2,34.26],"衡水":[115.72,37.72],"包頭":[110,40.58],"綿陽":[104.73,31.48],"烏魯木齊":[87.68,43.77],"棗莊":[117.57,34.86],"杭州":[120.19,30.26],"淄博":[118.05,36.78],"鞍山":[122.85,41.12],"溧陽":[119.48,31.43],"庫爾勒":[86.06,41.68],"安陽":[114.35,36.1],"開封":[114.35,34.79],"濟南":[117,36.65],"德陽":[104.37,31.13],"溫州":[120.65,28.01],"九江":[115.97,29.71],"邯鄲":[114.47,36.6],"臨安":[119.72,30.23],"蘭州":[103.73,36.03],"滄州":[116.83,38.33],"臨沂":[118.35,35.05],"南充":[106.110698,30.837793],"天津":[117.2,39.13],"富陽":[119.95,30.07],"泰安":[117.13,36.18],"諸暨":[120.23,29.71],"鄭州":[113.65,34.76],"哈爾濱":[126.63,45.75],"聊城":[115.97,36.45],"蕪湖":[118.38,31.33],"唐山":[118.02,39.63],"平頂山":[113.29,33.75],"邢臺":[114.48,37.05],"德州":[116.29,37.45],"濟寧":[116.59,35.38],"荊州":[112.239741,30.335165],"宜昌":[111.3,30.7],"義烏":[120.06,29.32],"麗水":[119.92,28.45],"洛陽":[112.44,34.7],"秦皇島":[119.57,39.95],"株洲":[113.16,27.83],"石家莊":[114.48,38.03],"萊蕪":[117.67,36.19],"常德":[111.69,29.05],"保定":[115.48,38.85],"湘潭":[112.91,27.87],"金華":[119.64,29.12],"岳陽":[113.09,29.37],"長沙":[113,28.21],"衢州":[118.88,28.97],"廊坊":[116.7,39.53],"菏澤":[115.480656,35.23375],"合肥":[117.27,31.86],"武漢":[114.31,30.52],"大慶":[125.03,46.58]};

echart地圖各區域顏色自定義

//封裝地區顏色function areaColor(){//分區不明 勿噴//華南var south = ["廣東", "廣西", "海南", "福建", "云南", "貴州"];//華東var east = ["上海", "江蘇", "浙江", "安徽", "江西", "福建","山東","臺灣"];//華北var north = ["北京", "天津", "河北", "山西", "內蒙古"];//西北var northWest = ["甘肅", "新疆", "青海", "寧夏"];//西南var southWest = ["重慶", "四川", "貴州", "云南", "西藏"];//東北var northEast = ["黑龍江", "吉林", "遼寧"];//華中var middle = ["河南", "湖北", "湖南","陜西"];var result = [];// for(var i=0; i<34; i++){// result[i] = {};// result[i]["name"]// }////單個省份顏色function area(arr,color){var res = [];for(var i=0; i<arr.length; i++){res[i] = {};res[i]["name"] = arr[i];res[i]["itemStyle"] = {"areaColor":color};result.push(res[i]);}//console.log(res);return res;}//按地區填充顏色//華北 華南 東北 西北 西南 華東//['#c52f1b','#fa8e09','#f5cb30','#f85b35','#938bde','#dcaff5']area(north,'#c52f1b');area(south, '#fa8e09');area(northEast, '#f5cb30');area(northWest, '#f85b35');area(southWest, '#938bde');area(east, '#dcaff5');area(middle, '#f59348');console.log(result);return result; }

如何填入地區顏色？

geo.regions:areaColor(),//偽代碼

//地圖樣式 geo:{map:'china',//設置滾輪縮放地圖roam:true,//區域名字設置label:{position:'top',normal:{show:true,textStyle:{fontSize:14,color:'#eee'}},emphasis:{textStyle:{fontSize:14,color:'#fff'}}},//省份填充顏色regions:areaColor(),itemStyle:{borderColor:'rgba(255,255,255,0.5)',borderWidth:1,//設置地圖區域陰影shadowColor:'rgba(255,255,255,0.5)',//shadowColor:'rgba(0,0,0,1)',//shadowOffsetX:-2,//shadowOffsetY:2,shadowBlur:7},emphasis:{itemStyle:{color:'#ffb248'},borderWidth:0}}, //視覺映射 右上角 visualMap:[{top:10,right:10,min:100,max:8000,//映射第2列的數據dimension:2,//tip分段型type: 'piecewise',textStyle:{color: '#fff',},borderRadius:3,//tip框背景//backgroundColor:'rgba(0, 0, 0,0.5)',pieces:[{min:5000},{min:1000,max:5000},{min:500,max:1000},{min:100,max:500},{min:0,max:100}],inRange:{color:['#333','green','blue','red','#fff']}} ],

series中映射到map的data項

{ type:'effectScatter', zlevel:2, symbol:'triangle', symbolSize:12, opacity:1, //設置漣漪效果 rippleEffect:{scale:2.5 }, tooltip:{formatter:function(param){return ["城市: "+ param.data[3]+'</br>'+"訂單數量: "+ param.data[2]]} }, itemStyle:{borderType:'solid',borderColor:'#eee',//opacity:0.2,//borderWidth:1,//shadowColor:'rgba(0,0,0,0.8)',//shadowBlur:15 }, emphasis:{itemStyle:{opacity:1}}, encode: {tooltip:[3,2]}, coordinateSystem:'geo', map:'china', //dimensions:["經度", "緯度", "訂單數量"], data:convertData(data) },

總結

以上是生活随笔為你收集整理的echart地图知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

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