//自调用函数
(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/jkq', (res) => {
init(res)
})
function init(data) {
this.talent_level(data.talent_level);
this.talent_count(data);
// this.talent_industry(data.talent_industry);
// this.talent_age(data.talent_age);
// this.talent_education(data.talent_education);
this.total_count(data.total_count);
this.company_count(data);
// this.company_trade(data.company_trade);
// this.job_category(data.job_category);
this.job_wage(data.job_wage);
this.job_education(data.job_education);
this.resume_sex(data.resume_sex);
this.resume_trade(data.resume_trade);
this.resume_age(data.resume_age);
this.resume_education(data.resume_education);
}
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 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;
});
// $('.age-unknown').text(unknown);
$('.resume_age-total').text(total);
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_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_sex(data) {
data.forEach((item, index) => {
switch (item.name) {
case '总人数':
$('.resume_sex-total').text(item.count);
break;
case '男':
$('.resume_sex-male').text(item.count);
break;
case '女':
$('.resume_sex-female').text(item.count);
break;
}
})
}
function job_education(data) {
data.map((item, index) => {
item.value = item.count;
return item;
});
var myechar = echarts.init($('.job_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 job_wage(data) {
data.map((item, index) => {
item.value = item.count;
return item;
});
var myechar = echarts.init($('.job_wage')[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 job_category(data) {
let titleArr = [];
let countArr = [];
let total = 0;
let count = data.length;
// 中间省略的数据 准备三项
var hiddenItem = {
name: '',
value: 10,
// 柱子颜色
itemStyle: {
color: '#254065'
},
// 鼠标经过柱子颜色
emphasis: {
itemStyle: {
color: '#254065'
}
},
// 工具提示隐藏
tooltip: {
extraCssText: 'opacity:0'
}
};
data.forEach((item, index) => {
if (index < 7 || index + 7 >= count) {
titleArr.push(item.name)
countArr.push(item.count)
} else if (count > 12 && index == 7) {
//随机三个
let arr = []
for (let i = 7; i < count - 7; i++) {
arr.push(i)
}
let randomArr = [];
while (randomArr.length < 3) {
let temp = (Math.random() * arr.length) >> 0;
randomArr.push(arr.splice(temp, 1)[0]);
}
randomArr.forEach((randomIndex) => {
titleArr.push(data[randomIndex].name)
countArr.push(data[randomIndex].count)
})
}
total += item.count
});
$('.job_category-count').text(count)
$('.job_category-total').text(total)
option = {
// 工具提示
tooltip: {
// 触发类型 经过轴触发axis 经过轴触发item
trigger: 'item',
// 轴触发提示才有效
axisPointer: {
// 默认为直线,可选为:'line' 线效果 | 'shadow' 阴影效果
type: 'shadow'
}
},
// 图表边界控制
grid: {
// 距离 上右下左 的距离
left: '0',
right: '3%',
bottom: '3%',
top: '5%',
// 大小是否包含文本【类似于boxsizing】
containLabel: true,
//显示边框
show: true,
//边框颜色
borderColor: 'rgba(0, 240, 255, 0.3)'
},
// 控制x轴
xAxis: [{
// 使用类目,必须有data属性
type: 'category',
// 使用 data 中的数据设为刻度文字
data: titleArr,
// 刻度设置
axisTick: {
// true意思:图形在刻度中间
// false意思:图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
}
}],
// 控制y轴
yAxis: [{
// 使用数据的值设为刻度文字
type: 'value',
axisTick: {
// true意思:图形在刻度中间
// false意思:图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
},
splitLine: {
lineStyle: {
color: 'rgba(0, 240, 255, 0.3)'
}
},
}],
// 控制x轴
series: [
{
// series配置
// 颜色
itemStyle: {
// 提供的工具函数生成渐变颜色
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
0, 0, 0, 1,
[{
offset: 0,
color: '#00fffb'
}, // 0 起始颜色
{
offset: 1,
color: '#0061ce'
} // 1 结束颜色
]
)
},
// 图表数据名称
name: '需求数量',
// 图表类型
type: 'bar',
// 柱子宽度
barWidth: '60%',
// 数据
data: countArr
}
]
};
var myechart = echarts.init($('.job_category')[0]);
myechart.setOption(option);
}
function company_trade(data) {
let titleArr = [];
let countArr = [];
let total = 0;
let count = data.length;
// 中间省略的数据 准备三项
var hiddenItem = {
name: '',
value: 10,
// 柱子颜色
itemStyle: {
color: '#254065'
},
// 鼠标经过柱子颜色
emphasis: {
itemStyle: {
color: '#254065'
}
},
// 工具提示隐藏
tooltip: {
extraCssText: 'opacity:0'
}
};
data.forEach((item, index) => {
if (index < 7 || index + 7 >= count) {
titleArr.push(item.name)
countArr.push(item.count)
} else if (count > 12 && index == 7) {
//随机三个
let arr = []
for (let i = 7; i < count - 7; i++) {
arr.push(i)
}
let randomArr = [];
while (randomArr.length < 3) {
let temp = (Math.random() * arr.length) >> 0;
randomArr.push(arr.splice(temp, 1)[0]);
}
randomArr.forEach((randomIndex) => {
titleArr.push(data[randomIndex].name)
countArr.push(data[randomIndex].count)
})
}
total += item.count
});
$('.company_trade-count').text(count)
$('.company_trade-total').text(total)
option = {
// 工具提示
tooltip: {
// 触发类型 经过轴触发axis 经过轴触发item
trigger: 'item',
// 轴触发提示才有效
axisPointer: {
// 默认为直线,可选为:'line' 线效果 | 'shadow' 阴影效果
type: 'shadow'
}
},
// 图表边界控制
grid: {
// 距离 上右下左 的距离
left: '0',
right: '3%',
bottom: '3%',
top: '5%',
// 大小是否包含文本【类似于boxsizing】
containLabel: true,
//显示边框
show: true,
//边框颜色
borderColor: 'rgba(0, 240, 255, 0.3)'
},
// 控制x轴
xAxis: [{
// 使用类目,必须有data属性
type: 'category',
// 使用 data 中的数据设为刻度文字
data: titleArr,
// 刻度设置
axisTick: {
// true意思:图形在刻度中间
// false意思:图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
}
}],
// 控制y轴
yAxis: [{
// 使用数据的值设为刻度文字
type: 'value',
axisTick: {
// true意思:图形在刻度中间
// false意思:图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
},
splitLine: {
lineStyle: {
color: 'rgba(0, 240, 255, 0.3)'
}
},
}],
// 控制x轴
series: [
{
// series配置
// 颜色
itemStyle: {
// 提供的工具函数生成渐变颜色
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
0, 0, 0, 1,
[{
offset: 0,
color: '#00fffb'
}, // 0 起始颜色
{
offset: 1,
color: '#0061ce'
} // 1 结束颜色
]
)
},
// 图表数据名称
name: '企业数量',
// 图表类型
type: 'bar',
// 柱子宽度
barWidth: '60%',
// 数据
data: countArr
}
]
};
var myechart = echarts.init($('.company_trade')[0]);
myechart.setOption(option);
}
function total_count(data) {
let _html = '';
let colors = ['#ed3f35', '#eacf19', '#9fe6b8'];
data.forEach((item, index) => {
_html += '