hn_cloud_web/smz-screen/js/home/map.js

var addressCount;
var countTrain;
var countExam;
var allWorkerPerson = 0;
var points=new Array();
var areas_map=[
{name:'上海',value:['121.47','31.23']},
{name:'云南',value:['101.72','24.05']},
{name:'内蒙古',value:['111.73','40.83']},
{name:'北京',value:['116.38','39.9']},
{name:'吉林',value:['128.32','43.9']},
{name:'四川',value:['103.07','30.67']},
{name:'天津',value:['119.2','39.12']},
{name:'宁夏',value:['106.28','38.47']},
{name:'安徽',value:['117.25','31.83']},
{name:'山东',value:['119.98','36.67']},
{name:'山西',value:['112.55','37.87']},
{name:'广东',value:['115.27','22.13']},
{name:'广西',value:['108.37','22.82']},
{name:'新疆',value:['87.62','43.82']},
{name:'江苏',value:['122.08','32.07']},
{name:'江西',value:['115.85','26.68']},
{name:'河北',value:['116.52','38.05']},
{name:'河南',value:['113.62','34.75']},
{name:'浙江',value:['122.15','29.28']},
{name:'海南',value:['110.32','20.03']},
{name:'港澳台',value:['114.08','22.2']},
{name:'湖北',value:['114.3','30.6']},
{name:'湖南',value:['111.93','27.23']},
{name:'甘肃',value:['103.82','36.07']},
{name:'福建',value:['119.3','26.08']},
{name:'西藏',value:['91.13','29.65']},
{name:'贵州',value:['106.63','25.65']},
{name:'辽宁',value:['123.43','41.8']},
{name:'重庆',value:['108.55','29.57']},
{name:'陕西',value:['108.93','34.27']},
{name:'青海',value:['101.78','36.62']},
{name:'黑龙江',value:['130.53','48.8']}
];
$(function() {
	gerWorkerPersonAll();
	findScene();
	createEathsMap();
});

function rightDivData(){
	$.ajax({
		type: 'POST',
		url: smz_web_url + 'map/getTrainCount',
		data: {},
		dataType: "json",
		async: false,
		success: function(data) {
			countTrain = data;
		}
	});
}

function leftDivData(){
	$.ajax({
		type: 'GET',
		url: smz_web_url + 'map/getExamCount',
		data: {},
		dataType: "json",
		async: false,
		success: function(data) {
			countExam = data;
		}
	});
}

