newIndex.js 113 KB

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