newIndex.js 115 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514
  1. let app = new Vue({
  2. el: "#app",
  3. data() {
  4. return {
  5. config5: {
  6. waitTime: 2000,
  7. rowNum: 4,
  8. header: ["单位名称", "平均工资涨幅", ''],
  9. data: [
  10. ["山焦财务", '<span class="red"><span class="listText">-12%</span><span class="redImg"></span></span>'],
  11. ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
  12. ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
  13. ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
  14. ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>'],
  15. ["山焦财务", '<span class="red"><span class="listText">-1%</span><span class="redImg"></span></span>'],
  16. ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
  17. ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
  18. ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
  19. ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>']
  20. ],
  21. align: ["center", "center"],
  22. headerBGC: "#153A62",
  23. oddRowBGC: "#061F42",
  24. evenRowBGC: "#0C284A",
  25. },
  26. config1: {
  27. waitTime: 2000,
  28. rowNum: 1,
  29. data: [
  30. ["山焦财务", '<span class="red"><span class="listText">-12%</span><span class="redImg"></span></span>'],
  31. ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
  32. ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
  33. ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
  34. ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>'],
  35. ["山焦财务", '<span class="red"><span class="listText">-1%</span><span class="redImg"></span></span>'],
  36. ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
  37. ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
  38. ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
  39. ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>']
  40. ],
  41. align: ["center", "center"],
  42. oddRowBGC: "#3B9DEE",
  43. evenRowBGC: "#1E5389",
  44. },
  45. configLast1: {
  46. waitTime: 2000,
  47. header: ["项目名称"],
  48. rowNum: 2,
  49. data: [
  50. ["大型矿井综合掘进机器人",],
  51. ["废弃矿山遗留资源及地下空间开发利用关键技术研究",],
  52. ["遗留难采煤炭资源安全绿色高回收率开采关键技术研究与示范",],
  53. ["山西煤炭资源高效保水开采技术与示范",],
  54. ["炼焦煤采洗配销一体化关键技术研究",],
  55. ["高瓦斯矿井110工法回采工作面瓦斯与自然发火共治关键技术示范研究",],
  56. ],
  57. align: ["center", "center"],
  58. headerBGC: "#153A62",
  59. oddRowBGC: "#061F42",
  60. evenRowBGC: "#0C284A",
  61. },
  62. configLast2: {
  63. waitTime: 2000,
  64. header: ["合作高校"],
  65. rowNum: 2,
  66. data: [
  67. ["太原理工大学",],
  68. ["北京大学",],
  69. ["安徽理工大学",],
  70. ["太原理工大学",],
  71. ["中国科学技术大学",],
  72. ["太原理工大学",],
  73. ["中国矿业大学",],
  74. ],
  75. align: ["center", "center"],
  76. headerBGC: "#153A62",
  77. oddRowBGC: "#061F42",
  78. evenRowBGC: "#0C284A",
  79. },
  80. configLast3: {
  81. waitTime: 2000,
  82. header: ["合作类型"],
  83. rowNum: 2,
  84. data: [
  85. ["国家重点研发计划项目",],
  86. ["山西省揭榜招标项目",],
  87. ["山西省科技重大专项",],
  88. ["山西省揭榜招标项目",],
  89. ["山西省重点研发项目",],
  90. ["山西省重点研发项目",],
  91. ],
  92. align: ["center", "center"],
  93. headerBGC: "#153A62",
  94. oddRowBGC: "#061F42",
  95. evenRowBGC: "#0C284A",
  96. },
  97. configLast4: {
  98. waitTime: 2000,
  99. header: ["主要成效"],
  100. rowNum: 2,
  101. data: [
  102. ["综合掘进机器人系统",],
  103. ["建立废弃矿山煤层气地面抽采和废弃矿山地下空间利用先导工程",],
  104. ["遗留难采煤炭资源赋存状况的全方位勘探新技术,超前注浆封堵新材料、新装置与新工艺。",],
  105. ["底板阻水性能评价方法体系,研发承压水突水机理与岩层改性再造技术,形成了一套高效承压水上采煤保水开采方案",],
  106. ["开展煤质检测和配煤技术研究,开发配煤模型及智能配煤算法",],
  107. ["解决了瓦斯超限问题",],
  108. ],
  109. align: ["center", "center"],
  110. headerBGC: "#153A62",
  111. oddRowBGC: "#061F42",
  112. evenRowBGC: "#0C284A",
  113. },
  114. configOrg: {
  115. waitTime: 2000,
  116. rowNum: 2,
  117. data: [
  118. ["金融资本公司", '山焦担保', '组织划转', '2023-06-01'],
  119. ["山焦统配", '山焦统配', '组织新设', '2023-05-01'],
  120. ["汾西矿业集团", '灵石县富威橡胶', '组织更名', '2023-05-01'],
  121. ["焦煤置业", '海南科思实业有限公司', '组织停用', '2023-04-04'],
  122. ["西山煤电", '房城建安有限公司', '组织停用', '2023-04-01'],
  123. ["霍州煤电", '建筑建材公司', '组织停用', '2023-03-25'],
  124. ["霍州煤电", '设备租赁分公司', '组织停用', '2023-02-15'],
  125. ],
  126. align: ["center", "center", "center", "center", "center"],
  127. headerBGC: "#153A62",
  128. oddRowBGC: "#061F42",
  129. evenRowBGC: "#0C284A",
  130. },
  131. configChange: {
  132. waitTime: 2000,
  133. header: ["姓名", "调出单位", "调入单位", "调动时间", '变动状态', ""],
  134. rowNum: 4,
  135. data: [
  136. ["段树成", '山煤国际', '招标公司', '2023-07-04', '调动完成'],
  137. ["蒲立志", '焦煤置业', '山煤国际', '2023-07-01', '调动中'],
  138. ["侯利强", '霍州煤电', '西山煤电', '2023-07-01', '调动中'],
  139. ["王国明", '西山煤电', '华晋焦煤', '2023-06-19', '调动完成'],
  140. ["梁婧", '西山煤电', '物资装备公司', '2023-06-01', '调动完成'],
  141. ["赵越", '山煤国际', '招标公司', '2023-06-01', '调动完成'],
  142. ["董然", '西山煤电', '人力资源公司', '2023-06-01', '调动完成'],
  143. ["解红梅", '西山煤电', '投资公司', '2023-06-01', '调动完成'],
  144. ],
  145. align: ["center", "center", "center", "center", "center"],
  146. headerBGC: "#153A62",
  147. oddRowBGC: "#061F42",
  148. evenRowBGC: "#0C284A",
  149. },
  150. configMark: {
  151. waitTime: 2000,
  152. header: ["单位名称", "人员数量", "月份", "预警项", ""],
  153. rowNum: 4,
  154. data: [
  155. ["<span class='red'>西山煤电</span>", "<span class='red'>71</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  156. ["<span class='red'>汾西矿业</span>", "<span class='red'>1896</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  157. ["<span class='red'>霍州煤电</span>", "<span class='red'>847</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  158. ["<span class='red'>山煤国际</span>", "<span class='red'>514</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  159. ["<span class='red'>华晋焦煤</span>", "<span class='red'>13</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  160. ],
  161. align: ["center", "center", "center", "center", "center"],
  162. headerBGC: "#153A62",
  163. oddRowBGC: "#061F42",
  164. evenRowBGC: "#0C284A",
  165. },
  166. config2: {
  167. waitTime: 2000,
  168. header: ["单位名称", "已算薪组织", "未算薪组织", "算薪进度百分比", ""],
  169. rowNum: 4,
  170. data: [
  171. ["西山煤电", '290', '46', '86%'],
  172. ["汾西矿业", '10', '38', '21%'],
  173. ["霍州煤电", '314', '3', '99%'],
  174. ["山煤国际", '16', '35', '31%'],
  175. ["华晋焦煤", '7', '1', '87%'],
  176. ],
  177. align: ["center", "center", "center", "center", "center"],
  178. headerBGC: "#153A62",
  179. oddRowBGC: "#061F42",
  180. evenRowBGC: "#0C284A",
  181. },
  182. fIndex: 0,
  183. fList: [
  184. {
  185. project: "大型矿井综合掘进机器人",
  186. school: "太原理工大学, 北京大学",
  187. type: "国家重点研发计划项目",
  188. merits: "综合掘进机器人系统"
  189. },
  190. {
  191. project: "废弃矿山遗留资源及地下空间开发利用关键技术研究",
  192. school: "安徽理工大学,太原理工大学,中国科学技术大学",
  193. type: "山西省揭榜招标项目",
  194. merits: "建立废弃矿山煤层气地面抽采和废弃矿山地下空间利用先导工程"
  195. },
  196. {
  197. project: "遗留难采煤炭资源安全绿色高回收率开采关键技术研究与示范",
  198. school: "太原理工大学",
  199. type: "山西省科技重大专项",
  200. merits: "遗留难采煤炭资源赋存状况的全方位勘探新技术,超前注浆封堵新材料、新装置与新工艺。"
  201. },
  202. {
  203. project: "山西煤炭资源高效保水开采技术与示范",
  204. school: "中国矿业大学",
  205. type: "山西省揭榜招标项目",
  206. merits: "底板阻水性能评价方法体系,研发承压水突水机理与岩层改性再造技术,形成了一套高效承压水上采煤保水开采方案"
  207. },
  208. {
  209. project: "炼焦煤采洗配销一体化关键技术研究",
  210. school: "太原理工大学",
  211. type: "山西省重点研发项目",
  212. merits: "开展煤质检测和配煤技术研究,开发配煤模型及智能配煤算法"
  213. },
  214. {
  215. project: "高瓦斯矿井110工法回采工作面瓦斯与自然发火共治关键技术示范研究",
  216. school: "太原理工大学",
  217. type: "山西省重点研发项目",
  218. merits: "解决了瓦斯超限问题"
  219. },
  220. ],
  221. salaryFlag: false,
  222. pdfFlag: true,
  223. eChartsBig: undefined,
  224. LineChart: undefined,
  225. LineElse: undefined,
  226. time2: undefined,
  227. leftEcharts5: undefined,
  228. mobilizeFL: undefined,
  229. industry: {
  230. x: ["矿井", "选煤厂", "火电厂", "清洁能源厂", "焦化厂"],
  231. y: [151, 50, 6, 32, 4]
  232. },
  233. twoBar: undefined,
  234. echartTwoList: {
  235. x: ["回采", "掘进", "开拓工人", "运输", "机电", "通风安全", "安拆", "露天", "其他"],
  236. y: [11556, 15008, 6073, 10562, 8492, 10776, 1553, 119, 3668]
  237. },
  238. echartTwoList2: {
  239. x: ["煤炭洗选人员", "焦炭化工人员", "民爆人员", "金融人员", "煤炭销售人员"],
  240. y: [10115, 6327, 2301, 104, 2604]
  241. },
  242. echartsTwoBar2: {
  243. y: ["4940", "18170", "51812", "38430", '18329', '17745', '31827'],
  244. x: ["5年以下", "6-10年", "11-15年", "16-20年", '21-25年', '26-30年', '30年以上']
  245. },
  246. echartsTwoBar1: {
  247. y: ["15990", "38872", "35952", "27063", '31424', '26099', '11401'],
  248. x: ["30岁以下", "31-35岁", "36-40岁", "41-45岁", '46-50岁', '51-55岁', '55岁以上']
  249. },
  250. // organizationList: {
  251. // x: ["集团机构数", "共享中心数", "事业部数", "二级组织数", "三级组织数", "四级组织数"],
  252. // y: [18, 12, 5, 22, 316, 496]
  253. // },
  254. orgIndex: 0,
  255. organizationList: [
  256. {
  257. name: "集团机构数",
  258. flag: true,
  259. value: 18
  260. }, {
  261. name: "共享中心数",
  262. flag: false,
  263. value: 12
  264. }, {
  265. name: "事业部数",
  266. flag: false,
  267. value: 5
  268. }, {
  269. name: "二级单位数",
  270. flag: false,
  271. value: 22
  272. }, {
  273. name: "三级单位数",
  274. flag: false,
  275. value: 316
  276. }, {
  277. name: "四级单位数",
  278. flag: false,
  279. value: 496
  280. },
  281. ],
  282. twoIndex: 1,
  283. time2: 1,
  284. time3: 1,
  285. time4: 1,
  286. isShowMark: false,
  287. changeFlag: false,
  288. userFlag: true,
  289. salaryIndex: 1,
  290. sx: [],
  291. xy: [],
  292. fx: [],
  293. fy1: [],
  294. fy2: [],
  295. fy3: [],
  296. fy4: [],
  297. fy5: [],
  298. }
  299. },
  300. mounted() {
  301. this.$nextTick(() => {
  302. this.sx = spArr(salaryList.x, 8)
  303. this.sy = spArr(salaryList.y, 8)
  304. this.fx = spArr(mobilizeList.x, 8)
  305. this.fy1 = spArr(mobilizeList.y1, 8)
  306. this.fy2 = spArr(mobilizeList.y2, 8)
  307. this.fy3 = spArr(mobilizeList.y3, 8)
  308. this.fy4 = spArr(mobilizeList.y4, 8)
  309. this.fy5 = spArr(mobilizeList.y5, 8)
  310. // let organization = this.$refs.organization
  311. // this.initOrganization(organization, "", this.organizationList)
  312. let mobilize = this.$refs.mobilize
  313. this.initEchartStack(mobilize, { x: this.fx[0], y1: this.fy1[0], y2: this.fy2[0], y3: this.fy3[0], y4: this.fy4[0], y5: this.fy5[0] })
  314. let industry = this.$refs.industry
  315. this.initOrganizationElse(industry, "", this.industry, "")
  316. let sequence = this.$refs.sequence
  317. this.initBarEcharts(sequence, { x: ["管理序列", "技术序列", "操作序列"], y1: [34242, 18547, 134012], y2: [28993, 19411, 126807] }, ["当前数", "同期数"])
  318. let serviceAge = this.$refs.serviceAge
  319. this.initLineEcharts(serviceAge, this.echartsTwoBar1)
  320. let level = this.$refs.level
  321. this.initLineElseEcharts(level, levelList)
  322. let initChartR1 = this.$refs.initChartR1
  323. this.initChartR1(initChartR1)
  324. let initChartsBig = this.$refs.initChartsBig
  325. this.initChartsBig(initChartsBig)
  326. let leftEnd = this.$refs.leftEnd
  327. this.initBarEchartsElse(leftEnd, leftEndList, ["累计平均工资", "同期累计平均工资"])
  328. let echarts90 = this.$refs.echarts90
  329. this.initLineElseEchartsR(echarts90, { x: this.sx[0], y: this.sy[0] })
  330. let student = this.$refs.student
  331. this.initEchartsBar(student, schoolList,)
  332. let works = this.$refs.works
  333. this.initBarCharts(works, worksList)
  334. let efficiency = this.$refs.efficiency
  335. this.initBarChartsElse(efficiency, efficiencyList, "吨/工", { name: "行业线", value: 8.2 })
  336. let whole = this.$refs.whole
  337. this.initBarChartsElse(whole, wholeList, "吨/人", { name: "标杆矿井线", value: 1800 })
  338. let buffer = this.$refs.buffer
  339. this.initStereoscopic(buffer, userList)
  340. // let share = this.$refs.share
  341. // this.initHorizontalBar(share)
  342. let el = this.$refs.container
  343. this.initProvinceChart(el)
  344. let echartTwo = this.$refs.echartTwo
  345. this.initTwoBarEcharts(echartTwo, this.echartTwoList)
  346. this.timeNs()
  347. this.timePractice()
  348. this.timeSy()
  349. setInterval(_ => {
  350. if (this.fIndex == this.fList.length - 1) {
  351. this.fIndex = 0
  352. } else {
  353. this.fIndex = this.fIndex + 1
  354. }
  355. this.organizationList.forEach(item => {
  356. item.flag = false
  357. })
  358. if (this.orgIndex == this.organizationList.length - 1) {
  359. this.orgIndex = 0
  360. } else {
  361. this.orgIndex = this.orgIndex + 1
  362. }
  363. this.organizationList[this.orgIndex].flag = true
  364. }, 2000)
  365. })
  366. },
  367. methods: {
  368. // 针对学历结构的定时器
  369. timeNs() {
  370. let that = this;
  371. this.time2 = setInterval(() => {
  372. this.time2 && clearInterval(this.time2);
  373. this.timeNs();
  374. that.leftEcharts5.dispose();
  375. let initChartsBig = that.$refs.initChartsBig
  376. that.initChartsBig(initChartsBig)
  377. }, 15000);
  378. },
  379. timeSy() {
  380. let that = this;
  381. this.time4 = setInterval(() => {
  382. this.time4 && clearInterval(this.time4);
  383. this.timeSy();
  384. that.LineElse.dispose();
  385. that.mobilizeFL.dispose();
  386. let echarts90 = this.$refs.echarts90
  387. let mobilize = this.$refs.mobilize
  388. if (that.salaryIndex == that.sx.length) {
  389. that.salaryIndex = 0
  390. }
  391. this.initEchartStack(mobilize, { x: this.fx[that.salaryIndex], y1: this.fy1[that.salaryIndex], y2: this.fy2[that.salaryIndex], y3: this.fy3[that.salaryIndex], y4: this.fy4[that.salaryIndex], y5: this.fy5[that.salaryIndex] })
  392. this.initLineElseEchartsR(echarts90, { x: that.sx[that.salaryIndex], y: that.sy[that.salaryIndex] })
  393. that.salaryIndex += 1
  394. }, 15000);
  395. },
  396. // 针对从业人员类别的定时器
  397. timePractice() {
  398. let that = this;
  399. this.time3 = setInterval(() => {
  400. this.time3 && clearInterval(this.time3);
  401. this.timePractice();
  402. that.twoBar.dispose();
  403. that.LineChart.dispose();
  404. let echartTwo = that.$refs.echartTwo
  405. let serviceAge = that.$refs.serviceAge
  406. if (that.twoIndex == 1) {
  407. that.initTwoBarEcharts(echartTwo, that.echartTwoList)
  408. that.initLineEcharts(serviceAge, that.echartsTwoBar1)
  409. that.twoIndex = 2
  410. } else {
  411. that.initTwoBarEcharts(echartTwo, that.echartTwoList2)
  412. that.initLineEcharts(serviceAge, that.echartsTwoBar2)
  413. that.twoIndex = 1
  414. }
  415. this.userFlag = !this.userFlag
  416. }, 15000);
  417. },
  418. initOrganization(el, title = "", data = { x: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"], y: [0, 680, 562, 268, 717, 843, 987, 126, 723, 569] }, unit = "") {
  419. let chart = echarts.init(el);
  420. let option = {
  421. grid: {
  422. top: 25,
  423. right: 15,
  424. left: "15%",
  425. bottom: "27%",
  426. },
  427. grid: {
  428. top: 30,
  429. right: 20,
  430. left: 105,
  431. bottom: 40,
  432. },
  433. tooltip: {
  434. show: true,
  435. trigger: "axis",
  436. textStyle: {
  437. fontSize: 30,
  438. color: '#A3E2F4'
  439. },
  440. axisPointer: {
  441. // 坐标轴指示器,坐标轴触发有效
  442. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  443. },
  444. },
  445. xAxis: {
  446. data: data.x,
  447. axisTick: {
  448. show: false,
  449. },
  450. // x轴的字体颜色
  451. axisLabel: {
  452. interval: 0,
  453. // rotate: 40,
  454. textStyle: {
  455. color: "white",
  456. fontSize: 26,
  457. },
  458. },
  459. //y轴线的颜色以及宽度
  460. axisLine: {
  461. show: true,
  462. lineStyle: {
  463. color: "#1E5389",
  464. width: 1,
  465. type: "solid",
  466. },
  467. },
  468. },
  469. yAxis: {
  470. name: unit,
  471. type: "log",
  472. axisTick: {
  473. lineStyle: {
  474. color: "#18416F",
  475. },
  476. },
  477. // y轴的字体颜色
  478. axisLabel: {
  479. textStyle: {
  480. color: "white",
  481. fontSize: 20,
  482. },
  483. },
  484. nameTextStyle: {
  485. fontSize: 20,
  486. },
  487. splitLine: {
  488. show: true,
  489. lineStyle: {
  490. color: "#204561",
  491. width: 1,
  492. type: "dotted",
  493. },
  494. },
  495. //y轴线的颜色以及宽度
  496. axisLine: {
  497. show: true,
  498. lineStyle: {
  499. color: "#1E5389",
  500. width: 1,
  501. type: "solid",
  502. },
  503. },
  504. },
  505. series: [
  506. {
  507. name: "",
  508. type: "line",
  509. smooth: true,
  510. showSymbol: true, // 节点长显
  511. symbol: 'image://' + 'data:image/png;base64,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',
  512. symbolSize: 30,
  513. data: data.y,
  514. areaStyle: {
  515. normal: {
  516. color: new echarts.graphic.LinearGradient(
  517. 0,
  518. 0,
  519. 0,
  520. 1,
  521. [
  522. {
  523. offset: 0,
  524. color: "#40A9FF",
  525. },
  526. {
  527. offset: 1,
  528. color: "#051F41",
  529. },
  530. ],
  531. false
  532. ),
  533. },
  534. },
  535. itemStyle: {
  536. normal: {
  537. color: "#40A9FF",
  538. },
  539. },
  540. lineStyle: {
  541. normal: {
  542. width: 2,
  543. },
  544. },
  545. }
  546. ],
  547. };
  548. let that = this;
  549. chart.setOption(option);
  550. chart.on('click', function (param) {
  551. that.isShowMark = true
  552. that.salaryFlag = false
  553. that.pdfFlag = true
  554. })
  555. tools.loopShowTooltip(chart, option, {
  556. nterval: 2000,
  557. loopSeries: true,
  558. });
  559. },
  560. initOrganizationElse(el, title = "", data = { x: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"], y: [0, 680, 562, 268, 717, 843, 987, 126, 723, 569] }, unit = "") {
  561. let chart = echarts.init(el);
  562. let option = {
  563. title: {
  564. show: false,
  565. top: 5,
  566. left: "center",
  567. text: title,
  568. textStyle: {
  569. color: "#5EB7FF",
  570. fontWeight: "normal",
  571. fontSize: 32
  572. }
  573. },
  574. grid: {
  575. top: 50,
  576. right: 40,
  577. left: 105,
  578. bottom: 40,
  579. },
  580. tooltip: {
  581. show: true,
  582. trigger: "axis",
  583. textStyle: {
  584. fontSize: 30,
  585. color: '#A3E2F4'
  586. },
  587. axisPointer: {
  588. // 坐标轴指示器,坐标轴触发有效
  589. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  590. },
  591. formatter: "{c}"
  592. },
  593. xAxis: {
  594. data: data.x,
  595. axisTick: {
  596. show: false,
  597. },
  598. // x轴的字体颜色
  599. axisLabel: {
  600. interval: 0,
  601. // rotate: 40,
  602. textStyle: {
  603. color: "white",
  604. fontSize: 26,
  605. },
  606. },
  607. //y轴线的颜色以及宽度
  608. axisLine: {
  609. show: true,
  610. lineStyle: {
  611. color: "#1E5389",
  612. width: 1,
  613. type: "solid",
  614. },
  615. },
  616. },
  617. yAxis: {
  618. name: unit,
  619. axisTick: {
  620. lineStyle: {
  621. color: "#18416F",
  622. },
  623. },
  624. // y轴的字体颜色
  625. axisLabel: {
  626. textStyle: {
  627. color: "white",
  628. fontSize: 20,
  629. },
  630. },
  631. nameTextStyle: {
  632. fontSize: 20,
  633. color: "white",
  634. },
  635. splitLine: {
  636. show: true,
  637. lineStyle: {
  638. color: "#204561",
  639. width: 1,
  640. type: "dotted",
  641. },
  642. },
  643. //y轴线的颜色以及宽度
  644. axisLine: {
  645. show: true,
  646. lineStyle: {
  647. color: "#1E5389",
  648. width: 1,
  649. type: "solid",
  650. },
  651. },
  652. },
  653. series: [
  654. {
  655. name: "",
  656. type: "bar",
  657. data: data.y,
  658. showBackground: true,
  659. backgroundStyle: {
  660. color: "#18416F",
  661. },
  662. barWidth: "20%",
  663. itemStyle: {
  664. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  665. {
  666. offset: 0,
  667. color: "#02355C",
  668. }, //柱图渐变色
  669. {
  670. offset: 1,
  671. color: "#40A9FF",
  672. },
  673. ]),
  674. },
  675. }
  676. ],
  677. legend: {
  678. data: ["入池人数", "出池人数"],
  679. textStyle: {
  680. // 图列内容样式
  681. color: "#fff", // 字体颜色
  682. // fontSize: "10",
  683. },
  684. right: 30,
  685. icon: "roundRect",
  686. // 小图标的宽高
  687. itemHeight: 5,
  688. },
  689. };
  690. let that = this;
  691. chart.setOption(option);
  692. tools.loopShowTooltip(chart, option, {
  693. nterval: 2000,
  694. loopSeries: true,
  695. });
  696. },
  697. initLineEcharts(el, data) {
  698. this.LineChart = echarts.init(el);
  699. let option = {
  700. grid: {
  701. top: 25,
  702. right: 15,
  703. left: "15%",
  704. bottom: "27%",
  705. },
  706. tooltip: {
  707. show: true,
  708. trigger: "axis",
  709. textStyle: {
  710. fontSize: 30,
  711. color: '#A3E2F4'
  712. },
  713. axisPointer: {
  714. lineStyle: {
  715. color: "#ddd",
  716. },
  717. },
  718. formatter: "{c}"
  719. },
  720. legend: {
  721. textStyle: {
  722. // 图列内容样式
  723. color: "#fff", // 字体颜色
  724. // fontSize: "10",
  725. },
  726. right: 30,
  727. icon: "roundRect",
  728. // 小图标的宽高
  729. itemHeight: 5
  730. },
  731. xAxis: {
  732. type: "category",
  733. data: data.x,
  734. boundaryGap: false,
  735. splitLine: {
  736. show: false,
  737. interval: "auto",
  738. },
  739. axisTick: {
  740. show: false,
  741. },
  742. axisLine: {
  743. lineStyle: {
  744. color: "#7ECEF4",
  745. },
  746. },
  747. axisLabel: {
  748. interval: 0,
  749. rotate: 25,
  750. textStyle: {
  751. fontSize: 26,
  752. color: "#fff",
  753. },
  754. },
  755. },
  756. yAxis: {
  757. type: "value",
  758. splitLine: {
  759. show: true,
  760. lineStyle: {
  761. color: "#204561",
  762. width: 1,
  763. type: "dotted",
  764. },
  765. },
  766. axisTick: {
  767. show: false,
  768. },
  769. axisLine: {
  770. lineStyle: {
  771. color: "#7ECEF4",
  772. },
  773. },
  774. axisLabel: {
  775. margin: 10,
  776. textStyle: {
  777. fontSize: 20,
  778. color: "#fff",
  779. },
  780. },
  781. },
  782. series: [
  783. {
  784. name: "",
  785. type: "line",
  786. smooth: false,
  787. showSymbol: true, // 节点长显
  788. symbol: 'image://' + 'data:image/png;base64,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',
  789. symbolSize: 30,
  790. data: data.y,
  791. areaStyle: {
  792. normal: {
  793. color: new echarts.graphic.LinearGradient(
  794. 0,
  795. 0,
  796. 0,
  797. 1,
  798. [
  799. {
  800. offset: 0,
  801. color: "#45DAD1",
  802. },
  803. {
  804. offset: 1,
  805. color: "#051F41",
  806. },
  807. ],
  808. false
  809. ),
  810. },
  811. },
  812. itemStyle: {
  813. normal: {
  814. color: "#45DAD1",
  815. },
  816. },
  817. lineStyle: {
  818. normal: {
  819. width: 2,
  820. },
  821. },
  822. }
  823. ],
  824. };
  825. this.LineChart.setOption(option);
  826. tools.loopShowTooltip(this.LineChart, option, {
  827. nterval: 2000,
  828. loopSeries: true,
  829. });
  830. },
  831. initLineElseEcharts(el, data) {
  832. let chart = echarts.init(el);
  833. console.log(data.y);
  834. let option = {
  835. grid: {
  836. top: 25,
  837. right: 15,
  838. left: "15%",
  839. bottom: "27%",
  840. },
  841. tooltip: {
  842. show: true,
  843. trigger: "axis",
  844. textStyle: {
  845. fontSize: 30,
  846. color: '#A3E2F4'
  847. },
  848. axisPointer: {
  849. type: "none",
  850. lineStyle: {
  851. color: "#ddd",
  852. },
  853. },
  854. formatter: "{c}"
  855. },
  856. legend: {
  857. textStyle: {
  858. // 图列内容样式
  859. color: "#fff", // 字体颜色
  860. // fontSize: "10",
  861. },
  862. right: 30,
  863. icon: "roundRect",
  864. // 小图标的宽高
  865. itemHeight: 5
  866. },
  867. xAxis: {
  868. type: "category",
  869. data: data.x,
  870. boundaryGap: false,
  871. splitLine: {
  872. show: false,
  873. interval: "auto",
  874. },
  875. axisTick: {
  876. show: false,
  877. },
  878. axisLine: {
  879. lineStyle: {
  880. color: "#7ECEF4",
  881. },
  882. },
  883. axisLabel: {
  884. interval: 0,
  885. rotate: 40,
  886. margin: 10,
  887. textStyle: {
  888. fontSize: 26,
  889. color: "#fff",
  890. },
  891. },
  892. },
  893. yAxis: {
  894. type: "value",
  895. splitLine: {
  896. show: true,
  897. lineStyle: {
  898. color: "#204561",
  899. width: 1,
  900. type: "dotted",
  901. },
  902. },
  903. axisTick: {
  904. show: false,
  905. },
  906. axisLine: {
  907. lineStyle: {
  908. color: "#7ECEF4",
  909. },
  910. },
  911. axisLabel: {
  912. margin: 10,
  913. textStyle: {
  914. fontSize: 20,
  915. color: "#fff",
  916. },
  917. },
  918. },
  919. series: [
  920. {
  921. name: "",
  922. type: "line",
  923. smooth: false,
  924. showSymbol: true, // 节点长显
  925. symbol: 'image://' + 'data:image/png;base64,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',
  926. symbolSize: 30,
  927. data: data.y,
  928. areaStyle: {
  929. normal: {
  930. color: new echarts.graphic.LinearGradient(
  931. 0,
  932. 0,
  933. 0,
  934. 1,
  935. [
  936. {
  937. offset: 0,
  938. color: "#40A9FF",
  939. },
  940. {
  941. offset: 1,
  942. color: "#051F41",
  943. },
  944. ],
  945. false
  946. ),
  947. },
  948. },
  949. itemStyle: {
  950. normal: {
  951. color: "#40A9FF",
  952. },
  953. },
  954. emphasis: {
  955. itemStyle: {
  956. color: '#d4bc1d',
  957. symbol: 'image://' + 'data:image/png;base64,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',
  958. },
  959. },
  960. lineStyle: {
  961. normal: {
  962. width: 2,
  963. },
  964. },
  965. }
  966. ],
  967. };
  968. chart.setOption(option);
  969. tools.loopShowTooltip(chart, option, {
  970. nterval: 2000,
  971. loopSeries: true,
  972. });
  973. },
  974. initLineElseEchartsR(el, data) {
  975. this.LineElse = echarts.init(el);
  976. let option = {
  977. grid: {
  978. top: 15,
  979. right: "5%",
  980. left: "5%",
  981. bottom: "22%",
  982. },
  983. tooltip: {
  984. show: true,
  985. trigger: "axis",
  986. textStyle: {
  987. fontSize: 30,
  988. color: '#A3E2F4'
  989. },
  990. axisPointer: {
  991. lineStyle: {
  992. color: "#ddd",
  993. },
  994. },
  995. formatter: "{c} %"
  996. },
  997. legend: {
  998. textStyle: {
  999. // 图列内容样式
  1000. color: "#fff", // 字体颜色
  1001. // fontSize: "10",
  1002. },
  1003. right: 30,
  1004. icon: "roundRect",
  1005. // 小图标的宽高
  1006. itemHeight: 5
  1007. },
  1008. xAxis: {
  1009. type: "category",
  1010. data: data.x,
  1011. boundaryGap: false,
  1012. splitLine: {
  1013. show: false,
  1014. interval: "auto",
  1015. },
  1016. axisTick: {
  1017. show: false,
  1018. },
  1019. axisLine: {
  1020. lineStyle: {
  1021. color: "#7ECEF4",
  1022. },
  1023. },
  1024. axisLabel: {
  1025. interval: 0,
  1026. textStyle: {
  1027. fontSize: 26,
  1028. color: "#fff",
  1029. },
  1030. },
  1031. },
  1032. yAxis: {
  1033. type: "value",
  1034. min: 80,
  1035. max: 100,
  1036. splitNumber: 3,
  1037. interval: 10,
  1038. splitLine: {
  1039. show: true,
  1040. lineStyle: {
  1041. color: "#204561",
  1042. width: 1,
  1043. type: "dotted",
  1044. },
  1045. },
  1046. axisTick: {
  1047. show: false,
  1048. },
  1049. axisLine: {
  1050. lineStyle: {
  1051. color: "#7ECEF4",
  1052. },
  1053. },
  1054. axisLabel: {
  1055. margin: 10,
  1056. textStyle: {
  1057. fontSize: 20,
  1058. color: "#fff",
  1059. },
  1060. },
  1061. },
  1062. series: [
  1063. {
  1064. name: "",
  1065. type: "line",
  1066. smooth: false,
  1067. showSymbol: true, // 节点长显
  1068. symbol: 'image://' + 'data:image/png;base64,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',
  1069. symbolSize: 30,
  1070. data: data.y,
  1071. areaStyle: {
  1072. normal: {
  1073. color: new echarts.graphic.LinearGradient(
  1074. 0,
  1075. 0,
  1076. 0,
  1077. 1,
  1078. [
  1079. {
  1080. offset: 0,
  1081. color: "#40A9FF",
  1082. },
  1083. {
  1084. offset: 1,
  1085. color: "#051F41",
  1086. },
  1087. ],
  1088. false
  1089. ),
  1090. },
  1091. },
  1092. itemStyle: {
  1093. normal: {
  1094. color: "#40A9FF",
  1095. },
  1096. },
  1097. lineStyle: {
  1098. normal: {
  1099. width: 2,
  1100. },
  1101. },
  1102. }
  1103. ],
  1104. };
  1105. this.LineElse.setOption(option);
  1106. tools.loopShowTooltip(this.LineElse, option, {
  1107. nterval: 2000,
  1108. loopSeries: true,
  1109. });
  1110. },
  1111. initChartR1(el) {
  1112. let myChart = echarts.init(el)
  1113. let objData = {}
  1114. echarts2.forEach(item => {
  1115. objData[item.name] = item.value
  1116. })
  1117. let option = {
  1118. tooltip: {
  1119. show: true,
  1120. trigger: "item",
  1121. textStyle: {
  1122. fontSize: 30,
  1123. color: '#A3E2F4'
  1124. },
  1125. axisPointer: {
  1126. lineStyle: {
  1127. color: "#ddd",
  1128. },
  1129. },
  1130. formatter: "{b} : {c}({d}%)"
  1131. },
  1132. legend: {
  1133. top: 'center',
  1134. orient: 'vertical',
  1135. left: '60%',
  1136. textStyle: {
  1137. fontSize: 30,
  1138. color: '#9DB9EB',
  1139. },
  1140. formatter: function (name) {
  1141. console.log(name);
  1142. return (
  1143. "{title|" + name + "} {value|" + objData[name] + "} {title|人}"
  1144. );
  1145. },
  1146. textStyle: {
  1147. rich: {
  1148. title: {
  1149. fontSize: 26,
  1150. lineHeight: 50,
  1151. color: "#fff",
  1152. },
  1153. value: {
  1154. fontSize: 26,
  1155. fontWeight: "bolder",
  1156. lineHeight: 50,
  1157. color: "#FFAD05",
  1158. },
  1159. },
  1160. },
  1161. },
  1162. graphic: {
  1163. elements: [{
  1164. type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  1165. style: {
  1166. image: './images/pie-back.png', //这里添加图片地址
  1167. width: 120,
  1168. height: 120
  1169. },
  1170. left: '30%',//
  1171. top: 'middle' //配置图片居中
  1172. }]
  1173. },
  1174. series: [
  1175. {
  1176. name: '',
  1177. type: 'pie',
  1178. radius: ['40%', '50%'],
  1179. center: ["37%", "50%"],
  1180. labelLine: {
  1181. normal: {
  1182. show: false,
  1183. length: 20,
  1184. length2: 55
  1185. },
  1186. emphasis: {
  1187. show: false
  1188. }
  1189. },
  1190. label: {
  1191. normal: {
  1192. show: false,
  1193. formatter: "{b}",
  1194. textStyle: {
  1195. fontSize: 28,
  1196. },
  1197. position: 'outside'
  1198. },
  1199. emphasis: {
  1200. show: false
  1201. }
  1202. },
  1203. data: echarts2,
  1204. itemStyle: {
  1205. normal: {
  1206. color: function (colors) {
  1207. var colorList = [
  1208. "#eeee36", "#6336df", "#2edb8e", "#44cdf3", "#fcbf45"
  1209. ];
  1210. return colorList[colors.dataIndex];
  1211. }
  1212. },
  1213. }
  1214. },
  1215. ],
  1216. }
  1217. myChart.setOption(option)
  1218. tools.loopShowTooltip(myChart, option, {
  1219. nterval: 2000,
  1220. loopSeries: true,
  1221. });
  1222. },
  1223. initChartsBig(el) {
  1224. this.leftEcharts5 = echarts.init(el);
  1225. let option = {
  1226. color: ["#eeee36", "#6336df", "#2edb8e", "#44cdf3", "#fcbf45"],
  1227. grid: {
  1228. left: -100,
  1229. top: 50,
  1230. bottom: 10,
  1231. right: 10,
  1232. containLabel: true
  1233. },
  1234. tooltip: {
  1235. trigger: 'item',
  1236. textStyle: {
  1237. fontSize: 30,
  1238. color: '#A3E2F4'
  1239. },
  1240. formatter: "{b} : {c} ({d}%)"
  1241. },
  1242. legend: {
  1243. show: false,
  1244. type: "scroll",
  1245. orient: "vartical",
  1246. // x: "right",
  1247. top: "center",
  1248. right: "10",
  1249. // bottom: "0%",
  1250. itemWidth: 30,
  1251. itemHeight: 12,
  1252. itemGap: 16,
  1253. textStyle: {
  1254. color: '#A3E2F4',
  1255. fontSize: 30,
  1256. fontWeight: 0
  1257. },
  1258. data: ['研究生及以上', '大学', '大专', '中专、技校', '初中及以下']
  1259. },
  1260. polar: {},
  1261. angleAxis: {
  1262. interval: 1,
  1263. type: 'category',
  1264. data: [],
  1265. z: 10,
  1266. axisLine: {
  1267. show: false,
  1268. lineStyle: {
  1269. color: "#0B4A6B",
  1270. width: 1,
  1271. type: "solid"
  1272. },
  1273. },
  1274. axisLabel: {
  1275. interval: 0,
  1276. show: true,
  1277. color: "#0B4A6B",
  1278. margin: 8,
  1279. fontSize: 16
  1280. },
  1281. },
  1282. radiusAxis: {
  1283. min: 40,
  1284. max: 120,
  1285. interval: 20,
  1286. axisLine: {
  1287. show: false,
  1288. lineStyle: {
  1289. color: "#0B3E5E",
  1290. width: 1,
  1291. type: "solid"
  1292. },
  1293. },
  1294. axisLabel: {
  1295. formatter: '{value} %',
  1296. show: false,
  1297. padding: [0, 0, 20, 0],
  1298. color: "#0B3E5E",
  1299. fontSize: 26,
  1300. },
  1301. splitLine: {
  1302. lineStyle: {
  1303. color: "#0B3E5E",
  1304. width: 2,
  1305. type: "solid"
  1306. }
  1307. }
  1308. },
  1309. calculable: true,
  1310. series: [{
  1311. type: 'pie',
  1312. radius: ["5%", "10%"],
  1313. hoverAnimation: false,
  1314. labelLine: {
  1315. normal: {
  1316. show: false,
  1317. length: 30,
  1318. length2: 55
  1319. },
  1320. emphasis: {
  1321. show: false
  1322. }
  1323. },
  1324. data: [{
  1325. name: '',
  1326. value: 0,
  1327. tooltip: { show: false },
  1328. itemStyle: {
  1329. normal: {
  1330. color: "#0B4A6B"
  1331. }
  1332. }
  1333. }]
  1334. }, {
  1335. type: 'pie',
  1336. radius: ["90%", "95%"],
  1337. hoverAnimation: false,
  1338. labelLine: {
  1339. normal: {
  1340. show: false,
  1341. length: 30,
  1342. length2: 55
  1343. },
  1344. emphasis: {
  1345. show: false
  1346. }
  1347. },
  1348. name: "",
  1349. data: [{
  1350. name: '',
  1351. value: 0,
  1352. tooltip: { show: false },
  1353. itemStyle: {
  1354. normal: {
  1355. color: "#0B4A6B"
  1356. }
  1357. }
  1358. }]
  1359. }, {
  1360. stack: 'a',
  1361. type: 'pie',
  1362. radius: ['20%', '80%'],
  1363. roseType: 'area',
  1364. zlevel: 10,
  1365. label: {
  1366. normal: {
  1367. show: true,
  1368. formatter: "{b}",
  1369. textStyle: {
  1370. fontSize: 28,
  1371. },
  1372. position: 'outside'
  1373. },
  1374. emphasis: {
  1375. show: true
  1376. }
  1377. },
  1378. labelLine: {
  1379. normal: {
  1380. show: true,
  1381. length: 10,
  1382. length2: 55
  1383. },
  1384. emphasis: {
  1385. show: false
  1386. }
  1387. },
  1388. data: [{
  1389. value: 3103,
  1390. name: '研究生及以上'
  1391. },
  1392. {
  1393. value: 42543,
  1394. name: '大学'
  1395. },
  1396. {
  1397. value: 46669,
  1398. name: '大专'
  1399. },
  1400. {
  1401. value: 69437,
  1402. name: '中专、技校'
  1403. },
  1404. {
  1405. value: 25049,
  1406. name: '初中及以下'
  1407. }
  1408. ]
  1409. },]
  1410. }
  1411. this.leftEcharts5.setOption(option, {
  1412. notMerge: true,
  1413. notMerge: false,
  1414. });
  1415. tools.loopShowTooltip(this.leftEcharts5, option, {
  1416. nterval: 2000,
  1417. loopSeries: true,
  1418. });
  1419. },
  1420. initBarCharts(el, data) {
  1421. let chart = echarts.init(el);
  1422. var option = {
  1423. tooltip: { //提示框组件
  1424. trigger: 'axis',
  1425. formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
  1426. textStyle: {
  1427. fontSize: 30,
  1428. color: '#A3E2F4'
  1429. },
  1430. axisPointer: {
  1431. type: 'shadow',
  1432. label: {
  1433. backgroundColor: '#6a7985'
  1434. }
  1435. },
  1436. textStyle: {
  1437. color: '#fff',
  1438. fontStyle: 'normal',
  1439. fontFamily: '微软雅黑',
  1440. fontSize: 30,
  1441. }
  1442. },
  1443. grid: {
  1444. left: '9%',
  1445. right: '15%',
  1446. bottom: '10%',
  1447. top: 50,
  1448. },
  1449. legend: {//图例组件,颜色和名字
  1450. right: 10,
  1451. top: 0,
  1452. itemGap: 16,
  1453. itemWidth: 18,
  1454. itemHeight: 10,
  1455. data: [
  1456. {
  1457. name: '目标值',
  1458. }, {
  1459. name: '实际值',
  1460. //icon:'image://../wwwroot/js/url2.png', //路径
  1461. }
  1462. ],
  1463. textStyle: {
  1464. color: '#a8aab0',
  1465. fontStyle: 'normal',
  1466. fontFamily: '微软雅黑',
  1467. fontSize: 30,
  1468. }
  1469. },
  1470. xAxis: [
  1471. {
  1472. type: 'category',
  1473. boundaryGap: true,//坐标轴两边留白
  1474. data: data.x,
  1475. axisLabel: { //坐标轴刻度标签的相关设置。
  1476. interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
  1477. margin: 15,
  1478. textStyle: {
  1479. color: '#fff',
  1480. fontStyle: 'normal',
  1481. fontFamily: '微软雅黑',
  1482. fontSize: 26,
  1483. }
  1484. },
  1485. axisTick: {//坐标轴刻度相关设置。
  1486. show: false,
  1487. },
  1488. axisLine: {//坐标轴轴线相关设置
  1489. lineStyle: {
  1490. color: '#fff',
  1491. opacity: 0.2
  1492. }
  1493. },
  1494. splitLine: { //坐标轴在 grid 区域中的分隔线。
  1495. show: false,
  1496. }
  1497. }
  1498. ],
  1499. yAxis: [
  1500. {
  1501. name: "万元/人",
  1502. type: 'value',
  1503. splitNumber: 5,
  1504. axisLabel: {
  1505. textStyle: {
  1506. color: '#FFF',
  1507. fontStyle: 'normal',
  1508. fontFamily: '微软雅黑',
  1509. fontSize: 20,
  1510. }
  1511. },
  1512. nameTextStyle: {
  1513. color: "#a8aab0",
  1514. fontSize: 30
  1515. },
  1516. axisLine: {
  1517. show: false
  1518. },
  1519. axisTick: {
  1520. show: false
  1521. },
  1522. splitLine: {
  1523. show: false,
  1524. lineStyle: {
  1525. color: ['#fff'],
  1526. }
  1527. }
  1528. }
  1529. ],
  1530. series: [
  1531. {
  1532. name: '目标值',
  1533. type: 'bar',
  1534. data: data.y2,
  1535. barWidth: 20,
  1536. barGap: 0.2,//柱间距离
  1537. label: {//图形上的文本标签
  1538. normal: {
  1539. show: false,
  1540. position: 'top',
  1541. textStyle: {
  1542. color: '#a8aab0',
  1543. fontStyle: 'normal',
  1544. fontFamily: '微软雅黑',
  1545. fontSize: 30,
  1546. },
  1547. },
  1548. },
  1549. itemStyle: {//图形样式
  1550. normal: {
  1551. barBorderRadius: [10, 10, 0, 0],
  1552. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1553. {
  1554. offset: 0,
  1555. color: '#9e65ea',
  1556. },
  1557. {
  1558. offset: 1,
  1559. color: '#051F41',
  1560. }], false),
  1561. },
  1562. },
  1563. },
  1564. {
  1565. name: '实际值',
  1566. type: 'bar',
  1567. data: data.y1,
  1568. barWidth: 20,
  1569. barGap: 0,//柱间距离
  1570. label: {//图形上的文本标签
  1571. normal: {
  1572. show: false,
  1573. position: 'top',
  1574. textStyle: {
  1575. color: '#a8aab0',
  1576. fontStyle: 'normal',
  1577. fontFamily: '微软雅黑',
  1578. fontSize: 30,
  1579. },
  1580. },
  1581. },
  1582. itemStyle: {//图形样式
  1583. normal: {
  1584. barBorderRadius: [10, 10, 0, 0],
  1585. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1586. offset: 1, color: '#051F41'
  1587. }, {
  1588. offset: 0, color: '#84fab0'
  1589. }], false),
  1590. },
  1591. },
  1592. markLine: {
  1593. symbol: ['none'],
  1594. silent: true,
  1595. data: [{
  1596. yAxis: 15.3,
  1597. name: "社会劳动生产率",
  1598. lineStyle: {
  1599. normal: {
  1600. type: "dashed",
  1601. width: 3,
  1602. color: '#0bff68'
  1603. }
  1604. },
  1605. label: {
  1606. show: true,
  1607. distance: 20,
  1608. fontWeight: "lighter",
  1609. formatter: "社会劳动生产率",
  1610. },
  1611. }, {
  1612. yAxis: 50.8,
  1613. lineStyle: {
  1614. normal: {
  1615. type: "dashed",
  1616. width: 3,
  1617. color: 'rgb(0, 255, 242)'
  1618. }
  1619. },
  1620. label: {
  1621. show: true,
  1622. distance: 20,
  1623. fontWeight: "lighter",
  1624. formatter: "省属企业平均劳动生产率",
  1625. },
  1626. }, {
  1627. yAxis: 69.2,
  1628. lineStyle: {
  1629. normal: {
  1630. type: "dashed",
  1631. width: 3,
  1632. color: '#f9d423'
  1633. }
  1634. },
  1635. label: {
  1636. show: true,
  1637. distance: 20,
  1638. fontWeight: "lighter",
  1639. formatter: "央企平均劳动生产率",
  1640. },
  1641. },]
  1642. },
  1643. }
  1644. ]
  1645. };
  1646. chart.setOption(option);
  1647. tools.loopShowTooltip(chart, option, {
  1648. nterval: 2000,
  1649. loopSeries: true,
  1650. });
  1651. },
  1652. initBarChartsElse(el, data, name, lineInfo) {
  1653. let chart = echarts.init(el);
  1654. var option = {
  1655. tooltip: { //提示框组件
  1656. trigger: 'axis',
  1657. formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
  1658. textStyle: {
  1659. fontSize: 30,
  1660. color: '#A3E2F4'
  1661. },
  1662. axisPointer: {
  1663. type: 'shadow',
  1664. label: {
  1665. backgroundColor: '#6a7985'
  1666. }
  1667. },
  1668. textStyle: {
  1669. color: '#fff',
  1670. fontStyle: 'normal',
  1671. fontFamily: '微软雅黑',
  1672. fontSize: 30,
  1673. }
  1674. },
  1675. grid: {
  1676. left: '10%',
  1677. right: '15%',
  1678. bottom: '10%',
  1679. top: 50,
  1680. },
  1681. legend: {//图例组件,颜色和名字
  1682. right: 10,
  1683. top: 0,
  1684. itemGap: 16,
  1685. itemWidth: 18,
  1686. itemHeight: 10,
  1687. data: [
  1688. {
  1689. name: '目标值',
  1690. }, {
  1691. name: '实际值',
  1692. //icon:'image://../wwwroot/js/url2.png', //路径
  1693. }
  1694. ],
  1695. textStyle: {
  1696. color: '#a8aab0',
  1697. fontStyle: 'normal',
  1698. fontFamily: '微软雅黑',
  1699. fontSize: 30,
  1700. }
  1701. },
  1702. xAxis: [
  1703. {
  1704. type: 'category',
  1705. boundaryGap: true,//坐标轴两边留白
  1706. data: data.x,
  1707. axisLabel: { //坐标轴刻度标签的相关设置。
  1708. interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
  1709. margin: 15,
  1710. textStyle: {
  1711. color: '#fff',
  1712. fontStyle: 'normal',
  1713. fontFamily: '微软雅黑',
  1714. fontSize: 26,
  1715. }
  1716. },
  1717. axisTick: {//坐标轴刻度相关设置。
  1718. show: false,
  1719. },
  1720. axisLine: {//坐标轴轴线相关设置
  1721. lineStyle: {
  1722. color: '#fff',
  1723. opacity: 0.2
  1724. }
  1725. },
  1726. splitLine: { //坐标轴在 grid 区域中的分隔线。
  1727. show: false,
  1728. }
  1729. }
  1730. ],
  1731. yAxis: [
  1732. {
  1733. name,
  1734. type: 'value',
  1735. splitNumber: 5,
  1736. axisLabel: {
  1737. textStyle: {
  1738. color: '#FFF',
  1739. fontStyle: 'normal',
  1740. fontFamily: '微软雅黑',
  1741. fontSize: 20,
  1742. }
  1743. },
  1744. nameTextStyle: {
  1745. color: "#a8aab0",
  1746. fontSize: 30
  1747. },
  1748. axisLine: {
  1749. show: false
  1750. },
  1751. axisTick: {
  1752. show: false
  1753. },
  1754. splitLine: {
  1755. show: false,
  1756. lineStyle: {
  1757. color: ['#fff'],
  1758. }
  1759. }
  1760. }
  1761. ],
  1762. series: [
  1763. {
  1764. name: '目标值',
  1765. type: 'bar',
  1766. data: data.y2,
  1767. barWidth: 20,
  1768. barGap: 0,//柱间距离
  1769. label: {//图形上的文本标签
  1770. normal: {
  1771. show: false,
  1772. position: 'top',
  1773. textStyle: {
  1774. color: '#a8aab0',
  1775. fontStyle: 'normal',
  1776. fontFamily: '微软雅黑',
  1777. fontSize: 30,
  1778. },
  1779. },
  1780. },
  1781. itemStyle: {//图形样式
  1782. normal: {
  1783. barBorderRadius: [10, 10, 0, 0],
  1784. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1785. {
  1786. offset: 0,
  1787. color: '#9e65ea',
  1788. },
  1789. {
  1790. offset: 1,
  1791. color: '#051F41',
  1792. }], false),
  1793. },
  1794. },
  1795. },
  1796. {
  1797. name: '实际值',
  1798. type: 'bar',
  1799. data: data.y1,
  1800. barWidth: 20,
  1801. barGap: 0,//柱间距离
  1802. label: {//图形上的文本标签
  1803. normal: {
  1804. show: false,
  1805. position: 'top',
  1806. textStyle: {
  1807. color: '#a8aab0',
  1808. fontStyle: 'normal',
  1809. fontFamily: '微软雅黑',
  1810. fontSize: 30,
  1811. },
  1812. },
  1813. },
  1814. itemStyle: {//图形样式
  1815. normal: {
  1816. barBorderRadius: [10, 10, 0, 0],
  1817. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1818. offset: 1, color: '#051F41'
  1819. }, {
  1820. offset: 0, color: '#84fab0'
  1821. }], false),
  1822. },
  1823. },
  1824. markLine: {
  1825. symbol: ['none'],
  1826. silent: true,
  1827. data: [{
  1828. yAxis: lineInfo.value,
  1829. name: lineInfo.name,
  1830. lineStyle: {
  1831. normal: {
  1832. type: "dashed",
  1833. width: 3,
  1834. color: 'rgb(0, 255, 242)'
  1835. }
  1836. },
  1837. label: {
  1838. show: true,
  1839. distance: 20,
  1840. fontWeight: "lighter",
  1841. formatter: lineInfo.name,
  1842. },
  1843. }]
  1844. },
  1845. }
  1846. ]
  1847. };
  1848. chart.setOption(option);
  1849. tools.loopShowTooltip(chart, option, {
  1850. nterval: 2000,
  1851. loopSeries: true,
  1852. });
  1853. },
  1854. initBarEcharts(el, data, nameList) {
  1855. let chart = echarts.init(el);
  1856. var scale = 2;
  1857. var singleData = data.y1;
  1858. var multipleData = data.y2;
  1859. var color = "#fff";
  1860. option = {
  1861. tooltip: {
  1862. show: true,
  1863. trigger: 'axis',
  1864. textStyle: {
  1865. fontSize: 30,
  1866. color: '#A3E2F4'
  1867. },
  1868. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  1869. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  1870. }
  1871. },
  1872. legend: {
  1873. data: nameList,
  1874. align: 'left',
  1875. itemGap: 50,
  1876. // x: 'right',
  1877. right: '1%',
  1878. y: '1%',
  1879. icon: 'rect',
  1880. itemWidth: 15 * scale, // 图例图形宽度
  1881. itemHeight: 15 * scale, // 图例图形高度
  1882. textStyle: {
  1883. color: "#3fdaff",
  1884. fontSize: 16 * scale
  1885. }
  1886. },
  1887. grid: {
  1888. left: '3%',
  1889. right: '4%',
  1890. bottom: '3%',
  1891. containLabel: true
  1892. },
  1893. textStyle: {
  1894. fontSize: 30,
  1895. color: '#A3E2F4'
  1896. },
  1897. xAxis: [{
  1898. type: 'category',
  1899. data: data.x,
  1900. axisLabel: {
  1901. // inside: true,
  1902. padding: [15, 0, 0, 0],
  1903. textStyle: {
  1904. color: "#fff",
  1905. fontSize: 26,
  1906. }
  1907. },
  1908. axisTick: {
  1909. inside: true,
  1910. length: 8 * scale,
  1911. lineStyle: {
  1912. color: color,
  1913. }
  1914. },
  1915. axisLine: {
  1916. lineStyle: {
  1917. color: color,
  1918. }
  1919. },
  1920. splitLine: {
  1921. lineStyle: {
  1922. color: 'rgba(80,224,255,0.3)',
  1923. type: 'dashed'
  1924. }
  1925. }
  1926. }],
  1927. yAxis: [{
  1928. type: 'value',
  1929. axisLabel: {
  1930. // inside: true,
  1931. padding: [0, 15, 0, 0],
  1932. textStyle: {
  1933. color: color,
  1934. fontSize: 20,
  1935. }
  1936. },
  1937. axisTick: {
  1938. lineStyle: {
  1939. color: color,
  1940. }
  1941. },
  1942. axisLine: {
  1943. lineStyle: {
  1944. color: color,
  1945. }
  1946. },
  1947. splitLine: {
  1948. lineStyle: {
  1949. color: '#fff',
  1950. type: 'dashed'
  1951. },
  1952. show: false,
  1953. },
  1954. nameTextStyle: {
  1955. color: "#fff",
  1956. fontSize: 16 * scale,
  1957. padding: [0, 0, 10, 0]
  1958. }
  1959. }],
  1960. series: [{
  1961. name: nameList[0],
  1962. type: 'bar',
  1963. barWidth: '15%',
  1964. barGap: '40%',
  1965. itemStyle: {
  1966. normal: {
  1967. color: 'rgba(94,218,255,0.4)',
  1968. }
  1969. },
  1970. data: singleData
  1971. },
  1972. {
  1973. name: nameList[1],
  1974. type: 'bar',
  1975. barWidth: '15%',
  1976. barGap: '40%',
  1977. itemStyle: {
  1978. normal: {
  1979. color: '#ffc72b',
  1980. }
  1981. },
  1982. data: multipleData
  1983. }]
  1984. };
  1985. chart.setOption(option);
  1986. tools.loopShowTooltip(chart, option, {
  1987. nterval: 2000,
  1988. loopSeries: true,
  1989. });
  1990. },
  1991. initBarEchartsElse(el, data, nameList) {
  1992. let chart = echarts.init(el);
  1993. var scale = 2;
  1994. var singleData = data.y1;
  1995. var multipleData = data.y2;
  1996. var color = "#fff";
  1997. option = {
  1998. textStyle: {
  1999. fontSize: 30,
  2000. color: '#A3E2F4'
  2001. },
  2002. tooltip: {
  2003. show: true,
  2004. trigger: 'axis',
  2005. textStyle: {
  2006. fontSize: 30,
  2007. color: '#A3E2F4'
  2008. },
  2009. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  2010. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  2011. },
  2012. formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
  2013. },
  2014. legend: {
  2015. data: nameList,
  2016. align: 'left',
  2017. itemGap: 50,
  2018. // x: 'right',
  2019. right: '1%',
  2020. y: '1%',
  2021. icon: 'rect',
  2022. textStyle: {
  2023. color: "#3fdaff",
  2024. fontSize: 20
  2025. }
  2026. },
  2027. grid: {
  2028. top: "10%",
  2029. left: '5%',
  2030. right: '4%',
  2031. bottom: '20%',
  2032. },
  2033. xAxis: [{
  2034. type: 'category',
  2035. data: data.x,
  2036. axisLabel: {
  2037. // inside: true,
  2038. rotate: 30,
  2039. padding: [15, 0, 0, 0],
  2040. textStyle: {
  2041. color: "#fff",
  2042. fontSize: 26,
  2043. }
  2044. },
  2045. axisTick: {
  2046. inside: true,
  2047. length: 8 * scale,
  2048. lineStyle: {
  2049. color: color,
  2050. }
  2051. },
  2052. axisLine: {
  2053. lineStyle: {
  2054. color: color,
  2055. }
  2056. },
  2057. splitLine: {
  2058. lineStyle: {
  2059. color: 'rgba(80,224,255,0.3)',
  2060. type: 'dashed'
  2061. }
  2062. }
  2063. }],
  2064. yAxis: [{
  2065. type: 'value',
  2066. axisLabel: {
  2067. // inside: true,
  2068. padding: [0, 15, 0, 0],
  2069. textStyle: {
  2070. color: color,
  2071. fontSize: 20,
  2072. }
  2073. },
  2074. axisTick: {
  2075. lineStyle: {
  2076. color: color,
  2077. }
  2078. },
  2079. axisLine: {
  2080. lineStyle: {
  2081. color: color,
  2082. }
  2083. },
  2084. splitLine: {
  2085. lineStyle: {
  2086. color: '#fff',
  2087. type: 'dashed'
  2088. },
  2089. show: false,
  2090. },
  2091. nameTextStyle: {
  2092. color: "#fff",
  2093. fontSize: 16 * scale,
  2094. padding: [0, 0, 10, 0]
  2095. }
  2096. }],
  2097. series: [{
  2098. name: nameList[0],
  2099. type: 'line',
  2100. itemStyle: {
  2101. normal: {
  2102. color: 'rgba(94,218,255,0.4)',
  2103. }
  2104. },
  2105. label: {
  2106. show: false,
  2107. position: "top",
  2108. align: "center",
  2109. },
  2110. data: singleData
  2111. },
  2112. {
  2113. name: nameList[1],
  2114. type: 'bar',
  2115. barWidth: '15%',
  2116. barGap: '40%',
  2117. label: {
  2118. show: false,
  2119. position: "top",
  2120. align: "center",
  2121. },
  2122. itemStyle: {
  2123. normal: {
  2124. color: '#ffc72b',
  2125. }
  2126. },
  2127. data: multipleData
  2128. }, {
  2129. name: nameList[0],
  2130. type: 'bar',
  2131. barWidth: '15%',
  2132. barGap: '40%',
  2133. itemStyle: {
  2134. normal: {
  2135. color: 'rgba(94,218,255,0.4)',
  2136. }
  2137. },
  2138. label: {
  2139. show: false,
  2140. position: "top",
  2141. align: "center",
  2142. },
  2143. data: singleData
  2144. },]
  2145. };
  2146. chart.setOption(option);
  2147. tools.loopShowTooltip(chart, option, {
  2148. nterval: 2000,
  2149. loopSeries: true,
  2150. });
  2151. },
  2152. initStereoscopic(el, data) {
  2153. let chart = echarts.init(el);
  2154. option = {
  2155. tooltip: {
  2156. show: true,
  2157. trigger: 'axis',
  2158. textStyle: {
  2159. fontSize: 30,
  2160. color: '#A3E2F4'
  2161. },
  2162. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  2163. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  2164. }
  2165. },
  2166. grid: {
  2167. top: 30,
  2168. bottom: 30,
  2169. left: 90,
  2170. right: 90,
  2171. textStyle: {
  2172. color: "#fff"
  2173. }
  2174. },
  2175. legend: {
  2176. icon: 'circle',
  2177. right: '4%',
  2178. top: '4%',
  2179. textStyle: {
  2180. color: '#fff',
  2181. fontSize: 26
  2182. },
  2183. data: ['缓冲池', '待岗池', '共享池']
  2184. },
  2185. calculable: true,
  2186. xAxis: [{
  2187. type: "category",
  2188. axisLine: {
  2189. lineStyle: {
  2190. color: '#fff'
  2191. }
  2192. },
  2193. splitLine: {
  2194. show: false
  2195. },
  2196. axisTick: {
  2197. show: false
  2198. },
  2199. splitArea: {
  2200. show: false
  2201. },
  2202. axisLabel: {
  2203. // inside: true,
  2204. textStyle: {
  2205. color: "#fff",
  2206. fontSize: 26,
  2207. }
  2208. },
  2209. data: data.x,
  2210. }],
  2211. yAxis: [{
  2212. type: "value",
  2213. splitLine: {
  2214. show: false
  2215. },
  2216. axisLine: {
  2217. show: false,
  2218. lineStyle: {
  2219. color: '#fff'
  2220. }
  2221. },
  2222. axisTick: {
  2223. show: false
  2224. },
  2225. axisLabel: {
  2226. textStyle: {
  2227. color: "#fff",
  2228. fontSize: 26,
  2229. }
  2230. },
  2231. splitArea: {
  2232. show: false
  2233. },
  2234. // data: ['中止合同人员', '双创人员', '考核待岗人员'],
  2235. }],
  2236. series: [{
  2237. name: "缓冲池",
  2238. type: "bar",
  2239. stack: "value",
  2240. barMaxWidth: 15,
  2241. barGap: "10%",
  2242. itemStyle: {
  2243. normal: {
  2244. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2245. offset: 0,
  2246. color: '#FF9915'
  2247. }, {
  2248. offset: 1,
  2249. color: 'rgba(245,221,111,0)'
  2250. }]),
  2251. borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2252. offset: 0,
  2253. color: '#FF9915'
  2254. }, {
  2255. offset: 1,
  2256. color: 'rgba(245,221,111,0)'
  2257. }]),
  2258. }
  2259. },
  2260. data: data.y1,
  2261. },
  2262. {
  2263. name: "待岗池",
  2264. type: "bar",
  2265. stack: "value",
  2266. barMaxWidth: 15,
  2267. itemStyle: {
  2268. normal: {
  2269. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2270. offset: 0,
  2271. color: '#9e65ea'
  2272. }, {
  2273. offset: 1,
  2274. color: 'rgba(24,191,207,0)'
  2275. }]),
  2276. borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2277. offset: 0,
  2278. color: '#9e65ea'
  2279. }, {
  2280. offset: 1,
  2281. color: 'rgba(24,191,207,0)'
  2282. }]),
  2283. }
  2284. },
  2285. data: data.y2
  2286. },
  2287. {
  2288. name: "共享池",
  2289. type: "bar",
  2290. stack: "value",
  2291. barMaxWidth: 15,
  2292. itemStyle: {
  2293. normal: {
  2294. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2295. offset: 0,
  2296. color: 'rgba(24,191,207,1)'
  2297. }, {
  2298. offset: 1,
  2299. color: 'rgba(24,191,207,0)'
  2300. }]),
  2301. borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2302. offset: 0,
  2303. color: 'rgba(24,191,207,1)'
  2304. }, {
  2305. offset: 1,
  2306. color: 'rgba(24,191,207,0)'
  2307. }]),
  2308. }
  2309. },
  2310. data: data.y3
  2311. },
  2312. ]
  2313. }
  2314. chart.setOption(option);
  2315. tools.loopShowTooltip(chart, option, {
  2316. nterval: 2000,
  2317. loopSeries: true,
  2318. });
  2319. },
  2320. initHorizontalBar(el) {
  2321. let chart = echarts.init(el);
  2322. var bg =
  2323. 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=';
  2324. var bar =
  2325. 'image://data:image/png;base64,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';
  2326. var data = [10, 15];
  2327. var barWidth = 20;
  2328. var maxNum = 0;
  2329. for (var i = 0; i < data.length; i++) {
  2330. if (data[i] > maxNum) {
  2331. maxNum = data[i];
  2332. }
  2333. }
  2334. option = {
  2335. grid: {
  2336. top: '10%',
  2337. left: '20%',
  2338. right: '15%',
  2339. bottom: '0%',
  2340. },
  2341. xAxis: {
  2342. show: false,
  2343. },
  2344. yAxis: {
  2345. data: ["共享队伍", "共享单位"],
  2346. splitLine: {
  2347. show: false,
  2348. },
  2349. axisLabel: {
  2350. textStyle: { fontSize: 20, color: '#fff' },
  2351. },
  2352. axisLine: {
  2353. show: false,
  2354. },
  2355. axisTick: false,
  2356. },
  2357. series: [
  2358. {
  2359. type: 'pictorialBar',
  2360. barWidth: barWidth,
  2361. zlevel: 2,
  2362. data: data.map(function (item) {
  2363. return {
  2364. value: item,
  2365. symbol: bar,
  2366. };
  2367. }),
  2368. },
  2369. {
  2370. type: 'pictorialBar',
  2371. barWidth: barWidth,
  2372. data: data.map(function (item) {
  2373. return {
  2374. realValue: item,
  2375. value: maxNum,
  2376. symbol: bg,
  2377. };
  2378. }),
  2379. label: {
  2380. show: true,
  2381. position: 'right',
  2382. distance: 150,
  2383. align: "right",
  2384. formatter: function (params) {
  2385. console.log(params);
  2386. if (params.name != "共享队伍") {
  2387. return params.data.realValue + ' 个';
  2388. } else {
  2389. return params.data.realValue + ' 支';
  2390. }
  2391. },
  2392. color: '#fff',
  2393. fontSize: 35,
  2394. },
  2395. },
  2396. ],
  2397. };
  2398. chart.setOption(option);
  2399. tools.loopShowTooltip(chart, option, {
  2400. nterval: 2000,
  2401. loopSeries: true,
  2402. });
  2403. },
  2404. initProvinceChart(el, mapData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]) {
  2405. var data = [
  2406. {
  2407. name: '大同市',
  2408. value: mapData[0].value,
  2409. value2: mapData[0].value
  2410. },
  2411. {
  2412. name: '朔州市',
  2413. value: mapData[1].value,
  2414. value2: mapData[1].value
  2415. },
  2416. {
  2417. name: '忻州市',
  2418. value: mapData[2].value,
  2419. value2: mapData[2].value
  2420. },
  2421. {
  2422. name: '吕梁市',
  2423. value: mapData[3].value,
  2424. value2: mapData[3].value
  2425. },
  2426. {
  2427. name: '太原市',
  2428. value: 1,
  2429. value2: 2
  2430. },
  2431. {
  2432. name: '阳泉市',
  2433. value: mapData[5].value,
  2434. value2: mapData[5].value
  2435. },
  2436. {
  2437. name: '晋中市',
  2438. value: mapData[6].value,
  2439. value2: mapData[6].value
  2440. },
  2441. {
  2442. name: '长治市',
  2443. value: mapData[7].value,
  2444. value2: mapData[7].value
  2445. },
  2446. {
  2447. name: '临汾市',
  2448. value: mapData[8].value,
  2449. value2: mapData[8].value
  2450. },
  2451. {
  2452. name: '晋城市',
  2453. value: mapData[9].value,
  2454. value2: mapData[9].value
  2455. },
  2456. {
  2457. name: '运城市',
  2458. value: mapData[10].value,
  2459. value2: mapData[10].value
  2460. }
  2461. ]
  2462. for (let i = 0; i < data.length; i++) {
  2463. const name = data[i].name;
  2464. const mapDataObj = mapData.find(obj => obj.name === name);
  2465. if (mapDataObj) {
  2466. data[i].value = mapDataObj.value;
  2467. data[i].value2 = mapDataObj.value;
  2468. }
  2469. }
  2470. let formdata = '太原' // 中心点
  2471. this.geoCoordMap = []
  2472. /*获取地图数据*/
  2473. this.mapChart = echarts.init(el)
  2474. echarts.registerMap('shanxi', jsonData)
  2475. var mapFeatures = echarts.getMap('shanxi').geoJson.features
  2476. mapFeatures.forEach(v => {
  2477. // 地区名称
  2478. var name = v.properties.name
  2479. // 地区经纬度
  2480. this.geoCoordMap[name] = v.properties.centroid
  2481. // 按照地图乱序
  2482. // data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
  2483. })
  2484. // 地图数据
  2485. var chinaGeoCoordMap = {
  2486. 太原市: [111.949248, 38.057014],
  2487. 大同市: [113.595259, 40.29031],
  2488. 阳泉市: [113.505474, 37.964652],
  2489. 长治市: [112.813556, 36.791112],
  2490. 晋城市: [112.551274, 35.577553],
  2491. 朔州市: [112.433387, 39.531261],
  2492. 晋中市: [112.936465, 37.696495],
  2493. 运城市: [111.003957, 35.59],
  2494. 忻州市: [112.333538, 38.7769],
  2495. 临汾市: [111.517973, 36.48415],
  2496. 吕梁市: [111.134335, 37.524366],
  2497. }
  2498. // 飞线点数据
  2499. var chinaDatas = [
  2500. [{
  2501. name: '太原市',
  2502. value: 0,
  2503. },],
  2504. [{
  2505. name: '大同市',
  2506. value: 0,
  2507. },],
  2508. [{
  2509. name: '阳泉市',
  2510. value: 0,
  2511. },],
  2512. [{
  2513. name: '长治市',
  2514. value: 0,
  2515. },],
  2516. [{
  2517. name: '晋城市',
  2518. value: 0,
  2519. },],
  2520. [{
  2521. name: '朔州市',
  2522. value: 0,
  2523. },],
  2524. [{
  2525. name: '晋中市',
  2526. value: 9,
  2527. },],
  2528. [{
  2529. name: '运城市',
  2530. value: 0,
  2531. },],
  2532. [{
  2533. name: '忻州市',
  2534. value: 0,
  2535. },],
  2536. [{
  2537. name: '临汾市',
  2538. value: 0,
  2539. },],
  2540. [{
  2541. name: '吕梁市',
  2542. value: 0,
  2543. },],
  2544. ]
  2545. var convertData = function (data) {
  2546. var res = []
  2547. for (var i = 0; i < data.length; i++) {
  2548. var dataItem = data[i]
  2549. var fromCoord = chinaGeoCoordMap[dataItem[0].name]
  2550. var toCoord = [112.549248, 37.857014] //中心点地理坐标
  2551. if (fromCoord && toCoord) {
  2552. res.push([{
  2553. // 飞线从哪里出发
  2554. coord: toCoord,
  2555. },
  2556. {
  2557. // 飞线去往哪里
  2558. coord: fromCoord,
  2559. value: dataItem[0].value,
  2560. },
  2561. ])
  2562. }
  2563. }
  2564. return res
  2565. }
  2566. var series = [];
  2567. [
  2568. [formdata, chinaDatas]
  2569. ].forEach(function (item) {
  2570. series.push({
  2571. type: 'lines',
  2572. name: "模拟数据",
  2573. coordinateSystem: 'geo',
  2574. zlevel: 2,
  2575. effect: {
  2576. show: true,
  2577. period: 5, //值越小 速度越快
  2578. trailLength: 0.3, // 0-1 值越大,越拖
  2579. symbol: 'pin', //箭头图标
  2580. symbolSize: 8, //图标大小
  2581. color: "#E6C50B"
  2582. },
  2583. lineStyle: {
  2584. normal: {
  2585. show: true,
  2586. type: 'dashed',
  2587. width: 2, //尾迹线条宽度
  2588. opacity: 0.1, //尾迹线条透明度
  2589. curveness: 0.3, //尾迹线条曲直度
  2590. color: '#E6C50B', // 飞线颜色
  2591. },
  2592. },
  2593. data: convertData(item[1]),
  2594. }, {
  2595. type: 'effectScatter',
  2596. coordinateSystem: 'geo',
  2597. zlevel: 2,
  2598. rippleEffect: {
  2599. //涟漪特效
  2600. period: 10, //动画时间,值越小速度越快
  2601. brushType: 'stroke', //波纹绘制方式 stroke, fill
  2602. scale: 10, //波纹圆环最大限制,值越大波纹越大
  2603. color: '#E6C50B',
  2604. },
  2605. itemStyle: {
  2606. normal: {
  2607. color: '#E6C50B',
  2608. shadowBlur: 10,
  2609. shadowColor: '#E6C50B',
  2610. },
  2611. },
  2612. label: {
  2613. normal: {
  2614. formatter: '{b}',
  2615. position: 'right',
  2616. offset: [15, 0],
  2617. color: '#fff',
  2618. show: true
  2619. },
  2620. },
  2621. symbol: 'circle',
  2622. symbolSize: 9,
  2623. data: item[1].map(function (dataItem) {
  2624. return {
  2625. itemStyle: {
  2626. color: '#fff' // 修改标点的颜色
  2627. },
  2628. //在这里定义你所要展示的数据
  2629. name: dataItem[0].name,
  2630. value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
  2631. }
  2632. }),
  2633. })
  2634. })
  2635. let effectScatterData = [
  2636. {
  2637. itemStyle: {
  2638. color: "#fff"
  2639. },
  2640. name: "太原市",
  2641. value: [111.949248, 37.957014, 534, "山西焦煤机关",],
  2642. },
  2643. {
  2644. itemStyle: {
  2645. color: "#fff"
  2646. },
  2647. name: "太原市",
  2648. value: [111.949248, 37.957014, 65704, "西山煤电",]
  2649. },
  2650. {
  2651. itemStyle: {
  2652. color: "#fff"
  2653. },
  2654. name: "太原市",
  2655. value: [111.949248, 37.957014, 14972, "山煤国际",]
  2656. },
  2657. {
  2658. itemStyle: {
  2659. color: "#fff"
  2660. },
  2661. name: "太原市",
  2662. value: [111.949248, 37.957014, 91, "物资装备公司",]
  2663. },
  2664. {
  2665. itemStyle: {
  2666. color: "#fff"
  2667. },
  2668. name: "太原市",
  2669. value: [111.949248, 37.957014, 111, "金土地公司",]
  2670. },
  2671. {
  2672. itemStyle: {
  2673. color: "#fff"
  2674. },
  2675. name: "太原市",
  2676. value: [111.949248, 37.957014, 835, "销售公司",]
  2677. },
  2678. {
  2679. itemStyle: {
  2680. color: "#fff"
  2681. },
  2682. name: "太原市",
  2683. value: [111.949248, 37.957014, 117, "国发公司",]
  2684. },
  2685. {
  2686. itemStyle: {
  2687. color: "#fff"
  2688. },
  2689. name: "太原市",
  2690. value: [111.949248, 37.957014, 582, "投资公司",]
  2691. },
  2692. {
  2693. itemStyle: {
  2694. color: "#fff"
  2695. },
  2696. name: "太原市",
  2697. value: [111.949248, 37.957014, 117, "人力资源公司",]
  2698. },
  2699. {
  2700. itemStyle: {
  2701. color: "#fff"
  2702. },
  2703. name: "太原市",
  2704. value: [111.949248, 37.957014, 10, "金融资本公司",]
  2705. },
  2706. {
  2707. itemStyle: {
  2708. color: "#fff"
  2709. },
  2710. name: "太原市",
  2711. value: [111.949248, 37.957014, 843, "民爆集团",]
  2712. },
  2713. {
  2714. itemStyle: {
  2715. color: "#fff"
  2716. },
  2717. name: "太原市",
  2718. value: [111.949248, 37.957014, 10, "云数据公司",]
  2719. },
  2720. {
  2721. itemStyle: {
  2722. color: "#fff"
  2723. },
  2724. name: "太原市",
  2725. value: [111.949248, 37.957014, 218, "焦煤置业",]
  2726. },
  2727. {
  2728. itemStyle: {
  2729. color: "#fff"
  2730. },
  2731. name: "太原市",
  2732. value: [111.949248, 37.957014, 47, "新能源公司",]
  2733. },
  2734. {
  2735. itemStyle: {
  2736. color: "#fff"
  2737. },
  2738. name: "太原市",
  2739. value: [111.949248, 37.957014, 13, "油品公司",]
  2740. },
  2741. {
  2742. itemStyle: {
  2743. color: "#fff"
  2744. },
  2745. name: "太原市",
  2746. value: [111.949248, 37.957014, 29, "低碳公司",]
  2747. },
  2748. {
  2749. itemStyle: {
  2750. color: "#fff"
  2751. },
  2752. name: "太原市",
  2753. value: [111.949248, 37.957014, 67, "交易中心",]
  2754. },
  2755. {
  2756. itemStyle: {
  2757. color: "#fff"
  2758. },
  2759. name: "太原市",
  2760. value: [111.949248, 37.957014, 48, "招标公司",]
  2761. },
  2762. {
  2763. itemStyle: {
  2764. color: "#fff"
  2765. },
  2766. name: "晋中市",
  2767. value: [112.936465, 37.696495, 49047, "汾西矿业",]
  2768. },
  2769. {
  2770. itemStyle: {
  2771. color: "#fff"
  2772. },
  2773. name: "临汾市",
  2774. value: [111.517973, 35.88415, 53563, "霍州煤电",]
  2775. },
  2776. {
  2777. itemStyle: {
  2778. color: "#fff"
  2779. },
  2780. name: "临汾市",
  2781. value: [111.517973, 35.88415, 9508, "山西焦化",]
  2782. },
  2783. {
  2784. itemStyle: {
  2785. color: "#fff"
  2786. },
  2787. name: "吕梁市",
  2788. value: [111.134335, 37.524366, 9960, "华晋焦煤",]
  2789. },
  2790. ]
  2791. series[1].data.forEach(item => {
  2792. item.img = 'image://https://madeapie.com/asset/get/s/data-1619059838735-QE9mBZmhh.png'
  2793. })
  2794. let option = {
  2795. tooltip: {
  2796. trigger: "item",
  2797. padding: 15,
  2798. backgroundColor: 'rgba(0, 0, 0, 0)',
  2799. enterable: true,
  2800. transitionDuration: 1,
  2801. formatter: (params, ticket, callback) => {
  2802. // 清空所有轮播
  2803. for (var k in this.geoCoordMap) {
  2804. this.mapChart.dispatchAction({
  2805. // type: 'geoUnSelect',
  2806. type: 'downplay',
  2807. name: k,
  2808. })
  2809. }
  2810. // 如果鼠标滑动到线线上面,则返回空
  2811. this.mapChart.dispatchAction({
  2812. // type: 'geoSelect',
  2813. type: 'highlight',
  2814. name: params.name,
  2815. })
  2816. if (params.componentSubType == 'lines') {
  2817. return
  2818. }
  2819. if (params.componentSubType == 'effectScatter') {
  2820. let tipHtml = `
  2821. <div class="tooltip-cont">
  2822. <p>区域:<span>${params.name}</span></p>
  2823. <p>二级单位:<span>${params.value[3]}</span></p>
  2824. <p>员工总数:<span>${params.value[2]}</span></p>
  2825. </div>`
  2826. callback(ticket, tipHtml)
  2827. return tipHtml
  2828. }
  2829. if (params.componentSubType == 'map') {
  2830. return
  2831. }
  2832. },
  2833. },
  2834. geo: {
  2835. show: true,
  2836. map: 'shanxi',
  2837. layoutCenter: ['50.5%', '52%'], //地图位置
  2838. layoutSize: '100%',
  2839. zoom: 1.1, //当前视角的缩放比例
  2840. // roam: true, //是否开启平游或缩放
  2841. scaleLimit: { //滚轮缩放的极限控制
  2842. min: 1,
  2843. max: 2
  2844. },
  2845. roam: false,
  2846. itemStyle: {
  2847. normal: {
  2848. areaColor: '#25B9E9',
  2849. shadowColor: '#25B9E9',
  2850. borderWidth: 6, //设置外层边框
  2851. borderColor: '#00FFFF',
  2852. shadowOffsetX: 5,
  2853. shadowOffsetY: 5,
  2854. shadowBlur: 5,
  2855. },
  2856. emphasis: {
  2857. areaColor: '#013d95',
  2858. borderColor: '#e7e1a0',
  2859. borderWidth: 4, //设置外层边框
  2860. },
  2861. },
  2862. },
  2863. series: [
  2864. // 区域散点图
  2865. {
  2866. type: 'effectScatter',
  2867. coordinateSystem: 'geo',
  2868. zlevel: 2,
  2869. rippleEffect: {
  2870. //涟漪特效
  2871. period: 2, //动画时间,值越小速度越快
  2872. brushType: 'stroke', //波纹绘制方式 stroke, fill
  2873. scale: 8, //波纹圆环最大限制,值越大波纹越大
  2874. color: '#d4bc1d',
  2875. },
  2876. emphasis: {
  2877. itemStyle: {
  2878. color: '#d4bc1d'
  2879. }
  2880. },
  2881. label: {
  2882. show: true,
  2883. normal: {
  2884. show: false
  2885. },
  2886. },
  2887. symbol: 'circle',
  2888. symbolSize: 0,
  2889. data: effectScatterData,
  2890. // data: series[1].data,
  2891. },
  2892. {
  2893. type: 'effectScatter',
  2894. coordinateSystem: 'geo',
  2895. zlevel: 2,
  2896. rippleEffect: {
  2897. //涟漪特效
  2898. period: 2, //动画时间,值越小速度越快
  2899. brushType: 'stroke', //波纹绘制方式 stroke, fill
  2900. scale: 8, //波纹圆环最大限制,值越大波纹越大
  2901. color: '#d4bc1d',
  2902. },
  2903. emphasis: {
  2904. itemStyle: {
  2905. color: '#d4bc1d'
  2906. }
  2907. },
  2908. label: {
  2909. show: true,
  2910. normal: {
  2911. show: false
  2912. },
  2913. },
  2914. symbol: 'circle',
  2915. symbolSize: 30,
  2916. data: series[1].data,
  2917. },
  2918. // {
  2919. // type: 'scatter',
  2920. // coordinateSystem: 'geo',
  2921. // itemStyle: {
  2922. // color: '#f00',
  2923. // },
  2924. // symbol: function (value, params) {
  2925. // return params.data.img;
  2926. // },
  2927. // symbolSize: [96, 123],
  2928. // symbolOffset: [0, -80],
  2929. // z: 9999,
  2930. // data: series[1].data,
  2931. // },
  2932. // 地图数据
  2933. {
  2934. type: 'map',
  2935. mapType: 'shanxi',
  2936. aspectScale: 0.75,
  2937. layoutCenter: ["50%", "50%"], //地图位置
  2938. layoutSize: '100%',
  2939. zoom: 1.1, //当前视角的缩放比例
  2940. // roam: true, //是否开启平游或缩放
  2941. scaleLimit: { //滚轮缩放的极限控制
  2942. min: 1,
  2943. max: 2
  2944. },
  2945. label: {
  2946. normal: {
  2947. show: true,
  2948. position: 'right',
  2949. formatter: '{b}',
  2950. color: '#fff',
  2951. fontSize: 32,
  2952. fontWeight: "bolder"
  2953. }
  2954. },
  2955. itemStyle: {
  2956. normal: {
  2957. areaColor: '#1C4FBB',
  2958. borderColor: 'rgba(5,216,252,0.7)',
  2959. borderWidth: 6,//隐藏省界线
  2960. shadowColor: 'rgba(5,216,252,0.7)',
  2961. shadowBlur: 90
  2962. },
  2963. emphasis: {
  2964. areaColor: 'rgba(25,79,183,0.6)',
  2965. borderColor: '#d4bc1d',
  2966. borderWidth: 8, //设置外层边框
  2967. label: {
  2968. color: "#fff"
  2969. }
  2970. }
  2971. },
  2972. data: data,
  2973. },
  2974. // 线 和 点
  2975. {
  2976. type: 'lines',
  2977. zlevel: 1, //设置这个才会有轨迹线的小尾巴
  2978. effect: {
  2979. show: true,
  2980. period: 3,
  2981. trailLength: 0.1,
  2982. color: '#d4bc1d', //流动点颜色
  2983. symbol: 'arrow',
  2984. symbolSize: 15
  2985. },
  2986. lineStyle: {
  2987. color: '#d4bc1d', //线条颜色
  2988. show: true,
  2989. type: "dashed",
  2990. width: 5,
  2991. opacity: 0.4,
  2992. curveness: 0.2
  2993. },
  2994. data: series[0].data
  2995. },
  2996. ],
  2997. }
  2998. let that = this
  2999. this.mapChart.on('click', function (params) {
  3000. if (params.name == '太原市') {
  3001. that.showChartLTipDouble('太原市')
  3002. }
  3003. })
  3004. tools.loopShowTooltip(this.mapChart, option, {
  3005. interval: 2000,
  3006. loopSeries: false,
  3007. });
  3008. this.mapChart.setOption(option)
  3009. },
  3010. initTwoBarEcharts(el, data) {
  3011. this.twoBar = echarts.init(el);
  3012. option = {
  3013. tooltip: {
  3014. show: true,
  3015. trigger: 'axis',
  3016. textStyle: {
  3017. fontSize: 30,
  3018. color: '#A3E2F4'
  3019. },
  3020. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  3021. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  3022. },
  3023. formatter: "{c}"
  3024. },
  3025. grid: {
  3026. top: '15%',
  3027. right: '3%',
  3028. left: '14%',
  3029. bottom: '15%'
  3030. },
  3031. xAxis: [{
  3032. type: 'category',
  3033. data: data.x,
  3034. axisLine: {
  3035. lineStyle: {
  3036. color: 'rgba(255,255,255,0.12)'
  3037. }
  3038. },
  3039. axisLabel: {
  3040. color: '#e2e9ff',
  3041. textStyle: {
  3042. fontSize: 26
  3043. },
  3044. },
  3045. }],
  3046. yAxis: [{
  3047. name: '',
  3048. axisLabel: {
  3049. formatter: '{value}',
  3050. color: '#e2e9ff',
  3051. textStyle: {
  3052. fontSize: 20,
  3053. },
  3054. },
  3055. axisLine: {
  3056. show: false,
  3057. lineStyle: {
  3058. color: 'rgba(255,255,255,1)'
  3059. }
  3060. },
  3061. splitLine: {
  3062. lineStyle: {
  3063. color: 'rgba(255,255,255,0.12)'
  3064. }
  3065. }
  3066. }],
  3067. series: [{
  3068. type: 'bar',
  3069. data: data.y,
  3070. barWidth: '20px',
  3071. itemStyle: {
  3072. normal: {
  3073. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  3074. offset: 1,
  3075. color: "#02355C",
  3076. }, //柱图渐变色
  3077. {
  3078. offset: 0,
  3079. color: "#45DAD1",
  3080. },], false),
  3081. shadowColor: 'rgba(0,160,221,1)',
  3082. shadowBlur: 4,
  3083. }
  3084. },
  3085. }]
  3086. };
  3087. this.twoBar.setOption(option);
  3088. tools.loopShowTooltip(this.twoBar, option, {
  3089. nterval: 2000,
  3090. loopSeries: true,
  3091. });
  3092. },
  3093. initEchartsBar(el, data) {
  3094. let chart = echarts.init(el);
  3095. let xLabel = data.x
  3096. option = {
  3097. grid: {
  3098. top: "15%",
  3099. bottom: "15%",//也可设置left和right设置距离来控制图表的大小
  3100. left: "1%",
  3101. right: "1%"
  3102. },
  3103. tooltip: {
  3104. show: true,
  3105. trigger: 'axis',
  3106. textStyle: {
  3107. fontSize: 30,
  3108. color: '#A3E2F4'
  3109. },
  3110. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  3111. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  3112. },
  3113. formatter: '{c0}',
  3114. },
  3115. xAxis: {
  3116. data: xLabel,
  3117. axisLine: {
  3118. show: true, //隐藏X轴轴线
  3119. lineStyle: {
  3120. color: '#11417a'
  3121. }
  3122. },
  3123. axisTick: {
  3124. show: false //隐藏X轴刻度
  3125. },
  3126. axisLabel: {
  3127. show: true,
  3128. margin: 14,
  3129. textStyle: {
  3130. fontSize: 26,
  3131. color: "#fff" //X轴文字颜色
  3132. }
  3133. },
  3134. },
  3135. yAxis: [
  3136. {
  3137. type: "value",
  3138. gridIndex: 0,
  3139. // splitNumber: 4,
  3140. splitLine: {
  3141. show: false,
  3142. lineStyle: {
  3143. color: '#A3C0DF',
  3144. width: 1
  3145. },
  3146. },
  3147. axisTick: {
  3148. show: false
  3149. },
  3150. axisLine: {
  3151. show: false,
  3152. lineStyle: {
  3153. color: '#A3C0DF'
  3154. }
  3155. },
  3156. axisLabel: {
  3157. show: true,
  3158. margin: 14,
  3159. fontSize: 20,
  3160. textStyle: {
  3161. color: "#fff" //X轴文字颜色
  3162. }
  3163. },
  3164. },
  3165. ],
  3166. series: [
  3167. {
  3168. name: "实习实训",
  3169. type: "bar",
  3170. barWidth: 20,
  3171. itemStyle: {
  3172. normal: {
  3173. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  3174. offset: 0,
  3175. color: "#07ecd9"
  3176. },
  3177. {
  3178. offset: 1,
  3179. color: "#034881"
  3180. }
  3181. ])
  3182. }
  3183. },
  3184. data: data.y,
  3185. z: 10,
  3186. zlevel: 0,
  3187. "label": {
  3188. "show": true,
  3189. "position": "top",
  3190. "distance": 10,
  3191. fontSize: 26,
  3192. "color": "#01fff4"
  3193. }
  3194. },
  3195. {
  3196. // 分隔
  3197. type: "pictorialBar",
  3198. itemStyle: {
  3199. normal: {
  3200. color: "#0F375F"
  3201. }
  3202. },
  3203. symbolRepeat: "fixed",
  3204. symbolMargin: 6,
  3205. symbol: "rect",
  3206. symbolClip: true,
  3207. symbolSize: [20, 2],
  3208. symbolPosition: "start",
  3209. symbolOffset: [0, -1],
  3210. // symbolBoundingData: this.total,
  3211. data: data.y,
  3212. width: 25,
  3213. z: 0,
  3214. zlevel: 1,
  3215. },
  3216. ]
  3217. };
  3218. chart.setOption(option);
  3219. tools.loopShowTooltip(chart, option, {
  3220. nterval: 2000,
  3221. loopSeries: true,
  3222. });
  3223. },
  3224. initEchartStack(el, data) {
  3225. let that = this;
  3226. this.mobilizeFL = echarts.init(el);
  3227. option = {
  3228. tooltip: {
  3229. show: true,
  3230. trigger: 'axis',
  3231. textStyle: {
  3232. fontSize: 30,
  3233. color: '#A3E2F4'
  3234. },
  3235. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  3236. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  3237. }
  3238. },
  3239. grid: {
  3240. top: "10%",
  3241. bottom: "10%",//也可设置left和right设置距离来控制图表的大小
  3242. left: "10%",
  3243. right: "1%"
  3244. },
  3245. legend: {
  3246. data: ["入职", "离职", "内部调动", "跨二级调出", "跨二级调入"],
  3247. align: 'left',
  3248. itemGap: 50,
  3249. right: '1%',
  3250. y: '1%',
  3251. icon: 'rect',
  3252. textStyle: {
  3253. color: "#fff",
  3254. fontSize: 26
  3255. }
  3256. },
  3257. xAxis: {
  3258. axisTick: {
  3259. show: false,
  3260. },
  3261. axisLine: {
  3262. show: false,
  3263. },
  3264. axisLabel: {
  3265. show: true,
  3266. margin: 14,
  3267. fontSize: 26,
  3268. textStyle: {
  3269. color: "#fff" //X轴文字颜色
  3270. }
  3271. },
  3272. data: data.x,
  3273. },
  3274. yAxis: {
  3275. type: "value",
  3276. gridIndex: 0,
  3277. // splitNumber: 4,
  3278. splitLine: {
  3279. show: false,
  3280. lineStyle: {
  3281. color: '#A3C0DF',
  3282. width: 1
  3283. },
  3284. },
  3285. axisTick: {
  3286. show: false
  3287. },
  3288. axisLine: {
  3289. show: false,
  3290. lineStyle: {
  3291. color: '#A3C0DF'
  3292. }
  3293. },
  3294. axisLabel: {
  3295. show: true,
  3296. margin: 14,
  3297. fontSize: 20,
  3298. textStyle: {
  3299. color: "#fff" //X轴文字颜色
  3300. }
  3301. },
  3302. },
  3303. series: [
  3304. {
  3305. type: 'bar',
  3306. name: "入职",
  3307. stack: 'total',
  3308. barWidth: 26,
  3309. itemStyle: {
  3310. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  3311. {
  3312. offset: 0,
  3313. color: '#91231F',
  3314. },
  3315. {
  3316. offset: 1,
  3317. color: '#F98784',
  3318. },
  3319. ]),
  3320. },
  3321. data: data.y1,
  3322. },
  3323. {
  3324. type: 'bar',
  3325. stack: 'total',
  3326. name: "内部调动",
  3327. barWidth: 26,
  3328. itemStyle: {
  3329. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  3330. {
  3331. offset: 0,
  3332. color: '#172A45',
  3333. },
  3334. {
  3335. offset: 1,
  3336. color: '#FF9915',
  3337. },
  3338. ]),
  3339. },
  3340. data: data.y2,
  3341. },
  3342. {
  3343. type: 'bar',
  3344. name: "跨二级调出",
  3345. stack: 'total',
  3346. barWidth: 26,
  3347. itemStyle: {
  3348. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  3349. {
  3350. offset: 0,
  3351. color: '#07806E',
  3352. },
  3353. {
  3354. offset: 1,
  3355. color: '#79FFEB',
  3356. },
  3357. ]),
  3358. },
  3359. data: data.y3,
  3360. },
  3361. {
  3362. type: 'bar',
  3363. stack: 'total',
  3364. name: "跨二级调入",
  3365. barWidth: 26,
  3366. itemStyle: {
  3367. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  3368. {
  3369. offset: 0,
  3370. color: '#9e65ea',
  3371. },
  3372. {
  3373. offset: 1,
  3374. color: '#514ddd',
  3375. },
  3376. ]),
  3377. },
  3378. data: data.y4,
  3379. },
  3380. {
  3381. type: 'bar',
  3382. name: "离职",
  3383. stack: 'total',
  3384. barWidth: 26,
  3385. itemStyle: {
  3386. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  3387. {
  3388. offset: 0,
  3389. color: '#69C0FF',
  3390. },
  3391. {
  3392. offset: 1,
  3393. color: '#1a98f8',
  3394. },
  3395. ]),
  3396. },
  3397. data: data.y5,
  3398. },
  3399. ],
  3400. };
  3401. that.mobilizeFL.setOption(option);
  3402. tools.loopShowTooltip(that.mobilizeFL, option, {
  3403. nterval: 2000,
  3404. loopSeries: true,
  3405. });
  3406. },
  3407. handleWarning() {
  3408. this.isShowMark = true
  3409. this.salaryFlag = true
  3410. this.pdfFlag = false
  3411. },
  3412. handleMark() {
  3413. this.isShowMark = false
  3414. this.salaryFlag = false
  3415. this.pdfFlag = false
  3416. },
  3417. handleChange() {
  3418. if (!this.changeFlag) {
  3419. this.config2 = {
  3420. waitTime: 2000,
  3421. header: ["单位名称", "算薪进度", "算薪周期", ""],
  3422. rowNum: 4,
  3423. data: [
  3424. ["西山煤电铁路公司", '未参与算薪', '2023/6'],
  3425. ["西山煤电铁路公司", '未参与算薪', '2023/6'],
  3426. ["西山煤电斜沟矿", '未参与算薪', '2023/6'],
  3427. ["汾西矿业曙光煤矿", '未参与算薪', '2023/6'],
  3428. ["山煤国际霍尔辛赫", '未参与算薪', '2023/6'],
  3429. ["霍州煤电-辛置煤矿", '未参与算薪', '2023/6'],
  3430. ["华晋焦煤沙曲选煤厂", '未参与算薪', '2023/6'],
  3431. ],
  3432. align: ["center", "center", "center", "center", "center"],
  3433. headerBGC: "#153A62",
  3434. oddRowBGC: "#061F42",
  3435. evenRowBGC: "#0C284A",
  3436. }
  3437. this.changeFlag = true
  3438. } else {
  3439. this.config2 = {
  3440. waitTime: 2000,
  3441. header: ["单位名称", "已算薪组织", "未算薪组织", "算薪进度百分比", ""],
  3442. rowNum: 4,
  3443. data: [
  3444. ["山焦西山", '290', '46', '86%'],
  3445. ["山焦汾西", '10', '38', '21%'],
  3446. ["山焦霍州", '314', '3', '99%'],
  3447. ["山焦山煤", '16', '35', '31%'],
  3448. ["山焦华晋", '7', '1', '87%'],
  3449. ],
  3450. align: ["center", "center", "center", "center", "center"],
  3451. headerBGC: "#153A62",
  3452. oddRowBGC: "#061F42",
  3453. evenRowBGC: "#0C284A",
  3454. }
  3455. this.changeFlag = false
  3456. }
  3457. },
  3458. handleORG() {
  3459. this.isShowMark = true
  3460. this.salaryFlag = false
  3461. this.pdfFlag = true
  3462. },
  3463. },
  3464. })