function rightDiv(){
	
	var myChart = echarts.init(document.getElementById('trainRight'));
	myChart.on('click', function(params) {
			var name = params.name;
			if(params.value>0){
				localStorage.setItem("trainType",name);
				showTrain();
			}
	});
	let series = [];
	let pieDatas = [
	    
	    {
	        "value": countExam['ok'],
	        "name": "合格"
	    },
		{
		    "value": countExam['no'],
		    "name": "不合格"
		}
	];
	let maxRadius =  80,
	    barWidth = 5,
	    barGap =  5;
	let sumValue = 0;
	let showValue = true,showPercent = true;
	pieDatas.map(item => {
	    sumValue += item.value;
	})
	let barColor =  [
	        
	        {
	            "color1": "rgba(75, 226, 110, 1.0)",
	            "color2": ""
	        },
	        {
	            "color1": "rgba(255, 0, 0, 1.0)",
	            "color2": ""
	        }
	    ];
	pieDatas.map((item, i) => {
	    series.push({
	        type: 'pie',
	        clockWise: true, //顺时加载
	        hoverAnimation: false, //鼠标移入变大
	        radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
	        center: [ "30%", "50%"],
	        label: {
	            show: false
	        },
	        itemStyle: {
	            label: {
	                show: false,
	            },
	            labelLine: {
	                show: false
	            },
	            borderWidth: 5,
	        },
	        data: [{
	            value: item.value,
	            name: item.name,
	            itemStyle: {
	                color: barColor[i]&&barColor[i].color1 || 'rgba(68,165,255,1)'
	            }
	        }, {
	            value: sumValue - item.value,
	            name: '',
	            itemStyle: {
	                color: "transparent",
	            },
	            tooltip: {
	                show: false
	            },
	            hoverAnimation: false
	        }]
	    })
	    series.push({
	        name: 'blank',
	        type: 'pie',
	        silent: true,
	        z: 0,
	        clockWise: true, //顺时加载
	        hoverAnimation: false, //鼠标移入变大
	        radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
	        center: [ "30%", "50%"],
	        label: {
	            show: false
	        },
	        itemStyle: {
	            label: {
	                show: false,
	            },
	            labelLine: {
	                show: false
	            },
	            borderWidth: 5,
	        },
	        data: [{
	            value: 1,
	            itemStyle: {
	                color: "rgba(255, 255, 255,.13)",
	                borderWidth: 0
	            },
	            tooltip: {
	                show: false
	            },
	            hoverAnimation: false
	        }]
	    });
	})
	option = {
	    grid: {
	        left:  0,
	        right:  0,
	        top:  0,
	        bottom:  0,
	    },
	    tooltip: {
	        show: true,
	        trigger: "item",
	    },
	    legend: {
	        show: true,
	        left: '60%',
	        top: 'middle',
	        icon: "circle",
	        itemWidth: 10,
	        itemHeight: 10,
	        itemGap:  20,
	        textStyle: {
	            fontSize:  16,
	            color:  '#fff',
	        },
	        formatter: (name) => {
	                var datas = pieDatas;
	                let total = 0;
	                datas.map(item => {
	                    total += (item.value - 0)
	                })
	                let valueIndex = datas.map(item => item.name).indexOf(name);
					return name + "  " + (showValue ? datas[valueIndex].value + (option.legendValueUnit || '') + ' ' : '') ;
	                // return name + "  " + (showValue ? datas[valueIndex].value + (option.legendValueUnit || '') + ' ' : '') + (showPercent ? ((datas[valueIndex].value / total) * 100).toFixed(2) + "%" : '');
	            } ,
	    },
	    series: series,
	};
	myChart.setOption(option,true);
}

//教育培训
function showTrain(){
	var index = top.layer.open({
		title: false,
		type: 2,
		content: '../../page/tarin/trainInfo.html',
		area: ['90%', '90%'],
		maxmin: false
	});
}

