index.js 27 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151
  1. //自调用函数
  2. (function() {
  3. // 1、页面一加载就要知道页面宽度计算
  4. var setFont = function() {
  5. // 因为要定义变量可能和别的变量相互冲突,污染,所有用自调用函数
  6. var html = document.documentElement; // 获取html
  7. // 获取宽度
  8. var width = html.clientWidth;
  9. // 判断
  10. if (width < 1024) width = 1024
  11. if (width > 1920) width = 1920
  12. // 设置html的基准值
  13. var fontSize = width / 80 + 'px';
  14. // 设置给html
  15. html.style.fontSize = fontSize;
  16. }
  17. setFont();
  18. // 2、页面改变的时候也需要设置
  19. // 尺寸改变事件
  20. window.onresize = function() {
  21. setFont();
  22. }
  23. })();
  24. $.get('https://www.jucai.gov.cn/api/config/bi/jkq', (res) => {
  25. init(res)
  26. })
  27. function init(data) {
  28. this.talent_level(data.talent_level);
  29. this.talent_count(data);
  30. // this.talent_industry(data.talent_industry);
  31. // this.talent_age(data.talent_age);
  32. // this.talent_education(data.talent_education);
  33. this.total_count(data.total_count);
  34. this.company_count(data);
  35. // this.company_trade(data.company_trade);
  36. // this.job_category(data.job_category);
  37. this.job_wage(data.job_wage);
  38. this.job_education(data.job_education);
  39. this.resume_sex(data.resume_sex);
  40. this.resume_trade(data.resume_trade);
  41. this.resume_age(data.resume_age);
  42. this.resume_education(data.resume_education);
  43. }
  44. function resume_education(data) {
  45. let unknown = 0;
  46. let total = 0;
  47. data.map((item, index) => {
  48. if (item.name == '其他') {
  49. unknown += item.count;
  50. //其他数据
  51. item.value = item.count;
  52. } else {
  53. total += item.count;
  54. item.value = item.count;
  55. }
  56. return item;
  57. });
  58. $('.resume_education-unknown').text(unknown);
  59. $('.resume_education-total').text(total);
  60. var myechar = echarts.init($('.resume_education')[0]);
  61. option = {
  62. // 控制提示
  63. tooltip: {
  64. // 非轴图形,使用item的意思是放到数据对应图形上触发提示
  65. trigger: 'item',
  66. // 格式化提示内容:
  67. // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
  68. formatter: "{a} <br/>{b} : {c} ({d}%)"
  69. },
  70. // 控制图表
  71. series: [{
  72. // 图表名称
  73. name: '学历',
  74. // 图表类型
  75. type: 'pie',
  76. // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
  77. // 百分比基于 图表DOM容器的半径
  78. radius: ['10%', '70%'],
  79. // 图表中心位置 left 50% top 50% 距离图表DOM容器
  80. center: ['50%', '50%'],
  81. // 半径模式,另外一种是 area 面积模式
  82. roseType: 'radius',
  83. // 数据集 value 数据的值 name 数据的名称
  84. data: data,
  85. //文字调整
  86. label: {
  87. fontSize: 10
  88. },
  89. //引导线
  90. labelLine: {
  91. length: 8,
  92. length2: 10
  93. }
  94. }],
  95. color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
  96. };
  97. myechar.setOption(option);
  98. }
  99. function resume_age(data) {
  100. let unknown = 0;
  101. let total = 0;
  102. data.map((item, index) => {
  103. if (item.name == '其他') {
  104. unknown += item.count;
  105. //其他数据
  106. item.value = item.count;
  107. } else {
  108. total += item.count;
  109. item.value = item.count;
  110. }
  111. return item;
  112. });
  113. // $('.age-unknown').text(unknown);
  114. $('.resume_age-total').text(total);
  115. var myechar = echarts.init($('.resume_age')[0]);
  116. option = {
  117. // 控制提示
  118. tooltip: {
  119. // 非轴图形,使用item的意思是放到数据对应图形上触发提示
  120. trigger: 'item',
  121. // 格式化提示内容:
  122. // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
  123. formatter: "{a} <br/>{b} : {c} ({d}%)"
  124. },
  125. // 控制图表
  126. series: [{
  127. // 图表名称
  128. name: '年龄',
  129. // 图表类型
  130. type: 'pie',
  131. // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
  132. // 百分比基于 图表DOM容器的半径
  133. radius: ['10%', '70%'],
  134. // 图表中心位置 left 50% top 50% 距离图表DOM容器
  135. center: ['50%', '50%'],
  136. // 半径模式,另外一种是 area 面积模式
  137. roseType: 'radius',
  138. // 数据集 value 数据的值 name 数据的名称
  139. data: data,
  140. //文字调整
  141. label: {
  142. fontSize: 10
  143. },
  144. //引导线
  145. labelLine: {
  146. length: 8,
  147. length2: 10
  148. }
  149. }],
  150. color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
  151. };
  152. myechar.setOption(option);
  153. }
  154. function resume_trade(data) {
  155. let titleArr = [];
  156. let countArr = [];
  157. data.forEach((item, index) => {
  158. titleArr.push(item.name)
  159. countArr.push(item.count)
  160. });
  161. var option = {
  162. //鼠标提示工具
  163. tooltip: {
  164. trigger: 'axis'
  165. },
  166. xAxis: {
  167. // 类目类型
  168. type: 'category',
  169. // x轴刻度文字
  170. data: titleArr,
  171. axisTick: {
  172. show: false //去除刻度线
  173. },
  174. axisLabel: {
  175. color: '#4c9bfd' //文本颜色
  176. },
  177. axisLine: {
  178. show: false //去除轴线
  179. },
  180. boundaryGap: false //去除轴内间距
  181. },
  182. yAxis: {
  183. // 数据作为刻度文字
  184. type: 'value',
  185. axisTick: {
  186. show: false //去除刻度线
  187. },
  188. axisLabel: {
  189. color: '#4c9bfd' //文本颜色
  190. },
  191. axisLine: {
  192. show: false //去除轴线
  193. },
  194. boundaryGap: false //去除轴内间距
  195. },
  196. //图例组件
  197. legend: {
  198. textStyle: {
  199. color: '#4c9bfd' // 图例文字颜色
  200. },
  201. right: '10%' //距离右边10%
  202. },
  203. // 设置网格样式
  204. grid: {
  205. show: true, // 显示边框
  206. top: '20%',
  207. left: '3%',
  208. right: '4%',
  209. bottom: '3%',
  210. borderColor: '#012f4a', // 边框颜色
  211. containLabel: true // 包含刻度文字在内
  212. },
  213. series: [{
  214. name: '求职人数',
  215. // 数据
  216. data: countArr,
  217. // 图表类型
  218. type: 'line',
  219. // 圆滑连接
  220. smooth: true,
  221. itemStyle: {
  222. color: '#00f2f1' // 线颜色
  223. }
  224. }]
  225. };
  226. var myechart = echarts.init($('.resume_trade')[0]);
  227. myechart.setOption(option);
  228. }
  229. function resume_sex(data) {
  230. data.forEach((item, index) => {
  231. switch (item.name) {
  232. case '总人数':
  233. $('.resume_sex-total').text(item.count);
  234. break;
  235. case '男':
  236. $('.resume_sex-male').text(item.count);
  237. break;
  238. case '女':
  239. $('.resume_sex-female').text(item.count);
  240. break;
  241. }
  242. })
  243. }
  244. function job_education(data) {
  245. data.map((item, index) => {
  246. item.value = item.count;
  247. return item;
  248. });
  249. var myechar = echarts.init($('.job_education')[0]);
  250. option = {
  251. // 控制提示
  252. tooltip: {
  253. // 非轴图形,使用item的意思是放到数据对应图形上触发提示
  254. trigger: 'item',
  255. // 格式化提示内容:
  256. // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
  257. formatter: "{a} <br/>{b} : {c} ({d}%)"
  258. },
  259. // 控制图表
  260. series: [{
  261. // 图表名称
  262. name: '学历范围',
  263. // 图表类型
  264. type: 'pie',
  265. // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
  266. // 百分比基于 图表DOM容器的半径
  267. radius: ['10%', '70%'],
  268. // 图表中心位置 left 50% top 50% 距离图表DOM容器
  269. center: ['50%', '50%'],
  270. // 半径模式,另外一种是 area 面积模式
  271. roseType: 'radius',
  272. // 数据集 value 数据的值 name 数据的名称
  273. data: data,
  274. //文字调整
  275. label: {
  276. fontSize: 10
  277. },
  278. //引导线
  279. labelLine: {
  280. length: 8,
  281. length2: 10
  282. }
  283. }],
  284. color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
  285. };
  286. myechar.setOption(option);
  287. }
  288. function job_wage(data) {
  289. data.map((item, index) => {
  290. item.value = item.count;
  291. return item;
  292. });
  293. var myechar = echarts.init($('.job_wage')[0]);
  294. option = {
  295. // 控制提示
  296. tooltip: {
  297. // 非轴图形,使用item的意思是放到数据对应图形上触发提示
  298. trigger: 'item',
  299. // 格式化提示内容:
  300. // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
  301. formatter: "{a} <br/>{b} : {c} ({d}%)"
  302. },
  303. // 控制图表
  304. series: [{
  305. // 图表名称
  306. name: '薪酬要求',
  307. // 图表类型
  308. type: 'pie',
  309. // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
  310. // 百分比基于 图表DOM容器的半径
  311. radius: ['10%', '70%'],
  312. // 图表中心位置 left 50% top 50% 距离图表DOM容器
  313. center: ['50%', '50%'],
  314. // 半径模式,另外一种是 area 面积模式
  315. roseType: 'radius',
  316. // 数据集 value 数据的值 name 数据的名称
  317. data: data,
  318. //文字调整
  319. label: {
  320. fontSize: 10
  321. },
  322. //引导线
  323. labelLine: {
  324. length: 8,
  325. length2: 10
  326. }
  327. }],
  328. color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
  329. };
  330. myechar.setOption(option);
  331. }
  332. function job_category(data) {
  333. let titleArr = [];
  334. let countArr = [];
  335. let total = 0;
  336. let count = data.length;
  337. // 中间省略的数据 准备三项
  338. var hiddenItem = {
  339. name: '',
  340. value: 10,
  341. // 柱子颜色
  342. itemStyle: {
  343. color: '#254065'
  344. },
  345. // 鼠标经过柱子颜色
  346. emphasis: {
  347. itemStyle: {
  348. color: '#254065'
  349. }
  350. },
  351. // 工具提示隐藏
  352. tooltip: {
  353. extraCssText: 'opacity:0'
  354. }
  355. };
  356. data.forEach((item, index) => {
  357. if (index < 7 || index + 7 >= count) {
  358. titleArr.push(item.name)
  359. countArr.push(item.count)
  360. } else if (count > 12 && index == 7) {
  361. //随机三个
  362. let arr = []
  363. for (let i = 7; i < count - 7; i++) {
  364. arr.push(i)
  365. }
  366. let randomArr = [];
  367. while (randomArr.length < 3) {
  368. let temp = (Math.random() * arr.length) >> 0;
  369. randomArr.push(arr.splice(temp, 1)[0]);
  370. }
  371. randomArr.forEach((randomIndex) => {
  372. titleArr.push(data[randomIndex].name)
  373. countArr.push(data[randomIndex].count)
  374. })
  375. }
  376. total += item.count
  377. });
  378. $('.job_category-count').text(count)
  379. $('.job_category-total').text(total)
  380. option = {
  381. // 工具提示
  382. tooltip: {
  383. // 触发类型 经过轴触发axis 经过轴触发item
  384. trigger: 'item',
  385. // 轴触发提示才有效
  386. axisPointer: {
  387. // 默认为直线,可选为:'line' 线效果 | 'shadow' 阴影效果
  388. type: 'shadow'
  389. }
  390. },
  391. // 图表边界控制
  392. grid: {
  393. // 距离 上右下左 的距离
  394. left: '0',
  395. right: '3%',
  396. bottom: '3%',
  397. top: '5%',
  398. // 大小是否包含文本【类似于boxsizing】
  399. containLabel: true,
  400. //显示边框
  401. show: true,
  402. //边框颜色
  403. borderColor: 'rgba(0, 240, 255, 0.3)'
  404. },
  405. // 控制x轴
  406. xAxis: [{
  407. // 使用类目,必须有data属性
  408. type: 'category',
  409. // 使用 data 中的数据设为刻度文字
  410. data: titleArr,
  411. // 刻度设置
  412. axisTick: {
  413. // true意思:图形在刻度中间
  414. // false意思:图形在刻度之间
  415. alignWithLabel: false,
  416. show: false
  417. },
  418. //文字
  419. axisLabel: {
  420. color: '#4c9bfd'
  421. }
  422. }],
  423. // 控制y轴
  424. yAxis: [{
  425. // 使用数据的值设为刻度文字
  426. type: 'value',
  427. axisTick: {
  428. // true意思:图形在刻度中间
  429. // false意思:图形在刻度之间
  430. alignWithLabel: false,
  431. show: false
  432. },
  433. //文字
  434. axisLabel: {
  435. color: '#4c9bfd'
  436. },
  437. splitLine: {
  438. lineStyle: {
  439. color: 'rgba(0, 240, 255, 0.3)'
  440. }
  441. },
  442. }],
  443. // 控制x轴
  444. series: [
  445. {
  446. // series配置
  447. // 颜色
  448. itemStyle: {
  449. // 提供的工具函数生成渐变颜色
  450. color: new echarts.graphic.LinearGradient(
  451. // (x1,y2) 点到点 (x2,y2) 之间进行渐变
  452. 0, 0, 0, 1,
  453. [{
  454. offset: 0,
  455. color: '#00fffb'
  456. }, // 0 起始颜色
  457. {
  458. offset: 1,
  459. color: '#0061ce'
  460. } // 1 结束颜色
  461. ]
  462. )
  463. },
  464. // 图表数据名称
  465. name: '需求数量',
  466. // 图表类型
  467. type: 'bar',
  468. // 柱子宽度
  469. barWidth: '60%',
  470. // 数据
  471. data: countArr
  472. }
  473. ]
  474. };
  475. var myechart = echarts.init($('.job_category')[0]);
  476. myechart.setOption(option);
  477. }
  478. function company_trade(data) {
  479. let titleArr = [];
  480. let countArr = [];
  481. let total = 0;
  482. let count = data.length;
  483. // 中间省略的数据 准备三项
  484. var hiddenItem = {
  485. name: '',
  486. value: 10,
  487. // 柱子颜色
  488. itemStyle: {
  489. color: '#254065'
  490. },
  491. // 鼠标经过柱子颜色
  492. emphasis: {
  493. itemStyle: {
  494. color: '#254065'
  495. }
  496. },
  497. // 工具提示隐藏
  498. tooltip: {
  499. extraCssText: 'opacity:0'
  500. }
  501. };
  502. data.forEach((item, index) => {
  503. if (index < 7 || index + 7 >= count) {
  504. titleArr.push(item.name)
  505. countArr.push(item.count)
  506. } else if (count > 12 && index == 7) {
  507. //随机三个
  508. let arr = []
  509. for (let i = 7; i < count - 7; i++) {
  510. arr.push(i)
  511. }
  512. let randomArr = [];
  513. while (randomArr.length < 3) {
  514. let temp = (Math.random() * arr.length) >> 0;
  515. randomArr.push(arr.splice(temp, 1)[0]);
  516. }
  517. randomArr.forEach((randomIndex) => {
  518. titleArr.push(data[randomIndex].name)
  519. countArr.push(data[randomIndex].count)
  520. })
  521. }
  522. total += item.count
  523. });
  524. $('.company_trade-count').text(count)
  525. $('.company_trade-total').text(total)
  526. option = {
  527. // 工具提示
  528. tooltip: {
  529. // 触发类型 经过轴触发axis 经过轴触发item
  530. trigger: 'item',
  531. // 轴触发提示才有效
  532. axisPointer: {
  533. // 默认为直线,可选为:'line' 线效果 | 'shadow' 阴影效果
  534. type: 'shadow'
  535. }
  536. },
  537. // 图表边界控制
  538. grid: {
  539. // 距离 上右下左 的距离
  540. left: '0',
  541. right: '3%',
  542. bottom: '3%',
  543. top: '5%',
  544. // 大小是否包含文本【类似于boxsizing】
  545. containLabel: true,
  546. //显示边框
  547. show: true,
  548. //边框颜色
  549. borderColor: 'rgba(0, 240, 255, 0.3)'
  550. },
  551. // 控制x轴
  552. xAxis: [{
  553. // 使用类目,必须有data属性
  554. type: 'category',
  555. // 使用 data 中的数据设为刻度文字
  556. data: titleArr,
  557. // 刻度设置
  558. axisTick: {
  559. // true意思:图形在刻度中间
  560. // false意思:图形在刻度之间
  561. alignWithLabel: false,
  562. show: false
  563. },
  564. //文字
  565. axisLabel: {
  566. color: '#4c9bfd'
  567. }
  568. }],
  569. // 控制y轴
  570. yAxis: [{
  571. // 使用数据的值设为刻度文字
  572. type: 'value',
  573. axisTick: {
  574. // true意思:图形在刻度中间
  575. // false意思:图形在刻度之间
  576. alignWithLabel: false,
  577. show: false
  578. },
  579. //文字
  580. axisLabel: {
  581. color: '#4c9bfd'
  582. },
  583. splitLine: {
  584. lineStyle: {
  585. color: 'rgba(0, 240, 255, 0.3)'
  586. }
  587. },
  588. }],
  589. // 控制x轴
  590. series: [
  591. {
  592. // series配置
  593. // 颜色
  594. itemStyle: {
  595. // 提供的工具函数生成渐变颜色
  596. color: new echarts.graphic.LinearGradient(
  597. // (x1,y2) 点到点 (x2,y2) 之间进行渐变
  598. 0, 0, 0, 1,
  599. [{
  600. offset: 0,
  601. color: '#00fffb'
  602. }, // 0 起始颜色
  603. {
  604. offset: 1,
  605. color: '#0061ce'
  606. } // 1 结束颜色
  607. ]
  608. )
  609. },
  610. // 图表数据名称
  611. name: '企业数量',
  612. // 图表类型
  613. type: 'bar',
  614. // 柱子宽度
  615. barWidth: '60%',
  616. // 数据
  617. data: countArr
  618. }
  619. ]
  620. };
  621. var myechart = echarts.init($('.company_trade')[0]);
  622. myechart.setOption(option);
  623. }
  624. function total_count(data) {
  625. let _html = '';
  626. let colors = ['#ed3f35', '#eacf19', '#9fe6b8'];
  627. data.forEach((item, index) => {
  628. _html += '<div class="item">';
  629. _html += '<h4 class="train total_count">';
  630. _html += item.count;
  631. _html += '</h4>';
  632. _html += '<span>';
  633. _html += '<i class="icon-dot" style="color: ' + colors[index % 3] + ';"></i>';
  634. _html += item.name;
  635. _html += '</span>';
  636. _html += '</div>';
  637. })
  638. $('.total_count').html(_html);
  639. }
  640. // function talent_education(data) {
  641. // let unknown = 0;
  642. // let total = 0;
  643. // data.map((item, index) => {
  644. // if (item.name == '其他') {
  645. // unknown += item.count;
  646. // //其他数据
  647. // item.value = item.count;
  648. // } else {
  649. // total += item.count;
  650. // item.value = item.count;
  651. // }
  652. // return item;
  653. // });
  654. // // $('.age-unknown').text(unknown);
  655. // $('.talent_education-total').text(total);
  656. // var myechar = echarts.init($('.talent_education')[0]);
  657. // option = {
  658. // // 控制提示
  659. // tooltip: {
  660. // // 非轴图形,使用item的意思是放到数据对应图形上触发提示
  661. // trigger: 'item',
  662. // // 格式化提示内容:
  663. // // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
  664. // formatter: "{a} <br/>{b} : {c} ({d}%)"
  665. // },
  666. // // 控制图表
  667. // series: [{
  668. // // 图表名称
  669. // name: '学历',
  670. // // 图表类型
  671. // type: 'pie',
  672. // // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
  673. // // 百分比基于 图表DOM容器的半径
  674. // radius: ['10%', '70%'],
  675. // // 图表中心位置 left 50% top 50% 距离图表DOM容器
  676. // center: ['50%', '50%'],
  677. // // 半径模式,另外一种是 area 面积模式
  678. // roseType: 'radius',
  679. // // 数据集 value 数据的值 name 数据的名称
  680. // data: data,
  681. // //文字调整
  682. // label: {
  683. // fontSize: 10
  684. // },
  685. // //引导线
  686. // labelLine: {
  687. // length: 8,
  688. // length2: 10
  689. // }
  690. // }],
  691. // color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
  692. // };
  693. // myechar.setOption(option);
  694. // }
  695. // function talent_age(data) {
  696. // let unknown = 0;
  697. // let total = 0;
  698. // data.map((item, index) => {
  699. // if (item.name == '其他') {
  700. // unknown += item.count;
  701. // //其他数据
  702. // item.value = item.count;
  703. // } else {
  704. // total += item.count;
  705. // item.value = item.count;
  706. // }
  707. // return item;
  708. // });
  709. // // $('.age-unknown').text(unknown);
  710. // $('.talent_age-total').text(total);
  711. // var myechar = echarts.init($('.talent_age')[0]);
  712. // option = {
  713. // // 控制提示
  714. // tooltip: {
  715. // // 非轴图形,使用item的意思是放到数据对应图形上触发提示
  716. // trigger: 'item',
  717. // // 格式化提示内容:
  718. // // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
  719. // formatter: "{a} <br/>{b} : {c} ({d}%)"
  720. // },
  721. // // 控制图表
  722. // series: [{
  723. // // 图表名称
  724. // name: '年龄',
  725. // // 图表类型
  726. // type: 'pie',
  727. // // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
  728. // // 百分比基于 图表DOM容器的半径
  729. // radius: ['10%', '70%'],
  730. // // 图表中心位置 left 50% top 50% 距离图表DOM容器
  731. // center: ['50%', '50%'],
  732. // // 半径模式,另外一种是 area 面积模式
  733. // roseType: 'radius',
  734. // // 数据集 value 数据的值 name 数据的名称
  735. // data: data,
  736. // //文字调整
  737. // label: {
  738. // fontSize: 10
  739. // },
  740. // //引导线
  741. // labelLine: {
  742. // length: 8,
  743. // length2: 10
  744. // }
  745. // }],
  746. // color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
  747. // };
  748. // myechar.setOption(option);
  749. // }
  750. function talent_level(data) {
  751. let titleArr = [];
  752. let countArr = [];
  753. let total = 0;
  754. let count = data.length;
  755. // 中间省略的数据 准备三项
  756. var hiddenItem = {
  757. name: '',
  758. value: 10,
  759. // 柱子颜色
  760. itemStyle: {
  761. color: '#254065'
  762. },
  763. // 鼠标经过柱子颜色
  764. emphasis: {
  765. itemStyle: {
  766. color: '#254065'
  767. }
  768. },
  769. // 工具提示隐藏
  770. tooltip: {
  771. extraCssText: 'opacity:0'
  772. }
  773. };
  774. data.forEach((item, index) => {
  775. if (index < 7 || index + 7 >= count) {
  776. titleArr.push(item.name)
  777. countArr.push(item.count)
  778. } else if (count > 12 && index == 7) {
  779. //随机三个
  780. let arr = []
  781. for (let i = 7; i < count - 7; i++) {
  782. arr.push(i)
  783. }
  784. let randomArr = [];
  785. while (randomArr.length < 3) {
  786. let temp = (Math.random() * arr.length) >> 0;
  787. randomArr.push(arr.splice(temp, 1)[0]);
  788. }
  789. randomArr.forEach((randomIndex) => {
  790. titleArr.push(data[randomIndex].name)
  791. countArr.push(data[randomIndex].count)
  792. })
  793. }
  794. total += item.count
  795. });
  796. $('.talent_level-total').text(total)
  797. option = {
  798. // 工具提示
  799. tooltip: {
  800. // 触发类型 经过轴触发axis 经过轴触发item
  801. trigger: 'item',
  802. // 轴触发提示才有效
  803. axisPointer: {
  804. // 默认为直线,可选为:'line' 线效果 | 'shadow' 阴影效果
  805. type: 'shadow'
  806. }
  807. },
  808. // 图表边界控制
  809. grid: {
  810. // 距离 上右下左 的距离
  811. left: '0',
  812. right: '3%',
  813. bottom: '3%',
  814. top: '5%',
  815. // 大小是否包含文本【类似于boxsizing】
  816. containLabel: true,
  817. //显示边框
  818. show: true,
  819. //边框颜色
  820. borderColor: 'rgba(0, 240, 255, 0.3)'
  821. },
  822. // 控制x轴
  823. xAxis: [{
  824. // 使用类目,必须有data属性
  825. type: 'category',
  826. // 使用 data 中的数据设为刻度文字
  827. data: titleArr,
  828. // 刻度设置
  829. axisTick: {
  830. // true意思:图形在刻度中间
  831. // false意思:图形在刻度之间
  832. alignWithLabel: false,
  833. show: false
  834. },
  835. //文字
  836. axisLabel: {
  837. color: '#4c9bfd'
  838. }
  839. }],
  840. // 控制y轴
  841. yAxis: [{
  842. // 使用数据的值设为刻度文字
  843. type: 'value',
  844. axisTick: {
  845. // true意思:图形在刻度中间
  846. // false意思:图形在刻度之间
  847. alignWithLabel: false,
  848. show: false
  849. },
  850. //文字
  851. axisLabel: {
  852. color: '#4c9bfd'
  853. },
  854. splitLine: {
  855. lineStyle: {
  856. color: 'rgba(0, 240, 255, 0.3)'
  857. }
  858. },
  859. }],
  860. // 控制x轴
  861. series: [
  862. {
  863. // series配置
  864. // 颜色
  865. itemStyle: {
  866. // 提供的工具函数生成渐变颜色
  867. color: new echarts.graphic.LinearGradient(
  868. // (x1,y2) 点到点 (x2,y2) 之间进行渐变
  869. 0, 0, 0, 1,
  870. [{
  871. offset: 0,
  872. color: '#00fffb'
  873. }, // 0 起始颜色
  874. {
  875. offset: 1,
  876. color: '#0061ce'
  877. } // 1 结束颜色
  878. ]
  879. )
  880. },
  881. // 图表数据名称
  882. name: '层次人数',
  883. // 图表类型
  884. type: 'bar',
  885. // 柱子宽度
  886. barWidth: '60%',
  887. // 数据
  888. data: countArr
  889. }
  890. ]
  891. };
  892. var myechart = echarts.init($('.talent_level')[0]);
  893. myechart.setOption(option);
  894. }
  895. // function talent_industry(data) {
  896. // let titleArr = [];
  897. // let countArr = [];
  898. // let total = 0;
  899. // let count = data.length;
  900. // // 中间省略的数据 准备三项
  901. // var hiddenItem = {
  902. // name: '',
  903. // value: 10,
  904. // // 柱子颜色
  905. // itemStyle: {
  906. // color: '#254065'
  907. // },
  908. // // 鼠标经过柱子颜色
  909. // emphasis: {
  910. // itemStyle: {
  911. // color: '#254065'
  912. // }
  913. // },
  914. // // 工具提示隐藏
  915. // tooltip: {
  916. // extraCssText: 'opacity:0'
  917. // }
  918. // };
  919. // data.forEach((item, index) => {
  920. // if (index < 7 || index + 7 >= count) {
  921. // titleArr.push(item.name)
  922. // countArr.push(item.count)
  923. // } else if (count > 12 && index == 7) {
  924. // //随机三个
  925. // let arr = []
  926. // for (let i = 7; i < count - 7; i++) {
  927. // arr.push(i)
  928. // }
  929. // let randomArr = [];
  930. // while (randomArr.length < 3) {
  931. // let temp = (Math.random() * arr.length) >> 0;
  932. // randomArr.push(arr.splice(temp, 1)[0]);
  933. // }
  934. // randomArr.forEach((randomIndex) => {
  935. // titleArr.push(data[randomIndex].name)
  936. // countArr.push(data[randomIndex].count)
  937. // })
  938. // }
  939. // total += item.count
  940. // });
  941. // $('.talent_industry-count').text(count)
  942. // $('.talent_industry-total').text(total)
  943. //
  944. // option = {
  945. // // 工具提示
  946. // tooltip: {
  947. // // 触发类型 经过轴触发axis 经过轴触发item
  948. // trigger: 'item',
  949. // // 轴触发提示才有效
  950. // axisPointer: {
  951. // // 默认为直线,可选为:'line' 线效果 | 'shadow' 阴影效果
  952. // type: 'shadow'
  953. // }
  954. // },
  955. // // 图表边界控制
  956. // grid: {
  957. // // 距离 上右下左 的距离
  958. // left: '0',
  959. // right: '3%',
  960. // bottom: '3%',
  961. // top: '5%',
  962. // // 大小是否包含文本【类似于boxsizing】
  963. // containLabel: true,
  964. // //显示边框
  965. // show: true,
  966. // //边框颜色
  967. // borderColor: 'rgba(0, 240, 255, 0.3)'
  968. // },
  969. // // 控制x轴
  970. // xAxis: [{
  971. // // 使用类目,必须有data属性
  972. // type: 'category',
  973. // // 使用 data 中的数据设为刻度文字
  974. // data: titleArr,
  975. // // 刻度设置
  976. // axisTick: {
  977. // // true意思:图形在刻度中间
  978. // // false意思:图形在刻度之间
  979. // alignWithLabel: false,
  980. // show: false
  981. // },
  982. // //文字
  983. // axisLabel: {
  984. // color: '#4c9bfd'
  985. // }
  986. // }],
  987. // // 控制y轴
  988. // yAxis: [{
  989. // // 使用数据的值设为刻度文字
  990. // type: 'value',
  991. // axisTick: {
  992. // // true意思:图形在刻度中间
  993. // // false意思:图形在刻度之间
  994. // alignWithLabel: false,
  995. // show: false
  996. // },
  997. // //文字
  998. // axisLabel: {
  999. // color: '#4c9bfd'
  1000. // },
  1001. // splitLine: {
  1002. // lineStyle: {
  1003. // color: 'rgba(0, 240, 255, 0.3)'
  1004. // }
  1005. // },
  1006. // }],
  1007. // // 控制x轴
  1008. // series: [
  1009. //
  1010. // {
  1011. // // series配置
  1012. // // 颜色
  1013. // itemStyle: {
  1014. // // 提供的工具函数生成渐变颜色
  1015. // color: new echarts.graphic.LinearGradient(
  1016. // // (x1,y2) 点到点 (x2,y2) 之间进行渐变
  1017. // 0, 0, 0, 1,
  1018. // [{
  1019. // offset: 0,
  1020. // color: '#00fffb'
  1021. // }, // 0 起始颜色
  1022. // {
  1023. // offset: 1,
  1024. // color: '#0061ce'
  1025. // } // 1 结束颜色
  1026. // ]
  1027. // )
  1028. // },
  1029. // // 图表数据名称
  1030. // name: '行业人数',
  1031. // // 图表类型
  1032. // type: 'bar',
  1033. // // 柱子宽度
  1034. // barWidth: '60%',
  1035. // // 数据
  1036. // data: countArr
  1037. // }
  1038. // ]
  1039. // };
  1040. // var myechart = echarts.init($('.talent_industry')[0]);
  1041. // myechart.setOption(option);
  1042. // }
  1043. //人才分布
  1044. function talent_count(data) {
  1045. var htmlArr = [];
  1046. htmlArr['talent_industry'] = '';
  1047. htmlArr['talent_age'] = '';
  1048. htmlArr['talent_education'] = '';
  1049. data.talent_industry.forEach(function (item) {
  1050. htmlArr['talent_industry'] += `<li><span>${item.name}</span><span>${item.count} <s class="icon-up"></s></span></li>`;
  1051. });
  1052. data.talent_age.forEach(function (item) {
  1053. htmlArr['talent_age'] += `<li><span>${item.name}</span><span>${item.count} <s class="icon-up"></s></span></li>`;
  1054. });
  1055. data.talent_education.forEach(function (item) {
  1056. htmlArr['talent_education'] += `<li><span>${item.name}</span><span>${item.count} <s class="icon-up"></s></span></li>`;
  1057. });
  1058. $('.inner').on('mouseenter', '.sup li', function () {
  1059. $(this).addClass('active').siblings().removeClass('active');
  1060. //渲染
  1061. $('.sub').html(htmlArr[$(this).attr('data-type')]);
  1062. });
  1063. $('.province .sup li').eq(0).mouseenter();
  1064. var index = 0;
  1065. var timer = setInterval(() => {
  1066. index++;
  1067. if (index > 2) {
  1068. index = 0;
  1069. }
  1070. $('.sup li').eq(index).mouseenter();
  1071. }, 2000);
  1072. }
  1073. function company_count(data) {
  1074. //事件委托
  1075. $('.monitor').on('click', ' a', function () {
  1076. //点击当前的a 加类名 active 他的兄弟删除类名
  1077. $(this).addClass('active').siblings().removeClass('active');
  1078. //获取一一对应的下标
  1079. var index = $(this).index();
  1080. //选取content 然后狗日对应下标的 显示 当前的兄弟.content隐藏
  1081. $('.content').eq(index).show().siblings('.content').hide();
  1082. });
  1083. var index = 0;
  1084. var monitortimer = setInterval(() => {
  1085. index++;
  1086. if (index > 1) {
  1087. index = 0;
  1088. }
  1089. $('.monitor a').eq(index).click();
  1090. }, 5000);
  1091. //填充数据
  1092. var company_trade = data.company_trade;
  1093. var job_category = data.job_category;
  1094. var html = '';
  1095. company_trade.forEach(function(item) {
  1096. html += `<div class="row">`;
  1097. html += `<span class="col">${item.name}</span>`;
  1098. html += `<span class="col">${item.count}</span>`;
  1099. html += `<span class="icon-dot"></span>`;
  1100. html += `</div>`;
  1101. });
  1102. //渲染
  1103. $('.company_trade').html(html);
  1104. html = '';
  1105. job_category.forEach(function(item) {
  1106. html += `<div class="row">`;
  1107. html += `<span class="col">${item.name}</span>`;
  1108. html += `<span class="col">${item.count}</span>`;
  1109. html += `<span class="icon-dot"></span>`;
  1110. html += `</div>`;
  1111. });
  1112. //渲染
  1113. $('.job_category').html(html);
  1114. //滚动
  1115. //原理:把marquee下面的子盒子都复制一遍 加入到marquee中
  1116. // 然后动画向上滚动,滚动到一半重新开始滚动
  1117. //因为选取的是两个marquee 所以要遍历
  1118. $('.monitor .marquee').each(function (index, dom) {
  1119. //将每个 的所有子级都复制一遍
  1120. var rows = $(dom).children().clone();
  1121. //再将新的到的加入原来的
  1122. $(dom).append(rows);
  1123. });
  1124. }