index4.js 50 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577
  1. let barImg =
  2. 'data:image/png;base64,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'
  3. let app = new Vue({
  4. el: '#app',
  5. data() {
  6. return {
  7. showTip: false,
  8. tipNum: '',
  9. time: '',
  10. year: '2022',
  11. config1: {
  12. number: [100],
  13. content: '{nt}个',
  14. },
  15. centerData: '',
  16. storageRecordConfig: {
  17. header: ['', '时间', '所属集团', '工作情况'],
  18. headerBGC: '#05507b33',
  19. oddRowBGC: '#69c0ff0f',
  20. evenRowBGC: '',
  21. headerHeight: '40',
  22. rowNum: 4,
  23. align: ['center', 'center', 'center', 'center'],
  24. data: [
  25. ['<span class="lightOut"><span class="light green"></span></span>', '2022.12.07', '山西三元文化产业发展有限公司', '本部机构压减成效明显'],
  26. ['<span class="lightOut"><span class="light green"></span></span>', '2022.12.07', '山西三元文化产业发展有限公司', '中层管理人数改革成效显著'],
  27. ['<span class="lightOut"><span class="light green"></span></span>', '2022.12.07', '武乡县恒盛洗煤有限公司', '全员劳动生产率增速显著高于人员增速'],
  28. ['<span class="lightOut"><span class="light green"></span></span>', '2023.01.04', '武乡县恒盛洗煤有限公司', '人工成本利润率显著增长且总人数减少'],
  29. ['<span class="lightOut"><span class="light green"></span></span>', '2023.01.04', '武乡县恒盛洗煤有限公司', '全员劳动生产率显著增长'],
  30. ['<span class="lightOut"><span class="light green"></span></span>', '2023.01.05', '武乡县恒盛洗煤有限公司', '人工成本利润率显著增长'],
  31. ['<span class="lightOut"><span class="light yellow"></span></span>', '2023.01.06', '山西煤炭运销集团三元微子镇煤业有限公司', '人工成本利润率显著降低'],
  32. ['<span class="lightOut"><span class="light yellow"></span></span>', '2023.01.04', '山西煤炭运销集团三元微子镇煤业有限公司', '总人数增速过快'],
  33. ['<span class="lightOut"><span class="light yellow"></span></span>', '2022.12.07', '山西煤炭运销集团黄山煤业有限公司', '全员劳动生产率显著降低'],
  34. ['<span class="lightOut"><span class="light yellow"></span></span>', '2022.12.07', '山西煤炭运销集团黄山煤业有限公司', '全员劳动生产率降低且人员增加'],
  35. ['<span class="lightOut"><span class="light yellow"></span></span>', '2023.01.08', '山西长治郊区三元吉祥煤业有限公司', '人工成本利润率显著降低'],
  36. ['<span class="lightOut"><span class="light green"></span></span>', '2022.11.07', '山西沁园春矿泉水有限公司', '总人数压减成效突出'],
  37. ['<span class="lightOut"><span class="light yellow"></span></span>', '2022.11.07', '山西沁园春矿泉水有限公司', '全员劳动生产率显著降低'],
  38. ['<span class="lightOut"><span class="light yellow"></span></span>', '2023.01.10', '山西海森生物制品有限公司', '人工成本利润率显著降低'],
  39. ['<span class="lightOut"><span class="light red"></span></span>', '2023.01.10', '山西海森生物制品有限公司', '年利润亏损但年薪酬增长'],
  40. ],
  41. },
  42. storageRecordConfig2: {
  43. header: ['企业名称', '预警内容', '数据抓取日期', '累计未获取数据日期'],
  44. headerBGC: '#05507b33',
  45. oddRowBGC: '#05507b33',
  46. evenRowBGC: '',
  47. headerHeight: '40',
  48. rowNum: 4,
  49. align: ['center', 'center', 'center', 'center'],
  50. data: [
  51. ['山西焦煤', '经营业绩考核延迟更新', '2022.12.01-12.31', '3天'],
  52. ['山西文旅', '六定长效机制情况未更新', '2022.12.01-12.31', '7天'],
  53. ['大地控股', '经营业绩考核延迟更新', '2022.12.01-12.31', '3天'],
  54. ['国际能源', '六定长效机制情况未更新', '2022.12.01-12.31', '1天'],
  55. ['山西焦煤', '经营业绩考核延迟更新', '2022.12.01-12.31', '3天'],
  56. ['山西焦煤', '六定长效机制情况未更新', '2022.12.01-12.31', '3天'],
  57. ],
  58. },
  59. companyList: companyList,
  60. commonOption: {
  61. title: {
  62. text: 'xxx',
  63. x: 'center',
  64. y: '3%',
  65. textStyle: {
  66. color: '#69C0FF',
  67. fontSize: 24,
  68. },
  69. },
  70. tooltip: {
  71. trigger: 'axis',
  72. axisPointer: {
  73. type: 'shadow',
  74. },
  75. },
  76. grid: {
  77. top: '22%',
  78. right: '5%',
  79. left: '8%',
  80. bottom: '26%',
  81. },
  82. legend: {
  83. data: '',
  84. top: '12%',
  85. right: '5%',
  86. textStyle: {
  87. color: 'rgba(250,250,250,0.6)',
  88. fontSize: 14,
  89. },
  90. },
  91. xAxis: {
  92. data: companyList.map(item => item.name),
  93. axisLine: {
  94. show: true, //隐藏X轴轴线
  95. lineStyle: {
  96. color: '#005094',
  97. width: 1,
  98. },
  99. },
  100. axisTick: {
  101. show: false, //隐藏X轴刻度
  102. },
  103. axisLabel: {
  104. show: true,
  105. rotate: 15,
  106. textStyle: {
  107. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  108. fontSize: 16,
  109. },
  110. },
  111. },
  112. yAxis: [
  113. {
  114. type: 'value',
  115. nameTextStyle: {
  116. color: '#ebf8ac',
  117. fontSize: 16,
  118. },
  119. splitLine: {
  120. show: true,
  121. lineStyle: {
  122. color: '#68b4dd66',
  123. type: 'dashed',
  124. },
  125. },
  126. axisLine: {
  127. show: false,
  128. },
  129. axisLabel: {
  130. show: true,
  131. textStyle: {
  132. color: 'rgba(250,250,250,0.6)',
  133. fontSize: 16,
  134. },
  135. },
  136. },
  137. ],
  138. },
  139. }
  140. },
  141. mounted() {
  142. this.time = formatDate()
  143. this.timer = setInterval(() => {
  144. this.time = formatDate()
  145. }, 1000)
  146. this.centerData = data
  147. // 左侧图表
  148. this.initChartL1()
  149. this.initChartL2()
  150. this.initChartL3()
  151. this.initChartL4()
  152. this.initChartL5()
  153. this.initChartL6()
  154. this.initChartL7()
  155. this.initChartL8()
  156. // 中间图表
  157. this.initChartC1()
  158. this.initChartC2()
  159. // 右侧图表
  160. this.initChartR1()
  161. this.initChartR2()
  162. this.initChartR3()
  163. this.initChartR4()
  164. this.initChartR5()
  165. this.initChartR6()
  166. this.initChartR7()
  167. this.initChartR8()
  168. },
  169. beforeDestroy() {
  170. if (this.timer) {
  171. clearInterval(this.timer);
  172. }
  173. },
  174. methods: {
  175. handleShowTip(index) {
  176. this.showTip = true
  177. this.tipNum = index
  178. },
  179. handleGoPage(url) {
  180. if (url.length) {
  181. window.location.href = url
  182. }
  183. },
  184. handleGoIndex() {
  185. window.location.href = './index.html'
  186. },
  187. handleGoBack() {
  188. window.history.go(-1)
  189. },
  190. numFormat(value) {
  191. if (!value) return '0'
  192. var intPart = Number(value).toFixed(0) // 获取整数部分
  193. var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  194. var floatPart = '.00' // 预定义小数部分
  195. var value2Array = value.toString().split('.')
  196. // =2表示数据有小数位
  197. if (value2Array.length === 2) {
  198. floatPart = value2Array[1].toString() // 拿到小数部分
  199. if (floatPart.length === 1) {
  200. // 补0
  201. return intPartFormat + '.' + floatPart + '0'
  202. } else {
  203. return intPartFormat + '.' + floatPart
  204. }
  205. } else {
  206. return intPartFormat
  207. }
  208. },
  209. initChartL1() {
  210. let myChart = echarts.init(this.$refs['echartL1'])
  211. let option = {
  212. ..._.cloneDeep(this.commonOption),
  213. series: [
  214. {
  215. name: '当前各四级企业本部机构数',
  216. type: 'bar',
  217. barWidth: 15,
  218. itemStyle: {
  219. normal: {
  220. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  221. {
  222. offset: 0,
  223. color: '#69c0ff',
  224. },
  225. {
  226. offset: 1,
  227. color: '#082550',
  228. },
  229. ]),
  230. },
  231. },
  232. data: dataL1[0],
  233. },
  234. ],
  235. }
  236. option.title.text = '各四级企业本部机构数'
  237. option.legend.data = ['当前各四级企业本部机构数']
  238. option.yAxis.push({
  239. splitLine: {
  240. show: false,
  241. },
  242. axisLine: {
  243. show: false,
  244. },
  245. })
  246. myChart.setOption(option)
  247. },
  248. initChartL2() {
  249. let myChart = echarts.init(this.$refs['echartL2'])
  250. let option = {
  251. ..._.cloneDeep(this.commonOption),
  252. series: [
  253. {
  254. name: '当前各四级企业所属架构数',
  255. type: 'bar',
  256. barWidth: 15,
  257. itemStyle: {
  258. normal: {
  259. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  260. {
  261. offset: 0,
  262. color: '#69c0ff',
  263. },
  264. {
  265. offset: 1,
  266. color: '#082550',
  267. },
  268. ]),
  269. },
  270. },
  271. data: dataL2[0]
  272. }
  273. ],
  274. }
  275. option.title.text = '各四级企业所属架构数'
  276. option.legend.data = ['当前各四级企业所属架构数']
  277. option.yAxis.push({
  278. splitLine: {
  279. show: false,
  280. },
  281. axisLine: {
  282. show: false,
  283. },
  284. })
  285. myChart.setOption(option)
  286. },
  287. initChartL3() {
  288. let myChart = echarts.init(this.$refs['echartL3'])
  289. console.log(this.commonOption, "this.commonOption")
  290. let option = {
  291. ..._.cloneDeep(this.commonOption),
  292. series: [
  293. {
  294. name: '当前本部中层管理人数',
  295. type: 'bar',
  296. barWidth: 15,
  297. itemStyle: {
  298. normal: {
  299. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  300. {
  301. offset: 0,
  302. color: '#5e7ae9',
  303. },
  304. {
  305. offset: 1,
  306. color: '#082550',
  307. },
  308. ]),
  309. },
  310. },
  311. data: dataL3[0],
  312. },
  313. ],
  314. }
  315. option.title.text = '各四级企业本部中层管理人数'
  316. option.legend.data = ['当前本部中层管理人数']
  317. option.yAxis.push({
  318. type: 'value',
  319. axisLine: {
  320. show: false,
  321. },
  322. splitLine: {
  323. show: false,
  324. },
  325. })
  326. myChart.setOption(option)
  327. },
  328. initChartL4() {
  329. let myChart = echarts.init(this.$refs['echartL4'])
  330. let option = {
  331. ..._.cloneDeep(this.commonOption),
  332. series: [
  333. {
  334. name: '当前管理人员数',
  335. type: 'bar',
  336. barWidth: 12,
  337. smooth: true, //平滑曲线显示
  338. showAllSymbol: true, //显示所有图形。
  339. symbol: 'circle', //标记的图形为实心圆
  340. symbolSize: 8, //标记的大小
  341. smooth: false,
  342. itemStyle: {
  343. //折线拐点标志的样式
  344. color: '#B889EA',
  345. borderColor: '#B889EA',
  346. width: 2,
  347. shadowColor: '#B889EA',
  348. shadowBlur: 4,
  349. },
  350. lineStyle: {
  351. color: '#B889EA',
  352. width: 2,
  353. },
  354. data: dataL4[0],
  355. },
  356. {
  357. name: '管理人员数占总人数比值',
  358. yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
  359. type: 'line',
  360. itemStyle: {
  361. normal: {
  362. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  363. {
  364. offset: 0,
  365. color: '#69c0ff',
  366. },
  367. {
  368. offset: 1,
  369. color: '#082550',
  370. },
  371. ]),
  372. },
  373. },
  374. data: dataL4[1],
  375. markLine: {
  376. data: [
  377. {
  378. name: '管理人员比值核定上限',
  379. yAxis: 15,
  380. lineStyle: {
  381. color: '#fff',
  382. },
  383. label: {
  384. formatter: '{b}',
  385. position: 'middle',
  386. color: '#fff',
  387. },
  388. }
  389. ],
  390. label: {
  391. distance: [20, 8],
  392. },
  393. },
  394. },
  395. ],
  396. }
  397. option.title.text = '各四级企业管理人员数'
  398. option.legend.data = ['当前管理人员数', '管理人员数占总人数比值']
  399. option.legend.show = true
  400. option.tooltip = {
  401. trigger: 'axis',
  402. formatter: '{a0}:{c0}' + '<br/>' + '{a1}:{c1}' + '%'
  403. }
  404. option.yAxis.push({
  405. max: 100,
  406. type: 'value',
  407. axisLine: {
  408. show: false,
  409. },
  410. splitLine: {
  411. show: false,
  412. },
  413. axisLabel: {
  414. show: true,
  415. formatter: '{value} %',
  416. textStyle: {
  417. color: 'rgba(250,250,250,0.6)',
  418. },
  419. },
  420. })
  421. myChart.setOption(option)
  422. },
  423. initChartL5() {
  424. let myChart = echarts.init(this.$refs['echartL5'])
  425. let option = {
  426. ..._.cloneDeep(this.commonOption),
  427. series: [
  428. {
  429. name: '各四级企业总人数',
  430. type: 'bar',
  431. barWidth: 15,
  432. itemStyle: {
  433. normal: {
  434. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  435. {
  436. offset: 0,
  437. color: '#69c0ff',
  438. },
  439. {
  440. offset: 1,
  441. color: '#082550',
  442. },
  443. ]),
  444. },
  445. },
  446. data: dataL5[0],
  447. },
  448. {
  449. name: '去年同期人数变化率',
  450. type: 'line',
  451. yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
  452. smooth: true, //平滑曲线显示
  453. showAllSymbol: true, //显示所有图形。
  454. symbol: 'circle', //标记的图形为实心圆
  455. symbolSize: 8, //标记的大小
  456. smooth: false,
  457. itemStyle: {
  458. //折线拐点标志的样式
  459. color: '#b889ea',
  460. borderColor: '#b889ea',
  461. width: 2,
  462. shadowColor: '#b889ea',
  463. shadowBlur: 4,
  464. },
  465. lineStyle: {
  466. color: '#b889ea',
  467. width: 2,
  468. },
  469. data: dataL5[1],
  470. },
  471. ],
  472. }
  473. option.title.text = '各四级企业总人数'
  474. option.legend.data = ['各四级企业总人数', '去年同期人数变化率']
  475. option.legend.show = true
  476. option.tooltip = {
  477. trigger: 'axis',
  478. formatter: '{a0}:{c0}' + '<br/>' + '{a1}:{c1}' + '%'
  479. }
  480. option.yAxis.push({
  481. type: 'value',
  482. axisLine: {
  483. show: false,
  484. },
  485. splitLine: {
  486. show: false,
  487. },
  488. axisLabel: {
  489. show: true,
  490. formatter: '{value} %',
  491. textStyle: {
  492. color: 'rgba(250,250,250,0.6)',
  493. },
  494. },
  495. })
  496. myChart.setOption(option)
  497. },
  498. initChartL6() {
  499. let myChart = echarts.init(this.$refs['echartL6'])
  500. let option = {
  501. ..._.cloneDeep(this.commonOption),
  502. series: [
  503. {
  504. name: '本部员额数',
  505. type: 'bar',
  506. barWidth: 15,
  507. itemStyle: {
  508. normal: {
  509. barBorderRadius: [10, 10, 0, 0],
  510. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  511. {
  512. offset: 0,
  513. color: '#43ede3',
  514. },
  515. {
  516. offset: 1,
  517. color: '#082550',
  518. },
  519. ]),
  520. },
  521. },
  522. data: dataL6[0],
  523. },
  524. ],
  525. }
  526. option.title.text = '各四级企业本部员额数'
  527. option.legend.data = ['本部员额数']
  528. option.legend.show = true
  529. option.yAxis.push({
  530. splitLine: {
  531. show: false,
  532. },
  533. axisLine: {
  534. show: false,
  535. },
  536. })
  537. myChart.setOption(option)
  538. },
  539. initChartL7() {
  540. let myChart = echarts.init(this.$refs['echartL7'])
  541. let option = {
  542. ..._.cloneDeep(this.commonOption),
  543. color: ['#43ede3'],
  544. series: [
  545. {
  546. name: '人数变化',
  547. type: 'line',
  548. barWidth: 15,
  549. showAllSymbol: true, //显示所有图形。
  550. symbol: 'circle', //标记的图形为实心圆
  551. symbolSize: 15, //标记的大小
  552. smooth: false,
  553. itemStyle: {
  554. color: params => {
  555. if (dataL7[1][params.dataIndex] < 0 && params.value > 0) {
  556. return 'red'
  557. } else {
  558. return '#43ede3'
  559. }
  560. },
  561. },
  562. // markLine: {
  563. // data: [{ type: 'average', name: 'Avg' }],
  564. // },
  565. data: dataL7[0],
  566. },
  567. {
  568. name: '全员劳动生产率同比变化',
  569. type: 'line',
  570. barWidth: 15,
  571. // yAxisIndex: 1,
  572. showAllSymbol: true, //显示所有图形。
  573. symbol: 'circle', //标记的图形为实心圆
  574. symbolSize: 15, //标记的大小
  575. smooth: false,
  576. itemStyle: {
  577. //折线拐点标志的样式
  578. color: '#b889ea',
  579. borderColor: '#b889ea',
  580. width: 2,
  581. shadowColor: '#b889ea',
  582. shadowBlur: 4,
  583. },
  584. data: dataL7[1],
  585. },
  586. ],
  587. }
  588. option.title.text = '人数变化和全员劳动生产率变化率分析'
  589. option.legend.data = ['人数变化', '全员劳动生产率同比变化']
  590. option.legend.show = true
  591. option.tooltip = {
  592. trigger: 'axis',
  593. formatter: '{a0}:{c0}' + '%' + '<br/>' + '{a1}:{c1}' + '%'
  594. }
  595. option.yAxis = [
  596. {
  597. type: 'value',
  598. axisLine: {
  599. show: false,
  600. },
  601. splitLine: {
  602. show: true,
  603. lineStyle: {
  604. color: '#68b4dd66',
  605. type: 'dashed',
  606. },
  607. },
  608. axisLabel: {
  609. show: true,
  610. formatter: '{value} %',
  611. textStyle: {
  612. color: 'rgba(250,250,250,0.6)',
  613. },
  614. },
  615. },
  616. {
  617. type: 'value',
  618. axisLine: {
  619. show: false,
  620. },
  621. splitLine: {
  622. show: false,
  623. },
  624. axisLabel: {
  625. show: true,
  626. formatter: '{value} %',
  627. textStyle: {
  628. color: 'rgba(250,250,250,0.6)',
  629. },
  630. },
  631. }
  632. ]
  633. myChart.setOption(option)
  634. },
  635. initChartL8() {
  636. let myChart = echarts.init(this.$refs['echartL8'])
  637. let option = {
  638. ..._.cloneDeep(this.commonOption),
  639. color: ['#43ede3'],
  640. series: [
  641. {
  642. name: '人数变化',
  643. type: 'line',
  644. barWidth: 15,
  645. showAllSymbol: true, //显示所有图形。
  646. symbol: 'circle', //标记的图形为实心圆
  647. symbolSize: 15, //标记的大小
  648. smooth: false,
  649. itemStyle: {
  650. color: params => {
  651. if (dataL8[1][params.dataIndex] < 0 && params.value > 0) {
  652. return 'red'
  653. } else {
  654. return '#43ede3'
  655. }
  656. },
  657. },
  658. lineStyle: {
  659. color: '#43ede3',
  660. width: 2,
  661. },
  662. // markLine: {
  663. // data: [{ type: 'average', name: 'Avg' }],
  664. // },
  665. data: dataL8[0],
  666. },
  667. {
  668. name: '人工成本利润率同比变化',
  669. type: 'line',
  670. barWidth: 15,
  671. // yAxisIndex: 1,
  672. showAllSymbol: true, //显示所有图形。
  673. symbol: 'circle', //标记的图形为实心圆
  674. symbolSize: 15, //标记的大小
  675. smooth: false,
  676. itemStyle: {
  677. //折线拐点标志的样式
  678. color: '#b889ea',
  679. borderColor: '#b889ea',
  680. width: 2,
  681. shadowColor: '#b889ea',
  682. shadowBlur: 4,
  683. },
  684. data: dataL8[1],
  685. },
  686. ],
  687. }
  688. option.title.text = '人数变化和人工利润率变化分析'
  689. option.legend.data = ['人数变化', '人工成本利润率同比变化']
  690. option.legend.show = true
  691. option.tooltip = {
  692. trigger: 'axis',
  693. formatter: '{a0}:{c0}' + '%' + '<br/>' + '{a1}:{c1}' + '%'
  694. }
  695. option.yAxis = [
  696. {
  697. type: 'value',
  698. axisLine: {
  699. show: false,
  700. },
  701. splitLine: {
  702. show: true,
  703. lineStyle: {
  704. color: '#68b4dd66',
  705. type: 'dashed',
  706. },
  707. },
  708. axisLabel: {
  709. show: true,
  710. formatter: '{value} %',
  711. textStyle: {
  712. color: 'rgba(250,250,250,0.6)',
  713. },
  714. },
  715. },
  716. {
  717. type: 'value',
  718. axisLine: {
  719. show: false,
  720. },
  721. splitLine: {
  722. show: false,
  723. },
  724. axisLabel: {
  725. show: true,
  726. formatter: '{value} %',
  727. textStyle: {
  728. color: 'rgba(250,250,250,0.6)',
  729. },
  730. },
  731. }
  732. ]
  733. myChart.setOption(option)
  734. },
  735. // 中间图表---------------------------------------------开始
  736. initChartC1() {
  737. let myChart = echarts.init(this.$refs['echartC1'])
  738. let option = {
  739. ..._.cloneDeep(this.commonOption),
  740. color: ['#69c0ff'],
  741. series: [
  742. {
  743. name: '全员劳动生产率(万/人)',
  744. type: 'bar',
  745. barWidth: 12,
  746. smooth: true, //平滑曲线显示
  747. showAllSymbol: true, //显示所有图形。
  748. symbol: 'circle', //标记的图形为实心圆
  749. symbolSize: 8, //标记的大小
  750. smooth: false,
  751. itemStyle: {
  752. color: params => {
  753. if (params.value < 0 && dataC1[1][params.dataIndex] < 0) {
  754. return 'red'
  755. } else if (params.value < 0) {
  756. return 'yellow'
  757. } else {
  758. return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  759. {
  760. offset: 0,
  761. color: '#69c0ff',
  762. },
  763. {
  764. offset: 1,
  765. color: '#082550',
  766. },
  767. ])
  768. }
  769. },
  770. },
  771. lineStyle: {
  772. color: '#B889EA',
  773. width: 2,
  774. },
  775. // data: [60, 50, 80, 80, 90, 55, 40, 60, 50, 80, 90, 55, 40, 60, 50, 90, 55, 40],
  776. data: dataC1[0],
  777. markLine: {
  778. data: [
  779. {
  780. name: '省属企业平均水平',
  781. yAxis: 50.13,
  782. lineStyle: {
  783. color: '#fff',
  784. },
  785. label: {
  786. formatter: '{b}',
  787. position: 'end',
  788. padding: [20, 100, 10, 30],
  789. color: '#fff',
  790. },
  791. },
  792. {
  793. name: '央企平均水平',
  794. yAxis: 69.4,
  795. lineStyle: {
  796. color: '#fff',
  797. },
  798. label: {
  799. formatter: '{b}',
  800. position: 'end',
  801. padding: [-4, 150, 10, 30],
  802. color: '#fff',
  803. },
  804. },
  805. ],
  806. label: {
  807. distance: [20, 8],
  808. },
  809. },
  810. },
  811. {
  812. name: '全员劳动生产率同比变化',
  813. yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
  814. type: 'line',
  815. itemStyle: {
  816. normal: {
  817. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  818. {
  819. offset: 0,
  820. color: '#69c0ff',
  821. },
  822. {
  823. offset: 1,
  824. color: '#082550',
  825. },
  826. ]),
  827. },
  828. },
  829. data: dataC1[1],
  830. },
  831. ],
  832. }
  833. option.title.text = '各四级全员劳动生产率'
  834. option.legend.data = ['全员劳动生产率同比变化', '全员劳动生产率(万/人)']
  835. option.legend.show = true
  836. option.grid.right = '15%'
  837. option.tooltip = {
  838. trigger: 'axis',
  839. formatter: '{a0}:{c0}' + '%' + '<br/>' + '{a1}:{c1}' + '%'
  840. }
  841. option.yAxis.push({
  842. type: 'value',
  843. axisLine: {
  844. show: false,
  845. },
  846. splitLine: {
  847. show: false,
  848. },
  849. axisLabel: {
  850. show: true,
  851. formatter: '{value} %',
  852. textStyle: {
  853. color: 'rgba(250,250,250,0.6)',
  854. },
  855. },
  856. })
  857. myChart.setOption(option)
  858. tools.loopShowTooltip(myChart, option, {
  859. nterval: 2000,
  860. loopSeries: true,
  861. });
  862. },
  863. initChartC2() {
  864. let myChart = echarts.init(this.$refs['echartC2'])
  865. let option = {
  866. ..._.cloneDeep(this.commonOption),
  867. color: ['#69c0ff'],
  868. series: [
  869. {
  870. name: '人工成本利润率同比变化',
  871. type: 'line',
  872. yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
  873. smooth: true, //平滑曲线显示
  874. showAllSymbol: true, //显示所有图形。
  875. symbol: 'circle', //标记的图形为实心圆
  876. symbolSize: 8, //标记的大小
  877. smooth: false,
  878. itemStyle: {
  879. //折线拐点标志的样式
  880. color: '#B889EA',
  881. borderColor: '#B889EA',
  882. width: 2,
  883. shadowColor: '#B889EA',
  884. shadowBlur: 4,
  885. },
  886. lineStyle: {
  887. color: '#B889EA',
  888. width: 2,
  889. },
  890. data: dataC2[0],
  891. },
  892. {
  893. name: '人工成本利润率',
  894. type: 'bar',
  895. barWidth: 15,
  896. itemStyle: {
  897. color: params => {
  898. if (params.value < 0 && dataC2[1][params.dataIndex] < 0) {
  899. return 'red'
  900. } else if (params.value < 0) {
  901. return 'yellow'
  902. } else {
  903. return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  904. {
  905. offset: 0,
  906. color: '#69c0ff',
  907. },
  908. {
  909. offset: 1,
  910. color: '#082550',
  911. },
  912. ])
  913. }
  914. },
  915. },
  916. data: dataC2[1],
  917. markLine: {
  918. data: [
  919. {
  920. name: '省属企业平均水平',
  921. yAxis: 67.09,
  922. lineStyle: {
  923. color: '#fff',
  924. },
  925. label: {
  926. formatter: '{b}',
  927. position: 'end',
  928. padding: [24, 100, 10, 30],
  929. color: '#fff',
  930. },
  931. },
  932. {
  933. name: '央企平均水平',
  934. yAxis: 81,
  935. lineStyle: {
  936. color: '#fff',
  937. },
  938. label: {
  939. formatter: '{b}',
  940. position: 'end',
  941. padding: [-24, 200, 10, 30],
  942. color: '#fff',
  943. },
  944. },
  945. ],
  946. label: {
  947. distance: [20, 8],
  948. },
  949. },
  950. },
  951. ],
  952. }
  953. option.title.text = '各四级人工成本利润率'
  954. option.legend.data = ['人工成本利润率同比变化', '人工成本利润率']
  955. option.legend.show = true
  956. option.tooltip = {
  957. trigger: 'axis',
  958. formatter: '{a0}:{c0}' + '%' + '<br/>' + '{a1}:{c1}' + '%'
  959. }
  960. option.grid.right = '15%'
  961. option.yAxis = [
  962. {
  963. splitLine: {
  964. show: true,
  965. lineStyle: {
  966. color: '#68b4dd66',
  967. type: 'dashed',
  968. },
  969. },
  970. axisLine: {
  971. show: false,
  972. },
  973. axisLabel: {
  974. show: true,
  975. formatter: '{value} %',
  976. textStyle: {
  977. color: 'rgba(250,250,250,0.6)',
  978. },
  979. },
  980. },
  981. {
  982. splitLine: {
  983. show: false,
  984. },
  985. axisLine: {
  986. show: false,
  987. },
  988. axisLabel: {
  989. show: true,
  990. formatter: '{value} %',
  991. textStyle: {
  992. color: 'rgba(250,250,250,0.6)',
  993. },
  994. },
  995. }
  996. ]
  997. myChart.setOption(option)
  998. tools.loopShowTooltip(myChart, option, {
  999. nterval: 2000,
  1000. loopSeries: true,
  1001. });
  1002. },
  1003. // 右侧图表---------------------------------------------开始
  1004. initChartR1() {
  1005. let myChart = echarts.init(this.$refs['echartR1'])
  1006. let commonOptions = this.commonOption
  1007. commonOptions.yAxis[0].splitNumber = 2
  1008. let option = {
  1009. ..._.cloneDeep(commonOptions),
  1010. series: [
  1011. {
  1012. name: '招聘需求公告次数',
  1013. type: 'bar',
  1014. barWidth: 15,
  1015. itemStyle: {
  1016. normal: {
  1017. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1018. {
  1019. offset: 0,
  1020. color: '#69c0ff',
  1021. },
  1022. {
  1023. offset: 1,
  1024. color: '#082550',
  1025. },
  1026. ]),
  1027. },
  1028. },
  1029. data: dataR1[0],
  1030. },
  1031. {
  1032. name: '招聘需求公告累计招聘人次',
  1033. type: 'bar',
  1034. barWidth: 15,
  1035. itemStyle: {
  1036. normal: {
  1037. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1038. {
  1039. offset: 0,
  1040. color: '#43ede3',
  1041. },
  1042. {
  1043. offset: 1,
  1044. color: '#082550',
  1045. },
  1046. ]),
  1047. },
  1048. },
  1049. data: dataR1[1],
  1050. },
  1051. ],
  1052. }
  1053. option.title.text = '各四级企业招聘需求公告人次情况'
  1054. option.legend.data = ['招聘需求公告次数', '招聘需求公告累计招聘人次']
  1055. option.legend.show = true
  1056. option.yAxis.push({
  1057. splitLine: {
  1058. show: false,
  1059. },
  1060. axisLine: {
  1061. show: false,
  1062. },
  1063. })
  1064. myChart.setOption(option)
  1065. },
  1066. initChartR2() {
  1067. let myChart = echarts.init(this.$refs['echartR2'])
  1068. let commonOptions = this.commonOption
  1069. commonOptions.yAxis[0].splitNumber = 2
  1070. let option = {
  1071. ..._.cloneDeep(commonOptions),
  1072. series: [
  1073. {
  1074. name: '录用结果公示次数',
  1075. type: 'bar',
  1076. barWidth: 15,
  1077. itemStyle: {
  1078. normal: {
  1079. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1080. {
  1081. offset: 0,
  1082. color: '#69c0ff',
  1083. },
  1084. {
  1085. offset: 1,
  1086. color: '#082550',
  1087. },
  1088. ]),
  1089. },
  1090. },
  1091. data: dataR2[0],
  1092. },
  1093. {
  1094. name: '录用结果公示累计公示人数',
  1095. type: 'bar',
  1096. barWidth: 15,
  1097. itemStyle: {
  1098. normal: {
  1099. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1100. {
  1101. offset: 0,
  1102. color: '#45DAD1',
  1103. },
  1104. {
  1105. offset: 1,
  1106. color: '#082550',
  1107. },
  1108. ]),
  1109. },
  1110. },
  1111. data: dataR2[1],
  1112. },
  1113. ],
  1114. }
  1115. option.title.text = '各四级企业录用结果公示人次'
  1116. option.legend.data = ['录用结果公示次数', '录用结果公示累计公示人数']
  1117. option.legend.show = true
  1118. option.yAxis.push({
  1119. splitLine: {
  1120. show: false,
  1121. },
  1122. axisLine: {
  1123. show: false,
  1124. },
  1125. })
  1126. myChart.setOption(option)
  1127. },
  1128. initChartR3() {
  1129. let myChart = echarts.init(this.$refs['echartR3'])
  1130. let commonOptions = this.commonOption
  1131. commonOptions.yAxis[0].splitNumber = 2
  1132. let option = {
  1133. ..._.cloneDeep(commonOptions),
  1134. color: ['#45DAD1'],
  1135. series: [
  1136. {
  1137. name: '2022年利润(万)',
  1138. type: 'bar',
  1139. barWidth: 15,
  1140. itemStyle: {
  1141. normal: {
  1142. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1143. {
  1144. offset: 0,
  1145. color: '#69c0ff',
  1146. },
  1147. {
  1148. offset: 1,
  1149. color: '#082550',
  1150. },
  1151. ]),
  1152. },
  1153. },
  1154. data: dataR3[0],
  1155. },
  1156. {
  1157. name: '2022年累计招聘数',
  1158. type: 'bar',
  1159. yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
  1160. barWidth: 15,
  1161. itemStyle: {
  1162. color: params => {
  1163. if (params.value > 0 && dataR3[0][params.dataIndex] < 0) {
  1164. return 'red'
  1165. } else {
  1166. return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1167. {
  1168. offset: 0,
  1169. color: '#45DAD1',
  1170. },
  1171. {
  1172. offset: 1,
  1173. color: '#082550',
  1174. },
  1175. ])
  1176. }
  1177. },
  1178. },
  1179. data: dataR3[1],
  1180. },
  1181. ],
  1182. }
  1183. option.title.text = '各四级企业年利润与招聘情况分析'
  1184. option.legend.data = ['2022年利润(万)', '2022年累计招聘数']
  1185. option.legend.show = true
  1186. option.yAxis[0].max = function (value) {
  1187. if (Math.abs(value.max) > Math.abs(value.min)) {
  1188. return (Math.abs(value.max) * 1.2).toFixed(2);
  1189. } else {
  1190. return (Math.abs(value.min) * 1.2).toFixed(2);
  1191. }
  1192. }
  1193. option.yAxis[0].min = function (value) {
  1194. if (Math.abs(value.max) > Math.abs(value.min)) {
  1195. return (-Math.abs(value.max) * 1.2).toFixed(2);
  1196. } else {
  1197. return (-Math.abs(value.min) * 1.2).toFixed(2);
  1198. }
  1199. }
  1200. option.yAxis.push({
  1201. max: function (val) {
  1202. if (Math.abs(val.max) > Math.abs(val.min)) {
  1203. return (Math.abs(val.max) * 1.2).toFixed(0)
  1204. } else {
  1205. return (Math.abs(val.min) * 1.2).toFixed(0)
  1206. }
  1207. },
  1208. min: function (val) {
  1209. if (Math.abs(val.max) > Math.abs(val.min)) {
  1210. return (-Math.abs(val.max) * 1.2).toFixed(0)
  1211. } else {
  1212. return (Math.abs(val.min) * 1.2).toFixed(0)
  1213. }
  1214. },
  1215. splitLine: {
  1216. show: false,
  1217. },
  1218. axisLine: {
  1219. show: false,
  1220. },
  1221. axisLabel: {
  1222. show: true,
  1223. formatter: '{value}',
  1224. textStyle: {
  1225. color: 'rgba(250,250,250,0.6)',
  1226. },
  1227. },
  1228. })
  1229. myChart.setOption(option)
  1230. },
  1231. initChartR4() {
  1232. let myChart = echarts.init(this.$refs['echartR4'])
  1233. let commonOptions = this.commonOption
  1234. commonOptions.yAxis[0].splitNumber = 2
  1235. let option = {
  1236. ..._.cloneDeep(commonOptions),
  1237. series: [
  1238. {
  1239. name: '2022年退出人数',
  1240. type: 'bar',
  1241. barWidth: 15,
  1242. itemStyle: {
  1243. normal: {
  1244. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1245. {
  1246. offset: 0,
  1247. color: '#69c0ff',
  1248. },
  1249. {
  1250. offset: 1,
  1251. color: '#082550',
  1252. },
  1253. ]),
  1254. },
  1255. },
  1256. data: dataR4[0],
  1257. },
  1258. {
  1259. name: '2022年累计招聘人数',
  1260. type: 'bar',
  1261. barWidth: 15,
  1262. itemStyle: {
  1263. normal: {
  1264. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1265. {
  1266. offset: 0,
  1267. color: '#45DAD1',
  1268. },
  1269. {
  1270. offset: 1,
  1271. color: '#082550',
  1272. },
  1273. ]),
  1274. },
  1275. },
  1276. data: dataR4[1],
  1277. },
  1278. ],
  1279. }
  1280. option.title.text = '各四级企业"退二进一"完成情况'
  1281. option.legend.data = ['2022年退出人数', '2022年累计招聘人数']
  1282. option.legend.show = true
  1283. option.yAxis.push({
  1284. splitLine: {
  1285. show: false,
  1286. },
  1287. axisLine: {
  1288. show: false,
  1289. },
  1290. })
  1291. myChart.setOption(option)
  1292. },
  1293. initChartR5() {
  1294. let myChart = echarts.init(this.$refs['echartR5'])
  1295. let option = {
  1296. ..._.cloneDeep(this.commonOption),
  1297. series: [
  1298. {
  1299. name: '在岗职工平均薪酬',
  1300. type: 'bar',
  1301. barWidth: 15,
  1302. itemStyle: {
  1303. normal: {
  1304. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1305. {
  1306. offset: 0,
  1307. color: '#6682F5',
  1308. },
  1309. {
  1310. offset: 1,
  1311. color: '#082550',
  1312. },
  1313. ]),
  1314. },
  1315. },
  1316. data: dataR5[0],
  1317. },
  1318. {
  1319. name: '去年同期在岗职工平均薪酬',
  1320. type: 'bar',
  1321. barWidth: 15,
  1322. itemStyle: {
  1323. normal: {
  1324. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1325. {
  1326. offset: 0,
  1327. color: '#69c0ff',
  1328. },
  1329. {
  1330. offset: 1,
  1331. color: '#082550',
  1332. },
  1333. ]),
  1334. },
  1335. },
  1336. data: dataR5[1],
  1337. }
  1338. ],
  1339. }
  1340. option.title.text = '各四级企业在岗职工平均薪酬'
  1341. option.legend.data = ['在岗职工平均薪酬', '去年同期在岗职工平均薪酬']
  1342. option.legend.show = true
  1343. option.yAxis.push({
  1344. splitLine: {
  1345. show: false,
  1346. },
  1347. axisLine: {
  1348. show: false,
  1349. },
  1350. })
  1351. myChart.setOption(option)
  1352. },
  1353. initChartR6() {
  1354. let myChart = echarts.init(this.$refs['echartR6'])
  1355. let option = {
  1356. ..._.cloneDeep(this.commonOption),
  1357. color: ['#69c0ff'],
  1358. series: [
  1359. {
  1360. name: '2022年利润累计涨幅率',
  1361. type: 'line',
  1362. smooth: true, //平滑曲线显示
  1363. showAllSymbol: true, //显示所有图形。
  1364. symbol: 'circle', //标记的图形为实心圆
  1365. symbolSize: 8, //标记的大小
  1366. smooth: false,
  1367. itemStyle: {
  1368. //折线拐点标志的样式
  1369. color: '#B889EA',
  1370. borderColor: '#B889EA',
  1371. width: 2,
  1372. shadowColor: '#B889EA',
  1373. shadowBlur: 4,
  1374. },
  1375. lineStyle: {
  1376. color: '#B889EA',
  1377. width: 2,
  1378. },
  1379. data: dataR6[0],
  1380. },
  1381. {
  1382. name: '2022年薪酬累计涨幅率',
  1383. type: 'line',
  1384. barWidth: 15,
  1385. yAxisIndex: 1,
  1386. showAllSymbol: true, //显示所有图形。
  1387. symbol: 'circle', //标记的图形为实心圆
  1388. symbolSize: 12, //标记的大小
  1389. smooth: false,
  1390. itemStyle: {
  1391. color: params => {
  1392. if (params.value > 0 && dataR6[0][params.dataIndex] < 0) {
  1393. return 'yellow'
  1394. } else {
  1395. return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1396. {
  1397. offset: 0,
  1398. color: '#69c0ff',
  1399. },
  1400. {
  1401. offset: 1,
  1402. color: '#082550',
  1403. },
  1404. ])
  1405. }
  1406. },
  1407. },
  1408. lineStyle: {
  1409. color: '#69C0FF',
  1410. width: 2,
  1411. },
  1412. data: dataR6[1],
  1413. },
  1414. ],
  1415. }
  1416. option.title.text = '各四级企业利润与薪酬变动情况'
  1417. option.legend.data = ['2022年利润累计涨幅率', '2022年薪酬累计涨幅率']
  1418. option.tooltip = {
  1419. trigger: 'axis',
  1420. formatter: '{a0}:{c0}' + '%' + '<br/>' + '{a1}:{c1}' + '%'
  1421. }
  1422. option.yAxis = [
  1423. {
  1424. max: function (value) {
  1425. if (Math.abs(value.max) > Math.abs(value.min)) {
  1426. return (Math.abs(value.max) * 1.2).toFixed(2);
  1427. } else {
  1428. return (Math.abs(value.min) * 1.2).toFixed(2);
  1429. }
  1430. },
  1431. min: function (value) {
  1432. if (Math.abs(value.max) > Math.abs(value.min)) {
  1433. return (-Math.abs(value.max) * 1.2).toFixed(2);
  1434. } else {
  1435. return (-Math.abs(value.min) * 1.2).toFixed(2);
  1436. }
  1437. },
  1438. splitLine: {
  1439. show: true,
  1440. lineStyle: {
  1441. color: '#68b4dd66',
  1442. type: 'dashed',
  1443. },
  1444. },
  1445. axisLine: {
  1446. show: false,
  1447. },
  1448. axisLabel: {
  1449. show: true,
  1450. formatter: '{value} %',
  1451. textStyle: {
  1452. color: 'rgba(250,250,250,0.6)',
  1453. },
  1454. },
  1455. },
  1456. {
  1457. max: function (value) {
  1458. if (Math.abs(value.max) > Math.abs(value.min)) {
  1459. return (Math.abs(value.max) * 1.2).toFixed(2);
  1460. } else {
  1461. return (Math.abs(value.min) * 1.2).toFixed(2);
  1462. }
  1463. },
  1464. min: function (value) {
  1465. if (Math.abs(value.max) > Math.abs(value.min)) {
  1466. return (-Math.abs(value.max) * 1.2).toFixed(2);
  1467. } else {
  1468. return (-Math.abs(value.min) * 1.2).toFixed(2);
  1469. }
  1470. },
  1471. splitLine: {
  1472. show: false,
  1473. },
  1474. axisLine: {
  1475. show: false,
  1476. },
  1477. axisLabel: {
  1478. show: true,
  1479. formatter: '{value} %',
  1480. textStyle: {
  1481. color: 'rgba(250,250,250,0.6)',
  1482. },
  1483. },
  1484. }
  1485. ]
  1486. myChart.setOption(option)
  1487. },
  1488. initChartR7() {
  1489. let myChart = echarts.init(this.$refs['echartR7'])
  1490. let option = {
  1491. ..._.cloneDeep(this.commonOption),
  1492. series: [
  1493. {
  1494. name: '全员绩效考核完成率',
  1495. type: 'bar',
  1496. barWidth: 15,
  1497. itemStyle: {
  1498. normal: {
  1499. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1500. {
  1501. offset: 0,
  1502. color: '#B889EA',
  1503. },
  1504. {
  1505. offset: 1,
  1506. color: '#082550',
  1507. },
  1508. ]),
  1509. },
  1510. },
  1511. data: dataR7[0],
  1512. },
  1513. ],
  1514. }
  1515. option.title.text = '各四级企业全员绩效考核'
  1516. // option.legend.data = ['劳动合同签约完成率', '目标值']
  1517. option.tooltip = {
  1518. trigger: 'axis',
  1519. formatter: '{a0}:{c0}' + '%'
  1520. }
  1521. option.yAxis[0].axisLabel = {
  1522. show: true,
  1523. formatter: '{value} %',
  1524. textStyle: {
  1525. color: 'rgba(250,250,250,0.6)',
  1526. },
  1527. }
  1528. myChart.setOption(option)
  1529. },
  1530. initChartR8() {
  1531. let myChart = echarts.init(this.$refs['echartR8'])
  1532. let option = {
  1533. ..._.cloneDeep(this.commonOption),
  1534. series: [
  1535. {
  1536. name: '任期制契约化完成率',
  1537. type: 'bar',
  1538. barWidth: 15,
  1539. itemStyle: {
  1540. normal: {
  1541. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1542. {
  1543. offset: 0,
  1544. color: '#43ede3',
  1545. },
  1546. {
  1547. offset: 1,
  1548. color: '#082550',
  1549. },
  1550. ]),
  1551. },
  1552. },
  1553. data: dataR8[0],
  1554. },
  1555. ],
  1556. }
  1557. option.title.text = '各四级企业任期制契约化完成率'
  1558. option.tooltip = {
  1559. trigger: 'axis',
  1560. formatter: '{a0}:{c0}' + '%'
  1561. }
  1562. option.yAxis[0].axisLabel = {
  1563. show: true,
  1564. formatter: '{value} %',
  1565. textStyle: {
  1566. color: 'rgba(250,250,250,0.6)',
  1567. },
  1568. }
  1569. myChart.setOption(option)
  1570. },
  1571. },
  1572. })