function leftDiv(){
	var myChart = echarts.init(document.getElementById('trainLeft'));

	myChart.on('click', function(params) {
			var name = params.name;
			localStorage.setItem("trainType",name);
			showTrain();
	});
	let series = [];
	let pieDatas = [
		{
		    "value": allcountrc,
		    "name": "在场人数"
		},
	    {
	        "value": allcountrc-(countTrain['successCount']+countTrain['noCount']),
	        "name": "未考试人数"
	    },
	    {
	        "value": countTrain['successCount']+countTrain['noCount'],
	        "name": "考试人数"
	    }
	];
	let maxRadius = 80,
	    barWidth = 5,
	    barGap =  5;
	let sumValue = 0;
	let showValue = true,showPercent = true;
	pieDatas.map(item => {
	    sumValue += item.value;
	})
	let barColor =  [
	        {
	            "color1": "rgba(216, 216, 107, 1.0)",
	            "color2": ""
	        },
	        {
	            "color1": "rgba(75, 226, 110, 1.0)",
	            "color2": ""
	        }
	    ];
	pieDatas.map((item, i) => {
	    series.push({
	        type: 'pie',
	        clockWise: true, //顺时加载
	        hoverAnimation: false, //鼠标移入变大
	        radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
	        center: [ "30%", "50%"],
	        label: {
	            show: false
	        },
	        itemStyle: {
	            label: {
	                show: false,
	            },
	            labelLine: {
	                show: false
	            },
	            borderWidth: 5,
	        },
	        data: [{
	            value: item.value,
	            name: item.name,
	            itemStyle: {
	                color: barColor[i]&&barColor[i].color1 || 'rgba(68,165,255,1)'
	            }
	        }, {
	            value: sumValue - item.value,
	            name: '',
	            itemStyle: {
	                color: "transparent",
	            },
	            tooltip: {
	                show: false
	            },
	            hoverAnimation: false
	        }]
	    })
	    series.push({
	        name: 'blank',
	        type: 'pie',
	        silent: true,
	        z: 0,
	        clockWise: true, //顺时加载
	        hoverAnimation: false, //鼠标移入变大
	        radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
	        center: [ "30%", "50%"],
	        label: {
	            show: false
	        },
	        itemStyle: {
	            label: {
	                show: false,
	            },
	            labelLine: {
	                show: false
	            },
	            borderWidth: 5,
	        },
	        data: [{
	            value: 1,
	            itemStyle: {
	                color: "rgba(255, 255, 255,.13)",
	                borderWidth: 0
	            },
	            tooltip: {
	                show: false
	            },
	            hoverAnimation: false
	        }]
	    });
	})
	option = {
	    grid: {
	        left:  0,
	        right:  0,
	        top:  0,
	        bottom:  0,
	    },
	    tooltip: {
	        show: true,
	        trigger: "item",
	    },
	    legend: {
	        show: true,
	        left: '60%',
	        top: 'middle',
	        icon: "circle",
	        itemWidth: 10,
	        itemHeight: 10,
	        itemGap:  20,
	        textStyle: {
	            fontSize:  16,
	            color:  '#fff',
	        },
	        formatter: (name) => {
	                var datas = pieDatas;
	                let total = 0;
	                datas.map(item => {
	                    total += (item.value - 0)
	                })
	                let valueIndex = datas.map(item => item.name).indexOf(name);
					return name + "  " + (showValue ? datas[valueIndex].value + (option.legendValueUnit || '') + ' ' : '') ;
	                // return name + "  " + (showValue ? datas[valueIndex].value + (option.legendValueUnit || '') + ' ' : '') + (showPercent ? ((datas[valueIndex].value / total) * 100).toFixed(2) + "%" : '');
	            } ,
	    },
	    series: series,
	};
	myChart.setOption(option,true);
}


