newIndex.js 103 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252
  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. configLast: {
  46. waitTime: 2000,
  47. header: ["学校名称", "成果项目", ''],
  48. rowNum: 4,
  49. data: [
  50. ["山西大学", '<span class=""><span class="listText">煤矸石煤泥清洁高效利用关键技术与应用</span><span class="redImg"></span></span>'],
  51. ["太原理工大学", '<span class="green"><span class="listText">智能通风与灾害管控</span><span class="greedImg"></span></span>'],
  52. ["太原理工大学", '<span class="green"><span class="listText">焦炉煤气整合技术</span><span class="greedImg"></span></span>'],
  53. ["太原理工大学", '<span class="green"><span class="listText">煤焦化副产品精细</span><span class="greedImg"></span></span>'],
  54. ["河北理工大学", '<span class="green"><span class="listText">瓦斯高效抽采关键技术与装备技术</span><span class="greedImg"></span></span>'],
  55. ],
  56. align: ["center", "center"],
  57. headerBGC: "#153A62",
  58. oddRowBGC: "#061F42",
  59. evenRowBGC: "#0C284A",
  60. },
  61. configOrg: {
  62. waitTime: 2000,
  63. rowNum: 1,
  64. data: [
  65. ["西铭矿选煤厂", '组织信息变更', '2023-05-19', '山焦西山'],
  66. ["房城建安有限公司", '组织信息变更', '2023-04-03', '山焦西山'],
  67. ["兴盛园煤业", '组织信息变更', '2023-04-03', '山焦霍州'],
  68. ["万家庄煤业", '组织信息变更', '2023-06-08', '山焦霍州'],
  69. ["山焦西山", '组织更名', '2023-07-11', '山焦西山'],
  70. ],
  71. align: ["center", "center", "center", "center", "center"],
  72. oddRowBGC: "#3B9DEE",
  73. evenRowBGC: "#1E5389",
  74. },
  75. configChange: {
  76. waitTime: 2000,
  77. header: ["姓名", "调出单位", "调入单位", "调动时间", '变动状态', ""],
  78. rowNum: 4,
  79. data: [
  80. ["王志军", '山焦霍州', '山焦人力', '2023-01-01', '调动完成'],
  81. ["胡国继", '山焦霍州', '山西焦煤集团招标有限公司', '2023-01-01', '调动完成'],
  82. ["解红梅", '公共事业发展分公司', '山焦霍州', '2023-01-01', '调动完成'],
  83. ["段树成", '山焦华晋', '山焦机电', '2023-01-01', '调动完成'],
  84. ["任勇华", '山焦西山', '山焦机电', '2023-01-01', '调动中'],
  85. ["任全祥", '山焦山煤', '山焦机电', '2023-01-01', '调动中'],
  86. ["宋旭海", '山焦华晋', '山焦销售', '2023-01-01', '调动中'],
  87. ["卫志毅", '汾西矿业集团公司', '山焦机电', '2023-01-01', '调动中'],
  88. ],
  89. align: ["center", "center", "center", "center", "center"],
  90. headerBGC: "#153A62",
  91. oddRowBGC: "#061F42",
  92. evenRowBGC: "#0C284A",
  93. },
  94. configMark:{
  95. waitTime: 2000,
  96. header: ["单位名称", "人员数量", "月份", "预警项", ""],
  97. rowNum: 4,
  98. data: [
  99. ["<span class='red'>西山煤电</span>", "<span class='red'>71</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  100. ["<span class='red'>汾西矿业</span>", "<span class='red'>1896</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  101. ["<span class='red'>霍州煤电</span>", "<span class='red'>847</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  102. ["<span class='red'>山煤国际</span>", "<span class='red'>514</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  103. ["<span class='red'>华晋焦煤</span>", "<span class='red'>13</span>", "<span class='red'>3月</span>", "<span class='red'>薪资低于4000元</span>"],
  104. ],
  105. align: ["center", "center", "center", "center", "center"],
  106. headerBGC: "#153A62",
  107. oddRowBGC: "#061F42",
  108. evenRowBGC: "#0C284A",
  109. },
  110. config2: {
  111. waitTime: 2000,
  112. header: ["单位名称", "已算薪组织", "未算薪组织", "算薪进度百分比", ""],
  113. rowNum: 4,
  114. data: [
  115. ["山焦西山", '290', '46', '86%'],
  116. ["山焦汾西", '10', '38', '21%'],
  117. ["山焦霍州", '314', '3', '99%'],
  118. ["山焦山煤", '16', '35', '31%'],
  119. ["山焦华晋", '7', '1', '87%'],
  120. ],
  121. align: ["center", "center", "center", "center", "center"],
  122. headerBGC: "#153A62",
  123. oddRowBGC: "#061F42",
  124. evenRowBGC: "#0C284A",
  125. },
  126. salaryFlag: false,
  127. pdfFlag: true,
  128. eChartsBig: undefined,
  129. LineChart: undefined,
  130. LineElse: undefined,
  131. time2: undefined,
  132. leftEcharts5: undefined,
  133. mobilizeFL: undefined,
  134. industry: {
  135. x: ["矿井", "选煤厂", "火电厂", "清洁能源厂", "焦化厂"],
  136. y: [151, 50, 6, 32, 4]
  137. },
  138. twoBar: undefined,
  139. echartTwoList: {
  140. x: ["回采", "掘进", "开拓工人", "运输", "机电", "通风安全", "安拆", "露天", "其他"],
  141. y: [11556, 15008, 6073, 10562, 8492, 10776, 1553, 119, 3668]
  142. },
  143. echartTwoList2: {
  144. x: ["煤炭洗选人员", "焦炭化工人员", "民爆人员", "金融人员", "煤炭销售人员"],
  145. y: [10115, 6327, 2301, 104, 2604]
  146. },
  147. echartsTwoBar2: {
  148. y: ["4940", "18170", "51812", "38430", '18329', '17745', '31827'],
  149. x: ["5年以下", "6-10年", "11-15年", "16-20年", '21-25年', '26-30年', '30年以上']
  150. },
  151. echartsTwoBar1: {
  152. y: ["15990", "38872", "35952", "27063", '31424', '26099', '11401'],
  153. x: ["30岁以下", "31-35岁", "36-40岁", "41-45岁", '46-50岁', '51-55岁', '55岁以上']
  154. },
  155. organizationList: {
  156. x: ["集团机构数", "共享中心数", "事业部数", "二级组织数", "三级组织数", "四级组织数"],
  157. y: [18, 12, 5, 22, 316, 496]
  158. },
  159. twoIndex: 1,
  160. time2: 1,
  161. time3: 1,
  162. time4: 1,
  163. isShowMark: false,
  164. changeFlag: false,
  165. userFlag: true,
  166. salaryIndex: 1,
  167. sx: [],
  168. xy: [],
  169. fx: [],
  170. fy1: [],
  171. fy2: [],
  172. fy3: [],
  173. fy4: [],
  174. }
  175. },
  176. mounted() {
  177. this.$nextTick(() => {
  178. this.sx = spArr(salaryList.x, 5)
  179. this.sy = spArr(salaryList.y, 5)
  180. this.fx = spArr(mobilizeList.x, 5)
  181. this.fy1 = spArr(mobilizeList.y1, 5)
  182. this.fy2 = spArr(mobilizeList.y2, 5)
  183. this.fy3 = spArr(mobilizeList.y3, 5)
  184. this.fy4 = spArr(mobilizeList.y4, 5)
  185. console.log(this.fx);
  186. let organization = this.$refs.organization
  187. this.initOrganization(organization, "", this.organizationList)
  188. let mobilize = this.$refs.mobilize
  189. this.initEchartStack(mobilize,{x: this.fx[0],y1: this.fy1[0],y2: this.fy2[0],y3: this.fy3[0],y4: this.fy4[0]})
  190. let industry = this.$refs.industry
  191. this.initOrganizationElse(industry, "", this.industry, "")
  192. let sequence = this.$refs.sequence
  193. this.initBarEcharts(sequence, { x: ["管理序列", "技术序列", "操作序列"], y1: [34242, 18547, 134012], y2: [28993, 19411, 126807] }, ["当前数", "同期数"])
  194. let serviceAge = this.$refs.serviceAge
  195. this.initLineEcharts(serviceAge, this.echartsTwoBar1)
  196. let level = this.$refs.level
  197. this.initLineElseEcharts(level, levelList)
  198. let initChartR1 = this.$refs.initChartR1
  199. this.initChartR1(initChartR1)
  200. let initChartsBig = this.$refs.initChartsBig
  201. this.initChartsBig(initChartsBig)
  202. let leftEnd = this.$refs.leftEnd
  203. this.initBarEchartsElse(leftEnd, leftEndList, ["累计平均工资", "同期累计平均工资"])
  204. let echarts90 = this.$refs.echarts90
  205. this.initLineElseEchartsR(echarts90, { x: this.sx[0], y: this.sy[0] })
  206. let student = this.$refs.student
  207. this.initEchartsBar(student, schoolList,)
  208. let works = this.$refs.works
  209. this.initBarCharts(works, worksList)
  210. let efficiency = this.$refs.efficiency
  211. this.initBarChartsElse(efficiency, efficiencyList, "吨/工", { name: "行业线", value: 8.2 })
  212. let whole = this.$refs.whole
  213. this.initBarChartsElse(whole, wholeList, "吨/人", { name: "标杆矿井线", value: 1800 })
  214. let buffer = this.$refs.buffer
  215. this.initStereoscopic(buffer)
  216. let share = this.$refs.share
  217. this.initHorizontalBar(share)
  218. let el = this.$refs.container
  219. this.initProvinceChart(el)
  220. let echartTwo = this.$refs.echartTwo
  221. this.initTwoBarEcharts(echartTwo, this.echartTwoList)
  222. this.timeNs()
  223. this.timePractice()
  224. this.timeSy()
  225. })
  226. },
  227. methods: {
  228. // 针对学历结构的定时器
  229. timeNs() {
  230. let that = this;
  231. this.time2 = setInterval(() => {
  232. this.time2 && clearInterval(this.time2);
  233. this.timeNs();
  234. that.leftEcharts5.dispose();
  235. let initChartsBig = that.$refs.initChartsBig
  236. that.initChartsBig(initChartsBig)
  237. }, 15000);
  238. },
  239. timeSy() {
  240. let that = this;
  241. this.time4 = setInterval(() => {
  242. this.time4 && clearInterval(this.time4);
  243. this.timeSy();
  244. that.LineElse.dispose();
  245. that.mobilizeFL.dispose();
  246. let echarts90 = this.$refs.echarts90
  247. let mobilize = this.$refs.mobilize
  248. if (that.salaryIndex == that.sx.length) {
  249. that.salaryIndex = 0
  250. }
  251. 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]})
  252. this.initLineElseEchartsR(echarts90, { x: that.sx[that.salaryIndex], y: that.sy[that.salaryIndex] })
  253. that.salaryIndex += 1
  254. }, 10000);
  255. },
  256. // 针对从业人员类别的定时器
  257. timePractice() {
  258. let that = this;
  259. this.time3 = setInterval(() => {
  260. this.time3 && clearInterval(this.time3);
  261. this.timePractice();
  262. that.twoBar.dispose();
  263. that.LineChart.dispose();
  264. let echartTwo = that.$refs.echartTwo
  265. let serviceAge = that.$refs.serviceAge
  266. if (that.twoIndex == 1) {
  267. that.initTwoBarEcharts(echartTwo, that.echartTwoList)
  268. that.initLineEcharts(serviceAge, that.echartsTwoBar1)
  269. that.twoIndex = 2
  270. } else {
  271. that.initTwoBarEcharts(echartTwo, that.echartTwoList2)
  272. that.initLineEcharts(serviceAge, that.echartsTwoBar2)
  273. that.twoIndex = 1
  274. }
  275. this.userFlag = !this.userFlag
  276. }, 15000);
  277. },
  278. initOrganization(el, title = "", data = { x: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"], y: [0, 680, 562, 268, 717, 843, 987, 126, 723, 569] }, unit = "") {
  279. let chart = echarts.init(el);
  280. let option = {
  281. title: {
  282. show: false,
  283. top: 5,
  284. left: "center",
  285. text: title,
  286. textStyle: {
  287. color: "#5EB7FF",
  288. fontWeight: "normal",
  289. fontSize: 32
  290. }
  291. },
  292. grid: {
  293. top: 30,
  294. right: 40,
  295. left: 105,
  296. bottom: 40,
  297. },
  298. tooltip: {
  299. show: true,
  300. trigger: "axis",
  301. textStyle: {
  302. fontSize: 30,
  303. color: '#A3E2F4'
  304. },
  305. axisPointer: {
  306. // 坐标轴指示器,坐标轴触发有效
  307. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  308. },
  309. },
  310. xAxis: {
  311. data: data.x,
  312. axisTick: {
  313. show: false,
  314. },
  315. // x轴的字体颜色
  316. axisLabel: {
  317. interval: 0,
  318. // rotate: 40,
  319. textStyle: {
  320. color: "white",
  321. fontSize: 30,
  322. },
  323. },
  324. //y轴线的颜色以及宽度
  325. axisLine: {
  326. show: true,
  327. lineStyle: {
  328. color: "#1E5389",
  329. width: 1,
  330. type: "solid",
  331. },
  332. },
  333. },
  334. yAxis: {
  335. name: unit,
  336. axisTick: {
  337. lineStyle: {
  338. color: "#18416F",
  339. },
  340. },
  341. // y轴的字体颜色
  342. axisLabel: {
  343. textStyle: {
  344. color: "white",
  345. fontSize: 30,
  346. },
  347. },
  348. nameTextStyle: {
  349. fontSize: 30,
  350. },
  351. splitLine: {
  352. show: true,
  353. lineStyle: {
  354. color: "#204561",
  355. width: 1,
  356. type: "dotted",
  357. },
  358. },
  359. //y轴线的颜色以及宽度
  360. axisLine: {
  361. show: true,
  362. lineStyle: {
  363. color: "#1E5389",
  364. width: 1,
  365. type: "solid",
  366. },
  367. },
  368. },
  369. series: [
  370. {
  371. name: "",
  372. type: "bar",
  373. data: data.y,
  374. showBackground: true,
  375. backgroundStyle: {
  376. color: "#18416F",
  377. },
  378. barWidth: "20%",
  379. itemStyle: {
  380. barBorderRadius: [30, 30, 0, 0],
  381. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  382. {
  383. offset: 0,
  384. color: "#02355C",
  385. }, //柱图渐变色
  386. {
  387. offset: 1,
  388. color: "#40A9FF",
  389. },
  390. ]),
  391. },
  392. onclick: function (params) {
  393. // 获取被点击的柱状图的数据
  394. var data = params.data;
  395. console.log('点击的柱状图数据为:', data);
  396. // 在此处添加你的逻辑处理代码
  397. }
  398. }
  399. ],
  400. legend: {
  401. data: ["入池人数", "出池人数"],
  402. textStyle: {
  403. // 图列内容样式
  404. color: "#fff", // 字体颜色
  405. // fontSize: "10",
  406. },
  407. right: 30,
  408. icon: "roundRect",
  409. // 小图标的宽高
  410. itemHeight: 5,
  411. },
  412. };
  413. let that = this;
  414. chart.setOption(option);
  415. chart.on('click', function (param) {
  416. that.isShowMark = true
  417. that.salaryFlag = false
  418. that.pdfFlag = true
  419. })
  420. tools.loopShowTooltip(chart, option, {
  421. nterval: 2000,
  422. loopSeries: true,
  423. });
  424. },
  425. initOrganizationElse(el, title = "", data = { x: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"], y: [0, 680, 562, 268, 717, 843, 987, 126, 723, 569] }, unit = "") {
  426. let chart = echarts.init(el);
  427. let option = {
  428. title: {
  429. show: false,
  430. top: 5,
  431. left: "center",
  432. text: title,
  433. textStyle: {
  434. color: "#5EB7FF",
  435. fontWeight: "normal",
  436. fontSize: 32
  437. }
  438. },
  439. grid: {
  440. top: 50,
  441. right: 40,
  442. left: 105,
  443. bottom: 40,
  444. },
  445. tooltip: {
  446. show: true,
  447. trigger: "axis",
  448. textStyle: {
  449. fontSize: 30,
  450. color: '#A3E2F4'
  451. },
  452. axisPointer: {
  453. // 坐标轴指示器,坐标轴触发有效
  454. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  455. },
  456. },
  457. xAxis: {
  458. data: data.x,
  459. axisTick: {
  460. show: false,
  461. },
  462. // x轴的字体颜色
  463. axisLabel: {
  464. interval: 0,
  465. // rotate: 40,
  466. textStyle: {
  467. color: "white",
  468. fontSize: 30,
  469. },
  470. },
  471. //y轴线的颜色以及宽度
  472. axisLine: {
  473. show: true,
  474. lineStyle: {
  475. color: "#1E5389",
  476. width: 1,
  477. type: "solid",
  478. },
  479. },
  480. },
  481. yAxis: {
  482. name: unit,
  483. axisTick: {
  484. lineStyle: {
  485. color: "#18416F",
  486. },
  487. },
  488. // y轴的字体颜色
  489. axisLabel: {
  490. textStyle: {
  491. color: "white",
  492. fontSize: 30,
  493. },
  494. },
  495. nameTextStyle: {
  496. fontSize: 30,
  497. color: "white",
  498. },
  499. splitLine: {
  500. show: true,
  501. lineStyle: {
  502. color: "#204561",
  503. width: 1,
  504. type: "dotted",
  505. },
  506. },
  507. //y轴线的颜色以及宽度
  508. axisLine: {
  509. show: true,
  510. lineStyle: {
  511. color: "#1E5389",
  512. width: 1,
  513. type: "solid",
  514. },
  515. },
  516. },
  517. series: [
  518. {
  519. name: "",
  520. type: "bar",
  521. data: data.y,
  522. showBackground: true,
  523. backgroundStyle: {
  524. color: "#18416F",
  525. },
  526. barWidth: "20%",
  527. itemStyle: {
  528. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  529. {
  530. offset: 0,
  531. color: "#02355C",
  532. }, //柱图渐变色
  533. {
  534. offset: 1,
  535. color: "#40A9FF",
  536. },
  537. ]),
  538. },
  539. }
  540. ],
  541. legend: {
  542. data: ["入池人数", "出池人数"],
  543. textStyle: {
  544. // 图列内容样式
  545. color: "#fff", // 字体颜色
  546. // fontSize: "10",
  547. },
  548. right: 30,
  549. icon: "roundRect",
  550. // 小图标的宽高
  551. itemHeight: 5,
  552. },
  553. };
  554. let that = this;
  555. chart.setOption(option);
  556. tools.loopShowTooltip(chart, option, {
  557. nterval: 2000,
  558. loopSeries: true,
  559. });
  560. },
  561. initLineEcharts(el, data) {
  562. this.LineChart = echarts.init(el);
  563. let option = {
  564. grid: {
  565. top: 25,
  566. right: 15,
  567. left: "15%",
  568. bottom: "27%",
  569. },
  570. tooltip: {
  571. show: true,
  572. trigger: "axis",
  573. textStyle: {
  574. fontSize: 30,
  575. color: '#A3E2F4'
  576. },
  577. axisPointer: {
  578. lineStyle: {
  579. color: "#ddd",
  580. },
  581. },
  582. },
  583. legend: {
  584. textStyle: {
  585. // 图列内容样式
  586. color: "#fff", // 字体颜色
  587. // fontSize: "10",
  588. },
  589. right: 30,
  590. icon: "roundRect",
  591. // 小图标的宽高
  592. itemHeight: 5
  593. },
  594. xAxis: {
  595. type: "category",
  596. data: data.x,
  597. boundaryGap: false,
  598. splitLine: {
  599. show: false,
  600. interval: "auto",
  601. },
  602. axisTick: {
  603. show: false,
  604. },
  605. axisLine: {
  606. lineStyle: {
  607. color: "#7ECEF4",
  608. },
  609. },
  610. axisLabel: {
  611. interval: 0,
  612. rotate: 25,
  613. textStyle: {
  614. fontSize: 30,
  615. color: "#fff",
  616. },
  617. },
  618. },
  619. yAxis: {
  620. type: "value",
  621. splitLine: {
  622. show: true,
  623. lineStyle: {
  624. color: "#204561",
  625. width: 1,
  626. type: "dotted",
  627. },
  628. },
  629. axisTick: {
  630. show: false,
  631. },
  632. axisLine: {
  633. lineStyle: {
  634. color: "#7ECEF4",
  635. },
  636. },
  637. axisLabel: {
  638. margin: 10,
  639. textStyle: {
  640. fontSize: 30,
  641. color: "#fff",
  642. },
  643. },
  644. },
  645. series: [
  646. {
  647. name: "",
  648. type: "line",
  649. smooth: false,
  650. showSymbol: true, // 节点长显
  651. symbol: 'image://' + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAiCAYAAADRcLDBAAAAAXNSR0IArs4c6QAACaRJREFUWEftl3twVNUdx3+/c+5rN7shJEgeBAhJKIE4WsxieZsFSkSgM9QB66gtVqpUZ2xRO7X+UYOjYx9TbTs6xY4tSnXUUO20CFYUEgIEqMSggUDIEogB8oKQB7t79957zq9zNiwoQXCm/tk7s3Mfe36/87nf7+88LsJXPKqIeP4pKGdMLgLC6YRQBAAZCMCJoA8QjgPQxyTZdiB4d+ZYjH/F1IDXarj/NPltkg8iwBoiOkWA/0KQu0Fqza6A3uBZEIl8GAkeFEkmbwbCRUhyGgKu5zr77fRs7LpWH1eFqG53b+WA6wDpP0Dy6bljzU+vlVD9v+MUjUUQPyNJdyDSk3PzjXVXi7siBBFh9UmnkoD9EBFWzsvXt32Vzi9vs70tUSoZvsKQjqFrrAxPQPtKeYZBKICt7YkXgCgErre0ojjYnQpcTlW89+C4UZKxUTqwgAA0kEkuQXN0QVGB8pze1t313m23JVIxW1rI5Kb9KgJmJzRz8dI8jF0OMgzi3bboWiCs0C3f/IocjCYDKitZ+bJb8zRNKyAO+tVUYcSkdEV7n/Nxe33oATcZTsRCbfENAOBfPN53OyLS53N8AeKfJwbDRPg3ByC0YkKgUzVctGWLmSgYXYoMRqh7SggkIYbiELIRMI2IWpO3nCeTo8kJiNn22djB3bNnD6pnVYfIMALRnSThjWUTAr+/IoSS7TwfbASiNSuKRmxWjaZUVRn5pYVTBQd/qnMSiSEAghzU9MLkpRBdJNzWFAQz/DIJItATMNBQUxo+nwSJ9BcDwz1AXtmKoszPUiAXlXjtWN9qJFh6V3HG4pQFC5YvvpE4ZigA6cSYUkA6LiNNy9Y4SwKkDpKyS7peKzN0qWCQm5Q8G3q8ozFS37RihaPavtbS9ywwyLi7KOPHwyDWR84ekYir7ivK3KUULf9k7xhuahNlzGHq7ZOdJ22QucB4oSpgkHIoD2OgfCbCTvCGQIZghkA05Ke33hBqVqK91DwwSmduxDT4hLvGZ5wbchUA1h3pCQHS66snjZ6kni2vqmLnSsfNkB4aSgEFkPxJmcs0ViiFy8gTaAQzS5ipZ9ldnXVoapKhRsCwgzynlemW5D5LKBBmMNln9+yrDy1Vsyita+5+CwE/eGDSdS9fhPjj4c4nCGDUTybnPKIg5u/9cDT5gqXDABgWCdvm6pX19PQSa3T2ElWOzmBfXaKzYxcyTSoYJOwAkMdSIKpGwPXatodmqQKmPzR33YMklzxcknvHRYjfHT71DiC98WhJ/kYFMbdxTwl3KS8FIVwvj10AEI7NzZFZk6zs3MWAyFO+On29e+IdJ3cx01JWCAWCTIukrOGa0b9t6qz9qv1vmtqLGbD3H5syJllXSTuePvjZAY7y3l+UFhxQ9+WN+8rAjmUM1YGbRwRFIhbXvgzgIsi53j3xzpO7uOET3LKEsgaRRZQtmmV5Hz713E7YuFFWVRFrmdIedXvGBirD6CUhftl4og2ZmLO2tKhdgc1rrJsu7YTfc708lKJYdS5tl+uBwOTLFfj8CFHXSpFET9dOZloeNyzBdN4BiBFlSVdk686mFZVqAqPKxuO9NrGiX90w/lwS4vFPIm2k4ZxfX4AIN9TOkAnHL4UcA0IWenZUE/G4ZowcOcWXk39bSsHLAS5AfBTvOFmTVMPv85iudxJghOua6D6+ozYF8fgnkV5A/RLEmoajBxDx3ue+OVHZgbc07C6jWHSksKNcAI5BxysSTpx7dlzzXTd6sj+/oAIAh035zpme+sHPIju54fM0X5oHGnYhQIvmD7qaZXrbH32yFmpqxPIqYmMntkTT+04FKsPhITseajj8DgK+8cLUkr8riDl7a0tQ2PkKwonFNfBEPjKYoCAo4XArO6ckUFD8bTU5pNSwezo/Hmg5XMctZYPPA0PvJMeNmIE0l6ele5xp/dUz5qnClA83NBULge+/GJp8qTBX1R96goiy/hK6/rEkxL/fzmYZI64X8QRPnO/Xxfl+jQjzuaEXCDuuyUSC+3LHfSNYNHGBArG7OxoGmg/VMd0UaBoCgXVJ4UY0f5pjBIMet9IEeHC89paFx1Q93PdR492IbMnLodJLQ/SefY0hRHp9w803lCiIsvvv5/6V35sJXsJKxAY10T+gSzumEcMxTNcLyPGYdBPcnzd+ohYMZg00H9wLmiG5rguU0O050VYtbUSCBwKe4Q96yoqOpvp9zff9XK3K9P39n74JQB9sCN14abJSkt65r+EIufJHb84uU9M2m7ltc75m6ZNEdEBzYjEuooO6sGMa6mYeM4zx5HlMCkrawRAJNU1K4fXIeLyV+yyX+4OuGQx4zEoTQohTdeElhxXA8traLG4GW4QwCjfOLO29OE+oi2V79q9GgKXvzAgtSVZ/WRmf8/wzUwFopFJDDp7XhB3VpGNzNKxczecfJ1NLugpwZY8bGzyuAJgaGRdUYEyLRarf3n+68s9qoyO/u3f/MwSY+Y/pZauHLWCLtrSYPONcI3m0ZvPcb72n8uZV3m9OmL/sJvRkwFEgsRiXTpxLx+VoWjmaP22cSiQTiTNefOA447pQAMzvF0ZyeFpO79HDDYdWPdKvVKiorivUDb4HJC97d05o+FKuki3cvW8ekNzguHaoJhzuhnJgU8oftDLnLy4lx8l0XZeRbTOZcDhJF7nly0HN8LmD/W0KQFnCLEvqlikYmrHe1iONh157ZABqQC7askUXwYwdgPjW1tkznv/8HDNsrN+yq24tk7KChLugJhyOKRDwFfNpq9aOsUamT5BewnSlRHI9BsIbysU1QMZI1zVJ3PTEYP/J9i1vnTh9dJMDNUDLq6rgTE7eq4Tgr5k963a42vYumZAIZ+/c/SKQvEna8e/UVVScSYIMAuaVLdVzZy0ZpWePGMVBHyE5NwAlogBHeokoxe3eszs+7Ipse92G0SAVQPn69bpXVPxXAhxj+61F9aHQtTe6KZDptbVPkaSVErx7Pwov2J4s1nJA6AYGDiB4l304aUBgAIEPCOpB7XZo2vbtkxnjrwDQCS8Q+MGVAL4wOq60DtxUXX0rIr4EAHuFE332wMLF6uNnCEYdgxfOQRjaPdcMnadu3pzP/P41gHQnAKusLy//05XyDxsdX9aobNMmv7Csh4iznwLASSC5iTxZB+L80d7zbWfTmwYETJuSiXqgSOfmNEJS68rNAPiKi/jbpnA4uWv/nyBSwcurqvjhrKz5QLQQEGYSQCECZKiyBCC1VzxBBA1IYlswLX3Tnpkzv74P4mu9xdfx/zW/yr+OTq6V4/8QKYX+C2NJz1/FdWNwAAAAAElFTkSuQmCC',
  652. symbolSize: 30,
  653. data: data.y,
  654. areaStyle: {
  655. normal: {
  656. color: new echarts.graphic.LinearGradient(
  657. 0,
  658. 0,
  659. 0,
  660. 1,
  661. [
  662. {
  663. offset: 0,
  664. color: "#45DAD1",
  665. },
  666. {
  667. offset: 1,
  668. color: "#051F41",
  669. },
  670. ],
  671. false
  672. ),
  673. },
  674. },
  675. itemStyle: {
  676. normal: {
  677. color: "#45DAD1",
  678. },
  679. },
  680. lineStyle: {
  681. normal: {
  682. width: 2,
  683. },
  684. },
  685. }
  686. ],
  687. };
  688. this.LineChart.setOption(option);
  689. tools.loopShowTooltip(this.LineChart, option, {
  690. nterval: 2000,
  691. loopSeries: true,
  692. });
  693. },
  694. initLineElseEcharts(el, data) {
  695. let chart = echarts.init(el);
  696. let option = {
  697. grid: {
  698. top: 25,
  699. right: 15,
  700. left: "15%",
  701. bottom: "27%",
  702. },
  703. tooltip: {
  704. show: true,
  705. trigger: "axis",
  706. textStyle: {
  707. fontSize: 30,
  708. color: '#A3E2F4'
  709. },
  710. axisPointer: {
  711. lineStyle: {
  712. color: "#ddd",
  713. },
  714. },
  715. },
  716. legend: {
  717. textStyle: {
  718. // 图列内容样式
  719. color: "#fff", // 字体颜色
  720. // fontSize: "10",
  721. },
  722. right: 30,
  723. icon: "roundRect",
  724. // 小图标的宽高
  725. itemHeight: 5
  726. },
  727. xAxis: {
  728. type: "category",
  729. data: data.x,
  730. boundaryGap: false,
  731. splitLine: {
  732. show: false,
  733. interval: "auto",
  734. },
  735. axisTick: {
  736. show: false,
  737. },
  738. axisLine: {
  739. lineStyle: {
  740. color: "#7ECEF4",
  741. },
  742. },
  743. axisLabel: {
  744. interval: 0,
  745. rotate: 40,
  746. margin: 10,
  747. textStyle: {
  748. fontSize: 30,
  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: 30,
  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: "#40A9FF",
  799. },
  800. {
  801. offset: 1,
  802. color: "#051F41",
  803. },
  804. ],
  805. false
  806. ),
  807. },
  808. },
  809. itemStyle: {
  810. normal: {
  811. color: "#40A9FF",
  812. },
  813. },
  814. lineStyle: {
  815. normal: {
  816. width: 2,
  817. },
  818. },
  819. }
  820. ],
  821. };
  822. chart.setOption(option);
  823. tools.loopShowTooltip(chart, option, {
  824. nterval: 2000,
  825. loopSeries: true,
  826. });
  827. },
  828. initLineElseEchartsR(el, data) {
  829. this.LineElse = echarts.init(el);
  830. let option = {
  831. grid: {
  832. top: 15,
  833. right: "5%",
  834. left: "5%",
  835. bottom: "22%",
  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. formatter: "{b} : {c} %"
  850. },
  851. legend: {
  852. textStyle: {
  853. // 图列内容样式
  854. color: "#fff", // 字体颜色
  855. // fontSize: "10",
  856. },
  857. right: 30,
  858. icon: "roundRect",
  859. // 小图标的宽高
  860. itemHeight: 5
  861. },
  862. xAxis: {
  863. type: "category",
  864. data: data.x,
  865. boundaryGap: false,
  866. splitLine: {
  867. show: false,
  868. interval: "auto",
  869. },
  870. axisTick: {
  871. show: false,
  872. },
  873. axisLine: {
  874. lineStyle: {
  875. color: "#7ECEF4",
  876. },
  877. },
  878. axisLabel: {
  879. interval: 0,
  880. textStyle: {
  881. fontSize: 30,
  882. color: "#fff",
  883. },
  884. },
  885. },
  886. yAxis: {
  887. type: "value",
  888. min: 60,
  889. max: 100,
  890. splitNumber: 3,
  891. interval: 20,
  892. splitLine: {
  893. show: true,
  894. lineStyle: {
  895. color: "#204561",
  896. width: 1,
  897. type: "dotted",
  898. },
  899. },
  900. axisTick: {
  901. show: false,
  902. },
  903. axisLine: {
  904. lineStyle: {
  905. color: "#7ECEF4",
  906. },
  907. },
  908. axisLabel: {
  909. margin: 10,
  910. textStyle: {
  911. fontSize: 30,
  912. color: "#fff",
  913. },
  914. },
  915. },
  916. series: [
  917. {
  918. name: "",
  919. type: "line",
  920. smooth: false,
  921. showSymbol: true, // 节点长显
  922. symbol: 'image://' + 'data:image/png;base64,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',
  923. symbolSize: 30,
  924. data: data.y,
  925. areaStyle: {
  926. normal: {
  927. color: new echarts.graphic.LinearGradient(
  928. 0,
  929. 0,
  930. 0,
  931. 1,
  932. [
  933. {
  934. offset: 0,
  935. color: "#40A9FF",
  936. },
  937. {
  938. offset: 1,
  939. color: "#051F41",
  940. },
  941. ],
  942. false
  943. ),
  944. },
  945. },
  946. itemStyle: {
  947. normal: {
  948. color: "#40A9FF",
  949. },
  950. },
  951. lineStyle: {
  952. normal: {
  953. width: 2,
  954. },
  955. },
  956. }
  957. ],
  958. };
  959. this.LineElse.setOption(option);
  960. tools.loopShowTooltip(this.LineElse, option, {
  961. nterval: 2000,
  962. loopSeries: true,
  963. });
  964. },
  965. initChartR1(el) {
  966. let myChart = echarts.init(el)
  967. data = echarts2;
  968. arrName = getArrayValue(data, "name");
  969. arrValue = getArrayValue(data, "value");
  970. sumValue = eval(arrValue.join("+"));
  971. objData = array2obj(data, "name");
  972. optionData = getData(data);
  973. function getArrayValue(array, key) {
  974. var key = key || "value";
  975. var res = [];
  976. if (array) {
  977. array.forEach(function (t) {
  978. res.push(t[key]);
  979. });
  980. }
  981. return res;
  982. }
  983. function array2obj(array, key) {
  984. var resObj = {};
  985. for (var i = 0; i < array.length; i++) {
  986. resObj[array[i][key]] = array[i];
  987. }
  988. return resObj;
  989. }
  990. function getData(data) {
  991. var res = {
  992. series: [],
  993. yAxis: [],
  994. };
  995. for (let i = 0; i < data.length; i++) {
  996. // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
  997. res.series.push({
  998. name: "",
  999. type: "pie",
  1000. clockWise: false, //顺时加载
  1001. hoverAnimation: false, //鼠标移入变大
  1002. radius: [53 - i * 15 + "%", 48 - i * 15 + "%"],
  1003. center: ["35%", "50%"],
  1004. label: {
  1005. show: false,
  1006. },
  1007. itemStyle: {
  1008. label: {
  1009. show: false,
  1010. },
  1011. labelLine: {
  1012. show: false,
  1013. },
  1014. borderWidth: 5,
  1015. },
  1016. data: [
  1017. {
  1018. value: data[i].value,
  1019. name: data[i].name,
  1020. },
  1021. {
  1022. value: sumValue - data[i].value,
  1023. name: "",
  1024. itemStyle: {
  1025. color: "rgba(0,0,0,0)",
  1026. borderWidth: 0,
  1027. },
  1028. tooltip: {
  1029. show: false,
  1030. },
  1031. hoverAnimation: false,
  1032. },
  1033. ],
  1034. });
  1035. res.series.push({
  1036. name: "",
  1037. type: "pie",
  1038. silent: true,
  1039. z: 1,
  1040. clockWise: false, //顺时加载
  1041. hoverAnimation: false, //鼠标移入变大
  1042. radius: [53 - i * 15 + "%", 48 - i * 15 + "%"],
  1043. center: ["35%", "50%"],
  1044. label: {
  1045. show: false,
  1046. },
  1047. itemStyle: {
  1048. label: {
  1049. show: false,
  1050. },
  1051. labelLine: {
  1052. show: false,
  1053. },
  1054. borderWidth: 5,
  1055. },
  1056. data: [
  1057. {
  1058. value: 7.5,
  1059. itemStyle: {
  1060. color: "rgb(3, 31, 62)",
  1061. borderWidth: 0,
  1062. },
  1063. tooltip: {
  1064. show: false,
  1065. },
  1066. hoverAnimation: false,
  1067. },
  1068. {
  1069. value: 2.5,
  1070. name: "",
  1071. itemStyle: {
  1072. color: "rgba(0,0,0,0)",
  1073. borderWidth: 0,
  1074. },
  1075. tooltip: {
  1076. show: false,
  1077. },
  1078. hoverAnimation: false,
  1079. },
  1080. ],
  1081. });
  1082. res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
  1083. }
  1084. return res;
  1085. }
  1086. let option = {
  1087. graphic: {
  1088. elements: [{
  1089. type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  1090. style: {
  1091. image: './images/loop.png', //这里添加图片地址
  1092. width: 320,
  1093. height: 320
  1094. },
  1095. left: '150',//
  1096. top: 'middle' //配置图片居中
  1097. }]
  1098. },
  1099. legend: {
  1100. show: true,
  1101. icon: "circle",
  1102. top: "center",
  1103. left: "60%",
  1104. data: arrName,
  1105. width: 50,
  1106. formatter: function (name) {
  1107. return (
  1108. "{title|" + name + "} {value|" + objData[name].value + "} {title|项}"
  1109. );
  1110. },
  1111. textStyle: {
  1112. rich: {
  1113. title: {
  1114. fontSize: 24,
  1115. lineHeight: 28,
  1116. color: "#fff",
  1117. },
  1118. value: {
  1119. fontSize: 32,
  1120. lineHeight: 35,
  1121. color: "#95DE64",
  1122. fontWeight: "bolder"
  1123. },
  1124. },
  1125. },
  1126. },
  1127. tooltip: {
  1128. show: false,
  1129. normal: {
  1130. show: false,
  1131. trigger: "item",
  1132. textStyle: {
  1133. fontSize: 30,
  1134. color: '#A3E2F4'
  1135. },
  1136. label: {
  1137. margin: 10, // label 距离轴的距离
  1138. color: '#FFF', // 文字的颜色
  1139. fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  1140. fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  1141. fontSize: '30', // 文字字体大小
  1142. lineHeight: '50', // 行高
  1143. },
  1144. },
  1145. // formatter: "{a}<br>{b}:{c}({d}%)666",
  1146. textStyle: {
  1147. color: '#FFF', // 文字的颜色
  1148. fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  1149. fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  1150. },
  1151. formatter: data => {
  1152. console.log(data)
  1153. // 小圆点
  1154. return `<br /><span style="display:inline-block;border-radius:50%;margin-right:10px; width:7px;height:7px;background-color:blue"></span>${data.name}:${data.percent}`
  1155. },
  1156. },
  1157. color: [
  1158. "rgb(24, 183, 142)",
  1159. "rgb(1, 179, 238)",
  1160. "rgb(22, 75, 205)",
  1161. "rgb(52, 52, 176)",
  1162. ],
  1163. grid: {
  1164. top: "21%",
  1165. bottom: "48%",
  1166. left: "36%",
  1167. containLabel: false,
  1168. },
  1169. yAxis: [
  1170. {
  1171. type: "category",
  1172. inverse: true,
  1173. axisLine: {
  1174. show: false,
  1175. },
  1176. axisTick: {
  1177. show: false,
  1178. },
  1179. axisLabel: {
  1180. interval: 0,
  1181. inside: true,
  1182. textStyle: {
  1183. color: "#fff",
  1184. fontSize: 24,
  1185. },
  1186. show: true,
  1187. },
  1188. data: optionData.yAxis,
  1189. },
  1190. ],
  1191. xAxis: [
  1192. {
  1193. show: false,
  1194. },
  1195. ],
  1196. series: optionData.series,
  1197. }
  1198. myChart.setOption(option)
  1199. tools.loopShowTooltip(myChart, option, {
  1200. nterval: 2000,
  1201. loopSeries: true,
  1202. });
  1203. },
  1204. initChartsBig(el) {
  1205. this.leftEcharts5 = echarts.init(el);
  1206. let option = {
  1207. color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
  1208. grid: {
  1209. left: -100,
  1210. top: 50,
  1211. bottom: 10,
  1212. right: 10,
  1213. containLabel: true
  1214. },
  1215. tooltip: {
  1216. trigger: 'item',
  1217. textStyle: {
  1218. fontSize: 30,
  1219. color: '#A3E2F4'
  1220. },
  1221. formatter: "{b} : {c} ({d}%)"
  1222. },
  1223. legend: {
  1224. show: false,
  1225. type: "scroll",
  1226. orient: "vartical",
  1227. // x: "right",
  1228. top: "center",
  1229. right: "10",
  1230. // bottom: "0%",
  1231. itemWidth: 30,
  1232. itemHeight: 12,
  1233. itemGap: 16,
  1234. textStyle: {
  1235. color: '#A3E2F4',
  1236. fontSize: 30,
  1237. fontWeight: 0
  1238. },
  1239. data: ['研究生及以上', '大学', '大专', '中专、技校及高中', '初中及以下']
  1240. },
  1241. polar: {},
  1242. angleAxis: {
  1243. interval: 1,
  1244. type: 'category',
  1245. data: [],
  1246. z: 10,
  1247. axisLine: {
  1248. show: false,
  1249. lineStyle: {
  1250. color: "#0B4A6B",
  1251. width: 1,
  1252. type: "solid"
  1253. },
  1254. },
  1255. axisLabel: {
  1256. interval: 0,
  1257. show: true,
  1258. color: "#0B4A6B",
  1259. margin: 8,
  1260. fontSize: 16
  1261. },
  1262. },
  1263. radiusAxis: {
  1264. min: 40,
  1265. max: 120,
  1266. interval: 20,
  1267. axisLine: {
  1268. show: false,
  1269. lineStyle: {
  1270. color: "#0B3E5E",
  1271. width: 1,
  1272. type: "solid"
  1273. },
  1274. },
  1275. axisLabel: {
  1276. formatter: '{value} %',
  1277. show: false,
  1278. padding: [0, 0, 20, 0],
  1279. color: "#0B3E5E",
  1280. fontSize: 30
  1281. },
  1282. splitLine: {
  1283. lineStyle: {
  1284. color: "#0B3E5E",
  1285. width: 2,
  1286. type: "solid"
  1287. }
  1288. }
  1289. },
  1290. calculable: true,
  1291. series: [{
  1292. type: 'pie',
  1293. radius: ["5%", "10%"],
  1294. hoverAnimation: false,
  1295. labelLine: {
  1296. normal: {
  1297. show: false,
  1298. length: 30,
  1299. length2: 55
  1300. },
  1301. emphasis: {
  1302. show: false
  1303. }
  1304. },
  1305. data: [{
  1306. name: '',
  1307. value: 0,
  1308. tooltip: { show: false },
  1309. itemStyle: {
  1310. normal: {
  1311. color: "#0B4A6B"
  1312. }
  1313. }
  1314. }]
  1315. }, {
  1316. type: 'pie',
  1317. radius: ["90%", "95%"],
  1318. hoverAnimation: false,
  1319. labelLine: {
  1320. normal: {
  1321. show: false,
  1322. length: 30,
  1323. length2: 55
  1324. },
  1325. emphasis: {
  1326. show: false
  1327. }
  1328. },
  1329. name: "",
  1330. data: [{
  1331. name: '',
  1332. value: 0,
  1333. tooltip: { show: false },
  1334. itemStyle: {
  1335. normal: {
  1336. color: "#0B4A6B"
  1337. }
  1338. }
  1339. }]
  1340. }, {
  1341. stack: 'a',
  1342. type: 'pie',
  1343. radius: ['20%', '80%'],
  1344. roseType: 'area',
  1345. zlevel: 10,
  1346. label: {
  1347. normal: {
  1348. show: true,
  1349. formatter: "{b}",
  1350. textStyle: {
  1351. fontSize: 28,
  1352. },
  1353. position: 'outside'
  1354. },
  1355. emphasis: {
  1356. show: true
  1357. }
  1358. },
  1359. labelLine: {
  1360. normal: {
  1361. show: true,
  1362. length: 10,
  1363. length2: 55
  1364. },
  1365. emphasis: {
  1366. show: false
  1367. }
  1368. },
  1369. data: [{
  1370. value: 3103,
  1371. name: '研究生及以上'
  1372. },
  1373. {
  1374. value: 42543,
  1375. name: '大学'
  1376. },
  1377. {
  1378. value: 46669,
  1379. name: '大专'
  1380. },
  1381. {
  1382. value: 69437,
  1383. name: '中专、技校及高中'
  1384. },
  1385. {
  1386. value: 25049,
  1387. name: '初中及以下'
  1388. }
  1389. ]
  1390. },]
  1391. }
  1392. this.leftEcharts5.setOption(option, {
  1393. notMerge: true,
  1394. notMerge: false,
  1395. });
  1396. tools.loopShowTooltip(this.leftEcharts5, option, {
  1397. nterval: 2000,
  1398. loopSeries: true,
  1399. });
  1400. },
  1401. initBarCharts(el, data) {
  1402. let chart = echarts.init(el);
  1403. var option = {
  1404. tooltip: { //提示框组件
  1405. trigger: 'axis',
  1406. formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
  1407. textStyle: {
  1408. fontSize: 30,
  1409. color: '#A3E2F4'
  1410. },
  1411. axisPointer: {
  1412. type: 'shadow',
  1413. label: {
  1414. backgroundColor: '#6a7985'
  1415. }
  1416. },
  1417. textStyle: {
  1418. color: '#fff',
  1419. fontStyle: 'normal',
  1420. fontFamily: '微软雅黑',
  1421. fontSize: 30,
  1422. }
  1423. },
  1424. grid: {
  1425. left: '9%',
  1426. right: '15%',
  1427. bottom: '10%',
  1428. top: 50,
  1429. },
  1430. legend: {//图例组件,颜色和名字
  1431. right: 10,
  1432. top: 0,
  1433. itemGap: 16,
  1434. itemWidth: 18,
  1435. itemHeight: 10,
  1436. data: [{
  1437. name: '本期值',
  1438. //icon:'image://../wwwroot/js/url2.png', //路径
  1439. },
  1440. {
  1441. name: '同期值',
  1442. }],
  1443. textStyle: {
  1444. color: '#a8aab0',
  1445. fontStyle: 'normal',
  1446. fontFamily: '微软雅黑',
  1447. fontSize: 30,
  1448. }
  1449. },
  1450. xAxis: [
  1451. {
  1452. type: 'category',
  1453. boundaryGap: true,//坐标轴两边留白
  1454. data: data.x,
  1455. axisLabel: { //坐标轴刻度标签的相关设置。
  1456. interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
  1457. margin: 15,
  1458. textStyle: {
  1459. color: '#fff',
  1460. fontStyle: 'normal',
  1461. fontFamily: '微软雅黑',
  1462. fontSize: 20,
  1463. }
  1464. },
  1465. axisTick: {//坐标轴刻度相关设置。
  1466. show: false,
  1467. },
  1468. axisLine: {//坐标轴轴线相关设置
  1469. lineStyle: {
  1470. color: '#fff',
  1471. opacity: 0.2
  1472. }
  1473. },
  1474. splitLine: { //坐标轴在 grid 区域中的分隔线。
  1475. show: false,
  1476. }
  1477. }
  1478. ],
  1479. yAxis: [
  1480. {
  1481. name: "万元/人",
  1482. type: 'value',
  1483. splitNumber: 5,
  1484. axisLabel: {
  1485. textStyle: {
  1486. color: '#a8aab0',
  1487. fontStyle: 'normal',
  1488. fontFamily: '微软雅黑',
  1489. fontSize: 30,
  1490. }
  1491. },
  1492. nameTextStyle: {
  1493. color: "#a8aab0",
  1494. fontSize: 30
  1495. },
  1496. axisLine: {
  1497. show: false
  1498. },
  1499. axisTick: {
  1500. show: false
  1501. },
  1502. splitLine: {
  1503. show: false,
  1504. lineStyle: {
  1505. color: ['#fff'],
  1506. }
  1507. }
  1508. }
  1509. ],
  1510. series: [
  1511. {
  1512. name: '本期值',
  1513. type: 'bar',
  1514. data: data.y1,
  1515. barWidth: 10,
  1516. barGap: 0,//柱间距离
  1517. label: {//图形上的文本标签
  1518. normal: {
  1519. show: false,
  1520. position: 'top',
  1521. textStyle: {
  1522. color: '#a8aab0',
  1523. fontStyle: 'normal',
  1524. fontFamily: '微软雅黑',
  1525. fontSize: 30,
  1526. },
  1527. },
  1528. },
  1529. itemStyle: {//图形样式
  1530. normal: {
  1531. barBorderRadius: [5, 5, 0, 0],
  1532. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1533. offset: 1, color: '#153363'
  1534. }, {
  1535. offset: 0, color: 'rgba(104, 253, 255, 0.7)'
  1536. }], false),
  1537. },
  1538. },
  1539. markLine: {
  1540. symbol: ['none'],
  1541. silent: true,
  1542. data: [{
  1543. yAxis: 15.3,
  1544. name: "社会劳动生产率",
  1545. lineStyle: {
  1546. normal: {
  1547. type: "dashed",
  1548. width: 3,
  1549. color: '#3E7DFE'
  1550. }
  1551. },
  1552. label: {
  1553. show: true,
  1554. distance: 20,
  1555. fontWeight: "lighter",
  1556. formatter: "社会劳动生产率",
  1557. },
  1558. }, {
  1559. yAxis: 50.8,
  1560. lineStyle: {
  1561. normal: {
  1562. type: "dashed",
  1563. width: 3,
  1564. color: 'red'
  1565. }
  1566. },
  1567. label: {
  1568. show: true,
  1569. distance: 20,
  1570. fontWeight: "lighter",
  1571. formatter: "省属企业平均劳动生产率",
  1572. },
  1573. }, {
  1574. yAxis: 69.2,
  1575. lineStyle: {
  1576. normal: {
  1577. type: "dashed",
  1578. width: 3,
  1579. color: 'rgba(127, 128, 225, 0.7)'
  1580. }
  1581. },
  1582. label: {
  1583. show: true,
  1584. distance: 20,
  1585. fontWeight: "lighter",
  1586. formatter: "央企平均劳动生产率",
  1587. },
  1588. },]
  1589. },
  1590. },
  1591. {
  1592. name: '同期值',
  1593. type: 'bar',
  1594. data: data.y2,
  1595. barWidth: 10,
  1596. barGap: 0.2,//柱间距离
  1597. label: {//图形上的文本标签
  1598. normal: {
  1599. show: false,
  1600. position: 'top',
  1601. textStyle: {
  1602. color: '#a8aab0',
  1603. fontStyle: 'normal',
  1604. fontFamily: '微软雅黑',
  1605. fontSize: 30,
  1606. },
  1607. },
  1608. },
  1609. itemStyle: {//图形样式
  1610. normal: {
  1611. barBorderRadius: [5, 5, 0, 0],
  1612. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1613. offset: 1, color: '#153363'
  1614. }, {
  1615. offset: 0, color: 'rgba(127, 128, 225, 0.7)'
  1616. }], false),
  1617. },
  1618. },
  1619. }
  1620. ]
  1621. };
  1622. chart.setOption(option);
  1623. tools.loopShowTooltip(chart, option, {
  1624. nterval: 2000,
  1625. loopSeries: true,
  1626. });
  1627. },
  1628. initBarChartsElse(el, data, name, lineInfo) {
  1629. let chart = echarts.init(el);
  1630. var option = {
  1631. tooltip: { //提示框组件
  1632. trigger: 'axis',
  1633. formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
  1634. textStyle: {
  1635. fontSize: 30,
  1636. color: '#A3E2F4'
  1637. },
  1638. axisPointer: {
  1639. type: 'shadow',
  1640. label: {
  1641. backgroundColor: '#6a7985'
  1642. }
  1643. },
  1644. textStyle: {
  1645. color: '#fff',
  1646. fontStyle: 'normal',
  1647. fontFamily: '微软雅黑',
  1648. fontSize: 30,
  1649. }
  1650. },
  1651. grid: {
  1652. left: '15%',
  1653. right: '15%',
  1654. bottom: '10%',
  1655. top: 50,
  1656. },
  1657. legend: {//图例组件,颜色和名字
  1658. right: 10,
  1659. top: 0,
  1660. itemGap: 16,
  1661. itemWidth: 18,
  1662. itemHeight: 10,
  1663. data: [{
  1664. name: '本期值',
  1665. //icon:'image://../wwwroot/js/url2.png', //路径
  1666. },
  1667. {
  1668. name: '同期值',
  1669. }],
  1670. textStyle: {
  1671. color: '#a8aab0',
  1672. fontStyle: 'normal',
  1673. fontFamily: '微软雅黑',
  1674. fontSize: 30,
  1675. }
  1676. },
  1677. xAxis: [
  1678. {
  1679. type: 'category',
  1680. boundaryGap: true,//坐标轴两边留白
  1681. data: data.x,
  1682. axisLabel: { //坐标轴刻度标签的相关设置。
  1683. interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
  1684. margin: 15,
  1685. textStyle: {
  1686. color: '#fff',
  1687. fontStyle: 'normal',
  1688. fontFamily: '微软雅黑',
  1689. fontSize: 20,
  1690. }
  1691. },
  1692. axisTick: {//坐标轴刻度相关设置。
  1693. show: false,
  1694. },
  1695. axisLine: {//坐标轴轴线相关设置
  1696. lineStyle: {
  1697. color: '#fff',
  1698. opacity: 0.2
  1699. }
  1700. },
  1701. splitLine: { //坐标轴在 grid 区域中的分隔线。
  1702. show: false,
  1703. }
  1704. }
  1705. ],
  1706. yAxis: [
  1707. {
  1708. name,
  1709. type: 'value',
  1710. splitNumber: 5,
  1711. axisLabel: {
  1712. textStyle: {
  1713. color: '#a8aab0',
  1714. fontStyle: 'normal',
  1715. fontFamily: '微软雅黑',
  1716. fontSize: 30,
  1717. }
  1718. },
  1719. nameTextStyle: {
  1720. color: "#a8aab0",
  1721. fontSize: 30
  1722. },
  1723. axisLine: {
  1724. show: false
  1725. },
  1726. axisTick: {
  1727. show: false
  1728. },
  1729. splitLine: {
  1730. show: false,
  1731. lineStyle: {
  1732. color: ['#fff'],
  1733. }
  1734. }
  1735. }
  1736. ],
  1737. series: [
  1738. {
  1739. name: '本期值',
  1740. type: 'bar',
  1741. data: data.y1,
  1742. barWidth: 10,
  1743. barGap: 0,//柱间距离
  1744. label: {//图形上的文本标签
  1745. normal: {
  1746. show: false,
  1747. position: 'top',
  1748. textStyle: {
  1749. color: '#a8aab0',
  1750. fontStyle: 'normal',
  1751. fontFamily: '微软雅黑',
  1752. fontSize: 30,
  1753. },
  1754. },
  1755. },
  1756. itemStyle: {//图形样式
  1757. normal: {
  1758. barBorderRadius: [5, 5, 0, 0],
  1759. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1760. offset: 1, color: '#153363'
  1761. }, {
  1762. offset: 0, color: 'rgba(104, 253, 255, 0.7)'
  1763. }], false),
  1764. },
  1765. },
  1766. markLine: {
  1767. symbol: ['none'],
  1768. silent: true,
  1769. data: [{
  1770. yAxis: lineInfo.value,
  1771. name: lineInfo.name,
  1772. lineStyle: {
  1773. normal: {
  1774. type: "dashed",
  1775. width: 3,
  1776. color: '#3E7DFE'
  1777. }
  1778. },
  1779. label: {
  1780. show: true,
  1781. distance: 20,
  1782. fontWeight: "lighter",
  1783. formatter: lineInfo.name,
  1784. },
  1785. }]
  1786. },
  1787. },
  1788. {
  1789. name: '同期值',
  1790. type: 'bar',
  1791. data: data.y2,
  1792. barWidth: 10,
  1793. barGap: 0.2,//柱间距离
  1794. label: {//图形上的文本标签
  1795. normal: {
  1796. show: false,
  1797. position: 'top',
  1798. textStyle: {
  1799. color: '#a8aab0',
  1800. fontStyle: 'normal',
  1801. fontFamily: '微软雅黑',
  1802. fontSize: 30,
  1803. },
  1804. },
  1805. },
  1806. itemStyle: {//图形样式
  1807. normal: {
  1808. barBorderRadius: [5, 5, 0, 0],
  1809. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1810. offset: 1, color: '#153363'
  1811. }, {
  1812. offset: 0, color: 'rgba(127, 128, 225, 0.7)'
  1813. }], false),
  1814. },
  1815. },
  1816. }
  1817. ]
  1818. };
  1819. chart.setOption(option);
  1820. tools.loopShowTooltip(chart, option, {
  1821. nterval: 2000,
  1822. loopSeries: true,
  1823. });
  1824. },
  1825. initBarEcharts(el, data, nameList) {
  1826. let chart = echarts.init(el);
  1827. var scale = 2;
  1828. var singleData = data.y1;
  1829. var multipleData = data.y2;
  1830. var color = "#fff";
  1831. option = {
  1832. tooltip: {
  1833. show: true,
  1834. trigger: 'axis',
  1835. textStyle: {
  1836. fontSize: 30,
  1837. color: '#A3E2F4'
  1838. },
  1839. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  1840. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  1841. }
  1842. },
  1843. legend: {
  1844. data: nameList,
  1845. align: 'left',
  1846. itemGap: 50,
  1847. // x: 'right',
  1848. right: '1%',
  1849. y: '1%',
  1850. icon: 'rect',
  1851. itemWidth: 15 * scale, // 图例图形宽度
  1852. itemHeight: 15 * scale, // 图例图形高度
  1853. textStyle: {
  1854. color: "#3fdaff",
  1855. fontSize: 16 * scale
  1856. }
  1857. },
  1858. grid: {
  1859. left: '3%',
  1860. right: '4%',
  1861. bottom: '3%',
  1862. containLabel: true
  1863. },
  1864. textStyle: {
  1865. fontSize: 30,
  1866. color: '#A3E2F4'
  1867. },
  1868. xAxis: [{
  1869. type: 'category',
  1870. data: data.x,
  1871. axisLabel: {
  1872. // inside: true,
  1873. padding: [15, 0, 0, 0],
  1874. textStyle: {
  1875. color: "#fff",
  1876. fontSize: 20,
  1877. }
  1878. },
  1879. axisTick: {
  1880. inside: true,
  1881. length: 8 * scale,
  1882. lineStyle: {
  1883. color: color,
  1884. }
  1885. },
  1886. axisLine: {
  1887. lineStyle: {
  1888. color: color,
  1889. }
  1890. },
  1891. splitLine: {
  1892. lineStyle: {
  1893. color: 'rgba(80,224,255,0.3)',
  1894. type: 'dashed'
  1895. }
  1896. }
  1897. }],
  1898. yAxis: [{
  1899. type: 'value',
  1900. axisLabel: {
  1901. // inside: true,
  1902. padding: [0, 15, 0, 0],
  1903. textStyle: {
  1904. color: color,
  1905. fontSize: 20,
  1906. }
  1907. },
  1908. axisTick: {
  1909. lineStyle: {
  1910. color: color,
  1911. }
  1912. },
  1913. axisLine: {
  1914. lineStyle: {
  1915. color: color,
  1916. }
  1917. },
  1918. splitLine: {
  1919. lineStyle: {
  1920. color: '#fff',
  1921. type: 'dashed'
  1922. },
  1923. show: false,
  1924. },
  1925. nameTextStyle: {
  1926. color: "#fff",
  1927. fontSize: 16 * scale,
  1928. padding: [0, 0, 10, 0]
  1929. }
  1930. }],
  1931. series: [{
  1932. name: nameList[0],
  1933. type: 'bar',
  1934. barWidth: '15%',
  1935. barGap: '40%',
  1936. itemStyle: {
  1937. normal: {
  1938. color: 'rgba(94,218,255,0.4)',
  1939. }
  1940. },
  1941. data: singleData
  1942. },
  1943. {
  1944. name: nameList[1],
  1945. type: 'bar',
  1946. barWidth: '15%',
  1947. barGap: '40%',
  1948. itemStyle: {
  1949. normal: {
  1950. color: '#ffc72b',
  1951. }
  1952. },
  1953. data: multipleData
  1954. }]
  1955. };
  1956. chart.setOption(option);
  1957. tools.loopShowTooltip(chart, option, {
  1958. nterval: 2000,
  1959. loopSeries: true,
  1960. });
  1961. },
  1962. initBarEchartsElse(el, data, nameList) {
  1963. let chart = echarts.init(el);
  1964. var scale = 2;
  1965. var singleData = data.y1;
  1966. var multipleData = data.y2;
  1967. var color = "#fff";
  1968. option = {
  1969. textStyle: {
  1970. fontSize: 30,
  1971. color: '#A3E2F4'
  1972. },
  1973. tooltip: {
  1974. show: true,
  1975. trigger: 'axis',
  1976. textStyle: {
  1977. fontSize: 30,
  1978. color: '#A3E2F4'
  1979. },
  1980. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  1981. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  1982. }
  1983. },
  1984. legend: {
  1985. data: nameList,
  1986. align: 'left',
  1987. itemGap: 50,
  1988. // x: 'right',
  1989. right: '1%',
  1990. y: '1%',
  1991. icon: 'rect',
  1992. itemWidth: 15 * scale, // 图例图形宽度
  1993. itemHeight: 15 * scale, // 图例图形高度
  1994. textStyle: {
  1995. color: "#3fdaff",
  1996. fontSize: 16 * scale
  1997. }
  1998. },
  1999. grid: {
  2000. left: '3%',
  2001. right: '4%',
  2002. bottom: '28%',
  2003. },
  2004. xAxis: [{
  2005. type: 'category',
  2006. data: data.x,
  2007. axisLabel: {
  2008. // inside: true,
  2009. rotate: 30,
  2010. padding: [15, 0, 0, 0],
  2011. textStyle: {
  2012. color: "#fff",
  2013. fontSize: 20,
  2014. }
  2015. },
  2016. axisTick: {
  2017. inside: true,
  2018. length: 8 * scale,
  2019. lineStyle: {
  2020. color: color,
  2021. }
  2022. },
  2023. axisLine: {
  2024. lineStyle: {
  2025. color: color,
  2026. }
  2027. },
  2028. splitLine: {
  2029. lineStyle: {
  2030. color: 'rgba(80,224,255,0.3)',
  2031. type: 'dashed'
  2032. }
  2033. }
  2034. }],
  2035. yAxis: [{
  2036. type: 'value',
  2037. axisLabel: {
  2038. // inside: true,
  2039. padding: [0, 15, 0, 0],
  2040. textStyle: {
  2041. color: color,
  2042. fontSize: 20,
  2043. }
  2044. },
  2045. axisTick: {
  2046. lineStyle: {
  2047. color: color,
  2048. }
  2049. },
  2050. axisLine: {
  2051. lineStyle: {
  2052. color: color,
  2053. }
  2054. },
  2055. splitLine: {
  2056. lineStyle: {
  2057. color: '#fff',
  2058. type: 'dashed'
  2059. },
  2060. show: false,
  2061. },
  2062. nameTextStyle: {
  2063. color: "#fff",
  2064. fontSize: 16 * scale,
  2065. padding: [0, 0, 10, 0]
  2066. }
  2067. }],
  2068. series: [{
  2069. name: nameList[0],
  2070. type: 'bar',
  2071. barWidth: '15%',
  2072. barGap: '40%',
  2073. itemStyle: {
  2074. normal: {
  2075. color: 'rgba(94,218,255,0.4)',
  2076. }
  2077. },
  2078. data: singleData
  2079. },
  2080. {
  2081. name: nameList[1],
  2082. type: 'bar',
  2083. barWidth: '15%',
  2084. barGap: '40%',
  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: 35
  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: 30
  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,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';
  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: 35, 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. name: '太原市',
  2434. value: 1,
  2435. value2: 3
  2436. }, {
  2437. name: '太原市',
  2438. value: 1,
  2439. value2: 4
  2440. }, {
  2441. name: '太原市',
  2442. value: 1,
  2443. value2: 5
  2444. },
  2445. {
  2446. name: '阳泉市',
  2447. value: mapData[5].value,
  2448. value2: mapData[5].value
  2449. },
  2450. {
  2451. name: '晋中市',
  2452. value: mapData[6].value,
  2453. value2: mapData[6].value
  2454. },
  2455. {
  2456. name: '长治市',
  2457. value: mapData[7].value,
  2458. value2: mapData[7].value
  2459. },
  2460. {
  2461. name: '临汾市',
  2462. value: mapData[8].value,
  2463. value2: mapData[8].value
  2464. },
  2465. {
  2466. name: '晋城市',
  2467. value: mapData[9].value,
  2468. value2: mapData[9].value
  2469. },
  2470. {
  2471. name: '运城市',
  2472. value: mapData[10].value,
  2473. value2: mapData[10].value
  2474. }
  2475. ]
  2476. for (let i = 0; i < data.length; i++) {
  2477. const name = data[i].name;
  2478. const mapDataObj = mapData.find(obj => obj.name === name);
  2479. if (mapDataObj) {
  2480. data[i].value = mapDataObj.value;
  2481. data[i].value2 = mapDataObj.value;
  2482. }
  2483. }
  2484. let formdata = '太原' // 中心点
  2485. this.geoCoordMap = []
  2486. /*获取地图数据*/
  2487. this.mapChart = echarts.init(el)
  2488. echarts.registerMap('shanxi', jsonData)
  2489. var mapFeatures = echarts.getMap('shanxi').geoJson.features
  2490. mapFeatures.forEach(v => {
  2491. // 地区名称
  2492. var name = v.properties.name
  2493. // 地区经纬度
  2494. this.geoCoordMap[name] = v.properties.centroid
  2495. // 按照地图乱序
  2496. // data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
  2497. })
  2498. // 地图数据
  2499. var chinaGeoCoordMap = {
  2500. 太原市: [112.149248, 37.957014],
  2501. 大同市: [113.295259, 40.09031],
  2502. 阳泉市: [113.505474, 38.064652],
  2503. 长治市: [113.113556, 36.191112],
  2504. 晋城市: [112.551274, 35.577553],
  2505. 朔州市: [112.433387, 39.531261],
  2506. 晋中市: [112.936465, 37.696495],
  2507. 运城市: [111.003957, 35.222778],
  2508. 忻州市: [112.733538, 38.8769],
  2509. 临汾市: [111.517973, 36.08415],
  2510. 吕梁市: [111.134335, 37.524366],
  2511. }
  2512. // 飞线点数据
  2513. var chinaDatas = [
  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: 0,
  2529. },],
  2530. [{
  2531. name: '晋城市',
  2532. value: 0,
  2533. },],
  2534. [{
  2535. name: '朔州市',
  2536. value: 0,
  2537. },],
  2538. [{
  2539. name: '晋中市',
  2540. value: 9,
  2541. },],
  2542. [{
  2543. name: '运城市',
  2544. value: 0,
  2545. },],
  2546. [{
  2547. name: '忻州市',
  2548. value: 0,
  2549. },],
  2550. [{
  2551. name: '临汾市',
  2552. value: 0,
  2553. },],
  2554. [{
  2555. name: '吕梁市',
  2556. value: 0,
  2557. },],
  2558. ]
  2559. var convertData = function (data) {
  2560. var res = []
  2561. for (var i = 0; i < data.length; i++) {
  2562. var dataItem = data[i]
  2563. var fromCoord = chinaGeoCoordMap[dataItem[0].name]
  2564. var toCoord = [112.549248, 37.857014] //中心点地理坐标
  2565. if (fromCoord && toCoord) {
  2566. res.push([{
  2567. // 飞线从哪里出发
  2568. coord: toCoord,
  2569. },
  2570. {
  2571. // 飞线去往哪里
  2572. coord: fromCoord,
  2573. value: dataItem[0].value,
  2574. },
  2575. ])
  2576. }
  2577. }
  2578. return res
  2579. }
  2580. var series = [];
  2581. [
  2582. [formdata, chinaDatas]
  2583. ].forEach(function (item) {
  2584. series.push({
  2585. type: 'lines',
  2586. name: "模拟数据",
  2587. coordinateSystem: 'geo',
  2588. zlevel: 2,
  2589. effect: {
  2590. show: true,
  2591. period: 5, //值越小 速度越快
  2592. trailLength: 0.3, // 0-1 值越大,越拖
  2593. symbol: 'pin', //箭头图标
  2594. symbolSize: 8, //图标大小
  2595. color: "#E6C50B"
  2596. },
  2597. lineStyle: {
  2598. normal: {
  2599. show: true,
  2600. type: 'dashed',
  2601. width: 2, //尾迹线条宽度
  2602. opacity: 0.1, //尾迹线条透明度
  2603. curveness: 0.3, //尾迹线条曲直度
  2604. color: '#E6C50B', // 飞线颜色
  2605. },
  2606. },
  2607. data: convertData(item[1]),
  2608. }, {
  2609. type: 'effectScatter',
  2610. coordinateSystem: 'geo',
  2611. zlevel: 2,
  2612. rippleEffect: {
  2613. //涟漪特效
  2614. period: 10, //动画时间,值越小速度越快
  2615. brushType: 'stroke', //波纹绘制方式 stroke, fill
  2616. scale: 10, //波纹圆环最大限制,值越大波纹越大
  2617. color: '#E6C50B',
  2618. },
  2619. itemStyle: {
  2620. normal: {
  2621. color: '#E6C50B',
  2622. shadowBlur: 10,
  2623. shadowColor: '#E6C50B',
  2624. },
  2625. },
  2626. label: {
  2627. normal: {
  2628. formatter: '{b}',
  2629. position: 'right',
  2630. offset: [15, 0],
  2631. color: '#fff',
  2632. show: true
  2633. },
  2634. },
  2635. symbol: 'circle',
  2636. symbolSize: 9,
  2637. data: item[1].map(function (dataItem) {
  2638. return {
  2639. itemStyle: {
  2640. color: '#fff' // 修改标点的颜色
  2641. },
  2642. //在这里定义你所要展示的数据
  2643. name: dataItem[0].name,
  2644. value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
  2645. }
  2646. }),
  2647. })
  2648. })
  2649. let option = {
  2650. tooltip: {
  2651. trigger: "item",
  2652. padding: 15,
  2653. backgroundColor: 'rgba(0, 0, 0, 0)',
  2654. enterable: true,
  2655. transitionDuration: 1,
  2656. formatter: (params, ticket, callback) => {
  2657. // 清空所有轮播
  2658. for (var k in this.geoCoordMap) {
  2659. this.mapChart.dispatchAction({
  2660. // type: 'geoUnSelect',
  2661. type: 'downplay',
  2662. name: k,
  2663. })
  2664. }
  2665. // 如果鼠标滑动到线线上面,则返回空
  2666. this.mapChart.dispatchAction({
  2667. // type: 'geoSelect',
  2668. type: 'highlight',
  2669. name: params.name,
  2670. })
  2671. if (params.componentSubType == 'lines') {
  2672. return
  2673. }
  2674. if (params.componentSubType == 'scatter') {
  2675. let tipHtml = `
  2676. <div class="tooltip-cont">
  2677. <p>数量:<span>${data[params.dataIndex].value2}</span></p>
  2678. </div>`
  2679. callback(ticket, tipHtml)
  2680. return tipHtml
  2681. }
  2682. if (params.componentSubType == 'map') {
  2683. let tipHtml = `
  2684. <div class="tooltip-cont">
  2685. <p>数量:<span>${data[params.dataIndex].value2}</span></p>
  2686. </div>`
  2687. callback(ticket, tipHtml)
  2688. return tipHtml
  2689. }
  2690. },
  2691. },
  2692. geo: {
  2693. show: true,
  2694. map: 'shanxi',
  2695. layoutCenter: ['50.5%', '52%'], //地图位置
  2696. layoutSize: '100%',
  2697. layoutCenter: ["50%", "50%"], //地图位置
  2698. layoutSize: '100%',
  2699. zoom: 1.1, //当前视角的缩放比例
  2700. // roam: true, //是否开启平游或缩放
  2701. scaleLimit: { //滚轮缩放的极限控制
  2702. min: 1,
  2703. max: 2
  2704. },
  2705. roam: false,
  2706. itemStyle: {
  2707. normal: {
  2708. areaColor: '#25B9E9',
  2709. shadowColor: '#25B9E9',
  2710. borderWidth: 6, //设置外层边框
  2711. borderColor: '#00FFFF',
  2712. shadowOffsetX: 5,
  2713. shadowOffsetY: 5,
  2714. shadowBlur: 5,
  2715. },
  2716. emphasis: {
  2717. areaColor: '#013d95',
  2718. borderColor: '#e7e1a0',
  2719. borderWidth: 4, //设置外层边框
  2720. },
  2721. },
  2722. },
  2723. series: [{
  2724. type: 'map',
  2725. mapType: 'shanxi',
  2726. aspectScale: 0.75,
  2727. layoutCenter: ["50%", "50%"], //地图位置
  2728. layoutSize: '100%',
  2729. zoom: 1.1, //当前视角的缩放比例
  2730. // roam: true, //是否开启平游或缩放
  2731. scaleLimit: { //滚轮缩放的极限控制
  2732. min: 1,
  2733. max: 2
  2734. },
  2735. label: {
  2736. normal: {
  2737. show: true,
  2738. position: 'right',
  2739. formatter: '{b}',
  2740. color: '#fff',
  2741. fontSize: 32,
  2742. fontWeight: "bolder"
  2743. }
  2744. },
  2745. itemStyle: {
  2746. normal: {
  2747. areaColor: '#1C4FBB',
  2748. borderColor: 'rgba(5,216,252,0.7)',
  2749. borderWidth: 6,//隐藏省界线
  2750. shadowColor: 'rgba(5,216,252,0.7)',
  2751. shadowBlur: 90
  2752. },
  2753. emphasis: {
  2754. areaColor: 'rgba(25,79,183,0.6)',
  2755. borderColor: '#d4bc1d',
  2756. borderWidth: 8, //设置外层边框
  2757. label: {
  2758. color: "#fff"
  2759. }
  2760. }
  2761. },
  2762. data: data,
  2763. },
  2764. // 区域散点图
  2765. {
  2766. type: 'effectScatter',
  2767. coordinateSystem: 'geo',
  2768. zlevel: 2,
  2769. rippleEffect: {
  2770. //涟漪特效
  2771. period: 2, //动画时间,值越小速度越快
  2772. brushType: 'stroke', //波纹绘制方式 stroke, fill
  2773. scale: 8, //波纹圆环最大限制,值越大波纹越大
  2774. color: '#d4bc1d',
  2775. },
  2776. emphasis: {
  2777. itemStyle: {
  2778. color: '#d4bc1d'
  2779. }
  2780. },
  2781. label: {
  2782. show: true,
  2783. normal: {
  2784. show: false
  2785. },
  2786. },
  2787. symbol: 'circle',
  2788. symbolSize: 30,
  2789. data: series[1].data,
  2790. },
  2791. // 线 和 点
  2792. {
  2793. type: 'lines',
  2794. zlevel: 1, //设置这个才会有轨迹线的小尾巴
  2795. effect: {
  2796. show: true,
  2797. period: 3,
  2798. trailLength: 0.1,
  2799. color: '#d4bc1d', //流动点颜色
  2800. symbol: 'arrow',
  2801. symbolSize: 15
  2802. },
  2803. lineStyle: {
  2804. color: '#d4bc1d', //线条颜色
  2805. show: true,
  2806. type: "dashed",
  2807. width: 5,
  2808. opacity: 0.4,
  2809. curveness: 0.2
  2810. },
  2811. data: series[0].data
  2812. },
  2813. ],
  2814. }
  2815. let that = this
  2816. this.mapChart.on('click', function (params) {
  2817. if (params.name == '太原市') {
  2818. that.showChartLTipDouble('太原市')
  2819. }
  2820. })
  2821. tools.loopShowTooltip(this.mapChart, option, {
  2822. interval: 2000,
  2823. loopSeries: false,
  2824. });
  2825. this.mapChart.setOption(option)
  2826. },
  2827. initTwoBarEcharts(el, data) {
  2828. this.twoBar = echarts.init(el);
  2829. option = {
  2830. tooltip: {
  2831. show: true,
  2832. trigger: 'axis',
  2833. textStyle: {
  2834. fontSize: 30,
  2835. color: '#A3E2F4'
  2836. },
  2837. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  2838. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  2839. }
  2840. },
  2841. grid: {
  2842. top: '15%',
  2843. right: '3%',
  2844. left: '14%',
  2845. bottom: '15%'
  2846. },
  2847. xAxis: [{
  2848. type: 'category',
  2849. data: data.x,
  2850. axisLine: {
  2851. lineStyle: {
  2852. color: 'rgba(255,255,255,0.12)'
  2853. }
  2854. },
  2855. axisLabel: {
  2856. color: '#e2e9ff',
  2857. textStyle: {
  2858. fontSize: 26
  2859. },
  2860. },
  2861. }],
  2862. yAxis: [{
  2863. name: '',
  2864. axisLabel: {
  2865. formatter: '{value}',
  2866. color: '#e2e9ff',
  2867. textStyle: {
  2868. fontSize: 26
  2869. },
  2870. },
  2871. axisLine: {
  2872. show: false,
  2873. lineStyle: {
  2874. color: 'rgba(255,255,255,1)'
  2875. }
  2876. },
  2877. splitLine: {
  2878. lineStyle: {
  2879. color: 'rgba(255,255,255,0.12)'
  2880. }
  2881. }
  2882. }],
  2883. series: [{
  2884. type: 'bar',
  2885. data: data.y,
  2886. barWidth: '20px',
  2887. itemStyle: {
  2888. normal: {
  2889. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2890. offset: 0,
  2891. color: 'rgba(0,244,255,1)' // 0% 处的颜色
  2892. }, {
  2893. offset: 1,
  2894. color: 'rgba(0,77,167,1)' // 100% 处的颜色
  2895. }], false),
  2896. barBorderRadius: [30, 30, 30, 30],
  2897. shadowColor: 'rgba(0,160,221,1)',
  2898. shadowBlur: 4,
  2899. }
  2900. },
  2901. }]
  2902. };
  2903. this.twoBar.setOption(option);
  2904. tools.loopShowTooltip(this.twoBar, option, {
  2905. nterval: 2000,
  2906. loopSeries: true,
  2907. });
  2908. },
  2909. initEchartsBar(el, data) {
  2910. let chart = echarts.init(el);
  2911. let xLabel = data.x
  2912. option = {
  2913. grid: {
  2914. top: "15%",
  2915. bottom: "15%",//也可设置left和right设置距离来控制图表的大小
  2916. left: "1%",
  2917. right: "1%"
  2918. },
  2919. tooltip: {
  2920. show: true,
  2921. trigger: 'axis',
  2922. textStyle: {
  2923. fontSize: 30,
  2924. color: '#A3E2F4'
  2925. },
  2926. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  2927. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  2928. },
  2929. formatter: '{b}<br />{a0}: {c0}',
  2930. },
  2931. xAxis: {
  2932. data: xLabel,
  2933. axisLine: {
  2934. show: true, //隐藏X轴轴线
  2935. lineStyle: {
  2936. color: '#11417a'
  2937. }
  2938. },
  2939. axisTick: {
  2940. show: false //隐藏X轴刻度
  2941. },
  2942. axisLabel: {
  2943. show: true,
  2944. margin: 14,
  2945. fontSize: 30,
  2946. textStyle: {
  2947. color: "#fff" //X轴文字颜色
  2948. }
  2949. },
  2950. },
  2951. yAxis: [
  2952. {
  2953. type: "value",
  2954. gridIndex: 0,
  2955. // splitNumber: 4,
  2956. splitLine: {
  2957. show: false,
  2958. lineStyle: {
  2959. color: '#A3C0DF',
  2960. width: 1
  2961. },
  2962. },
  2963. axisTick: {
  2964. show: false
  2965. },
  2966. axisLine: {
  2967. show: false,
  2968. lineStyle: {
  2969. color: '#A3C0DF'
  2970. }
  2971. },
  2972. axisLabel: {
  2973. show: true,
  2974. margin: 14,
  2975. fontSize: 26,
  2976. textStyle: {
  2977. color: "#fff" //X轴文字颜色
  2978. }
  2979. },
  2980. },
  2981. ],
  2982. series: [
  2983. {
  2984. name: "实习实训",
  2985. type: "bar",
  2986. barWidth: 20,
  2987. itemStyle: {
  2988. normal: {
  2989. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2990. offset: 0,
  2991. color: "#07ecd9"
  2992. },
  2993. {
  2994. offset: 1,
  2995. color: "#034881"
  2996. }
  2997. ])
  2998. }
  2999. },
  3000. data: data.y,
  3001. z: 10,
  3002. zlevel: 0,
  3003. "label": {
  3004. "show": true,
  3005. "position": "top",
  3006. "distance": 10,
  3007. fontSize: 26,
  3008. "color": "#01fff4"
  3009. }
  3010. },
  3011. {
  3012. // 分隔
  3013. type: "pictorialBar",
  3014. itemStyle: {
  3015. normal: {
  3016. color: "#0F375F"
  3017. }
  3018. },
  3019. symbolRepeat: "fixed",
  3020. symbolMargin: 6,
  3021. symbol: "rect",
  3022. symbolClip: true,
  3023. symbolSize: [20, 2],
  3024. symbolPosition: "start",
  3025. symbolOffset: [0, -1],
  3026. // symbolBoundingData: this.total,
  3027. data: data.y,
  3028. width: 25,
  3029. z: 0,
  3030. zlevel: 1,
  3031. },
  3032. ]
  3033. };
  3034. chart.setOption(option);
  3035. tools.loopShowTooltip(chart, option, {
  3036. nterval: 2000,
  3037. loopSeries: true,
  3038. });
  3039. },
  3040. initEchartStack(el, data) {
  3041. this.mobilizeFL = echarts.init(el);
  3042. option = {
  3043. tooltip: {
  3044. show: true,
  3045. trigger: 'axis',
  3046. textStyle: {
  3047. fontSize: 30,
  3048. color: '#A3E2F4'
  3049. },
  3050. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  3051. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  3052. }
  3053. },
  3054. legend: {
  3055. data: ["入职","内部调动","跨二级调出","跨二级调入",],
  3056. align: 'left',
  3057. itemGap: 50,
  3058. // x: 'right',
  3059. right: '1%',
  3060. y: '1%',
  3061. icon: 'rect',
  3062. textStyle: {
  3063. color: "#fff",
  3064. fontSize: 26
  3065. }
  3066. },
  3067. xAxis: {
  3068. axisTick: {
  3069. show: false,
  3070. },
  3071. axisLine: {
  3072. show: false,
  3073. },
  3074. axisLabel: {
  3075. show: true,
  3076. margin: 14,
  3077. fontSize: 26,
  3078. textStyle: {
  3079. color: "#fff" //X轴文字颜色
  3080. }
  3081. },
  3082. data: data.x,
  3083. },
  3084. yAxis: {
  3085. type: "value",
  3086. gridIndex: 0,
  3087. // splitNumber: 4,
  3088. splitLine: {
  3089. show: false,
  3090. lineStyle: {
  3091. color: '#A3C0DF',
  3092. width: 1
  3093. },
  3094. },
  3095. axisTick: {
  3096. show: false
  3097. },
  3098. axisLine: {
  3099. show: false,
  3100. lineStyle: {
  3101. color: '#A3C0DF'
  3102. }
  3103. },
  3104. axisLabel: {
  3105. show: true,
  3106. margin: 14,
  3107. fontSize: 26,
  3108. textStyle: {
  3109. color: "#fff" //X轴文字颜色
  3110. }
  3111. },
  3112. },
  3113. series: [
  3114. {
  3115. type: 'bar',
  3116. name:"入职",
  3117. stack: 'total',
  3118. barWidth: 26,
  3119. itemStyle: {
  3120. barBorderRadius: [30, 30, 30, 30],
  3121. },
  3122. data: data.y1,
  3123. },
  3124. {
  3125. type: 'bar',
  3126. stack: 'total',
  3127. name:"内部调动",
  3128. barWidth: 26,
  3129. itemStyle: {
  3130. barBorderRadius: [30, 30, 30, 30],
  3131. },
  3132. data: data.y2,
  3133. },
  3134. {
  3135. type: 'bar',
  3136. name:"跨二级调出",
  3137. stack: 'total',
  3138. barWidth: 26,
  3139. itemStyle: {
  3140. barBorderRadius: [30, 30, 30, 30],
  3141. },
  3142. data: data.y3,
  3143. },
  3144. {
  3145. type: 'bar',
  3146. stack: 'total',
  3147. name:"跨二级调入",
  3148. barWidth: 26,
  3149. itemStyle: {
  3150. barBorderRadius: [30, 30, 30, 30],
  3151. },
  3152. data: data.y4,
  3153. },
  3154. ],
  3155. };
  3156. this.mobilizeFL.setOption(option);
  3157. tools.loopShowTooltip(this.mobilizeFL, option, {
  3158. nterval: 2000,
  3159. loopSeries: true,
  3160. });
  3161. },
  3162. handleWarning() {
  3163. this.isShowMark = true
  3164. this.salaryFlag = true
  3165. this.pdfFlag = false
  3166. },
  3167. handleMark() {
  3168. this.isShowMark = false
  3169. this.salaryFlag = false
  3170. this.pdfFlag = false
  3171. },
  3172. handleChange() {
  3173. if (!this.changeFlag) {
  3174. this.config2 = {
  3175. waitTime: 2000,
  3176. header: ["单位名称", "算薪进度", "算薪周期", ""],
  3177. rowNum: 4,
  3178. data: [
  3179. ["山焦西山铁路公司", '未参与算薪', '2023/6'],
  3180. ["山焦汾西曙光煤矿", '未参与算薪', '2023/6'],
  3181. ["山焦华晋沙曲选煤厂", '未参与算薪', '2023/6'],
  3182. ["山焦西山铁路公司", '未参与算薪', '2023/6'],
  3183. ["山焦山煤霍尔辛赫", '未参与算薪', '2023/6'],
  3184. ],
  3185. align: ["center", "center", "center", "center", "center"],
  3186. headerBGC: "#153A62",
  3187. oddRowBGC: "#061F42",
  3188. evenRowBGC: "#0C284A",
  3189. }
  3190. this.changeFlag = true
  3191. } else {
  3192. this.config2 = {
  3193. waitTime: 2000,
  3194. header: ["单位名称", "已算薪组织", "未算薪组织", "算薪进度百分比", ""],
  3195. rowNum: 4,
  3196. data: [
  3197. ["山焦西山", '290', '46', '86%'],
  3198. ["山焦汾西", '10', '38', '21%'],
  3199. ["山焦霍州", '314', '3', '99%'],
  3200. ["山焦山煤", '16', '35', '31%'],
  3201. ["山焦华晋", '7', '1', '87%'],
  3202. ],
  3203. align: ["center", "center", "center", "center", "center"],
  3204. headerBGC: "#153A62",
  3205. oddRowBGC: "#061F42",
  3206. evenRowBGC: "#0C284A",
  3207. }
  3208. this.changeFlag = false
  3209. }
  3210. },
  3211. },
  3212. })