Files
cmanager/public/chengdu/js/area1.js
2024-02-05 10:16:53 +08:00

531 lines
23 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

var baseUrl = 'http://visual.yilianweisubao.com/visual';
var href = window.location.href.split('=');
console.log(href)
var shengFen = unescape(href[1].split('&')[0]);
var pyName = href[2].split('&')[0];
var shortName = unescape(href[3]).split('&')[0];
var mark = href[4].split('&')[0];
$('#name').text(shengFen + '互联网数据分析及大数据平台展示');
console.log(shengFen, pyName, shortName,mark);
//头部数据--------------------------------------
//获取当前时间
var t = null;
t = setTimeout(getTime, 1000);//开始运行
function getTime() {
clearTimeout(t);//清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours();//获取时
var m = dt.getMinutes();//获取分
var s = dt.getSeconds();//获取秒
document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
t = setTimeout(getTime, 1000); //设定定时器,循环运行
}
$(function () {
getTime();//调用函数(获取当前时间)
});
//左侧数据--------------------------------------
//首页获取全国各省的岗位数和招聘人数
function getQuanGuo() {
$.ajax({
type: 'GET',
url: baseUrl + '/temporary-visual/getQuanGuo',
success: function (res) {
console.log(res);
var res = {"code":1,"msg":"成功","data":{"quanGuo":[{"gangwei":957746,"recuitNum":7043361,"shengFen":"管理岗位"},{"gangwei":1143,"recuitNum":14462,"shengFen":"技术岗位"},{"gangwei":241221,"recuitNum":2697933,"shengFen":"生产岗位"},{"gangwei":166810,"recuitNum":2181865,"shengFen":"销售岗位"},{"gangwei":523825,"recuitNum":5484672,"shengFen":"服务岗位"},{"gangwei":124028,"recuitNum":1364994,"shengFen":"其他"}]}};
if (res.code == '1') {
var data = res.data.quanGuo;
if (data.length > 0) {
quanGuo(data);
$('.myscroll').myScroll({//jQuery文字无缝滚动
speed: 40, //数值越大,速度越慢
rowHeight: 26 //li的高度
});
}
}
}
});
}
function quanGuo(data) {
$("#ulBox").empty();
$(data).each(function (i, n) {
$("#ulBox").append('<li><span><span class="radius">' + (i + 1) + '</span></span><span class="shengFen">' + n.shengFen + '</span><span>' + n.recuitNum + '</span></li>');
});
}
//单位性质横向柱状图
function getEcharts1() {
var gwmc = ['机关/事业','国有企业','私营企业','外商及港、澳、台商投资企业','其他'];
var myChart = echarts.init(document.getElementById('echart1'));
var option = {
tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
grid: {left: '0', top: '22%', right: '5', bottom: '0', containLabel: true},
legend: {top: '0', right: '60', textStyle: {color: '#fff',fontSize:10}, data: [ '职位需求数']},
xAxis: {nameLocation: 'end', nameGap: 7, type: 'category', data: gwmc, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, axisTick: {show: false}, axisLabel: {interval: 0, rotate: 0, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}},
yAxis: {type: 'value', name: '职位需求数', nameGap: 0, nameTextStyle: {color: '#fff', fontSize: 10}, position: 'top', axisLabel: {show: true, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}, axisTick: {show: false}, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, splitLine: {lineStyle: {color: "rgba(255,255,255,.1)"}}},
series: [
{type: 'bar', name: '职位需求数', yAxisIndex: '0', data: [29461,32060,32115,34858,35547], barWidth: '15%', itemStyle: {normal: {opacity: 1, barBorderRadius: 5}}, label: {show: true, position: 'right', distance: 5, fontSize: '8'}}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//企业规模横向柱状图
function getEcharts2() {
var gwmc = ['100人以下','101人-500人','501人-1000人','1000人以上'];
var myChart = echarts.init(document.getElementById('echart2'));
var option = {
tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
grid: {left: '0', top: '22%', right: '5', bottom: '0', containLabel: true},
legend: {top: '0', right: '60', textStyle: {color: '#fff',fontSize:10}, data: [ '职位需求数']},
xAxis: {nameLocation: 'end', nameGap: 7, type: 'category', data: gwmc, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, axisTick: {show: false}, axisLabel: {interval: 0, rotate: 0, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}},
yAxis: {type: 'value', name: '职位需求数', nameGap: 0, nameTextStyle: {color: '#fff', fontSize: 10}, position: 'top', axisLabel: {show: true, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}, axisTick: {show: false}, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, splitLine: {lineStyle: {color: "rgba(255,255,255,.1)"}}},
series: [
{type: 'bar', name: '职位需求数', yAxisIndex: '0', data: [29461,32060,32115,34858,35547], barWidth: '15%', itemStyle: {normal: {opacity: 1, barBorderRadius: 5}}, label: {show: true, position: 'right', distance: 5, fontSize: '8'}}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//中间数据--------------------------------------
//获取某省专业人数,招聘人数
function getSheng() {
$.ajax({
type: 'GET',
url: baseUrl + '/temporary-visual/getShengInfo',
data: {shengFen: shengFen},
success: function (res) {
console.log(res);
if (res.code == '1') {
var quanGuoZong = res.data.quanGuoZong;
if (quanGuoZong.gangwei != '0') {
$('.gwmc').text(quanGuoZong.gangwei);
$('.zprs').text(quanGuoZong.recuitNum);
} else {
$('.gwmc').text('0');
$('.zprs').text('0');
}
}
}
});
}
//获取省辖市集合
function getCityListByProvinceName() {
$.ajax({
type: 'GET',
url: baseUrl + '/visual/common-province/getCityListByProvinceName',
data: {provinceNane: shengFen},
success: function (res) {
//console.log(res);
if (res.code == '1') {
var city = res.data.cityList;
if (city.length > 0) {
var myChart = echarts.init(document.getElementById('map_1'));
if(shengFen.indexOf('山西') > -1){
$.getScript('js/province/js/shanxi.js', function () {
var option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.name != '') {
return params.name + '<br/>专业人数:' + params.value;
} else {
return '暂无数据';
}
}
},
animation: false,
visualMap: {
show: true,
min: 1,
max: 2000000,
inRange: {color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()},
textStyle: {color: '#fff'}
},
geo: {
map: shortName,
type: 'map',
roam: false
},
series: [{ // 地图块的相关信息
name: shortName,
type: 'map',
mapType: shortName,
aspectScale: 0.75,
zoom: 1,
roam: false,
label: {
normal: {
show: true,//显示省份标签
textStyle: {color: "#fff", fontSize: '9'}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle: {color: "#800080"}
}
},
itemStyle: {
normal: {
color: '#ffeb7b',
areaColor: '#4c60ff',
borderColor: '#1935e1'
}
},
data: city
}]
};
myChart.setOption(option);
//地图点击事件
myChart.on('click', function (params) {//点击事件
window.location.href = 'post.html?longnName=' + escape(params.name);
});
window.addEventListener("resize", function () {
myChart.resize();
});
});
}else if(shengFen.indexOf('陕西') > -1){
$.getScript('js/province/js/shanxi1.js', function () {
var option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.name != '') {
return params.name + '<br/>专业人数:' + params.value;
} else {
return '暂无数据';
}
}
},
animation: false,
visualMap: {
show: true,
min: 1,
max: 2000000,
inRange: {color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()},
textStyle: {color: '#fff'}
},
geo: {
map: shortName,
type: 'map',
roam: false,
//label: {
// show: true,
// fontSize: '9'
//},
//itemStyle: {
// normal: {
// areaColor: '#45c8ff',
// borderColor: '#fff',
// color: '#fff'
// },
// emphasis: {
// areaColor: '#00aeee',
// color: '#fff'
// }
//}
},
series: [{ // 地图块的相关信息
name: shortName,
type: 'map',
mapType: shortName,
aspectScale: 0.75,
zoom: 1,
roam: false,
label: {
normal: {
show: true,//显示省份标签
textStyle: {color: "#fff", fontSize: '9'}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle: {color: "#800080"}
}
},
itemStyle: {
normal: {
color: '#ffeb7b',
areaColor: '#4c60ff',
borderColor: '#1935e1'
}
},
data: city
}]
};
myChart.setOption(option);
//地图点击事件
myChart.on('click', function (params) {//点击事件
window.location.href = 'post.html?longnName=' + escape(params.name);
});
window.addEventListener("resize", function () {
myChart.resize();
});
});
}else{
$.getScript('js/province/js/' + pyName + '.js', function () {
var option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.name != '') {
return params.name + '<br/>需求人数:' + params.value;
} else {
return '暂无数据';
}
}
},
animation: false,
visualMap: {
show: true,
min: 1,
max: 2000000,
inRange: {color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()},
textStyle: {color: '#fff'}
},
geo: {
map: shortName,
type: 'map',
roam: false
},
series: [{ // 地图块的相关信息
name: shortName,
type: 'map',
mapType: shortName,
aspectScale: 0.75,
zoom: 1,
roam: false,
label: {
normal: {
show: true,//显示省份标签
textStyle: {color: "#fff", fontSize: '9'}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle: {color: "#800080"}
}
},
itemStyle: {
normal: {
color: '#ffeb7b',
areaColor: '#4c60ff',
borderColor: '#1935e1'
}
},
data: city
}]
};
myChart.setOption(option);
//地图点击事件
myChart.on('click', function (params) {//点击事件
window.location.href = 'post.html?longnName=' + escape(params.name);
});
window.addEventListener("resize", function () {
myChart.resize();
});
});
}
}else{
}
}
}
});
}
function getCityListByProvinceCode(zhName, pyName, name) {
console.log(zhName, pyName,name);
//window.location.href = 'post.html?longnName=' + escape(zhName) + '&abbreviation=' + pyName + '&shortName=' + escape(name)+'&mark=0';
//window.location.href = 'area1.html?longnName=%u5E7F%u4E1C%u7701&abbreviation=guangdong&shortName=%u5E7F%u4E1C&mark=0;'
}
$(function () {
getCityListByProvinceName();//获取省辖市集合
getSheng();
getQuanGuo();//首页获取全国各省的岗位数和招聘人数
getEcharts1();
getEcharts2();
getEcharts3();
getEcharts4();
getEcharts5();
getEcharts6();
getEcharts7();
getEcharts8();
});
//右侧数据--------------------------------------
//性别饼图
function getEcharts3(){
var myChart = echarts.init(document.getElementById('echart3'));
var option = {
title: { left: 'center'},
tooltip: {trigger: 'item'},
legend: {orient: 'vertical', left: 'left', textStyle: {color: '#fff',fontSize:10}},
series: [
{
name: 'Access From',
type: 'pie',
color:['#45C2E0','#C1EBDD','#FFC851','#5A5476','#1869A0','#FF9393'],
radius: '50%',
data: [
{ value: 1048, name: '男' },
{ value: 735, name: '女' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//学历水平柱状图
function getEcharts4(){
var gwmc = ['初中及以下','高中','中专/中技','大专','本科','研究生'];
var myChart = echarts.init(document.getElementById('echart4'));
var option = {
tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
grid: {left: '0', top: '22%', right: '5', bottom: '0', containLabel: true},
legend: {top: '0', right: '60', textStyle: {color: '#fff',fontSize:10}, data: [ '求职人数']},
xAxis: {nameLocation: 'end', nameGap: 7, type: 'category', data: gwmc, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, axisTick: {show: false}, axisLabel: {interval: 0, rotate: 0, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}},
yAxis: {type: 'value', name: '求职人数', nameGap: 0, nameTextStyle: {color: '#fff', fontSize: 10}, position: 'top', axisLabel: {show: true, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}, axisTick: {show: false}, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, splitLine: {lineStyle: {color: "rgba(255,255,255,.1)"}}},
series: [
{type: 'bar', name: '求职人数', yAxisIndex: '0', data: [29461,32060,32115,34858,35547,23452], barWidth: '15%', itemStyle: {normal: {opacity: 1, barBorderRadius: 5}}, label: {show: true, position: 'right', distance: 5, fontSize: '8'}}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//年龄横向柱状图
function getEcharts5(){
var gwmc = ['16-24岁','25-34岁','35-44岁','45-55岁','56-60岁','60岁以上'];
var myChart = echarts.init(document.getElementById('echart5'));
var option = {
tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
grid: {left: '0', top: '22%', right: '5', bottom: '0', containLabel: true},
legend: {top: '0', right: '60', textStyle: {color: '#fff',fontSize:10}, data: [ '求职人数']},
xAxis: {nameLocation: 'end', nameGap: 7, type: 'category', data: gwmc, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, axisTick: {show: false}, axisLabel: {interval: 0, rotate: 0, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}},
yAxis: {type: 'value', name: '求职人数', nameGap: 0, nameTextStyle: {color: '#fff', fontSize: 10}, position: 'top', axisLabel: {show: true, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}, axisTick: {show: false}, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, splitLine: {lineStyle: {color: "rgba(255,255,255,.1)"}}},
series: [
{type: 'bar', name: '求职人数', yAxisIndex: '0', data: [29461,32060,32115,34858,35547,23452], barWidth: '15%', itemStyle: {normal: {opacity: 1, barBorderRadius: 5}}, label: {show: true, position: 'right', distance: 5, fontSize: '8'}}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//下边数据
//产业饼状图
function getEcharts6(){
var myChart = echarts.init(document.getElementById('echart6'));
var option = {
title: { left: 'center'},
tooltip: {trigger: 'item'},
legend: {orient: 'vertical', left: 'left',textStyle: {color: '#fff',fontSize:10}},
series: [
{
name: 'Access From',
type: 'pie',
color:['#45C2E0','#C1EBDD','#FFC851','#5A5476','#1869A0','#FF9393'],
radius: '50%',
data: [
{ value: 1048, name: '第一产业'},
{ value: 735, name: '第二产业' },
{ value: 580, name: '第三产业' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//行业柱状图
function getEcharts7(){
var gwmc = ['采矿业','电力、燃气及水的生产和供应业','公共管理与社会组织','建筑业','交通运输、仓储和邮政业','教育','金融业','科学研究和技术服务业','农、林、牧、渔业','批发和零售业','水利、环境和公共设施管理业','卫生、社会保障和社会福利业','文化、体育和娱乐业','信息传输、软件和信息技术服务业','制造业','住宿和餐饮业','租赁和商务服务业','其他'];
var myChart = echarts.init(document.getElementById('echart7'));
var option = {
tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
grid: {left: '0', top: '22%', right: '5', bottom: '0', containLabel: true},
legend: {top: '0', right: '60', textStyle: {color: '#fff',fontSize:10}, data: [ '需求职位数']},
xAxis: {nameLocation: 'end', nameGap: 7, type: 'category', data: gwmc, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, axisTick: {show: false}, axisLabel: {interval: 0, rotate: 45, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}},
yAxis: {type: 'value', name: '需求职位数', nameGap: 0, nameTextStyle: {color: '#fff', fontSize: 10}, position: 'top', axisLabel: {show: true, textStyle: {color: "rgba(255,255,255,.6)", fontSize: '10'}}, axisTick: {show: false}, axisLine: {show: true, lineStyle: {color: "rgba(255,255,255,.9)", width: 1, type: "solid"}}, splitLine: {lineStyle: {color: "rgba(255,255,255,.1)"}}},
series: [
{type: 'bar', name: '需求职位数', yAxisIndex: '0', data: [29461,32060,32115,34858,35547,23452,29461,32060,32115,34858,35547,23452,29461,32060,32115,34858,35547,23452], barWidth: '15%', itemStyle: {normal: {opacity: 1, barBorderRadius: 5}}, label: {show: true, position: 'right', distance: 5, fontSize: '8'}}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//雷达图
function getEcharts8(){
var myChart = echarts.init(document.getElementById('echart8'));
var option = {
//title: {text: 'Basic Radar Chart'},
legend: {data: ['Allocated Budget', 'Actual Spending'],textStyle: {color: '#fff',fontSize:10}},
radar: {
// shape: 'circle',
indicator: [
{ name: '5000元以下', max: 6500 },
{ name: '5000-8000元', max: 16000 },
{ name: '8000-10000元', max: 30000 },
{ name: '10000-15000元', max: 38000 },
{ name: '15000-20000元', max: 52000 },
{ name: '20000-25000元', max: 25000 },
{ name: '25000元-30000元', max: 28000 },
{ name: '30000元以上', max: 35000 }
]
},
series: [
{
name: '工资水平',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000,20000,23456],
name: '工资水平'
},
//{
// value: [5000, 14000, 28000, 26000, 42000, 21000],
// name: 'Actual Spending'
//}
]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}