echarts地图展示，地图数据封装，动态轮播每个有数据的省份

最新推荐文章于 2024-06-18 23:07:15 发布
最新推荐文章于 2024-06-18 23:07:15 发布
阅读量582 收藏 2
点赞数
分类专栏： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wly_er/article/details/85231223
版权

echarts地图展示，地图数据封装，动态轮播每个有数据的省份 

每1分钟定时轮播一个有数据的省份。若点击省份，则重置定时器，进入该省份，展示数据。

 

/**
 * 
 */
$(function () {
	safeDefenseData.init();
});
var safeDefenseData = {
	mapData: null,//地图数据
	provinceIndex: -1,//省份下标
	totalProvince: 0, //有数据的总省份数
	currentTab: 1,// 选中tab
	init : function(){
		this.mapChart = this.mapChart();
	},
		
	// 地图
	mapChart:function(){
		var _this = this;
    	var option = {
   			tooltip: {
	            trigger: 'item',
	            /*formatter: function(data){
	                if( !isNaN(data.value) ){
	                    return data.name+'<br/>报警数：'+data.value+'次';
	                }
	            }*/
	        },
	        grid: {
		    	top: 30,
		    	left: 10,
		        right: 10,
		        bottom: 0,
		        containLabel: true
		    },
	         series: [{
	           name: '报警统计',
               type: 'map',
               mapType: 'china', // 自定义扩展图表类型
               zoom: 1.25,
               itemStyle:{
                   normal:{
                   	label:{
                   	    show:true,
                   	    color:'#ccc',
                   	},
                   	areaColor: 'rgba(0,0,0,0.2)',
                   	borderColor:'#49c7e2',
                   },
                   emphasis:{
	                   	label:{
	                	    show:true,
	                	    color:'#ccc',
	                	},
	                	areaColor: '#49c7e2',
                   }
                },
                markPoint: {//图形
                	symbol: 'path://m 0,0 a 20 20 0 0 1 20 -20  h 48 a 20 20 0 0 1 20 20 v 20 a 20 20 0 0 1 -20 20 h -30  l -6,20 l -6,-20 h -6  a 20 20 0 0 1 -20 -20  z',
                	symbolSize: function(val){
                        return [textSize(val,"12px").width+15,30]
                    },
                    symbolKeepAspect: true,
                    symbolOffset: ['34%', '-80%'],
                    label: {
                        normal: {
                            position:'insideTop',
                            show: true,
                            distance: 6,
                            formatter: '{c}',
                            textStyle:{
                                color:'#ffffff',
                               
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: ['#35B3E2']
                        },
                        emphasis: {
                            color: ['#35B3E2']
                        }
                    },
                    markArea: {
                        itemStyle: {
                            normal: {
                                color: ['#ffffff'],
                            }
                        }
                    },
                   data:[],
                },
                data:[],
		    }]
   	    };
    	var myChart = echarts.init(document.getElementById('mapChart'));
        myChart.setOption(option);
        myChart.on('click', function (params) {
		    if(params.componentType == 'markPoint' && option.series[0].mapType == 'china' && !params.data.children){
        		global.ajaxLoading.pop("当前省份无数据，不能点击进行切换!",false,2000);
        		return;
        	}
	    	if(option.series[0].mapType == 'china'){//进省份
	    		var provinceName = params.data.name.substring(0,2);
			    var provinceData = [];
			    if(params.componentType == 'markPoint'){
			    	provinceData = params.data.children;
			    }else{
			    	// 获取数据
			    	var isExist = false;
			    	if(provinceName != ''){
			    		for(var i = 0; i<_this.mapData.length;i++){
				    		if(_this.mapData[i].name.indexOf(provinceName)>-1){//是该省份，有数据
				    			provinceData = _this.mapData[i].children;
				    			isExist = true;
				    			break;
				    		}
				    	}
				    	if(!isExist){
				    		global.ajaxLoading.pop("当前省份无数据，不能点击进行切换!",false,2000);
			        		return;
				    	}
			    	}
			    }
	    		$.get(appCtx+'resources/js/common/plugin/echarts/map/'+encodeURIComponent(provinceName)+'.json', function (geoJson) {
    				echarts.registerMap(provinceName, geoJson);
    				option.series[0].mapType = provinceName;
    	    		option.series[0].markPoint.data = provinceData;
    	    		option.series[0].data = provinceData;
    	    		if(provinceName.indexOf('海南')>-1) { //由于海南地图包括南海及南海诸岛在内的大片区域，所以显示海南地图时，要将地图放大，并设置海南岛居中显示
    	        		option.series[0].center = [109.844902, 19.0392];
    	        		option.series[0].layoutCenter = ['50%', '58%'];
    	        		option.series[0].layoutSize = "600%";
    	    		} else { //非显示海南时，将设置的参数恢复默认值
    	    			option.series[0].center = undefined;
    	    			option.series[0].layoutCenter = undefined;
    	    			option.series[0].layoutSize = undefined;
    	    		}
    				_this.mapChart.refresh(option);
    				_this.setTimer(_this.mapChart);
    	    		/*window.onresize = function () {
    	 	           myChart.resize();
    	 	        };*/
    			});
	    	}else{//进全国
	    		$.get(appCtx+'resources/js/common/plugin/echarts/map/'+encodeURIComponent('全国')+'.json', function (geoJson) {
					echarts.registerMap('china', geoJson);
					option.series[0].mapType = 'china';
		    		option.series[0].markPoint.data = _this.mapData;
		    		option.series[0].data = _this.mapData;
		    		option.series[0].center = undefined;
					option.series[0].layoutCenter = undefined;
					option.series[0].layoutSize = undefined;
					_this.mapChart.refresh(option);
					_this.setTimer(_this.mapChart);
		    		/*window.onresize = function () {
		 	           myChart.resize();
		 	        };*/
				});
	    	}
        });
        $(window).resize(function () {          //当浏览器大小变化时
            myChart.resize();
        });
        return {
	       	refresh : function(option){
	       		myChart.setOption(option,true);
	       	},
	       	option : option,
        };
	},
	
	// 地图数据
	getMapChartData:function(){
		var _this = this;
		var option = _this.mapChart.option;
		var data = {"山东省":{"德州市":{"alarmNum":11},"德州市1":{"alarmNum":11}},"海南省":{"海口市":{"alarmNum":11}},"贵州省":{"贵阳市":{"alarmNum":122},"遵义市":{"alarmNum":51}},"广东省":{"广州市":{"alarmNum":15}},"北京市":{"北京市":{"alarmNum":21}},"河北省":{"衡水市":{"alarmNum":31}}};
		if(data){
			_this.checkMapData(data);
			if(_this.mapData.length>0){
				option.series[0].mapType = 'china';
				option.series[0].markPoint.data = _this.mapData;
				option.series[0].data = _this.mapData;
				option.series[0].center = undefined;
				option.series[0].layoutCenter = undefined;
				option.series[0].layoutSize = undefined;
				_this.mapChart.refresh(option);
				_this.setTimer(_this.mapChart);
			}else{
				_this.provinceIndex = -1;
				option.series[0].markPoint.data = [];
		      	option.series[0].data = [];
		      	_this.mapChart.refresh(option);
			}
		}else{
			option.series[0].markPoint.data = [];
	      	option.series[0].data = [];
	      	_this.mapChart.refresh(option);
		}
    	
	},

	// 设置定时器
	setTimer: function(chart){
		var _this = this;
		if(chart.option.series[0].mapType == 'china'){//如果已经是全国了，就直接遍历轮播省份
			_this.provinceIndex = 0;
		}else{//如果是省份，就先进入全国，重新遍历
			_this.provinceIndex = -1;
		}
		if(_this.timer){
    		clearInterval(_this.timer);
    	}
    	_this.timer = setInterval(function(){
    		_this.handleMapData(chart);
    	}, 1000*60*1);//1分钟
	},
	
	//数据检查处理
	checkMapData: function(result){
		var _this = this;
		var mapData = [];
		for(var key in result){
    		if(key.length>=2 && (geoCoordMap[key.substring(0,2)] || geoCoordMap[key.substring(0,3)])){//省份存在
    			var children = [];
    			var total = 0; //省份总数
	    		for(var childKey in result[key]){
	    			if(geoCoordMap[childKey]){//判断市是否存在
	    				total += result[key][childKey].alarmNum;
	    				children.push({
	    					name: childKey,
	    					value: result[key][childKey].alarmNum,
	    					coord: geoCoordMap[childKey]
	    				});
	    			}else{
	    				delete result[key][childKey];
	    			}
	    		}
	    		if(children.length>0){//避免存在无效数据,删除children为空的父对象
	    			var obj = {
	    					name:key,
	    					children:children,
	    					value: total,
	    					coord: geoCoordMap[key.substring(0,2)]?geoCoordMap[key.substring(0,2)]:geoCoordMap[key.substring(0,3)]
	    			};
	    			mapData.push(obj);
	    		}else{
	    			delete result[key];
	    		}
    		}else{
    			delete result[key];
    		}
    	}
		_this.mapData = mapData;
		_this.totalProvince = mapData.length;
		return result;
	},
	
	/*
	 * 地图数据封装
	 * chart 需要改变的echart
	 * */
	handleMapData: function(chart){
		var _this = this;
		var option = chart.option;
		if(_this.provinceIndex != -1 && _this.provinceIndex < _this.totalProvince){//省份中还有数据，继续遍历
			var province = _this.mapData[_this.provinceIndex];// 省份数据
			var provinceData = province.children;// 省份中的市级数据
			var provinceName = province.name.substring(0,2);// 省份名
			$.get(appCtx+'resources/js/common/plugin/echarts/map/'+encodeURIComponent(provinceName)+'.json', function (geoJson) {
				echarts.registerMap(provinceName, geoJson);
				option.series[0].mapType = provinceName;
	    		option.series[0].markPoint.data = provinceData;
	    		option.series[0].data = provinceData;
	    		if(provinceName.indexOf('海南')>-1) { //由于海南地图包括南海及南海诸岛在内的大片区域，所以显示海南地图时，要将地图放大，并设置海南岛居中显示
	        		option.series[0].center = [109.844902, 19.0392];
	        		option.series[0].layoutCenter = ['50%', '58%'];
	        		option.series[0].layoutSize = "600%";
	    		} else { //非显示海南时，将设置的参数恢复默认值
	    			option.series[0].center = undefined;
	    			option.series[0].layoutCenter = undefined;
	    			option.series[0].layoutSize = undefined;
	    		}
	    		chart.refresh(option);
				if(_this.provinceIndex == _this.totalProvince-1){//最后一个了
					_this.provinceIndex = -1;
				}else{
					_this.provinceIndex = _this.provinceIndex + 1;
				}
	    		/*window.onresize = function () {
	 	           myChart.resize();
	 	        };*/
			});
		}else{//所有省份全部遍历完了，进入全国
			$.get(appCtx+'resources/js/common/plugin/echarts/map/'+encodeURIComponent('全国')+'.json', function (geoJson) {
				echarts.registerMap('china', geoJson);
				option.series[0].mapType = 'china';
	    		option.series[0].markPoint.data = _this.mapData;
	    		option.series[0].data = _this.mapData;
	    		option.series[0].center = undefined;
				option.series[0].layoutCenter = undefined;
				option.series[0].layoutSize = undefined;
				chart.refresh(option);
				if(_this.totalProvince>0){
					_this.provinceIndex = 0;
				}else{
					_this.provinceIndex = -1;
				}
	    		/*window.onresize = function () {
	 	           myChart.resize();
	 	        };*/
			});
		}
	}
}
/**
 * 获取文本宽高
 * @param text       文本
 * @param fontSize   代表汉字的大小，英文字会自动按照默认值
 * @returns {{width: *, height: *}}
 */
function textSize(text,fontSize) {
    var span = document.createElement("span");
    var result = {
        "width": span.offsetWidth,
        "height": span.offsetHeight
    };
    span.style.visibility = "hidden";
    span.style.fontSize = fontSize || "12px";
    document.body.appendChild(span);

    if (typeof span.textContent != "undefined")
        span.textContent = text || "国";
    else span.innerText = text || "国";

    result.width = span.offsetWidth - result.width;
    result.height = span.offsetHeight - result.height;
    span.parentNode.removeChild(span);
    return result;
}

注意点：

1.切换地图的时候，setOption里面要true，就是重新渲染，否则，地图鼠标移至地图上时，省份数据会拿不到

refresh : function(option){
	      myChart.setOption(option,true);
},

用到的文件

1.地图地区坐标数据、省份数据文件

https://download.csdn.net/download/wly_er/10872143

wly_er
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Echarts地图+覆盖物提示框轮播效果
02-18
提示：springboot项目，下载之后需要运行该项目，然后才能访问看到效果。代码不多，谨慎下载。 主要功能：地图缩放拖动、区域点击往返市区地图、双击地图全屏放大、轮播带图片提示框 需要的快去下载吧！！！
echarts地图 可视化大屏使用echarts-map实现地图轮播效果
qq_45630675的博客
12-09 6550
echarts-map 地图实现轮播效果
Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示
最新发布
2401_84418883的博客
06-18 606
/使用setInterval方法后,必须使用箭头函数而不能写function,否则后续在该方法中无法调用data中的数据。//setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。//carouselTime =setInterval(function(){ //错误写法。type: “downplay”, //downplay 取消高亮指定的数据图形。type: “highlight”, //highLight 高亮指定的数据图形。
使用Echarts实现地图展示
一只没有脚的鸟
12-30 3441
使用echarts动态展示城市的数量统计
echarts数据地图自动轮播展示
yu_yuxiaoer的博客
07-04 1855
地图
使用echarts+echarts-gl绘制3d地图，实现地图轮播效果
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
07-11 1万+
记录一下大屏开发中使用到的echarts-gl大屏的页面根据需求前前后后改了几个版本了，地图的样式也改了又改这里记录一下，因为echarts属性用到的比较多也比较杂，防止以后需要用到忘记了。
echarts全国地图包JSON数据，封装图形示例
05-17
集合了echarts全国地图包JSON数据，封装图形示例，json数据详细到乡镇，参考项目，你值得拥有
中国地图数据源js格式
12-16
这些数据可能包括了每个省份或城市的坐标信息、行政边界等，以便在地图上精确展示。 “2d/3d地图数据源”意味着这些数据不仅可以用于绘制二维（2D）地图，也可以用于构建三维（3D）地图效果。在ECharts中，可以通过...
基于echarts的地图封装并展示了一种地图钻取的方法
06-12
总的来说，基于ECharts的地图封装和地图钻取是一个结合了数据可视化、事件处理和动态数据加载的复杂过程。通过这样的技术，我们可以构建出交互性强、信息丰富的地图应用，帮助用户深入理解和分析地理分布数据。在...
Echarts 地图 东莞和中山地图 json js vue.zip
08-14
在地图绘制方面，Echarts 提供了内置的地图数据，可以方便地展示中国各省份、城市甚至县区的地图。 JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。...
echarts最新中国地图jsjson数据文件.zip
12-31
具体到这个压缩包，"echarts最新中国地图jsjson数据文件"很可能包含了一个或多个.js文件，这些.js文件内部封装了JSON格式的地理数据。在使用时，开发者需要将这些数据加载到ECharts实例中，通过配置项设定地图的显示...
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
03-29 7447
要实现的功能 代码实现 1、安装依赖 npm i echarts -s
echarts地图显示数据
PEACEMINUSON的博客
02-16 990
【代码】echarts地图显示数据。
echart实现地图展示
u010289111的专栏
06-01 2057
但是实现的时候发现了一个问题平台下载下来的地图文件是有一百多kb的有点大。我是选择了其它类型下的FeatureCollection类型然后直接下载到本地，在项目里面引入的。// color: '#6cb3e4', //标志颜色。text: ['高', '低'], // 文本，默认为数值文本。import geoJson from './hunan.json' //地图包。// aspectScale: 0.75, //长宽比。// name: '点',
基于Echarts的中国地图数据展示
神尐破
08-23 1097
实际项目中大概率会遇到很多需要进行数据展示的地方，如折现图，柱状图等，今天给大家介绍一个更加炫酷的中国地图大数据展示，结合echarts免费开源第三方插件，可以实现自己的定制样式，定制提示。
echarts——实现2D地图+各省份数据展示——技能提升
yehaocheng520的博客
12-01 3603
echarts——实现2D地图+各省份数据展示——技能提升
vue + echarts+地图实现功能，实现地图上数据显示，四川省地图echarts地市数据案列
qq_41180882的博客
03-20 2596
1、首先需要下载对应的地图，如果是联网的可以直接下载一个，实现下钻，可自行去搜索或者实现，本文主要为离线地图2、下载需要的对应地图包后，进入下一步编辑3、还需要拿到各个地区的经纬度，可以到网上去经纬度地方上去搜然后点击后获取，也可以在我们做的echarts地图上点击获取
Echarts 地图使用，以及tooltip轮播使用
qinjinhua_的博客
10-09 4996
echarts地图使用 tootip
echarts的使用——绘制地图（包括省份 城市），实现轮播高亮
热门推荐
weixin_39150852的博客
06-06 1万+
echars geomap
echarts数据封装
08-23
在封装ECharts数据时，你可以使用不同的方法来处理不同的图表类型。下面是两个示例的方法： 1. 饼图数据拼装方法：在这个方法中，首先需要传入一个包含图表数据的Map对象。然后通过遍历数据列表，将每个数据项的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值