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合并地图,把中国各个省份分成'华北','东北','华东','华中','华南','西南','西北'七个大区

原文地址:https://www.cnblogs.com/zzwlong/p/10338950.html

时间: 2024-11-09 10:21:50

echarts合并地图,把中国各个省份分成'华北','东北','华东','华中','华南','西南','西北'七个大区的相关文章

echarts地图中城市与省份之间的切换

在使用echarts地图中,可能会用到显示各省份的数据和显示各城市的数据.综合了这两种的配置项,只需传四个参数即可完成对这两种模式的切换. 下面就是配置项代码: //地图配置 //mapData:图表所需数据:mapType:地图模式或散点图模式(即按省份显示数据或按城市显示数据) //minValue:视觉映射组件最小值:maxValue:视觉映射最大值 function _setMap(mapData, mapType, minValue, maxValue) { var option =

echarts的地图省份颜色自适应变化

在使用echarts的地图的时候省份的颜色可能随着数据的多少显示不同的颜色,但是当后台返回的数据的变化较大时可能就不好控制了,所以需要设置根据后台的数据进行自适应 将后台返回的数据中的value放入一个新的数组中,然后取出数组中的最大值来设置给echarts的visulMap的max属性,并将最小值设置给min属性,当后台没有数据返回的时候会报错,所以要进行一下判断 这里取最大值和最小值使用的是扩展运算符配合Math.max/Math.min来实现的 //data是后台返回的数据var leng

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

echarts Map(地图) 不同颜色区块显示

echarts Map(地图) 不同区块显示 这里以重庆地图为例 配置项: var option = { title : { text: '重庆市', subtext: '', x:'left' }, tooltip : { trigger: 'item', formatter: '{b}', itemSize:'14px' }, legend: { orient: 'vertical', x:'center', data:['重庆市区县'] }, dataRange: { x: 'left',

几个不错的echarts +百度地图 案例

https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/editor.html?c=effectScatter-bmap 空气质量等,可以通过值来控制点的大小和光环. https://echarts.baidu.com/examples/editor.html?c=heatmap-bmap 人流密度图.热力图等 我的echarts+百度地图 左上角可以切换地图和

Echarts mc地图

Echarts mc地图 echarts官网实例: https://gallery.echartsjs.com/editor.html?c=xSNlA5O-zl 效果: 代码: <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src

Echarts Map地图类型使用

使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/article/details/44851781),祝好. <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body

【 地图 】 中国各省市县级 JSON 文件

很多朋友在找中国各省具体到市县级的 JSON 地图文件,这些天承蒙朋友帮助,总算找到了.我花了一些时间对格式做了简化,总算是整理好了,希望分享给大家. 各省份的地图整理如下,各文件能够直接在 [入门 - 第 10 章]介绍的例子中运行,改个文件名即可. 本文件由上官真心网友提供,感激不尽. 中国:china.json 安徽:anhui.json 北京:beijing.json 重庆:chongqing.json 福建:fujian.json 甘肃:gansu.json 广东:guangdong.

ECharts系列 - 地图 实例一

ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/echarts-2.1.8.zip ECharts官方实例:  http://echarts.baidu.com/doc/example.html ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html 1.项目结构 js文件夹: 下载了EChar