humanResources.js 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965
  1. Vue.use(scroll)
  2. let app = new Vue({
  3. el: "#app",
  4. data() {
  5. return {
  6. title: "内部人才市场双选服务平台",
  7. treeList: [
  8. {
  9. name: "岗位发布",
  10. flag: false,
  11. src: "./images/humanResources/post.png",
  12. style: {
  13. top: "60%",
  14. left: "20%",
  15. backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
  16. },
  17. onStyle: {
  18. top: "60%",
  19. left: "20%",
  20. backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
  21. }
  22. },
  23. {
  24. name: "简历投递",
  25. flag: false,
  26. src: "./images/humanResources/notes.png",
  27. style: {
  28. top: "22%",
  29. left: "28%",
  30. backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
  31. },
  32. onStyle: {
  33. top: "22%",
  34. left: "28%",
  35. backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
  36. }
  37. },
  38. {
  39. name: "资格审查",
  40. flag: true,
  41. src: "./images/humanResources/qualification.png",
  42. style: {
  43. top: "-80px",
  44. left: "calc(50% - 202px)",
  45. backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
  46. },
  47. onStyle: {
  48. top: "-80px",
  49. left: "calc(50% - 202px)",
  50. backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
  51. }
  52. },
  53. {
  54. name: "综合测评",
  55. flag: false,
  56. src: "./images/humanResources/comprehensive.png",
  57. style: {
  58. top: "22%",
  59. right: "28%",
  60. backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
  61. },
  62. onStyle: {
  63. top: "22%",
  64. right: "28%",
  65. backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
  66. }
  67. },
  68. {
  69. name: "录用公式",
  70. flag: false,
  71. src: "./images/humanResources/publicity.png",
  72. style: {
  73. top: "60%",
  74. right: "20%",
  75. backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
  76. },
  77. onStyle: {
  78. top: "60%",
  79. right: "20%",
  80. backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
  81. }
  82. },
  83. ],
  84. treeIndex: 0,
  85. config1: {
  86. waitTime: 5000,
  87. header: ["招聘单位", "招聘岗位", "招聘人数", "投递人数", "发布时间"],
  88. headerHeight: 55,
  89. columnWidth: [230, 170, 100, 100],
  90. rowNum: 10,
  91. data: [
  92. ["西山煤电屯兰矿", '井下普工', '30', '100', "2023.07.01"],
  93. ["西山煤电斜沟煤矿", '井下钻探工', '10', '30', "2023.07.01"],
  94. ["汾西矿业高阳煤矿", '井下安全检查员', '5', '10', "2023.07.01"],
  95. ["汾西矿业柳湾煤矿", '井下设备管理员', '10', '50', "2023.07.01"],
  96. ["霍州煤电辛置煤矿", '矿井维修电工', '10', '30', "2023.07.01"],
  97. ["霍州煤电恒兴煤业", '生产调度员', '4', '10', "2023.07.01"],
  98. ["霍州煤电吕梁山煤电公司", '汽车驾驶员', '5', '10', "2023.07.01"],
  99. ["山煤国际凌志达煤业", '电工', '5', '16', "2023.07.01"],
  100. ["华晋焦煤沙曲一号煤矿", '井下普工', '40', '120', "2023.07.01"],
  101. ["山西焦化", '技术员', '2', '12', "2023.07.01"],
  102. ["汾西矿业高阳煤矿", '井下安全检查员', '5', '10', "2023.07.01"],
  103. ],
  104. align: ["center", "center", "center", "center", "center"],
  105. headerBGC: "#69c1ff2d",
  106. oddRowBGC: "rgba(105, 193, 255, 0)",
  107. evenRowBGC: "#69c1ff21",
  108. },
  109. configIndex: 1,
  110. config2: {
  111. waitTime: 2000,
  112. header: ["序号", "单位名称", "招聘岗位数"],
  113. headerHeight: 55,
  114. rowNum: 5,
  115. data: [
  116. ["<span class='yellow'>01</span>", "<span class='yellow'>西山煤电</span>", "<span class='yellow'>30个</span>"],
  117. ["<span class='red'>02</span>", "<span class='red'>山煤国际</span>", "<span class='red'>25个</span>"],
  118. ["<span class='green'>03</span>", "<span class='green'>汾西矿业</span>", "<span class='green'>20个</span>"],
  119. ["04", "汾西矿业", "10个"],
  120. ["05", "汾西矿业", "8个"],
  121. ["06", "汾西矿业", "4个"],
  122. ],
  123. align: ["center", "center", "center", "center", "center"],
  124. headerBGC: "#69c1ff2d",
  125. oddRowBGC: "rgba(105, 193, 255, 0)",
  126. evenRowBGC: "#69c1ff21",
  127. },
  128. targetIndex: 0,
  129. classChange: false,
  130. listData: [{
  131. 'title': '无缝滚动第一行无缝滚动第一行',
  132. 'date': '2017-12-16'
  133. }, {
  134. 'title': '无缝滚动第二行无缝滚动第二行',
  135. 'date': '2017-12-16'
  136. }, {
  137. 'title': '无缝滚动第三行无缝滚动第三行',
  138. 'date': '2017-12-16'
  139. }, {
  140. 'title': '无缝滚动第四行无缝滚动第四行',
  141. 'date': '2017-12-16'
  142. }, {
  143. 'title': '无缝滚动第五行无缝滚动第五行',
  144. 'date': '2017-12-16'
  145. }, {
  146. 'title': '无缝滚动第六行无缝滚动第六行',
  147. 'date': '2017-12-16'
  148. }, {
  149. 'title': '无缝滚动第七行无缝滚动第七行',
  150. 'date': '2017-12-16'
  151. }, {
  152. 'title': '无缝滚动第八行无缝滚动第八行',
  153. 'date': '2017-12-16'
  154. }, {
  155. 'title': '无缝滚动第九行无缝滚动第九行',
  156. 'date': '2017-12-16'
  157. }],
  158. classOption: {
  159. step: 2
  160. },
  161. configMark: {
  162. waitTime: 2000,
  163. header: ["头像", "姓名", "投递岗位", "时间"],
  164. rowNum: 6,
  165. headerHeight: 55,
  166. // columnWidth: [90, 170, 200, ],
  167. data: [
  168. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
  169. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
  170. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
  171. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
  172. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
  173. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
  174. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
  175. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
  176. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
  177. ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
  178. ],
  179. align: ["center", "center", "center", "center", "center"],
  180. headerBGC: "#69c1ff2d",
  181. oddRowBGC: "rgba(105, 193, 255, 0)",
  182. evenRowBGC: "#69c1ff21",
  183. },
  184. configInterview: {
  185. waitTime: 2000,
  186. header: ["序号", "姓名", "会议厅", "场次", "时间"],
  187. headerHeight: 55,
  188. columnWidth: [70, 120, 170, 100],
  189. rowNum: 5,
  190. data: [
  191. ["01", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  192. ["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  193. ["03", '王亮', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  194. ["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  195. ["05", '王伟', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  196. ["06", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  197. ],
  198. align: ["center", "center", "center", "center", "center"],
  199. headerBGC: "#69c1ff2d",
  200. oddRowBGC: "rgba(105, 193, 255, 0)",
  201. evenRowBGC: "#69c1ff21",
  202. },
  203. configWritten: {
  204. waitTime: 2000,
  205. header: ["序号", "姓名", "会议厅", "场次", "时间"],
  206. headerHeight: 55,
  207. columnWidth: [70, 120, 170, 100],
  208. rowNum: 5,
  209. data: [
  210. ["01", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  211. ["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  212. ["03", '王亮', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  213. ["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  214. ["05", '王伟', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  215. ["06", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
  216. ],
  217. align: ["center", "center", "center", "center", "center"],
  218. headerBGC: "#69c1ff2d",
  219. oddRowBGC: "rgba(105, 193, 255, 0)",
  220. evenRowBGC: "#69c1ff21",
  221. },
  222. mainList: [
  223. {
  224. name: "双选场次",
  225. value: 30,
  226. unit: "场",
  227. icon: "../images/humanResources/times.png"
  228. },
  229. {
  230. name: "参与人数",
  231. value: 3000,
  232. unit: "人",
  233. icon: "../images/humanResources/user.png"
  234. }
  235. ],
  236. employmentList1: {
  237. waitTime: 5000,
  238. header: ["序号", "姓名", "性别", "身份证号", "拟录单位"],
  239. rowNum: 4,
  240. headerHeight: 55,
  241. columnWidth: [100, 100, 100, 280],
  242. data: [
  243. ],
  244. align: ["center", "center", "center", "center", "center"],
  245. headerBGC: "#69c1ff2d",
  246. oddRowBGC: "rgba(105, 193, 255, 0)",
  247. evenRowBGC: "#69c1ff21",
  248. hoverPause: false,
  249. },
  250. employmentList2: {
  251. waitTime: 5000,
  252. header: ["序号", "姓名", "性别", "身份证号", "拟录单位"],
  253. rowNum: 4,
  254. headerHeight: 55,
  255. columnWidth: [100, 100, 100, 280],
  256. data: [
  257. ],
  258. align: ["center", "center", "center", "center", "center"],
  259. headerBGC: "#69c1ff2d",
  260. oddRowBGC: "rgba(105, 193, 255, 0)",
  261. evenRowBGC: "#69c1ff21",
  262. hoverPause: false,
  263. },
  264. vitaEcharts: null
  265. }
  266. },
  267. created() {
  268. let employmentList1 = spArr(employmentList, 5)
  269. let arr1 = []
  270. let arr2 = []
  271. employmentList1.forEach((item, index) => {
  272. if (index % 2 == 0) {
  273. arr1.push(...item)
  274. } else {
  275. arr2.push(...item)
  276. }
  277. })
  278. this.employmentList1.data = arr1
  279. this.employmentList2.data = arr2
  280. },
  281. mounted() {
  282. let that = this;
  283. this.$nextTick(() => {
  284. let vita = this.$refs.vita
  285. this.initVitaEcharts(vita)
  286. let pageBtm = this.$refs.pageBtm
  287. this.initDownholeEcharts(pageBtm, { x: mobilizeList.x, y1: mobilizeList.y3, y2: mobilizeList.y4, y3: mobilizeList.y5 })
  288. let rightOne = this.$refs.rightOne
  289. this.initLineRight(rightOne)
  290. let rightTwo = this.$refs.rightTwo
  291. this.initLineRight(rightTwo)
  292. let rightThree = this.$refs.rightThree
  293. this.initLineRight(rightThree)
  294. let rightFour = this.$refs.rightFour
  295. this.initLineRight(rightFour)
  296. let rightFive = this.$refs.rightFive
  297. this.initLineRight(rightFive)
  298. let c1 = this.$refs.c1
  299. this.initRightCycle(c1)
  300. let c2 = this.$refs.c2
  301. this.initRightCycle(c2)
  302. let c3 = this.$refs.c3
  303. this.initRightCycle(c3)
  304. let c4 = this.$refs.c4
  305. this.initRightCycle(c4)
  306. let c5 = this.$refs.c5
  307. this.initRightCycle(c5)
  308. setTimeout(() => {
  309. let itemContent = document.getElementById("itemContent")
  310. let target = itemContent.getElementsByClassName("row-item")
  311. let targetList = target.item(0)
  312. targetList.style.background = "#302e2d50"
  313. targetList.style.color = "#E1AF27"
  314. }, 0)
  315. setTimeout(() => {
  316. that.classChange = true
  317. }, 5000);
  318. setInterval(() => {
  319. let that = this
  320. that.treeList.forEach(item => {
  321. item.flag = false
  322. })
  323. if (that.treeIndex > that.treeList.length - 1) {
  324. that.treeIndex = 0
  325. that.treeList[that.treeIndex].flag = true
  326. } else {
  327. that.treeList[that.treeIndex].flag = true
  328. that.treeIndex = that.treeIndex + 1
  329. }
  330. }, 2000)
  331. // setInterval(()=>{
  332. // if(that.configIndex > that.config1.data.length - 1){
  333. // console.log("最后一条");
  334. // that.configIndex = 0
  335. // console.log(that.config1.data[that.configIndex]);
  336. // return
  337. // } else {
  338. // console.log(that.config1.data[that.configIndex]);
  339. // that.configIndex = that.configIndex + 1
  340. // return
  341. // }
  342. // },5000)
  343. })
  344. },
  345. methods: {
  346. initDownholeEcharts(el, data) {
  347. this.downhole = echarts.init(el);
  348. let series = []
  349. let grid = {
  350. top: "15%",
  351. bottom: 50,//也可设置left和right设置距离来控制图表的大小
  352. left: "3%",
  353. right: "1%"
  354. }
  355. option = {
  356. tooltip: {
  357. show: true,
  358. trigger: 'axis',
  359. textStyle: {
  360. fontSize: 30,
  361. color: '#A3E2F4'
  362. },
  363. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  364. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  365. }
  366. },
  367. grid,
  368. legend: {
  369. data: ["招聘人数", "报名人数", "录用人数"],
  370. align: 'left',
  371. itemGap: 50,
  372. right: '1%',
  373. y: '1%',
  374. icon: 'rect',
  375. textStyle: {
  376. color: "#fff",
  377. fontSize: 30
  378. }
  379. },
  380. xAxis: {
  381. axisTick: {
  382. show: false,
  383. },
  384. axisLine: {
  385. show: false,
  386. },
  387. axisLabel: {
  388. interval: 0,
  389. show: true,
  390. fontSize: 30,
  391. textStyle: {
  392. color: "#fff" //X轴文字颜色
  393. },
  394. },
  395. data: data.x,
  396. },
  397. yAxis: {
  398. type: "value",
  399. name: "人",
  400. gridIndex: 0,
  401. // splitNumber: 4,
  402. splitLine: {
  403. show: false,
  404. lineStyle: {
  405. color: '#A3C0DF',
  406. width: 1
  407. },
  408. },
  409. nameTextStyle: {
  410. fontSize: 30,
  411. },
  412. axisTick: {
  413. show: false
  414. },
  415. axisLine: {
  416. show: false,
  417. lineStyle: {
  418. color: '#A3C0DF'
  419. }
  420. },
  421. axisLabel: {
  422. show: true,
  423. margin: 14,
  424. fontSize: 28,
  425. textStyle: {
  426. color: "#fff" //X轴文字颜色
  427. }
  428. },
  429. },
  430. series: [{
  431. type: 'bar',
  432. name: "招聘人数",
  433. barWidth: 26,
  434. itemStyle: {
  435. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  436. {
  437. offset: 1,
  438. color: '#40A9FF',
  439. },
  440. {
  441. offset: 0,
  442. color: '#082049',
  443. },
  444. ]),
  445. },
  446. data: data.y1,
  447. }, {
  448. type: 'bar',
  449. name: "报名人数",
  450. barWidth: 26,
  451. itemStyle: {
  452. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  453. {
  454. offset: 1,
  455. color: '#EAE179',
  456. },
  457. {
  458. offset: 0,
  459. color: '#082049',
  460. },
  461. ]),
  462. },
  463. data: data.y2,
  464. }, {
  465. type: 'bar',
  466. name: "录用人数",
  467. barWidth: 26,
  468. itemStyle: {
  469. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  470. {
  471. offset: 1,
  472. color: '#6A83FF',
  473. },
  474. {
  475. offset: 0,
  476. color: '#082049',
  477. },
  478. ]),
  479. },
  480. data: data.y3,
  481. }]
  482. };
  483. this.downhole.setOption(option);
  484. tools.loopShowTooltip(this.downhole, option, {
  485. nterval: 2000,
  486. loopSeries: true,
  487. });
  488. },
  489. scrollChange(index) {
  490. },
  491. initRightCycle(el, data) {
  492. var getvalue = [88];
  493. let chat = echarts.init(el)
  494. option = {
  495. title: {
  496. text: getvalue + '%',
  497. textStyle: {
  498. color: '#fff',
  499. fontSize: 20
  500. },
  501. itemGap: 20,
  502. left: '55%',
  503. top: '38%'
  504. },
  505. // tooltip: {
  506. // formatter: function (params) {
  507. // return '<span style="color: #fff;">综合得分:' + getvalue + '分</span>';
  508. // }
  509. // },
  510. angleAxis: {
  511. max: 100,
  512. clockwise: true, // 逆时针
  513. // 隐藏刻度线
  514. show: false
  515. },
  516. radiusAxis: {
  517. type: 'category',
  518. show: true,
  519. axisLabel: {
  520. show: false,
  521. },
  522. axisLine: {
  523. show: false,
  524. },
  525. axisTick: {
  526. show: false
  527. },
  528. },
  529. polar: {
  530. center: ['70%', '50%'],
  531. radius: ['60%', '75%'],
  532. // radius: '100%' //图形大小
  533. },
  534. series: [{
  535. type: 'bar',
  536. data: getvalue,
  537. showBackground: true,
  538. backgroundStyle: {
  539. color: '#BDEBFF',
  540. },
  541. coordinateSystem: 'polar',
  542. roundCap: true,
  543. barWidth: 30,
  544. itemStyle: {
  545. normal: {
  546. opacity: 1,
  547. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  548. offset: 0,
  549. color: '#25BFFF'
  550. }, {
  551. offset: 1,
  552. color: '#5284DE'
  553. }]),
  554. shadowBlur: 5,
  555. shadowColor: '#2A95F9',
  556. }
  557. },
  558. }]
  559. };
  560. chat.setOption(option)
  561. },
  562. initLineRight(el, data) {
  563. let that = this;
  564. let myChart = echarts.init(el);
  565. let nameList = ["a"];
  566. let valueList = [1287.5];
  567. let total = 1363.88; // 数据总数
  568. var category = nameList.map((item, index) => {
  569. return {
  570. value: valueList[index],
  571. itemStyle: {
  572. color: new echarts.graphic.LinearGradient(
  573. 1,
  574. 0,
  575. 0,
  576. 1,
  577. [
  578. {
  579. offset: 0,
  580. color: "#40A9FF50",
  581. },
  582. {
  583. offset: 1,
  584. color: "#40A9FF",
  585. },
  586. ],
  587. false
  588. ),
  589. },
  590. };
  591. });
  592. var totalList = [];
  593. var totalBorderList = [];
  594. nameList.map((item, index) => {
  595. totalList.push({
  596. value: total,
  597. itemStyle: {
  598. color: "rgba(51, 147, 236, 0.29)",
  599. },
  600. });
  601. totalBorderList.push({
  602. value: total,
  603. itemStyle: {
  604. borderColor: "rgba(51, 147, 236, 0.29)",
  605. color: "transparent",
  606. },
  607. });
  608. });
  609. var datas = [];
  610. category.forEach((value) => {
  611. datas.push(value.value);
  612. });
  613. option = {
  614. // backgroundColor: 'rgb(231,238,249)',
  615. xAxis: {
  616. max: total,
  617. splitLine: {
  618. show: false,
  619. },
  620. axisLine: {
  621. show: false,
  622. },
  623. axisLabel: {
  624. show: false,
  625. },
  626. axisTick: {
  627. show: false,
  628. },
  629. },
  630. grid: {
  631. left: "1%",
  632. top: 20, // 设置条形图的边距
  633. right: "20%",
  634. bottom: 20,
  635. },
  636. yAxis: [
  637. {
  638. type: "category",
  639. inverse: false,
  640. data: nameList,
  641. axisLine: {
  642. show: false,
  643. },
  644. axisTick: {
  645. show: false,
  646. },
  647. axisLabel: {
  648. show: false,
  649. },
  650. },
  651. ],
  652. series: [
  653. {
  654. // 内
  655. type: "bar",
  656. barWidth: 16,
  657. barGap: "20%",
  658. silent: true,
  659. // label: {
  660. // normal: {
  661. // formatter: (item) => {
  662. // return `${item['name']}:${item['value']} `;
  663. // },
  664. // textStyle: {
  665. // color: 'rgba(105, 120, 136, 1)',
  666. // fontSize: 14,
  667. // },
  668. // position: [0, '-25px'],
  669. // show: true,
  670. // },
  671. // },
  672. data: category,
  673. z: 1,
  674. itemStyle: {
  675. normal: {
  676. color: new echarts.graphic.LinearGradient(
  677. 1,
  678. 0,
  679. 0,
  680. 1,
  681. [
  682. {
  683. offset: 0,
  684. color: "rgba(81, 193, 156, 1)",
  685. },
  686. {
  687. offset: 1,
  688. color: "rgba(234, 177, 100, 1)",
  689. },
  690. ],
  691. false
  692. ),
  693. },
  694. },
  695. animationEasing: "elasticOut",
  696. },
  697. {
  698. // 分隔
  699. type: "pictorialBar",
  700. itemStyle: {
  701. normal: {
  702. color: "#143362",
  703. },
  704. },
  705. symbolRepeat: "fixed",
  706. symbolMargin: 8,
  707. symbol: "rect",
  708. symbolClip: false,
  709. symbolSize: [4, 20],
  710. symbolPosition: "start",
  711. symbolOffset: [0, -2],
  712. symbolBoundingData: total,
  713. data: [total, total, total, total],
  714. z: 2,
  715. animationEasing: "elasticOut",
  716. },
  717. {
  718. // label
  719. type: "pictorialBar",
  720. symbolBoundingData: total,
  721. itemStyle: {
  722. normal: {
  723. color: "none",
  724. },
  725. },
  726. label: {
  727. normal: {
  728. formatter: (params) => {
  729. var text;
  730. text = `${((params["data"] * 100) / total).toFixed(2)}个`;
  731. return text;
  732. },
  733. textStyle: {
  734. // 图列内容样式
  735. fontSize: "30",
  736. fontWeight: 800,
  737. },
  738. position: "right",
  739. offset: [0, -3],
  740. distance: 10, // 向右偏移位置
  741. show: true,
  742. color: "#FFF",
  743. },
  744. },
  745. data: datas,
  746. z: 0,
  747. },
  748. {
  749. name: "外框",
  750. type: "bar",
  751. barGap: "-130%", // 设置外框粗细
  752. data: totalBorderList,
  753. barWidth: 26,
  754. itemStyle: {
  755. normal: {
  756. // barBorderRadius: [5, 5, 5, 5],
  757. borderWidth: 1, // 边框宽度
  758. borderColor: "rgb(51, 147, 236)", // 边框色
  759. color: "rgb(231,238,249)",
  760. },
  761. },
  762. z: 0,
  763. },
  764. ],
  765. };
  766. //轮播
  767. // tools.loopShowTooltip(leftEcharts1, option, {
  768. // interval: 2000,
  769. // loopSeries: true,
  770. // });
  771. //注册
  772. myChart.setOption(option);
  773. },
  774. initVitaEcharts(el, data) {
  775. this.vitaEcharts = echarts.init(el)
  776. option = {
  777. tooltip: {
  778. show: true,
  779. trigger: 'axis',
  780. textStyle: {
  781. fontSize: 30,
  782. color: '#A3E2F4'
  783. },
  784. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  785. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  786. },
  787. formatter: "{a} : {c}份"
  788. },
  789. animation: true,
  790. grid: {
  791. top: "7%",
  792. bottom: "8%",
  793. right: "2%"
  794. },
  795. xAxis: {
  796. data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  797. axisLine: {
  798. show: false //隐藏X轴轴线
  799. },
  800. axisTick: {
  801. show: false //隐藏X轴轴线
  802. },
  803. splitLine: {
  804. show: false,
  805. lineStyle: {
  806. color: "rgba(77, 128, 254, 0.2)",
  807. width: 2
  808. }
  809. },
  810. axisLabel: {
  811. show: true,
  812. interval: 0,
  813. fontSize: 24,
  814. textStyle: {
  815. color: "#fff" //X轴文字颜色
  816. }
  817. }
  818. },
  819. yAxis: [
  820. {
  821. type: "value",
  822. gridIndex: 0,
  823. min: 0,
  824. max: 100,
  825. interval: 25,
  826. // splitNumber: 4,
  827. splitLine: {
  828. show: false,
  829. lineStyle: {
  830. color: "rgba(77, 128, 254, 0.2)",
  831. width: 2
  832. }
  833. },
  834. axisTick: {
  835. show: false
  836. },
  837. axisLine: {
  838. show: false,
  839. lineStyle: {
  840. color: "rgba(77, 128, 254, 0.2)"
  841. }
  842. },
  843. axisLabel: {
  844. show: true,
  845. margin: 14,
  846. fontSize: 26,
  847. textStyle: {
  848. color: "#65D5FF"
  849. }
  850. }
  851. }
  852. ],
  853. series: [
  854. {
  855. name: "简历投递数",
  856. type: "bar",
  857. barWidth: 16,
  858. itemStyle: {
  859. normal: {
  860. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  861. {
  862. offset: 1,
  863. color: "#004E8E"
  864. },
  865. {
  866. offset: 0,
  867. color: "#40A9FF"
  868. }
  869. ])
  870. }
  871. },
  872. data: [21, 43, 56, 32, 64, 21, 43, 56, 32, 64, 21, 43],
  873. z: 10,
  874. zlevel: 0
  875. },
  876. {
  877. // 分隔
  878. type: "pictorialBar",
  879. itemStyle: {
  880. normal: {
  881. color: "#0F375F"
  882. }
  883. },
  884. symbolRepeat: "fixed",
  885. symbolMargin: 6,
  886. symbol: "rect",
  887. symbolClip: true,
  888. symbolSize: [18, 2],
  889. symbolPosition: "start",
  890. symbolOffset: [1, 1],
  891. data: [21, 43, 56, 32, 64, 21, 43, 56, 32, 64, 21, 43],
  892. width: 2,
  893. z: 0,
  894. zlevel: 1
  895. },
  896. {
  897. name: "外框",
  898. type: "bar",
  899. barGap: "-110%", // 设置外框粗细
  900. data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
  901. barWidth: 16,
  902. itemStyle: {
  903. normal: {
  904. color: "transparent", // 填充色
  905. // barBorderRadius: 0, //圆角半径
  906. label: {
  907. // 标签显示位置
  908. show: false,
  909. position: "top" // insideTop 或者横向的 insideLeft
  910. }
  911. }
  912. },
  913. z: 0
  914. },
  915. {
  916. name: "背影",
  917. type: "line",
  918. smooth: true, //平滑曲线显示
  919. showAllSymbol: false, //显示所有图形。
  920. symbolSize: 0,
  921. lineStyle: {
  922. width: 0
  923. },
  924. areaStyle: {
  925. color: "rgba(0, 151, 251, 0.1)"
  926. },
  927. data: [21, 43, 56, 32, 64, 21, 43, 56, 32, 64, 21, 43],
  928. z: 5
  929. }
  930. ],
  931. dataZoom: [
  932. {
  933. type: "slider",
  934. show: false,
  935. xAxisIndex: [0],
  936. endValue: 12,
  937. startValue: 0
  938. }
  939. ]
  940. }
  941. this.vitaEcharts.setOption(option)
  942. tools.loopShowTooltip(this.vitaEcharts, option, {
  943. nterval: 2000,
  944. loopSeries: true,
  945. });
  946. },
  947. },
  948. })