echarts中的地图实战记录（一）

最新推荐文章于 2024-08-05 05:00:00 发布

busiying119

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量952

点赞数 1

分类专栏： echarts实战文章标签： echarts map 自定义地图地图分类数据

本文链接：https://blog.csdn.net/busiying119/article/details/75069033

版权

本文记录了使用Echarts实现广西省地图展示各地危险事件分布的过程。通过下载Echarts的广西地图JSON，结合异步后台数据，将分类信息（高、中、低）动态加载到市级和市内节点。详细步骤包括地图加载、数据注入、子节点添加及鼠标滑动时的数据显示。提供了一种Echarts自定义地图的实践方案。

摘要由CSDN通过智能技术生成

最近公司需要一个展示广西省的各地节点的危险事件分布图，作为大屏幕投影的首页展示。按照公司惯例使用echarts来实现,不多说直接上代码：

<!-- 为ECharts准备一个具备大小（宽高）的Dom  广西地图-->
           <div id="main1" style="min-height:460px; width:100%"></div>

然后就是echarts的js调用方法：

// 基于准备好的dom，初始化echarts图表
   var myChart = echarts.init(document.getElementById('main1')); 
   
   
   
			
			
			
			
			var geoCoordMap;
			
			
			function convertData(data) {
			   var res = [];
			   for (var i = 0; i < data.length; i++) {
			       var geoCoord = geoCoordMap[data[i].name];
			       if (geoCoord) {
			           res.push({
			               name: data[i].name,
			               value: geoCoord.concat(data[i].value)
			           });
			       }
			   }
			   return res;
			}
			
			function randomValue() {
			    return Math.round(Math.random()*1000);
			}
   
   	$.get('js/build/dist/guangxi.json', function (geoJson) {
	   
	  	echarts.registerMap('guangxi', geoJson);




		 $.ajax({   
		 	       type: "post",
		 	       url:'/xxx.do?parm=parm', 
		 	       data:{},
		 	       dataType: "json",
		 	       cache: false,
		 	       beforeSend: function () {
			 	       
		 		   },
		 	       success:function(result) {
		 	       
		 	       
		 	      var data1 = result.series[0].mydata1;
		var	data2 = result.series[0].mydata2;
		var	data3 = result.series[0].mydata3;
			
			
			
			
			geoCoordMap = {
			   '中调':[108.45,22.98],'柳州':[108.45,23.98]
			   
			};
			
	    myChart.setOption(option11 = {
	        title: {
		        text : '广西省地图展示分布情况',
				 textStyle : {
		            color: '#fff'
		        }
	    	},
	    
	        tooltip: {  
            trigger: 'item',  
            formatter: function(params) {  
                var res = params.name+'<br/>';  
                var myseries = option11.series;  
                for (var i = 0; i < myseries.length; i++) {  
                    for(var j=0;j<myseries[i].data.length;j++){
                    	
                        if(myseries[i].data[j].name==params.name){  
                        	if(myseries[i].type == 'scatter'){
                        	res+=myseries[i].name +' : '+myseries[i].data[j].value[2]+'</br>';
                        	}else{
                            res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';  
                            }
                        }  
                    }  
                }  
                return res;  
            }