index.js 26 KB

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