|
|
@@ -28,12 +28,14 @@ $.get('https://www.jucai.gov.cn/api/config/bi/jkq', (res) => {
|
|
|
|
|
|
function init(data) {
|
|
|
this.talent_level(data.talent_level);
|
|
|
- this.talent_industry(data.talent_industry);
|
|
|
- this.talent_age(data.talent_age);
|
|
|
- this.talent_education(data.talent_education);
|
|
|
+ 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_trade(data.company_trade);
|
|
|
- this.job_category(data.job_category);
|
|
|
+ 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);
|
|
|
@@ -153,157 +155,83 @@ function resume_age(data) {
|
|
|
myechar.setOption(option);
|
|
|
}
|
|
|
|
|
|
-
|
|
|
function resume_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
|
|
|
+ titleArr.push(item.name)
|
|
|
+ countArr.push(item.count)
|
|
|
});
|
|
|
- $('.resume_trade-count').text(count)
|
|
|
- $('.resume_trade-total').text(total)
|
|
|
-
|
|
|
- option = {
|
|
|
- // 工具提示
|
|
|
+ var option = {
|
|
|
+ //鼠标提示工具
|
|
|
tooltip: {
|
|
|
- // 触发类型 经过轴触发axis 经过轴触发item
|
|
|
- trigger: 'item',
|
|
|
- // 轴触发提示才有效
|
|
|
- axisPointer: {
|
|
|
- // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
+ trigger: 'axis'
|
|
|
},
|
|
|
- // 图表边界控制
|
|
|
- grid: {
|
|
|
- // 距离 上右下左 的距离
|
|
|
- left: '0',
|
|
|
- right: '3%',
|
|
|
- bottom: '3%',
|
|
|
- top: '5%',
|
|
|
- // 大小是否包含文本【类似于boxsizing】
|
|
|
- containLabel: true,
|
|
|
- //显示边框
|
|
|
- show: true,
|
|
|
- //边框颜色
|
|
|
- borderColor: 'rgba(0, 240, 255, 0.3)'
|
|
|
- },
|
|
|
- // 控制x轴
|
|
|
- xAxis: [{
|
|
|
- // 使用类目，必须有data属性
|
|
|
+ xAxis: {
|
|
|
+ // 类目类型
|
|
|
type: 'category',
|
|
|
- // 使用 data 中的数据设为刻度文字
|
|
|
+ // x轴刻度文字
|
|
|
data: titleArr,
|
|
|
- // 刻度设置
|
|
|
axisTick: {
|
|
|
- // true意思：图形在刻度中间
|
|
|
- // false意思：图形在刻度之间
|
|
|
- alignWithLabel: false,
|
|
|
- show: false
|
|
|
+ show: false //去除刻度线
|
|
|
},
|
|
|
- //文字
|
|
|
axisLabel: {
|
|
|
- color: '#4c9bfd'
|
|
|
- }
|
|
|
- }],
|
|
|
- // 控制y轴
|
|
|
- yAxis: [{
|
|
|
- // 使用数据的值设为刻度文字
|
|
|
+ color: '#4c9bfd' //文本颜色
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false //去除轴线
|
|
|
+ },
|
|
|
+ boundaryGap: false //去除轴内间距
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ // 数据作为刻度文字
|
|
|
type: 'value',
|
|
|
axisTick: {
|
|
|
- // true意思：图形在刻度中间
|
|
|
- // false意思：图形在刻度之间
|
|
|
- alignWithLabel: false,
|
|
|
- show: false
|
|
|
+ show: false //去除刻度线
|
|
|
},
|
|
|
- //文字
|
|
|
axisLabel: {
|
|
|
- color: '#4c9bfd'
|
|
|
+ color: '#4c9bfd' //文本颜色
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(0, 240, 255, 0.3)'
|
|
|
- }
|
|
|
+ axisLine: {
|
|
|
+ show: false //去除轴线
|
|
|
},
|
|
|
- }],
|
|
|
- // 控制x轴
|
|
|
- series: [
|
|
|
+ boundaryGap: false //去除轴内间距
|
|
|
+ },
|
|
|
+ //图例组件
|
|
|
+ legend: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#4c9bfd' // 图例文字颜色
|
|
|
|
|
|
- {
|
|
|
- // 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
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
@@ -726,117 +654,117 @@ function total_count(data) {
|
|
|
$('.total_count').html(_html);
|
|
|
}
|
|
|
|
|
|
-function talent_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;
|
|
|
- });
|
|
|
- // $('.age-unknown').text(unknown);
|
|
|
- $('.talent_education-total').text(total);
|
|
|
- var myechar = echarts.init($('.talent_education')[0]);
|
|
|
- option = {
|
|
|
- // 控制提示
|
|
|
- tooltip: {
|
|
|
- // 非轴图形，使用item的意思是放到数据对应图形上触发提示
|
|
|
- trigger: 'item',
|
|
|
- // 格式化提示内容：
|
|
|
- // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
|
|
|
- formatter: "{a} <br/>{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 talent_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;
|
|
|
+// });
|
|
|
+// // $('.age-unknown').text(unknown);
|
|
|
+// $('.talent_education-total').text(total);
|
|
|
+// var myechar = echarts.init($('.talent_education')[0]);
|
|
|
+// option = {
|
|
|
+// // 控制提示
|
|
|
+// tooltip: {
|
|
|
+// // 非轴图形，使用item的意思是放到数据对应图形上触发提示
|
|
|
+// trigger: 'item',
|
|
|
+// // 格式化提示内容：
|
|
|
+// // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
|
|
|
+// formatter: "{a} <br/>{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 talent_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);
|
|
|
- $('.talent_age-total').text(total);
|
|
|
- var myechar = echarts.init($('.talent_age')[0]);
|
|
|
- option = {
|
|
|
- // 控制提示
|
|
|
- tooltip: {
|
|
|
- // 非轴图形，使用item的意思是放到数据对应图形上触发提示
|
|
|
- trigger: 'item',
|
|
|
- // 格式化提示内容：
|
|
|
- // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
|
|
|
- formatter: "{a} <br/>{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 talent_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);
|
|
|
+// $('.talent_age-total').text(total);
|
|
|
+// var myechar = echarts.init($('.talent_age')[0]);
|
|
|
+// option = {
|
|
|
+// // 控制提示
|
|
|
+// tooltip: {
|
|
|
+// // 非轴图形，使用item的意思是放到数据对应图形上触发提示
|
|
|
+// trigger: 'item',
|
|
|
+// // 格式化提示内容：
|
|
|
+// // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
|
|
|
+// formatter: "{a} <br/>{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 talent_level(data) {
|
|
|
let titleArr = [];
|
|
|
@@ -985,151 +913,239 @@ function talent_level(data) {
|
|
|
var myechart = echarts.init($('.talent_level')[0]);
|
|
|
myechart.setOption(option);
|
|
|
}
|
|
|
-function talent_industry(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'
|
|
|
+
|
|
|
+// function talent_industry(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
|
|
|
+// });
|
|
|
+// $('.talent_industry-count').text(count)
|
|
|
+// $('.talent_industry-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($('.talent_industry')[0]);
|
|
|
+// myechart.setOption(option);
|
|
|
+// }
|
|
|
+
|
|
|
+//人才分布
|
|
|
+function talent_count(data) {
|
|
|
+ var htmlArr = [];
|
|
|
+ htmlArr['talent_industry'] = '';
|
|
|
+ htmlArr['talent_age'] = '';
|
|
|
+ htmlArr['talent_education'] = '';
|
|
|
+ data.talent_industry.forEach(function (item) {
|
|
|
+ htmlArr['talent_industry'] += `<li><span>${item.name}</span><span>${item.count} <s class="icon-up"></s></span></li>`;
|
|
|
+ });
|
|
|
+ data.talent_age.forEach(function (item) {
|
|
|
+ htmlArr['talent_age'] += `<li><span>${item.name}</span><span>${item.count} <s class="icon-up"></s></span></li>`;
|
|
|
+ });
|
|
|
+ data.talent_education.forEach(function (item) {
|
|
|
+ htmlArr['talent_education'] += `<li><span>${item.name}</span><span>${item.count} <s class="icon-up"></s></span></li>`;
|
|
|
+ });
|
|
|
+ $('.inner').on('mouseenter', '.sup li', function () {
|
|
|
+ $(this).addClass('active').siblings().removeClass('active');
|
|
|
+ //渲染
|
|
|
+ $('.sub').html(htmlArr[$(this).attr('data-type')]);
|
|
|
+ });
|
|
|
+ $('.province .sup li').eq(0).mouseenter();
|
|
|
+ var index = 0;
|
|
|
+ var timer = setInterval(() => {
|
|
|
+ index++;
|
|
|
+ if (index > 2) {
|
|
|
+ index = 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)
|
|
|
- })
|
|
|
+ $('.sup li').eq(index).mouseenter();
|
|
|
+ }, 2000);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+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;
|
|
|
}
|
|
|
- total += item.count
|
|
|
+ $('.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 += `<div class="row">`;
|
|
|
+ html += `<span class="col">${item.name}</span>`;
|
|
|
+ html += `<span class="col">${item.count}</span>`;
|
|
|
+ html += `<span class="icon-dot"></span>`;
|
|
|
+ html += `</div>`;
|
|
|
+ });
|
|
|
+ //渲染
|
|
|
+ $('.company_trade').html(html);
|
|
|
+ html = '';
|
|
|
+ job_category.forEach(function(item) {
|
|
|
+ html += `<div class="row">`;
|
|
|
+ html += `<span class="col">${item.name}</span>`;
|
|
|
+ html += `<span class="col">${item.count}</span>`;
|
|
|
+ html += `<span class="icon-dot"></span>`;
|
|
|
+ html += `</div>`;
|
|
|
+ });
|
|
|
+ //渲染
|
|
|
+ $('.job_category').html(html);
|
|
|
+ //滚动
|
|
|
+ //原理：把marquee下面的子盒子都复制一遍 加入到marquee中
|
|
|
+ // 然后动画向上滚动，滚动到一半重新开始滚动
|
|
|
+ //因为选取的是两个marquee 所以要遍历
|
|
|
+ $('.monitor .marquee').each(function (index, dom) {
|
|
|
+ //将每个 的所有子级都复制一遍
|
|
|
+ var rows = $(dom).children().clone();
|
|
|
+ //再将新的到的加入原来的
|
|
|
+ $(dom).append(rows);
|
|
|
});
|
|
|
- $('.talent_industry-count').text(count)
|
|
|
- $('.talent_industry-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($('.talent_industry')[0]);
|
|
|
- myechart.setOption(option);
|
|
|
}
|
