echarts合并地图，把中国各个省份分成'华北','东北','华东','华中','华南','西南',&
Posted zzwlong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts合并地图，把中国各个省份分成'华北','东北','华东','华中','华南','西南',&相关的知识，希望对你有一定的参考价值。
最近公司有个需求是按照大区，即把中国分成华北\',\'东北\',\'华东\',\'华中\',\'华南\',\'西南\',\'西北\'七个大区，
但是echarts地图只有省市，还没有大区，只能自己网上找资料再按需求写了
echarts地图合并关键点是把coordinates和encodeOffsets合并，而且这两个必须都合并，且最多只能合并到二维数组，合并到三维数组就不行了。
实例结果截图
代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>echarts地图合并-生成中国大区</title> </head> <body> <div class="echarts-map"> <div class="echarts-map-box" id="echartsMapBox" style="width: 1000px;height: 400px;"></div> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/china.js"></script> <script type="text/javascript"> $(document).ready(function(){ repRegionStrategy(); }) var mergeProvinces = function(chinaJson, names, properties) {//合并大区里省份的coordinates var features = chinaJson.features; var polygons = []; var polygons2 = []; for(var i = 0; i < names.length; i++) { var polygonsCoordinates = []; var polygonsEncodeOffsets = []; for(var z = 0; z < names[i].length;z++){ for(var j = 0; j < features.length; j++) { if(features[j].properties.name == names[i][z]) { if(features[j].geometry.coordinates[0].constructor == String){//合并coordinates for(var l = 0; l<features[j].geometry.coordinates.length;l++){ polygonsCoordinates.push(features[j].geometry.coordinates[l]); } }else if(features[j].geometry.coordinates[0].constructor == Array){ for(var k=0;k<features[j].geometry.coordinates.length;k++){ for(var d=0;d<features[j].geometry.coordinates[k].length;d++){ polygonsCoordinates.push(features[j].geometry.coordinates[k][d]); } } } if(features[j].geometry.encodeOffsets[0].constructor == String){//合并encodeOffsets polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets); }else if(features[j].geometry.encodeOffsets[0].constructor == Array){ for(var k=0;k<features[j].geometry.encodeOffsets.length;k++){ if(features[j].geometry.encodeOffsets[k][0].constructor == Array){ for(var e=0;e<features[j].geometry.encodeOffsets[k].length;e++){ polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k][e]); } }else{ polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k]); } } } break; } } } polygons.push(polygonsCoordinates); polygons2.push(polygonsEncodeOffsets); } // 构建新的合并区域 var features = []; for(var a = 0;a<names.length;a++){ var feature = { id: features.length.toString(), type: "FeatureCollection", geometry: { type: "Polygon", coordinates: polygons[a], encodeOffsets: polygons2[a] }, properties: { name: properties.name[a] || "", childNum:polygons[a].length } }; if(properties.cp[a]) { feature.properties.cp = properties.cp[a]; } // 将新的合并区域添加到地图中 features.push(feature); } chinaJson.features = features; }; function repRegionStrategy(){debugger; $.get(\'js/china.json\', function (chinaJson) { var params = { names: [//把各个大区的省份用二维数组分开 [\'北京\',\'天津\',\'河北\',\'山西\',\'内蒙古\'], ["黑龙江","吉林","辽宁"], [\'山东\',\'江苏\',\'安徽\',\'江西\',\'浙江\',\'福建\',\'上海\',\'台湾\'], [\'河南\',\'湖北\',\'湖南\'], [\'广东\',\'广西\',\'海南\',\'香港\',\'澳门\'], [\'重庆\',\'四川\',\'云南\',\'西藏\',\'贵州\'], [\'陕西\',\'甘肃\',\'青海\',\'宁夏\',\'新疆\'] ], properties: {//自定义大区的名字，要和上面的大区省份一一对应 name: [\'华北\',\'东北\',\'华东\',\'华中\',\'华南\',\'西南\',\'西北\'], cp: [//经纬度可以自己随意定义 [116.24,39.54], [126.32,43.50], [121.28,31.13], [114.20,30.32], [113.15,23.08], [104.04,30.39], [103.49,36.03] ] } }; mergeProvinces(chinaJson, params.names, params.properties); echarts.registerMap(\'china\', chinaJson); // 注册地图 var pRChart = echarts.init(document.getElementById(\'echartsMapBox\')); var data = [//地图数据 { "name": "东北", "value": 3685 }, { "name": "华北", "value": 7342 }, { "name": "华南", "value": 21416 }, { "name": "华东", "value": 25314 }, { "name": "华中", "value": 2500 }, { "name": "西南", "value": 10427 }, { "name": "西北", "value": 2440 } ]; option = { backgroundColor: \'#fff\',//地图背景色 title : { text: \'营销策略\', left: \'center\', top: \'top\', textStyle: { color: \'#333\' } }, grid: { //echarts地图距离容器位置 left:20, top:20, containLabel: false, }, tooltip: {//鼠标放上去提示 trigger: \'item\' }, //左侧小导航图标 visualMap: { show : true, type: \'continuous\', // 定义为连续型 viusalMap min:10, //指定 visualMapContinuous 组件的允许的最小值 max:100000, minOpen:true, //界面上会额外多出一个『< min』的选块 maxOpen:true, realtime:true, itemWidth:20, align:"auto", left:"50px", //组件离容器左侧的距离,\'left\', \'center\', \'right\',\'20%\' top:"auto", orient:"vertical", hoverLink:true, inverse:false, text:[\'高\', \'低\'], inRange:{ //定义 在选中范围中 的视觉元素 color: [\'#f6efa6\', \'#ffb61e\', \'#ee9a00\'], symbolSize: [30, 100] }, outOfRange:{ //定义 在选中范围外 的视觉元素。 color: [\'#666\', \'#333\', \'#000\'], symbolSize: [30, 100] } }, series: [ { name: \'大区\',//城市 type: \'map\', map: \'china\', geoIndex: 1, aspectScale: 0.75, //长宽比 symbolSize: 20, data: data, showLegendSymbol: true, // 存在legend时显示 label: { normal: { show: true, textStyle: { color: \'#333\' } }, emphasis: {//鼠标放上去时的状态 show: true, textStyle: { color: \'#333\' } } }, roam: true,//禁止拖拽和伸缩 itemStyle: { normal: { areaColor: \'#f6efa6\', borderColor: \'#a5a279\', borderWidth: 1 }, emphasis: { areaColor: \'#ffdf33\' } } } ] }; pRChart.setOption(option,true); }); } </script> </div> </body> </html>
以上是关于echarts合并地图，把中国各个省份分成'华北','东北','华东','华中','华南','西南',&的主要内容，如果未能解决你的问题，请参考以下文章