//自调用函数
(function() {
// 1、页面一加载就要知道页面宽度计算
var setFont = function() {
// 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
var html = document.documentElement; // 获取html
// 获取宽度
var width = html.clientWidth;
// 判断
if (width < 1024) width = 1024
if (width > 1920) width = 1920
// 设置html的基准值
var fontSize = width / 80 + 'px';
// 设置给html
html.style.fontSize = fontSize;
}
setFont();
// 2、页面改变的时候也需要设置
// 尺寸改变事件
window.onresize = function() {
setFont();
}
})();
$.get('https://www.jucai.gov.cn/api/config/bi/agg', (res) => {
agg_init(res)
});
$.get('https://www.jucai.gov.cn/api/config/bi/company', (res) => {
company_init(res)
});
function agg_init(data) {
$('.resume_sex-total').text(data.resume_sex[3].count);
$('.resume_sex-male').text(data.resume_sex[1].count);
$('.resume_sex-female').text(data.resume_sex[2].count);
$('.recruit_count').text(data.recruit_count);
$('.recruit_post').text(data.recruit_post);
$('.recruit_apply').text(data.recruit_apply);
this.resume_trade(data.resume_trade);
this.resume_age(data.resume_age);
this.resume_education(data.resume_education);
this.pieAge(data);
this.pieEdu(data);
}
function company_init(data) {
this.company_total(data);
this.company_count(data);
}
function resume_trade(data) {
let titleArr = [];
let countArr = [];
data.forEach((item, index) => {
titleArr.push(item.name)
countArr.push(item.count)
});
var option = {
//鼠标提示工具
tooltip: {
trigger: 'axis'
},
xAxis: {
// 类目类型
type: 'category',
// x轴刻度文字
data: titleArr,
axisTick: {
show: false //去除刻度线
},
axisLabel: {
color: '#4c9bfd' //文本颜色
},
axisLine: {
show: false //去除轴线
},
boundaryGap: false //去除轴内间距
},
yAxis: {
// 数据作为刻度文字
type: 'value',
axisTick: {
show: false //去除刻度线
},
axisLabel: {
color: '#4c9bfd' //文本颜色
},
axisLine: {
show: false //去除轴线
},
boundaryGap: false //去除轴内间距
},
//图例组件
legend: {
textStyle: {
color: '#4c9bfd' // 图例文字颜色
},
right: '10%' //距离右边10%
},
// 设置网格样式
grid: {
show: true, // 显示边框
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
borderColor: '#012f4a', // 边框颜色
containLabel: true // 包含刻度文字在内
},
series: [{
name: '求职人数',
// 数据
data: countArr,
// 图表类型
type: 'line',
// 圆滑连接
smooth: true,
itemStyle: {
color: '#00f2f1' // 线颜色
}
}]
};
var myechart = echarts.init($('.resume_trade')[0]);
myechart.setOption(option);
}
function resume_age(data) {
let unknown = 0;
let total = 0;
data.map((item, index) => {
if (item.name == '其他') {
unknown += item.count;
//其他数据
item.value = item.count;
} else {
total += item.count;
item.value = item.count;
}
return item;
});
var myechar = echarts.init($('.resume_age')[0]);
option = {
// 控制提示
tooltip: {
// 非轴图形，使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容：
// a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
formatter: "{a}
{b} : {c} ({d}%)"
},
// 控制图表
series: [{
// 图表名称
name: '年龄',
// 图表类型
type: 'pie',
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 百分比基于 图表DOM容器的半径
radius: ['10%', '70%'],
// 图表中心位置 left 50% top 50% 距离图表DOM容器
center: ['50%', '50%'],
// 半径模式，另外一种是 area 面积模式
roseType: 'radius',
// 数据集 value 数据的值 name 数据的名称
data: data,
//文字调整
label: {
fontSize: 10
},
//引导线
labelLine: {
length: 8,
length2: 10
}
}],
color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
};
myechar.setOption(option);
}
function resume_education(data) {
let unknown = 0;
let total = 0;
data.map((item, index) => {
if (item.name == '其他') {
unknown += item.count;
//其他数据
item.value = item.count;
} else {
total += item.count;
item.value = item.count;
}
return item;
});
$('.resume_education-unknown').text(unknown);
$('.resume_education-total').text(total);
var myechar = echarts.init($('.resume_education')[0]);
option = {
// 控制提示
tooltip: {
// 非轴图形，使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容：
// a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
formatter: "{a}
{b} : {c} ({d}%)"
},
// 控制图表
series: [{
// 图表名称
name: '学历',
// 图表类型
type: 'pie',
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 百分比基于 图表DOM容器的半径
radius: ['10%', '70%'],
// 图表中心位置 left 50% top 50% 距离图表DOM容器
center: ['50%', '50%'],
// 半径模式，另外一种是 area 面积模式
roseType: 'radius',
// 数据集 value 数据的值 name 数据的名称
data: data,
//文字调整
label: {
fontSize: 10
},
//引导线
labelLine: {
length: 8,
length2: 10
}
}],
color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
};
myechar.setOption(option);
}
function pieAge(data) {
let recruit_age = data.recruit_age;
let gt35 = 0;
let lt35 = 0;
recruit_age.map((item, index) => {
if (item.name == '35到40岁' || item.name == '40岁以上') {
gt35 += item.count;
//其他数据
item.value = item.count;
} else {
lt35 += item.count;
item.value = item.count;
}
return item;
});
$('.age-gt35').text(gt35);
$('.age-lt35').text(lt35);
var myechartAge = echarts.init($('.recruit_age')[0]);
option = {
// 控制提示
tooltip: {
// 非轴图形，使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容：
// a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
formatter: "{a}
{b} : {c} ({d}%)"
},
// 控制图表
series: [{
// 图表名称
name: '年龄',
// 图表类型
type: 'pie',
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 百分比基于 图表DOM容器的半径
radius: ['10%', '70%'],
// 图表中心位置 left 50% top 50% 距离图表DOM容器
center: ['50%', '50%'],
// 半径模式，另外一种是 area 面积模式
roseType: 'radius',
// 数据集 value 数据的值 name 数据的名称
data: recruit_age,
//文字调整
label: {
fontSize: 10
},
//引导线
labelLine: {
length: 8,
length2: 10
}
}],
color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
};
myechartAge.setOption(option);
}
function pieEdu(data) {
let eduction = data.recruit_education;
let unknown = 0;
let total = 0;
eduction.map((item, index) => {
if (item.name == '其他') {
unknown += item.count;
eduction.splice(index, 1);
} else {
total += item.count;
item.value = item.count;
}
return item;
});
$('.edu-unknown').text(unknown);
$('.edu-total').text(total);
var myechart = echarts.init($('.recruit_education')[0]);
option = {
// 控制提示
tooltip: {
// 非轴图形，使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容：
// a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
formatter: "{a}
{b} : {c} ({d}%)"
},
// 控制图表
series: [{
// 图表名称
name: '学历',
// 图表类型
type: 'pie',
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 百分比基于 图表DOM容器的半径
radius: ['10%', '70%'],
// 图表中心位置 left 50% top 50% 距离图表DOM容器
center: ['50%', '50%'],
// 半径模式，另外一种是 area 面积模式
roseType: 'radius',
// 数据集 value 数据的值 name 数据的名称
data: eduction,
//文字调整
label: {
fontSize: 10
},
//引导线
labelLine: {
length: 8,
length2: 10
}
}],
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
};
myechart.setOption(option);
}
function company_total(data) {
$('.company_number').text(data.total_count[0].count);
$('.jobs_number').text(data.total_count[1].count);
}
function company_count(data) {
//事件委托
$('.monitor').on('click', ' a', function () {
//点击当前的a 加类名 active 他的兄弟删除类名
$(this).addClass('active').siblings().removeClass('active');
//获取一一对应的下标
var index = $(this).index();
//选取content 然后狗日对应下标的 显示 当前的兄弟.content隐藏
$('.content').eq(index).show().siblings('.content').hide();
});
var index = 0;
var monitortimer = setInterval(() => {
index++;
if (index > 1) {
index = 0;
}
$('.monitor a').eq(index).click();
}, 5000);
//填充数据
var company_trade = data.company_trade;
var job_category = data.job_category;
var html = '';
company_trade.forEach(function(item) {
html += ``;
html += `${item.name}`;
html += `${item.count}`;
html += ``;
html += `
`;
});
//渲染
$('.company_trade').html(html);
html = '';
job_category.forEach(function(item) {
html += ``;
html += `${item.name}`;
html += `${item.count}`;
html += ``;
html += `
`;
});
//渲染
$('.job_category').html(html);
//滚动
//原理：把marquee下面的子盒子都复制一遍 加入到marquee中
// 然后动画向上滚动，滚动到一半重新开始滚动
//因为选取的是两个marquee 所以要遍历
$('.monitor .marquee').each(function (index, dom) {
//将每个 的所有子级都复制一遍
var rows = $(dom).children().clone();
//再将新的到的加入原来的
$(dom).append(rows);
});
}