521 lines
17 KiB
HTML
521 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta
|
||
|
|
name="viewport"
|
||
|
|
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
|
||
|
|
/>
|
||
|
|
<title>市场招聘大数据展示平台</title>
|
||
|
|
<link rel="icon" href="favicon.ico" />
|
||
|
|
<link rel="stylesheet" href="css/common.css" />
|
||
|
|
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css" />
|
||
|
|
<link rel="stylesheet" href="css/theme/default/layer.css" />
|
||
|
|
<script type="text/javascript" src="js/common/jquery.min.js"></script>
|
||
|
|
<script type="text/javascript" src="js/common/layer.js"></script>
|
||
|
|
<script type="text/javascript" src="js/common/echarts.min.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.tb {
|
||
|
|
position: absolute;
|
||
|
|
left: 20px;
|
||
|
|
z-index: 10000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.switch {
|
||
|
|
position: absolute;
|
||
|
|
right: 20px;
|
||
|
|
z-index: 10000;
|
||
|
|
}
|
||
|
|
|
||
|
|
#main {
|
||
|
|
margin-top: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#tb-main {
|
||
|
|
margin-top: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pop-title {
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- 历史数据 -->
|
||
|
|
<div
|
||
|
|
id="sj"
|
||
|
|
class="container"
|
||
|
|
style="padding: 20px; width: 100%; height: 100%"
|
||
|
|
>
|
||
|
|
<div class="center-block text-center pop-title">历史数据</div>
|
||
|
|
<div class="tb" style="display: flex;align-items: center;">
|
||
|
|
<div id="btn-tb" class="btn btn-default" onclick="tbShow()">
|
||
|
|
历史同比
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; margin-left: 20px;align-items: center;">
|
||
|
|
<span style="display: block;width: 30px;height: 15px;background-color: #dd76aa;border-radius: 3px;";></span>
|
||
|
|
<span style="color: #dd76aa;margin-left: 5px;">2022</span>
|
||
|
|
<span style="display: block;width: 30px;height: 15px;background-color: #36c3fd;border-radius: 3px;margin-left: 20px;";></span>
|
||
|
|
<span style="color: #36c3fd;margin-left: 5px;">2023</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="switch btn-group">
|
||
|
|
<div id="btn-xqs" class="btn btn-default active" onclick="xqsShow()">
|
||
|
|
岗位需求数
|
||
|
|
</div>
|
||
|
|
<div id="btn-qzs" class="btn btn-default" onclick="qzsShow()">
|
||
|
|
求职人数
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="main" style="width: 100%; height: 580px"></div>
|
||
|
|
</div>
|
||
|
|
<!-- 历史同比 -->
|
||
|
|
<div
|
||
|
|
id="tb"
|
||
|
|
class="container"
|
||
|
|
style="display: none; padding: 20px; width: 100%; height: 100%"
|
||
|
|
>
|
||
|
|
<div class="center-block text-center pop-title">历史同比</div>
|
||
|
|
<div class="tb">
|
||
|
|
<div id="btn-tb" class="btn btn-default" onclick="sjShow()">返回</div>
|
||
|
|
</div>
|
||
|
|
<div class="switch btn-group">
|
||
|
|
<div
|
||
|
|
id="btn-tb-xqs"
|
||
|
|
class="btn btn-default active"
|
||
|
|
onclick="tbxqsShow()"
|
||
|
|
>
|
||
|
|
岗位需求数
|
||
|
|
</div>
|
||
|
|
<div id="btn-tb-qzs" class="btn btn-default" onclick="tbqzsShow()">
|
||
|
|
求职人数
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="tb-main" style="width: 958px; height: 580px"></div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var baseUrl = "http://39.101.167.152:8088/shekecaiji";
|
||
|
|
|
||
|
|
function getUrlParam(name) {
|
||
|
|
//构造一个含有目标参数的正则表达式对象
|
||
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||
|
|
//匹配目标参数
|
||
|
|
var r = window.location.search.substr(1).match(reg);
|
||
|
|
//返回参数值
|
||
|
|
if (r != null) return decodeURI(r[2]);
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
var pageType = getUrlParam("type"); //父页面的类型
|
||
|
|
var abbreviation = getUrlParam("abbreviation"); //父页面的类型
|
||
|
|
|
||
|
|
var histUrl,
|
||
|
|
tongbiUrl = "";
|
||
|
|
|
||
|
|
if (pageType == 1) {
|
||
|
|
histUrl = "/histNew/getData8";
|
||
|
|
tongbiUrl = "/tongbi/getData8";
|
||
|
|
} else if (pageType == 2) {
|
||
|
|
histUrl = "/histNew/getData5";
|
||
|
|
tongbiUrl = "/tongbi/getData5";
|
||
|
|
} else if (pageType == 3) {
|
||
|
|
histUrl = "/histNew/getData7";
|
||
|
|
tongbiUrl = "/tongbi/getData7";
|
||
|
|
} else if (pageType == 4) {
|
||
|
|
histUrl = "/histNew/getData4";
|
||
|
|
tongbiUrl = "/tongbi/getData4";
|
||
|
|
} else if (pageType == 5) {
|
||
|
|
histUrl = "/histNew/getData12";
|
||
|
|
tongbiUrl = "/tongbi/getData12";
|
||
|
|
} else if (pageType == 6) {
|
||
|
|
histUrl = "/histNew/getData10";
|
||
|
|
tongbiUrl = "/tongbi/getData10";
|
||
|
|
} else if (pageType == 0) {
|
||
|
|
histUrl = "/histNew/getData1";
|
||
|
|
tongbiUrl = "/tongbi/getData1";
|
||
|
|
} else if (pageType == 7) {
|
||
|
|
histUrl = "/histNew/getData6";
|
||
|
|
tongbiUrl = "/tongbi/getData6";
|
||
|
|
} else if (pageType == 11) {
|
||
|
|
histUrl = "/histNew/getData11";
|
||
|
|
tongbiUrl = "/tongbi/getData11";
|
||
|
|
}
|
||
|
|
|
||
|
|
var chartType = "xq"; //图表类型
|
||
|
|
|
||
|
|
var chartDom = document.getElementById("main");
|
||
|
|
var myChart = echarts.init(chartDom);
|
||
|
|
var colors = {2022: '#dd76aa', 2023: '#36c3fd', 2024: '#FFC851', 2025: '#C1EBDD'}
|
||
|
|
var option;
|
||
|
|
|
||
|
|
option = {
|
||
|
|
legend: {
|
||
|
|
data: [],
|
||
|
|
textStyle: {
|
||
|
|
color: "orange",
|
||
|
|
},
|
||
|
|
width: "95%", // 设置最大宽度为容器宽度的50%
|
||
|
|
itemGap: 10, // 设置图例每项之间的间隔为10px
|
||
|
|
left: "center", // 居中显示图例
|
||
|
|
top: "top", // 避免遮挡title
|
||
|
|
selected: {},
|
||
|
|
show: true,
|
||
|
|
itemWidth: 15,
|
||
|
|
selectedMode: "single",
|
||
|
|
itemHeight: 15,
|
||
|
|
icon: "path://M512 0C227.06087 0 0 227.06087 0 512S227.06087 1024 512 1024 1024 796.93913 1024 512 796.93913 0 512 0z m311.652174 391.791304l-342.817391 342.817392c-8.904348 8.904348-22.26087 13.356522-31.165218 13.356521s-22.26087-4.452174-31.165217-13.356521l-169.182609-169.182609c-17.808696-17.808696-17.808696-48.973913 0-66.782609 17.808696-17.808696 48.973913-17.808696 66.782609 0l138.017391 138.017392 311.652174-311.652174c17.808696-17.808696 48.973913-17.808696 66.782609 0 8.904348 17.808696 8.904348 48.973913-8.904348 66.782608z",
|
||
|
|
},
|
||
|
|
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
|
|
grid: {
|
||
|
|
left: "0",
|
||
|
|
top: "20%",
|
||
|
|
right: "5",
|
||
|
|
bottom: "5",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
nameLocation: "end",
|
||
|
|
nameGap: 7,
|
||
|
|
type: "category",
|
||
|
|
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: "9" },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: "value",
|
||
|
|
name: "万人/万个",
|
||
|
|
nameGap: 0,
|
||
|
|
nameTextStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 10,
|
||
|
|
lineHeight: 30,
|
||
|
|
height: 30,
|
||
|
|
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: [],
|
||
|
|
};
|
||
|
|
|
||
|
|
function loadData(type) {
|
||
|
|
let arrData = [];
|
||
|
|
|
||
|
|
if (chartType == "xq") {
|
||
|
|
option.yAxis.name = "万个";
|
||
|
|
} else {
|
||
|
|
option.yAxis.name = "万人";
|
||
|
|
}
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: baseUrl + histUrl,
|
||
|
|
async: true,
|
||
|
|
data: {
|
||
|
|
shengfen: abbreviation,
|
||
|
|
},
|
||
|
|
success: function (res) {
|
||
|
|
if (res.code == "0") {
|
||
|
|
var data = res.data;
|
||
|
|
option.xAxis.data = data.xiabiao;
|
||
|
|
option.legend.selected = {};
|
||
|
|
option.series = [];
|
||
|
|
var tempData = [];
|
||
|
|
for (let i = 0; i < data.fenlei.length; i++) {
|
||
|
|
let name = data.fenlei[i];
|
||
|
|
var tempObj = {
|
||
|
|
name: name,
|
||
|
|
};
|
||
|
|
tempData.push(tempObj);
|
||
|
|
|
||
|
|
let listName = chartType + name;
|
||
|
|
if(pageType == 0) {
|
||
|
|
listName = chartType
|
||
|
|
}
|
||
|
|
if (i == 0) {
|
||
|
|
option.legend.selected[`${data.fenlei[i]}`] = true;
|
||
|
|
} else {
|
||
|
|
option.legend.selected[`${data.fenlei[i]}`] = false;
|
||
|
|
}
|
||
|
|
for(item in data.data) {
|
||
|
|
console.log(item)
|
||
|
|
let myData = data.data[item]
|
||
|
|
let obj = {
|
||
|
|
name: data.fenlei[i],
|
||
|
|
type: "bar",
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
opacity: 1,
|
||
|
|
barBorderRadius: 0,
|
||
|
|
color: colors[item],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: "top",
|
||
|
|
distance: 5,
|
||
|
|
fontSize: "10",
|
||
|
|
},
|
||
|
|
barWidth: "25%",
|
||
|
|
data: myData[listName],
|
||
|
|
};
|
||
|
|
arrData.push(obj);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
option.legend.data = tempData;
|
||
|
|
option.series = arrData;
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
xqsShow();
|
||
|
|
|
||
|
|
function xqsShow() {
|
||
|
|
$("#btn-xqs").addClass("active");
|
||
|
|
$("#btn-qzs").removeClass("active");
|
||
|
|
chartType = "xq";
|
||
|
|
loadData(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function qzsShow() {
|
||
|
|
$("#btn-xqs").removeClass("active");
|
||
|
|
$("#btn-qzs").addClass("active");
|
||
|
|
chartType = "qz";
|
||
|
|
loadData(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function sjShow() {
|
||
|
|
$("#sj").show();
|
||
|
|
$("#tb").hide();
|
||
|
|
}
|
||
|
|
|
||
|
|
function tbShow() {
|
||
|
|
$("#sj").hide();
|
||
|
|
$("#tb").show();
|
||
|
|
tbxqsShow();
|
||
|
|
}
|
||
|
|
|
||
|
|
var tbChartDom = document.getElementById("tb-main");
|
||
|
|
var tBChart = echarts.init(tbChartDom);
|
||
|
|
var tbOption;
|
||
|
|
|
||
|
|
tbOption = {
|
||
|
|
// textStyle: {
|
||
|
|
// color: "#ccc",
|
||
|
|
// },
|
||
|
|
// tooltip: {
|
||
|
|
// trigger: "axis",
|
||
|
|
// },
|
||
|
|
// legend: {
|
||
|
|
// data: [],
|
||
|
|
// textStyle: {
|
||
|
|
// color: "orange",
|
||
|
|
// },
|
||
|
|
// width: "95%", // 设置最大宽度为容器宽度的50%
|
||
|
|
// itemGap: 10, // 设置图例每项之间的间隔为10px
|
||
|
|
// left: "center", // 居中显示图例
|
||
|
|
// top: "top", // 避免遮挡title
|
||
|
|
// selected: {},
|
||
|
|
// show: true,
|
||
|
|
// selectedMode: "single",
|
||
|
|
// itemWidth: 15,
|
||
|
|
// itemHeight: 15,
|
||
|
|
// icon: "path://M512 0C227.06087 0 0 227.06087 0 512S227.06087 1024 512 1024 1024 796.93913 1024 512 796.93913 0 512 0z m311.652174 391.791304l-342.817391 342.817392c-8.904348 8.904348-22.26087 13.356522-31.165218 13.356521s-22.26087-4.452174-31.165217-13.356521l-169.182609-169.182609c-17.808696-17.808696-17.808696-48.973913 0-66.782609 17.808696-17.808696 48.973913-17.808696 66.782609 0l138.017391 138.017392 311.652174-311.652174c17.808696-17.808696 48.973913-17.808696 66.782609 0 8.904348 17.808696 8.904348 48.973913-8.904348 66.782608z",
|
||
|
|
// },
|
||
|
|
// grid: {
|
||
|
|
// top: "20%",
|
||
|
|
// left: "3%",
|
||
|
|
// right: "4%",
|
||
|
|
// bottom: "3%",
|
||
|
|
// containLabel: true,
|
||
|
|
// },
|
||
|
|
// toolbox: {
|
||
|
|
// feature: {
|
||
|
|
// saveAsImage: {},
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
// xAxis: {
|
||
|
|
// type: "category",
|
||
|
|
// boundaryGap: false,
|
||
|
|
// name: "月份",
|
||
|
|
// data: [],
|
||
|
|
// },
|
||
|
|
// yAxis: {
|
||
|
|
// type: "value",
|
||
|
|
// name: "增长率",
|
||
|
|
// },
|
||
|
|
// series: [],
|
||
|
|
legend: {
|
||
|
|
data: [],
|
||
|
|
textStyle: {
|
||
|
|
color: "orange",
|
||
|
|
},
|
||
|
|
width: "95%", // 设置最大宽度为容器宽度的50%
|
||
|
|
itemGap: 10, // 设置图例每项之间的间隔为10px
|
||
|
|
left: "center", // 居中显示图例
|
||
|
|
top: "top", // 避免遮挡title
|
||
|
|
selected: {},
|
||
|
|
show: true,
|
||
|
|
itemWidth: 15,
|
||
|
|
selectedMode: "single",
|
||
|
|
itemHeight: 15,
|
||
|
|
icon: "path://M512 0C227.06087 0 0 227.06087 0 512S227.06087 1024 512 1024 1024 796.93913 1024 512 796.93913 0 512 0z m311.652174 391.791304l-342.817391 342.817392c-8.904348 8.904348-22.26087 13.356522-31.165218 13.356521s-22.26087-4.452174-31.165217-13.356521l-169.182609-169.182609c-17.808696-17.808696-17.808696-48.973913 0-66.782609 17.808696-17.808696 48.973913-17.808696 66.782609 0l138.017391 138.017392 311.652174-311.652174c17.808696-17.808696 48.973913-17.808696 66.782609 0 8.904348 17.808696 8.904348 48.973913-8.904348 66.782608z",
|
||
|
|
},
|
||
|
|
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||
|
|
grid: {
|
||
|
|
left: "0",
|
||
|
|
top: "20%",
|
||
|
|
right: "5",
|
||
|
|
bottom: "5",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
nameLocation: "end",
|
||
|
|
nameGap: 7,
|
||
|
|
name: "月份",
|
||
|
|
type: "category",
|
||
|
|
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: "9" },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: "value",
|
||
|
|
name: "增长率",
|
||
|
|
nameGap: 0,
|
||
|
|
nameTextStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 10,
|
||
|
|
lineHeight: 30,
|
||
|
|
height: 30,
|
||
|
|
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: [],
|
||
|
|
};
|
||
|
|
|
||
|
|
function tbLoadData(type) {
|
||
|
|
let arrData = [];
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: baseUrl + tongbiUrl,
|
||
|
|
async: true,
|
||
|
|
data: {
|
||
|
|
shengfen: abbreviation,
|
||
|
|
},
|
||
|
|
success: function (res) {
|
||
|
|
if (res.code == "0") {
|
||
|
|
var data = res.data;
|
||
|
|
tbOption.xAxis.data = data.dataList;
|
||
|
|
tbOption.legend.data = data.name;
|
||
|
|
tbOption.series = [];
|
||
|
|
|
||
|
|
for (let i = 0; i < data.name.length; i++) {
|
||
|
|
let listName = chartType + "list" + i;
|
||
|
|
if (pageType == 0) {
|
||
|
|
listName = chartType + "list";
|
||
|
|
}
|
||
|
|
if (i == 0) {
|
||
|
|
tbOption.legend.selected[`${data.name[i]}`] = true;
|
||
|
|
} else {
|
||
|
|
tbOption.legend.selected[`${data.name[i]}`] = false;
|
||
|
|
}
|
||
|
|
let obj = {
|
||
|
|
name: data.name[i],
|
||
|
|
type: "bar",
|
||
|
|
barWidth: "40%",
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
opacity: 1,
|
||
|
|
barBorderRadius: 0,
|
||
|
|
color: "#36c3fd",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: "top",
|
||
|
|
distance: 5,
|
||
|
|
fontSize: "10",
|
||
|
|
},
|
||
|
|
data: data[listName],
|
||
|
|
};
|
||
|
|
|
||
|
|
arrData.push(obj);
|
||
|
|
}
|
||
|
|
|
||
|
|
tbOption.series = arrData;
|
||
|
|
tbOption && tBChart.setOption(tbOption);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function tbxqsShow() {
|
||
|
|
$("#btn-tb-xqs").addClass("active");
|
||
|
|
$("#btn-tb-qzs").removeClass("active");
|
||
|
|
chartType = "xq";
|
||
|
|
tbLoadData(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function tbqzsShow() {
|
||
|
|
$("#btn-tb-xqs").removeClass("active");
|
||
|
|
$("#btn-tb-qzs").addClass("active");
|
||
|
|
chartType = "qz";
|
||
|
|
tbLoadData(1);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|