173 lines
4.2 KiB
HTML
173 lines
4.2 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>
|
||
|
|
.result {
|
||
|
|
position: absolute;
|
||
|
|
left: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.switch {
|
||
|
|
position: absolute;
|
||
|
|
right: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#main {
|
||
|
|
margin-top: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pop-title {
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container" style="padding: 20px;width: 100%; height: 100%;">
|
||
|
|
<div class="center-block text-center pop-title">历史同比</div>
|
||
|
|
<div class="result">
|
||
|
|
<div id="btn-result" class="btn btn-default" onclick="parent.layer.closeAll()">
|
||
|
|
返回
|
||
|
|
</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>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var baseUrl = 'http://39.101.167.152:8088/shekecaiji';
|
||
|
|
|
||
|
|
var chartType = "xq";
|
||
|
|
|
||
|
|
var chartDom = document.getElementById('main');
|
||
|
|
var myChart = echarts.init(chartDom);
|
||
|
|
var option;
|
||
|
|
|
||
|
|
option = {
|
||
|
|
textStyle: {
|
||
|
|
color: '#ccc',
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: [],
|
||
|
|
textStyle: {
|
||
|
|
color: '#ccc',
|
||
|
|
},
|
||
|
|
maxWidth: '50%',
|
||
|
|
itemGap: 10,
|
||
|
|
left: 'center',
|
||
|
|
top: 'top',
|
||
|
|
},
|
||
|
|
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: []
|
||
|
|
};
|
||
|
|
|
||
|
|
function loadData(type) {
|
||
|
|
let arrData = [];
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
type: 'GET',
|
||
|
|
url: baseUrl + '/tongbi/getData8',
|
||
|
|
async: false,
|
||
|
|
data: {},
|
||
|
|
success: function (res) {
|
||
|
|
//console.log(res);
|
||
|
|
if (res.code == '0') {
|
||
|
|
var data = res.data;
|
||
|
|
console.log(data);
|
||
|
|
option.xAxis.data = data.dataList;
|
||
|
|
option.legend.data = data.name;
|
||
|
|
option.legend.selected = {}
|
||
|
|
option.series = [];
|
||
|
|
|
||
|
|
for (let i = 0; i < data.name.length; i++) {
|
||
|
|
let listName = chartType + 'List' + i;
|
||
|
|
console.log(listName);
|
||
|
|
if(i == 0) {
|
||
|
|
option.legend.selected[`${data.name[i]}`] = true
|
||
|
|
} else {
|
||
|
|
option.legend.selected[`${data.name[i]}`] = false
|
||
|
|
}
|
||
|
|
let obj = {
|
||
|
|
name: data.name[i],
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: data[listName]
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(data[listName]);
|
||
|
|
|
||
|
|
arrData.push(obj);
|
||
|
|
}
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|