2207 lines
64 KiB
JavaScript
2207 lines
64 KiB
JavaScript
//var baseUrl = 'http://cgsu81beft.51xd.pub';
|
||
var baseUrl = "http://39.101.167.152:8088/shekecaiji";
|
||
var testUrl = "http://localhost:8000/jobslink-api/jkworksreport"
|
||
|
||
console.log(document.cookie)
|
||
// 获取cookie
|
||
function getCookie(cookieName) {
|
||
var cookies = document.cookie.split("; ");
|
||
for (var i = 0; i < cookies.length; i++) {
|
||
var cookie = cookies[i].split("=");
|
||
if (cookie[0] === cookieName) {
|
||
return cookie[1];
|
||
}
|
||
}
|
||
return "";
|
||
}
|
||
|
||
var allData = {"citys":[
|
||
{"name":"德阳","value":[104.398651, 31.127991,2],"symbolSize":10,"itemStyle":{"normal":{"color":"#F58158"}}},
|
||
{"name":"北京","value":[116.418757, 39.917544,2],"symbolSize":4,"itemStyle":{"normal":{"color":"#F58158"}}},
|
||
{"name":"上海","value":[121.490317, 31.222771,2],"symbolSize":4,"itemStyle":{"normal":{"color":"#F58158"}}},
|
||
{"name":"广州","value":[113.280637, 23.125178,2],"symbolSize":4,"itemStyle":{"normal":{"color":"#F58158"}}},
|
||
{"name":"南京","value":[118.767413, 32.041544,2],"symbolSize":4,"itemStyle":{"normal":{"color":"#F58158"}}},
|
||
{"name":"厦门","value":[118.11022, 24.490474,2],"symbolSize":4,"itemStyle":{"normal":{"color":"#F58158"}}},
|
||
{"name":"昆明","value":[102.712251, 25.040609,2],"symbolSize":4,"itemStyle":{"normal":{"color":"#F58158"}}},
|
||
],
|
||
"moveLines":[
|
||
{"fromName":"德阳","toName":"北京","coords":[[104.398651, 31.127991],[116.418757, 39.917544]]},
|
||
{"fromName":"德阳","toName":"上海","coords":[[104.398651, 31.127991],[121.490317, 31.222771]]},
|
||
{"fromName":"德阳","toName":"广州","coords":[[104.398651, 31.127991],[113.280637, 23.125178]]},
|
||
{"fromName":"德阳","toName":"南京","coords":[[104.398651, 31.127991],[118.767413, 32.041544]]},
|
||
{"fromName":"德阳","toName":"厦门","coords":[[104.398651, 31.127991],[118.11022, 24.490474]]},
|
||
{"fromName":"德阳","toName":"昆明","coords":[[104.398651, 31.127991],[102.712251, 25.040609]]},
|
||
]};
|
||
|
||
var token = getCookie("jobslink-access-token");
|
||
// $.ajaxSetup({
|
||
// headers: {
|
||
// 'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
// 'Jobslink-Auth': `bearer ${token}`
|
||
// }
|
||
// });
|
||
//测试方法
|
||
function getMapData1() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: testUrl + "/getMapData1",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
async: false,
|
||
success: function (res) {
|
||
// console.log(res);
|
||
// formattedDateTime = res.data;
|
||
// var text = res.data.split("-")[1];
|
||
// if (Number(text) >= 10) {
|
||
// $("#btn1").text(text + "月分析");
|
||
// } else {
|
||
// $("#btn1").text(text.substring(1, 2) + "月分析");
|
||
// }
|
||
},
|
||
});
|
||
}
|
||
|
||
// 分行业需求
|
||
function getMapData2() {
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getMapData2",
|
||
async: false,
|
||
success: function (res) {
|
||
|
||
console.log(res)
|
||
},
|
||
});
|
||
}
|
||
|
||
function getMapData3() {
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getMapData3",
|
||
async: false,
|
||
success: function (res) {
|
||
},
|
||
});
|
||
}
|
||
|
||
function testData4() {
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getData1",
|
||
data: { date: '2023-12', province: '四川省' },
|
||
async: true,
|
||
success: function (res) {
|
||
},
|
||
});
|
||
}
|
||
|
||
function getIndustryData() {
|
||
console.log('6666666666666')
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getData2",
|
||
data: { date: '2023-12', province: '四川省' },
|
||
async: true,
|
||
success: function (res) {
|
||
console.log('6666666666666')
|
||
// data1 岗位数， // data2 求职人数
|
||
console.log(res.data)
|
||
var name = res.data.name;
|
||
if(name && name.length > 0) {
|
||
for(var i = 0; i < name.length; i++) {
|
||
console.log(name[i])
|
||
}
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
function testData6() {
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getData3",
|
||
data: { date: '2023-12', province: '四川省' },
|
||
async: true,
|
||
success: function (res) {
|
||
},
|
||
});
|
||
}
|
||
|
||
function testData7() {
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getData4",
|
||
data: { date: '2023-12', province: '四川省' },
|
||
async: true,
|
||
success: function (res) {
|
||
},
|
||
});
|
||
}
|
||
|
||
function testData8() {
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getData5",
|
||
data: { date: '2023-12', province: '四川省' },
|
||
async: true,
|
||
success: function (res) {
|
||
},
|
||
});
|
||
}
|
||
|
||
function testData9() {
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getData6",
|
||
data: { date: '2023-12', province: '四川省' },
|
||
async: true,
|
||
success: function (res) {
|
||
},
|
||
});
|
||
}
|
||
|
||
function testData10() {
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getData7",
|
||
data: { date: '2023-12', province: '四川省' },
|
||
async: true,
|
||
success: function (res) {
|
||
},
|
||
});
|
||
}
|
||
|
||
function testData11() {
|
||
$.ajax({
|
||
type: "GET",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
url: testUrl + "/getData8",
|
||
data: { date: '2023-12', province: '四川省' },
|
||
async: true,
|
||
success: function (res) {
|
||
},
|
||
});
|
||
}
|
||
|
||
//头部数据--------------------------------------
|
||
//获取当前时间
|
||
var formattedDateTime;
|
||
var showOtherFlag = false;
|
||
function getDate() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getDate",
|
||
async: false,
|
||
success: function (res) {
|
||
// console.log(res);
|
||
formattedDateTime = res.data;
|
||
var text = res.data.split("-")[1];
|
||
if (Number(text) >= 10) {
|
||
$("#btn1").text(text + "月分析");
|
||
} else {
|
||
$("#btn1").text(text.substring(1, 2) + "月分析");
|
||
}
|
||
},
|
||
});
|
||
}
|
||
function showOther(obj) {
|
||
if (!showOtherFlag) {
|
||
$(".echart10").hide();
|
||
$(".echart12").hide();
|
||
showOtherFlag = true;
|
||
} else {
|
||
$(".echart10").show();
|
||
$(".echart12").show();
|
||
showOtherFlag = false;
|
||
}
|
||
}
|
||
//切换toggle
|
||
function toggleView(obj) {
|
||
$(obj).siblings().removeClass("active");
|
||
$(obj).addClass("active");
|
||
var viewId = $(obj).attr("viewId");
|
||
if (viewId == "1") {
|
||
$(".mainbox1").show();
|
||
$(".mainbox2").hide();
|
||
getData8();
|
||
getData5();
|
||
getData6();
|
||
getData1();
|
||
getData2();
|
||
getData7();
|
||
getData4();
|
||
getData10();
|
||
getData12();
|
||
} else if (viewId == "2") {
|
||
$(".mainbox1").hide();
|
||
$(".mainbox2").show();
|
||
get_echart_trend1();
|
||
get_echart_trend2();
|
||
get_echart_trend3();
|
||
get_echart_trend4();
|
||
get_echart_trend5();
|
||
get_echart_trend6();
|
||
get_echart_trend7();
|
||
}
|
||
}
|
||
//左侧数据--------------------------------------
|
||
//分行业
|
||
function getData8() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData8",
|
||
async: true,
|
||
data: { date: formattedDateTime },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if (res.code == "0") {
|
||
var data = res.data;
|
||
if (data.name.length > 0) {
|
||
quanGuo(data);
|
||
$(".myscroll").myScroll({
|
||
//jQuery文字无缝滚动
|
||
speed: 40, //数值越大，速度越慢
|
||
rowHeight: 26, //li的高度
|
||
});
|
||
}
|
||
}
|
||
},
|
||
});
|
||
}
|
||
function quanGuo(data) {
|
||
$("#ulBox").empty();
|
||
$(data.name).each(function (i, n) {
|
||
$("#ulBox").append(
|
||
'<li><span><span class="radius">' +
|
||
(i + 1) +
|
||
'</span></span><span class="shengFen">' +
|
||
n +
|
||
"</span><span>" +
|
||
data.data1[i] +
|
||
"</span><span>" +
|
||
data.data2[i] +
|
||
"</span></li>"
|
||
);
|
||
});
|
||
}
|
||
//分单位
|
||
function getData5() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: testUrl + "/getData5",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
async: true,
|
||
data: { date: '2023-12', province: '四川省' },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if (res.code == "200") {
|
||
var myChart = echarts.init(document.getElementById("echart5"));
|
||
var option = {
|
||
title: {
|
||
// text: "分单位性质招聘需求",
|
||
subtext: "",
|
||
left: "center",
|
||
textStyle: { fontSize: 13, color: "#fff", fontWeight: 400 },
|
||
},
|
||
legend: {
|
||
left: "right",
|
||
textStyle: { color: "#fff", fontSize: 10 },
|
||
show: false,
|
||
},
|
||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
grid: {
|
||
left: "0",
|
||
top: "20%",
|
||
right: "5",
|
||
bottom: "5",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#3FC79B",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 0,
|
||
textStyle: { color: "#3FC79B", fontSize: "12" },
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
// name: "万人/万个",
|
||
nameGap: 0,
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
lineHeight: 30,
|
||
height: 30,
|
||
padding: 6,
|
||
},
|
||
position: "top",
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: { color: "#3FC79B", fontSize: "12" },
|
||
},
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#3FC79B",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
splitLine: { lineStyle: { color: "rgba(63, 199, 155, .5)" } },
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
name: "需求人数",
|
||
barWidth: "15%",
|
||
itemStyle: {
|
||
normal: {
|
||
opacity: 1,
|
||
barBorderRadius: [10, 10, 0, 0],
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#F28505" },
|
||
{ offset: 1, color: "#F6DC3C" },
|
||
]),
|
||
},
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: "top",
|
||
// distance: 5,
|
||
// fontSize: "8",
|
||
// },
|
||
data: res.data.data1,
|
||
},
|
||
// {
|
||
// type: "bar",
|
||
// name: "求职人数",
|
||
// barWidth: "15%",
|
||
// itemStyle: {
|
||
// normal: { opacity: 1, barBorderRadius: 0, color: "#36c3fd" },
|
||
// },
|
||
// label: {
|
||
// show: true,
|
||
// position: "top",
|
||
// distance: 5,
|
||
// fontSize: "8",
|
||
// },
|
||
// data: res.data.data2,
|
||
// },
|
||
],
|
||
};
|
||
console.log(option);
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//分产业
|
||
function getData7() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: testUrl + "/getData7",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
async: true,
|
||
data: { date: '2023-12', province: '四川省' },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if (res.code == "200") {
|
||
var arr = [];
|
||
for (var i = 0; i < res.data.name.length; i++) {
|
||
var obj = {};
|
||
obj.name = res.data.name[i];
|
||
obj.value = res.data.data1[i];
|
||
arr.push(obj);
|
||
}
|
||
var myChart = echarts.init(document.getElementById("echart7"));
|
||
var option = {
|
||
legend: {
|
||
top: "bottom",
|
||
show: false,
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true },
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "Nightingale Chart",
|
||
type: "pie",
|
||
radius: ["20%", "60%"],
|
||
center: ["50%", "50%"],
|
||
roseType: "area",
|
||
itemStyle: {
|
||
borderRadius: 8,
|
||
},
|
||
data: arr,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//获取岗位数gvs和招聘人数zprs
|
||
function getData1() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData1",
|
||
async: true,
|
||
data: { date: formattedDateTime },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if ((res.code = "0")) {
|
||
var xq = res.data.xq;
|
||
var qz = res.data.qz;
|
||
$(".xuqiu").text("总岗位数：" + xq + "万个");
|
||
$(".qiuzhi").text("求职总人数：" + qz + "万人");
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//获取省辖市集合
|
||
function getCityListByProvinceCode(zhName, pyName, name) {
|
||
console.log(zhName, pyName, name);
|
||
window.location.href =
|
||
"detail.html?shengFen=" +
|
||
escape(zhName) +
|
||
"&abbreviation=" +
|
||
pyName +
|
||
"&shortName=" +
|
||
escape(name);
|
||
}
|
||
//获取地图数据
|
||
function getData2() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData2",
|
||
async: true,
|
||
data: { date: formattedDateTime },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if (res.code == "0") {
|
||
var province = res.data;
|
||
if (province.length > 0) {
|
||
//渲染地图
|
||
var myChart = echarts.init(document.getElementById("echart2"));
|
||
var option = {
|
||
animation: false,
|
||
//鼠标浮动显示框
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: function (params) {
|
||
if (params.name != "") {
|
||
return (
|
||
params.name +
|
||
"<br/>需求人数：" +
|
||
params.value +
|
||
"<br/>求职人数：" +
|
||
params.data.value1
|
||
);
|
||
} else {
|
||
return "暂无数据";
|
||
}
|
||
},
|
||
},
|
||
visualMap: {
|
||
show: false,
|
||
min: 1,
|
||
max: 300000,
|
||
inRange: { color: ["#063b9e", "#299af0", "#cae2fd"].reverse() },
|
||
textStyle: { color: "#fff" },
|
||
},
|
||
geo: {
|
||
show:true, // 是否显示
|
||
map: 'china', // 地图类型。world世界地图，china中国地图
|
||
// center:[115.97, 29.71], //当前视角的中心点，用经纬度表示
|
||
label: {
|
||
normal:{ //普通状态下的标签文本样式。(省份名称)
|
||
show: false, //是否在普通状态下显示标签。
|
||
textStyle: { // 文字设置
|
||
color: '#fff'
|
||
},
|
||
},
|
||
emphasis: { // 是否在高亮状态下显示标签。(省份名称)
|
||
show: true,
|
||
textStyle: { // 文字设置
|
||
color: '#fff'
|
||
},
|
||
}
|
||
},
|
||
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
|
||
itemStyle: { // 地图板块区域的多边形 图形样式
|
||
normal: { // 默认板块信息
|
||
areaColor: '#58B3CC',
|
||
borderColor: '#404a59'
|
||
},
|
||
emphasis: { // 高亮版板块信息
|
||
areaColor: '#51D7FF'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '地点',
|
||
type: 'effectScatter', // 特效散点图
|
||
coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
|
||
zlevel: 2, // 所有图形的 zlevel 值。
|
||
rippleEffect: { //涟漪特效相关配置。
|
||
brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'。
|
||
period:4, // 动画的时间。
|
||
scale:2.5, // 动画中波纹的最大缩放比例。
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false, //是否显示标签。
|
||
position: "inside", //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
|
||
offset: [30, 40], //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
|
||
formatter: '{b}: {c}', //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
position: 'right',
|
||
formatter: '{b}'
|
||
}
|
||
},
|
||
symbolSize: 2, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
|
||
showEffectOn: 'render', // 配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
|
||
itemStyle: { // 图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
|
||
normal: {
|
||
color: '#46bee9'
|
||
}
|
||
},
|
||
data: allData.citys
|
||
}, {
|
||
name: '线路',
|
||
type: 'lines',
|
||
coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
|
||
zlevel: 2,
|
||
large: true, // 是否开启大规模散点图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。
|
||
effect: {
|
||
show: true,
|
||
constantSpeed: 30, // 点移动的速度
|
||
symbol: 'arrow', // 图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
||
symbolSize: 3, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
|
||
trailLength: 0, // 线的宽度
|
||
},
|
||
lineStyle: { // 线的颜色、宽度，样式设置
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0, color: '#58B3CC'
|
||
}, {
|
||
offset: 1, color: '#F58158'
|
||
}], false),
|
||
width: 3, // 线的宽度
|
||
opacity: 1, // 线的透明度
|
||
curveness: 0.1 // 线的完全程度
|
||
}
|
||
},
|
||
data: allData.moveLines
|
||
}]
|
||
};
|
||
myChart.setOption(option);
|
||
//地图点击事件
|
||
// var cityArr = [
|
||
// [
|
||
// "上海市",
|
||
// "河北省",
|
||
// "山西省",
|
||
// "内蒙古自治区",
|
||
// "辽宁省",
|
||
// "吉林省",
|
||
// "黑龙江省",
|
||
// "江苏省",
|
||
// "浙江省",
|
||
// "安徽省",
|
||
// "福建省",
|
||
// "江西省",
|
||
// "山东省",
|
||
// "河南省",
|
||
// "湖北省",
|
||
// "湖南省",
|
||
// "广东省",
|
||
// "广西壮族自治区",
|
||
// "海南省",
|
||
// "四川省",
|
||
// "贵州省",
|
||
// "云南省",
|
||
// "西藏自治区",
|
||
// "陕西省",
|
||
// "甘肃省",
|
||
// "青海省",
|
||
// "宁夏回族自治区",
|
||
// "新疆维吾尔自治区",
|
||
// "北京市",
|
||
// "天津市",
|
||
// "重庆市",
|
||
// "香港特别行政区",
|
||
// "澳门特别行政区",
|
||
// "台湾省",
|
||
// ],
|
||
// [
|
||
// "shanghai",
|
||
// "hebei",
|
||
// "shanxi",
|
||
// "neimenggu",
|
||
// "liaoning",
|
||
// "jilin",
|
||
// "heilongjiang",
|
||
// "jiangsu",
|
||
// "zhejiang",
|
||
// "anhui",
|
||
// "fujian",
|
||
// "jiangxi",
|
||
// "shandong",
|
||
// "henan",
|
||
// "hubei",
|
||
// "hunan",
|
||
// "guangdong",
|
||
// "guangxi",
|
||
// "hainan",
|
||
// "sichuan",
|
||
// "guizhou",
|
||
// "yunnan",
|
||
// "xizang",
|
||
// "shanxi1",
|
||
// "gansu",
|
||
// "qinghai",
|
||
// "ningxia",
|
||
// "xinjiang",
|
||
// "beijing",
|
||
// "tianjin",
|
||
// "chongqing",
|
||
// "xianggang",
|
||
// "aomen",
|
||
// "taiwan",
|
||
// ],
|
||
// ];
|
||
// myChart.on("click", function (params) {
|
||
// //点击事件
|
||
// if (params.name != "") {
|
||
// var cityName = params.data.fullName;
|
||
// var name = params.name;
|
||
// for (var i = 0, len = cityArr[0].length; i < len; i++) {
|
||
// // 查找是否有对应城市有则加载城市
|
||
// if (cityName == cityArr[0][i]) {
|
||
// getCityListByProvinceCode(cityArr[0][i], cityArr[1][i], name); // 获取得城市拼音
|
||
// return;
|
||
// }
|
||
// }
|
||
// } else {
|
||
// showDialog("暂无数据，无法查看");
|
||
// }
|
||
// //没有找到对应城市的话，那么返回到全国地图
|
||
// option.series[0].mapType = "china";
|
||
// myChart.setOption(option);
|
||
// });
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//分岗位招聘需求
|
||
function getData4() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: testUrl + "/getData6",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
async: true,
|
||
data: { date: '2023-12', province: '四川省' },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if (res.code == "200") {
|
||
// var name = [];
|
||
// var xq = [];
|
||
// var qz = [];
|
||
// for (var i = 0; i < res.data.length; i++) {
|
||
// name.push(res.data[i].name);
|
||
// xq.push(res.data[i].xq);
|
||
// qz.push(res.data[i].qz);
|
||
// }
|
||
var myChart = echarts.init(document.getElementById("echart4"));
|
||
var option = {
|
||
title: {
|
||
// text: "分岗位招聘需求",
|
||
subtext: "",
|
||
left: "center",
|
||
textStyle: { fontSize: 13, color: "#fff", fontWeight: 400 },
|
||
},
|
||
legend: {
|
||
left: "right",
|
||
textStyle: { color: "#fff", fontSize: 10 },
|
||
show: false,
|
||
},
|
||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
grid: {
|
||
left: "0",
|
||
top: "20%",
|
||
right: "0",
|
||
bottom: "5",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(63, 199, 155, 1)",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 0,
|
||
textStyle: { color: "rgba(63, 199, 155, 1)", fontSize: "12" },
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
// name: "万人/万个",
|
||
nameGap: 0,
|
||
nameTextStyle: { color: "#fff", fontSize: 10, padding: 6 },
|
||
position: "top",
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: { color: "rgba(63, 199, 155, 1)", fontSize: "12" },
|
||
},
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.9)",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
splitLine: { lineStyle: { color: "rgba(63, 199, 155, .5)" } },
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
name: "需求人数",
|
||
barWidth: "15%",
|
||
itemStyle: {
|
||
normal: {
|
||
opacity: 1,
|
||
barBorderRadius: [10, 10, 0, 0],
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#2F69FC " },
|
||
{ offset: 1, color: "#51D7FF" },
|
||
]),
|
||
},
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: "top",
|
||
// distance: 5,
|
||
// fontSize: "8",
|
||
// },
|
||
data: res.data.data1,
|
||
},
|
||
// {
|
||
// type: "bar",
|
||
// name: "求职人数",
|
||
// barWidth: "15%",
|
||
// itemStyle: {
|
||
// normal: { opacity: 1, barBorderRadius: 0, color: "#36c3fd" },
|
||
// },
|
||
// label: {
|
||
// show: true,
|
||
// position: "top",
|
||
// distance: 5,
|
||
// fontSize: "8",
|
||
// },
|
||
// data: qz,
|
||
// },
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//工资水平
|
||
function getData12() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData12",
|
||
async: true,
|
||
data: { date: formattedDateTime },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if (res.code == "0") {
|
||
var myChart = echarts.init(document.getElementById("echart12"));
|
||
var option = {
|
||
title: {
|
||
text: "不同薪酬区间的岗位需求",
|
||
subtext: "",
|
||
left: "center",
|
||
textStyle: { fontSize: 13, color: "#fff", fontWeight: 400 },
|
||
},
|
||
legend: { left: "left", textStyle: { color: "#fff", fontSize: 10 } },
|
||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
grid: {
|
||
left: "0",
|
||
top: "20%",
|
||
right: "5",
|
||
bottom: "5",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.9)",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 275,
|
||
textStyle: { color: "rgba(255,255,255,.6)", fontSize: "9" },
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "万人/万个",
|
||
nameGap: 0,
|
||
nameTextStyle: { color: "#fff", fontSize: 10, padding: 6 },
|
||
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: "需求人数",
|
||
barWidth: "15%",
|
||
itemStyle: {
|
||
normal: { opacity: 1, barBorderRadius: 0, color: "#dd76aa" },
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
distance: 5,
|
||
fontSize: "8",
|
||
},
|
||
data: res.data.data1,
|
||
},
|
||
{
|
||
type: "bar",
|
||
name: "求职人数",
|
||
barWidth: "15%",
|
||
itemStyle: {
|
||
normal: { opacity: 1, barBorderRadius: 0, color: "#36c3fd" },
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
distance: 5,
|
||
fontSize: "8",
|
||
},
|
||
data: res.data.data2,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//获取地图数据
|
||
function getData20() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData2",
|
||
async: false,
|
||
data: { date: formattedDateTime, shengfen: "四川省" },
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.code == "0") {
|
||
var city = res.data;
|
||
if (city.length > 0) {
|
||
var myChart = echarts.init(document.getElementById("echart20"));
|
||
$.getScript("js/province/" + "deyang.js", function () {
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: function (params) {
|
||
if (params.name != "") {
|
||
return (
|
||
params.name +
|
||
"<br/>需求人数：" +
|
||
params.value +
|
||
"<br/>求职人数：" +
|
||
params.data.value1
|
||
);
|
||
} else {
|
||
return "暂无数据";
|
||
}
|
||
},
|
||
},
|
||
animation: false,
|
||
visualMap: {
|
||
show: false,
|
||
min: 1,
|
||
max: 2000000,
|
||
inRange: {
|
||
color: ["#d94e5d", "#eac736", "#50a3ba"].reverse(),
|
||
},
|
||
textStyle: { color: "#fff" },
|
||
},
|
||
geo: {},
|
||
series: [
|
||
{
|
||
name: "德阳市",
|
||
type: "map",
|
||
mapType: "德阳市",
|
||
aspectScale: 0.75,
|
||
zoom: 1.3,
|
||
roam: true,
|
||
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,
|
||
data: [
|
||
{name:'旌阳区', value:1099, value1: 2011},
|
||
{name:'罗江区', value:199, value1: 211},
|
||
{name:'中江县', value:699, value1: 811},
|
||
{name:'广汉市', value:321, value1: 999},
|
||
{name:'什邡市', value:6788, value1: 2567},
|
||
{name:'绵竹市', value:342, value1: 678}
|
||
]
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
//地图点击事件
|
||
myChart.on("click", function (params) {
|
||
console.log(params);
|
||
console.log(params.name);
|
||
window.location.href = "detail.html?shengFen=" + escape(params.name) +
|
||
"&abbreviation=" + params.name + "&shortName=" + escape(params.name);
|
||
//点击事件
|
||
// if (params.name != "") {
|
||
// var name = params.name;
|
||
// getCityListByProvinceCode(name); // 获取得城市拼音
|
||
// return;
|
||
// } else {
|
||
// showDialog("暂无数据，无法查看");
|
||
// }
|
||
//没有找到对应城市的话，那么返回到全国地图
|
||
// option.series[0].mapType = "china";
|
||
// myChart.setOption(option);
|
||
});
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
});
|
||
// }
|
||
}
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//学历
|
||
function getData10() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData10",
|
||
async: true,
|
||
data: { date: formattedDateTime },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if (res.code == "0") {
|
||
var myChart = echarts.init(document.getElementById("echart10"));
|
||
var option = {
|
||
title: {
|
||
text: "分学历求职人数",
|
||
subtext: "",
|
||
left: "center",
|
||
textStyle: { fontSize: 13, color: "#fff", fontWeight: 400 },
|
||
},
|
||
legend: { left: "left", textStyle: { color: "#fff", fontSize: 10 } },
|
||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
grid: {
|
||
left: "0",
|
||
top: "20%",
|
||
right: "5",
|
||
bottom: "5",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.9)",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 275,
|
||
textStyle: { color: "rgba(255,255,255,.6)", fontSize: "9" },
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "万人/万个",
|
||
nameGap: 0,
|
||
nameTextStyle: { color: "#fff", fontSize: 10, padding: 6 },
|
||
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: "需求人数",
|
||
barWidth: "15%",
|
||
itemStyle: {
|
||
normal: { opacity: 1, barBorderRadius: 0, color: "#dd76aa" },
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
distance: 5,
|
||
fontSize: "8",
|
||
},
|
||
data: res.data.data1,
|
||
},
|
||
{
|
||
type: "bar",
|
||
name: "求职人数",
|
||
barWidth: "15%",
|
||
itemStyle: {
|
||
normal: { opacity: 1, barBorderRadius: 0, color: "#36c3fd" },
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
distance: 5,
|
||
fontSize: "8",
|
||
},
|
||
data: res.data.data2,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//年龄
|
||
function getData11() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData11",
|
||
async: true,
|
||
data: { date: formattedDateTime },
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.code == "0") {
|
||
var myChart = echarts.init(document.getElementById("echart11"));
|
||
var option = {
|
||
title: {
|
||
text: "分年龄招聘需求",
|
||
subtext: "",
|
||
left: "center",
|
||
textStyle: { fontSize: 13, color: "#fff", fontWeight: 400 },
|
||
},
|
||
legend: { left: "left", textStyle: { color: "#fff", fontSize: 10 } },
|
||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
grid: {
|
||
left: "0",
|
||
top: "20%",
|
||
right: "5",
|
||
bottom: "5",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.9)",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 275,
|
||
textStyle: { color: "rgba(255,255,255,.6)", fontSize: "9" },
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "万人/万个",
|
||
nameGap: 0,
|
||
nameTextStyle: { color: "#fff", fontSize: 10, padding: 6 },
|
||
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: "需求人数",
|
||
barWidth: "15%",
|
||
itemStyle: {
|
||
normal: { opacity: 1, barBorderRadius: 0, color: "#dd76aa" },
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
distance: 5,
|
||
fontSize: "8",
|
||
},
|
||
data: res.data.data1,
|
||
},
|
||
{
|
||
type: "bar",
|
||
name: "求职人数",
|
||
barWidth: "15%",
|
||
itemStyle: {
|
||
normal: { opacity: 1, barBorderRadius: 0, color: "#36c3fd" },
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
distance: 5,
|
||
fontSize: "8",
|
||
},
|
||
data: res.data.data2,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//分企业规模
|
||
function getData6() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: testUrl + "/getData4",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
async: true,
|
||
data: { date: '2023-12', province: '四川省' },
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.code == "200") {
|
||
var myChart = echarts.init(document.getElementById("echart6"));
|
||
var option = {
|
||
title: {
|
||
// text: "分企业规模招聘需求",
|
||
subtext: "",
|
||
left: "center",
|
||
textStyle: { fontSize: 13, color: "#fff", fontWeight: 400 },
|
||
},
|
||
legend: {
|
||
left: "right",
|
||
textStyle: { color: "#fff", fontSize: 10 },
|
||
show: false,
|
||
},
|
||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
grid: {
|
||
left: "0",
|
||
top: "20%",
|
||
right: "5",
|
||
bottom: "5",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#3FC79B",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 340,
|
||
textStyle: { color: "#3FC79B", fontSize: "10" },
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
nameGap: 0,
|
||
nameTextStyle: { color: "#fff", fontSize: 10, padding: 6 },
|
||
position: "top",
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: { color: "#3FC79B", fontSize: "12" },
|
||
},
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#3FC79B",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
splitLine: { lineStyle: { color: "rgba(63, 199, 155, .5)" } },
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
name: "需求人数",
|
||
barWidth: "15%",
|
||
itemStyle: {
|
||
normal: {
|
||
opacity: 1,
|
||
barBorderRadius: [10, 10, 0, 0],
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#8005F2" },
|
||
{ offset: 1, color: "#2D3CFF" },
|
||
]),
|
||
},
|
||
},
|
||
data: res.data.data1,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
function getData18() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: testUrl + "/getData3",
|
||
headers: {
|
||
'Content-Type': 'application/json', // 指定请求体为JSON格式
|
||
'Jobslink-Auth': `bearer ${token}`
|
||
},
|
||
async: true,
|
||
data: { date: '2023-12', province: '四川省' },
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.code == "200") {
|
||
var myChart = echarts.init(document.getElementById("echart8"));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: { show: false },
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: { color: "#3FC79B", fontSize: "12" },
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#3FC79B",
|
||
width: 1,
|
||
type: "dashed",
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: { color: "rgba(63, 199, 155, .5)", type: "dashed" },
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
axisTick: { show: false },
|
||
data: res.data.name,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: { color: "#0072FF", fontSize: "12" },
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#3FC79B",
|
||
width: 1,
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "2011",
|
||
type: "bar",
|
||
barWidth: "35%",
|
||
itemStyle: {
|
||
normal: {
|
||
opacity: 1,
|
||
barBorderRadius: [0, 10, 10, 0],
|
||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{ offset: 0, color: "#E54839" },
|
||
{ offset: 1, color: "#FAC56A" },
|
||
]),
|
||
},
|
||
},
|
||
data: res.data.data1,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
$(function () {
|
||
getMapData1();
|
||
getMapData2(); // 分行业
|
||
getMapData3();
|
||
testData4();
|
||
getIndustryData();
|
||
testData6();
|
||
testData7();
|
||
testData8();
|
||
testData9();
|
||
testData10();
|
||
testData11();
|
||
getDate();
|
||
getData1();
|
||
getData2();
|
||
getData20();
|
||
getData4();
|
||
getData5();
|
||
getData6();
|
||
getData7();
|
||
getData8();
|
||
// getData9();
|
||
getData10();
|
||
getData11();
|
||
getData12();
|
||
getData18();
|
||
});
|
||
|
||
//历史数据
|
||
function get_echart_trend1() {
|
||
var fenlei = "行业";
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData13",
|
||
data: { fenlei: fenlei },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if (res.code == "0") {
|
||
var arr = [];
|
||
for (var i = 0; i < res.data.keys.length; i++) {
|
||
var obj = {};
|
||
obj.data = res.data["qzlist" + i];
|
||
obj.type = "line";
|
||
obj.name = res.data.keys[i];
|
||
arr.push(obj);
|
||
}
|
||
for (var j = 0; j < res.data.keys.length; j++) {
|
||
var obj = {};
|
||
obj.data = res.data["xqlist" + j];
|
||
obj.type = "line";
|
||
obj.name = res.data.keys[j];
|
||
arr.push(obj);
|
||
}
|
||
var myChart = echarts.init(document.getElementById("echart_trend1"));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: { type: "shadow" },
|
||
position: [10, 0],
|
||
},
|
||
grid: {
|
||
left: "0",
|
||
top: "5%",
|
||
right: "5",
|
||
bottom: "0",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
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: arr,
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
function get_echart_trend2() {
|
||
var fenlei = "企业规模";
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData13",
|
||
data: { fenlei: fenlei },
|
||
success: function (res) {
|
||
//console.log(res);
|
||
if (res.code == "0") {
|
||
var arr = [];
|
||
for (var i = 0; i < res.data.keys.length; i++) {
|
||
var obj = {};
|
||
obj.data = res.data["qzlist" + i];
|
||
obj.type = "line";
|
||
obj.name = res.data.keys[i];
|
||
arr.push(obj);
|
||
}
|
||
for (var j = 0; j < res.data.keys.length; j++) {
|
||
var obj = {};
|
||
obj.data = res.data["xqlist" + j];
|
||
obj.type = "line";
|
||
obj.name = res.data.keys[j];
|
||
arr.push(obj);
|
||
}
|
||
var myChart = echarts.init(document.getElementById("echart_trend2"));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: { type: "shadow" },
|
||
position: [10, 0],
|
||
},
|
||
grid: {
|
||
left: "0",
|
||
top: "5%",
|
||
right: "5",
|
||
bottom: "0",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
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: arr,
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
function get_echart_trend3() {
|
||
var fenlei = "工资水平";
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData13",
|
||
data: { fenlei: fenlei },
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.code == "0") {
|
||
var arr = [];
|
||
for (var i = 0; i < res.data.keys.length; i++) {
|
||
var obj = {};
|
||
obj.data = res.data["qzlist" + i];
|
||
obj.type = "line";
|
||
obj.name = res.data.keys[i];
|
||
arr.push(obj);
|
||
}
|
||
for (var j = 0; j < res.data.keys.length; j++) {
|
||
var obj = {};
|
||
obj.data = res.data["xqlist" + j];
|
||
obj.type = "line";
|
||
obj.name = res.data.keys[j];
|
||
arr.push(obj);
|
||
}
|
||
var myChart = echarts.init(document.getElementById("echart_trend3"));
|
||
var option = {
|
||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
grid: {
|
||
left: "0",
|
||
top: "5%",
|
||
right: "5",
|
||
bottom: "0",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
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: arr,
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
function get_echart_trend4() {
|
||
var fenlei = "产业";
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData13",
|
||
data: { fenlei: fenlei },
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.code == "0") {
|
||
var arr = [];
|
||
for (var i = 0; i < res.data.keys.length; i++) {
|
||
var obj = {};
|
||
obj.data = res.data["qzlist" + i];
|
||
obj.type = "bar";
|
||
obj.name = res.data.keys[i];
|
||
arr.push(obj);
|
||
}
|
||
for (var j = 0; j < res.data.keys.length; j++) {
|
||
var obj = {};
|
||
obj.data = res.data["xqlist" + j];
|
||
obj.type = "bar";
|
||
obj.name = res.data.keys[j];
|
||
arr.push(obj);
|
||
}
|
||
var myChart = echarts.init(document.getElementById("echart_trend4"));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: { type: "shadow" },
|
||
position: [10, 0],
|
||
},
|
||
grid: {
|
||
left: "0",
|
||
top: "5%",
|
||
right: "5",
|
||
bottom: "0",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
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: arr,
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
function get_echart_trend5() {
|
||
var fenlei = "企业规模";
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData13",
|
||
data: { fenlei: fenlei },
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.code == "0") {
|
||
var arr = [];
|
||
for (var i = 0; i < res.data.keys.length; i++) {
|
||
var obj = {};
|
||
obj.data = res.data["qzlist" + i];
|
||
obj.type = "bar";
|
||
obj.name = res.data.keys[i];
|
||
arr.push(obj);
|
||
}
|
||
for (var j = 0; j < res.data.keys.length; j++) {
|
||
var obj = {};
|
||
obj.data = res.data["xqlist" + j];
|
||
obj.type = "bar";
|
||
obj.name = res.data.keys[j];
|
||
arr.push(obj);
|
||
}
|
||
var myChart = echarts.init(document.getElementById("echart_trend5"));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: { type: "shadow" },
|
||
position: [10, 0],
|
||
},
|
||
grid: {
|
||
left: "0",
|
||
top: "5%",
|
||
right: "5",
|
||
bottom: "0",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
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: arr,
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
function get_echart_trend6() {
|
||
var fenlei = "学历";
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData13",
|
||
data: { fenlei: fenlei },
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.code == "0") {
|
||
var arr = [];
|
||
for (var i = 0; i < res.data.keys.length; i++) {
|
||
var obj = {};
|
||
obj.data = res.data["qzlist" + i];
|
||
obj.type = "bar";
|
||
obj.name = res.data.keys[i];
|
||
arr.push(obj);
|
||
}
|
||
for (var j = 0; j < res.data.keys.length; j++) {
|
||
var obj = {};
|
||
obj.data = res.data["xqlist" + j];
|
||
obj.type = "bar";
|
||
obj.name = res.data.keys[j];
|
||
arr.push(obj);
|
||
}
|
||
var myChart = echarts.init(document.getElementById("echart_trend6"));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: { type: "shadow" },
|
||
position: [10, 0],
|
||
},
|
||
grid: {
|
||
left: "0",
|
||
top: "5%",
|
||
right: "5",
|
||
bottom: "0",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
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: arr,
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
function get_echart_trend7() {
|
||
var fenlei = "岗位类型";
|
||
$.ajax({
|
||
type: "GET",
|
||
url: baseUrl + "/dataNew/getData13",
|
||
data: { fenlei: fenlei },
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.code == "0") {
|
||
var arr = [];
|
||
for (var i = 0; i < res.data.keys.length; i++) {
|
||
var obj = {};
|
||
obj.data = res.data["qzlist" + i];
|
||
obj.type = "bar";
|
||
obj.name = res.data.keys[i];
|
||
arr.push(obj);
|
||
}
|
||
for (var j = 0; j < res.data.keys.length; j++) {
|
||
var obj = {};
|
||
obj.data = res.data["xqlist" + j];
|
||
obj.type = "bar";
|
||
obj.name = res.data.keys[j];
|
||
arr.push(obj);
|
||
}
|
||
var myChart = echarts.init(document.getElementById("echart_trend7"));
|
||
var option = {
|
||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
grid: {
|
||
left: "0",
|
||
top: "5%",
|
||
right: "5",
|
||
bottom: "0",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
nameLocation: "end",
|
||
nameGap: 7,
|
||
type: "category",
|
||
data: res.data.name,
|
||
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: arr,
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
//提示框
|
||
function showDialog(content) {
|
||
var layer = document.createElement("div");
|
||
layer.id = "layer";
|
||
var style = {
|
||
background: "rgba(0,0,0,0.3)",
|
||
position: "absolute",
|
||
zIndex: 10,
|
||
width: "160px",
|
||
height: "40px",
|
||
lineHeight: "40px",
|
||
left: "50%",
|
||
top: "50%",
|
||
marginLeft: "-100px",
|
||
marginTop: "80px",
|
||
//padding: "4px 10px",
|
||
color: "#fff",
|
||
};
|
||
for (var i in style) {
|
||
layer.style[i] = style[i];
|
||
}
|
||
if (document.getElementById("layer") == null) {
|
||
document.body.appendChild(layer);
|
||
layer.innerHTML = content;
|
||
layer.style.textAlign = "center";
|
||
layer.style.lineHeight = "40px";
|
||
setTimeout("document.body.removeChild(layer)", 3000);
|
||
}
|
||
}
|