function createEathsMap () {
	
	// var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json";
	var uploadedDataURL = "../../json/china.json";
	$.ajax({
		type: 'POST',
		url: smz_web_url + 'map/getTrainCount',
		data: {},
		dataType: "json",
		async: false,
		success: function(data) {
			countTrain = data;
		}
	});
	for(k in addressCount){
		var key=k;
		var value=addressCount[k];
		for(k1 in areas_map){
			var key1=areas_map[k1].name;
			var value1=areas_map[k1].value;
			if(key==key1){
				if(value!=0){
					var obj1={};
					obj1.value=value1;
					var bfb=value/allWorkerPerson*100;
					obj1.bfb=bfb;
					obj1.name=key1;
					if(bfb>=40){
						obj1.itemStyle={color:'#f56321'};
					}else if(bfb>=20&&bfb<40){
						obj1.itemStyle={color:'#f58414'};
					}else if(bfb>=10&&bfb<20){
						obj1.itemStyle={color:'#f34e2b'};
					}else if(bfb<10){
						obj1.itemStyle={color:'#4ab2e5'};
					}
					points.push(obj1);
				}
			}
		}
	}
	console.log(points);
	var myChart = echarts.init(document.getElementById('mapDiv'));
	
	myChart.showLoading();
	let index = -1;
	      
	$.getJSON(uploadedDataURL, function(geoJson) {
	    
	    echarts.registerMap('china', geoJson);
	    myChart.hideLoading();
		
	    option = {
	        backgroundColor: '#141e39',
			title: {
			            top: 30,
			            text: '人员区域分布图' ,
			            subtext: '',
			            x: 'center',
			            textStyle: {
			                color: '#fcfcfc'
			            }
			        },
			tooltip: {
			    trigger:'item',
			    axisPointer: {
			        type:'cross',
			        crossStyle: {
			            color:'#999'
			        }
			    },
			    formatter:function (params) {
					var countSum = getWokerByAddress(params.name);
			       // console.log(params.name); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
			        return params.name +':' + countSum;
			    }
			},
	        geo: {
			  map: 'china',
	          aspectScale: 0.75, //长宽比
	          zoom: 1.1,
	          roam: false,
	          itemStyle: {
	            normal: {
	              areaColor: {
	                        type: 'radial',
	                        x: 0.5,
	                        y: 0.5,
	                        r: 0.8,
	                        colorStops: [{
	                            offset: 0,
	                            color: '#09132c' // 0% 处的颜色
	                        }, {
	                            offset: 1,
	                            color: '#274d68'  // 100% 处的颜色
	                        }],
	                        globalCoord: true // 缺省为 false
	                    },
	              shadowColor:'rgb(58,115,192)',
	              shadowOffsetX: 10,
	              shadowOffsetY: 11
	            },
	            emphasis: {
	              areaColor: '#2AB8FF',
	              borderWidth: 0,
	              color: 'green',
	              label: {
	                show: false
	              }
	            }
	          },
	          regions: [{
	            name: '南海诸岛',
	            itemStyle: {
	                areaColor: 'rgba(0, 10, 52, 1)',
	
	                borderColor: 'rgba(0, 10, 52, 1)',
	                normal: {
	                    opacity: 0,
	                    label: {
	                        show: false,
	                        color: "#009cc9",
	                    }
	                }
	            },
	
	
	        }],
	        },
	        series: [ {
	            type: 'map',
	            roam: false,
	            label: {
	                normal: {
	                    show: true,
	                    textStyle: {
	                        color: '#1DE9B6'
	                    }
	                },
	                emphasis: {
	                    textStyle: {
	                        color: 'rgb(183,185,14)'
	                    }
	                }
	            },
	            itemStyle: {
	              normal: {
	               borderColor: 'rgb(147, 235, 248)',
	                borderWidth: 1,
	                areaColor: {
	                        type: 'radial',
	                        x: 0.5,
	                        y: 0.5,
	                        r: 0.8,
	                        colorStops: [{
	                            offset: 0,
	                            color: '#09132c' // 0% 处的颜色
	                        }, {
	                            offset: 1,
	                            color: '#274d68'  // 100% 处的颜色
	                        }],
	                        globalCoord: true // 缺省为 false
	                    },
	              },
	              emphasis: {
	                    areaColor: 'rgb(46,229,206)',
	                    borderWidth: 0.1
	                }
	            },
	            zoom: 1.2,
	            map: 'china' //使用
	          },
			  //热力图数据
			  {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                zlevel:1,
                rippleEffect: {
                    period: 3,
                    scale: 5,
                    brushType: 'fill'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        offset: [15, 0],
                        color: '#1DE9B6',
                        show: false
                    },
                },
                itemStyle: {
                    normal: {
                       color:'#1DE9B6',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                symbolSize: 12,
                data: points
            }
	        ]
	    };
	    myChart.setOption(option,true);
	});
}


//获取省份施工人数
function findScene() {
	//map.closeInfoWindow();清除弹框
	$.ajax({
		type: 'GET',
		url: smz_web_url + 'workerPost/getWorkerPeopleAddress',
		data: {},
		async: false,
		dataType: "json",
		success: function(data) {
			addressCount = data.obj;
			//console.log(addressCount+"省份对应人数打印"+addressCount.length);
		}
	});
}



function gerWorkerPersonAll(){
	var countPersonSum = document.getElementById('countPersonSum');
	$.ajax({
		type: 'GET',
		url: smz_web_url + 'workerPost/gerWorkerPersonAll',
		async: false,
		data: {},
		dataType: "json",
		success: function(data) {
			allWorkerPerson = data;
			countPersonSum.innerText = '累计入场人数:'+allWorkerPerson;
		}
	});
}

//根据省份名称获取施工人数及省份比例
function getWokerByAddress(address){
	var workerByAddress = 0;
	for(k in addressCount){
	    // console.log(k+"打印对象的键");//对象的键
	    // console.log(addressCount[k]);//对象的值
		if(address==k){
			workerByAddress = addressCount[k] / allWorkerPerson * 100;
			//console.log("成功返回值"+addressCount[k]);
			// return addressCount[k];
			return addressCount[k] + ' (' +workerByAddress.toFixed(2) + '%)';
		}
	}
	return 0;
}