index.js 140 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836
  1. let app = new Vue({
  2. el: "#app",
  3. data () {
  4. return {
  5. count: 0, //重点项目两线指标轮到哪个
  6. list: [], //重点项目两线指标数组
  7. countType: 0, //重点项目两线指标数组
  8. mapShow: false, // false为中国地图 true为山西地图
  9. leftEcharts1: "",
  10. leftEcharts2: "",
  11. leftEcharts3: "",
  12. leftEcharts4: "",
  13. leftEcharts5: "",
  14. leftEcharts6: "",
  15. leftEcharts7: "",
  16. leftEcharts8: "",
  17. leftEcharts9: "",
  18. leftEcharts10: "",
  19. leftEcharts11: "",
  20. leftEcharts12: '',
  21. leftEcharts13: '',
  22. leftEcharts14: '',
  23. leftEcharts15: '',
  24. leftEcharts16: '', // 中国地图背景地球
  25. shanxiMap: "", // 山西地图
  26. chinaMap: '', // 中国地图
  27. industryProportion: 1, // 主辅业占比轮播
  28. industryLayout: 0, //产业布局分析
  29. time1: "", // 4秒定时器
  30. time2: "", // 针对投前产业布局分析的定时器
  31. storageRecordConfig: {
  32. waitTime: "2000",
  33. hoverPause: true,
  34. header: ["企业集团", "项目名 ", "投资总额"],
  35. headerHeight: 80,
  36. headerBGC: '#69C0FF20',
  37. oddRowBGC: '#011e4800',
  38. evenRowBGC: '#69C0FF20',
  39. // oddRowBGC: '#05507b33',
  40. rowNum: 6,
  41. columnWidth: [150, 450, 150],
  42. align: ["center", "center", "center"],
  43. data: [
  44. ["国际能源", "娄烦县120MW智慧光伏发电项目+10%储能", "6.78亿元"],
  45. ["国际能源", "平朔矿区150MW农光储氢一体化项目", "7.84亿元"],
  46. ["汾酒集团", "汾酒2030技改原酒产储能扩建项目(一期)", "91.02亿元"],
  47. [
  48. "大地控股",
  49. "山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目",
  50. "8.67亿元",
  51. ],
  52. ["潞安化工", "分布式光伏发电项目", "2.01亿元"],
  53. ["太重集团", "设立太重(大同)新能源产业投资公司", "0.30亿元"],
  54. [
  55. "大地控股",
  56. "山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目",
  57. "3.60亿元",
  58. ],
  59. [
  60. "大地控股",
  61. "山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目",
  62. "3.11亿元",
  63. ],
  64. ["汾酒集团", "保健酒园区新增原酒产能项目", "4.98亿元"],
  65. ["汾酒集团", "白玉酒厂改扩建项目", "4.96亿元"],
  66. ["华阳新材", "5GW高效光伏组件制造项目", "4.82亿元"],
  67. ["华新燃气", "吉县—延长输气管道项目(一期工程)", "3.54亿元"],
  68. ["太重集团", "建设液压挖掘机配套油缸项目", "2.60亿元"],
  69. [
  70. "华远陆港",
  71. "物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目",
  72. "6.60亿元",
  73. ],
  74. ["太重集团", "设立昔阳县晶能新能源有限公司", "0.50亿元"],
  75. ["山西建投", "设立山西低碳环保产业集团有限公司", "30.00亿元"],
  76. [
  77. "山西建投",
  78. "设立山西省太忻经济一体化发展投资集团有限公司",
  79. "30.00亿元",
  80. ],
  81. ["华新燃气", "设立山西华新液化天然气集团有限公司", "3.00亿元"],
  82. ["交控集团", "设立山西交控新能源发展有限公司", "3.00亿元"],
  83. ],
  84. },
  85. storageRecordConfig2: {
  86. header: ['企业集团', '项目名称', '投资金额'],
  87. headerBGC: '#69C0FF20',
  88. oddRowBGC: '#011e4800',
  89. evenRowBGC: '#69C0FF20',
  90. headerHeight: '80',
  91. rowNum: 6,
  92. // columnWidth: [250],
  93. align: ['center', 'center', 'center'],
  94. data: [
  95. ["战略性新兴产业", "新材料", "20,340.00"],
  96. ["战略性新兴产业", "新材料", "20,340.00"],
  97. ["战略性新兴产业", "新材料", "20,340.00"],
  98. ["战略性新兴产业", "新材料", "20,340.00"],
  99. ["战略性新兴产业", "新材料", "20,340.00"],
  100. ["战略性新兴产业", "新材料", "20,340.00"],
  101. ["战略性新兴产业", "新材料", "20,340.00"],
  102. ["战略性新兴产业", "新材料", "20,340.00"],
  103. ["战略性新兴产业", "新材料", "20,340.00"],
  104. ],
  105. },
  106. meansList: [
  107. {
  108. label: "初步设计",
  109. value: "106",
  110. },
  111. {
  112. label: "详细设计",
  113. value: "103",
  114. },
  115. {
  116. label: "施工",
  117. value: "62",
  118. },
  119. {
  120. label: "完工",
  121. value: "35",
  122. },
  123. {
  124. label: "验收",
  125. value: "42",
  126. },
  127. {
  128. label: "结算",
  129. value: "33",
  130. },
  131. ],
  132. stockRightList: [
  133. {
  134. label: "前期准备",
  135. value: "66",
  136. },
  137. {
  138. label: "变更登记",
  139. value: "77",
  140. },
  141. ],
  142. costList: [
  143. {
  144. num: 160,
  145. value: 284,
  146. status: "正偏差",
  147. },
  148. {
  149. num: 280,
  150. value: 129,
  151. status: "容差内",
  152. },
  153. {
  154. num: 103,
  155. value: 1082,
  156. status: "负偏差",
  157. },
  158. ],
  159. investData: {
  160. investList: [
  161. {
  162. name: "大地控股",
  163. yse: "26.79",
  164. yqhte: "9.64",
  165. czrde: "121.59",
  166. jse: "120.13",
  167. fke: "36.4",
  168. url: "./img/logos/logo15.png",
  169. },
  170. {
  171. name: "云时代",
  172. yse: "21.79",
  173. yqhte: "9.64",
  174. czrde: "121.59",
  175. jse: "120.13",
  176. fke: "36.4",
  177. url: "./img/logos/logo16.png",
  178. },
  179. {
  180. name: "华舰体育",
  181. yse: "26.79",
  182. yqhte: "9.64",
  183. czrde: "121.59",
  184. jse: "120.13",
  185. fke: "36.4",
  186. url: "./img/logos/logo17.png",
  187. },
  188. {
  189. name: "神农科技",
  190. yse: "26.79",
  191. yqhte: "9.64",
  192. czrde: "121.59",
  193. jse: "120.13",
  194. fke: "36.4",
  195. url: "./img/logos/logo18.png",
  196. },
  197. {
  198. name: "山西焦煤",
  199. yse: "26.79",
  200. yqhte: "9.64",
  201. czrde: "121.59",
  202. jse: "120.13",
  203. fke: "36.4",
  204. url: "./img/logos/logo1.png",
  205. },
  206. {
  207. name: "晋能控股",
  208. yse: "26.79",
  209. yqhte: "9.64",
  210. czrde: "121.59",
  211. jse: "120.13",
  212. fke: "36.4",
  213. url: "./img/logos/logo2.png",
  214. },
  215. {
  216. name: "华阳新材",
  217. yse: "26.79",
  218. yqhte: "9.64",
  219. czrde: "121.59",
  220. jse: "120.13",
  221. fke: "36.4",
  222. url: "./img/logos/logo3.png",
  223. },
  224. {
  225. name: "潞安化工",
  226. yse: "26.79",
  227. yqhte: "9.64",
  228. czrde: "121.59",
  229. jse: "120.13",
  230. fke: "36.4",
  231. url: "./img/logos/logo4.png",
  232. },
  233. {
  234. name: "华新燃气",
  235. yse: "26.79",
  236. yqhte: "9.64",
  237. czrde: "121.59",
  238. jse: "120.13",
  239. fke: "36.4",
  240. url: "./img/logos/logo5.png",
  241. },
  242. {
  243. name: "太重集团",
  244. yse: "26.79",
  245. yqhte: "9.64",
  246. czrde: "121.59",
  247. jse: "120.13",
  248. fke: "36.4",
  249. url: "./img/logos/logo6.png",
  250. },
  251. {
  252. name: "国际能源",
  253. yse: "26.79",
  254. yqhte: "9.64",
  255. czrde: "121.59",
  256. jse: "120.13",
  257. fke: "36.4",
  258. url: "./img/logos/logo7.png",
  259. },
  260. {
  261. name: "华远陆港",
  262. yse: "26.79",
  263. yqhte: "9.64",
  264. czrde: "121.59",
  265. jse: "120.13",
  266. fke: "36.4",
  267. url: "./img/logos/logo8.png",
  268. },
  269. {
  270. name: "水控集团",
  271. yse: "26.79",
  272. yqhte: "9.64",
  273. czrde: "121.59",
  274. jse: "120.13",
  275. fke: "36.4",
  276. url: "./img/logos/logo9.png",
  277. },
  278. {
  279. name: "文旅集团",
  280. yse: "26.79",
  281. yqhte: "9.64",
  282. czrde: "121.59",
  283. jse: "120.13",
  284. fke: "36.4",
  285. url: "./img/logos/logo10.png",
  286. },
  287. {
  288. name: "交控集团",
  289. yse: "26.79",
  290. yqhte: "9.64",
  291. czrde: "121.59",
  292. jse: "120.13",
  293. fke: "36.4",
  294. url: "./img/logos/logo11.png",
  295. },
  296. {
  297. name: "航产集团",
  298. yse: "26.79",
  299. yqhte: "9.64",
  300. czrde: "121.59",
  301. jse: "120.13",
  302. fke: "36.4",
  303. url: "./img/logos/logo12.png",
  304. },
  305. {
  306. name: "山西建投",
  307. yse: "26.79",
  308. yqhte: "9.64",
  309. czrde: "121.59",
  310. jse: "120.13",
  311. fke: "36.4",
  312. url: "./img/logos/logo13.png",
  313. },
  314. {
  315. name: "汾酒集团",
  316. yse: "26.79",
  317. yqhte: "9.64",
  318. czrde: "121.59",
  319. jse: "120.13",
  320. fke: "36.4",
  321. url: "./img/logos/logo14.png",
  322. },
  323. ],
  324. },
  325. riskData: {
  326. x: [
  327. { name: "大地控股", value: [14, 13, 6, 15, 13, 4] },
  328. { name: "云时代", value: [15, 12, 12, 10, 24, 6] },
  329. { name: "华舰体育", value: [14, 13, 6, 15, 13, 4] },
  330. { name: "神农科技", value: [14, 13, 6, 15, 13, 4] },
  331. { name: "山西焦煤", value: [14, 13, 6, 15, 13, 4] },
  332. { name: "晋能控股", value: [14, 13, 6, 15, 13, 4] },
  333. { name: "华阳新材", value: [14, 13, 6, 15, 13, 4] },
  334. { name: "潞安化工", value: [14, 13, 6, 15, 13, 4] },
  335. { name: "华新燃气", value: [14, 13, 6, 15, 13, 4] },
  336. { name: "太重集团", value: [14, 13, 6, 15, 13, 4] },
  337. { name: "国际能源", value: [14, 13, 6, 15, 13, 4] },
  338. { name: "华远陆港", value: [14, 13, 6, 15, 13, 4] },
  339. { name: "水控集团", value: [14, 13, 6, 15, 13, 4] },
  340. { name: "文旅集团", value: [14, 13, 6, 15, 13, 4] },
  341. { name: "交控集团", value: [14, 13, 6, 15, 13, 4] },
  342. { name: "航产集团", value: [14, 13, 6, 15, 13, 4] },
  343. { name: "山西建投", value: [14, 13, 6, 15, 13, 4] },
  344. { name: "汾酒集团", value: [14, 13, 6, 15, 13, 4] },
  345. ],
  346. y1: [
  347. 120, 110, 200, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
  348. 20, 220, 123, 345,
  349. ],
  350. y2: [
  351. 120, 110, 210, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
  352. 20, 220, 123, 345,
  353. ],
  354. y3: [
  355. 120, 110, 230, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
  356. 20, 220, 123, 345,
  357. ],
  358. },
  359. inner: 0,
  360. innerDeg: 0,
  361. timer: null,
  362. witchs: 0,
  363. topIndex: 0,
  364. echartR1Fd1: true,
  365. echartR2Fd2: true,
  366. r3Index: 0,
  367. riskData1: {
  368. x: [
  369. "大地控股",
  370. "云时代",
  371. "华舰体育",
  372. "神农科技",
  373. "山西焦煤",
  374. "晋能控股",
  375. "华阳新材",
  376. "潞安化工",
  377. "华新燃气",
  378. "太重集团",
  379. "国际能源",
  380. "华远陆港",
  381. "水控集团",
  382. "文旅集团",
  383. "交控集团",
  384. "航产集团",
  385. "山西建投",
  386. "汾酒集团",
  387. ],
  388. y1: [
  389. 100, 45, 67, 110, 108, 120, 110, 45, 67, 110, 108, 34, 100, 45, 67,
  390. 110, 108, 34,
  391. ],
  392. y2: [
  393. 120, 50, 67, 130, 56, 233, 100, 78, 98, 100, 120, 78, 120, 90, 56,
  394. 120, 110, 78,
  395. ],
  396. y3: [
  397. 130, 76, 67, 120, 89, 111, 87, 123, 56, 65, 45, 98, 230, 78, 99, 130,
  398. 56, 98,
  399. ],
  400. y4: [
  401. 90, 100, 67, 90, 110, 120, 34, 231, 34, 78, 78, 100, 110, 120, 67, 89,
  402. 78, 110,
  403. ],
  404. y5: [
  405. 110, 110, 67, 110, 120, 95, 78, 45, 120, 110, 98, 233, 100, 45, 67,
  406. 98, 98, 34,
  407. ],
  408. },
  409. };
  410. },
  411. created () { },
  412. beforeDestroy () {
  413. clearInterval(this.timer);
  414. clearInterval(this.time1);
  415. clearInterval(this.time2);
  416. },
  417. mounted () {
  418. let that = this
  419. this.time4s();
  420. this.timeNs();
  421. this.filterLpData();
  422. this.lpRotate();
  423. setTimeout(() => {
  424. if (that.mapShow) {
  425. that.leftEcharts12Fun()
  426. that.leftEcharts14Fun()
  427. that.leftEcharts9Fun()
  428. that.leftEcharts15Fun()
  429. that.leftEcharts13Fun()
  430. that.shanxiEchartsFun()
  431. } else {
  432. that.chinaEchartsFun()
  433. that.leftEcharts16Fun()
  434. }
  435. this.leftEcharts1Fun();
  436. this.leftEcharts2Fun();
  437. this.leftEcharts3Fun();
  438. this.leftEcharts4Fun();
  439. this.leftEcharts5Fun();
  440. this.leftEcharts6Fun();
  441. this.leftEcharts7Fun();
  442. this.leftEcharts8Fun();
  443. this.leftEcharts10Fun();
  444. this.leftEcharts11Fun();
  445. this.initChartR1();
  446. this.initChartR2();
  447. this.initChartR4();
  448. });
  449. },
  450. methods: {
  451. initChartR1 () {
  452. let right5 = [
  453. [
  454. ["山西焦煤", 43.8],
  455. ["晋能控股", 49.8],
  456. ["华阳新材", 46],
  457. ["潞安化工", 53.8],
  458. ["华新燃气", 59],
  459. ["太重集团", 57],
  460. ["国际能源", 44],
  461. ["华远陆港", 46],
  462. ["万家寨水控", 57],
  463. ["文旅集团", 62.8],
  464. ["山西交控", 55.8],
  465. ["航产集团", 44.2],
  466. ["山西建投", 49.6],
  467. ["汾酒集团", 66.65],
  468. ["大地控股", 45.6],
  469. ["云时代", 63.9],
  470. ["华舰体育", 70.6],
  471. ["神农科技", 45.6],
  472. ],
  473. [
  474. ["山西焦煤", 25.8],
  475. ["晋能控股", 25.8],
  476. ["华阳新材", 38],
  477. ["潞安化工", 37.8],
  478. ["华新燃气", 28],
  479. ["太重集团", 38],
  480. ["国际能源", 28],
  481. ["华远陆港", 38],
  482. ["万家寨水控", 35.8],
  483. ["文旅集团", 22.8],
  484. ["山西交控", 25.8],
  485. ["航产集团", 24.2],
  486. ["山西建投", 23.6],
  487. ["汾酒集团", 26.65],
  488. ["大地控股", 25.6],
  489. ["云时代", 30.9],
  490. ["华舰体育", 38.6],
  491. ["神农科技", 35.6],
  492. ],
  493. [
  494. ["山西焦煤", 15.8],
  495. ["晋能控股", 15.8],
  496. ["华阳新材", 8],
  497. ["潞安化工", 17.8],
  498. ["华新燃气", 18],
  499. ["太重集团", 18],
  500. ["国际能源", 8],
  501. ["华远陆港", 5.8],
  502. ["万家寨水控", 5.8],
  503. ["文旅集团", 2.8],
  504. ["山西交控", 5.8],
  505. ["航产集团", 12.2],
  506. ["山西建投", 13.6],
  507. ["汾酒集团", 16.65],
  508. ["大地控股", 15.6],
  509. ["云时代", 13.9],
  510. ["华舰体育", 18.6],
  511. ["神农科技", 15.6],
  512. ],
  513. ];
  514. let that = this;
  515. let sumA = 42;
  516. // 所有在100范围外的全部变成0,其他值相应增加/减少sumA
  517. right5.forEach((item) => {
  518. item.forEach((item2) => {
  519. if (Number(item2[1]) < 0) {
  520. item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)));
  521. } else if (Number(item2[1]) > 0) {
  522. item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA);
  523. }
  524. if (Number(item2[1]) < -100 - sumA) {
  525. item2[1] = that.$set(item2, 1, 0);
  526. item2[1] = that.$set(item2, 2, 0);
  527. } else if (Number(item2[1]) > 100 + sumA) {
  528. item2[1] = that.$set(item2, 1, 0);
  529. item2[1] = that.$set(item2, 2, 0);
  530. }
  531. });
  532. });
  533. const itemStyle = {
  534. // opacity: 0.8,
  535. shadowBlur: 10,
  536. shadowOffsetX: 0,
  537. shadowOffsetY: 0,
  538. shadowColor: "rgba(0,0,0,0.3)",
  539. };
  540. let echartR1d1 = echarts.init(this.$refs["echartR1"]);
  541. echartR1d1.on("showTip", (params) => {
  542. // 如果是7或者15并且满足防抖则切换
  543. if (
  544. (params.dataIndex == 5 || params.dataIndex == 11) &&
  545. that.echartR2Fd
  546. ) {
  547. that.echartR2Fd = false;
  548. setTimeout(() => {
  549. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
  550. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
  551. echartR1d1.setOption(option);
  552. // 防止勿刷新做的防抖
  553. setTimeout(() => {
  554. that.echartR2Fd = true;
  555. }, 2000);
  556. }, 1900);
  557. // 如果是17表示到了最后一个,那么重新来一遍
  558. } else if (params.dataIndex == 17 && that.echartR2Fd) {
  559. that.echartR2Fd = false;
  560. setTimeout(() => {
  561. option.dataZoom[0].endValue = 0;
  562. option.dataZoom[0].startValue = 5;
  563. echartR1d1.setOption(option);
  564. // 防止勿刷新做的防抖
  565. setTimeout(() => {
  566. that.echartR2Fd = true;
  567. }, 2000);
  568. }, 1900);
  569. }
  570. });
  571. let option = {
  572. color: ["#74a55d", "#cea446", "#b84b4b"],
  573. dataZoom: [
  574. {
  575. // start: 9,//默认为@
  576. // end: 100,//黑认认为1@0
  577. type: "slider",
  578. show: false,
  579. // xAxisIndex: [0]
  580. handlesize: 0, //滑动条的 左右2个滑动条的大小
  581. startValue: 5, // 初始显示值
  582. endValue: 0, // 结束显示值
  583. height: 10, //组件高度
  584. left: "5%",
  585. right: "4%", //右边的距离
  586. bottom: "25%", //底边的距离
  587. borderColor: "#939",
  588. fillerColor: "#269cdb",
  589. borderRadius: 5,
  590. backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
  591. showDataShadow: false, //是否显示数据阴影
  592. showDetail: false, //即拖拽时候是否显示详细数值信息
  593. truerealtime: true, //是否实时更新
  594. filterMode: "filter",
  595. },
  596. {
  597. type: "inside",
  598. show: true,
  599. start: 1,
  600. end: 100,
  601. zoomOnMouseWheel: false, //滚轮是否触发缩放
  602. moveOnMouseMove: false, //鼠标滚轮触发滚动
  603. },
  604. ],
  605. legend: {
  606. top: 10,
  607. data: ["正偏差", "容差", "负偏差"],
  608. textStyle: {
  609. fontSize: 20,
  610. color: "#fff",
  611. fontFamily: "Microsoft YaHei",
  612. },
  613. },
  614. textStyle: {
  615. color: "#fff",
  616. },
  617. tooltip: {
  618. show: true,
  619. trigger: "axis",
  620. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  621. textStyle: {
  622. color: "#FFF", // 文字的颜色
  623. fontSize: "20", // 文字字体大小
  624. fontFamily: "Microsoft YaHei",
  625. },
  626. formatter: (data) => {
  627. return `${data[0].value[0]
  628. }<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color
  629. }"></span> ${data[0].seriesName}:${that.numFormat(
  630. data[0].data[2]
  631. )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color
  632. }"></span> ${data[1].seriesName}:${that.numFormat(
  633. data[1].data[2]
  634. )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color
  635. }"></span> ${data[2].seriesName}:${that.numFormat(
  636. data[2].data[2]
  637. )}亿`;
  638. },
  639. axisPointer: {
  640. // // type: 'cross',',
  641. },
  642. },
  643. grid: {
  644. top: "10%",
  645. right: "4%",
  646. left: "5%",
  647. bottom: "5%",
  648. },
  649. yAxis: {
  650. min: -101 - sumA,
  651. max: 101 + sumA,
  652. maxInterval: 1,
  653. splitLine: {
  654. show: false,
  655. // interval:,
  656. lineStyle: {
  657. color: "#68b4dd66",
  658. type: "dashed",
  659. },
  660. },
  661. axisLine: {
  662. show: false,
  663. },
  664. axisTick: {
  665. show: false,
  666. },
  667. axisLabel: {
  668. show: true,
  669. // formatter: '{value}',
  670. formatter (data) {
  671. if (data == 100 + sumA) {
  672. return "100%";
  673. } else if (data == -100 - sumA) {
  674. return "-100%";
  675. } else if (data == -5 - sumA) {
  676. return "-5%";
  677. } else if (data == 5 + sumA) {
  678. return "5%";
  679. }
  680. },
  681. textStyle: {
  682. color: "#fff",
  683. fontSize: "20",
  684. fontFamily: "Microsoft YaHei",
  685. },
  686. },
  687. nameTextStyle: {
  688. color: "#fff",
  689. fontSize: 20,
  690. fontFamily: "Microsoft YaHei",
  691. },
  692. },
  693. xAxis: {
  694. data: commonCompany,
  695. axisLine: {
  696. show: false, //隐藏X轴轴线
  697. lineStyle: {
  698. color: "#005094",
  699. width: 1,
  700. },
  701. },
  702. splitLine: {
  703. show: true,
  704. lineStyle: {
  705. color: "#68b4dd66",
  706. type: "dashed",
  707. },
  708. },
  709. axisTick: {
  710. show: true, //隐藏X轴刻度
  711. },
  712. axisLabel: {
  713. show: true,
  714. // rotate: 40,
  715. padding: [0, 0, 0, 0],
  716. textStyle: {
  717. color: "#fff", //X轴文字颜色
  718. fontSize: 20,
  719. fontFamily: "Microsoft YaHei",
  720. },
  721. },
  722. },
  723. series: [
  724. {
  725. name: "正偏差",
  726. type: "scatter",
  727. itemStyle: itemStyle,
  728. data: right5[0],
  729. symbolSize: function (data) {
  730. if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
  731. return 40;
  732. } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
  733. return 70;
  734. } else if (data[2] > 100) {
  735. return 100;
  736. }
  737. },
  738. markLine: {
  739. symbol: "none",
  740. data: [
  741. {
  742. name: "100%",
  743. yAxis: 100 + sumA,
  744. lineStyle: {
  745. // color: '#fff',
  746. },
  747. label: {
  748. show: false,
  749. formatter: "{b}",
  750. position: "right",
  751. color: "#fff",
  752. fontSize: 20,
  753. label: {
  754. show: false,
  755. },
  756. },
  757. },
  758. {
  759. name: "5%",
  760. yAxis: 5 + sumA,
  761. lineStyle: {
  762. // color: '#fff',
  763. },
  764. label: {
  765. show: false,
  766. formatter: "{b}",
  767. position: "right",
  768. color: "#fff",
  769. fontSize: 20,
  770. },
  771. },
  772. {
  773. name: "-5%",
  774. yAxis: -5 - sumA,
  775. lineStyle: {
  776. // color: '#fff',
  777. },
  778. label: {
  779. show: false,
  780. formatter: "{b}",
  781. position: "right",
  782. color: "#fff",
  783. fontSize: 20,
  784. },
  785. },
  786. {
  787. name: "100%",
  788. yAxis: -100 - sumA,
  789. lineStyle: {
  790. // color: '#fff',
  791. },
  792. label: {
  793. show: false,
  794. formatter: "{b}",
  795. position: "right",
  796. color: "#fff",
  797. fontSize: 20,
  798. },
  799. },
  800. ],
  801. },
  802. },
  803. {
  804. name: "容差",
  805. type: "scatter",
  806. itemStyle: itemStyle,
  807. data: right5[1],
  808. symbolSize: function (data) {
  809. if ((data[1] > 0 && data[1] < 50) || data[1] == 50) {
  810. return 40;
  811. } else if ((data[1] > 50 && data[1] < 100) || data[1] == 100) {
  812. return 70;
  813. } else if (data[1] > 100) {
  814. return 100;
  815. }
  816. },
  817. },
  818. {
  819. name: "负偏差",
  820. type: "scatter",
  821. itemStyle: itemStyle,
  822. data: right5[2],
  823. symbolSize: function (data) {
  824. if ((data[1] > 0 && data[1] < 50) || data[1] == 50) {
  825. return 40;
  826. } else if ((data[1] > 50 && data[1] < 100) || data[1] == 100) {
  827. return 70;
  828. } else if (data[1] > 100) {
  829. return 100;
  830. }
  831. },
  832. },
  833. ],
  834. };
  835. echartR1d1.on("click", function (param) {
  836. // that.showChartLTipDouble(param.name)
  837. that.projectListTipShow = true;
  838. });
  839. echartR1d1.setOption(option);
  840. tools.loopShowTooltip(echartR1d1, option, {
  841. interval: 2000,
  842. loopSeries: true,
  843. });
  844. },
  845. initChartR2 () {
  846. let that = this;
  847. that.right1Chart = echarts.init(this.$refs["echartR2"]);
  848. that.right1Chart.on("showTip", (params) => {
  849. that.r3Index = params.dataIndex;
  850. that.initChartR3();
  851. console.log(that.r3Index);
  852. // 如果是7或者15并且满足防抖则切换
  853. if (
  854. (params.dataIndex == 5 || params.dataIndex == 11) &&
  855. that.echartR1Fd1
  856. ) {
  857. that.echartR1Fd1 = false;
  858. setTimeout(() => {
  859. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
  860. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
  861. that.right1Chart.setOption(option);
  862. // 防止勿刷新做的防抖
  863. setTimeout(() => {
  864. that.echartR1Fd1 = true;
  865. }, 2000);
  866. }, 1900);
  867. // 如果是17表示到了最后一个,那么重新来一遍
  868. } else if (params.dataIndex == 17 && that.echartR1Fd1) {
  869. that.echartR1Fd1 = false;
  870. setTimeout(() => {
  871. option.dataZoom[0].endValue = 0;
  872. option.dataZoom[0].startValue = 5;
  873. that.right1Chart.setOption(option);
  874. // 防止勿刷新做的防抖
  875. setTimeout(() => {
  876. that.echartR1Fd1 = true;
  877. }, 2000);
  878. }, 1900);
  879. }
  880. });
  881. let option = {
  882. color: [
  883. {
  884. type: "linear",
  885. x: 0,
  886. y: 0,
  887. x2: 0,
  888. y2: 1,
  889. colorStops: [
  890. {
  891. offset: 0,
  892. color: "#91231F", // 0% 处的颜色
  893. },
  894. {
  895. offset: 1,
  896. color: "#F98784", // 100% 处的颜色
  897. },
  898. ],
  899. global: false, // 缺省为 false
  900. },
  901. {
  902. type: "linear",
  903. x: 0,
  904. y: 0,
  905. x2: 0,
  906. y2: 1,
  907. colorStops: [
  908. {
  909. offset: 0,
  910. color: "#9F7F00", // 0% 处的颜色
  911. },
  912. {
  913. offset: 1,
  914. color: "#FBE463", // 100% 处的颜色
  915. },
  916. ],
  917. global: false, // 缺省为 false
  918. },
  919. {
  920. type: "linear",
  921. x: 0,
  922. y: 0,
  923. x2: 0,
  924. y2: 1,
  925. colorStops: [
  926. {
  927. offset: 0,
  928. color: "#07806E", // 0% 处的颜色
  929. },
  930. {
  931. offset: 1,
  932. color: "#79FFEB", // 100% 处的颜色
  933. },
  934. ],
  935. global: false, // 缺省为 false
  936. },
  937. ],
  938. dataZoom: [
  939. {
  940. // start: 9,//默认为@
  941. // end: 100,//黑认认为1@0
  942. type: "slider",
  943. show: false,
  944. // xAxisIndex: [0]
  945. handlesize: 0, //滑动条的 左右2个滑动条的大小
  946. startValue: 5, // 初始显示值
  947. endValue: 0, // 结束显示值
  948. height: 10, //组件高度
  949. left: "5%",
  950. right: "4%", //右边的距离
  951. bottom: "25%", //底边的距离
  952. borderColor: "#939",
  953. fillerColor: "#269cdb",
  954. borderRadius: 5,
  955. backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
  956. showDataShadow: false, //是否显示数据阴影
  957. showDetail: false, //即拖拽时候是否显示详细数值信息
  958. truerealtime: true, //是否实时更新
  959. filterMode: "filter",
  960. },
  961. {
  962. type: "inside",
  963. show: true,
  964. start: 1,
  965. end: 100,
  966. zoomOnMouseWheel: false, //滚轮是否触发缩放
  967. moveOnMouseMove: false, //鼠标滚轮触发滚动
  968. },
  969. ],
  970. legend: {
  971. top: 10,
  972. right: 10,
  973. textStyle: {
  974. fontSize: 20,
  975. color: "#fff",
  976. fontFamily: "Microsoft YaHei",
  977. },
  978. itemStyle: {
  979. borderCap: "round",
  980. },
  981. },
  982. tooltip: {
  983. trigger: "item",
  984. show: true,
  985. position: "top",
  986. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  987. textStyle: {
  988. color: "#fff",
  989. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  990. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  991. fontSize: "28", // 文字字体大小
  992. },
  993. formatter: function (p) {
  994. console.log(p);
  995. return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
  996. },
  997. },
  998. grid: {
  999. left: "3%",
  1000. right: "4%",
  1001. bottom: "3%",
  1002. containLabel: true,
  1003. },
  1004. xAxis: [
  1005. {
  1006. type: "category",
  1007. data: that.riskData.x.map((item) => item.name),
  1008. axisLine: {
  1009. show: true,
  1010. lineStyle: {
  1011. color: "rgba(0, 80, 148, .8)",
  1012. },
  1013. },
  1014. axisTick: {
  1015. show: false,
  1016. },
  1017. axisLabel: {
  1018. color: "#fff",
  1019. rotate: 20,
  1020. fontSize: 22,
  1021. },
  1022. },
  1023. ],
  1024. yAxis: [
  1025. {
  1026. type: "value",
  1027. axisLabel: {
  1028. color: "#fff",
  1029. fontSize: 22,
  1030. },
  1031. splitLine: {
  1032. show: true,
  1033. lineStyle: {
  1034. color: "rgba(104, 180, 221, .2)",
  1035. type: "dashed",
  1036. },
  1037. },
  1038. },
  1039. ],
  1040. series: [
  1041. {
  1042. name: "低风险",
  1043. type: "bar",
  1044. stack: "Ad",
  1045. barWidth: 14,
  1046. emphasis: {
  1047. focus: "series",
  1048. },
  1049. itemStyle: {
  1050. barBorderRadius: [15, 15, 15, 15],
  1051. },
  1052. data: that.riskData.y1,
  1053. },
  1054. {
  1055. name: "中风险",
  1056. type: "bar",
  1057. barWidth: 14,
  1058. stack: "Ad",
  1059. itemStyle: {
  1060. barBorderRadius: [15, 15, 15, 15],
  1061. },
  1062. emphasis: {
  1063. focus: "series",
  1064. },
  1065. data: that.riskData.y2,
  1066. },
  1067. {
  1068. name: "高风险",
  1069. type: "bar",
  1070. barWidth: 14,
  1071. stack: "Ad",
  1072. itemStyle: {
  1073. barBorderRadius: [15, 15, 15, 15],
  1074. },
  1075. emphasis: {
  1076. focus: "series",
  1077. },
  1078. data: that.riskData.y3,
  1079. },
  1080. ],
  1081. };
  1082. that.right1Chart.setOption(option);
  1083. tools.loopShowTooltip(that.right1Chart, option, {
  1084. interval: 2000,
  1085. loopSeries: true,
  1086. });
  1087. },
  1088. initChartR3 () {
  1089. let that = this;
  1090. that.right3Chart = echarts.init(this.$refs["echartR3"]);
  1091. let option = {
  1092. radar: {
  1093. // shape: 'circle',
  1094. splitNumber: 3,
  1095. splitLine: {
  1096. lineStyle: {
  1097. color: ["#DD5955", "#39e1d0", "#2e3d45"],
  1098. },
  1099. },
  1100. splitArea: {
  1101. areaStyle: {
  1102. color: [
  1103. "rgba(88,247,223,0.2)",
  1104. "rgba(255, 224, 54, 0.2)",
  1105. "rgba(221,89,85,0.3)",
  1106. ],
  1107. },
  1108. },
  1109. indicator: [
  1110. { name: "安全风险", max: 25 },
  1111. { name: "付款风险", max: 25 },
  1112. { name: "合同风险", max: 25 },
  1113. { name: "结算风险", max: 25 },
  1114. { name: "进度风险", max: 25 },
  1115. { name: "质量风险", max: 25 },
  1116. ],
  1117. },
  1118. series: [
  1119. {
  1120. name: "风险",
  1121. type: "radar",
  1122. symbol: "circle",
  1123. label: {
  1124. show: true,
  1125. formatter: function (params) {
  1126. return params.value;
  1127. },
  1128. fontSize: 24,
  1129. color: "#68BDFF",
  1130. },
  1131. data: [
  1132. {
  1133. value: that.riskData.x[that.r3Index].value,
  1134. areaStyle: {
  1135. color: "#112b75",
  1136. },
  1137. lineStyle: {
  1138. width: 4,
  1139. color: "#60C1FF",
  1140. },
  1141. label: {
  1142. fontSize: 22,
  1143. },
  1144. },
  1145. ],
  1146. },
  1147. ],
  1148. };
  1149. that.right3Chart.setOption(option);
  1150. },
  1151. initChartR4 () {
  1152. let that = this;
  1153. that.right4Chart = echarts.init(this.$refs["echartR4"]);
  1154. that.right4Chart.on("showTip", (params) => {
  1155. // 如果是7或者15并且满足防抖则切换
  1156. if (
  1157. (params.dataIndex == 5 || params.dataIndex == 11) &&
  1158. that.echartR2Fd2
  1159. ) {
  1160. that.echartR2Fd2 = false;
  1161. setTimeout(() => {
  1162. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
  1163. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
  1164. that.right4Chart.setOption(option);
  1165. // 防止勿刷新做的防抖
  1166. setTimeout(() => {
  1167. that.echartR2Fd2 = true;
  1168. }, 2000);
  1169. }, 1900);
  1170. // 如果是17表示到了最后一个,那么重新来一遍
  1171. } else if (params.dataIndex == 17 && that.echartR2Fd2) {
  1172. that.echartR2Fd2 = false;
  1173. setTimeout(() => {
  1174. option.dataZoom[0].endValue = 0;
  1175. option.dataZoom[0].startValue = 5;
  1176. that.right4Chart.setOption(option);
  1177. // 防止勿刷新做的防抖
  1178. setTimeout(() => {
  1179. that.echartR2Fd2 = true;
  1180. }, 2000);
  1181. }, 1900);
  1182. }
  1183. });
  1184. let option = {
  1185. dataZoom: [
  1186. {
  1187. // start: 9,//默认为@
  1188. // end: 100,//黑认认为1@0
  1189. type: "slider",
  1190. show: false,
  1191. // xAxisIndex: [0]
  1192. handlesize: 0, //滑动条的 左右2个滑动条的大小
  1193. startValue: 5, // 初始显示值
  1194. endValue: 0, // 结束显示值
  1195. height: 10, //组件高度
  1196. left: "5%",
  1197. right: "4%", //右边的距离
  1198. bottom: "25%", //底边的距离
  1199. borderColor: "#939",
  1200. fillerColor: "#269cdb",
  1201. borderRadius: 5,
  1202. backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
  1203. showDataShadow: false, //是否显示数据阴影
  1204. showDetail: false, //即拖拽时候是否显示详细数值信息
  1205. truerealtime: true, //是否实时更新
  1206. filterMode: "filter",
  1207. },
  1208. {
  1209. type: "inside",
  1210. show: true,
  1211. start: 1,
  1212. end: 100,
  1213. zoomOnMouseWheel: false, //滚轮是否触发缩放
  1214. moveOnMouseMove: false, //鼠标滚轮触发滚动
  1215. },
  1216. ],
  1217. title: {
  1218. text: "企业后评价执行情况",
  1219. left: "center",
  1220. textStyle: {
  1221. color: "#fff",
  1222. fontSize: 32,
  1223. },
  1224. },
  1225. tooltip: {
  1226. trigger: "item",
  1227. show: true,
  1228. position: "top",
  1229. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  1230. textStyle: {
  1231. color: "#fff",
  1232. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  1233. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  1234. fontSize: "28", // 文字字体大小
  1235. },
  1236. formatter: function (p) {
  1237. console.log(p);
  1238. return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
  1239. },
  1240. },
  1241. legend: {
  1242. show: true,
  1243. textStyle: {
  1244. fontSize: 24,
  1245. color: "rgba(255, 255, 255, .6)",
  1246. },
  1247. inactiveColor: "#fff",
  1248. itemHeight: 20,
  1249. top: "15%",
  1250. backgroundColor: "transparent",
  1251. data: [
  1252. {
  1253. name: "应首评项目数",
  1254. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWdJREFUOE+N0k8og3EYB/Dvs8P8CSlTxJGD8u+yTYmNm0gJQznIQRxMoV2cXWSKCznIQdk7SkmOEomNg41y4EjURkLZFI/ed3vX+5v82nt4357n9/s8Pe/v9xCST6+fzVHGKAMDAKqT6WsCNi2ElS0Xfak5Ul+tfi77YewBqNcLpH0vTYSOAxc9kFo5wghINus2lJMPOzl8PE6EpX8qC2lmuMmp8CmABn3FVgJ4bIloLggEnwRzRg6F4wSY9fR2J1CUnYieY0DPrgDiUvASA7pF8PGnJXsp4LEC3wx4L4DAY1pLLQq7GVjM5KcJmKC2fc76fNeOtU6GmBDOzYMt04sLmQjt2sUZRyMCjAEYBKNKyxNuAGwUA8vCaBhbcSrMxviwj1JFU7Nk3NC49iqAk+FCObAu3AngfLJCDmpmjgVwNdskB5UjPgHcrvbLQXmXVwD3O1NyYGmeFkD0aF4OCmqHBPAWXhfAL4WqeuKVsFKCAAAAAElFTkSuQmCC",
  1255. },
  1256. {
  1257. name: "已完成首评项目数",
  1258. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAXFJREFUOE+V0kFLAkEUB/D/G9eW3UN1sFPYNaJAu2R0Coog8mq0fQH1kEVBhz5Ah6CoLhrdE/LqKQo6VZ7SKCKChKRTBRmhbq47oabsZC22h1nem/k93jCP8P0F+E2HQ1dD4NAAGqqn+TUI8YpciCVo8LOaoeoSKOR6GTOSxOFtFLD+OSFtmpI/obqfqFqZ6Wrqr8NNyJHJK4aPtNLDAue0+1vlnzkiHqG5YvYcwGhj08MUhJyuWhgrvyBjFq3uogp0AB2NbFR2o5sctfCNVxDWc1ag/xPQR0tLXqYg6HTBBMd++RXplpZK2Qg4dtq5NAiLNM3v5a6ilALBY4s4rvKKMdLWw4EjU4E0U3s462gwXQ3DMLeJsfpgmCYgsSVTLkSF0bC24r9NcWucHPA1izZnyXpg8vRIAMfjU/ZgLH4ogDNt1h4Mb8YEcLkSsgf9y+sCuNtaswd92qoAHuMb9qBnIiiA55M9e9DpnRfAe/pAAF9gqJXUYWdYUwAAAABJRU5ErkJggg==",
  1259. },
  1260. {
  1261. name: "应再评项目数",
  1262. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAV5JREFUOE+V0j8oxGEYwPHvo/wMjgyUslAWcTFhMRiEsHLKYDzFKZRBSskgR7mUG29QjpX86QaDwdlwLotiUYpB/gyHPDru9HsPP+c3vL+e530/T8/b+wipb31KrYJ8vAi9QE0qfYqy+vBEsHtKnpM5SS4bC1qW+8amQl26gP0vcPSSQ2fXiFxJsnKhi8PfDtvgsVo0yJZfhwQCP1XOzCn4ZNuvB0BjerO4HNxtn1FsB24vDRZNggRgpdPNXsjL/4wST7AXNEDiv+DxW0slFVDTCvoG8QjcXGS2NKc+hMVsLo0yLFsBzZNnDoHaP9CJWtRn9XDA8WsOHR8PZx+NQhcDqvQhVH3klTMRVu4fWTZGw97Ktl/VHrePyVfRr1myHwhP3xnAM1nkDJbGzw0wOFvpDCa8+waYCTY5g/6esAFCax5n0NI6b4DI7qgzcDeOGSAW9TuD0up+A1zHQwZ4B2JrgI9r4uMDAAAAAElFTkSuQmCC",
  1263. },
  1264. {
  1265. name: "已完成再评项目数",
  1266. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE9jZICC/1e12Rh4uDIY/jNGMjAw6ECFrzAw/l/O8OXbDEbtq79AYowg4v9jS2mGv3+3MDAwGMAMQKMvMDAz+zDKHn/KCDaZm/skHsUwvRcZfr8zZ/z/0CyX4T/DJBwmowozMuQx/n9gdpyBgcECLsNpycAgXAPhvm1hYPgOkoaDEyANPxkYGNjgQjJbGRiYRSDcv28YGJ54I2v4SUDDWwaGJ17IGr5gcZIV1El/GRjetjMwfD+G5qSHpnkM/xknEufp//mM/2+rsDOwCoGCVZ+ApksMv9+ZERtxFxmYmb3BEYeaNHgyGf7/j2FgYNCEil9nYGRcwvDly3SUpIHslP8PzP4j8xkVTsENhaclZAWvLligaBAzOIFfw9ld1igajN2O4tewar49ioawxIP4NbQ0OqNoqKnfi19DXIoHioZFc3bg12Dt6YOi4ej2Lfg1yBn7o2h4dHYjigYAb0t88hVwEBYAAAAASUVORK5CYII=",
  1267. },
  1268. {
  1269. name: "再评达标项目数",
  1270. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE+V0k8og2EcwPHvkzVZLLm6KItEzWlclIPbdhGKcsCJwzZFdtgOK+8OimIXTjgoSrisXByUgz8nE4mmXFwlZmuaPXr3r/eZ9sZ7eN9+v/f5/J6n3/MTFJ9wWFpTFqYFjAFdxfSthF1blo1wWHzpOaG/gppszkIM6C4VqPheW8ATCYkXoVdOW7g0WVyy8ZSdHhFYlF4E0SqV1bTEJwKaPAd6S3/aWmHEU4j2Y/D4pJgLHWQAaykd9ENDfSH6SEJkTQGZ/4LkryO1O2DYDbkcHB7DQ6LiSAua9AlQN67SAQl+4Y3KWtt7vq1Os04JuPm04/rrxcUt4M5fnHE00jXMIBgHOor5eyQ7dd+sK6NhPEpAk9IYL4VEuWh5lowLfKE3BUS1RnMwOZtQwNaqwxwMTp0p4Gizzxz0D+0p4PRg1Bw4B1YUED+ZMwctrnkFPF8tm4OmzgkFvN5tK+AHKZh4TU8krdoAAAAASUVORK5CYII=",
  1271. },
  1272. ],
  1273. },
  1274. grid: {
  1275. top: "30%",
  1276. left: "3%",
  1277. right: "4%",
  1278. bottom: "3%",
  1279. containLabel: true,
  1280. },
  1281. xAxis: {
  1282. data: that.riskData1.x,
  1283. type: "category",
  1284. splitLine: {
  1285. show: false,
  1286. },
  1287. alignTicks: true,
  1288. axisLine: {
  1289. show: true,
  1290. lineStyle: {
  1291. color: "rgba(0, 80, 148, .8)",
  1292. },
  1293. },
  1294. axisTick: {
  1295. show: false,
  1296. },
  1297. axisLabel: {
  1298. color: "#fff",
  1299. fontSize: 22,
  1300. rotate: 20,
  1301. },
  1302. },
  1303. yAxis: {
  1304. type: "value",
  1305. splitLine: {
  1306. show: true,
  1307. lineStyle: {
  1308. color: "rgba(104, 180, 221, .2)",
  1309. type: "dashed",
  1310. },
  1311. },
  1312. axisLine: {
  1313. show: false,
  1314. },
  1315. axisTick: {
  1316. show: false,
  1317. },
  1318. axisLabel: {
  1319. color: "#fff",
  1320. fontSize: 22,
  1321. },
  1322. },
  1323. series: [
  1324. {
  1325. type: "bar",
  1326. name: "应首评项目数",
  1327. barWidth: 4,
  1328. barGap: "600%",
  1329. data: that.riskData1.y1,
  1330. label: {
  1331. show: true,
  1332. position: "top",
  1333. formatter: " ",
  1334. width: 6,
  1335. height: 6,
  1336. borderRadius: 50,
  1337. borderWidth: 6,
  1338. borderColor: "#40A9FF",
  1339. backgroundColor: "#fff",
  1340. },
  1341. itemStyle: {
  1342. color: {
  1343. x: 0,
  1344. y: 0,
  1345. x2: 0,
  1346. y2: 1,
  1347. colorStops: [
  1348. {
  1349. offset: 0,
  1350. color: "#40A9FF", // 0% 处的颜色
  1351. },
  1352. {
  1353. offset: 1,
  1354. color: "#092351", // 100% 处的颜色
  1355. },
  1356. ],
  1357. },
  1358. },
  1359. },
  1360. {
  1361. type: "bar",
  1362. name: "已完成首评项目数",
  1363. barGap: "600%",
  1364. barWidth: 4,
  1365. data: that.riskData1.y2,
  1366. label: {
  1367. show: true,
  1368. position: "top",
  1369. formatter: " ",
  1370. width: 6,
  1371. height: 6,
  1372. borderRadius: 50,
  1373. borderWidth: 6,
  1374. borderColor: "#58F7DF",
  1375. backgroundColor: "#fff",
  1376. },
  1377. itemStyle: {
  1378. color: {
  1379. x: 0,
  1380. y: 0,
  1381. x2: 0,
  1382. y2: 1,
  1383. colorStops: [
  1384. {
  1385. offset: 0,
  1386. color: "#58F7DF", // 0% 处的颜色
  1387. },
  1388. {
  1389. offset: 1,
  1390. color: "#092351", // 100% 处的颜色
  1391. },
  1392. ],
  1393. },
  1394. },
  1395. },
  1396. {
  1397. type: "bar",
  1398. name: "应再评项目数",
  1399. barGap: "600%",
  1400. barWidth: 4,
  1401. data: that.riskData1.y3,
  1402. label: {
  1403. show: true,
  1404. position: "top",
  1405. formatter: " ",
  1406. width: 6,
  1407. height: 6,
  1408. borderRadius: 50,
  1409. borderWidth: 6,
  1410. borderColor: "#B78CFF",
  1411. backgroundColor: "#fff",
  1412. },
  1413. itemStyle: {
  1414. color: {
  1415. x: 0,
  1416. y: 0,
  1417. x2: 0,
  1418. y2: 1,
  1419. colorStops: [
  1420. {
  1421. offset: 0,
  1422. color: "#B78CFF", // 0% 处的颜色
  1423. },
  1424. {
  1425. offset: 1,
  1426. color: "#092351", // 100% 处的颜色
  1427. },
  1428. ],
  1429. },
  1430. },
  1431. },
  1432. {
  1433. type: "bar",
  1434. name: "已完成再评项目数",
  1435. barGap: "600%",
  1436. barWidth: 4,
  1437. data: that.riskData1.y4,
  1438. label: {
  1439. show: true,
  1440. position: "top",
  1441. formatter: " ",
  1442. width: 6,
  1443. height: 6,
  1444. borderRadius: 50,
  1445. borderWidth: 6,
  1446. borderColor: "#FFE036",
  1447. backgroundColor: "#fff",
  1448. },
  1449. itemStyle: {
  1450. color: {
  1451. x: 0,
  1452. y: 0,
  1453. x2: 0,
  1454. y2: 1,
  1455. colorStops: [
  1456. {
  1457. offset: 0,
  1458. color: "#FFE036", // 0% 处的颜色
  1459. },
  1460. {
  1461. offset: 1,
  1462. color: "#092351", // 100% 处的颜色
  1463. },
  1464. ],
  1465. },
  1466. },
  1467. },
  1468. {
  1469. type: "bar",
  1470. name: "再评达标项目数",
  1471. barGap: "600%",
  1472. barWidth: 4,
  1473. data: that.riskData1.y5,
  1474. label: {
  1475. show: true,
  1476. position: "top",
  1477. formatter: " ",
  1478. width: 6,
  1479. height: 6,
  1480. borderRadius: 50,
  1481. borderWidth: 6,
  1482. borderColor: "#7784FF",
  1483. backgroundColor: "#fff",
  1484. },
  1485. itemStyle: {
  1486. color: {
  1487. x: 0,
  1488. y: 0,
  1489. x2: 0,
  1490. y2: 1,
  1491. colorStops: [
  1492. {
  1493. offset: 0,
  1494. color: "#7784FF", // 0% 处的颜色
  1495. },
  1496. {
  1497. offset: 1,
  1498. color: "#092351", // 100% 处的颜色
  1499. },
  1500. ],
  1501. },
  1502. },
  1503. },
  1504. ],
  1505. };
  1506. that.right4Chart.setOption(option);
  1507. tools.loopShowTooltip(that.right4Chart, option, {
  1508. interval: 2000,
  1509. loopSeries: true,
  1510. });
  1511. },
  1512. clickItem (index) {
  1513. const angle = 360 / this.investData.investList.length;
  1514. this.witchs = index;
  1515. this.inner = index;
  1516. this.innerDeg = this.witchs * angle;
  1517. this.lpRotate();
  1518. },
  1519. lpRotate () {
  1520. const angle = 360 / this.investData.investList.length;
  1521. clearInterval(this.timer);
  1522. this.timer = setInterval(() => {
  1523. this.inner++;
  1524. this.topIndex++;
  1525. this.topIndex = this.topIndex % 8;
  1526. this.witchs = this.inner % this.investData.investList.length;
  1527. this.innerDeg = this.inner * angle;
  1528. }, 2000);
  1529. },
  1530. filterLpData () {
  1531. const angle = 360 / this.investData.investList.length;
  1532. for (let i in this.investData.investList) {
  1533. this.investData.investList[i].deg = i * angle;
  1534. this.$set(this.investData.investList, i, {
  1535. ...this.investData.investList[i],
  1536. deg: i * angle,
  1537. });
  1538. }
  1539. },
  1540. // 4秒定时器
  1541. time4s () {
  1542. let that = this;
  1543. // 4秒定时器
  1544. this.time1 = setInterval(() => {
  1545. that.industryProportion == 1
  1546. ? (that.industryProportion = 2)
  1547. : (that.industryProportion = 1);
  1548. that.leftEcharts1.dispose();
  1549. that.leftEcharts2.dispose();
  1550. that.leftEcharts3.dispose();
  1551. that.leftEcharts4.dispose();
  1552. that.leftEcharts1Fun();
  1553. that.leftEcharts2Fun();
  1554. that.leftEcharts3Fun();
  1555. that.leftEcharts4Fun();
  1556. }, 4000);
  1557. },
  1558. // 针对投前产业布局分析的定时器
  1559. timeNs () {
  1560. let that = this;
  1561. this.time2 = setInterval(() => {
  1562. if (that.industryLayout < 3) {
  1563. that.industryLayout = that.industryLayout + 1;
  1564. } else {
  1565. that.industryLayout = 0;
  1566. }
  1567. this.time2 && clearInterval(this.time2);
  1568. this.timeNs();
  1569. that.leftEcharts5.dispose();
  1570. that.leftEcharts5Fun();
  1571. }, left1[that.industryLayout].length * 2000);
  1572. },
  1573. // 主辅业占比点击方法
  1574. industryProportionChange (e) {
  1575. let that = this;
  1576. this.industryProportion = e;
  1577. this.time1 && clearInterval(this.time1);
  1578. that.leftEcharts1.dispose();
  1579. that.leftEcharts2.dispose();
  1580. that.leftEcharts3.dispose();
  1581. that.leftEcharts4.dispose();
  1582. that.leftEcharts1Fun();
  1583. that.leftEcharts2Fun();
  1584. that.leftEcharts3Fun();
  1585. that.leftEcharts4Fun();
  1586. this.time4s();
  1587. },
  1588. // 产业布局分析点击方法
  1589. industryLayoutChange (e) {
  1590. this.industryLayout = e;
  1591. this.time2 && clearInterval(this.time2);
  1592. this.leftEcharts5.dispose();
  1593. this.timeNs();
  1594. this.leftEcharts5Fun();
  1595. },
  1596. yuanChange (value) {
  1597. return Number((value / 100000000).toFixed(2));
  1598. },
  1599. // 逢三折断
  1600. numFormat (value) {
  1601. if (!value) return "0";
  1602. // var intPart = Number(value).toFixed(0) // 获取整数部分
  1603. var intPart = parseInt(value); // 获取整数部分
  1604. var intPartFormat = intPart
  1605. .toString()
  1606. .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // 将整数部分逢三一断
  1607. var floatPart = ".00"; // 预定义小数部分
  1608. var value2Array = value.toString().split(".");
  1609. // =2表示数据有小数位
  1610. if (value2Array.length === 2) {
  1611. floatPart = value2Array[1].toString(); // 拿到小数部分
  1612. if (floatPart.length === 1) {
  1613. // 补0
  1614. return intPartFormat + "." + floatPart + "0";
  1615. } else {
  1616. floatPart = floatPart.slice(0, 2);
  1617. return intPartFormat + "." + floatPart;
  1618. }
  1619. } else {
  1620. return intPartFormat;
  1621. }
  1622. },
  1623. leftEcharts1Fun () {
  1624. let that = this;
  1625. this.leftEcharts1 = echarts.init(this.$refs["leftEcharts1"]);
  1626. option = {
  1627. title: {
  1628. text: that.industryProportion == 1 ? "30%" : "70%",
  1629. x: "center",
  1630. y: "center",
  1631. textStyle: {
  1632. fontWeight: "normal",
  1633. color: "#68BDFF",
  1634. fontSize: "20",
  1635. },
  1636. },
  1637. color: ["#68BDFF", "#254F7F"],
  1638. series: [
  1639. {
  1640. name: "Line 1",
  1641. type: "pie",
  1642. clockWise: true,
  1643. radius: ["80%", "100%"],
  1644. itemStyle: {
  1645. normal: {
  1646. label: {
  1647. show: false,
  1648. },
  1649. labelLine: {
  1650. show: false,
  1651. },
  1652. },
  1653. },
  1654. hoverAnimation: false,
  1655. data: [
  1656. {
  1657. value: 80,
  1658. name: "01",
  1659. itemStyle: {
  1660. normal: {
  1661. label: {
  1662. show: false,
  1663. },
  1664. labelLine: {
  1665. show: false,
  1666. },
  1667. },
  1668. },
  1669. },
  1670. {
  1671. name: "02",
  1672. value: 20,
  1673. },
  1674. ],
  1675. },
  1676. ],
  1677. };
  1678. //轮播
  1679. // tools.loopShowTooltip(leftEcharts1, option, {
  1680. // interval: 2000,
  1681. // loopSeries: true,
  1682. // });
  1683. //注册
  1684. that.leftEcharts1.setOption(option);
  1685. },
  1686. leftEcharts2Fun () {
  1687. let that = this;
  1688. this.leftEcharts2 = echarts.init(this.$refs["leftEcharts2"]);
  1689. let nameList = ["a"];
  1690. let valueList = that.industryProportion == 1 ? [30] : [70];
  1691. let total = 100; // 数据总数
  1692. var category = nameList.map((item, index) => {
  1693. return {
  1694. value: valueList[index],
  1695. itemStyle: {
  1696. color: new echarts.graphic.LinearGradient(
  1697. 1,
  1698. 0,
  1699. 0,
  1700. 1,
  1701. [
  1702. {
  1703. offset: 0,
  1704. color: "#40A9FF50",
  1705. },
  1706. {
  1707. offset: 1,
  1708. color: "#40A9FF",
  1709. },
  1710. ],
  1711. false
  1712. ),
  1713. },
  1714. };
  1715. });
  1716. var totalList = [];
  1717. var totalBorderList = [];
  1718. nameList.map((item, index) => {
  1719. totalList.push({
  1720. value: total,
  1721. itemStyle: {
  1722. color: "rgba(51, 147, 236, 0.29)",
  1723. },
  1724. });
  1725. totalBorderList.push({
  1726. value: total,
  1727. itemStyle: {
  1728. borderColor: "rgba(51, 147, 236, 0.29)",
  1729. color: "transparent",
  1730. },
  1731. });
  1732. });
  1733. var datas = [];
  1734. category.forEach((value) => {
  1735. datas.push(value.value);
  1736. });
  1737. option = {
  1738. // backgroundColor: 'rgb(231,238,249)',
  1739. xAxis: {
  1740. max: total,
  1741. splitLine: {
  1742. show: false,
  1743. },
  1744. axisLine: {
  1745. show: false,
  1746. },
  1747. axisLabel: {
  1748. show: false,
  1749. },
  1750. axisTick: {
  1751. show: false,
  1752. },
  1753. },
  1754. grid: {
  1755. left: "0%",
  1756. top: "15%", // 设置条形图的边距
  1757. right: "15%",
  1758. bottom: "5%",
  1759. },
  1760. yAxis: [
  1761. {
  1762. type: "category",
  1763. inverse: false,
  1764. data: nameList,
  1765. axisLine: {
  1766. show: false,
  1767. },
  1768. axisTick: {
  1769. show: false,
  1770. },
  1771. axisLabel: {
  1772. show: false,
  1773. },
  1774. },
  1775. ],
  1776. series: [
  1777. {
  1778. // 内
  1779. type: "bar",
  1780. barWidth: 16,
  1781. barGap: "20%",
  1782. silent: true,
  1783. // label: {
  1784. // normal: {
  1785. // formatter: (item) => {
  1786. // return `${item['name']}:${item['value']} `;
  1787. // },
  1788. // textStyle: {
  1789. // color: 'rgba(105, 120, 136, 1)',
  1790. // fontSize: 14,
  1791. // },
  1792. // position: [0, '-25px'],
  1793. // show: true,
  1794. // },
  1795. // },
  1796. data: category,
  1797. z: 1,
  1798. itemStyle: {
  1799. normal: {
  1800. color: new echarts.graphic.LinearGradient(
  1801. 1,
  1802. 0,
  1803. 0,
  1804. 1,
  1805. [
  1806. {
  1807. offset: 0,
  1808. color: "rgba(81, 193, 156, 1)",
  1809. },
  1810. {
  1811. offset: 1,
  1812. color: "rgba(234, 177, 100, 1)",
  1813. },
  1814. ],
  1815. false
  1816. ),
  1817. },
  1818. },
  1819. animationEasing: "elasticOut",
  1820. },
  1821. {
  1822. // 分隔
  1823. type: "pictorialBar",
  1824. itemStyle: {
  1825. normal: {
  1826. color: "#143362",
  1827. },
  1828. },
  1829. symbolRepeat: "fixed",
  1830. symbolMargin: 8,
  1831. symbol: "rect",
  1832. symbolClip: false,
  1833. symbolSize: [4, 20],
  1834. symbolPosition: "start",
  1835. symbolOffset: [0, -2],
  1836. symbolBoundingData: total,
  1837. data: [total, total, total, total],
  1838. z: 2,
  1839. animationEasing: "elasticOut",
  1840. },
  1841. {
  1842. // label
  1843. type: "pictorialBar",
  1844. symbolBoundingData: total,
  1845. itemStyle: {
  1846. normal: {
  1847. color: "none",
  1848. },
  1849. },
  1850. label: {
  1851. normal: {
  1852. formatter: (params) => {
  1853. var text;
  1854. text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
  1855. return text;
  1856. },
  1857. textStyle: {
  1858. // 图列内容样式
  1859. fontSize: "20",
  1860. fontWeight: 800,
  1861. },
  1862. position: "right",
  1863. offset: [0, -3],
  1864. distance: 10, // 向右偏移位置
  1865. show: true,
  1866. color: "#68BDFF",
  1867. },
  1868. },
  1869. data: datas,
  1870. z: 0,
  1871. },
  1872. {
  1873. name: "外框",
  1874. type: "bar",
  1875. barGap: "-130%", // 设置外框粗细
  1876. data: totalBorderList,
  1877. barWidth: 26,
  1878. itemStyle: {
  1879. normal: {
  1880. // barBorderRadius: [5, 5, 5, 5],
  1881. borderWidth: 1, // 边框宽度
  1882. borderColor: "rgb(51, 147, 236)", // 边框色
  1883. color: "rgb(231,238,249)",
  1884. },
  1885. },
  1886. z: 0,
  1887. },
  1888. ],
  1889. };
  1890. //轮播
  1891. // tools.loopShowTooltip(leftEcharts1, option, {
  1892. // interval: 2000,
  1893. // loopSeries: true,
  1894. // });
  1895. //注册
  1896. that.leftEcharts2.setOption(option);
  1897. },
  1898. leftEcharts3Fun () {
  1899. let that = this;
  1900. this.leftEcharts3 = echarts.init(this.$refs["leftEcharts3"]);
  1901. option = {
  1902. title: {
  1903. text: that.industryProportion == 1 ? "70%" : "30%",
  1904. x: "center",
  1905. y: "center",
  1906. textStyle: {
  1907. fontWeight: "normal",
  1908. color: "#68BDFF",
  1909. fontSize: "20",
  1910. },
  1911. },
  1912. color: ["#5BDCC8", "#254F7F"],
  1913. series: [
  1914. {
  1915. name: "Line 1",
  1916. type: "pie",
  1917. clockWise: true,
  1918. radius: ["80%", "100%"],
  1919. itemStyle: {
  1920. normal: {
  1921. label: {
  1922. show: false,
  1923. },
  1924. labelLine: {
  1925. show: false,
  1926. },
  1927. },
  1928. },
  1929. hoverAnimation: false,
  1930. data: [
  1931. {
  1932. value: 80,
  1933. name: "01",
  1934. itemStyle: {
  1935. normal: {
  1936. label: {
  1937. show: false,
  1938. },
  1939. labelLine: {
  1940. show: false,
  1941. },
  1942. },
  1943. },
  1944. },
  1945. {
  1946. name: "02",
  1947. value: 20,
  1948. },
  1949. ],
  1950. },
  1951. ],
  1952. };
  1953. //轮播
  1954. // tools.loopShowTooltip(leftEcharts1, option, {
  1955. // interval: 2000,
  1956. // loopSeries: true,
  1957. // });
  1958. //注册
  1959. that.leftEcharts3.setOption(option);
  1960. },
  1961. leftEcharts4Fun () {
  1962. let that = this;
  1963. this.leftEcharts4 = echarts.init(this.$refs["leftEcharts4"]);
  1964. let nameList = ["a"];
  1965. let valueList = that.industryProportion == 1 ? [70] : [30];
  1966. let total = 100; // 数据总数
  1967. var category = nameList.map((item, index) => {
  1968. return {
  1969. value: valueList[index],
  1970. itemStyle: {
  1971. color: new echarts.graphic.LinearGradient(
  1972. 1,
  1973. 0,
  1974. 0,
  1975. 1,
  1976. [
  1977. {
  1978. offset: 0,
  1979. color: "#5BDCC850",
  1980. },
  1981. {
  1982. offset: 1,
  1983. color: "#5BDCC8",
  1984. },
  1985. ],
  1986. false
  1987. ),
  1988. },
  1989. };
  1990. });
  1991. var totalList = [];
  1992. var totalBorderList = [];
  1993. nameList.map((item, index) => {
  1994. totalList.push({
  1995. value: total,
  1996. itemStyle: {
  1997. color: "rgba(51, 147, 236, 0.29)",
  1998. },
  1999. });
  2000. totalBorderList.push({
  2001. value: total,
  2002. itemStyle: {
  2003. borderColor: "rgba(51, 147, 236, 0.29)",
  2004. color: "transparent",
  2005. },
  2006. });
  2007. });
  2008. var datas = [];
  2009. category.forEach((value) => {
  2010. datas.push(value.value);
  2011. });
  2012. option = {
  2013. // backgroundColor: 'rgb(231,238,249)',
  2014. xAxis: {
  2015. max: total,
  2016. splitLine: {
  2017. show: false,
  2018. },
  2019. axisLine: {
  2020. show: false,
  2021. },
  2022. axisLabel: {
  2023. show: false,
  2024. },
  2025. axisTick: {
  2026. show: false,
  2027. },
  2028. },
  2029. grid: {
  2030. left: "0%",
  2031. top: "15%", // 设置条形图的边距
  2032. right: "15%",
  2033. bottom: "5%",
  2034. },
  2035. yAxis: [
  2036. {
  2037. type: "category",
  2038. inverse: false,
  2039. data: nameList,
  2040. axisLine: {
  2041. show: false,
  2042. },
  2043. axisTick: {
  2044. show: false,
  2045. },
  2046. axisLabel: {
  2047. show: false,
  2048. },
  2049. },
  2050. ],
  2051. series: [
  2052. {
  2053. // 内
  2054. type: "bar",
  2055. barWidth: 16,
  2056. barGap: "20%",
  2057. silent: true,
  2058. // label: {
  2059. // normal: {
  2060. // formatter: (item) => {
  2061. // return `${item['name']}:${item['value']} `;
  2062. // },
  2063. // textStyle: {
  2064. // color: 'rgba(105, 120, 136, 1)',
  2065. // fontSize: 14,
  2066. // },
  2067. // position: [0, '-25px'],
  2068. // show: true,
  2069. // },
  2070. // },
  2071. data: category,
  2072. z: 1,
  2073. itemStyle: {
  2074. normal: {
  2075. color: new echarts.graphic.LinearGradient(
  2076. 1,
  2077. 0,
  2078. 0,
  2079. 1,
  2080. [
  2081. {
  2082. offset: 0,
  2083. color: "rgba(81, 193, 156, 1)",
  2084. },
  2085. {
  2086. offset: 1,
  2087. color: "rgba(234, 177, 100, 1)",
  2088. },
  2089. ],
  2090. false
  2091. ),
  2092. },
  2093. },
  2094. animationEasing: "elasticOut",
  2095. },
  2096. {
  2097. // 分隔
  2098. type: "pictorialBar",
  2099. itemStyle: {
  2100. normal: {
  2101. color: "#143362",
  2102. },
  2103. },
  2104. symbolRepeat: "fixed",
  2105. symbolMargin: 8,
  2106. symbol: "rect",
  2107. symbolClip: false,
  2108. symbolSize: [4, 20],
  2109. symbolPosition: "start",
  2110. symbolOffset: [0, -2],
  2111. symbolBoundingData: total,
  2112. data: [total, total, total, total],
  2113. z: 2,
  2114. animationEasing: "elasticOut",
  2115. },
  2116. {
  2117. // label
  2118. type: "pictorialBar",
  2119. symbolBoundingData: total,
  2120. itemStyle: {
  2121. normal: {
  2122. color: "none",
  2123. },
  2124. },
  2125. label: {
  2126. normal: {
  2127. formatter: (params) => {
  2128. var text;
  2129. text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
  2130. return text;
  2131. },
  2132. textStyle: {
  2133. // 图列内容样式
  2134. fontSize: "20",
  2135. fontWeight: 800,
  2136. },
  2137. position: "right",
  2138. offset: [0, -3],
  2139. distance: 10, // 向右偏移位置
  2140. show: true,
  2141. color: "#68BDFF",
  2142. },
  2143. },
  2144. data: datas,
  2145. z: 0,
  2146. },
  2147. {
  2148. name: "外框",
  2149. type: "bar",
  2150. barGap: "-130%", // 设置外框粗细
  2151. data: totalBorderList,
  2152. barWidth: 26,
  2153. itemStyle: {
  2154. normal: {
  2155. // barBorderRadius: [5, 5, 5, 5],
  2156. borderWidth: 1, // 边框宽度
  2157. borderColor: "rgb(51, 147, 236)", // 边框色
  2158. color: "rgb(231,238,249)",
  2159. },
  2160. },
  2161. z: 0,
  2162. },
  2163. ],
  2164. };
  2165. //轮播
  2166. // tools.loopShowTooltip(leftEcharts1, option, {
  2167. // interval: 2000,
  2168. // loopSeries: true,
  2169. // });
  2170. //注册
  2171. that.leftEcharts4.setOption(option);
  2172. },
  2173. leftEcharts5Fun () {
  2174. let that = this;
  2175. this.leftEcharts5 = echarts.init(this.$refs["leftEcharts5"]);
  2176. let dataList = [];
  2177. left1[that.industryLayout].forEach((item, index) => {
  2178. dataList[index] = {
  2179. value: item.y,
  2180. name: item.name,
  2181. itemStyle: {
  2182. normal: {
  2183. color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
  2184. {
  2185. offset: 0,
  2186. color: commonColor2[index], //顶部颜色
  2187. },
  2188. {
  2189. offset: 1,
  2190. color: commonColor[index], // 底部颜色
  2191. },
  2192. ]),
  2193. borderColor: commonColor[index],
  2194. borderWidth: 3,
  2195. },
  2196. },
  2197. };
  2198. });
  2199. let option = {
  2200. tooltip: {
  2201. trigger: "item",
  2202. formatter: function (e) {
  2203. return `<span style="display:inline-block;margin-right:15px;border-radius:10px;width:20px;height:20px;background-color:${e.borderColor
  2204. };"></span>${e.name} ${e.percent}%<br>${e.value}亿 ${left1[that.industryLayout][e.seriesIndex].num
  2205. }个`;
  2206. },
  2207. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  2208. textStyle: {
  2209. color: "#fff",
  2210. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  2211. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  2212. fontSize: "28", // 文字字体大小
  2213. },
  2214. },
  2215. legend: {
  2216. top: "center",
  2217. orient: "vertical",
  2218. left: "75%",
  2219. textStyle: {
  2220. color: "#fff",
  2221. fontSize: 20,
  2222. padding: [0, 20],
  2223. },
  2224. },
  2225. graphic: {
  2226. elements: [
  2227. {
  2228. type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  2229. style: {
  2230. image: "./img/whiteCircle.png", //这里添加图片地址
  2231. width: 80,
  2232. height: 80,
  2233. },
  2234. left: "center", //
  2235. top: "middle", //配置图片居中
  2236. },
  2237. ],
  2238. },
  2239. series: [
  2240. {
  2241. name: "",
  2242. type: "pie",
  2243. radius: ["20%", "80%"],
  2244. labelLine: {
  2245. normal: {
  2246. lineStyle: {
  2247. width: 1,
  2248. },
  2249. },
  2250. },
  2251. label: {
  2252. normal: {
  2253. show: false,
  2254. textStyle: {
  2255. fontSize: 28,
  2256. color: "#fff",
  2257. },
  2258. },
  2259. },
  2260. roseType: "area",
  2261. data: dataList,
  2262. },
  2263. {
  2264. tooltip: {
  2265. show: false,
  2266. },
  2267. type: "pie",
  2268. radius: ["80%", "82%"],
  2269. hoverAnimation: false,
  2270. name: "",
  2271. data: [
  2272. {
  2273. name: "",
  2274. value: 0,
  2275. itemStyle: {
  2276. normal: {
  2277. color: "#345189",
  2278. },
  2279. },
  2280. },
  2281. ],
  2282. },
  2283. ],
  2284. };
  2285. //轮播
  2286. tools.loopShowTooltip(that.leftEcharts5, option, {
  2287. interval: 2000,
  2288. loopSeries: true,
  2289. });
  2290. //注册
  2291. that.leftEcharts5.setOption(option);
  2292. },
  2293. leftEcharts6Fun () {
  2294. let that = this;
  2295. this.leftEcharts6 = echarts.init(this.$refs["leftEcharts6"]);
  2296. var dataArr = 44;
  2297. var colorSet = {
  2298. color: "#22B95E",
  2299. };
  2300. var color1 = {
  2301. type: "linear",
  2302. x: 0,
  2303. y: 0,
  2304. x2: 1,
  2305. y2: 1,
  2306. colorStops: [
  2307. {
  2308. offset: 0,
  2309. color: "rgba(255,255,255,0.1)",
  2310. },
  2311. {
  2312. offset: 1,
  2313. color: "rgba(255,255,255,0.3)",
  2314. },
  2315. ],
  2316. global: false,
  2317. };
  2318. var color2 = {
  2319. type: "linear",
  2320. x: 0,
  2321. y: 0,
  2322. x2: 1,
  2323. y2: 1,
  2324. colorStops: [
  2325. {
  2326. offset: 0,
  2327. color: "#30DBBA",
  2328. },
  2329. {
  2330. offset: 1,
  2331. color: "#2DE696",
  2332. },
  2333. ],
  2334. global: false,
  2335. };
  2336. option = {
  2337. tooltip: {
  2338. formatter: "{a} <br/>{b} : {c}%",
  2339. },
  2340. series: [
  2341. {
  2342. name: "内部进度条",
  2343. type: "gauge",
  2344. // center: ['20%', '50%'],
  2345. radius: "50%",
  2346. splitNumber: 10,
  2347. axisLine: {
  2348. lineStyle: {
  2349. color: [
  2350. [dataArr / 100, "rgba(0,0,0,0)"],
  2351. [1, "rgba(0,0,0,0)"],
  2352. ],
  2353. width: 1,
  2354. },
  2355. },
  2356. axisLabel: {
  2357. show: false,
  2358. },
  2359. axisTick: {
  2360. show: false,
  2361. },
  2362. splitLine: {
  2363. show: false,
  2364. },
  2365. itemStyle: {
  2366. color: "#ffffff",
  2367. },
  2368. detail: {
  2369. formatter: function (value) {
  2370. if (value !== 0) {
  2371. var num = Math.round(value);
  2372. return parseInt(num).toFixed(0) + "%";
  2373. } else {
  2374. return 0;
  2375. }
  2376. },
  2377. offsetCenter: [0, 117],
  2378. textStyle: {
  2379. padding: [0, 0, 0, 0],
  2380. fontSize: 60,
  2381. color: "#58F7DF",
  2382. },
  2383. },
  2384. title: {
  2385. //标题
  2386. show: true,
  2387. offsetCenter: [0, 220], // x, y,单位px
  2388. textStyle: {
  2389. color: "#40A9FF",
  2390. fontSize: 34, //表盘上的标题文字大小
  2391. fontWeight: 400,
  2392. fontFamily: "MicrosoftYaHei",
  2393. },
  2394. },
  2395. data: [
  2396. {
  2397. name: "总额度:1,323.85亿",
  2398. value: dataArr,
  2399. itemStyle: {
  2400. fontSize: "50", //y轴上方单位的大小
  2401. color: "#FFF666",
  2402. fontFamily: "MicrosoftYaHei",
  2403. },
  2404. },
  2405. ],
  2406. pointer: {
  2407. show: true,
  2408. length: "100%",
  2409. radius: "20%",
  2410. width: 3, //指针粗细
  2411. },
  2412. animationDuration: 4000,
  2413. },
  2414. {
  2415. name: "内部阴影",
  2416. type: "gauge",
  2417. radius: "75%",
  2418. splitNumber: 10,
  2419. axisLine: {
  2420. lineStyle: {
  2421. color: [
  2422. [
  2423. dataArr / 100,
  2424. new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  2425. {
  2426. offset: 0,
  2427. color: "#081947",
  2428. },
  2429. {
  2430. offset: 0.5,
  2431. color: "#5DF5A9",
  2432. },
  2433. {
  2434. offset: 1,
  2435. color: "#F6F16A",
  2436. },
  2437. ]),
  2438. ],
  2439. [1, "#0E4889"],
  2440. ],
  2441. width: 70,
  2442. },
  2443. },
  2444. axisLabel: {
  2445. show: false,
  2446. },
  2447. axisTick: {
  2448. show: false,
  2449. },
  2450. splitLine: {
  2451. show: false,
  2452. },
  2453. itemStyle: {
  2454. show: false,
  2455. },
  2456. },
  2457. {
  2458. name: "外部刻度",
  2459. type: "gauge",
  2460. // center: ['20%', '50%'],
  2461. radius: "90%",
  2462. min: 0, //最小刻度
  2463. max: 100, //最大刻度
  2464. splitNumber: 5, //刻度数量
  2465. startAngle: 225,
  2466. endAngle: -45,
  2467. axisLine: {
  2468. show: true,
  2469. lineStyle: {
  2470. width: 1,
  2471. color: [[1, "rgba(0,0,0,0)"]],
  2472. },
  2473. }, //仪表盘轴线
  2474. axisLabel: {
  2475. show: false,
  2476. color: "#ffffff",
  2477. fontSize: 28,
  2478. fontFamily: "SourceHanSansSC-Regular",
  2479. fontWeight: "bold",
  2480. // position: "top",
  2481. distance: -45,
  2482. formatter: function (v) {
  2483. switch (v + "") {
  2484. case "0":
  2485. return "0";
  2486. case "10":
  2487. return "10";
  2488. case "20":
  2489. return "20";
  2490. case "30":
  2491. return "30";
  2492. case "40":
  2493. return "40";
  2494. case "50":
  2495. return "50";
  2496. case "60":
  2497. return "60";
  2498. case "70":
  2499. return "70";
  2500. case "80":
  2501. return "80";
  2502. case "90":
  2503. return "90";
  2504. case "100":
  2505. return "100";
  2506. }
  2507. },
  2508. }, //刻度标签。
  2509. axisTick: {
  2510. show: true,
  2511. splitNumber: 10,
  2512. lineStyle: {
  2513. color: "#3798D7", //用颜色渐变函数不起作用
  2514. width: 1,
  2515. },
  2516. length: -6,
  2517. }, //刻度样式
  2518. splitLine: {
  2519. show: true,
  2520. length: -12,
  2521. lineStyle: {
  2522. color: "#3798D7", //用颜色渐变函数不起作用
  2523. },
  2524. }, //分隔线样式
  2525. detail: {
  2526. show: false,
  2527. },
  2528. },
  2529. {
  2530. //指针上的圆
  2531. type: "pie",
  2532. tooltip: {
  2533. show: false,
  2534. },
  2535. hoverAnimation: false,
  2536. legendHoverLink: false,
  2537. radius: ["0%", "4%"],
  2538. center: ["50%", "50%"],
  2539. label: {
  2540. normal: {
  2541. show: false,
  2542. },
  2543. },
  2544. labelLine: {
  2545. normal: {
  2546. show: false,
  2547. },
  2548. },
  2549. data: [
  2550. {
  2551. value: 120,
  2552. itemStyle: {
  2553. normal: {
  2554. color: "#ffffff",
  2555. },
  2556. },
  2557. },
  2558. ],
  2559. },
  2560. ],
  2561. };
  2562. //轮播
  2563. // tools.loopShowTooltip(leftEcharts1, option, {
  2564. // interval: 2000,
  2565. // loopSeries: true,
  2566. // });
  2567. //注册
  2568. that.leftEcharts6.setOption(option);
  2569. },
  2570. leftEcharts7Fun () {
  2571. let that = this;
  2572. this.leftEcharts7 = echarts.init(this.$refs["leftEcharts7"]);
  2573. let option = {
  2574. title: {
  2575. text: "固定资产进度分布",
  2576. textStyle: {
  2577. color: "#fff",
  2578. fontSize: 28,
  2579. fontWeight: 500,
  2580. fontFamily: "Microsoft YaHei",
  2581. },
  2582. top: "20",
  2583. left: "220",
  2584. },
  2585. textStyle: {
  2586. color: "#fff",
  2587. },
  2588. tooltip: {
  2589. show: false,
  2590. trigger: "axis",
  2591. formatter: function (params) {
  2592. var tip =
  2593. params[0].axisValue +
  2594. "<br/>" +
  2595. params[0].marker +
  2596. params[0].data[1] +
  2597. ":" +
  2598. params[0].data[2] +
  2599. "个," +
  2600. params[0].data[3] +
  2601. "亿元" +
  2602. "<br/>" +
  2603. params[1].marker +
  2604. params[1].data[1] +
  2605. ":" +
  2606. params[1].data[2] +
  2607. "个," +
  2608. params[1].data[3] +
  2609. "亿元";
  2610. return tip;
  2611. },
  2612. textStyle: {
  2613. color: "#ffffff", // 文字的颜色
  2614. fontSize: "20", // 文字字体大小
  2615. fontFamily: "Microsoft YaHei",
  2616. },
  2617. axisPointer: {
  2618. // lineStyle: {
  2619. // type: 'dashed',
  2620. // width: 2,
  2621. // color: 'rgba(255,255,255,0.6)'
  2622. // },
  2623. animation: false,
  2624. },
  2625. },
  2626. grid: {
  2627. top: "0%",
  2628. right: "5%",
  2629. left: "15%",
  2630. bottom: "-10%",
  2631. },
  2632. yAxis: {
  2633. data: ["备案", "特别监管"],
  2634. splitLine: {
  2635. show: false,
  2636. lineStyle: {
  2637. color: "#68b4dd66",
  2638. type: "dashed",
  2639. },
  2640. },
  2641. axisLine: {
  2642. show: false,
  2643. },
  2644. axisLabel: {
  2645. show: true,
  2646. formatter: "{value}",
  2647. textStyle: {
  2648. color: function (data) {
  2649. if (data == "特别监管") {
  2650. return "#40A9FF";
  2651. } else if (data == "备案") {
  2652. return "#5BDCC8";
  2653. }
  2654. },
  2655. fontSize: 20,
  2656. padding: [0, -10, 0, 0],
  2657. fontFamily: "Microsoft YaHei",
  2658. },
  2659. },
  2660. nameTextStyle: {
  2661. color: "#ebf8ac",
  2662. fontSize: 16,
  2663. fontFamily: "Microsoft YaHei",
  2664. },
  2665. },
  2666. xAxis: {
  2667. data: ["项目储备", "项目立项", "可研论证", "投资决策"],
  2668. axisLine: {
  2669. show: true, //隐藏X轴轴线
  2670. lineStyle: {
  2671. color: "red",
  2672. width: 1,
  2673. },
  2674. },
  2675. axisTick: {
  2676. show: false, //隐藏X轴刻度
  2677. },
  2678. axisLabel: {
  2679. show: true,
  2680. textStyle: {
  2681. color: "#fff", //X轴文字颜色
  2682. fontSize: 20,
  2683. padding: [-80, 0, 0, 0],
  2684. fontFamily: "Microsoft YaHei",
  2685. },
  2686. },
  2687. },
  2688. series: [
  2689. {
  2690. name: "特别监管",
  2691. type: "scatter",
  2692. symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2693. symbolSize: function (data) {
  2694. return Math.sqrt(data[2]) * 5;
  2695. },
  2696. // label: {
  2697. // emphasis: {
  2698. // show: true,
  2699. // formatter: function (param) {
  2700. // return param.data[2];
  2701. // },
  2702. // position: 'top'
  2703. // }
  2704. // },
  2705. itemStyle: {
  2706. normal: {
  2707. color: "#69c0ff",
  2708. },
  2709. },
  2710. // data: left13[0]
  2711. },
  2712. {
  2713. name: "备案",
  2714. type: "scatter",
  2715. symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2716. symbolSize: function (data) {
  2717. return Math.sqrt(data[2]) * 5;
  2718. },
  2719. // label: {
  2720. // emphasis: {
  2721. // show: true,
  2722. // formatter: function (param) {
  2723. // return param.data[2];
  2724. // },
  2725. // position: 'top'
  2726. // }
  2727. // },
  2728. itemStyle: {
  2729. normal: {
  2730. color: "#957DFF",
  2731. },
  2732. },
  2733. // data: left13[1]
  2734. },
  2735. ],
  2736. };
  2737. //轮播
  2738. // tools.loopShowTooltip(leftEcharts1, option, {
  2739. // interval: 2000,
  2740. // loopSeries: true,
  2741. // });
  2742. //注册
  2743. that.leftEcharts7.setOption(option);
  2744. },
  2745. leftEcharts8Fun () {
  2746. let that = this;
  2747. this.leftEcharts8 = echarts.init(this.$refs["leftEcharts8"]);
  2748. let option = {
  2749. title: {
  2750. text: "固定资产进度分布",
  2751. textStyle: {
  2752. color: "#fff",
  2753. fontSize: 28,
  2754. fontWeight: 500,
  2755. fontFamily: "Microsoft YaHei",
  2756. },
  2757. top: "20",
  2758. left: "220",
  2759. },
  2760. textStyle: {
  2761. color: "#fff",
  2762. },
  2763. tooltip: {
  2764. show: false,
  2765. trigger: "axis",
  2766. formatter: function (params) {
  2767. var tip =
  2768. params[0].axisValue +
  2769. "<br/>" +
  2770. params[0].marker +
  2771. params[0].data[1] +
  2772. ":" +
  2773. params[0].data[2] +
  2774. "个," +
  2775. params[0].data[3] +
  2776. "亿元" +
  2777. "<br/>" +
  2778. params[1].marker +
  2779. params[1].data[1] +
  2780. ":" +
  2781. params[1].data[2] +
  2782. "个," +
  2783. params[1].data[3] +
  2784. "亿元";
  2785. return tip;
  2786. },
  2787. textStyle: {
  2788. color: "#ffffff", // 文字的颜色
  2789. fontSize: "20", // 文字字体大小
  2790. fontFamily: "Microsoft YaHei",
  2791. },
  2792. axisPointer: {
  2793. // lineStyle: {
  2794. // type: 'dashed',
  2795. // width: 2,
  2796. // color: 'rgba(255,255,255,0.6)'
  2797. // },
  2798. animation: false,
  2799. },
  2800. },
  2801. grid: {
  2802. top: "0%",
  2803. right: "5%",
  2804. left: "15%",
  2805. bottom: "-10%",
  2806. },
  2807. yAxis: {
  2808. data: ["备案", "特别监管"],
  2809. splitLine: {
  2810. show: false,
  2811. lineStyle: {
  2812. color: "#68b4dd66",
  2813. type: "dashed",
  2814. },
  2815. },
  2816. axisLine: {
  2817. show: false,
  2818. },
  2819. axisLabel: {
  2820. show: false,
  2821. formatter: "{value}",
  2822. textStyle: {
  2823. color: "#fff",
  2824. fontSize: 20,
  2825. padding: [0, -10, 0, 0],
  2826. fontFamily: "Microsoft YaHei",
  2827. },
  2828. },
  2829. nameTextStyle: {
  2830. color: "#ebf8ac",
  2831. fontSize: 16,
  2832. fontFamily: "Microsoft YaHei",
  2833. },
  2834. },
  2835. xAxis: {
  2836. data: ["项目储备", "项目立项", "可研论证", "投资决策"],
  2837. axisLine: {
  2838. show: true, //隐藏X轴轴线
  2839. lineStyle: {
  2840. color: "red",
  2841. width: 1,
  2842. },
  2843. },
  2844. axisTick: {
  2845. show: false, //隐藏X轴刻度
  2846. },
  2847. axisLabel: {
  2848. show: true,
  2849. textStyle: {
  2850. color: "#fff", //X轴文字颜色
  2851. fontSize: 20,
  2852. padding: [-80, 0, 0, 0],
  2853. fontFamily: "Microsoft YaHei",
  2854. },
  2855. },
  2856. },
  2857. series: [
  2858. {
  2859. name: "特别监管",
  2860. type: "scatter",
  2861. symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2862. symbolSize: function (data) {
  2863. return Math.sqrt(data[2]) * 5;
  2864. },
  2865. // label: {
  2866. // emphasis: {
  2867. // show: true,
  2868. // formatter: function (param) {
  2869. // return param.data[2];
  2870. // },
  2871. // position: 'top'
  2872. // }
  2873. // },
  2874. itemStyle: {
  2875. normal: {
  2876. color: "#69c0ff",
  2877. },
  2878. },
  2879. // data: left13[0]
  2880. },
  2881. {
  2882. name: "备案",
  2883. type: "scatter",
  2884. symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2885. symbolSize: function (data) {
  2886. return Math.sqrt(data[2]) * 5;
  2887. },
  2888. // label: {
  2889. // emphasis: {
  2890. // show: true,
  2891. // formatter: function (param) {
  2892. // return param.data[2];
  2893. // },
  2894. // position: 'top'
  2895. // }
  2896. // },
  2897. itemStyle: {
  2898. normal: {
  2899. color: "#957DFF",
  2900. },
  2901. },
  2902. // data: left13[1]
  2903. },
  2904. ],
  2905. };
  2906. //轮播
  2907. // tools.loopShowTooltip(leftEcharts1, option, {
  2908. // interval: 2000,
  2909. // loopSeries: true,
  2910. // });
  2911. //注册
  2912. that.leftEcharts8.setOption(option);
  2913. },
  2914. shanxiEchartsFun () {
  2915. let that = this;
  2916. this.geoCoordMap = [];
  2917. /*获取地图数据*/
  2918. this.shanxiMap = echarts.init(this.$refs["shanxi"]);
  2919. // echarts.registerMap('china', china)
  2920. echarts.registerMap("china", shanxi);
  2921. // var mapFeatures = echarts.getMap('china').geoJson.features
  2922. // mapFeatures.forEach(v => {
  2923. // // 地区名称
  2924. // var name = v.properties.name
  2925. // // 地区经纬度
  2926. // this.geoCoordMap[name] = v.properties.cp
  2927. // data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
  2928. // })
  2929. var data = [
  2930. { name: "大同市", value: 6035, value2: 28 },
  2931. { name: "朔州市", value: 3361, value2: 13 },
  2932. { name: "忻州市", value: 7335, value2: 25 },
  2933. { name: "吕梁市", value: 10904, value2: 45 },
  2934. { name: "太原市", value: 25167, value2: 113 },
  2935. { name: "阳泉市", value: 2512, value2: 28 },
  2936. { name: "晋中市", value: 14857, value2: 52 },
  2937. { name: "临汾市", value: 13055, value2: 30 },
  2938. { name: "长治市", value: 10300, value2: 23 },
  2939. { name: "运城市", value: 4106, value2: 23 },
  2940. { name: "晋城市", value: 4543, value2: 31 },
  2941. ];
  2942. var geoCoordMap = {
  2943. 太原市: [112.53, 37.87],
  2944. 大同市: [113.3, 40.12],
  2945. 阳泉市: [113.57, 37.85],
  2946. 长治市: [113.08, 36.18],
  2947. 晋城市: [112.83, 35.52],
  2948. 朔州市: [112.43, 39.33],
  2949. 晋中市: [112.94, 37.4],
  2950. 运城市: [110.97, 35.03],
  2951. 忻州市: [112.53, 38.72],
  2952. 临汾市: [111.5, 36.08],
  2953. 吕梁市: [111.13, 37.52],
  2954. };
  2955. var convertData = function (data) {
  2956. var res = [];
  2957. for (var i = 0; i < data.length; i++) {
  2958. var geoCoord = geoCoordMap[data[i].name];
  2959. if (geoCoord) {
  2960. res.push({
  2961. name: data[i].name,
  2962. value: geoCoord.concat(data[i].value, data[i].value2),
  2963. });
  2964. }
  2965. }
  2966. return res;
  2967. };
  2968. var convertedData = [
  2969. convertData(data),
  2970. convertData(
  2971. data
  2972. .sort(function (a, b) {
  2973. return b.value - a.value;
  2974. })
  2975. .slice(0, 6)
  2976. ),
  2977. ];
  2978. data.sort(function (a, b) {
  2979. return a.value - b.value;
  2980. });
  2981. option = {
  2982. backgroundColor: "#404a5900",
  2983. animation: true,
  2984. animationDuration: 1000,
  2985. animationEasing: "cubicInOut",
  2986. animationDurationUpdate: 1000,
  2987. animationEasingUpdate: "cubicInOut",
  2988. geo: {
  2989. map: "china",
  2990. center: [112.53, 37.67],
  2991. zoom: 4.5,
  2992. label: {
  2993. emphasis: {
  2994. show: false,
  2995. },
  2996. },
  2997. roam: false,
  2998. itemStyle: {
  2999. normal: {
  3000. borderColor: "#7fb3ff",
  3001. borderWidth: 3,
  3002. areaColor: {
  3003. type: "radial",
  3004. x: 0.5,
  3005. y: 0.5,
  3006. r: 0.8,
  3007. colorStops: [
  3008. {
  3009. offset: 0,
  3010. color: "#468ff8", // 0% 处的颜色
  3011. },
  3012. {
  3013. offset: 1,
  3014. color: "#0a2c6d", // 100% 处的颜色
  3015. },
  3016. ],
  3017. globalCoord: false, // 缺省为 false
  3018. },
  3019. // shadowColor: 'rgba(128, 217, 248, 1)',
  3020. shadowColor: "#468ff8",
  3021. shadowOffsetX: -2,
  3022. shadowOffsetY: 2,
  3023. shadowBlur: 20,
  3024. },
  3025. emphasis: {
  3026. areaColor: {
  3027. colorStops: [
  3028. {
  3029. offset: 0,
  3030. color: "#3844aa", // 0% 处的颜色
  3031. },
  3032. {
  3033. offset: 1,
  3034. color: "#7284fc", // 100% 处的颜色
  3035. },
  3036. ],
  3037. },
  3038. borderColor: "#b3baff",
  3039. borderWidth: 5,
  3040. },
  3041. },
  3042. tooltip: {
  3043. trigger: "item",
  3044. className: "custom-tooltip-box",
  3045. confine: true, // 不超出当前表
  3046. formatter: (params, ticket, callback) => {
  3047. // 清空所有轮播
  3048. for (var k in geoCoordMap) {
  3049. that.shanxiMap.dispatchAction({
  3050. // type: 'geoUnSelect',
  3051. type: "downplay",
  3052. name: k,
  3053. geoIndex: 0,
  3054. });
  3055. that.shanxiMap.dispatchAction({
  3056. // type: 'geoUnSelect',
  3057. type: "downplay",
  3058. name: k,
  3059. seriesName: params.seriesName,
  3060. });
  3061. that.shanxiMap.dispatchAction({
  3062. // type: 'geoUnSelect',
  3063. type: "downplay",
  3064. name: k,
  3065. seriesName: "series\u00001",
  3066. });
  3067. }
  3068. that.shanxiMap.dispatchAction({
  3069. // type: 'geoSelect',
  3070. type: "highlight",
  3071. name: params.name,
  3072. geoIndex: 0,
  3073. });
  3074. that.shanxiMap.dispatchAction({
  3075. // type: 'geoSelect',
  3076. type: "highlight",
  3077. name: params.name,
  3078. seriesName: params.seriesName,
  3079. });
  3080. that.shanxiMap.dispatchAction({
  3081. // type: 'geoSelect',
  3082. type: "highlight",
  3083. name: params.name,
  3084. seriesName: "series\u00001",
  3085. });
  3086. return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
  3087. <div class="flex items-center">
  3088. <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
  3089. </div>
  3090. <div class="blueIcon flex items-center">项目数量:<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
  3091. <div class="blueIcon flex items-center">投资总额:<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
  3092. </div>`;
  3093. },
  3094. },
  3095. regions: [
  3096. {
  3097. name: "太原市",
  3098. value: 2000,
  3099. itemStyle: {
  3100. emphasis: {
  3101. borderColor: "#ffe036",
  3102. borderWidth: 5,
  3103. areaColor: {
  3104. type: "radial",
  3105. x: 0.5,
  3106. y: 0.5,
  3107. r: 0.8,
  3108. colorStops: [
  3109. {
  3110. offset: 0,
  3111. color: "#ffe036", // 0% 处的颜色
  3112. },
  3113. {
  3114. offset: 1,
  3115. color: "#7c732a", // 100% 处的颜色
  3116. },
  3117. ],
  3118. globalCoord: false, // 缺省为 false
  3119. },
  3120. },
  3121. },
  3122. },
  3123. {
  3124. name: "南海诸岛",
  3125. itemStyle: {
  3126. // 隐藏地图
  3127. normal: {
  3128. opacity: 0, // 为 0 时不绘制该图形
  3129. },
  3130. },
  3131. label: {
  3132. show: false, // 隐藏文字
  3133. },
  3134. },
  3135. ],
  3136. },
  3137. tooltip: {
  3138. trigger: "item",
  3139. className: "custom-tooltip-box",
  3140. confine: true, // 不超出当前表
  3141. },
  3142. xAxis: {
  3143. type: "value",
  3144. scale: true,
  3145. position: "top",
  3146. boundaryGap: false,
  3147. splitLine: {
  3148. show: false,
  3149. },
  3150. axisLine: {
  3151. show: false,
  3152. },
  3153. axisTick: {
  3154. show: false,
  3155. },
  3156. axisLabel: {
  3157. margin: 2,
  3158. textStyle: {
  3159. color: "#aaa",
  3160. },
  3161. },
  3162. },
  3163. yAxis: {
  3164. type: "category",
  3165. nameGap: 16,
  3166. axisLine: {
  3167. show: false,
  3168. lineStyle: {
  3169. color: "#ddd",
  3170. },
  3171. },
  3172. axisTick: {
  3173. show: false,
  3174. lineStyle: {
  3175. color: "#ddd",
  3176. },
  3177. },
  3178. axisLabel: {
  3179. interval: 0,
  3180. textStyle: {
  3181. color: "#ddd",
  3182. },
  3183. },
  3184. data: categoryData,
  3185. },
  3186. series: [
  3187. {
  3188. type: "effectScatter",
  3189. colorBy: "data",
  3190. coordinateSystem: "geo",
  3191. data: convertedData[0],
  3192. symbolSize: function (val) {
  3193. return Math.max(val[2] / 500, 8);
  3194. },
  3195. showEffectOn: "emphasis",
  3196. rippleEffect: {
  3197. brushType: "stroke",
  3198. color: "#58F7DF",
  3199. },
  3200. hoverAnimation: true,
  3201. label: {
  3202. normal: {
  3203. formatter: "{b}",
  3204. position: "right",
  3205. show: true,
  3206. fontSize: "30",
  3207. color: "#fff",
  3208. },
  3209. },
  3210. itemStyle: {
  3211. normal: {
  3212. color: "#ffc809",
  3213. shadowBlur: 50,
  3214. shadowColor: "#ffc809",
  3215. },
  3216. emphasis: {
  3217. color: "#58F7DF",
  3218. shadowBlur: 50,
  3219. shadowColor: "#58F7DF",
  3220. },
  3221. },
  3222. zlevel: 99,
  3223. },
  3224. {
  3225. type: "effectScatter",
  3226. colorBy: "data",
  3227. coordinateSystem: "geo",
  3228. data: [
  3229. {
  3230. name: "太原市",
  3231. value: [112.53, 37.87, 25167, 113],
  3232. },
  3233. ],
  3234. symbolSize: function (val) {
  3235. return Math.max(val[2] / 500, 8);
  3236. },
  3237. showEffectOn: "emphasis",
  3238. rippleEffect: {
  3239. brushType: "stroke",
  3240. color: "#DF62F2",
  3241. },
  3242. hoverAnimation: true,
  3243. label: {
  3244. normal: {
  3245. formatter: "{b}",
  3246. position: "right",
  3247. show: true,
  3248. fontSize: "30",
  3249. color: "#fff",
  3250. },
  3251. },
  3252. itemStyle: {
  3253. normal: {
  3254. color: "#ffc809",
  3255. shadowBlur: 50,
  3256. shadowColor: "#ffc809",
  3257. },
  3258. emphasis: {
  3259. color: "#DF62F2",
  3260. shadowBlur: 50,
  3261. shadowColor: "#DF62F2",
  3262. },
  3263. },
  3264. zlevel: 999,
  3265. },
  3266. ],
  3267. };
  3268. var categoryData = [];
  3269. var barData = [];
  3270. var sum = 0;
  3271. for (var i = 0; i < data.length; i++) {
  3272. categoryData.push(data[i].name);
  3273. barData.push(data[i].value);
  3274. sum += data[i].value;
  3275. }
  3276. // this.shanxiMap.on('click', function (params) {
  3277. // if (params.name == '山西') {
  3278. // that.shanxiMap.dispose()
  3279. // that.centerShow = true
  3280. // setTimeout(() => {
  3281. // })
  3282. // }
  3283. // })
  3284. tools.loopShowTooltip(this.shanxiMap, option, {
  3285. interval: 2000,
  3286. loopSeries: false,
  3287. seriesIndex: 0,
  3288. });
  3289. this.shanxiMap.setOption(option);
  3290. },
  3291. chinaEchartsFun () {
  3292. let that = this;
  3293. this.geoCoordMap = [];
  3294. /*获取地图数据*/
  3295. this.chinaMap = echarts.init(this.$refs["china"]);
  3296. echarts.registerMap("china", china);
  3297. // var mapFeatures = echarts.getMap('china').geoJson.features
  3298. // mapFeatures.forEach(v => {
  3299. // // 地区名称
  3300. // var name = v.properties.name
  3301. // // 地区经纬度
  3302. // this.geoCoordMap[name] = v.properties.cp
  3303. // data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
  3304. // })
  3305. var data = [
  3306. { "name": "新疆", value: 29780, value2: 80 },
  3307. { "name": "西藏", value: 2186, value2: 80 },
  3308. { "name": "内蒙古", value: 1135, value2: 80 },
  3309. { "name": "青海", value: 29780, value2: 80 },
  3310. { "name": "四川", value: 2568, value2: 80 },
  3311. { "name": "黑龙江", value: 29780, value2: 80 },
  3312. { "name": "甘肃", value: 6959, value2: 80 },
  3313. { "name": "云南", value: 5632, value2: 80 },
  3314. { "name": "广西", value: 6707, value2: 80 },
  3315. { "name": "湖南", value: 29780, value2: 80 },
  3316. { "name": "陕西", value: 1894, value2: 80 },
  3317. { "name": "广东", value: 15769, value2: 80 },
  3318. { "name": "吉林", value: 8259, value2: 80 },
  3319. { "name": "河北", value: 5741, value2: 80 },
  3320. { "name": "湖北", value: 3030, value2: 80 },
  3321. { "name": "贵州", value: 4542, value2: 80 },
  3322. { "name": "山东", value: 19780, value2: 80 },
  3323. { "name": "江西", value: 3157, value2: 80 },
  3324. { "name": "河南", value: 6690, value2: 80 },
  3325. { "name": "辽宁", value: 8678, value2: 80 },
  3326. { "name": "山西", value: 5303, value2: 80 },
  3327. { "name": "安徽", value: 29780, value2: 80 },
  3328. { "name": "福建", value: 10259, value2: 80 },
  3329. { "name": "浙江", value: 3016, value2: 80 },
  3330. { "name": "江苏", value: 3202, value2: 80 },
  3331. { "name": "重庆", value: 4540, value2: 80 },
  3332. { "name": "宁夏", value: 19780, value2: 80 },
  3333. { "name": "海南", value: 8626, value2: 80 },
  3334. { "name": "台湾", value: 4361, value2: 80 },
  3335. { "name": "北京", value: 20000, value2: 80 },
  3336. { "name": "天津", value: 4080, value2: 80 },
  3337. { "name": "上海", value: 19780, value2: 80 },
  3338. { "name": "香港", value: 6991, value2: 80 },
  3339. { "name": "澳门", value: 13873, value2: 80 },
  3340. ];
  3341. var geoCoordMap = {
  3342. "新疆": [86.9023, 41.148],
  3343. "西藏": [87.8695, 31.6846],
  3344. "内蒙古": [110.5977, 41.3408],
  3345. "青海": [95.2402, 35.4199],
  3346. "四川": [102.9199, 30.1904],
  3347. "黑龙江": [128.1445, 46.7156],
  3348. "甘肃": [102.7129, 38.166],
  3349. "云南": [101.0652, 24.6807],
  3350. "广西": [108.7813, 23.6426],
  3351. "湖南": [111.5332, 27.3779],
  3352. "陕西": [108.5996, 33.7396],
  3353. "广东": [113.8668, 22.8076],
  3354. "吉林": [126.1746, 43.5938],
  3355. "河北": [115.4004, 38.1688],
  3356. "湖北": [112.2363, 30.8572],
  3357. "贵州": [106.6113, 26.6385],
  3358. "山东": [118.2402, 36.2307],
  3359. "江西": [115.7156, 27.99],
  3360. "河南": [113.0668, 33.8818],
  3361. "辽宁": [123.0438, 41.0889],
  3362. "山西": [112.44, 37.73],
  3363. "安徽": [117.2461, 31.0361],
  3364. "福建": [118.3008, 25.9277],
  3365. "浙江": [120.498, 29.0918],
  3366. "江苏": [119.8586, 32.915],
  3367. "重庆": [107.7539, 29.8904],
  3368. "宁夏": [105.9961, 37.1096],
  3369. "海南": [109.9512, 19.2041],
  3370. "台湾": [120.8254, 23.5986],
  3371. "北京": [116.4551, 40.2539],
  3372. "天津": [117.4219, 39.4189],
  3373. "上海": [121.4648, 31.2891],
  3374. "香港": [114.6178, 22.3242],
  3375. "澳门": [113.5547, 21.6484],
  3376. '南海诸岛': [128.8254, 21.5986]
  3377. };
  3378. var convertData = function (data) {
  3379. var res = [];
  3380. for (var i = 0; i < data.length; i++) {
  3381. var geoCoord = geoCoordMap[data[i].name];
  3382. if (geoCoord) {
  3383. res.push({
  3384. name: data[i].name,
  3385. value: geoCoord.concat(data[i].value, data[i].value2),
  3386. });
  3387. }
  3388. }
  3389. return res;
  3390. };
  3391. var convertedData = [
  3392. convertData(data),
  3393. convertData(
  3394. data
  3395. .sort(function (a, b) {
  3396. return b.value - a.value;
  3397. })
  3398. .slice(0, 6)
  3399. ),
  3400. ];
  3401. data.sort(function (a, b) {
  3402. return a.value - b.value;
  3403. });
  3404. option = {
  3405. animation: true,
  3406. animationDuration: 1000,
  3407. animationEasing: "cubicInOut",
  3408. animationDurationUpdate: 1000,
  3409. animationEasingUpdate: "cubicInOut",
  3410. geo: {
  3411. map: "china",
  3412. zoom: 0.9,
  3413. label: {
  3414. emphasis: {
  3415. show: false,
  3416. },
  3417. },
  3418. roam: false,
  3419. itemStyle: {
  3420. normal: {
  3421. borderColor: "#7fb3ff",
  3422. borderWidth: 3,
  3423. areaColor: {
  3424. type: "radial",
  3425. x: 0.5,
  3426. y: 0.5,
  3427. r: 0.8,
  3428. colorStops: [
  3429. {
  3430. offset: 0,
  3431. color: "#468ff8", // 0% 处的颜色
  3432. },
  3433. {
  3434. offset: 1,
  3435. color: "#0a2c6d", // 100% 处的颜色
  3436. },
  3437. ],
  3438. globalCoord: false, // 缺省为 false
  3439. },
  3440. // shadowColor: 'rgba(128, 217, 248, 1)',
  3441. shadowColor: "#468ff8",
  3442. shadowOffsetX: -2,
  3443. shadowOffsetY: 2,
  3444. shadowBlur: 20,
  3445. },
  3446. emphasis: {
  3447. areaColor: {
  3448. colorStops: [
  3449. {
  3450. offset: 0,
  3451. color: "#3844aa", // 0% 处的颜色
  3452. },
  3453. {
  3454. offset: 1,
  3455. color: "#7284fc", // 100% 处的颜色
  3456. },
  3457. ],
  3458. },
  3459. borderColor: "#b3baff",
  3460. borderWidth: 5,
  3461. },
  3462. },
  3463. tooltip: {
  3464. trigger: "item",
  3465. className: "custom-tooltip-box",
  3466. confine: true, // 不超出当前表
  3467. formatter: (params, ticket, callback) => {
  3468. // 清空所有轮播
  3469. for (var k in geoCoordMap) {
  3470. that.chinaMap.dispatchAction({
  3471. // type: 'geoUnSelect',
  3472. type: "downplay",
  3473. name: k,
  3474. geoIndex: 0,
  3475. });
  3476. that.chinaMap.dispatchAction({
  3477. // type: 'geoUnSelect',
  3478. type: "downplay",
  3479. name: k,
  3480. seriesName: params.seriesName,
  3481. });
  3482. that.chinaMap.dispatchAction({
  3483. // type: 'geoUnSelect',
  3484. type: "downplay",
  3485. name: k,
  3486. seriesName: "series\u00001",
  3487. });
  3488. }
  3489. that.chinaMap.dispatchAction({
  3490. // type: 'geoSelect',
  3491. type: "highlight",
  3492. name: params.name,
  3493. geoIndex: 0,
  3494. });
  3495. that.chinaMap.dispatchAction({
  3496. // type: 'geoSelect',
  3497. type: "highlight",
  3498. name: params.name,
  3499. seriesName: params.seriesName,
  3500. });
  3501. that.chinaMap.dispatchAction({
  3502. // type: 'geoSelect',
  3503. type: "highlight",
  3504. name: params.name,
  3505. seriesName: "series\u00001",
  3506. });
  3507. return `<div class="bgTooltip" style="background: rgba(50,50,50,0.7);font-size:36px">
  3508. <div class="flex items-center">
  3509. <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
  3510. </div>
  3511. <div class="blueIcon flex items-center">项目数量:<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
  3512. <div class="blueIcon flex items-center">投资总额:<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
  3513. </div>`;
  3514. },
  3515. },
  3516. // regions: [
  3517. // {
  3518. // name: "南海诸岛",
  3519. // itemStyle: {
  3520. // // 隐藏地图
  3521. // normal: {
  3522. // opacity: 1, // 为 0 时不绘制该图形
  3523. // },
  3524. // },
  3525. // label: {
  3526. // show: true, // 隐藏文字
  3527. // },
  3528. // },
  3529. // ],
  3530. },
  3531. tooltip: {
  3532. trigger: "item",
  3533. className: "custom-tooltip-box",
  3534. confine: true, // 不超出当前表
  3535. },
  3536. xAxis: {
  3537. type: "value",
  3538. scale: true,
  3539. position: "top",
  3540. boundaryGap: false,
  3541. splitLine: {
  3542. show: false,
  3543. },
  3544. axisLine: {
  3545. show: false,
  3546. },
  3547. axisTick: {
  3548. show: false,
  3549. },
  3550. axisLabel: {
  3551. margin: 2,
  3552. textStyle: {
  3553. color: "#aaa",
  3554. },
  3555. },
  3556. },
  3557. yAxis: {
  3558. type: "category",
  3559. nameGap: 16,
  3560. axisLine: {
  3561. show: false,
  3562. lineStyle: {
  3563. color: "#ddd",
  3564. },
  3565. },
  3566. axisTick: {
  3567. show: false,
  3568. lineStyle: {
  3569. color: "#ddd",
  3570. },
  3571. },
  3572. axisLabel: {
  3573. interval: 0,
  3574. textStyle: {
  3575. color: "#ddd",
  3576. },
  3577. },
  3578. data: categoryData,
  3579. },
  3580. series: [
  3581. {
  3582. type: "effectScatter",
  3583. colorBy: "data",
  3584. coordinateSystem: "geo",
  3585. data: convertedData[0],
  3586. symbolSize: function (val) {
  3587. return Math.max(val[2] / 500, 8);
  3588. },
  3589. showEffectOn: "emphasis",
  3590. rippleEffect: {
  3591. brushType: "stroke",
  3592. color: "#58F7DF",
  3593. },
  3594. hoverAnimation: true,
  3595. label: {
  3596. normal: {
  3597. formatter: "{b}",
  3598. position: "right",
  3599. show: true,
  3600. fontSize: "30",
  3601. color: "#fff",
  3602. },
  3603. },
  3604. itemStyle: {
  3605. normal: {
  3606. color: "#ffc809",
  3607. shadowBlur: 50,
  3608. shadowColor: "#ffc809",
  3609. },
  3610. emphasis: {
  3611. color: "#58F7DF",
  3612. shadowBlur: 50,
  3613. shadowColor: "#58F7DF",
  3614. },
  3615. },
  3616. zlevel: 99,
  3617. },
  3618. // {
  3619. // type: "effectScatter",
  3620. // colorBy: "data",
  3621. // coordinateSystem: "geo",
  3622. // data: [
  3623. // {
  3624. // name: "山西",
  3625. // value: [112.44, 37.73],
  3626. // },
  3627. // ],
  3628. // symbolSize: function (val) {
  3629. // return Math.max(val[2] / 500, 8);
  3630. // },
  3631. // showEffectOn: "emphasis",
  3632. // rippleEffect: {
  3633. // brushType: "stroke",
  3634. // color: "#DF62F2",
  3635. // },
  3636. // hoverAnimation: true,
  3637. // label: {
  3638. // normal: {
  3639. // formatter: "{b}",
  3640. // position: "right",
  3641. // show: true,
  3642. // fontSize: "30",
  3643. // color: "#fff",
  3644. // },
  3645. // },
  3646. // itemStyle: {
  3647. // normal: {
  3648. // color: "#ffc809",
  3649. // shadowBlur: 50,
  3650. // shadowColor: "#ffc809",
  3651. // },
  3652. // emphasis: {
  3653. // color: "#DF62F2",
  3654. // shadowBlur: 50,
  3655. // shadowColor: "#DF62F2",
  3656. // },
  3657. // },
  3658. // zlevel: 999,
  3659. // },
  3660. ],
  3661. };
  3662. var categoryData = [];
  3663. var barData = [];
  3664. var sum = 0;
  3665. for (var i = 0; i < data.length; i++) {
  3666. categoryData.push(data[i].name);
  3667. barData.push(data[i].value);
  3668. sum += data[i].value;
  3669. }
  3670. this.chinaMap.on('click', function (params) {
  3671. if (params.name == '山西') {
  3672. that.chinaMap.dispose()
  3673. that.leftEcharts16.dispose()
  3674. that.mapShow = true
  3675. setTimeout(() => {
  3676. that.leftEcharts12Fun()
  3677. that.leftEcharts14Fun()
  3678. that.leftEcharts9Fun()
  3679. that.leftEcharts15Fun()
  3680. that.leftEcharts13Fun()
  3681. that.shanxiEchartsFun()
  3682. })
  3683. }
  3684. })
  3685. tools.loopShowTooltip(this.chinaMap, option, {
  3686. interval: 2000,
  3687. loopSeries: false,
  3688. seriesIndex: 0,
  3689. });
  3690. this.chinaMap.setOption(option);
  3691. },
  3692. leftEcharts9Fun () {
  3693. let that = this;
  3694. this.leftEcharts9 = echarts.init(this.$refs["leftEcharts9"]);
  3695. // var ROOT_PATH = 'https://echarts.apache.org/examples';
  3696. let option = {
  3697. backgroundColor: "#00000000",
  3698. globe: {
  3699. globeRadius: 55,
  3700. baseTexture: "./img/3D/world1.jpg",
  3701. heightTexture: "./img/3D/world1.jpg",
  3702. displacementScale: 0.04,
  3703. shading: "realistic",
  3704. // environment: './img/3D/world2.jpg',
  3705. realisticMaterial: {
  3706. roughness: 0.9,
  3707. },
  3708. postEffect: {
  3709. enable: true,
  3710. },
  3711. light: {
  3712. main: {
  3713. intensity: 3,
  3714. shadow: true,
  3715. },
  3716. },
  3717. },
  3718. };
  3719. that.leftEcharts9.setOption(option);
  3720. },
  3721. leftEcharts10Fun () {
  3722. let that = this;
  3723. this.leftEcharts10 = echarts.init(this.$refs["leftEcharts10"]);
  3724. option = {
  3725. grid: {
  3726. top: 45,
  3727. right: 0,
  3728. left: 80,
  3729. bottom: 80,
  3730. },
  3731. tooltip: {
  3732. show: true,
  3733. trigger: "axis",
  3734. formatter: (data) => {
  3735. return `${data[0].name
  3736. }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color
  3737. }"></span> ${data[0].seriesName}:${that.numFormat(
  3738. data[0].value
  3739. )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color
  3740. }"></span> ${data[1].seriesName}:${that.numFormat(
  3741. data[1].value
  3742. )}亿`;
  3743. },
  3744. axisPointer: {
  3745. // 坐标轴指示器,坐标轴触发有效
  3746. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  3747. },
  3748. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  3749. borderColor: "rgba(50,50,50,0.7)",
  3750. textStyle: {
  3751. color: "#fff",
  3752. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  3753. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  3754. fontSize: "28", // 文字字体大小
  3755. },
  3756. },
  3757. xAxis: {
  3758. data: commonCompany,
  3759. axisTick: {
  3760. show: false,
  3761. },
  3762. // x轴的字体颜色
  3763. axisLabel: {
  3764. rotate: 40,
  3765. textStyle: {
  3766. color: "white",
  3767. fontSize: "20",
  3768. fontFamily: "Microsoft YaHei",
  3769. },
  3770. },
  3771. //y轴线的颜色以及宽度
  3772. axisLine: {
  3773. show: true,
  3774. lineStyle: {
  3775. color: "#1E5389",
  3776. width: 1,
  3777. type: "solid",
  3778. },
  3779. },
  3780. },
  3781. yAxis: {
  3782. name: "亿",
  3783. axisTick: {
  3784. lineStyle: {
  3785. color: "#18416F",
  3786. },
  3787. },
  3788. // y轴的字体颜色
  3789. axisLabel: {
  3790. textStyle: {
  3791. color: "white",
  3792. fontSize: "20",
  3793. fontFamily: "Microsoft YaHei",
  3794. },
  3795. },
  3796. splitLine: {
  3797. show: true,
  3798. lineStyle: {
  3799. color: "#68b4dd66",
  3800. width: 1,
  3801. type: "dashed",
  3802. },
  3803. },
  3804. //y轴线的颜色以及宽度
  3805. axisLine: {
  3806. show: true,
  3807. lineStyle: {
  3808. color: "#1E5389",
  3809. width: 1,
  3810. type: "solid",
  3811. },
  3812. },
  3813. nameTextStyle: {
  3814. color: "#fff",
  3815. fontSize: 20,
  3816. fontFamily: "Microsoft YaHei",
  3817. },
  3818. },
  3819. series: [
  3820. {
  3821. name: "已用额度",
  3822. type: "pictorialBar",
  3823. symbol: "fixed",
  3824. symbolSize: [20, 5],
  3825. symbolMargin: 2,
  3826. symbolRepeat: "repeat",
  3827. data: [
  3828. 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46,
  3829. 26, 36,
  3830. ],
  3831. showBackground: false,
  3832. barWidth: "15",
  3833. itemStyle: {
  3834. color: "#40A9FF",
  3835. },
  3836. zlevel: 1,
  3837. },
  3838. {
  3839. name: "总额度",
  3840. type: "pictorialBar",
  3841. symbol: "fixed",
  3842. symbolSize: [30, 5],
  3843. symbolMargin: 2,
  3844. symbolRepeat: "repeat",
  3845. data: [
  3846. 390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390,
  3847. 390, 390, 200, 390, 200,
  3848. ],
  3849. barGap: "-130%",
  3850. barWidth: "25",
  3851. itemStyle: {
  3852. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  3853. {
  3854. offset: 0,
  3855. color: "#b9b7c030",
  3856. },
  3857. {
  3858. offset: 1,
  3859. color: "#b9b7c030",
  3860. },
  3861. ]),
  3862. },
  3863. },
  3864. ],
  3865. };
  3866. //轮播
  3867. tools.loopShowTooltip(that.leftEcharts10, option, {
  3868. interval: 2000,
  3869. loopSeries: true,
  3870. });
  3871. //注册
  3872. that.leftEcharts10.setOption(option);
  3873. },
  3874. // 重点项目两线指标轮播方法
  3875. scrollChange (index) {
  3876. if (index == 18) {
  3877. this.count = -1;
  3878. } else {
  3879. this.count = index;
  3880. }
  3881. if (this.count > 12 && this.count != 18) {
  3882. this.countType = 1;
  3883. } else {
  3884. this.countType = 0;
  3885. }
  3886. for (var i = 0; i < this.list.length; i++) {
  3887. if (i == 2) {
  3888. this.list[i].classList.add("light");
  3889. } else {
  3890. this.list[i].classList.remove("light");
  3891. }
  3892. }
  3893. this.leftEcharts11 ? this.leftEcharts11.dispose() : "";
  3894. this.leftEcharts11Fun();
  3895. },
  3896. leftEcharts11Fun () {
  3897. let that = this;
  3898. this.leftEcharts11 = echarts.init(this.$refs["leftEcharts11"]);
  3899. option = {
  3900. tooltip: {
  3901. trigger: "axis",
  3902. formatter:
  3903. "指标:" +
  3904. "{c0}" +
  3905. "<br/>" +
  3906. "发展线:" +
  3907. "{c1}" +
  3908. "<br/>" +
  3909. "生存线:" +
  3910. "{c2}", //+ '<br/>'+ '{a1}:{c1}' + '%',
  3911. axisPointer: {
  3912. type: "shadow",
  3913. },
  3914. backgroundColor: "rgba(50,50,50,0.7)",
  3915. borderColor: "rgba(50,50,50,0.7)",
  3916. textStyle: {
  3917. color: "#fff",
  3918. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  3919. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  3920. fontSize: "28", // 文字字体大小
  3921. }
  3922. },
  3923. grid: {
  3924. top: "10%",
  3925. right: "5%",
  3926. left: "15%",
  3927. bottom: "20%",
  3928. },
  3929. xAxis: {
  3930. data: [
  3931. "总投资收益率",
  3932. "销售利润率",
  3933. "成本费用利润率",
  3934. "总资产周转率",
  3935. "财务内部收益率",
  3936. ],
  3937. // data: left15[this.countType],
  3938. axisLine: {
  3939. show: true, //隐藏X轴轴线
  3940. lineStyle: {
  3941. color: "#005094",
  3942. width: 1,
  3943. },
  3944. },
  3945. axisTick: {
  3946. show: true, //隐藏X轴刻度
  3947. },
  3948. axisLabel: {
  3949. show: true,
  3950. rotate: 30,
  3951. textStyle: {
  3952. color: "#fff", //X轴文字颜色
  3953. fontSize: 20,
  3954. fontFamily: "Microsoft YaHei",
  3955. },
  3956. },
  3957. },
  3958. yAxis: [
  3959. {
  3960. type: "value",
  3961. splitLine: {
  3962. show: true,
  3963. lineStyle: {
  3964. color: "#68b4dd66",
  3965. type: "dashed",
  3966. },
  3967. },
  3968. axisLine: {
  3969. show: false,
  3970. },
  3971. axisLabel: {
  3972. show: true,
  3973. formatter: "{value}%",
  3974. textStyle: {
  3975. color: "#fff",
  3976. fontSize: 20,
  3977. fontFamily: "Microsoft YaHei",
  3978. },
  3979. },
  3980. nameTextStyle: {
  3981. color: "#ebf8ac",
  3982. fontSize: 16,
  3983. fontFamily: "Microsoft YaHei",
  3984. },
  3985. },
  3986. ],
  3987. series: [
  3988. {
  3989. name: "实际值",
  3990. type: "bar",
  3991. barWidth: 20,
  3992. itemStyle: {
  3993. normal: {
  3994. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3995. {
  3996. offset: 0,
  3997. color: "#69c0ff",
  3998. },
  3999. {
  4000. offset: 1,
  4001. color: "#082550",
  4002. },
  4003. ]),
  4004. },
  4005. },
  4006. data: [70, 52, 33, 41, 52],
  4007. // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][2] : left12[this.count + 1][2]
  4008. },
  4009. {
  4010. name: "",
  4011. type: "line",
  4012. barWidth: 15,
  4013. itemStyle: {
  4014. normal: {
  4015. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4016. {
  4017. offset: 0,
  4018. color: "#69c0ff",
  4019. },
  4020. {
  4021. offset: 1,
  4022. color: "green",
  4023. },
  4024. ]),
  4025. },
  4026. },
  4027. data: [20, 30, 15, 28, 36],
  4028. // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][1] : left12[this.count + 1][1]
  4029. },
  4030. {
  4031. name: "",
  4032. type: "line",
  4033. barWidth: 15,
  4034. itemStyle: {
  4035. normal: {
  4036. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4037. {
  4038. offset: 0,
  4039. color: "#69c0ff",
  4040. },
  4041. {
  4042. offset: 1,
  4043. color: "yellow",
  4044. },
  4045. ]),
  4046. },
  4047. },
  4048. data: [15, 22, 17, 33, 14],
  4049. // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][0] : left12[this.count + 1][0]
  4050. },
  4051. ],
  4052. };
  4053. //轮播
  4054. tools.loopShowTooltip(that.leftEcharts11, option, {
  4055. interval: 2000,
  4056. loopSeries: true,
  4057. });
  4058. //注册
  4059. that.leftEcharts11.setOption(option);
  4060. },
  4061. leftEcharts12Fun () {
  4062. let that = this;
  4063. this.leftEcharts12 = echarts.init(this.$refs["leftEcharts12"]);
  4064. var totalData = [{
  4065. name: '传统产业',
  4066. value: 12,
  4067. radio: 0.13
  4068. }, {
  4069. name: '公共基础产业',
  4070. value: 52,
  4071. radio: 0.01
  4072. }, {
  4073. name: '战略性新兴产业',
  4074. value: 15,
  4075. radio: 3.9
  4076. }, {
  4077. name: '特色优势产业',
  4078. value: 56,
  4079. radio: 10.5
  4080. }];
  4081. var data = [];
  4082. for (var i = 0; i < totalData.length; i++) {
  4083. data.push({
  4084. value: totalData[i].value,
  4085. name: totalData[i].name,
  4086. itemStyle: {
  4087. normal: {
  4088. borderWidth: 8,
  4089. shadowBlur: 0,
  4090. borderColor: commonColor[i],
  4091. shadowColor: commonColor[i]
  4092. }
  4093. }
  4094. },
  4095. {
  4096. value: 5,
  4097. name: '',
  4098. itemStyle: {
  4099. normal: {
  4100. label: {
  4101. show: false
  4102. },
  4103. labelLine: {
  4104. show: false
  4105. },
  4106. color: 'rgba(0, 0, 0, 0)',
  4107. borderColor: 'rgba(0, 0, 0, 0)',
  4108. borderWidth: 0
  4109. }
  4110. }
  4111. }
  4112. );
  4113. }
  4114. var seriesOption = [
  4115. {
  4116. name: '',
  4117. type: 'pie',
  4118. clockWise: false,
  4119. radius: [170, 160],
  4120. center: [260, 250],
  4121. hoverAnimation: false,
  4122. itemStyle: {
  4123. normal: {
  4124. label: {
  4125. show: false,
  4126. }
  4127. }
  4128. },
  4129. data: data
  4130. },
  4131. {
  4132. type: 'pie',
  4133. radius: [120, 120],
  4134. center: [260, 250],
  4135. zlevel: 3,
  4136. silent: true,
  4137. label: {
  4138. normal: {
  4139. show: false
  4140. },
  4141. },
  4142. labelLine: {
  4143. normal: {
  4144. show: false
  4145. }
  4146. },
  4147. data: _pie3()
  4148. },
  4149. {
  4150. type: "liquidFill",
  4151. radius: "40%",
  4152. data: [left2[0], left2[0] + 0.05, left2[0] - 0.05],
  4153. center: [260, 250],
  4154. backgroundStyle: {
  4155. color: {
  4156. type: "radial",
  4157. x: 0.5,
  4158. y: 0.5,
  4159. r: 0.5,
  4160. // 水球体颜色
  4161. colorStops: [
  4162. {
  4163. offset: 0,
  4164. color: "#010a11",
  4165. },
  4166. {
  4167. offset: 0.75,
  4168. // color: "#203852",
  4169. color: "#1a2f45",
  4170. },
  4171. {
  4172. offset: 1,
  4173. // color: "#354e6d",
  4174. color: "#2b405a",
  4175. // color: "#314967",
  4176. },
  4177. ],
  4178. globalCoord: false,
  4179. },
  4180. },
  4181. outline: {
  4182. borderDistance: 0,
  4183. itemStyle: {
  4184. borderWidth: 0,
  4185. borderColor: {
  4186. type: "linear",
  4187. x: 0,
  4188. y: 0,
  4189. x2: 0,
  4190. y2: 1,
  4191. colorStops: [
  4192. ],
  4193. globalCoord: false,
  4194. },
  4195. },
  4196. },
  4197. color: [
  4198. {
  4199. x: 0,
  4200. y: 0,
  4201. x2: 0,
  4202. y2: 1,
  4203. colorStops: [{
  4204. offset: 0,
  4205. color: '#237386',
  4206. },
  4207. {
  4208. offset: 1,
  4209. color: '#0078C8',
  4210. },],
  4211. },
  4212. {
  4213. x: 0,
  4214. y: 0,
  4215. x2: 0,
  4216. y2: 1,
  4217. colorStops: [{
  4218. offset: 0,
  4219. color: '#2F97A9',
  4220. },
  4221. {
  4222. offset: 1,
  4223. color: '#0078C8',
  4224. },],
  4225. },
  4226. {
  4227. x: 0,
  4228. y: 0,
  4229. x2: 0,
  4230. y2: 1,
  4231. colorStops: [{
  4232. offset: 0,
  4233. color: '#48E0ED',
  4234. },
  4235. {
  4236. offset: 1,
  4237. color: '#0078C8',
  4238. },],
  4239. }
  4240. ],
  4241. label: {
  4242. normal: {
  4243. textStyle: {
  4244. fontSize: '50',
  4245. color: "#58E6F7", // x轴文字颜色
  4246. },
  4247. },
  4248. },
  4249. },
  4250. ];
  4251. option = {
  4252. color: commonColor,
  4253. title: {
  4254. show: false,
  4255. text: '风险类型123',
  4256. top: '48%',
  4257. textAlign: "center",
  4258. left: "49%",
  4259. textStyle: {
  4260. color: '#fff',
  4261. fontSize: 18,
  4262. fontWeight: '400'
  4263. }
  4264. },
  4265. tooltip: {
  4266. show: false
  4267. },
  4268. legend: {
  4269. icon: "circle",
  4270. orient: 'vertical',
  4271. formatter: function (name) {
  4272. let num
  4273. for (let i = 0; i < totalData.length; i++) {
  4274. if (totalData[i].name === name) {
  4275. num = name + ':' + totalData[i].value + '(' + totalData[i].radio + '%' + ')'
  4276. }
  4277. }
  4278. return num
  4279. },
  4280. data: ['传统产业', '公共基础产业', '战略性新兴产业', '特色优势产业'],
  4281. right: 0,
  4282. bottom: 0,
  4283. align: 'left',
  4284. textStyle: {
  4285. color: '#FFF', // 文字的颜色
  4286. fontSize: '20', // 文字字体大小
  4287. fontFamily: 'Microsoft YaHei'
  4288. },
  4289. itemGap: 20
  4290. },
  4291. toolbox: {
  4292. show: false
  4293. },
  4294. series: seriesOption
  4295. }
  4296. function _pie3 () {
  4297. let dataArr = [];
  4298. for (var i = 0; i < 100; i++) {
  4299. if (i % 2 === 0) {
  4300. dataArr.push({
  4301. name: (i + 1).toString(),
  4302. value: 25,
  4303. itemStyle: {
  4304. normal: {
  4305. color: "#5A5DE0",
  4306. borderWidth: 1,
  4307. borderColor: "#5A5DE0"
  4308. }
  4309. }
  4310. })
  4311. } else {
  4312. dataArr.push({
  4313. name: (i + 1).toString(),
  4314. value: 20,
  4315. itemStyle: {
  4316. normal: {
  4317. color: "rgba(0,0,0,0)",
  4318. borderWidth: 0,
  4319. borderColor: "rgba(0,0,0,0)"
  4320. }
  4321. }
  4322. })
  4323. }
  4324. }
  4325. return dataArr
  4326. }
  4327. //轮播
  4328. tools.loopShowTooltip(that.leftEcharts12, option, {
  4329. interval: 2000,
  4330. loopSeries: true,
  4331. });
  4332. //注册
  4333. that.leftEcharts12.setOption(option);
  4334. },
  4335. leftEcharts13Fun () {
  4336. let that = this;
  4337. this.leftEcharts13 = echarts.init(this.$refs["leftEcharts13"]);
  4338. var totalData = [{
  4339. name: '新建',
  4340. value: 12,
  4341. radio: 0.13
  4342. }, {
  4343. name: '续建',
  4344. value: 52,
  4345. radio: 0.01
  4346. }];
  4347. var data = [];
  4348. for (var i = 0; i < totalData.length; i++) {
  4349. data.push({
  4350. value: totalData[i].value,
  4351. name: totalData[i].name,
  4352. itemStyle: {
  4353. normal: {
  4354. borderWidth: 8,
  4355. shadowBlur: 0,
  4356. borderColor: commonColor[i],
  4357. shadowColor: commonColor[i]
  4358. }
  4359. }
  4360. },
  4361. {
  4362. value: 5,
  4363. name: '',
  4364. itemStyle: {
  4365. normal: {
  4366. label: {
  4367. show: false
  4368. },
  4369. labelLine: {
  4370. show: false
  4371. },
  4372. color: 'rgba(0, 0, 0, 0)',
  4373. borderColor: 'rgba(0, 0, 0, 0)',
  4374. borderWidth: 0
  4375. }
  4376. }
  4377. }
  4378. );
  4379. }
  4380. var seriesOption = [
  4381. {
  4382. name: '',
  4383. type: 'pie',
  4384. clockWise: false,
  4385. radius: [170, 160],
  4386. center: [350, 250],
  4387. hoverAnimation: false,
  4388. itemStyle: {
  4389. normal: {
  4390. label: {
  4391. show: false,
  4392. }
  4393. }
  4394. },
  4395. data: data
  4396. },
  4397. {
  4398. type: 'pie',
  4399. radius: [120, 120],
  4400. center: [350, 250],
  4401. zlevel: 3,
  4402. silent: true,
  4403. label: {
  4404. normal: {
  4405. show: false
  4406. },
  4407. },
  4408. labelLine: {
  4409. normal: {
  4410. show: false
  4411. }
  4412. },
  4413. data: _pie3()
  4414. }
  4415. ];
  4416. option = {
  4417. color: commonColor,
  4418. title: {
  4419. show: true,
  4420. text: '25%',
  4421. top: '48%',
  4422. textAlign: "center",
  4423. left: "49%",
  4424. textStyle: {
  4425. fontWeight: '600',
  4426. fontFamily: 'Microsoft YaHei',
  4427. fontSize: '50',
  4428. color: "#58E6F7", // x轴文字颜色
  4429. }
  4430. },
  4431. tooltip: {
  4432. show: false
  4433. },
  4434. legend: {
  4435. icon: "circle",
  4436. orient: 'vertical',
  4437. formatter: function (name) {
  4438. let num
  4439. for (let i = 0; i < totalData.length; i++) {
  4440. if (totalData[i].name === name) {
  4441. num = name + ':' + totalData[i].value + '(' + totalData[i].radio + '%' + ')'
  4442. }
  4443. }
  4444. return num
  4445. },
  4446. data: ['新建', '续建'],
  4447. right: 0,
  4448. bottom: 0,
  4449. align: 'left',
  4450. textStyle: {
  4451. color: '#FFF', // 文字的颜色
  4452. fontSize: '20', // 文字字体大小
  4453. },
  4454. itemGap: 20
  4455. },
  4456. toolbox: {
  4457. show: false
  4458. },
  4459. series: seriesOption
  4460. }
  4461. function _pie3 () {
  4462. let dataArr = [];
  4463. for (var i = 0; i < 1; i++) {
  4464. if (i % 2 === 0) {
  4465. dataArr.push({
  4466. name: (i + 1).toString(),
  4467. value: 25,
  4468. itemStyle: {
  4469. normal: {
  4470. color: "#5A5DE0",
  4471. borderWidth: 1,
  4472. borderColor: "#5A5DE0"
  4473. }
  4474. }
  4475. })
  4476. } else {
  4477. dataArr.push({
  4478. name: (i + 1).toString(),
  4479. value: 20,
  4480. itemStyle: {
  4481. normal: {
  4482. color: "rgba(0,0,0,0)",
  4483. borderWidth: 0,
  4484. borderColor: "rgba(0,0,0,0)"
  4485. }
  4486. }
  4487. })
  4488. }
  4489. }
  4490. return dataArr
  4491. }
  4492. //轮播
  4493. tools.loopShowTooltip(that.leftEcharts13, option, {
  4494. interval: 2000,
  4495. loopSeries: true,
  4496. });
  4497. //注册
  4498. that.leftEcharts13.setOption(option);
  4499. },
  4500. leftEcharts14Fun () {
  4501. let that = this;
  4502. this.leftEcharts14 = echarts.init(this.$refs["leftEcharts14"]);
  4503. option = {
  4504. tooltip: {
  4505. trigger: 'axis',
  4506. axisPointer: {
  4507. type: 'shadow'
  4508. }
  4509. },
  4510. legend: {
  4511. top: "top",
  4512. textStyle: {
  4513. color: "#fff",
  4514. fontSize: 20,
  4515. padding: [0, 20],
  4516. },
  4517. },
  4518. grid: {
  4519. left: '3%',
  4520. right: '7%',
  4521. bottom: '3%',
  4522. containLabel: true
  4523. },
  4524. xAxis: {
  4525. name: '亿',
  4526. nameTextStyle: {
  4527. color: '#fff',
  4528. fontSize: 20,
  4529. fontFamily: 'Microsoft YaHei'
  4530. },
  4531. type: 'value',
  4532. axisLabel: {
  4533. textStyle: {
  4534. color: "white",
  4535. fontSize: '20',
  4536. fontFamily: 'Microsoft YaHei'
  4537. },
  4538. },
  4539. splitLine: {
  4540. show: true,
  4541. lineStyle: {
  4542. color: "#68b4dd66",
  4543. width: 1,
  4544. type: "dashed",
  4545. },
  4546. },
  4547. },
  4548. yAxis: {
  4549. type: 'category',
  4550. axisTick: {
  4551. lineStyle: {
  4552. color: "#18416F",
  4553. },
  4554. },
  4555. // y轴的字体颜色
  4556. axisLabel: {
  4557. textStyle: {
  4558. color: "white",
  4559. fontSize: '20',
  4560. fontFamily: 'Microsoft YaHei'
  4561. },
  4562. },
  4563. splitLine: {
  4564. show: false,
  4565. lineStyle: {
  4566. color: "#68b4dd66",
  4567. width: 1,
  4568. type: "dashed",
  4569. },
  4570. },
  4571. //y轴线的颜色以及宽度
  4572. axisLine: {
  4573. show: true,
  4574. lineStyle: {
  4575. color: "#1E5389",
  4576. width: 1,
  4577. type: "solid",
  4578. },
  4579. },
  4580. nameTextStyle: {
  4581. color: '#fff',
  4582. fontSize: 20,
  4583. fontFamily: 'Microsoft YaHei'
  4584. },
  4585. data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团"]
  4586. },
  4587. series: [
  4588. {
  4589. name: '实际投资',
  4590. type: 'bar',
  4591. data: [18203, 23489, 29034, 104970, 131744, 630230],
  4592. barGap: '-125%',
  4593. barWidth: "20",
  4594. zlevel: 10,
  4595. itemStyle: {
  4596. barBorderRadius: [0, 20, 20, 0],
  4597. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  4598. {
  4599. offset: 0,
  4600. color: '#0F357C',
  4601. },
  4602. {
  4603. offset: 1,
  4604. color: '#B78CFF',
  4605. },
  4606. ]),
  4607. },
  4608. },
  4609. {
  4610. name: '计划投资',
  4611. type: 'bar',
  4612. data: [19325, 23438, 31000, 121594, 134141, 681807],
  4613. barWidth: "30",
  4614. itemStyle: {
  4615. barBorderRadius: [0, 20, 20, 0],
  4616. borderColor: '#B78CFF',
  4617. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  4618. {
  4619. offset: 0,
  4620. color: '#0F357C00',
  4621. },
  4622. {
  4623. offset: 1,
  4624. color: '#10417F00',
  4625. },
  4626. ]),
  4627. },
  4628. }
  4629. ]
  4630. };
  4631. //轮播
  4632. tools.loopShowTooltip(that.leftEcharts14, option, {
  4633. interval: 2000,
  4634. loopSeries: true,
  4635. });
  4636. //注册
  4637. that.leftEcharts14.setOption(option);
  4638. },
  4639. leftEcharts15Fun () {
  4640. let that = this;
  4641. this.leftEcharts15 = echarts.init(this.$refs["leftEcharts15"]);
  4642. var xdata = ['煤炭和煤电', '煤电和新能源', '煤炭和化工', '煤炭和数字', '煤炭和降碳'];
  4643. var data = [70, 60, 80, 200, 300];
  4644. var maxArr = [100, 100, 100];
  4645. option = {
  4646. tooltip: {
  4647. trigger: "axis",
  4648. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  4649. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  4650. },
  4651. formatter: function (params) { // params[0].data.nameCode
  4652. let dot = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
  4653. return (
  4654. params[0].name +
  4655. "<br>" +
  4656. "杆塔数量 :" +
  4657. params[0].value
  4658. );
  4659. }
  4660. },
  4661. grid: {
  4662. left: "4%",
  4663. right: "4%",
  4664. bottom: "3%",
  4665. top: "15%",
  4666. containLabel: true
  4667. },
  4668. xAxis: {
  4669. data: xdata,
  4670. triggerEvent: true,
  4671. axisTick: {
  4672. show: false
  4673. },
  4674. axisLine: {
  4675. show: false
  4676. },
  4677. axisLabel: {
  4678. show: true,
  4679. rotate: 0,
  4680. interval: 0,
  4681. textStyle: {
  4682. padding: [14, 0, 0, 0],
  4683. fontSize: 14,
  4684. color: "rgba(255,255,255,1)"
  4685. }
  4686. }
  4687. },
  4688. yAxis: {
  4689. name: "单位:个数",
  4690. triggerEvent: true,
  4691. nameTextStyle: {
  4692. color: "rgba(255,255,255,1)",
  4693. fontSize: 16,
  4694. padding: [0, 0, 10, -20]
  4695. },
  4696. splitLine: {
  4697. show: true,
  4698. lineStyle: {
  4699. color: 'rgba(255,255,255,.1)'
  4700. }
  4701. },
  4702. axisTick: {
  4703. show: false
  4704. },
  4705. axisLine: {
  4706. show: true,
  4707. lineStyle: {
  4708. color: 'rgba(255,255,255,.1)'
  4709. }
  4710. },
  4711. axisLabel: {
  4712. show: true,
  4713. textStyle: {
  4714. color: "rgb(148,159,167)",
  4715. fontSize: 16
  4716. }
  4717. }
  4718. },
  4719. series: [
  4720. {
  4721. name: "数量",
  4722. type: "pictorialBar",
  4723. barCategoryGap: "60%",
  4724. // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
  4725. symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
  4726. itemStyle: {
  4727. normal: {
  4728. //渐变色
  4729. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  4730. offset: 0,
  4731. color: "#01EAED"
  4732. },
  4733. {
  4734. offset: 0.5,
  4735. color: "#02C4DD"
  4736. },
  4737. {
  4738. offset: 1,
  4739. color: "#029ED9"
  4740. }
  4741. ])
  4742. }
  4743. },
  4744. label: {
  4745. normal: {
  4746. show: false,
  4747. position: "top",
  4748. textStyle: {
  4749. color: "#fff",
  4750. fontSize: 20
  4751. }
  4752. }
  4753. },
  4754. data: data,
  4755. }
  4756. ]
  4757. }
  4758. //轮播
  4759. tools.loopShowTooltip(that.leftEcharts15, option, {
  4760. interval: 2000,
  4761. loopSeries: true,
  4762. });
  4763. //注册
  4764. that.leftEcharts15.setOption(option);
  4765. },
  4766. leftEcharts16Fun () {
  4767. let that = this;
  4768. this.leftEcharts16 = echarts.init(this.$refs["leftEcharts16"]);
  4769. // var ROOT_PATH = 'https://echarts.apache.org/examples';
  4770. let option = {
  4771. backgroundColor: "#00000000",
  4772. globe: {
  4773. globeRadius: 85,
  4774. baseTexture: "./img/3D/world1.jpg",
  4775. heightTexture: "./img/3D/world1.jpg",
  4776. displacementScale: 0.04,
  4777. shading: "realistic",
  4778. // environment: './img/3D/world2.jpg',
  4779. realisticMaterial: {
  4780. roughness: 0.9,
  4781. },
  4782. postEffect: {
  4783. enable: true,
  4784. },
  4785. light: {
  4786. main: {
  4787. intensity: 3,
  4788. shadow: true,
  4789. },
  4790. },
  4791. },
  4792. };
  4793. that.leftEcharts16.setOption(option);
  4794. },
  4795. // 回到中国地图
  4796. backChina () {
  4797. let that = this
  4798. if(!this.mapShow){
  4799. return
  4800. }
  4801. console.log(123123)
  4802. this.mapShow = false
  4803. that.leftEcharts12.dispose()
  4804. that.leftEcharts14.dispose()
  4805. that.leftEcharts9.dispose()
  4806. that.leftEcharts15.dispose()
  4807. that.leftEcharts13.dispose()
  4808. that.shanxiMap.dispose()
  4809. setTimeout(() => {
  4810. that.chinaEchartsFun()
  4811. that.leftEcharts16Fun()
  4812. });
  4813. },
  4814. },
  4815. });