|
|
@@ -0,0 +1,447 @@
|
|
|
+//自调用函数
|
|
|
+(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} <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 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} <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 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} <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: 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} <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: 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}<br/>{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);
|
|
|
+}
|
