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: dataUrl + 'map/getTrainCount', data: {}, dataType: "json", async: false, success: function(data) { countTrain = data; } }); } function leftDivData(){ $.ajax({ type: 'GET', url: dataUrl + '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: dataUrl + '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: dataUrl + '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: dataUrl + '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; }