//自调用函数 (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 += '
'; _html += '

'; _html += item.count; _html += '

'; _html += ''; _html += ''; _html += item.name; _html += ''; _html += '
'; }) $('.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}
{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}
{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 = []; 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_level-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_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' // } // }; // 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'] += `
  • ${item.name}${item.count}
  • `; }); data.talent_age.forEach(function (item) { htmlArr['talent_age'] += `
  • ${item.name}${item.count}
  • `; }); data.talent_education.forEach(function (item) { htmlArr['talent_education'] += `
  • ${item.name}${item.count}
  • `; }); $('.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; } $('.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; } $('.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); }); }