576 lines
15 KiB
JavaScript
576 lines
15 KiB
JavaScript
var addressCount;
|
|
var countTrain;
|
|
var countExam;
|
|
var allWorkerPerson = 0;
|
|
$(function() {
|
|
gerWorkerPersonAll();
|
|
leftDivData();
|
|
rightDivData();
|
|
findScene();
|
|
createEathsMap();
|
|
leftDiv();
|
|
rightDiv();
|
|
});
|
|
|
|
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'));
|
|
|
|
let series = [];
|
|
let pieDatas = [
|
|
{
|
|
"value": countExam['empty'],
|
|
"name": "未考试"
|
|
},
|
|
{
|
|
"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(216, 216, 107, 1.0)",
|
|
"color2": ""
|
|
},
|
|
{
|
|
"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;
|
|
showTrain();
|
|
});
|
|
let series = [];
|
|
let pieDatas = [
|
|
{
|
|
"value": countTrain['noCount'],
|
|
"name": "未完成"
|
|
},
|
|
{
|
|
"value": countTrain['successCount'],
|
|
"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";
|
|
|
|
var points = [
|
|
{value: [117.229417,31.828051],itemStyle:{color:'#4ab2e5'}}
|
|
, {value: [106.638009,26.653635],itemStyle:{color:'#f34e2b'}}
|
|
, {value: [104.073463,30.591472],itemStyle:{color:'#f56321'}}
|
|
, {value: [112.95051,28.235956],itemStyle:{color:'#f58414'}}
|
|
]
|
|
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: true
|
|
},
|
|
},
|
|
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: {},
|
|
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',
|
|
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;
|
|
}
|
|
|