echart地图知识点

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地图知识点的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。