//自调用函数
(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://linggong.jinjianghc.com/mainapp.php/screen/agg', (res) => {
odd_init(res.data)
});
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 odd_init(data) {
this.geo(data);
this.odd_total(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 geo(data) {
let community = data.community;
let other = 0;
let max = 0; //最大人数
community = community.map((item) => {
if (item.name == '其他') {
other += item.count;
} else if (item.count > max) {
max = item.count;
}
return {
name: item.name,
value: item.count
};
});
community.push({
name: '泉州出口加工区',
value: 0
});
community.push({
name: '安平开发区',
value: 0
});
var myecharts = echarts.init($('.map .geo')[0])
// $.get('https://geo.datav.aliyun.com/areas_v3/bound/350582.json', result => {
$.get('js/350582.json', result => {
// 注册 echarts 地图
echarts.registerMap('jinjiang', result);
var option = {
backgroundColor: '#080a20',
title: {
text: '其他地区：' + other + ' (人)',
// subtext: '其他地区：' + community[community.length - 1].count,
left: 'left',
textStyle: {
color: '#ffffff'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}
{c} (人)'
},
visualMap: {
min: 0,
max: max,
text: ['多', '少'],
realtime: true,
calculable: true,
color: '#fff',
inRange: {
color: ['#142957', '#0b1c2d']
},
textStyle: {
color: '#fff'
}
},
series: [{
type: 'map',
map: 'jinjiang',
zoom: 1.2,
roam: true,
coordinateSystem: 'geo',
// rippleEffect: {
// brushType: 'stroke'
// },
symbolSize: function(val, params) {
return 8;
},
label: {
show: true,
color: '#fff'
},
itemStyle: {
normal: {
areaColor: '#142957',
borderColor: '#0692a4'
}
},
emphasis: {
areaColor: '#0b1c2d'
},
data: community,
nameMap: {
'晋江市经济开发区': '经济开发区'
}
}]
};
myecharts.setOption(option);
})
}
function odd_total(data) {
$('.odd_job_number').text(data.user_total);
$('.odd_job_company').text(data.company_total);
$('.odd_job_job').text(data.comjobs_total);
}