echarts 地图 热点 统计图

前端统计效果图可用echarts.js来完成，它提供了丰富的效果图 （数据来自本地数据库测试数据，毫无参考意义）

程序效果图

实现步骤

1.加载所需的地图文件，和完全的echart.js ，还有自己需要表现的js逻辑脚步文件，前两个导入即可，后一个自己写的逻辑userdistribution.js  前端jsp 文件 当然还需要加载jquery.js的文件（自行下载）

360云盘文件提取路径如下

https://yunpan.cn/OcPVgcfMujS3VA （提取码：341c）

https://yunpan.cn/OcPVgLXUEVEHkq （提取码：15e6）

https://yunpan.cn/OcPVgufMdmcFIA （提取码：ada1）

https://yunpan.cn/OcPVgMs3JhcgYg （提取码：5d69）

https://yunpan.cn/OcPVAHwfR5eFfI （提取码：444b）

2.源码分析 主要是userdistribution.js

/**
 * author jinwang
 * 用户分布js echart
 */
//这三个变量是项目中用的的用户数据，工程师数据，和工程师用户合并的数据 maxNum为地图热点最大值，值越靠近maxNum地图颜色越浓
var jsonC=[],jsonE=[],jsonU=[],maxNum=0;

//解析前端的数据，封装数据 前端的数据 是json格式的 {success:'',data:data,....} data.data是一个列表 里面是一个bean 里面有pro 和 username两个属性
function analysisData(data){
	var temp={};
	temp.name=data.pro;
	temp.value=data.usernum;
	if(data.type==1){
		//往数组的末尾添加数据
		jsonC.push(temp);
	}else if(data.type==2){	
		jsonE.push(temp);
	}	
}
//判读pro在不在jsonU中 在返回 数组的下标
function testProNo(pro){
	var flag = -1;
	for(var i = 0;i{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	        data: dataLegend //前面解析出来的类别
	    },
	    series : [
	        {
	            name: '分布人数',
	            type: 'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:jsonC,//替换前面加载的数据 json格式的数组，可以去echart官网上看，它的格式是[{name:'',value:''},{name:'',value:''}]
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};	
	// 为echarts对象加载数据   
	myChart.setOption(option);	
	
}
//工程师的饼图
function getChartByEng(myChart){
	var dataLegend  = [];
	for(var i = 0 ;i{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	        data: dataLegend
	    },
	    series : [
	        {
	            name: '分布人数',
	            type: 'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:jsonE,
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};
	// 为echarts对象加载数据   
	myChart.setOption(option);		
	
}


//根据json的数据动态修改html的内容 及左边的列表数据
function loadListUserNum(){
	var $p = $(".usernum"),	$temp = $p.find(".usernumtemp>div");
	$p.find(".usernum_labs").html("");
	for (var i = 0; i 0){
			 $cl.children().eq(2).html(user.cnum);
		 }else{
			 $cl.children().eq(2).html(0);
		 }
		 if(user.enum>0){
			 $cl.children().eq(4).html(user.enum);
		 }else{
			 $cl.children().eq(4).html(0);
		 }
		 $p.find(".usernum_labs").append($cl);
	}
	
}
//合并jsonE,和jsonC 变更成{name:'',cnum:'',enum:''}
function bindUser(tList){
	for (var i = 0; i 0){
            			maxNum=maxNum+num;
            		}
            	}  //得到数据之后 就开始加载相关的图形
            	bindUser(tList);
            	getChart(myChart); 
            	getChartByCust(echarts.init(document.getElementById('custchart')));
            	getChartByEng(echarts.init(document.getElementById('engchart')));
            }
        }, 500);
    };
    var err = function (jqXHR, textStatus, errorThrown) {
    }
    var options = {
        beforeSend: beforeSend,
        success: doSuc,
        error: err,
        cache:false,
        dataType: "json",
        type: 'post'
    };
    $.ajax(url,options);
}

$(function () {
	 var myChart = echarts.init(document.getElementById('main'));	  
	 fetchUserNum(myChart);	
});