investHomeGroup.js 229 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756
  1. let app = new Vue({
  2. el: '#app',
  3. data () {
  4. return {
  5. rightAdd: {},// 左边新增筛选参数
  6. projectNum: '', // 项目列表弹窗顶部类目筛选条件
  7. centerType: false, // 中间3D饼图
  8. boardType: '', // 哪边的项目看板
  9. pullShow: false, // 选择年份弹窗
  10. pollList: [],
  11. mockData: false,// 是否使用修改的数据
  12. year: '', // 选择的年份
  13. boardUrl: '', // 跳转路径
  14. boardTipShow: false, // 项目看板弹窗专用
  15. lineCommonCompany: [], //双柱状图弹窗上面的折线图x轴
  16. commonCompanyAll: [], // 公司包括编码
  17. changeLine: true,
  18. versions: true, // 是否使用接口数据数据
  19. app_token: '',
  20. centerShow: false, // 中间内容显示
  21. echartR4Chart: '',// 倒数第二个专用
  22. echartR5Chart: '', // 倒是第一个专用
  23. myChartTip1: '', // 弹窗单个柱状图专用
  24. myChartTip2: '', // 弹窗两个柱状图专用
  25. myChartTip3: '', // 弹窗两个柱状图专用
  26. echartEnterpriseShow: false, // 企业额度分析控制
  27. mapChart: '',//地图专用echarts
  28. chartCarousel: '',//做大屏轮播专用echarts
  29. mapTipShow: false,
  30. echartSingleTipShow: false,
  31. echartDoubleTipShow: false,
  32. projectListTipShow: false, //项目列表专属弹窗
  33. titleUrl: '',
  34. titleName: '',
  35. yellowCount: 0, // 黄圈轮播参数
  36. yellowPosition: 40,// 黄圈悬浮窗位置参数
  37. yellowType: true, // 黄圈悬浮停止轮播
  38. echartR1Fd: true,
  39. echartR2Fd: true,
  40. echartC2Fd: true,
  41. echartR3Fd: true,
  42. echarts1Time: 16000,
  43. time: '',
  44. timer: '',
  45. timer2: '',
  46. center1: center1,
  47. showTip2: false,
  48. showTip3: false,
  49. list: [],
  50. count: 0,
  51. countType: 0,
  52. geoCoordMap: {},
  53. storageRecordConfig2: center9,
  54. titleList: right1,
  55. centerLeftList: right3,
  56. storageRecordConfig: left11,
  57. config5: {
  58. rowNum: 9,
  59. waitTime: 2000,
  60. headerHeight: '40',
  61. header: ["项目名称", "所属组织", '实施主体', '建设性质(新建/续建)', '产业类别', '建设地点', '2022年投资完成额(万元)'],
  62. data: [
  63. ["青银二广高速公路太原联络线建设PPP项目", "交控集团", "山西路桥建设集团有限公司", "新建", "交通运输业", "山西省太原市、晋中市", "148,086.00"],
  64. ["国道241、省道岚马线汾河水库段改线工程", "交控集团", "太原国省道汾河水库段建设管理有限公司", "续建", "交通运输业", "山西省 太原市、吕梁市", "165,314.33"],
  65. ["路桥科技中心", "交控集团", "山西路桥集团多经营有限公司", "续建", "建筑房地产", "山西省太原市", "8,098.26"],
  66. ["路桥科研基地", "交控集团", "山西路桥集团多经有限公司", "续建", "建筑房地产", "山西省太原市", "6,596.56"],
  67. ["武宿高速充电站建设", "交控集团", "山西交通运输投融资集团有限责任公司", "新建", "新能源", "山西省太原市", "100.00"],
  68. ["山西交通研创商务基地项目", "交控集团", "山西交通物流集团有限公司", "续建", "建筑房地产", "山西省太原市", "4,097.00"],
  69. ["山西省交通科学研究院产业化基地", "交控集团", "山西省交通科技研发有限公司", "续建", "建筑房地产", "山西省太原市武洛街27号", "3,242.00"],
  70. ["太长高速公路太原南收费站(二期工程暨龙城服务区)项目", "交控集团", "山西省交通开发投资集团有限公司龙城服务区发展分公司", "续建", "建筑房地产", "山西省太原市", "3,580.00"],
  71. ["山西转型综改示范区中小企业产业园项目", "交控集团", "山西交投综改园区开发有限公司", "续建", "建筑房地产", "山西省太原市", "14,432.00"]
  72. ],
  73. align: ["center", "center", "center", "center", "center", "center", "center"],
  74. headerBGC: "#153A62",
  75. oddRowBGC: "#061F42",
  76. evenRowBGC: "#0C284A",
  77. },
  78. originalConfig6: [],
  79. config6: listPop
  80. }
  81. },
  82. created () {
  83. this.time = formatDate()
  84. this.timer = setInterval(() => {
  85. this.time = formatDate()
  86. }, 1000)
  87. this.timer2 = setInterval(() => {
  88. this.yellowType && this.changeYellow()
  89. }, 2000)
  90. },
  91. beforeDestroy () {
  92. if (this.timer) {
  93. clearInterval(this.timer);
  94. }
  95. if (this.timer2) {
  96. clearInterval(this.timer2);
  97. }
  98. },
  99. mounted () {
  100. this.getUrlParams()
  101. this.countYear()
  102. this.comeIn()
  103. },
  104. methods: {
  105. // 获取地址栏参数
  106. getUrlParams (id) {
  107. let url = window.location.href
  108. // 通过 ? 分割获取后面的参数字符串
  109. let urlStr = url.split('?')[1]
  110. if (!urlStr) {
  111. return
  112. }
  113. // 创建空对象存储参数
  114. let obj = {};
  115. // 再通过 & 将每一个参数单独分割出来
  116. let paramsArr = urlStr.split('&')
  117. for (let i = 0, len = paramsArr.length; i < len; i++) {
  118. // 再通过 = 将每一个参数分割为 key:value 的形式
  119. let arr = paramsArr[i].split('=')
  120. obj[arr[0]] = arr[1];
  121. }
  122. if (obj.model) {
  123. obj.model == 'A' || obj.model == 'a' ? this.mockData = false : this.mockData = true
  124. }
  125. },
  126. // 计算展示的年份
  127. countYear () {
  128. this.year = 2024
  129. // this.year = new Date().getFullYear()
  130. // for (i = 2022; true; i++) {
  131. // if (i == this.year) {
  132. // this.pollList.push(i)
  133. // return
  134. // } else {
  135. // this.pollList.push(i)
  136. // }
  137. // }
  138. },
  139. comeIn () {
  140. if (this.versions) {
  141. // 接口版
  142. this.getAppToken()
  143. setTimeout(() => {
  144. this.changeTopColor()
  145. // 大屏三
  146. this.initChartR5()
  147. this.changeYellow()
  148. })
  149. } else {
  150. // 假数据版
  151. setTimeout(() => {
  152. this.initChartL1()
  153. this.initChartL2()
  154. this.initChartL3()
  155. this.initChartL4()
  156. this.initChartL5()
  157. this.initChartL6()
  158. this.initChartL7()
  159. this.initChartL8()
  160. this.initChartL10()
  161. this.initChartL11()
  162. this.changeTopColor()
  163. // 大屏二
  164. this.initChinaChart()
  165. // 大屏三
  166. this.initChartR1()
  167. this.initChartR2()
  168. this.initChartR3()
  169. this.changeYellow()
  170. })
  171. }
  172. },
  173. chooseTime (value) {
  174. let that = this
  175. this.year = value
  176. that.destroyCharts()
  177. this.pullShow = false
  178. setTimeout(item => {
  179. that.comeIn()
  180. })
  181. },
  182. destroyCharts () {
  183. this.left10Chart ? this.left10Chart.dispose() : ''
  184. this.left1Chart ? this.left1Chart.destroy() : ''
  185. this.left2Chart ? this.left2Chart.destroy() : ''
  186. this.left3Chart ? this.left3Chart.destroy() : ''
  187. this.left4Chart ? this.left4Chart.destroy() : ''
  188. this.left5Chart ? this.left5Chart.destroy() : ''
  189. this.left6Chart ? this.left6Chart.destroy() : ''
  190. this.left7Chart ? this.left7Chart.dispose() : ''
  191. this.left8Chart ? this.left8Chart.dispose() : ''
  192. this.left9Chart ? this.left9Chart.dispose() : ''
  193. this.chartCarousel ? this.chartCarousel.dispose() : ''
  194. this.myChartTip1 ? this.myChartTip1.dispose() : ''
  195. this.myChartTip2 ? this.myChartTip2.dispose() : ''
  196. this.myChartTip3 ? this.myChartTip3.dispose() : ''
  197. this.left11Chart ? this.left11Chart.dispose() : ''
  198. this.right1Chart ? this.right1Chart.dispose() : ''
  199. this.right2Chart ? this.right2Chart.dispose() : ''
  200. this.right3Chart ? this.right3Chart.dispose() : ''
  201. this.echartR4Chart ? this.echartR4Chart.dispose() : ''
  202. this.echartR5Chart ? this.echartR5Chart.dispose() : ''
  203. this.center1Chart ? this.center1Chart.destroy() : ''
  204. this.center2Chart ? this.center2Chart.dispose() : ''
  205. this.center3Chart ? this.center3Chart.dispose() : ''
  206. this.center4Chart ? this.center4Chart.destroy() : ''
  207. this.mapChart ? this.mapChart.dispose() : ''
  208. },
  209. // 获取token
  210. getAppToken () {
  211. // dev环境
  212. // let value = {
  213. // "appId": "xilan1014", //系统编码
  214. // "appSecret": "12345678910Aa@Bb@Cc", //AccessToken加密认证密钥
  215. // "tenantid": "", //租户id
  216. // "accountId": "", //数据中心id
  217. // "language": "zh_CN"
  218. // }
  219. // SIT环境
  220. let value = {
  221. "appId": "68dp",
  222. "appSecret": "9ErhY^O{n?@Pc#eb7HYX",
  223. "tenantid": "",
  224. "accountId": "1635498801198269440",
  225. "language": "zh_CN"
  226. }
  227. post('/ierp/api/getAppToken.do', value).then(res => {
  228. this.app_token = res.data.app_token
  229. this.getAccessToken()
  230. })
  231. },
  232. // 获取AccessToken
  233. getAccessToken () {
  234. let value = {
  235. "user": "19900000001", //登录用户手机号
  236. "apptoken": this.app_token, //应用令牌
  237. "tenantid": "", //租户id
  238. "accountId": "1635498801198269440",//数据中心id
  239. "usertype": "Mobile"
  240. }
  241. post('/ierp/api/login.do', value).then(res => {
  242. this.access_token = res.data.access_token
  243. this.getOrg()
  244. })
  245. },
  246. // 获取组织架构列表
  247. getOrg () {
  248. return new Promise((resolve, err) => {
  249. let value = {
  250. access_token: this.access_token,
  251. }
  252. get('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getOrgName', value).then(res => {
  253. this.commonCompanyAll = res.data
  254. commonCompany = res.data.map(item => item.simplename)
  255. // 左边
  256. this.getDate1()
  257. this.getDate2()
  258. this.getDate3()
  259. this.getDate4()
  260. this.getDate5()
  261. this.getDate6()
  262. // 右边
  263. this.getDate7()
  264. this.getDate8()
  265. this.getDate9()
  266. this.getDate10()
  267. // this.getDate11() // 右下A
  268. this.getDate12() // 右下B
  269. // 中间
  270. this.getDate14()
  271. resolve(1);
  272. })
  273. });
  274. },
  275. // 获取左边企业额度分析
  276. getDate1 () {
  277. let that = this
  278. return new Promise((resolve, err) => {
  279. let value = {
  280. access_token: this.access_token,
  281. "data": {
  282. "mdnb_combofield": this.mockData ? 'B' : 'A',
  283. "mdnb_datefield": this.year - 1 + '-01-01',
  284. },
  285. pageSize: 1000
  286. }
  287. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqqyedfx', value).then(res => {
  288. if (res.data.rows.length > 0) {
  289. let dataList = res.data.rows[0].entryentity
  290. left3 = [[], [], []]
  291. dataList.forEach(item => {
  292. // 已用额度
  293. left3[0].push(that.yuanChange(item.mdnb_amountfield26))
  294. // 剩余额度
  295. left3[1].push(that.yuanChange(item.mdnb_amountfield27))
  296. // 总额度
  297. left3[2].push(that.yuanChange(item.mdnb_amountfield25))
  298. })
  299. this.initChartL4(dataList)
  300. }
  301. resolve(1);
  302. })
  303. });
  304. },
  305. // 获取左边投资计划分析
  306. getDate2 () {
  307. let that = this
  308. return new Promise((resolve, err) => {
  309. let value = {
  310. access_token: this.access_token,
  311. "data": {
  312. "mdnb_combofield": this.mockData ? 'B' : 'A',
  313. "mdnb_datefield": this.year - 1 + '-01-01',
  314. },
  315. pageSize: 1000
  316. }
  317. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqtzjhfx', value).then(res => {
  318. if (res.data.rows.length > 0) {
  319. let dataList = res.data.rows[0]
  320. left4 = []
  321. left4[0] = dataList.mdnb_amountfield7
  322. left4[1] = dataList.mdnb_amountfield13
  323. left4[2] = dataList.mdnb_amountfield23
  324. left4[3] = dataList.mdnb_amountfield43
  325. left4[4] = dataList.mdnb_integerfield14
  326. left5[0].y = that.yuanChange(dataList.mdnb_amountfield9)
  327. left5[0].num = dataList.mdnb_integerfield15
  328. left5[1].y = that.yuanChange(dataList.mdnb_amountfield43)
  329. left5[1].num = dataList.mdnb_integerfield14
  330. left6[0].y = that.yuanChange(dataList.mdnb_amountfield15)
  331. left6[0].num = dataList.mdnb_integerfield16
  332. left6[1].y = that.yuanChange(dataList.mdnb_amountfield16)
  333. left6[1].num = dataList.mdnb_integerfield17
  334. that.initChartL2()
  335. that.initChartL3()
  336. }
  337. resolve(1);
  338. })
  339. });
  340. },
  341. // 获取左边产业布局分析
  342. getDate3 () {
  343. let that = this
  344. return new Promise((resolve, err) => {
  345. let value = {
  346. access_token: this.access_token,
  347. "data": {
  348. "mdnb_combofield": this.mockData ? 'B' : 'A',
  349. "mdnb_datefield": this.year - 1 + '-01-01',
  350. },
  351. pageSize: 1000
  352. }
  353. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqcebjfx', value).then(res => {
  354. if (res.data.rows.length > 0) {
  355. let dataList = this.classify(res.data.rows[0].mdnb_entryentity, 'mdnb_textfield1')
  356. // 传统产业分析
  357. if (dataList[0].data.length > left7.length || dataList[0].length == left7.length) {
  358. for (let i = 0; i < left7.length; i++) {
  359. left7[i].num = dataList[0].data[i].mdnb_integerfield13
  360. left7[i].y = dataList[0].data[i].mdnb_amountfield8
  361. }
  362. this.initChartL5()
  363. }
  364. // 战略性新兴产业
  365. if (dataList[1].data.length > left8.length || dataList[1].length == left8.length) {
  366. for (let i = 0; i < left8.length; i++) {
  367. left8[i].num = dataList[1].data[i].mdnb_integerfield13
  368. left8[i].y = dataList[1].data[i].mdnb_amountfield8
  369. }
  370. this.initChartL6()
  371. }
  372. // 特色优势产业
  373. if (dataList[2].data.length > left9.length || dataList[2].length == left9.length) {
  374. for (let i = 0; i < left9.length; i++) {
  375. left9[i].num = dataList[2].data[i].mdnb_integerfield13
  376. left9[i].y = dataList[2].data[i].mdnb_amountfield8
  377. }
  378. this.initChartL7()
  379. }
  380. // 公共基础等产业
  381. if (dataList[3].data.length > left10.length || dataList[3].length == left10.length) {
  382. for (let i = 0; i < left10.length; i++) {
  383. left10[i].num = dataList[3].data[i].mdnb_integerfield13
  384. left10[i].y = dataList[3].data[i].mdnb_amountfield8
  385. }
  386. this.initChartL8()
  387. }
  388. }
  389. resolve(1);
  390. })
  391. });
  392. },
  393. // 获取左边项目阶段分析
  394. getDate4 () {
  395. let that = this
  396. return new Promise((resolve, err) => {
  397. let value = {
  398. access_token: this.access_token,
  399. "data": {
  400. "mdnb_combofield": this.mockData ? 'B' : 'A',
  401. "mdnb_datefield": this.year - 1 + '-01-01',
  402. },
  403. pageSize: 1000
  404. }
  405. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqxmjdfx', value).then(res => {
  406. if (res.data.rows.length > 0) {
  407. let dataList = res.data.rows[0]
  408. // 固定资产进度分布
  409. // 特别监管
  410. left13[0][0][2] = dataList.mdnb_integerfield1
  411. left13[0][0][3] = this.yuanChange(dataList.mdnb_amountfield241)
  412. left13[0][1][2] = dataList.mdnb_integerfield3
  413. left13[0][1][3] = this.yuanChange(dataList.mdnb_amountfield5)
  414. left13[0][2][2] = dataList.mdnb_integerfield5
  415. left13[0][2][3] = this.yuanChange(dataList.mdnb_amountfield21)
  416. left13[0][3][2] = dataList.mdnb_integerfield7
  417. left13[0][3][3] = this.yuanChange(dataList.mdnb_amountfield29)
  418. // 备案
  419. left13[1][0][2] = dataList.mdnb_integerfield2
  420. left13[1][0][3] = this.yuanChange(dataList.mdnb_amountfield341)
  421. left13[1][1][2] = dataList.mdnb_integerfield4
  422. left13[1][1][3] = this.yuanChange(dataList.mdnb_amountfield11)
  423. left13[1][2][2] = dataList.mdnb_integerfield6
  424. left13[1][2][3] = this.yuanChange(dataList.mdnb_amountfield28)
  425. left13[1][3][2] = dataList.mdnb_integerfield8
  426. left13[1][3][3] = this.yuanChange(dataList.mdnb_amountfield30)
  427. // 股权类进度分布
  428. // 特别监管
  429. left14[0][0][2] = dataList.mdnb_integerfield11
  430. left14[0][0][3] = this.yuanChange(dataList.mdnb_amountfield2411)
  431. left14[0][1][2] = dataList.mdnb_integerfield31
  432. left14[0][1][3] = this.yuanChange(dataList.mdnb_amountfield51)
  433. left14[0][2][2] = dataList.mdnb_integerfield51
  434. left14[0][2][3] = this.yuanChange(dataList.mdnb_amountfield211)
  435. left14[0][3][2] = dataList.mdnb_integerfield71
  436. left14[0][3][3] = this.yuanChange(dataList.mdnb_amountfield291)
  437. // 备案
  438. left14[1][0][2] = dataList.mdnb_integerfield21
  439. left14[1][0][3] = this.yuanChange(dataList.mdnb_amountfield3411)
  440. left14[1][1][2] = dataList.mdnb_integerfield41
  441. left14[1][1][3] = this.yuanChange(dataList.mdnb_amountfield111)
  442. left14[1][2][2] = dataList.mdnb_integerfield61
  443. left14[1][2][3] = this.yuanChange(dataList.mdnb_amountfield281)
  444. left14[1][3][2] = dataList.mdnb_integerfield81
  445. left14[1][3][3] = this.yuanChange(dataList.mdnb_amountfield301)
  446. this.initChartL10()
  447. this.initChartL11()
  448. }
  449. resolve(1);
  450. })
  451. });
  452. },
  453. // 获取左边投资额度分析
  454. getDate5 () {
  455. let that = this
  456. return new Promise((resolve, err) => {
  457. let value = {
  458. access_token: this.access_token,
  459. "data": {
  460. "mdnb_combofield": this.mockData ? 'B' : 'A',
  461. "mdnb_datefield": this.year - 1 + '-01-01',
  462. },
  463. pageSize: 1000
  464. }
  465. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqtzedfx', value).then(res => {
  466. if (res.data.rows.length > 0) {
  467. let dataList = res.data.rows[0]
  468. left1[0] = dataList.mdnb_amountfield
  469. left1[1] = dataList.mdnb_amountfield1
  470. left1[2] = dataList.mdnb_amountfield2
  471. left2[0] = dataList.mdnb_decimalfield
  472. left2[1] = dataList.mdnb_amountfield3
  473. this.initChartL1()
  474. }
  475. resolve(1);
  476. })
  477. });
  478. },
  479. // 获取左边重点项目两线指标
  480. getDate6 () {
  481. let that = this
  482. return new Promise((resolve, err) => {
  483. let value = {
  484. access_token: this.access_token,
  485. "data": {
  486. "mdnb_combofield": this.mockData ? 'B' : 'A',
  487. "mdnb_datefield": this.year - 1 + '-01-01',
  488. },
  489. pageSize: 1000
  490. }
  491. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqzdlxzb', value).then(res => {
  492. if (res.data.rows.length > 0) {
  493. let dataList2 = this.classify(res.data.rows[0].mdnb_entryentity1, 'mdnb_textfield3')
  494. // 右边的柱状图
  495. left12 = []
  496. dataList2.forEach((item, index) => {
  497. left12[index] = [[], [], []]
  498. for (let i = 0; i < 5; i++) {
  499. left12[index][0].push(item.data[i].mdnb_integerfield10)
  500. left12[index][1].push(item.data[i].mdnb_integerfield12)
  501. left12[index][2].push(item.data[i].mdnb_integerfield9)
  502. }
  503. })
  504. that.initChartL9()
  505. // 左边的轮播
  506. let dataList = []
  507. dataList2.forEach((item, index) => {
  508. dataList[index] = []
  509. dataList[index][0] = item.data[0].mdnb_textfield18
  510. dataList[index][1] = item.data[0].mdnb_textfield3
  511. dataList[index][2] = that.yuanChange(item.data[0].mdnb_amountfield24) + '亿'
  512. })
  513. this.storageRecordConfig.data = dataList
  514. this.storageRecordConfig = { ...this.storageRecordConfig }
  515. }
  516. resolve(1);
  517. })
  518. });
  519. },
  520. // 获取右边顶部条数据
  521. getDate7 () {
  522. return new Promise((resolve, err) => {
  523. let value = {
  524. access_token: this.access_token,
  525. "request": {
  526. isInsert: this.mockData ? '1' : '0',
  527. },
  528. pageSize: 1000
  529. }
  530. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getTabpageap', value).then(res => {
  531. right1[0].number = res.data.mdnb_one_step
  532. right1[2].number = res.data.mdnb_two_step
  533. right1[4].number = res.data.mdnb_three_step
  534. right1[6].number = res.data.mdnb_four_step
  535. right1[8].number = res.data.mdnb_five_step
  536. right1[10].number = res.data.mdnb_six_step
  537. right1[12].number = res.data.mdnb_seven_step
  538. right1[14].number = res.data.mdnb_eight_step
  539. resolve(1);
  540. })
  541. });
  542. },
  543. // 获取右边中间左边的(正偏差/容差内/负偏差)
  544. getDate8 () {
  545. return new Promise((resolve, err) => {
  546. let value = {
  547. access_token: this.access_token,
  548. "request": {
  549. isInsert: this.mockData ? '1' : '0',
  550. },
  551. pageSize: 1000
  552. }
  553. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getInvestSunstraction', value).then(res => {
  554. right3[0].value = res.data.mdnb_projectnum_z
  555. right3[0].value2 = res.data.mdnb_amountall_z
  556. right3[1].value = res.data.mdnb_projectnum_r
  557. right3[1].value2 = res.data.mdnb_amountall_r
  558. right3[2].value = res.data.mdnb_projectnum_f
  559. right3[2].value2 = res.data.mdnb_amountall_f
  560. resolve(1);
  561. })
  562. });
  563. },
  564. // 获取右边中间右边的(预算额/已签合同额。。。)
  565. getDate9 () {
  566. return new Promise((resolve, err) => {
  567. let value = {
  568. access_token: this.access_token,
  569. "request": {
  570. isInsert: this.mockData ? '1' : '0',
  571. },
  572. pageSize: 1000
  573. }
  574. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getUnitBudgetExecuteDate', value).then(res => {
  575. res.data.forEach((item, index) => {
  576. right4[index].value = this.yuanChange(item.mdnb_aheadmoney)
  577. right4[index].value2 = this.yuanChange(item.mdnb_edmoney)
  578. right4[index].value3 = this.yuanChange(item.mdnb_smoney)
  579. right4[index].value4 = this.yuanChange(item.mdnb_jmoney)
  580. right4[index].value5 = this.yuanChange(item.mdnb_fkmoney)
  581. })
  582. this.initChartR1()
  583. resolve(1);
  584. })
  585. });
  586. },
  587. // 进度成本偏差
  588. getDate10 () {
  589. let that = this
  590. return new Promise((resolve, err) => {
  591. let value = {
  592. access_token: this.access_token,
  593. "request": {
  594. isInsert: this.mockData ? '1' : '0',
  595. },
  596. pageSize: 1000
  597. }
  598. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getInvestSunstractionGas', value).then(res => {
  599. res.data.forEach((item, index) => {
  600. right5[0][index][1] = item.mdnb_amount_zb
  601. right5[0][index][2] = that.yuanChange(item.mdnb_amount_z)
  602. right5[1][index][1] = item.mdnb_amount_nb
  603. right5[1][index][2] = that.yuanChange(item.mdnb_amount_n)
  604. right5[2][index][1] = item.mdnb_amount_fb
  605. right5[2][index][2] = that.yuanChange(item.mdnb_amount_f)
  606. })
  607. this.initChartR2()
  608. resolve(1);
  609. })
  610. });
  611. },
  612. // 项目风险分析A
  613. getDate11 () {
  614. return new Promise((resolve, err) => {
  615. let value = {
  616. access_token: this.access_token,
  617. "request": {
  618. isInsert: this.mockData ? '1' : '0',
  619. },
  620. pageSize: 1000
  621. }
  622. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getUnitNoSolveDangerDate', value).then(res => {
  623. res.data.forEach((item, index) => {
  624. right6[index].value = item.mdnb_height
  625. right6[index].value2 = item.mdnb_midle
  626. right6[index].value3 = item.mdnb_bottom
  627. })
  628. this.initChartR3()
  629. resolve(1);
  630. })
  631. });
  632. },
  633. // 项目风险分析B(雷达图)
  634. getDate12 () {
  635. return new Promise((resolve, err) => {
  636. let value = {
  637. access_token: this.access_token,
  638. "request": {
  639. isInsert: this.mockData ? '1' : '0',
  640. },
  641. pageSize: 1000
  642. }
  643. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getUnitDangerPoraitDate', value).then(res => {
  644. res.data.forEach((item, index) => {
  645. right7[index][0] = item.mdnb_anquan
  646. right7[index][1] = item.mdnb_fukuan
  647. right7[index][2] = item.mdnb_hetong
  648. right7[index][3] = item.mdnb_jiesuan
  649. right7[index][4] = item.mdnb_jindu
  650. right7[index][5] = item.mdnb_securty
  651. })
  652. this.getDate11()
  653. resolve(1);
  654. })
  655. });
  656. },
  657. // 中间大屏数据
  658. getDate14 () {
  659. let that = this
  660. return new Promise((resolve, err) => {
  661. let value = {
  662. access_token: this.access_token,
  663. mock: this.mockData,
  664. presetYear: this.year
  665. }
  666. get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/getKeyData', value).then(res => {
  667. // 头部指标
  668. if (!res.data) {
  669. return
  670. }
  671. center4[0] = res.data.transformations.estateAmount
  672. center4[1] = res.data.transformations.estateNum
  673. center4[2] = res.data.transformations.figureAmount
  674. center4[3] = res.data.transformations.figureNum
  675. // 左投部指标
  676. center1[0] = res.data.keyIndicators.totalSum
  677. center1[1] = res.data.keyIndicators.total
  678. center1[2] = res.data.keyIndicators.property
  679. center1[3] = res.data.keyIndicators.invest
  680. // 投资产业分布
  681. for (let i = 0; i < center2.length; i++) {
  682. center2[i].y = that.yuanChange(res.data.distribution[i].amount)
  683. center2[i].value = that.yuanChange(res.data.distribution[i].amount)
  684. center2[i].num = res.data.distribution[i].count
  685. center2[i].typeno = res.data.distribution[i].typeno
  686. }
  687. // 投资执行情况
  688. res.data.implementationStatus.forEach((item, index) => {
  689. center3[index].value = that.yuanChange(item.plan)
  690. center3[index].value2 = that.yuanChange(item.reality)
  691. })
  692. // 五个一体化
  693. res.data.five.forEach((item, index) => {
  694. center6[index] = { name: item.type, value: that.yuanChange(item.amount), typeno: item.typeno }
  695. })
  696. // 投资阶段分析
  697. res.data.investmentStage.forEach((item, index) => {
  698. center7[index] = { name: item.type, value: Number(item.num), value2: that.yuanChange(item.amount), typeno: item.typeno, sliced: false, selected: false }
  699. })
  700. // 重点项目监控
  701. center8 = []
  702. this.originalConfig6 = res.data.projectMonitoring
  703. res.data.projectMonitoring.forEach((item, index) => {
  704. center8.push({ value: item.amount, name: item.name, office: item.group })
  705. })
  706. // 中国地图
  707. centerChina = []
  708. res.data.investmentMap.forEach((item, index) => {
  709. centerChina.push({ name: item.address, value: that.yuanChange(item.amount), value2: item.value2 })
  710. })
  711. // 项目状态
  712. proState.projectStatus1 = res.data.projectStatus.projectStatus1
  713. proState.projectStatus2 = res.data.projectStatus.projectStatus2
  714. proState.projectStatus3 = res.data.projectStatus.projectStatus3
  715. setTimeout(() => {
  716. that.initChinaChart()
  717. })
  718. resolve(1);
  719. })
  720. });
  721. },
  722. // 右边穿透一级
  723. rightPenetrateOne () {
  724. this.boardType = 'right'
  725. return new Promise((resolve, err) => {
  726. let value = {
  727. access_token: this.access_token,
  728. "request": {
  729. isInsert: this.mockData ? '1' : '0'
  730. },
  731. pageSize: 1000
  732. }
  733. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getOneLevelData', value).then(res => {
  734. res.data.forEach((item, index) => {
  735. common4[index] = item.mdnb_projects
  736. common5[index] = item.mdnb_amount_sl
  737. })
  738. setTimeout(() => {
  739. this.initChartLTip2('right')
  740. this.initChartLTip3('right')
  741. })
  742. resolve(1);
  743. })
  744. });
  745. },
  746. // 右边穿透二级
  747. rightPenetrateTwo (modelName, substraction, orgName) {
  748. this.boardType = 'right'
  749. let that = this
  750. return new Promise((resolve, err) => {
  751. let value = {
  752. access_token: this.access_token,
  753. "request": {
  754. isInsert: this.mockData ? '1' : '0',
  755. modelName: this.rightAdd.modelName,
  756. projectStepCode: this.rightAdd.projectStepCode,
  757. substraction:this.rightAdd.substraction,
  758. orgName
  759. },
  760. pageSize: 1000
  761. }
  762. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getTwoLevelData', value).then(res => {
  763. that.originalConfig6 = res.data
  764. that.config6.data = []
  765. if (this.projectNum == 311) {
  766. that.config6.header = ["所属集团", "项目名称", '实施主体', '投中项目阶段', '投资总额(万元)']
  767. res.data.forEach((item, index) => {
  768. that.config6.data[index] = []
  769. that.config6.data[index][0] = item.mdnb_unitcompany
  770. that.config6.data[index][1] = item.mdnb_project_name
  771. that.config6.data[index][2] = item.mdnb_implement_org
  772. that.config6.data[index][3] = item.mdnb_projectstep_mid
  773. that.config6.data[index][4] = item.mdnb_investment_money / 10000
  774. })
  775. } else if (this.projectNum == 312 || this.projectNum == 313) {
  776. that.config6.header = ["所属集团", "项目名称", '实施主体', '容差百分比', '投资总额(万元)']
  777. res.data.forEach((item, index) => {
  778. that.config6.data[index] = []
  779. that.config6.data[index][0] = item.mdnb_unitcompany
  780. that.config6.data[index][1] = item.mdnb_project_name
  781. that.config6.data[index][2] = item.mdnb_implement_org
  782. that.config6.data[index][3] = item.mdnb_percentagetolerance
  783. that.config6.data[index][4] = item.mdnb_investment_money / 10000
  784. })
  785. } else if (this.projectNum == 314) {
  786. that.config6.header = ["所属集团", "项目名称", '实施主体', '预算额(万元)', '已签订合同额(万元)', '产值认定额(万元)', '结算额(万元)', '付款申请额(万元)', '实际付款额(万元)']
  787. res.data.forEach((item, index) => {
  788. that.config6.data[index] = []
  789. that.config6.data[index][0] = item.mdnb_unitcompany
  790. that.config6.data[index][1] = item.mdnb_project_name
  791. that.config6.data[index][2] = item.mdnb_implement_org
  792. that.config6.data[index][3] = item.mdnb_budgetamount / 10000
  793. that.config6.data[index][4] = item.mdnb_contractamount / 10000
  794. that.config6.data[index][5] = item.mdnb_outputamount / 10000
  795. that.config6.data[index][6] = item.mdnb_settlementamount / 10000
  796. that.config6.data[index][6] = item.mdnb_paymentamount / 10000
  797. that.config6.data[index][6] = item.mdnb_actualpayamount / 10000
  798. })
  799. } else if (this.projectNum == 315) {
  800. that.config6.header = ["所属集团", "项目名称", '实施主体', '高风险项', '中风险项', '低风险项', '投资总额(万元)']
  801. res.data.forEach((item, index) => {
  802. that.config6.data[index] = []
  803. that.config6.data[index][0] = item.mdnb_unitcompany
  804. that.config6.data[index][1] = item.mdnb_project_name
  805. that.config6.data[index][2] = item.mdnb_implement_org
  806. that.config6.data[index][3] = item.mdnb_heigtdanger
  807. that.config6.data[index][4] = item.mdnb_middledanger
  808. that.config6.data[index][5] = item.mdnb_lowdanger
  809. that.config6.data[index][6] = item.mdnb_investment_money / 10000
  810. })
  811. }
  812. that.config6 = { ...that.config6 }
  813. that.projectListTipShow = true
  814. resolve(1);
  815. })
  816. });
  817. },
  818. // 左边穿透一级
  819. leftPenetrateOne (mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeNum, type, param, typeCTwo, paramCTwo) {
  820. this.boardType = 'left'
  821. return new Promise((resolve, err) => {
  822. let value = {
  823. access_token: this.access_token,
  824. "data": {
  825. mdnb_combofield: this.mockData ? 'B' : 'A',
  826. mdnb_textfield11,
  827. mdnb_textfield13,
  828. mdnb_textfield16,
  829. mdnb_textfield23,
  830. mdnb_datefield: this.year - 1 + '-01-01'
  831. },
  832. pageSize: 1000
  833. }
  834. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/yjct', value).then(res => {
  835. if (res.data.rows.length > 0) {
  836. if (typeNum == 2) {
  837. common4 = []
  838. common5 = []
  839. res.data.rows[0].mdnb_entryentity12.forEach((item, index) => {
  840. common4.push(item.mdnb_integerfield18)
  841. common5.push(item.mdnb_amountfield12)
  842. })
  843. setTimeout(() => {
  844. this.initChartLTip2('left', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo)
  845. this.initChartLTip3('left', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo)
  846. })
  847. } else if (typeNum == 1) {
  848. this.initChartLTip('left', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo)
  849. }
  850. }
  851. resolve(1);
  852. })
  853. });
  854. },
  855. // 左边穿透二级
  856. leftPenetrateTwo (mdnb_textfield12, mdnb_textfield19, mdnb_textfield15, mdnb_textfield17, mdnb_textfield20, num) {
  857. num && (this.projectNum = num)
  858. this.boardType = 'left'
  859. let that = this
  860. if (that.versions) {
  861. return new Promise((resolve, err) => {
  862. let value = {
  863. access_token: this.access_token,
  864. "data": {
  865. mdnb_combofield: this.mockData ? 'B' : 'A',
  866. mdnb_datefield: this.year - 1 + '-01-01',
  867. mdnb_textfield12,
  868. mdnb_textfield19,
  869. mdnb_textfield15,
  870. mdnb_textfield17,
  871. mdnb_textfield20
  872. },
  873. pageSize: 1000
  874. }
  875. if (mdnb_textfield20) {
  876. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/ejct', value).then(res => {
  877. that.config6.data = []
  878. if (res.data.rows.length > 0) {
  879. that.originalConfig6 = res.data.rows[0].mdnb_entryentity11
  880. that.config6.data = []
  881. if (this.projectNum == 211 || this.projectNum == 212) {
  882. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '已占用额度(万元)']
  883. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  884. that.config6.data[index] = []
  885. that.config6.data[index][0] = item.mdnb_textfield7
  886. that.config6.data[index][1] = item.mdnb_textfield6
  887. that.config6.data[index][2] = item.mdnb_textfield8
  888. that.config6.data[index][3] = item.mdnb_textfield25
  889. that.config6.data[index][4] = item.mdnb_textfield26
  890. that.config6.data[index][5] = item.mdnb_amountfield22 / 10000
  891. })
  892. } else if (this.projectNum == 2141) {
  893. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '本年度计划投资额(万元)']
  894. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  895. that.config6.data[index] = []
  896. that.config6.data[index][0] = item.mdnb_textfield7
  897. that.config6.data[index][1] = item.mdnb_textfield6
  898. that.config6.data[index][2] = item.mdnb_textfield8
  899. that.config6.data[index][3] = item.mdnb_textfield25
  900. that.config6.data[index][4] = item.mdnb_textfield26
  901. that.config6.data[index][5] = item.mdnb_amountfield22 / 10000
  902. })
  903. } else if (this.projectNum == 2142) {
  904. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '是否主业', '本年度计划投资额(万元)']
  905. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  906. that.config6.data[index] = []
  907. that.config6.data[index][0] = item.mdnb_textfield7
  908. that.config6.data[index][1] = item.mdnb_textfield6
  909. that.config6.data[index][2] = item.mdnb_textfield8
  910. that.config6.data[index][3] = item.mdnb_textfield25
  911. that.config6.data[index][4] = item.mdnb_textfield26
  912. that.config6.data[index][5] = item.mdnb_textfield21
  913. that.config6.data[index][6] = item.mdnb_amountfield22 / 10000
  914. })
  915. } else if (this.projectNum == 2143) {
  916. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '项目管理类型', '本年度计划投资额(万元)']
  917. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  918. that.config6.data[index] = []
  919. that.config6.data[index][0] = item.mdnb_textfield7
  920. that.config6.data[index][1] = item.mdnb_textfield6
  921. that.config6.data[index][2] = item.mdnb_textfield8
  922. that.config6.data[index][3] = item.mdnb_textfield25
  923. that.config6.data[index][4] = item.mdnb_textfield26
  924. that.config6.data[index][5] = item.mdnb_textfield22
  925. that.config6.data[index][6] = item.mdnb_amountfield22 / 10000
  926. })
  927. } else if (this.projectNum == 215) {
  928. that.config6.header = ["所属集团", "项目名称", '投资主体', '产业类别I级', '产业类别II级', '本年度计划投资额(万元)']
  929. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  930. that.config6.data[index] = []
  931. that.config6.data[index][0] = item.mdnb_textfield7
  932. that.config6.data[index][1] = item.mdnb_textfield6
  933. that.config6.data[index][2] = item.mdnb_textfield8
  934. that.config6.data[index][3] = item.mdnb_textfield9
  935. that.config6.data[index][4] = item.mdnb_textfield10
  936. that.config6.data[index][5] = item.mdnb_amountfield22 / 10000
  937. })
  938. } else if (this.projectNum == 216) {
  939. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '项目阶段', '本年度计划投资额(万元)']
  940. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  941. that.config6.data[index] = []
  942. that.config6.data[index][0] = item.mdnb_textfield7
  943. that.config6.data[index][1] = item.mdnb_textfield6
  944. that.config6.data[index][2] = item.mdnb_textfield8
  945. that.config6.data[index][3] = item.mdnb_textfield25
  946. that.config6.data[index][4] = item.mdnb_textfield26
  947. that.config6.data[index][5] = item.mdnb_textfield24
  948. that.config6.data[index][6] = item.mdnb_amountfield22 / 10000
  949. })
  950. }
  951. }
  952. that.config6 = { ...that.config6 }
  953. that.projectListTipShow = true
  954. resolve(1);
  955. })
  956. } else {
  957. post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tzedfxzed', value).then(res => {
  958. if (res.data.rows.length > 0) {
  959. that.originalConfig6 = res.data.rows[0].mdnb_entryentity11
  960. that.config6.data = []
  961. if (this.projectNum == 211 || this.projectNum == 212) {
  962. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '已占用额度(万元)']
  963. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  964. that.config6.data[index] = []
  965. that.config6.data[index][0] = item.mdnb_textfield7
  966. that.config6.data[index][1] = item.mdnb_textfield6
  967. that.config6.data[index][2] = item.mdnb_textfield8
  968. that.config6.data[index][3] = item.mdnb_textfield25
  969. that.config6.data[index][4] = item.mdnb_textfield26
  970. that.config6.data[index][5] = item.mdnb_amountfield22 / 10000
  971. })
  972. } else if (this.projectNum == 2141) {
  973. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '本年度计划投资额(万元)']
  974. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  975. that.config6.data[index] = []
  976. that.config6.data[index][0] = item.mdnb_textfield7
  977. that.config6.data[index][1] = item.mdnb_textfield6
  978. that.config6.data[index][2] = item.mdnb_textfield8
  979. that.config6.data[index][3] = item.mdnb_textfield25
  980. that.config6.data[index][4] = item.mdnb_textfield26
  981. that.config6.data[index][5] = item.mdnb_amountfield22 / 10000
  982. })
  983. } else if (this.projectNum == 2142) {
  984. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '是否主业', '本年度计划投资额(万元)']
  985. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  986. that.config6.data[index] = []
  987. that.config6.data[index][0] = item.mdnb_textfield7
  988. that.config6.data[index][1] = item.mdnb_textfield6
  989. that.config6.data[index][2] = item.mdnb_textfield8
  990. that.config6.data[index][3] = item.mdnb_textfield25
  991. that.config6.data[index][4] = item.mdnb_textfield26
  992. that.config6.data[index][5] = item.mdnb_textfield21
  993. that.config6.data[index][6] = item.mdnb_amountfield22 / 10000
  994. })
  995. } else if (this.projectNum == 2143) {
  996. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '项目管理类型', '本年度计划投资额(万元)']
  997. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  998. that.config6.data[index] = []
  999. that.config6.data[index][0] = item.mdnb_textfield7
  1000. that.config6.data[index][1] = item.mdnb_textfield6
  1001. that.config6.data[index][2] = item.mdnb_textfield8
  1002. that.config6.data[index][3] = item.mdnb_textfield25
  1003. that.config6.data[index][4] = item.mdnb_textfield26
  1004. that.config6.data[index][5] = item.mdnb_textfield22
  1005. that.config6.data[index][6] = item.mdnb_amountfield22 / 10000
  1006. })
  1007. } else if (this.projectNum == 215) {
  1008. that.config6.header = ["所属集团", "项目名称", '投资主体', '产业类别I级', '产业类别II级', '本年度计划投资额(万元)']
  1009. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  1010. that.config6.data[index] = []
  1011. that.config6.data[index][0] = item.mdnb_textfield7
  1012. that.config6.data[index][1] = item.mdnb_textfield6
  1013. that.config6.data[index][2] = item.mdnb_textfield8
  1014. that.config6.data[index][3] = item.mdnb_textfield9
  1015. that.config6.data[index][4] = item.mdnb_textfield10
  1016. that.config6.data[index][5] = item.mdnb_amountfield22 / 10000
  1017. })
  1018. } else if (this.projectNum == 216) {
  1019. that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '项目阶段', '本年度计划投资额(万元)']
  1020. res.data.rows[0].mdnb_entryentity11.forEach((item, index) => {
  1021. that.config6.data[index] = []
  1022. that.config6.data[index][0] = item.mdnb_textfield7
  1023. that.config6.data[index][1] = item.mdnb_textfield6
  1024. that.config6.data[index][2] = item.mdnb_textfield8
  1025. that.config6.data[index][3] = item.mdnb_textfield25
  1026. that.config6.data[index][4] = item.mdnb_textfield26
  1027. that.config6.data[index][5] = item.mdnb_textfield24
  1028. that.config6.data[index][6] = item.mdnb_amountfield22 / 10000
  1029. })
  1030. }
  1031. that.config6 = { ...that.config6 }
  1032. that.projectListTipShow = true
  1033. }
  1034. resolve(1);
  1035. })
  1036. }
  1037. });
  1038. } else {
  1039. that.projectListTipShow = true
  1040. }
  1041. },
  1042. // 中间穿透一级 一个柱状图还是两个
  1043. centerPenetrateOne (type, param, typeNum, typeCTwo, paramCTwo, portType) {
  1044. this.boardType = 'center'
  1045. let that = this
  1046. return new Promise((resolve, err) => {
  1047. let value = {
  1048. access_token: this.access_token,
  1049. mock: this.mockData,
  1050. presetYear: this.year,
  1051. type,
  1052. param
  1053. }
  1054. get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/getPenetrationLevel1', value).then(res => {
  1055. if (typeNum == 1) {
  1056. common3 = []
  1057. res.data.keyIndicators.forEach((item, index) => {
  1058. if (param == 'cyplanamount') {
  1059. common3.push(item.cyplanamount)
  1060. }
  1061. if (param == 'cyplancount') {
  1062. common3.push(item.cyplanamount)
  1063. }
  1064. if (param == 'szplanamount') {
  1065. common3.push(item.cyplanamount)
  1066. }
  1067. if (param == 'szplancount') {
  1068. common3.push(item.szplancount)
  1069. }
  1070. if (param == 'investamount') {
  1071. common3.push(item.investamount)
  1072. }
  1073. if (param == 'projectcount') {
  1074. common3.push(item.projectcount)
  1075. }
  1076. if (param == 'gdzcamount') {
  1077. common3.push(item.projectcount)
  1078. }
  1079. if (param == 'gqtzamount') {
  1080. common3.push(item.projectcount)
  1081. }
  1082. if (param == 'ceiamount') {
  1083. common3.push(item.ceiamount)
  1084. }
  1085. if (param == 'cpneiamount') {
  1086. common3.push(item.cpneiamount)
  1087. }
  1088. if (param == 'ccheiamount') {
  1089. common3.push(item.ccheiamount)
  1090. }
  1091. if (param == 'cdiamount') {
  1092. common3.push(item.cdiamount)
  1093. }
  1094. if (param == 'cciamount') {
  1095. common3.push(item.cciamount)
  1096. }
  1097. })
  1098. setTimeout(() => {
  1099. this.initChartLTip('center', '', '', '', '', typeCTwo, paramCTwo, portType)
  1100. })
  1101. } else if (typeNum == 2) {
  1102. common4 = []
  1103. common5 = []
  1104. if (type == 'distribution') {
  1105. that.changeLine = false
  1106. that.lineCommonCompany = res.data.topData.map(item => item.type)
  1107. common4 = res.data.topData.map(item => item.amount)
  1108. common5 = res.data.bottomData.map(item => item.amount)
  1109. } else {
  1110. if (param == 'new') {
  1111. res.data.keyIndicators.forEach((item, index) => {
  1112. common4.push(item.newamount)
  1113. common5.push(item.newcount)
  1114. })
  1115. } else if (param == 'renew') {
  1116. res.data.keyIndicators.forEach((item, index) => {
  1117. common4.push(item.renewamount)
  1118. common5.push(item.renewcount)
  1119. })
  1120. } else if (param == '太原市') {
  1121. res.data.investmentMap.forEach((item, index) => {
  1122. common4.push(item.value2)
  1123. common5.push(item.amount)
  1124. })
  1125. }
  1126. }
  1127. setTimeout(() => {
  1128. this.initChartLTip2('center', '', '', '', '', type, param, typeCTwo, paramCTwo, portType)
  1129. this.initChartLTip3('center', '', '', '', '', type, param, typeCTwo, paramCTwo, portType)
  1130. })
  1131. } else if (typeNum == 3) {
  1132. // 山西地图
  1133. center5 = []
  1134. res.data.investmentMap.forEach((item, index) => {
  1135. center5.push({ name: item.address, value: that.yuanChange(item.amount), value2: item.value2 })
  1136. })
  1137. setTimeout(() => {
  1138. that.initProvinceChart()
  1139. });
  1140. }
  1141. resolve(1);
  1142. })
  1143. });
  1144. },
  1145. // 中间穿透二级
  1146. centerPenetrateTwo (type, param, orgNum, portType) {
  1147. this.boardType = 'center'
  1148. let that = this
  1149. return new Promise((resolve, err) => {
  1150. let value = {
  1151. access_token: this.access_token,
  1152. mock: this.mockData,
  1153. presetYear: this.year,
  1154. type,
  1155. param,
  1156. orgNum
  1157. }
  1158. that.config6.header[2] = '投资主体'
  1159. that.config6.header[5] = '年投资完成额(亿)'
  1160. if (portType == 1) {
  1161. get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/MainPageMonthReportProject', value).then(res => {
  1162. that.config6.data = []
  1163. that.originalConfig6 = res.data
  1164. res.data.forEach((item, index) => {
  1165. that.config6.data[index] = []
  1166. that.config6.data[index][0] = item.projectname
  1167. that.config6.data[index][1] = item.orgName
  1168. that.config6.data[index][2] = item.tzzt
  1169. that.config6.data[index][3] = item.cylb
  1170. that.config6.data[index][4] = item.cylb2
  1171. that.config6.data[index][5] = item.amount
  1172. })
  1173. that.config6 = { ...that.config6 }
  1174. that.projectListTipShow = true
  1175. resolve(1);
  1176. })
  1177. } else if (portType == 2) {
  1178. get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/MainPagePlanProject', value).then(res => {
  1179. that.config6.data = []
  1180. that.originalConfig6 = res.data
  1181. res.data.forEach((item, index) => {
  1182. that.config6.data[index] = []
  1183. that.config6.data[index][0] = item.projectname
  1184. that.config6.data[index][1] = item.orgName
  1185. that.config6.data[index][2] = item.tzzt
  1186. that.config6.data[index][3] = item.cylb
  1187. that.config6.data[index][4] = item.cylb2
  1188. that.config6.data[index][5] = item.amount
  1189. })
  1190. that.config6 = { ...that.config6 }
  1191. that.projectListTipShow = true
  1192. resolve(1);
  1193. })
  1194. } else {
  1195. value = {
  1196. access_token: this.access_token,
  1197. mock: this.mockData,
  1198. presetYear: this.year,
  1199. type: 'investmentMap',
  1200. param: '太原市',
  1201. orgNum
  1202. }
  1203. get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/MainPageMonthReportProject', value).then(res => {
  1204. that.config6.data = []
  1205. that.originalConfig6 = res.data
  1206. res.data.forEach((item, index) => {
  1207. that.config6.data[index] = []
  1208. that.config6.data[index][0] = item.projectname
  1209. that.config6.data[index][2] = item.orgName
  1210. that.config6.data[index][5] = item.amount
  1211. })
  1212. that.config6 = { ...that.config6 }
  1213. that.projectListTipShow = true
  1214. resolve(1);
  1215. })
  1216. }
  1217. });
  1218. },
  1219. yellowMouse (index) {
  1220. if (index % 2 == 0) {
  1221. this.yellowCount = index
  1222. this.yellowPosition = (index / 2 - 1) * 315 + 40
  1223. this.yellowType = false
  1224. this.changeYellow()
  1225. }
  1226. },
  1227. // 回到中国地图
  1228. backChina () {
  1229. this.centerShow = false
  1230. this.mapChart.dispose()
  1231. setTimeout(() => {
  1232. this.initChinaChart()
  1233. });
  1234. },
  1235. // 找公司编码
  1236. findCode (code) {
  1237. let a = this.commonCompanyAll.find((item, index) => {
  1238. return item.simplename == code
  1239. })
  1240. return a ? a.number.slice(0, 4) : ''
  1241. },
  1242. // 找项目编码
  1243. findProjectCode (a, b, type) {
  1244. if (type == 'center') {
  1245. let c = this.originalConfig6.find(item => {
  1246. return item.projectname == a && item.tzzt == b
  1247. })
  1248. return c.projectno
  1249. } else if (type == 'right') {
  1250. let c = this.originalConfig6.find(item => {
  1251. return item.mdnb_project_name == a && item.mdnb_org == b
  1252. })
  1253. return c.mdnb_projectnumber
  1254. } else if (type == 'left') {
  1255. let c = this.originalConfig6.find(item => {
  1256. return item.mdnb_textfield6 == a && item.mdnb_textfield8 == b
  1257. })
  1258. return c.mdnb_textfield14
  1259. }
  1260. },
  1261. // 去项目看板
  1262. goLookBoard (e, f) {
  1263. console.log(e, '看看E')
  1264. if (f) {
  1265. this.boardType = f
  1266. this.boardUrl = `http://172.21.3.68:8081/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://172.21.3.68:8081/ierp/index.html?formId=mdnb_threetoproject&prj=${this.findProjectCode(e.row[0], e.row[1], this.boardType)}`
  1267. } else {
  1268. this.boardUrl = `http://172.21.3.68:8081/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://172.21.3.68:8081/ierp/index.html?formId=mdnb_threetoproject&prj=${this.findProjectCode(e.row[0], e.row[2], this.boardType)}`
  1269. }
  1270. // this.findProjectCode(e.row[0],e.row[2])
  1271. // 当前页面打开
  1272. // window.location.href = `http://192.168.2.111:8080/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://192.168.2.111:8080/ierp/index.html?formId=mdnb_threetoproject&prj=PL_ZZGY_0_2023_000036`
  1273. // 新页面打开
  1274. // window.open('http://192.168.2.111:8080/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://192.168.2.111:8080/ierp/index.html?formId=mdnb_threetoproject&prj=PL_ZZGY_0_2023_000036')
  1275. this.boardTipShow = true
  1276. console.log(this.boardUrl, '跳转去的项目看板地址')
  1277. },
  1278. // 根据key分组
  1279. classify (arr, k) {
  1280. let map = {};
  1281. let myArr = [];
  1282. for (let i = 0; i < arr.length; i++) {
  1283. if (!map[arr[i][k]]) {
  1284. let a = {}
  1285. a[k] = arr[i][k]
  1286. a.data = [arr[i]]
  1287. myArr.push(a)
  1288. map[arr[i][k]] = arr[i]
  1289. } else {
  1290. for (let j = 0; j < myArr.length; j++) {
  1291. if (arr[i][k] === myArr[j][k]) {
  1292. myArr[j].data.push(arr[i]);
  1293. break
  1294. }
  1295. }
  1296. }
  1297. }
  1298. return myArr
  1299. },
  1300. // 两个柱状图的弹窗
  1301. showChartLTipDouble (e, location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo, portType, num, modelName, projectStepCode,substraction) {
  1302. modelName ? this.rightAdd.modelName = modelName : this.rightAdd.modelName = ''
  1303. projectStepCode ? this.rightAdd.projectStepCode = projectStepCode : this.rightAdd.projectStepCode = ''
  1304. substraction ? this.rightAdd.substraction = substraction : this.rightAdd.substraction = ''
  1305. num && (this.projectNum = num)
  1306. this.titleName = e
  1307. this.closeTap()
  1308. this.echartDoubleTipShow = true
  1309. if (this.versions) {
  1310. if (location == 'right') {
  1311. this.rightPenetrateOne()
  1312. }
  1313. if (location == 'left') {
  1314. this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, 2)
  1315. }
  1316. if (location == 'center') {
  1317. this.centerPenetrateOne(type, param, 2, typeCTwo, paramCTwo, portType)
  1318. }
  1319. } else {
  1320. setTimeout(() => {
  1321. this.initChartLTip2()
  1322. this.initChartLTip3()
  1323. })
  1324. }
  1325. },
  1326. // 单个柱状图的弹窗
  1327. showChartLTipSingle (e, location, type, param, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo, portType, num) {
  1328. this.projectNum = num
  1329. this.closeTap()
  1330. this.titleName = e
  1331. this.echartSingleTipShow = true
  1332. if (this.versions) {
  1333. if (location == 'center') {
  1334. this.centerPenetrateOne(type, param, 1, typeCTwo, paramCTwo, portType)
  1335. }
  1336. if (location == 'left') {
  1337. this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, 1, type, param)
  1338. }
  1339. } else {
  1340. setTimeout(() => {
  1341. this.initChartLTip(location)
  1342. })
  1343. }
  1344. },
  1345. initChartLTip (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo, portType) {
  1346. this.myChartTip1 = echarts.init(document.getElementById("echartSingleTip"));
  1347. let option = {
  1348. grid: {
  1349. top: 40,
  1350. right: 0,
  1351. left: 60,
  1352. bottom: 70,
  1353. },
  1354. tooltip: {
  1355. show: true,
  1356. trigger: "axis",
  1357. axisPointer: {
  1358. // 坐标轴指示器,坐标轴触发有效
  1359. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  1360. },
  1361. textStyle: {
  1362. color: '#FFF', // 文字的颜色
  1363. fontSize: '20', // 文字字体大小
  1364. fontFamily: 'Microsoft YaHei'
  1365. },
  1366. },
  1367. xAxis: {
  1368. data: commonCompany,
  1369. axisTick: {
  1370. show: false,
  1371. },
  1372. // x轴的字体颜色
  1373. axisLabel: {
  1374. rotate: 40,
  1375. textStyle: {
  1376. color: "white",
  1377. fontSize: '20',
  1378. fontFamily: 'Microsoft YaHei'
  1379. },
  1380. },
  1381. //y轴线的颜色以及宽度
  1382. axisLine: {
  1383. show: true,
  1384. lineStyle: {
  1385. color: "#1E5389",
  1386. width: 1,
  1387. type: "solid",
  1388. },
  1389. },
  1390. },
  1391. yAxis: {
  1392. name: '亿',
  1393. nameTextStyle: {//y轴上方单位的颜色
  1394. color: '#fff',
  1395. fontSize: '20',
  1396. fontFamily: 'Microsoft YaHei'
  1397. },
  1398. axisTick: {
  1399. lineStyle: {
  1400. color: "#18416F",
  1401. },
  1402. },
  1403. // y轴的字体颜色
  1404. axisLabel: {
  1405. textStyle: {
  1406. color: "white",
  1407. fontSize: '20'
  1408. },
  1409. },
  1410. splitLine: {
  1411. show: true,
  1412. lineStyle: {
  1413. color: '#68b4dd66',
  1414. type: 'dashed',
  1415. },
  1416. },
  1417. //y轴线的颜色以及宽度
  1418. axisLine: {
  1419. show: true,
  1420. lineStyle: {
  1421. color: "#1E5389",
  1422. width: 1,
  1423. type: "solid",
  1424. },
  1425. },
  1426. },
  1427. series: [
  1428. // {
  1429. // name: "2022年额度",
  1430. // type: "bar",
  1431. // data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
  1432. // showBackground: false,
  1433. // backgroundStyle: {
  1434. // color: "#18416F",
  1435. // },
  1436. // barWidth: "10%",
  1437. // itemStyle: {
  1438. // barBorderRadius: [10, 10, 0, 0],
  1439. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1440. // {
  1441. // offset: 0,
  1442. // color: '#082550',
  1443. // },
  1444. // {
  1445. // offset: 1,
  1446. // color: '#69c0ff',
  1447. // },
  1448. // ]),
  1449. // },
  1450. // },
  1451. {
  1452. name: "总额度",
  1453. type: "bar",
  1454. data: common3,
  1455. showBackground: false,
  1456. backgroundStyle: {
  1457. color: "#18416F",
  1458. },
  1459. barWidth: "30%",
  1460. itemStyle: {
  1461. // barBorderRadius: [10, 10, 0, 0],
  1462. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1463. {
  1464. offset: 0,
  1465. color: '#082550',
  1466. },
  1467. {
  1468. offset: 1,
  1469. color: '#957DFF',
  1470. },
  1471. ]),
  1472. },
  1473. },
  1474. ],
  1475. legend: {
  1476. // data: ["2022年额度", "2023年额度"],
  1477. data: ["总额度"],
  1478. textStyle: {
  1479. // 图列内容样式
  1480. color: "#fff", // 字体颜色
  1481. fontSize: "20",
  1482. fontFamily: 'Microsoft YaHei'
  1483. },
  1484. right: 'center',
  1485. y: 5,
  1486. // 小图标的宽高
  1487. },
  1488. };
  1489. tools.loopShowTooltip(this.myChartTip1, option, {
  1490. nterval: 2000,
  1491. loopSeries: true,
  1492. })
  1493. let that = this
  1494. that.myChartTip1.on('click', function (param) {
  1495. if (that.versions) {
  1496. if (location == 'right') {
  1497. that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name))
  1498. } else if (location == 'left') {
  1499. that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum)
  1500. } else if (location == 'center') {
  1501. that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType)
  1502. }
  1503. } else {
  1504. that.projectListTipShow = true
  1505. }
  1506. })
  1507. that.myChartTip1.setOption(option);
  1508. },
  1509. initChartLTip2 (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo, portType) {
  1510. this.myChartTip2 = echarts.init(document.getElementById("echartSingleTip2"));
  1511. let option = {
  1512. grid: {
  1513. top: 40,
  1514. right: 0,
  1515. left: 60,
  1516. bottom: '15%',
  1517. },
  1518. tooltip: {
  1519. show: true,
  1520. trigger: "axis",
  1521. axisPointer: {
  1522. // 坐标轴指示器,坐标轴触发有效
  1523. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  1524. },
  1525. textStyle: {
  1526. color: '#FFF', // 文字的颜色
  1527. fontSize: '20', // 文字字体大小
  1528. fontFamily: 'Microsoft YaHei'
  1529. },
  1530. },
  1531. xAxis: {
  1532. data: this.changeLine ? commonCompany : this.lineCommonCompany,
  1533. axisTick: {
  1534. show: false,
  1535. },
  1536. // x轴的字体颜色
  1537. axisLabel: {
  1538. rotate: 40,
  1539. textStyle: {
  1540. color: "white",
  1541. fontSize: '20',
  1542. fontFamily: 'Microsoft YaHei'
  1543. },
  1544. },
  1545. //y轴线的颜色以及宽度
  1546. axisLine: {
  1547. show: true,
  1548. lineStyle: {
  1549. color: "#1E5389",
  1550. width: 1,
  1551. type: "solid",
  1552. },
  1553. },
  1554. },
  1555. yAxis: {
  1556. name: '个',
  1557. nameTextStyle: {//y轴上方单位的颜色
  1558. color: '#fff',
  1559. fontSize: '20',
  1560. fontFamily: 'Microsoft YaHei'
  1561. },
  1562. axisTick: {
  1563. lineStyle: {
  1564. color: "#18416F",
  1565. },
  1566. },
  1567. // y轴的字体颜色
  1568. axisLabel: {
  1569. textStyle: {
  1570. color: "#fff",
  1571. fontSize: '20',
  1572. fontFamily: 'Microsoft YaHei'
  1573. },
  1574. },
  1575. splitLine: {
  1576. show: true,
  1577. lineStyle: {
  1578. color: '#68b4dd66',
  1579. type: 'dashed',
  1580. },
  1581. },
  1582. //y轴线的颜色以及宽度
  1583. axisLine: {
  1584. show: true,
  1585. lineStyle: {
  1586. color: "#1E5389",
  1587. width: 1,
  1588. type: "solid",
  1589. },
  1590. },
  1591. },
  1592. series: [
  1593. {
  1594. name: "总数量",
  1595. type: this.changeLine ? "bar" : 'line',
  1596. data: common4,
  1597. showBackground: false,
  1598. backgroundStyle: {
  1599. color: "#18416F",
  1600. },
  1601. barWidth: "30%",
  1602. itemStyle: {
  1603. // barBorderRadius: [10, 10, 0, 0],
  1604. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1605. {
  1606. offset: 0,
  1607. color: '#082550',
  1608. },
  1609. {
  1610. offset: 1,
  1611. color: '#957DFF',
  1612. },
  1613. ]),
  1614. },
  1615. },
  1616. ],
  1617. legend: {
  1618. // data: ["2022年额度", "2023年额度"],
  1619. data: ["总数量"],
  1620. textStyle: {
  1621. // 图列内容样式
  1622. color: "#fff", // 字体颜色
  1623. fontSize: "20",
  1624. fontFamily: 'Microsoft YaHei'
  1625. },
  1626. right: 'center',
  1627. y: 0,
  1628. // 小图标的宽高
  1629. },
  1630. };
  1631. tools.loopShowTooltip(this.myChartTip2, option, {
  1632. nterval: 2000,
  1633. loopSeries: true,
  1634. })
  1635. let that = this
  1636. that.myChartTip2.on('click', function (param) {
  1637. if (that.versions) {
  1638. if (location == 'right') {
  1639. that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name))
  1640. } else if (location == 'left') {
  1641. that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum)
  1642. } else if (location == 'center') {
  1643. that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType)
  1644. }
  1645. } else {
  1646. that.projectListTipShow = true
  1647. }
  1648. })
  1649. that.myChartTip2.setOption(option);
  1650. },
  1651. initChartLTip3 (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo, portType) {
  1652. this.myChartTip3 = echarts.init(document.getElementById("echartSingleTip3"));
  1653. let option = {
  1654. grid: {
  1655. top: 40,
  1656. right: 0,
  1657. left: 60,
  1658. bottom: '15%',
  1659. },
  1660. tooltip: {
  1661. show: true,
  1662. trigger: "axis",
  1663. axisPointer: {
  1664. // 坐标轴指示器,坐标轴触发有效
  1665. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  1666. },
  1667. textStyle: {
  1668. color: '#FFF', // 文字的颜色
  1669. fontSize: '20', // 文字字体大小
  1670. fontFamily: 'Microsoft YaHei'
  1671. },
  1672. },
  1673. xAxis: {
  1674. data: commonCompany,
  1675. axisTick: {
  1676. show: false,
  1677. },
  1678. // x轴的字体颜色
  1679. axisLabel: {
  1680. rotate: 40,
  1681. textStyle: {
  1682. color: "#fff",
  1683. fontSize: '20',
  1684. fontFamily: 'Microsoft YaHei'
  1685. },
  1686. },
  1687. //y轴线的颜色以及宽度
  1688. axisLine: {
  1689. show: true,
  1690. lineStyle: {
  1691. color: "#1E5389",
  1692. width: 1,
  1693. type: "solid",
  1694. },
  1695. },
  1696. },
  1697. yAxis: {
  1698. name: '亿',
  1699. nameTextStyle: {//y轴上方单位的颜色
  1700. color: '#fff',
  1701. fontSize: '20',
  1702. fontFamily: 'Microsoft YaHei'
  1703. },
  1704. axisTick: {
  1705. lineStyle: {
  1706. color: "#18416F",
  1707. },
  1708. },
  1709. // y轴的字体颜色
  1710. axisLabel: {
  1711. textStyle: {
  1712. color: "#fff",
  1713. fontSize: '20',
  1714. fontFamily: 'Microsoft YaHei'
  1715. },
  1716. },
  1717. splitLine: {
  1718. show: true,
  1719. lineStyle: {
  1720. color: '#68b4dd66',
  1721. type: 'dashed',
  1722. },
  1723. },
  1724. //y轴线的颜色以及宽度
  1725. axisLine: {
  1726. show: true,
  1727. lineStyle: {
  1728. color: "#1E5389",
  1729. width: 1,
  1730. type: "solid",
  1731. },
  1732. },
  1733. },
  1734. series: [,
  1735. {
  1736. name: "总额度",
  1737. type: "bar",
  1738. data: common5,
  1739. showBackground: false,
  1740. backgroundStyle: {
  1741. color: "#18416F",
  1742. },
  1743. barWidth: "30%",
  1744. itemStyle: {
  1745. // barBorderRadius: [10, 10, 0, 0],
  1746. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1747. {
  1748. offset: 0,
  1749. color: '#082550',
  1750. },
  1751. {
  1752. offset: 1,
  1753. color: '#69c0ff',
  1754. },
  1755. ]),
  1756. },
  1757. },
  1758. ],
  1759. legend: {
  1760. data: ["总额度"],
  1761. textStyle: {
  1762. // 图列内容样式
  1763. color: "#fff", // 字体颜色
  1764. fontSize: "20",
  1765. fontFamily: 'Microsoft YaHei'
  1766. },
  1767. right: 'center',
  1768. y: 5,
  1769. },
  1770. };
  1771. tools.loopShowTooltip(this.myChartTip3, option, {
  1772. nterval: 2000,
  1773. loopSeries: true,
  1774. })
  1775. let that = this
  1776. that.myChartTip3.on('click', function (param) {
  1777. if (that.versions) {
  1778. if (location == 'right') {
  1779. that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name))
  1780. } else if (location == 'left') {
  1781. that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum)
  1782. } else if (location == 'center') {
  1783. that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType)
  1784. }
  1785. } else {
  1786. that.projectListTipShow = true
  1787. }
  1788. })
  1789. that.myChartTip3.setOption(option);
  1790. },
  1791. closeTap () {
  1792. this.changeLine = true
  1793. this.echartEnterpriseShow = false
  1794. this.mapTipShow = false
  1795. this.echartSingleTipShow = false
  1796. this.echartDoubleTipShow = false
  1797. this.projectListTipShow = false
  1798. this.myChartTip1 ? this.myChartTip1.dispose() : ''
  1799. this.myChartTip2 ? this.myChartTip2.dispose() : ''
  1800. this.myChartTip3 ? this.myChartTip3.dispose() : ''
  1801. },
  1802. //点击弹窗左半部分
  1803. popLeftClick () {
  1804. if (this.titleUrl == '2.png') {
  1805. this.titleUrl = '3.png'
  1806. } else if (this.titleUrl == '7.png') {
  1807. this.titleUrl = '8.png'
  1808. } else if (this.titleUrl == '3.png') {
  1809. this.titleUrl = '2.png'
  1810. } else if (this.titleUrl == '8.png') {
  1811. this.titleUrl = '7.png'
  1812. } else if (this.titleUrl == '5.png') {
  1813. this.titleUrl = '2.png'
  1814. } else if (this.titleUrl == '10.png') {
  1815. this.titleUrl = '7.png'
  1816. }
  1817. },
  1818. //点击弹窗右半部分
  1819. poprightClick () {
  1820. if (this.titleUrl == '2.png') {
  1821. this.titleUrl = '5.png'
  1822. } else if (this.titleUrl == '7.png') {
  1823. this.titleUrl = '10.png'
  1824. } else if (this.titleUrl == '5.png') {
  1825. this.titleUrl = '2.png'
  1826. } else if (this.titleUrl == '10.png') {
  1827. this.titleUrl = '7.png'
  1828. } else if (this.titleUrl == '3.png') {
  1829. this.titleUrl = '2.png'
  1830. } else if (this.titleUrl == '8.png') {
  1831. this.titleUrl = '7.png'
  1832. }
  1833. },
  1834. // 标题弹窗
  1835. showTitlePop (e, name) {
  1836. this.closeTap()
  1837. this.titleUrl = e
  1838. this.titleName = name
  1839. this.$nextTick(() => {
  1840. this.mapTipShow = true
  1841. })
  1842. },
  1843. changeYellow () {
  1844. this.titleList.forEach((item, index) => {
  1845. this.$set(this.titleList[index], 'type', 1)
  1846. })
  1847. this.$set(this.titleList[this.yellowCount], 'type', 2)
  1848. if (this.yellowCount == 14) {
  1849. this.yellowCount = 0
  1850. this.yellowPosition += 315
  1851. } else {
  1852. if (this.yellowCount != 0) {
  1853. this.yellowPosition += 315
  1854. } else {
  1855. this.yellowPosition = 40
  1856. }
  1857. this.yellowCount += 2
  1858. }
  1859. },
  1860. numFormat (value) {
  1861. if (!value) return '0'
  1862. // var intPart = Number(value).toFixed(0) // 获取整数部分
  1863. var intPart = parseInt(value)// 获取整数部分
  1864. var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  1865. var floatPart = '.00' // 预定义小数部分
  1866. var value2Array = value.toString().split('.')
  1867. // =2表示数据有小数位
  1868. if (value2Array.length === 2) {
  1869. floatPart = value2Array[1].toString() // 拿到小数部分
  1870. if (floatPart.length === 1) {
  1871. // 补0
  1872. return intPartFormat + '.' + floatPart + '0'
  1873. } else {
  1874. return intPartFormat + '.' + floatPart
  1875. }
  1876. } else {
  1877. return intPartFormat
  1878. }
  1879. },
  1880. changeTopColor () {
  1881. this.list = document.getElementsByClassName('row-item')
  1882. for (var i = 0; i < this.list.length; i++) {
  1883. if (i == 1) {
  1884. this.list[i].classList.add('light')
  1885. } else {
  1886. this.list[i].classList.remove('light')
  1887. }
  1888. }
  1889. this.initChartL9()
  1890. },
  1891. scrollChange (index) {
  1892. if (index == 18) {
  1893. this.count = -1
  1894. } else {
  1895. this.count = index
  1896. }
  1897. if (this.count > 12 && this.count != 18) {
  1898. this.countType = 1
  1899. } else {
  1900. this.countType = 0
  1901. }
  1902. for (var i = 0; i < this.list.length; i++) {
  1903. if (i == 2) {
  1904. this.list[i].classList.add('light')
  1905. } else {
  1906. this.list[i].classList.remove('light')
  1907. }
  1908. }
  1909. this.chartCarousel.dispose()
  1910. this.initChartL9()
  1911. },
  1912. initChartBall () {
  1913. this.left11Chart = echarts.init(this.$refs['echartBall'])
  1914. option = {
  1915. series: [
  1916. {
  1917. type: "liquidFill",
  1918. radius: "80%",
  1919. data: [left2[0], left2[0] + 0.02, left2[0] - 0.02],
  1920. amplitude: '4%',
  1921. waveLength: '20%', //波浪长度
  1922. // data: [
  1923. // {}
  1924. // ],
  1925. backgroundStyle: {
  1926. color: {
  1927. type: "radial",
  1928. x: 0.5,
  1929. y: 0.5,
  1930. r: 0.5,
  1931. // 水球体颜色
  1932. colorStops: [
  1933. {
  1934. offset: 0,
  1935. color: "#010a11",
  1936. },
  1937. {
  1938. offset: 0.9,
  1939. color: "#1a2f45",
  1940. },
  1941. {
  1942. offset: 1,
  1943. color: "#2b405a",
  1944. },
  1945. ],
  1946. globalCoord: false,
  1947. },
  1948. },
  1949. outline: {
  1950. borderDistance: 0,
  1951. itemStyle: {
  1952. borderWidth: 0,
  1953. borderColor: {
  1954. type: "linear",
  1955. x: 0,
  1956. y: 0,
  1957. x2: 0,
  1958. y2: 1,
  1959. colorStops: [
  1960. ],
  1961. globalCoord: false,
  1962. },
  1963. },
  1964. },
  1965. color: [
  1966. {
  1967. x: 0,
  1968. y: 0,
  1969. x2: 0,
  1970. y2: 1,
  1971. colorStops: [{
  1972. offset: 0,
  1973. color: '#237386',
  1974. },
  1975. {
  1976. offset: 1,
  1977. color: '#0078C8',
  1978. },],
  1979. },
  1980. {
  1981. x: 0,
  1982. y: 0,
  1983. x2: 0,
  1984. y2: 1,
  1985. colorStops: [{
  1986. offset: 0,
  1987. color: '#2F97A9',
  1988. },
  1989. {
  1990. offset: 1,
  1991. color: '#0078C8',
  1992. },],
  1993. },
  1994. {
  1995. x: 0,
  1996. y: 0,
  1997. x2: 0,
  1998. y2: 1,
  1999. colorStops: [{
  2000. offset: 0,
  2001. color: '#48E0ED',
  2002. },
  2003. {
  2004. offset: 1,
  2005. color: '#0078C8',
  2006. },],
  2007. }
  2008. ],
  2009. label: {
  2010. normal: {
  2011. textStyle: {
  2012. color: "#fff", // x轴文字颜色
  2013. fontSize: '70'
  2014. },
  2015. },
  2016. },
  2017. },
  2018. ],
  2019. };
  2020. this.left11Chart.setOption(option)
  2021. },
  2022. initChartL1 () {
  2023. this.left9Chart = echarts.init(this.$refs['echartL1'])
  2024. option = {
  2025. series: [
  2026. {
  2027. type: "liquidFill",
  2028. radius: "80%",
  2029. data: [left2[0], left2[0] + 0.02, left2[0] - 0.02],
  2030. amplitude: '4%',
  2031. // period:'1500',
  2032. waveLength: '20%', //波浪长度
  2033. // data: [
  2034. // {}
  2035. // ],
  2036. backgroundStyle: {
  2037. color: {
  2038. type: "radial",
  2039. x: 0.5,
  2040. y: 0.5,
  2041. r: 0.5,
  2042. // 水球体颜色
  2043. colorStops: [
  2044. {
  2045. offset: 0,
  2046. color: "#010a11",
  2047. },
  2048. {
  2049. offset: 0.9,
  2050. // color: "#203852",
  2051. color: "#1a2f45",
  2052. },
  2053. {
  2054. offset: 1,
  2055. // color: "#354e6d",
  2056. color: "#2b405a",
  2057. // color: "#314967",
  2058. },
  2059. ],
  2060. globalCoord: false,
  2061. },
  2062. },
  2063. outline: {
  2064. borderDistance: 0,
  2065. itemStyle: {
  2066. borderWidth: 0,
  2067. borderColor: {
  2068. type: "linear",
  2069. x: 0,
  2070. y: 0,
  2071. x2: 0,
  2072. y2: 1,
  2073. colorStops: [
  2074. ],
  2075. globalCoord: false,
  2076. },
  2077. },
  2078. },
  2079. color: [
  2080. {
  2081. x: 0,
  2082. y: 0,
  2083. x2: 0,
  2084. y2: 1,
  2085. colorStops: [{
  2086. offset: 0,
  2087. color: '#237386',
  2088. },
  2089. {
  2090. offset: 1,
  2091. color: '#0078C8',
  2092. },],
  2093. },
  2094. {
  2095. x: 0,
  2096. y: 0,
  2097. x2: 0,
  2098. y2: 1,
  2099. colorStops: [{
  2100. offset: 0,
  2101. color: '#2F97A9',
  2102. },
  2103. {
  2104. offset: 1,
  2105. color: '#0078C8',
  2106. },],
  2107. },
  2108. {
  2109. x: 0,
  2110. y: 0,
  2111. x2: 0,
  2112. y2: 1,
  2113. colorStops: [{
  2114. offset: 0,
  2115. color: '#48E0ED',
  2116. },
  2117. {
  2118. offset: 1,
  2119. color: '#0078C8',
  2120. },],
  2121. }
  2122. ],
  2123. label: {
  2124. normal: {
  2125. textStyle: {
  2126. color: "#fff", // x轴文字颜色
  2127. },
  2128. },
  2129. },
  2130. },
  2131. ],
  2132. };
  2133. this.left9Chart.setOption(option)
  2134. },
  2135. initChartL2 () {
  2136. var chartData = left5
  2137. var timer = null;
  2138. var i = 0;
  2139. let that = this
  2140. var option = {
  2141. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  2142. chart: {
  2143. type: 'pie',
  2144. backgroundColor: 'rgba(0,0,0,0)',
  2145. options3d: {
  2146. enabled: true,
  2147. alpha: 45,
  2148. //beta: 0
  2149. },
  2150. events: {
  2151. // load,图表加载完成时触发
  2152. load: function () {
  2153. var chart = this;
  2154. var points = chart.series[0].points;
  2155. var len = points.length;
  2156. timer && clearInterval(timer);
  2157. timer = setInterval(function () {
  2158. autoTooltip(points[i]);
  2159. chartData.forEach((item, index) => {
  2160. item.sliced = false
  2161. item.selected = false
  2162. if (index == i) {
  2163. // item.sliced = true
  2164. // item.selected = true
  2165. }
  2166. })
  2167. that.left1Chart.update({
  2168. series: [{
  2169. type: 'pie',
  2170. name: '占比',
  2171. point: {
  2172. events: {
  2173. click: function (e) {
  2174. that.projectNum = 2142
  2175. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2176. }
  2177. }
  2178. },
  2179. data: chartData
  2180. }]
  2181. })
  2182. i++;
  2183. if (i === len) {
  2184. i = 0;
  2185. chartData.forEach((item, index) => {
  2186. // item.sliced = false
  2187. // item.selected = false
  2188. })
  2189. that.left1Chart.update({
  2190. series: [{
  2191. type: 'pie',
  2192. name: '占比',
  2193. point: {
  2194. events: {
  2195. click: function (e) {
  2196. that.projectNum = 2142
  2197. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2198. }
  2199. }
  2200. },
  2201. data: chartData
  2202. }]
  2203. })
  2204. }
  2205. }, 2000);
  2206. },
  2207. legendItemClick: function (event) {
  2208. return true;
  2209. }
  2210. }
  2211. },
  2212. credits: {
  2213. enabled: false //去掉hightchats水印
  2214. },
  2215. legend: {
  2216. // labelFormatter: function() {
  2217. // return 123;
  2218. // },
  2219. align: 'right',//横向位置
  2220. verticalAlign: 'middle', // 纵向位置
  2221. layout: "vertical",//横排还是竖排
  2222. x: -110,
  2223. y: 90,
  2224. symbolWidth: 50,
  2225. itemStyle: {
  2226. fontSize: '20px',
  2227. color: '#fff',
  2228. x: 20,
  2229. fontWeight: 0,
  2230. fontFamily: 'Microsoft YaHei'
  2231. },
  2232. },
  2233. title: {
  2234. text: '主辅业计划占比',
  2235. style: {
  2236. color: '#fff',
  2237. fontSize: 24,
  2238. fontFamily: 'Microsoft YaHei',
  2239. },
  2240. align: 'center',
  2241. verticalAlign: "bottom",
  2242. x: -120
  2243. },
  2244. tooltip: {
  2245. crosshairs: false,
  2246. backgroundColor: 'rgba(0,0,0,0.5)',
  2247. // positioner: function(e){
  2248. // console.log(e, this)
  2249. // },
  2250. // useHTML: false, //开启html模式
  2251. style: {
  2252. color: '#fff',
  2253. fontSize: '20',
  2254. fontWeight: 0,
  2255. fontFamily: 'Microsoft YaHei'
  2256. },
  2257. formatter: function (e) {
  2258. let num = chartData[this.colorIndex].num
  2259. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2260. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2261. },
  2262. //pointFormat:
  2263. },
  2264. plotOptions: {
  2265. pie: {
  2266. allowPointSelect: true,
  2267. showInLegend: true, // 图例
  2268. cursor: 'pointer',
  2269. size: 220,
  2270. innerSize: 150, //环形图中间空白,0为饼图
  2271. depth: 25, //立体高度
  2272. slicedOffset: 21, //动画距离
  2273. dataLabels: {
  2274. enabled: false, // 是否展示指示线
  2275. format: '{point.name}: {point.percentage}'
  2276. }
  2277. },
  2278. },
  2279. series: [{
  2280. type: 'pie',
  2281. name: '占比',
  2282. center: ['50%', '50%'],
  2283. point: {
  2284. events: {
  2285. click: function (e) { //点击事件
  2286. that.projectNum = 2142
  2287. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2288. },
  2289. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2290. chartData.forEach((item, index) => {
  2291. // item.sliced = false
  2292. // item.selected = false
  2293. })
  2294. // chartData[e.target.index].sliced = true
  2295. // chartData[e.target.index].selected = true
  2296. that.left1Chart.update({
  2297. series: [{
  2298. type: 'pie',
  2299. name: '占比',
  2300. point: {
  2301. events: {
  2302. click: function (e) {
  2303. that.projectNum = 2142
  2304. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2305. }
  2306. }
  2307. },
  2308. data: chartData
  2309. }]
  2310. })
  2311. timer && clearInterval(timer);
  2312. },
  2313. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2314. var points = that.left1Chart.series[0].points;
  2315. var len = points.length;
  2316. timer && clearInterval(timer);
  2317. timer = setInterval(function () {
  2318. autoTooltip(points[i]);
  2319. chartData.forEach((item, index) => {
  2320. // item.sliced = false
  2321. // item.selected = false
  2322. if (index == i) {
  2323. // item.sliced = true
  2324. // item.selected = true
  2325. }
  2326. })
  2327. that.left1Chart.update({
  2328. series: [{
  2329. type: 'pie',
  2330. name: '占比',
  2331. point: {
  2332. events: {
  2333. click: function (e) {
  2334. that.projectNum = 2142
  2335. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2336. }
  2337. }
  2338. },
  2339. data: chartData
  2340. }]
  2341. })
  2342. i++;
  2343. if (i === len) {
  2344. i = 0;
  2345. chartData.forEach((item, index) => {
  2346. item.sliced = false
  2347. item.selected = false
  2348. })
  2349. that.left1Chart.update({
  2350. series: [{
  2351. type: 'pie',
  2352. name: '占比',
  2353. point: {
  2354. events: {
  2355. click: function (e) {
  2356. that.projectNum = 2142
  2357. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2358. }
  2359. }
  2360. },
  2361. data: chartData
  2362. }]
  2363. })
  2364. }
  2365. }, 2000);
  2366. }
  2367. }
  2368. },
  2369. data: chartData
  2370. }]
  2371. }
  2372. that.left1Chart = Highcharts.chart('echartL2', option);
  2373. function autoTooltip (point) {
  2374. that.left1Chart.tooltip.refresh(point);
  2375. }
  2376. },
  2377. initChartL3 () {
  2378. var chartData = left6
  2379. var timer = null;
  2380. var i = 0;
  2381. let that = this
  2382. that.left2Chart = Highcharts.chart('echartL3', {
  2383. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  2384. chart: {
  2385. type: 'pie',
  2386. backgroundColor: 'rgba(0,0,0,0)',
  2387. options3d: {
  2388. enabled: true,
  2389. alpha: 45,
  2390. //beta: 0
  2391. },
  2392. events: {
  2393. // load,图表加载完成时触发
  2394. load: function () {
  2395. var chart = this;
  2396. var points = chart.series[0].points;
  2397. var len = points.length;
  2398. timer && clearInterval(timer);
  2399. timer = setInterval(function () {
  2400. autoTooltip(points[i]);
  2401. chartData.forEach((item, index) => {
  2402. item.sliced = false
  2403. item.selected = false
  2404. if (index == i) {
  2405. // item.sliced = true
  2406. // item.selected = true
  2407. }
  2408. })
  2409. that.left2Chart.update({
  2410. series: [{
  2411. type: 'pie',
  2412. name: '占比',
  2413. point: {
  2414. events: {
  2415. click: function (e) {
  2416. that.projectNum = 2143
  2417. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2418. }
  2419. }
  2420. },
  2421. data: chartData
  2422. }]
  2423. })
  2424. i++;
  2425. if (i === len) {
  2426. i = 0;
  2427. chartData.forEach((item, index) => {
  2428. // item.sliced = false
  2429. // item.selected = false
  2430. })
  2431. that.left2Chart.update({
  2432. series: [{
  2433. type: 'pie',
  2434. name: '占比',
  2435. point: {
  2436. events: {
  2437. click: function (e) {
  2438. that.projectNum = 2143
  2439. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2440. }
  2441. }
  2442. },
  2443. data: chartData
  2444. }]
  2445. })
  2446. }
  2447. }, 2000);
  2448. },
  2449. legendItemClick: function (event) {
  2450. that.projectNum = 2143
  2451. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2452. return true;
  2453. }
  2454. }
  2455. },
  2456. credits: {
  2457. enabled: false //去掉hightchats水印
  2458. },
  2459. legend: {
  2460. // labelFormatter: function() {
  2461. // return 123;
  2462. // },
  2463. align: 'right',//横向位置
  2464. verticalAlign: 'middle', // 纵向位置
  2465. layout: "vertical",//横排还是竖排
  2466. x: -70,
  2467. y: 90,
  2468. symbolWidth: 50,
  2469. itemStyle: {
  2470. fontSize: '20px',
  2471. color: '#fff',
  2472. x: 20,
  2473. fontWeight: 0,
  2474. fontFamily: 'Microsoft YaHei'
  2475. },
  2476. },
  2477. title: {
  2478. text: '项目管理类型',
  2479. style: {
  2480. color: '#fff',
  2481. fontSize: 24,
  2482. fontFamily: 'Microsoft YaHei'
  2483. },
  2484. align: 'center',
  2485. verticalAlign: "bottom",
  2486. x: -120
  2487. },
  2488. tooltip: {
  2489. crosshairs: true,
  2490. backgroundColor: 'rgba(0,0,0,0.5)',
  2491. // positioner: function(e){
  2492. // console.log(e, this)
  2493. // },
  2494. useHTML: false, //开启html模式
  2495. style: {
  2496. color: '#fff',
  2497. fontSize: '20',
  2498. fontFamily: 'Microsoft YaHei'
  2499. },
  2500. formatter: function (e) {
  2501. //console.log(this)
  2502. let num = chartData[this.colorIndex].num
  2503. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2504. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2505. },
  2506. //pointFormat:
  2507. },
  2508. plotOptions: {
  2509. pie: {
  2510. allowPointSelect: true,
  2511. showInLegend: true, // 图例
  2512. cursor: 'pointer',
  2513. size: 220,
  2514. innerSize: 150, //环形图中间空白,0为饼图
  2515. depth: 25, //立体高度
  2516. slicedOffset: 21, //动画距离
  2517. dataLabels: {
  2518. enabled: false, // 是否展示指示线
  2519. format: '{point.name}: {point.percentage}'
  2520. }
  2521. },
  2522. },
  2523. series: [{
  2524. type: 'pie',
  2525. name: '占比',
  2526. // center: ['70%', '50%'],
  2527. point: {
  2528. events: {
  2529. click: function (e) { //点击事件
  2530. that.projectNum = 2143
  2531. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2532. },
  2533. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2534. //console.log(e)
  2535. chartData.forEach((item, index) => {
  2536. item.sliced = false
  2537. item.selected = false
  2538. })
  2539. // chartData[e.target.index].sliced = true
  2540. // chartData[e.target.index].selected = true
  2541. that.left2Chart.update({
  2542. series: [{
  2543. type: 'pie',
  2544. name: '占比',
  2545. point: {
  2546. events: {
  2547. click: function (e) {
  2548. that.projectNum = 2143
  2549. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2550. }
  2551. }
  2552. },
  2553. data: chartData
  2554. }]
  2555. })
  2556. timer && clearInterval(timer);
  2557. },
  2558. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2559. var points = that.left2Chart.series[0].points;
  2560. var len = points.length;
  2561. timer && clearInterval(timer);
  2562. timer = setInterval(function () {
  2563. autoTooltip(points[i]);
  2564. chartData.forEach((item, index) => {
  2565. item.sliced = false
  2566. item.selected = false
  2567. if (index == i) {
  2568. // item.sliced = true
  2569. // item.selected = true
  2570. }
  2571. })
  2572. that.left2Chart.update({
  2573. series: [{
  2574. type: 'pie',
  2575. name: '占比',
  2576. point: {
  2577. events: {
  2578. click: function (e) {
  2579. that.projectNum = 2143
  2580. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2581. }
  2582. }
  2583. },
  2584. data: chartData
  2585. }]
  2586. })
  2587. i++;
  2588. if (i === len) {
  2589. i = 0;
  2590. chartData.forEach((item, index) => {
  2591. item.sliced = false
  2592. item.selected = false
  2593. })
  2594. that.left2Chart.update({
  2595. series: [{
  2596. type: 'pie',
  2597. name: '占比',
  2598. point: {
  2599. events: {
  2600. click: function (e) {
  2601. console.log(e)
  2602. }
  2603. }
  2604. },
  2605. data: chartData
  2606. }]
  2607. })
  2608. }
  2609. }, 2000);
  2610. }
  2611. }
  2612. },
  2613. data: chartData
  2614. }]
  2615. });
  2616. function autoTooltip (point) {
  2617. that.left2Chart.tooltip.refresh(point);
  2618. }
  2619. },
  2620. initChartL4 (dataList) {
  2621. this.left10Chart = echarts.init(document.getElementById("echartL4"));
  2622. let option = {
  2623. grid: {
  2624. top: 45,
  2625. right: 0,
  2626. left: 60,
  2627. bottom: 80,
  2628. },
  2629. tooltip: {
  2630. show: true,
  2631. trigger: "axis",
  2632. formatter: data => {
  2633. return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value + data[0].value}亿`
  2634. },
  2635. axisPointer: {
  2636. // 坐标轴指示器,坐标轴触发有效
  2637. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  2638. },
  2639. textStyle: {
  2640. color: '#FFF', // 文字的颜色
  2641. fontSize: '20', // 文字字体大小
  2642. fontFamily: 'Microsoft YaHei'
  2643. },
  2644. },
  2645. xAxis: {
  2646. data: commonCompany,
  2647. axisTick: {
  2648. show: false,
  2649. },
  2650. // x轴的字体颜色
  2651. axisLabel: {
  2652. rotate: 40,
  2653. textStyle: {
  2654. color: "white",
  2655. fontSize: '20',
  2656. fontFamily: 'Microsoft YaHei'
  2657. },
  2658. },
  2659. //y轴线的颜色以及宽度
  2660. axisLine: {
  2661. show: true,
  2662. lineStyle: {
  2663. color: "#1E5389",
  2664. width: 1,
  2665. type: "solid",
  2666. },
  2667. },
  2668. },
  2669. yAxis: {
  2670. name: '亿',
  2671. axisTick: {
  2672. lineStyle: {
  2673. color: "#18416F",
  2674. },
  2675. },
  2676. // y轴的字体颜色
  2677. axisLabel: {
  2678. textStyle: {
  2679. color: "white",
  2680. fontSize: '20',
  2681. fontFamily: 'Microsoft YaHei'
  2682. },
  2683. },
  2684. splitLine: {
  2685. show: true,
  2686. lineStyle: {
  2687. color: "#68b4dd66",
  2688. width: 1,
  2689. type: "dashed",
  2690. },
  2691. },
  2692. //y轴线的颜色以及宽度
  2693. axisLine: {
  2694. show: true,
  2695. lineStyle: {
  2696. color: "#1E5389",
  2697. width: 1,
  2698. type: "solid",
  2699. },
  2700. },
  2701. nameTextStyle: {
  2702. color: '#fff',
  2703. fontSize: 20,
  2704. fontFamily: 'Microsoft YaHei'
  2705. },
  2706. },
  2707. series: [
  2708. {
  2709. name: "已用额度",
  2710. type: "bar",
  2711. data: left3[0],
  2712. stack: 'Ad',
  2713. showBackground: false,
  2714. backgroundStyle: {
  2715. color: "#18416F",
  2716. },
  2717. barWidth: "20",
  2718. itemStyle: {
  2719. // barBorderRadius: [10, 10, 0, 0],
  2720. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  2721. {
  2722. offset: 0,
  2723. color: '#082550',
  2724. },
  2725. {
  2726. offset: 1,
  2727. color: '#3986F8',
  2728. },
  2729. ]),
  2730. },
  2731. },
  2732. {
  2733. name: "总额度",
  2734. type: "bar",
  2735. data: left3[1],
  2736. stack: 'Ad',
  2737. showBackground: false,
  2738. backgroundStyle: {
  2739. color: "#18416F",
  2740. },
  2741. barWidth: "20",
  2742. itemStyle: {
  2743. // barBorderRadius: [10, 10, 0, 0],
  2744. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  2745. {
  2746. offset: 0,
  2747. color: '#b9b7c060',
  2748. },
  2749. {
  2750. offset: 1,
  2751. color: '#b9b7c060',
  2752. },
  2753. ]),
  2754. },
  2755. },
  2756. ],
  2757. legend: {
  2758. // data: ["2022年额度", "2023年额度"],
  2759. data: ["2023年额度"],
  2760. textStyle: {
  2761. // 图列内容样式
  2762. color: "#fff", // 字体颜色
  2763. fontSize: "20",
  2764. fontFamily: 'Microsoft YaHei'
  2765. },
  2766. right: 'center',
  2767. y: 5,
  2768. // icon: "roundRect",
  2769. // 小图标的宽高
  2770. },
  2771. };
  2772. let that = this
  2773. tools.loopShowTooltip(that.left10Chart, option, {
  2774. nterval: 2000,
  2775. loopSeries: true,
  2776. })
  2777. that.left10Chart.on('click', function (param) {
  2778. that.titleName = param.name
  2779. that.echartEnterpriseShow = true
  2780. // 如果是接口版数据版
  2781. if (that.versions) {
  2782. let findData = dataList.find(item => {
  2783. return item.mdnb_textfield == param.name
  2784. })
  2785. common1[0] = findData.mdnb_amountfield18
  2786. common1[1] = findData.mdnb_amountfield20
  2787. common1[2] = findData.mdnb_amountfield19
  2788. common1[3] = findData.mdnb_amountfield26
  2789. common1[4] = findData.mdnb_amountfield27
  2790. common1[5] = findData.mdnb_amountfield25
  2791. common2[0] = findData.mdnb_decimalfield6
  2792. }
  2793. setTimeout(() => {
  2794. that.initChartBall()
  2795. });
  2796. })
  2797. that.left10Chart.setOption(option);
  2798. },
  2799. initChartL5 () {
  2800. var chartData = left7
  2801. var timer = null;
  2802. var i = 0;
  2803. let that = this
  2804. var option = {
  2805. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  2806. chart: {
  2807. type: 'pie',
  2808. backgroundColor: 'rgba(0,0,0,0)',
  2809. options3d: {
  2810. enabled: true,
  2811. alpha: 45,
  2812. //beta: 0
  2813. },
  2814. events: {
  2815. // load,图表加载完成时触发
  2816. load: function () {
  2817. var chart = this;
  2818. var points = chart.series[0].points;
  2819. var len = points.length;
  2820. timer && clearInterval(timer);
  2821. timer = setInterval(function () {
  2822. autoTooltip(points[i]);
  2823. chartData.forEach((item, index) => {
  2824. item.sliced = false
  2825. item.selected = false
  2826. if (index == i) {
  2827. item.sliced = true
  2828. item.selected = true
  2829. }
  2830. })
  2831. that.left3Chart.update({
  2832. series: [{
  2833. type: 'pie',
  2834. name: '占比',
  2835. point: {
  2836. events: {
  2837. click: function (e) {
  2838. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215)
  2839. // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '')
  2840. }
  2841. }
  2842. },
  2843. data: chartData
  2844. }]
  2845. })
  2846. i++;
  2847. if (i === len) {
  2848. i = 0;
  2849. }
  2850. }, 2000);
  2851. },
  2852. legendItemClick: function (event) {
  2853. console.log(event);
  2854. return true;
  2855. }
  2856. }
  2857. },
  2858. credits: {
  2859. enabled: false //去掉hightchats水印
  2860. },
  2861. legend: {
  2862. // labelFormatter: function() {
  2863. // return 123;
  2864. // },
  2865. align: 'right',//横向位置
  2866. verticalAlign: 'middle', // 纵向位置
  2867. layout: "vertical",//横排还是竖排
  2868. x: -110,
  2869. y: 50,
  2870. symbolWidth: 50,
  2871. itemDistance: 50,
  2872. itemStyle: {
  2873. fontSize: '20px',
  2874. color: '#fff',
  2875. x: 20,
  2876. fontWeight: 0,
  2877. fontFamily: 'Microsoft YaHei'
  2878. },
  2879. },
  2880. title: {
  2881. text: '传统产业分析',
  2882. style: {
  2883. color: '#fff',
  2884. fontSize: 24,
  2885. fontFamily: 'Microsoft YaHei'
  2886. },
  2887. align: 'center',
  2888. verticalAlign: "bottom",
  2889. x: -120
  2890. },
  2891. tooltip: {
  2892. crosshairs: true,
  2893. backgroundColor: 'rgba(0,0,0,0.5)',
  2894. // positioner: function(e){
  2895. // console.log(e, this)
  2896. // },
  2897. useHTML: false, //开启html模式
  2898. style: {
  2899. color: '#fff',
  2900. fontSize: '20',
  2901. fontFamily: 'Microsoft YaHei'
  2902. },
  2903. formatter: function (e) {
  2904. //console.log(this)
  2905. let num = chartData[this.colorIndex].num
  2906. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2907. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2908. },
  2909. //pointFormat:
  2910. },
  2911. plotOptions: {
  2912. pie: {
  2913. allowPointSelect: true,
  2914. showInLegend: true, // 图例
  2915. cursor: 'pointer',
  2916. size: 220,
  2917. innerSize: 150, //环形图中间空白,0为饼图
  2918. depth: 25, //立体高度
  2919. slicedOffset: 21, //动画距离
  2920. dataLabels: {
  2921. enabled: false, // 是否展示指示线
  2922. format: '{point.name}: {point.percentage}'
  2923. }
  2924. },
  2925. },
  2926. series: [{
  2927. type: 'pie',
  2928. name: '占比',
  2929. //center: ['35%','50%'],
  2930. point: {
  2931. events: {
  2932. click: function (e) { //点击事件
  2933. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215)
  2934. // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '')
  2935. },
  2936. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2937. //console.log(e)
  2938. chartData.forEach((item, index) => {
  2939. item.sliced = false
  2940. item.selected = false
  2941. })
  2942. chartData[e.target.index].sliced = true
  2943. chartData[e.target.index].selected = true
  2944. that.left3Chart.update({
  2945. series: [{
  2946. type: 'pie',
  2947. name: '占比',
  2948. point: {
  2949. events: {
  2950. click: function (e) {
  2951. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215)
  2952. // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '')
  2953. }
  2954. }
  2955. },
  2956. data: chartData
  2957. }]
  2958. })
  2959. timer && clearInterval(timer);
  2960. },
  2961. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2962. var points = that.left3Chart.series[0].points;
  2963. var len = points.length;
  2964. timer && clearInterval(timer);
  2965. timer = setInterval(function () {
  2966. autoTooltip(points[i]);
  2967. chartData.forEach((item, index) => {
  2968. item.sliced = false
  2969. item.selected = false
  2970. if (index == i) {
  2971. item.sliced = true
  2972. item.selected = true
  2973. }
  2974. })
  2975. that.left3Chart.update({
  2976. series: [{
  2977. type: 'pie',
  2978. name: '占比',
  2979. point: {
  2980. events: {
  2981. click: function (e) {
  2982. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215)
  2983. // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '')
  2984. }
  2985. }
  2986. },
  2987. data: chartData
  2988. }]
  2989. })
  2990. i++;
  2991. if (i === len) {
  2992. i = 0;
  2993. }
  2994. }, 2000);
  2995. }
  2996. }
  2997. },
  2998. data: chartData
  2999. }]
  3000. }
  3001. that.left3Chart = Highcharts.chart('echartL5', option);
  3002. function autoTooltip (point) {
  3003. that.left3Chart.tooltip.refresh(point);
  3004. }
  3005. },
  3006. initChartL6 () {
  3007. var chartData = left8
  3008. var timer = null;
  3009. var i = 0;
  3010. let that = this
  3011. var option = {
  3012. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  3013. chart: {
  3014. type: 'pie',
  3015. backgroundColor: 'rgba(0,0,0,0)',
  3016. options3d: {
  3017. enabled: true,
  3018. alpha: 45,
  3019. //beta: 0
  3020. },
  3021. events: {
  3022. // load,图表加载完成时触发
  3023. load: function () {
  3024. var chart = this;
  3025. var points = chart.series[0].points;
  3026. var len = points.length;
  3027. timer && clearInterval(timer);
  3028. timer = setInterval(function () {
  3029. autoTooltip(points[i]);
  3030. chartData.forEach((item, index) => {
  3031. item.sliced = false
  3032. item.selected = false
  3033. if (index == i) {
  3034. item.sliced = true
  3035. item.selected = true
  3036. }
  3037. })
  3038. that.left4Chart.update({
  3039. series: [{
  3040. type: 'pie',
  3041. name: '占比',
  3042. point: {
  3043. events: {
  3044. click: function (e) {
  3045. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215)
  3046. }
  3047. }
  3048. },
  3049. data: chartData
  3050. }]
  3051. })
  3052. i++;
  3053. if (i === len) {
  3054. i = 0;
  3055. }
  3056. }, 2000);
  3057. },
  3058. legendItemClick: function (event) {
  3059. console.log(event);
  3060. return true;
  3061. }
  3062. }
  3063. },
  3064. credits: {
  3065. enabled: false //去掉hightchats水印
  3066. },
  3067. legend: {
  3068. // labelFormatter: function() {
  3069. // return 123;
  3070. // },
  3071. align: 'right',//横向位置
  3072. verticalAlign: 'middle', // 纵向位置
  3073. layout: "vertical",//横排还是竖排
  3074. x: -30,
  3075. y: 30,
  3076. symbolWidth: 50,
  3077. itemDistance: 50,
  3078. itemStyle: {
  3079. fontSize: '20px',
  3080. color: '#fff',
  3081. x: 20,
  3082. fontWeight: 0,
  3083. fontFamily: 'Microsoft YaHei'
  3084. },
  3085. },
  3086. title: {
  3087. text: '战略性新兴产业',
  3088. style: {
  3089. color: '#fff',
  3090. fontSize: 24,
  3091. fontFamily: 'Microsoft YaHei'
  3092. },
  3093. align: 'center',
  3094. verticalAlign: "bottom",
  3095. x: -120
  3096. },
  3097. tooltip: {
  3098. crosshairs: true,
  3099. backgroundColor: 'rgba(0,0,0,0.5)',
  3100. // positioner: function(e){
  3101. // console.log(e, this)
  3102. // },
  3103. useHTML: false, //开启html模式
  3104. style: {
  3105. color: '#fff',
  3106. fontSize: '20',
  3107. fontFamily: 'Microsoft YaHei'
  3108. },
  3109. formatter: function (e) {
  3110. //console.log(this)
  3111. let num = chartData[this.colorIndex].num
  3112. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3113. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3114. },
  3115. //pointFormat:
  3116. },
  3117. plotOptions: {
  3118. pie: {
  3119. allowPointSelect: true,
  3120. showInLegend: true, // 图例
  3121. cursor: 'pointer',
  3122. size: 220,
  3123. innerSize: 150, //环形图中间空白,0为饼图
  3124. depth: 25, //立体高度
  3125. slicedOffset: 21, //动画距离
  3126. dataLabels: {
  3127. enabled: false, // 是否展示指示线
  3128. format: '{point.name}: {point.percentage}'
  3129. }
  3130. },
  3131. },
  3132. series: [{
  3133. type: 'pie',
  3134. name: '占比',
  3135. //center: ['35%','50%'],
  3136. point: {
  3137. events: {
  3138. click: function (e) { //点击事件
  3139. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215)
  3140. },
  3141. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3142. //console.log(e)
  3143. chartData.forEach((item, index) => {
  3144. item.sliced = false
  3145. item.selected = false
  3146. })
  3147. chartData[e.target.index].sliced = true
  3148. chartData[e.target.index].selected = true
  3149. that.left4Chart.update({
  3150. series: [{
  3151. type: 'pie',
  3152. name: '占比',
  3153. point: {
  3154. events: {
  3155. click: function (e) {
  3156. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215)
  3157. }
  3158. }
  3159. },
  3160. data: chartData
  3161. }]
  3162. })
  3163. timer && clearInterval(timer);
  3164. },
  3165. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3166. var points = that.left4Chart.series[0].points;
  3167. var len = points.length;
  3168. timer && clearInterval(timer);
  3169. timer = setInterval(function () {
  3170. autoTooltip(points[i]);
  3171. chartData.forEach((item, index) => {
  3172. item.sliced = false
  3173. item.selected = false
  3174. if (index == i) {
  3175. item.sliced = true
  3176. item.selected = true
  3177. }
  3178. })
  3179. that.left4Chart.update({
  3180. series: [{
  3181. type: 'pie',
  3182. name: '占比',
  3183. point: {
  3184. events: {
  3185. click: function (e) {
  3186. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215)
  3187. }
  3188. }
  3189. },
  3190. data: chartData
  3191. }]
  3192. })
  3193. i++;
  3194. if (i === len) {
  3195. i = 0;
  3196. }
  3197. }, 2000);
  3198. }
  3199. }
  3200. },
  3201. data: chartData
  3202. }]
  3203. }
  3204. that.left4Chart = Highcharts.chart('echartL6', option);
  3205. function autoTooltip (point) {
  3206. that.left4Chart.tooltip.refresh(point);
  3207. }
  3208. },
  3209. initChartL7 () {
  3210. var chartData = left9
  3211. var timer = null;
  3212. var i = 0;
  3213. let that = this
  3214. var option = {
  3215. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  3216. chart: {
  3217. type: 'pie',
  3218. backgroundColor: 'rgba(0,0,0,0)',
  3219. options3d: {
  3220. enabled: true,
  3221. alpha: 45,
  3222. //beta: 0
  3223. },
  3224. events: {
  3225. // load,图表加载完成时触发
  3226. load: function () {
  3227. var chart = this;
  3228. var points = chart.series[0].points;
  3229. var len = points.length;
  3230. timer && clearInterval(timer);
  3231. timer = setInterval(function () {
  3232. autoTooltip(points[i]);
  3233. chartData.forEach((item, index) => {
  3234. item.sliced = false
  3235. item.selected = false
  3236. if (index == i) {
  3237. item.sliced = true
  3238. item.selected = true
  3239. }
  3240. })
  3241. that.left5Chart.update({
  3242. series: [{
  3243. type: 'pie',
  3244. name: '占比',
  3245. point: {
  3246. events: {
  3247. click: function (e) {
  3248. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215)
  3249. }
  3250. }
  3251. },
  3252. data: chartData
  3253. }]
  3254. })
  3255. i++;
  3256. if (i === len) {
  3257. i = 0;
  3258. }
  3259. }, 2000);
  3260. },
  3261. legendItemClick: function (event) {
  3262. console.log(event);
  3263. return true;
  3264. }
  3265. }
  3266. },
  3267. credits: {
  3268. enabled: false //去掉hightchats水印
  3269. },
  3270. title: {
  3271. text: '特色优势产业',
  3272. style: {
  3273. color: '#fff',
  3274. fontSize: 24,
  3275. fontFamily: 'Microsoft YaHei'
  3276. },
  3277. align: 'center',
  3278. verticalAlign: "bottom",
  3279. x: -120
  3280. },
  3281. legend: {
  3282. // labelFormatter: function() {
  3283. // return 123;
  3284. // },
  3285. align: 'right',//横向位置
  3286. verticalAlign: 'middle', // 纵向位置
  3287. layout: "vertical",//横排还是竖排
  3288. x: -50,
  3289. y: 30,
  3290. symbolWidth: 50,
  3291. itemDistance: 50,
  3292. itemStyle: {
  3293. fontSize: '20px',
  3294. color: '#fff',
  3295. x: 20,
  3296. fontWeight: 0,
  3297. fontFamily: 'Microsoft YaHei'
  3298. },
  3299. },
  3300. tooltip: {
  3301. crosshairs: true,
  3302. backgroundColor: 'rgba(0,0,0,0.5)',
  3303. // positioner: function(e){
  3304. // console.log(e, this)
  3305. // },
  3306. useHTML: false, //开启html模式
  3307. style: {
  3308. color: '#fff',
  3309. fontSize: '20',
  3310. fontFamily: 'Microsoft YaHei'
  3311. },
  3312. formatter: function (e) {
  3313. //console.log(this)
  3314. let num = chartData[this.colorIndex].num
  3315. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3316. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3317. },
  3318. //pointFormat:
  3319. },
  3320. plotOptions: {
  3321. pie: {
  3322. allowPointSelect: true,
  3323. showInLegend: true, // 图例
  3324. cursor: 'pointer',
  3325. size: 220,
  3326. innerSize: 150, //环形图中间空白,0为饼图
  3327. depth: 25, //立体高度
  3328. slicedOffset: 21, //动画距离
  3329. dataLabels: {
  3330. enabled: false, // 是否展示指示线
  3331. format: '{point.name}: {point.percentage}'
  3332. }
  3333. },
  3334. },
  3335. series: [{
  3336. type: 'pie',
  3337. name: '占比',
  3338. //center: ['35%','50%'],
  3339. point: {
  3340. events: {
  3341. click: function (e) { //点击事件
  3342. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215)
  3343. },
  3344. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3345. //console.log(e)
  3346. chartData.forEach((item, index) => {
  3347. item.sliced = false
  3348. item.selected = false
  3349. })
  3350. chartData[e.target.index].sliced = true
  3351. chartData[e.target.index].selected = true
  3352. that.left5Chart.update({
  3353. series: [{
  3354. type: 'pie',
  3355. name: '占比',
  3356. point: {
  3357. events: {
  3358. click: function (e) {
  3359. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215)
  3360. }
  3361. }
  3362. },
  3363. data: chartData
  3364. }]
  3365. })
  3366. timer && clearInterval(timer);
  3367. },
  3368. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3369. var points = that.left5Chart.series[0].points;
  3370. var len = points.length;
  3371. timer && clearInterval(timer);
  3372. timer = setInterval(function () {
  3373. autoTooltip(points[i]);
  3374. chartData.forEach((item, index) => {
  3375. item.sliced = false
  3376. item.selected = false
  3377. if (index == i) {
  3378. item.sliced = true
  3379. item.selected = true
  3380. }
  3381. })
  3382. that.left5Chart.update({
  3383. series: [{
  3384. type: 'pie',
  3385. name: '占比',
  3386. point: {
  3387. events: {
  3388. click: function (e) {
  3389. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215)
  3390. }
  3391. }
  3392. },
  3393. data: chartData
  3394. }]
  3395. })
  3396. i++;
  3397. if (i === len) {
  3398. i = 0;
  3399. }
  3400. }, 2000);
  3401. }
  3402. }
  3403. },
  3404. data: chartData
  3405. }]
  3406. }
  3407. that.left5Chart = Highcharts.chart('echartL7', option);
  3408. function autoTooltip (point) {
  3409. that.left5Chart.tooltip.refresh(point);
  3410. }
  3411. },
  3412. initChartL8 () {
  3413. var chartData = left10
  3414. var timer = null;
  3415. var i = 0;
  3416. let that = this
  3417. var option = {
  3418. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  3419. chart: {
  3420. type: 'pie',
  3421. backgroundColor: 'rgba(0,0,0,0)',
  3422. options3d: {
  3423. enabled: true,
  3424. alpha: 45,
  3425. //beta: 0
  3426. },
  3427. events: {
  3428. // load,图表加载完成时触发
  3429. load: function () {
  3430. var chart = this;
  3431. var points = chart.series[0].points;
  3432. var len = points.length;
  3433. timer && clearInterval(timer);
  3434. timer = setInterval(function () {
  3435. autoTooltip(points[i]);
  3436. chartData.forEach((item, index) => {
  3437. item.sliced = false
  3438. item.selected = false
  3439. if (index == i) {
  3440. item.sliced = true
  3441. item.selected = true
  3442. }
  3443. })
  3444. that.left6Chart.update({
  3445. series: [{
  3446. type: 'pie',
  3447. name: '占比',
  3448. point: {
  3449. events: {
  3450. click: function (e) {
  3451. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215)
  3452. }
  3453. }
  3454. },
  3455. data: chartData
  3456. }]
  3457. })
  3458. i++;
  3459. if (i === len) {
  3460. i = 0;
  3461. }
  3462. }, 2000);
  3463. },
  3464. legendItemClick: function (event) {
  3465. console.log(event);
  3466. return true;
  3467. }
  3468. }
  3469. },
  3470. credits: {
  3471. enabled: false //去掉hightchats水印
  3472. },
  3473. title: {
  3474. text: '公共基础等产业',
  3475. style: {
  3476. color: '#fff',
  3477. fontSize: 24,
  3478. fontFamily: 'Microsoft YaHei'
  3479. },
  3480. align: 'center',
  3481. verticalAlign: "bottom",
  3482. x: -120
  3483. },
  3484. legend: {
  3485. // labelFormatter: function() {
  3486. // return 123;
  3487. // },
  3488. align: 'right',//横向位置
  3489. verticalAlign: 'middle', // 纵向位置
  3490. layout: "vertical",//横排还是竖排
  3491. x: -70,
  3492. y: 50,
  3493. symbolWidth: 50,
  3494. itemDistance: 50,
  3495. itemStyle: {
  3496. fontSize: '20px',
  3497. color: '#fff',
  3498. x: 20,
  3499. fontWeight: 0,
  3500. fontFamily: 'Microsoft YaHei'
  3501. },
  3502. },
  3503. tooltip: {
  3504. crosshairs: true,
  3505. backgroundColor: 'rgba(0,0,0,0.5)',
  3506. // positioner: function(e){
  3507. // console.log(e, this)
  3508. // },
  3509. useHTML: false, //开启html模式
  3510. style: {
  3511. color: '#fff',
  3512. fontSize: '20',
  3513. fontFamily: 'Microsoft YaHei'
  3514. },
  3515. formatter: function (e) {
  3516. //console.log(this)
  3517. let num = chartData[this.colorIndex].num
  3518. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3519. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3520. },
  3521. //pointFormat:
  3522. },
  3523. plotOptions: {
  3524. pie: {
  3525. allowPointSelect: true,
  3526. showInLegend: true, // 图例
  3527. cursor: 'pointer',
  3528. size: 220,
  3529. innerSize: 150, //环形图中间空白,0为饼图
  3530. depth: 25, //立体高度
  3531. slicedOffset: 21, //动画距离
  3532. dataLabels: {
  3533. enabled: false, // 是否展示指示线
  3534. format: '{point.name}: {point.percentage}'
  3535. }
  3536. },
  3537. },
  3538. series: [{
  3539. type: 'pie',
  3540. name: '占比',
  3541. //center: ['35%','50%'],
  3542. point: {
  3543. events: {
  3544. click: function (e) { //点击事件
  3545. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215)
  3546. },
  3547. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3548. //console.log(e)
  3549. chartData.forEach((item, index) => {
  3550. item.sliced = false
  3551. item.selected = false
  3552. })
  3553. chartData[e.target.index].sliced = true
  3554. chartData[e.target.index].selected = true
  3555. that.left6Chart.update({
  3556. series: [{
  3557. type: 'pie',
  3558. name: '占比',
  3559. point: {
  3560. events: {
  3561. click: function (e) {
  3562. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215)
  3563. }
  3564. }
  3565. },
  3566. data: chartData
  3567. }]
  3568. })
  3569. timer && clearInterval(timer);
  3570. },
  3571. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3572. var points = that.left6Chart.series[0].points;
  3573. var len = points.length;
  3574. timer && clearInterval(timer);
  3575. timer = setInterval(function () {
  3576. autoTooltip(points[i]);
  3577. chartData.forEach((item, index) => {
  3578. item.sliced = false
  3579. item.selected = false
  3580. if (index == i) {
  3581. item.sliced = true
  3582. item.selected = true
  3583. }
  3584. })
  3585. that.left6Chart.update({
  3586. series: [{
  3587. type: 'pie',
  3588. name: '占比',
  3589. point: {
  3590. events: {
  3591. click: function (e) {
  3592. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215)
  3593. }
  3594. }
  3595. },
  3596. data: chartData
  3597. }]
  3598. })
  3599. i++;
  3600. if (i === len) {
  3601. i = 0;
  3602. }
  3603. }, 2000);
  3604. }
  3605. }
  3606. },
  3607. data: chartData
  3608. }]
  3609. }
  3610. that.left6Chart = Highcharts.chart('echartL8', option);
  3611. function autoTooltip (point) {
  3612. that.left6Chart.tooltip.refresh(point);
  3613. }
  3614. },
  3615. initChartL9 () {
  3616. this.chartCarousel = echarts.init(document.getElementById("echartL9"));
  3617. option = {
  3618. tooltip: {
  3619. trigger: 'axis',
  3620. formatter: '指标:' + '{c0}' + '<br/>' + '发展线:' + '{c1}' + '<br/>' + '生存线:' + '{c2}', //+ '<br/>'+ '{a1}:{c1}' + '%',
  3621. axisPointer: {
  3622. type: 'shadow',
  3623. },
  3624. },
  3625. grid: {
  3626. top: '10%',
  3627. right: '5%',
  3628. left: '12%',
  3629. bottom: '15%',
  3630. },
  3631. xAxis: {
  3632. // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
  3633. data: left15[this.countType],
  3634. axisLine: {
  3635. show: true, //隐藏X轴轴线
  3636. lineStyle: {
  3637. color: '#005094',
  3638. width: 1,
  3639. },
  3640. },
  3641. axisTick: {
  3642. show: true, //隐藏X轴刻度
  3643. },
  3644. axisLabel: {
  3645. show: true,
  3646. rotate: 30,
  3647. textStyle: {
  3648. color: '#fff', //X轴文字颜色
  3649. fontSize: 20,
  3650. fontFamily: 'Microsoft YaHei'
  3651. },
  3652. },
  3653. },
  3654. yAxis: [
  3655. {
  3656. type: 'value',
  3657. splitLine: {
  3658. show: true,
  3659. lineStyle: {
  3660. color: '#68b4dd66',
  3661. type: 'dashed',
  3662. },
  3663. },
  3664. axisLine: {
  3665. show: false
  3666. },
  3667. axisLabel: {
  3668. show: true,
  3669. formatter: '{value}%',
  3670. textStyle: {
  3671. color: '#fff',
  3672. fontSize: 20,
  3673. fontFamily: 'Microsoft YaHei'
  3674. },
  3675. },
  3676. nameTextStyle: {
  3677. color: '#ebf8ac',
  3678. fontSize: 16,
  3679. fontFamily: 'Microsoft YaHei'
  3680. },
  3681. },
  3682. ],
  3683. series: [
  3684. {
  3685. name: '实际值',
  3686. type: 'bar',
  3687. barWidth: 20,
  3688. itemStyle: {
  3689. normal: {
  3690. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3691. {
  3692. offset: 0,
  3693. color: '#69c0ff',
  3694. },
  3695. {
  3696. offset: 1,
  3697. color: '#082550',
  3698. },
  3699. ]),
  3700. },
  3701. },
  3702. // data: [70, 52, 33, 41, 52],
  3703. data: left12[this.count + 1][2]
  3704. },
  3705. {
  3706. name: '',
  3707. type: 'line',
  3708. barWidth: 15,
  3709. itemStyle: {
  3710. normal: {
  3711. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3712. {
  3713. offset: 0,
  3714. color: '#69c0ff',
  3715. },
  3716. {
  3717. offset: 1,
  3718. color: 'green',
  3719. },
  3720. ]),
  3721. },
  3722. },
  3723. // data: [20, 30, 15, 28, 36],
  3724. data: left12[this.count + 1][1]
  3725. },
  3726. {
  3727. name: '',
  3728. type: 'line',
  3729. barWidth: 15,
  3730. itemStyle: {
  3731. normal: {
  3732. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3733. {
  3734. offset: 0,
  3735. color: '#69c0ff',
  3736. },
  3737. {
  3738. offset: 1,
  3739. color: 'yellow',
  3740. },
  3741. ]),
  3742. },
  3743. },
  3744. // data: [15, 22, 17, 33, 14],
  3745. data: left12[this.count + 1][0]
  3746. },
  3747. ],
  3748. }
  3749. let that = this
  3750. // this.chartCarousel.on('click', function (param) {
  3751. // that.titleName = param.name
  3752. // that.echartSingleTipShow = true
  3753. // setTimeout(() => {
  3754. // that.initChartLTip()
  3755. // });
  3756. // })
  3757. this.chartCarousel.on('mouseover', (params) => {
  3758. that.$refs.indicator.handleHover(true, 1, 2, 3, 4)
  3759. })
  3760. this.chartCarousel.on('mouseout', (params) => {
  3761. that.$refs.indicator.handleHover(false, 1, 2, 3, 4)
  3762. })
  3763. this.chartCarousel.setOption(option)
  3764. // tools.loopShowTooltip(myChart, option, {
  3765. // nterval: 2000,
  3766. // loopSeries: true,
  3767. // })
  3768. },
  3769. initChartL10 () {
  3770. this.left7Chart = echarts.init(document.getElementById("echartL10"));
  3771. let option = {
  3772. title: {
  3773. text: '固定资产进度分布',
  3774. textStyle: {
  3775. color: '#69C0FF',
  3776. fontSize: 30,
  3777. fontWeight: 500,
  3778. fontFamily: 'Microsoft YaHei'
  3779. },
  3780. top: '20',
  3781. left: '20'
  3782. },
  3783. textStyle: {
  3784. color: '#fff',
  3785. },
  3786. tooltip: {
  3787. trigger: "axis",
  3788. formatter: function (params) {
  3789. var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿' + '<br/>' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿';
  3790. return tip
  3791. },
  3792. textStyle: {
  3793. color: '#ffffff', // 文字的颜色
  3794. fontSize: '20', // 文字字体大小
  3795. fontFamily: 'Microsoft YaHei'
  3796. },
  3797. axisPointer: {
  3798. // lineStyle: {
  3799. // type: 'dashed',
  3800. // width: 2,
  3801. // color: 'rgba(255,255,255,0.6)'
  3802. // },
  3803. animation: false
  3804. }
  3805. },
  3806. grid: {
  3807. top: '0%',
  3808. right: '5%',
  3809. left: '15%',
  3810. bottom: '-10%',
  3811. },
  3812. yAxis: {
  3813. data: ['备案', '特别监管'],
  3814. splitLine: {
  3815. show: false,
  3816. lineStyle: {
  3817. color: '#68b4dd66',
  3818. type: 'dashed',
  3819. },
  3820. },
  3821. axisLine: {
  3822. show: false
  3823. },
  3824. axisLabel: {
  3825. show: true,
  3826. formatter: '{value}',
  3827. textStyle: {
  3828. color: '#fff',
  3829. fontSize: 20,
  3830. padding: [0, -10, 0, 0],
  3831. fontFamily: 'Microsoft YaHei',
  3832. },
  3833. },
  3834. nameTextStyle: {
  3835. color: '#ebf8ac',
  3836. fontSize: 16,
  3837. fontFamily: 'Microsoft YaHei'
  3838. },
  3839. },
  3840. xAxis: {
  3841. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  3842. axisLine: {
  3843. show: true, //隐藏X轴轴线
  3844. lineStyle: {
  3845. color: '#005094',
  3846. width: 1,
  3847. },
  3848. },
  3849. axisTick: {
  3850. show: false, //隐藏X轴刻度
  3851. },
  3852. axisLabel: {
  3853. show: true,
  3854. textStyle: {
  3855. color: '#fff', //X轴文字颜色
  3856. fontSize: 20,
  3857. padding: [-320, 0, 0, 0],
  3858. fontFamily: 'Microsoft YaHei'
  3859. },
  3860. }
  3861. },
  3862. series: [
  3863. {
  3864. name: '特别监管',
  3865. type: 'scatter',
  3866. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  3867. symbolSize: function (data) {
  3868. return Math.sqrt(data[2]) * 5;
  3869. },
  3870. // label: {
  3871. // emphasis: {
  3872. // show: true,
  3873. // formatter: function (param) {
  3874. // return param.data[2];
  3875. // },
  3876. // position: 'top'
  3877. // }
  3878. // },
  3879. itemStyle: {
  3880. normal: {
  3881. color: '#69c0ff'
  3882. }
  3883. },
  3884. data: left13[0]
  3885. },
  3886. {
  3887. name: '备案',
  3888. type: 'scatter',
  3889. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  3890. symbolSize: function (data) {
  3891. return Math.sqrt(data[2]) * 5;
  3892. },
  3893. // label: {
  3894. // emphasis: {
  3895. // show: true,
  3896. // formatter: function (param) {
  3897. // return param.data[2];
  3898. // },
  3899. // position: 'top'
  3900. // }
  3901. // },
  3902. itemStyle: {
  3903. normal: {
  3904. color: '#957DFF'
  3905. }
  3906. },
  3907. data: left13[1]
  3908. },
  3909. ]
  3910. }
  3911. let that = this
  3912. that.left7Chart.on('click', function (param) {
  3913. that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '固定资产', param.name, param.seriesName, '', '', '', '', '', 216)
  3914. })
  3915. that.left7Chart.setOption(option)
  3916. tools.loopShowTooltip(that.left7Chart, option, {
  3917. nterval: 2000,
  3918. loopSeries: true,
  3919. })
  3920. },
  3921. initChartL11 () {
  3922. this.left8Chart = echarts.init(document.getElementById("echartL11"));
  3923. let option = {
  3924. title: {
  3925. text: '股权类进度分布',
  3926. textStyle: {
  3927. color: '#69C0FF',
  3928. fontSize: 30,
  3929. fontWeight: 500,
  3930. fontFamily: 'Microsoft YaHei'
  3931. },
  3932. top: '20',
  3933. left: '20'
  3934. },
  3935. textStyle: {
  3936. color: '#fff',
  3937. },
  3938. tooltip: {
  3939. trigger: "axis",
  3940. formatter: function (params) {
  3941. var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿' + '<br/>' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿';
  3942. return tip
  3943. },
  3944. textStyle: {
  3945. color: '#FFF', // 文字的颜色
  3946. fontSize: '20', // 文字字体大小
  3947. fontFamily: 'Microsoft YaHei'
  3948. },
  3949. axisPointer: {
  3950. // lineStyle: {
  3951. // type: 'dashed',
  3952. // width: 2,
  3953. // color: 'rgba(255,255,255,0.6)'
  3954. // },
  3955. animation: true
  3956. }
  3957. },
  3958. grid: {
  3959. top: '0%',
  3960. right: '5%',
  3961. left: '15%',
  3962. bottom: '-10%',
  3963. },
  3964. yAxis: {
  3965. data: ['备案', '特别监管'],
  3966. splitLine: {
  3967. show: false,
  3968. lineStyle: {
  3969. color: '#68b4dd66',
  3970. type: 'dashed',
  3971. },
  3972. },
  3973. axisLine: {
  3974. show: false
  3975. },
  3976. axisLabel: {
  3977. show: true,
  3978. formatter: '{value}',
  3979. textStyle: {
  3980. fontSize: 20,
  3981. padding: [0, -10, 0, 0],
  3982. fontFamily: 'Microsoft YaHei'
  3983. },
  3984. },
  3985. nameTextStyle: {
  3986. color: '#ebf8ac',
  3987. fontSize: 16,
  3988. fontFamily: 'Microsoft YaHei'
  3989. },
  3990. },
  3991. xAxis: {
  3992. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  3993. axisLine: {
  3994. show: true, //隐藏X轴轴线
  3995. lineStyle: {
  3996. color: '#005094',
  3997. width: 1,
  3998. },
  3999. },
  4000. axisTick: {
  4001. show: true, //隐藏X轴刻度
  4002. },
  4003. axisLabel: {
  4004. show: true,
  4005. textStyle: {
  4006. color: '#fff', //X轴文字颜色
  4007. fontSize: 20,
  4008. padding: [-320, 0, 0, 0],
  4009. fontFamily: 'Microsoft YaHei'
  4010. },
  4011. },
  4012. },
  4013. series: [
  4014. {
  4015. name: '',
  4016. type: 'scatter',
  4017. symbol: 'circle',
  4018. symbolSize: function (data) {
  4019. return Math.sqrt(data[2]) * 5;
  4020. },
  4021. // label: {
  4022. // emphasis: {
  4023. // show: true,
  4024. // formatter: function (param) {
  4025. // return param.data[2];
  4026. // },
  4027. // position: 'top'
  4028. // }
  4029. // },
  4030. itemStyle: {
  4031. normal: {
  4032. color: '#40A9FF'
  4033. }
  4034. },
  4035. data: left14[0]
  4036. },
  4037. {
  4038. name: '',
  4039. type: 'scatter',
  4040. symbol: 'circle',
  4041. symbolSize: function (data) {
  4042. return Math.sqrt(data[2]) * 5;
  4043. },
  4044. // label: {
  4045. // emphasis: {
  4046. // show: true,
  4047. // formatter: function (param) {
  4048. // return param.data[2];
  4049. // },
  4050. // position: 'top'
  4051. // }
  4052. // },
  4053. itemStyle: {
  4054. normal: {
  4055. color: '#957DFF'
  4056. }
  4057. },
  4058. data: left14[1]
  4059. },
  4060. ]
  4061. }
  4062. let that = this
  4063. that.left8Chart.on('click', function (param) {
  4064. that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '股权类进度分布', param.name, param.seriesName, '', '', '', '', '', 216)
  4065. })
  4066. that.left8Chart.setOption(option)
  4067. tools.loopShowTooltip(that.left8Chart, option, {
  4068. nterval: 2000,
  4069. loopSeries: true,
  4070. })
  4071. },
  4072. // 大屏二
  4073. initChartC1 () {
  4074. if (this.centerType) {
  4075. //3D饼图
  4076. var chartData = center2
  4077. var timer = null;
  4078. var i = 0;
  4079. let that = this
  4080. var option = {
  4081. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  4082. chart: {
  4083. type: 'pie',
  4084. backgroundColor: 'rgba(0,0,0,0)',
  4085. options3d: {
  4086. enabled: true,
  4087. alpha: 60,
  4088. //beta: 0
  4089. },
  4090. events: {
  4091. // load,图表加载完成时触发
  4092. load: function () {
  4093. var chart = this;
  4094. var points = chart.series[0].points;
  4095. var len = points.length;
  4096. timer && clearInterval(timer);
  4097. timer = setInterval(function () {
  4098. autoTooltip(points[i]);
  4099. chartData.forEach((item, index) => {
  4100. item.sliced = false
  4101. item.selected = false
  4102. if (index == i) {
  4103. item.sliced = true
  4104. item.selected = true
  4105. }
  4106. })
  4107. that.center1Chart.update({
  4108. series: [{
  4109. type: 'pie',
  4110. name: '占比',
  4111. point: {
  4112. events: {
  4113. click: function (e) {
  4114. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
  4115. }
  4116. }
  4117. },
  4118. data: chartData
  4119. }]
  4120. })
  4121. i++;
  4122. if (i === len) {
  4123. i = 0;
  4124. }
  4125. }, 2000);
  4126. },
  4127. legendItemClick: function (event) {
  4128. console.log(event);
  4129. return true;
  4130. }
  4131. }
  4132. },
  4133. credits: {
  4134. enabled: false //去掉hightchats水印
  4135. },
  4136. legend: {
  4137. layout: 'vertical',
  4138. align: 'right',
  4139. y: -10,
  4140. verticalAlign: 'bottom',
  4141. itemStyle: {
  4142. fontSize: '20px',
  4143. color: '#fff',
  4144. fontWeight: 0,
  4145. fontFamily: 'Microsoft YaHei'
  4146. }
  4147. },
  4148. tooltip: {
  4149. crosshairs: true,
  4150. backgroundColor: 'rgba(0,0,0,0.5)',
  4151. useHTML: false, //开启html模式
  4152. style: {
  4153. color: '#fff',
  4154. fontSize: '20',
  4155. fontFamily: 'Microsoft YaHei'
  4156. },
  4157. formatter: function (e) {
  4158. let num = chartData[this.colorIndex].num
  4159. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  4160. return `${this.key}:<b>${this.percentage}%</b><br/>投资完成额:<b>${this.y}</b>亿<br/>投资数量:<b>${num}个</b>`
  4161. },
  4162. //pointFormat:
  4163. },
  4164. plotOptions: {
  4165. pie: {
  4166. allowPointSelect: true,
  4167. showInLegend: true, // 图例
  4168. cursor: 'pointer',
  4169. size: 500,
  4170. // innerSize: 330, //环形图中间空白,0为饼图
  4171. innerSize: 0, //环形图中间空白,0为饼图
  4172. depth: 75, //立体高度
  4173. slicedOffset: 40, //动画距离
  4174. dataLabels: {
  4175. enabled: false, // 是否展示指示线
  4176. format: '{point.name}: {point.percentage}'
  4177. }
  4178. },
  4179. },
  4180. title: {
  4181. text: '',
  4182. style: {
  4183. color: '#fff',
  4184. fontSize: 24,
  4185. fontFamily: 'Microsoft YaHei'
  4186. },
  4187. align: 'center',
  4188. verticalAlign: "bottom",
  4189. x: -120
  4190. },
  4191. series: [{
  4192. type: 'pie',
  4193. name: '占比',
  4194. center: ['74%', '50%'],
  4195. point: {
  4196. events: {
  4197. click: function (e) { //点击事件
  4198. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
  4199. },
  4200. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  4201. //console.log(e)
  4202. chartData.forEach((item, index) => {
  4203. item.sliced = false
  4204. item.selected = false
  4205. })
  4206. chartData[e.target.index].sliced = true
  4207. chartData[e.target.index].selected = true
  4208. that.center1Chart.update({
  4209. series: [{
  4210. type: 'pie',
  4211. name: '占比',
  4212. point: {
  4213. events: {
  4214. click: function (e) {
  4215. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
  4216. }
  4217. }
  4218. },
  4219. data: chartData
  4220. }]
  4221. })
  4222. timer && clearInterval(timer);
  4223. },
  4224. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  4225. var points = that.center1Chart.series[0].points;
  4226. var len = points.length;
  4227. timer && clearInterval(timer);
  4228. timer = setInterval(function () {
  4229. autoTooltip(points[i]);
  4230. chartData.forEach((item, index) => {
  4231. item.sliced = false
  4232. item.selected = false
  4233. if (index == i) {
  4234. item.sliced = true
  4235. item.selected = true
  4236. }
  4237. })
  4238. that.center1Chart.update({
  4239. series: [{
  4240. type: 'pie',
  4241. name: '占比',
  4242. point: {
  4243. events: {
  4244. click: function (e) {
  4245. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
  4246. }
  4247. }
  4248. },
  4249. data: chartData
  4250. }]
  4251. })
  4252. i++;
  4253. if (i === len) {
  4254. i = 0;
  4255. }
  4256. }, 2000);
  4257. }
  4258. }
  4259. },
  4260. data: chartData
  4261. }]
  4262. }
  4263. that.center1Chart = Highcharts.chart('echartC1', option);
  4264. function autoTooltip (point) {
  4265. that.center1Chart.tooltip.refresh(point);
  4266. }
  4267. } else {
  4268. let myChart = echarts.init(this.$refs['echartC1'])
  4269. data = center2
  4270. arrName = getArrayValue(data, "name");
  4271. arrValue = getArrayValue(data, "value");
  4272. sumValue = eval(arrValue.join("+"));
  4273. objData = array2obj(data, "name");
  4274. optionData = getData(data);
  4275. function getArrayValue (array, key) {
  4276. var key = key || "value";
  4277. var res = [];
  4278. if (array) {
  4279. array.forEach(function (t) {
  4280. res.push(t[key]);
  4281. });
  4282. }
  4283. return res;
  4284. }
  4285. function array2obj (array, key) {
  4286. var resObj = {};
  4287. for (var i = 0; i < array.length; i++) {
  4288. resObj[array[i][key]] = array[i];
  4289. }
  4290. return resObj;
  4291. }
  4292. function getData (data) {
  4293. var res = {
  4294. series: [],
  4295. yAxis: [],
  4296. };
  4297. for (let i = 0; i < data.length; i++) {
  4298. // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
  4299. res.series.push({
  4300. name: "",
  4301. type: "pie",
  4302. clockWise: false, //顺时加载
  4303. hoverAnimation: false, //鼠标移入变大
  4304. radius: [73 - i * 25 + "%", 63 - i * 25 + "%"],
  4305. center: ["35%", "50%"],
  4306. label: {
  4307. show: false,
  4308. },
  4309. itemStyle: {
  4310. label: {
  4311. show: false,
  4312. },
  4313. labelLine: {
  4314. show: false,
  4315. },
  4316. borderWidth: 5,
  4317. },
  4318. data: [
  4319. {
  4320. value: data[i].value,
  4321. name: data[i].name,
  4322. },
  4323. {
  4324. value: sumValue - data[i].value,
  4325. name: "",
  4326. itemStyle: {
  4327. color: "rgba(0,0,0,0)",
  4328. borderWidth: 0,
  4329. },
  4330. tooltip: {
  4331. show: false,
  4332. },
  4333. hoverAnimation: false,
  4334. },
  4335. ],
  4336. });
  4337. res.series.push({
  4338. name: "",
  4339. type: "pie",
  4340. silent: true,
  4341. z: 1,
  4342. clockWise: false, //顺时加载
  4343. hoverAnimation: false, //鼠标移入变大
  4344. radius: [73 - i * 25 + "%", 63 - i * 25 + "%"],
  4345. center: ["35%", "50%"],
  4346. label: {
  4347. show: false,
  4348. },
  4349. itemStyle: {
  4350. label: {
  4351. show: false,
  4352. },
  4353. labelLine: {
  4354. show: false,
  4355. },
  4356. borderWidth: 5,
  4357. },
  4358. data: [
  4359. {
  4360. value: 7.5,
  4361. itemStyle: {
  4362. color: "#4d638050",
  4363. borderWidth: 0,
  4364. },
  4365. tooltip: {
  4366. show: false,
  4367. },
  4368. hoverAnimation: false,
  4369. },
  4370. {
  4371. value: 2.5,
  4372. name: "",
  4373. itemStyle: {
  4374. color: "rgba(0,0,0,0)",
  4375. borderWidth: 0,
  4376. },
  4377. tooltip: {
  4378. show: false,
  4379. },
  4380. hoverAnimation: false,
  4381. },
  4382. ],
  4383. });
  4384. res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
  4385. }
  4386. return res;
  4387. }
  4388. let option = {
  4389. // graphic: {
  4390. // elements: [{
  4391. // type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  4392. // style: {
  4393. // image: './images/loop.png', //这里添加图片地址
  4394. // width: 320,
  4395. // height: 320
  4396. // },
  4397. // left: '30',//
  4398. // top: 'middle' //配置图片居中
  4399. // }]
  4400. // },
  4401. legend: {
  4402. show: true,
  4403. trigger: 'item',
  4404. icon: "circle",
  4405. top: "center",
  4406. left: "70%",
  4407. data: arrName,
  4408. width: 50,
  4409. padding: [0, 5],
  4410. itemGap: 25,
  4411. formatter: function (data) {
  4412. let a = center2.find(item => item.name == data)
  4413. console.log(a)
  4414. // return `${data}<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${a.color}"></span> ${a.value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${a.color}"></span> ${a.num}个`
  4415. return `${data}<br/>`
  4416. },
  4417. textStyle: {
  4418. fontSize: 20,
  4419. color: '#fff',
  4420. fontFamily: 'Microsoft YaHei'
  4421. // rich: {
  4422. // title: {
  4423. // fontSize: 14,
  4424. // lineHeight: 15,
  4425. // color: "rgb(0, 178, 246)",
  4426. // },
  4427. // value: {
  4428. // fontSize: 18,
  4429. // lineHeight: 20,
  4430. // color: "#fff",
  4431. // },
  4432. // },
  4433. },
  4434. },
  4435. // tooltip: {
  4436. // show: false,
  4437. // normal: {
  4438. // show: false,
  4439. // trigger: "item",
  4440. // label: {
  4441. // margin: 10, // label 距离轴的距离
  4442. // color: '#FFF', // 文字的颜色
  4443. // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  4444. // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  4445. // fontSize: '20', // 文字字体大小
  4446. // lineHeight: '50', // 行高
  4447. // },
  4448. // },
  4449. // // formatter: "{a}<br>{b}:{c}({d}%)666",
  4450. // textStyle: {
  4451. // color: '#FFF', // 文字的颜色
  4452. // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  4453. // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  4454. // },
  4455. // formatter: data => {
  4456. // console.log(data)
  4457. // // 小圆点
  4458. // return `<br /><span style="display:inline-block;border-radius:50%;margin-right:10px; width:7px;height:7px;background-color:blue"></span>${data.name}:${data.percent}`
  4459. // },
  4460. // },
  4461. color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  4462. grid: {
  4463. top: "10%",
  4464. bottom: "52%",
  4465. left: "36%",
  4466. containLabel: false,
  4467. },
  4468. yAxis: [
  4469. {
  4470. type: "category",
  4471. inverse: true,
  4472. axisLine: {
  4473. show: false,
  4474. },
  4475. axisTick: {
  4476. show: false,
  4477. },
  4478. axisLabel: {
  4479. interval: 0,
  4480. inside: true,
  4481. textStyle: {
  4482. color: "#fff",
  4483. fontSize: 20,
  4484. fontFamily: 'Microsoft YaHei'
  4485. },
  4486. show: true,
  4487. formatter: data => {
  4488. return '---- ' + data
  4489. },
  4490. },
  4491. data: optionData.yAxis,
  4492. },
  4493. ],
  4494. xAxis: [
  4495. {
  4496. show: false,
  4497. },
  4498. ],
  4499. series: optionData.series,
  4500. }
  4501. myChart.setOption(option)
  4502. // tools.loopShowTooltip(myChart, option, {
  4503. // interval: 500,
  4504. // loopSeries: true,
  4505. // });
  4506. }
  4507. },
  4508. initChartC2 () {
  4509. let that = this
  4510. that.center2Chart = echarts.init(this.$refs['echartC2'])
  4511. that.center2Chart.on('showTip', (params) => {
  4512. // 如果是7或者15并且满足防抖则切换
  4513. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartC2Fd) {
  4514. that.echartC2Fd = false
  4515. setTimeout(() => {
  4516. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  4517. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  4518. that.center2Chart.setOption(option);
  4519. // 防止勿刷新做的防抖
  4520. setTimeout(() => {
  4521. that.echartC2Fd = true
  4522. }, 2000)
  4523. }, 1900);
  4524. // 如果是17表示到了最后一个,那么重新来一遍
  4525. } else if (params.dataIndex == 17 && that.echartC2Fd) {
  4526. that.echartC2Fd = false
  4527. setTimeout(() => {
  4528. option.dataZoom[0].endValue = 0
  4529. option.dataZoom[0].startValue = 5
  4530. that.center2Chart.setOption(option);
  4531. // 防止勿刷新做的防抖
  4532. setTimeout(() => {
  4533. that.echartC2Fd = true
  4534. }, 2000)
  4535. }, 1900)
  4536. }
  4537. })
  4538. let option = {
  4539. tooltip: {
  4540. formatter: data => {
  4541. return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿`
  4542. },
  4543. trigger: 'axis',
  4544. axisPointer: {
  4545. // type: 'cross',',
  4546. },
  4547. textStyle: {
  4548. color: '#FFF', // 文字的颜色
  4549. fontSize: '20', // 文字字体大小
  4550. fontFamily: 'Microsoft YaHei'
  4551. },
  4552. },
  4553. dataZoom: [
  4554. {
  4555. // start: 9,//默认为@
  4556. // end: 100,//黑认认为1@0
  4557. type: "slider",
  4558. show: false,
  4559. // xAxisIndex: [0]
  4560. handlesize: 0,//滑动条的 左右2个滑动条的大小
  4561. startValue: 5,// 初始显示值
  4562. endValue: 0,// 结束显示值
  4563. height: 10,//组件高度
  4564. left: "5%",
  4565. right: "4%",//右边的距离
  4566. bottom: "25%",//底边的距离
  4567. borderColor: "#939",
  4568. fillerColor: "#269cdb",
  4569. borderRadius: 5,
  4570. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  4571. showDataShadow: false,//是否显示数据阴影
  4572. showDetail: false,//即拖拽时候是否显示详细数值信息
  4573. truerealtime: true,//是否实时更新
  4574. filterMode: "filter"
  4575. }, {
  4576. type: 'inside',
  4577. show: true,
  4578. start: 1,
  4579. end: 100,
  4580. zoomOnMouseWheel: false, //滚轮是否触发缩放
  4581. moveOnMouseMove: false, //鼠标滚轮触发滚动
  4582. }
  4583. ],
  4584. grid: {
  4585. top: '10%',
  4586. right: '3%',
  4587. left: '7%',
  4588. bottom: '15%',
  4589. },
  4590. legend: {
  4591. top: '1',
  4592. right: 'center',
  4593. textStyle: {
  4594. color: '#fff',
  4595. fontSize: '20',
  4596. fontFamily: 'Microsoft YaHei'
  4597. },
  4598. },
  4599. xAxis: {
  4600. data: commonCompany,
  4601. // data: center3.map(item => item.name),
  4602. axisLine: {
  4603. show: true, //隐藏X轴轴线
  4604. lineStyle: {
  4605. color: '#005094',
  4606. width: 1,
  4607. },
  4608. },
  4609. axisTick: {
  4610. show: false, //隐藏X轴刻度
  4611. },
  4612. axisLabel: {
  4613. show: true,
  4614. rotate: 40,
  4615. textStyle: {
  4616. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  4617. fontSize: '20',
  4618. fontFamily: 'Microsoft YaHei'
  4619. },
  4620. },
  4621. },
  4622. yAxis: [
  4623. {
  4624. type: 'value',
  4625. name: '亿',
  4626. splitLine: {
  4627. show: true,
  4628. lineStyle: {
  4629. color: '#68b4dd66',
  4630. type: 'dashed',
  4631. },
  4632. },
  4633. axisLine: {
  4634. show: true,
  4635. lineStyle: {
  4636. color: '#3D7495',
  4637. },
  4638. },
  4639. axisLabel: {
  4640. show: true,
  4641. textStyle: {
  4642. color: '#fff',
  4643. fontSize: '20',
  4644. fontFamily: 'Microsoft YaHei'
  4645. },
  4646. },
  4647. nameTextStyle: {
  4648. color: '#fff',
  4649. fontSize: 20,
  4650. fontFamily: 'Microsoft YaHei'
  4651. },
  4652. },
  4653. ],
  4654. series: [
  4655. {
  4656. name: '计划投资',
  4657. type: 'bar',
  4658. barWidth: 10,
  4659. itemStyle: {
  4660. normal: {
  4661. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4662. {
  4663. offset: 0,
  4664. color: '#69c0ff',
  4665. },
  4666. {
  4667. offset: 1,
  4668. color: '#082550',
  4669. },
  4670. ]),
  4671. },
  4672. },
  4673. data: center3.map(item => item.value),
  4674. },
  4675. {
  4676. name: '实际投资',
  4677. type: 'bar',
  4678. barWidth: 10,
  4679. itemStyle: {
  4680. normal: {
  4681. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4682. {
  4683. offset: 0,
  4684. color: '#957DFF',
  4685. },
  4686. {
  4687. offset: 1,
  4688. color: '#082550',
  4689. },
  4690. ]),
  4691. },
  4692. },
  4693. data: center3.map(item => item.value2),
  4694. },
  4695. ],
  4696. }
  4697. that.center2Chart.on('click', function (param) {
  4698. that.projectListTipShow = true
  4699. that.centerPenetrateTwo('', '', that.findCode(param.name), param.seriesName == '计划投资' ? 2 : 1)
  4700. })
  4701. that.center2Chart.setOption(option)
  4702. tools.loopShowTooltip(that.center2Chart, option, {
  4703. nterval: 2000,
  4704. loopSeries: true,
  4705. })
  4706. // let arr = center3.map(item => item.value2)
  4707. // this.timeOut = setInterval(function () {
  4708. // let startValue = myChart.getModel().option.dataZoom[0].startValue;
  4709. // let endValue = myChart.getModel().option.dataZoom[0].endValue;
  4710. // let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
  4711. // let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
  4712. // // 每次向后滚动一个,最后一个从头开始。
  4713. // // console.log(option.dataZoom[0].endValue);
  4714. // if (option.dataZoom[0].endValue >= 12) {
  4715. // option.dataZoom[0].endValue = 5
  4716. // option.dataZoom[0].startValue = 0
  4717. // } else {
  4718. // option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  4719. // option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  4720. // }
  4721. // // myChart.dispatchAction({
  4722. // // type: 'showTip',
  4723. // // seriesIndex: 0,
  4724. // // dataIndex: startValue +1,
  4725. // // });
  4726. // myChart.setOption(option);
  4727. // }, 12000);
  4728. },
  4729. convertData (data) {
  4730. var res = []
  4731. for (var i = 0; i < data.length; i++) {
  4732. var geoCoord = this.geoCoordMap[data[i].name]
  4733. if (geoCoord) {
  4734. res.push({
  4735. name: data[i].name,
  4736. value: geoCoord.concat(data[i].value),
  4737. })
  4738. }
  4739. }
  4740. return res
  4741. },
  4742. yuanChange (value) {
  4743. return Number((value / 100000000).toFixed(2))
  4744. },
  4745. // 逢三折断
  4746. numFormat (value) {
  4747. if (!value) return '0'
  4748. // var intPart = Number(value).toFixed(0) // 获取整数部分
  4749. var intPart = parseInt(value)// 获取整数部分
  4750. var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  4751. var floatPart = '.00' // 预定义小数部分
  4752. var value2Array = value.toString().split('.')
  4753. // =2表示数据有小数位
  4754. if (value2Array.length === 2) {
  4755. floatPart = value2Array[1].toString() // 拿到小数部分
  4756. if (floatPart.length === 1) {
  4757. // 补0
  4758. return intPartFormat + '.' + floatPart + '0'
  4759. } else {
  4760. return intPartFormat + '.' + floatPart
  4761. }
  4762. } else {
  4763. return intPartFormat
  4764. }
  4765. },
  4766. initProvinceChart () {
  4767. var data = center5
  4768. this.geoCoordMap = []
  4769. /*获取地图数据*/
  4770. this.mapChart = echarts.init(this.$refs['echarts-map'])
  4771. echarts.registerMap('shanxi', shanxi)
  4772. var mapFeatures = echarts.getMap('shanxi').geoJson.features
  4773. mapFeatures.forEach(v => {
  4774. // 地区名称
  4775. var name = v.properties.name
  4776. // 地区经纬度
  4777. this.geoCoordMap[name] = v.properties.centroid
  4778. // 按照地图乱序
  4779. // data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
  4780. })
  4781. let option = {
  4782. tooltip: {
  4783. padding: 15,
  4784. enterable: true,
  4785. transitionDuration: 1,
  4786. formatter: (params, ticket, callback) => {
  4787. // 清空所有轮播
  4788. for (var k in this.geoCoordMap) {
  4789. this.mapChart.dispatchAction({
  4790. // type: 'geoUnSelect',
  4791. type: 'downplay',
  4792. name: k,
  4793. })
  4794. }
  4795. // 如果鼠标滑动到线线上面,则返回空
  4796. this.mapChart.dispatchAction({
  4797. // type: 'geoSelect',
  4798. type: 'highlight',
  4799. name: params.name,
  4800. })
  4801. if (params.componentSubType == 'lines') {
  4802. return
  4803. }
  4804. if (params.componentSubType == 'scatter') {
  4805. let tipHtml = `
  4806. <div class="tooltip-cont">
  4807. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  4808. <p>总投资额:<span>${params.data.value[2]}亿</span></p>
  4809. </div>`
  4810. callback(ticket, tipHtml)
  4811. return tipHtml
  4812. }
  4813. if (params.componentSubType == 'map') {
  4814. let tipHtml = `
  4815. <div class="tooltip-cont">
  4816. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  4817. <p>总投资额:<span>${params.data.value}亿</span></p>
  4818. </div>`
  4819. callback(ticket, tipHtml)
  4820. return tipHtml
  4821. }
  4822. },
  4823. },
  4824. visualMap: {
  4825. show: false,
  4826. min: 0,
  4827. max: 300,
  4828. right: 0,
  4829. bottom: 0,
  4830. text: ['高', '低'],
  4831. textStyle: {
  4832. color: '#f1f1f1'
  4833. },
  4834. realtime: false,
  4835. calculable: false,
  4836. inRange: {
  4837. color: ['lightskyblue', '#2754b7']
  4838. }
  4839. },
  4840. geo: {
  4841. show: true,
  4842. map: 'shanxi',
  4843. layoutCenter: ['50%', '50%'], //地图位置
  4844. layoutSize: '140%',
  4845. label: {
  4846. normal: {
  4847. position: [100, 100],
  4848. fontSize: 25,
  4849. fontFamily: 'Microsoft YaHei',
  4850. fontWeight: 600,
  4851. color: '#fff',
  4852. show: true,
  4853. },
  4854. emphasis: {
  4855. show: true,
  4856. color: '#e7e1a0',
  4857. fontSize: 30,
  4858. },
  4859. },
  4860. roam: false,
  4861. itemStyle: {
  4862. normal: {
  4863. areaColor: '#1946a8',
  4864. shadowColor: '#1946a8',
  4865. borderWidth: 2, //设置外层边框
  4866. borderColor: '#1946a8',
  4867. shadowOffsetX: 0,
  4868. shadowOffsetY: 0,
  4869. shadowBlur: 0,
  4870. },
  4871. emphasis: {
  4872. areaColor: '#013d95',
  4873. borderColor: '#e7e1a0',
  4874. borderWidth: 4, //设置外层边框
  4875. },
  4876. },
  4877. },
  4878. series: [
  4879. {
  4880. type: 'map',
  4881. map: 'shanxi',
  4882. geoIndex: 0,
  4883. aspectScale: 1.5, //长宽比
  4884. data: data,
  4885. },
  4886. ],
  4887. }
  4888. let that = this
  4889. this.mapChart.on('click', function (params) {
  4890. if (params.name == '太原市') {
  4891. that.showChartLTipDouble(params.name, 'center', '', '', '', '', 'investmentMap', '太原市', '山西省')
  4892. }
  4893. })
  4894. tools.loopShowTooltip(this.mapChart, option, {
  4895. interval: 2000,
  4896. loopSeries: false,
  4897. });
  4898. this.mapChart.setOption(option)
  4899. },
  4900. initChinaChart () {
  4901. var data = centerChina
  4902. this.geoCoordMap = []
  4903. /*获取地图数据*/
  4904. this.mapChart = echarts.init(this.$refs['chinaMap'])
  4905. echarts.registerMap('china', china)
  4906. var mapFeatures = echarts.getMap('china').geoJson.features
  4907. mapFeatures.forEach(v => {
  4908. // 地区名称
  4909. var name = v.properties.name
  4910. // 地区经纬度
  4911. this.geoCoordMap[name] = v.properties.cp
  4912. data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
  4913. })
  4914. let option = {
  4915. tooltip: {
  4916. padding: 15,
  4917. enterable: true,
  4918. transitionDuration: 1,
  4919. formatter: (params, ticket, callback) => {
  4920. // 清空所有轮播
  4921. this.mapChart.dispatchAction({
  4922. // type: 'geoUnSelect',
  4923. type: 'downplay',
  4924. name: '南海诸岛',
  4925. })
  4926. for (var k in this.geoCoordMap) {
  4927. this.mapChart.dispatchAction({
  4928. // type: 'geoUnSelect',
  4929. type: 'downplay',
  4930. name: k,
  4931. })
  4932. }
  4933. // 如果鼠标滑动到线线上面,则返回空
  4934. this.mapChart.dispatchAction({
  4935. // type: 'geoSelect',
  4936. type: 'highlight',
  4937. name: params.name,
  4938. })
  4939. if (params.componentSubType == 'lines') {
  4940. return
  4941. }
  4942. if (params.componentSubType == 'scatter') {
  4943. let tipHtml = `
  4944. <div class="tooltip-cont">
  4945. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  4946. <p>总投资额:<span>${params.data.value[2]}亿</span></p>
  4947. </div>`
  4948. callback(ticket, tipHtml)
  4949. return tipHtml
  4950. }
  4951. if (params.componentSubType == 'map') {
  4952. let tipHtml = `
  4953. <div class="tooltip-cont">
  4954. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  4955. <p>总投资额:<span>${params.data.value}亿</span></p>
  4956. </div>`
  4957. callback(ticket, tipHtml)
  4958. return tipHtml
  4959. }
  4960. },
  4961. },
  4962. visualMap: {
  4963. show: false,
  4964. min: 0,
  4965. max: 1000,
  4966. left: '100',
  4967. bottom: 100,
  4968. text: ['高', '低'],
  4969. textStyle: {
  4970. color: '#f1f1f1'
  4971. },
  4972. realtime: true, //拖拽时,是否实时更新
  4973. calculable: false,
  4974. inRange: {
  4975. color: ['lightskyblue', '#2754b7']
  4976. },
  4977. itemWidth: 50, //图形的宽度,即长条的宽度。
  4978. itemHeight: 400, //图形的高度,即长条的高度。
  4979. textStyle: {
  4980. fontSize: 30,
  4981. color: '#fff'
  4982. }
  4983. },
  4984. geo: {
  4985. show: true,
  4986. map: 'china',
  4987. layoutCenter: ['50%', '50%'], //地图位置
  4988. layoutSize: '110%',
  4989. label: {
  4990. normal: {
  4991. position: [100, 100],
  4992. fontSize: 25,
  4993. fontFamily: 'Microsoft YaHei',
  4994. fontWeight: 600,
  4995. color: '#fff',
  4996. show: true,
  4997. },
  4998. emphasis: {
  4999. show: true,
  5000. color: '#e7e1a0',
  5001. fontSize: 30,
  5002. },
  5003. },
  5004. // 滑轮缩放
  5005. roam: false,
  5006. itemStyle: {
  5007. normal: {
  5008. areaColor: '#1946a8',
  5009. shadowColor: '#1946a8',
  5010. borderWidth: 2, //设置外层边框
  5011. borderColor: '#0b245b',
  5012. shadowOffsetX: 0,
  5013. shadowOffsetY: 0,
  5014. shadowBlur: 0,
  5015. },
  5016. emphasis: {
  5017. areaColor: '#013d95',
  5018. borderColor: '#e7e1a0',
  5019. borderWidth: 4, //设置外层边框
  5020. },
  5021. },
  5022. },
  5023. series: [
  5024. {
  5025. type: 'map',
  5026. map: 'china',
  5027. geoIndex: 0,
  5028. data: data,
  5029. },
  5030. ],
  5031. }
  5032. let that = this
  5033. this.mapChart.on('click', function (params) {
  5034. if (params.name == '山西') {
  5035. // that.showChartLTipDouble(params.name, 'center', '', '', '', '', '', 'investmentMap', '山西省')
  5036. that.mapChart.dispose()
  5037. that.centerShow = true
  5038. setTimeout(() => {
  5039. that.initChartC1()
  5040. that.initChartC2()
  5041. that.initChartC3()
  5042. that.initChartC4()
  5043. if (that.versions) {
  5044. that.centerPenetrateOne('investmentMap', params.name, 3, '', '')
  5045. } else {
  5046. that.initProvinceChart()
  5047. }
  5048. that.initProjectList()
  5049. })
  5050. }
  5051. })
  5052. tools.loopShowTooltip(this.mapChart, option, {
  5053. interval: 2000,
  5054. loopSeries: false,
  5055. });
  5056. this.mapChart.setOption(option)
  5057. },
  5058. initChartC3 () {
  5059. this.center3Chart = echarts.init(this.$refs['echartC3'])
  5060. let option = {
  5061. tooltip: {
  5062. trigger: 'axis',
  5063. formatter: '{a0}:{c0}' + '亿', //+ '<br/>'+ '{a1}:{c1}' + '%',
  5064. axisPointer: {
  5065. // type: 'cross',',
  5066. },
  5067. textStyle: {
  5068. color: '#FFF', // 文字的颜色
  5069. fontSize: '20', // 文字字体大小
  5070. fontFamily: 'Microsoft YaHei'
  5071. },
  5072. },
  5073. grid: {
  5074. top: '8%',
  5075. right: '3%',
  5076. left: '7%',
  5077. bottom: '10%',
  5078. },
  5079. // legend: {
  5080. // top: '1',
  5081. // textStyle: {
  5082. // color: 'rgba(250,250,250,0.6)',
  5083. // },
  5084. // },
  5085. xAxis: {
  5086. data: center6.map(item => item.name),
  5087. axisLine: {
  5088. show: true, //隐藏X轴轴线
  5089. lineStyle: {
  5090. color: '#005094',
  5091. width: 1,
  5092. },
  5093. },
  5094. axisTick: {
  5095. show: false, //隐藏X轴刻度
  5096. },
  5097. axisLabel: {
  5098. show: true,
  5099. rotate: 20,
  5100. textStyle: {
  5101. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  5102. fontSize: '20',
  5103. fontFamily: 'Microsoft YaHei'
  5104. },
  5105. },
  5106. },
  5107. yAxis: [
  5108. {
  5109. type: 'value',
  5110. name: '亿',
  5111. splitLine: {
  5112. show: true,
  5113. lineStyle: {
  5114. color: '#68b4dd66',
  5115. type: 'dashed',
  5116. },
  5117. },
  5118. axisLine: {
  5119. show: true,
  5120. lineStyle: {
  5121. color: '#3D7495',
  5122. },
  5123. },
  5124. axisLabel: {
  5125. show: true,
  5126. textStyle: {
  5127. color: '#fff',
  5128. fontSize: '20',
  5129. fontFamily: 'Microsoft YaHei'
  5130. },
  5131. },
  5132. nameTextStyle: {
  5133. color: '#fff',
  5134. fontSize: 20,
  5135. fontFamily: 'Microsoft YaHei'
  5136. },
  5137. },
  5138. {
  5139. type: 'value',
  5140. axisLine: {
  5141. show: false,
  5142. },
  5143. splitLine: {
  5144. show: false,
  5145. },
  5146. axisLabel: {
  5147. show: true,
  5148. formatter: '{value} %',
  5149. textStyle: {
  5150. color: 'rgba(250,250,250,0.6)',
  5151. fontFamily: 'Microsoft YaHei'
  5152. },
  5153. },
  5154. },
  5155. ],
  5156. series: [
  5157. {
  5158. type: 'bar',
  5159. name: '投资金额',
  5160. barWidth: 15,
  5161. itemStyle: {
  5162. normal: {
  5163. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5164. {
  5165. offset: 0,
  5166. color: '#69c0ff',
  5167. },
  5168. {
  5169. offset: 1,
  5170. color: '#082550',
  5171. },
  5172. ]),
  5173. },
  5174. },
  5175. data: center6.map(item => item.value),
  5176. },
  5177. ],
  5178. }
  5179. let that = this
  5180. that.center3Chart.on('click', function (param) {
  5181. if (param.name == '煤炭和煤电') {
  5182. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ceiamount', '', '', '', '', 'five', '1', 2)
  5183. } else if (param.name == '煤电和新能源') {
  5184. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cpneiamount', '', '', '', '', 'five', '2', 2)
  5185. } else if (param.name == '煤炭和化工') {
  5186. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ccheiamount', '', '', '', '', 'five', '3', 2)
  5187. } else if (param.name == '煤炭和数字') {
  5188. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cdiamount', '', '', '', '', 'five', '4', 2)
  5189. } else if (param.name == '煤炭和降炭') {
  5190. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cciamount', '', '', '', '', 'five', '5', 2)
  5191. }
  5192. })
  5193. that.center3Chart.setOption(option)
  5194. tools.loopShowTooltip(that.center3Chart, option, {
  5195. nterval: 2000,
  5196. loopSeries: true,
  5197. })
  5198. },
  5199. initChartC4 () {
  5200. if (this.centerType) {
  5201. // 3D饼图
  5202. var chartData = []
  5203. var timer = null;
  5204. var timer2 = null;
  5205. var i = 0;
  5206. center7.forEach((item, index) => {
  5207. let obj = {
  5208. name: item.name,
  5209. y: item.value2,
  5210. num: item.value,
  5211. typeno: item.typeno,
  5212. sliced: false,
  5213. selected: false,
  5214. color: index == 0 ? '#064F78' : '#BDB35D'
  5215. }
  5216. chartData.push(obj)
  5217. })
  5218. let that = this
  5219. that.center4Chart = Highcharts.chart('echartC4', {
  5220. chart: {
  5221. type: 'pie',
  5222. backgroundColor: 'rgba(0,0,0,0)',
  5223. options3d: {
  5224. enabled: true,
  5225. alpha: 60,
  5226. //beta: 0
  5227. },
  5228. events: {
  5229. // load,图表加载完成时触发
  5230. load: function () {
  5231. var chart = this;
  5232. var points = chart.series[0].points;
  5233. var len = points.length;
  5234. timer && clearInterval(timer);
  5235. timer = setInterval(function () {
  5236. autoTooltip(points[i]);
  5237. chartData.forEach((item, index) => {
  5238. item.sliced = false
  5239. item.selected = false
  5240. if (index == i) {
  5241. item.sliced = true
  5242. item.selected = true
  5243. }
  5244. })
  5245. that.center4Chart.update({
  5246. series: [{
  5247. type: 'pie',
  5248. name: '占比',
  5249. point: {
  5250. events: {
  5251. click: function (e) {
  5252. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
  5253. }
  5254. }
  5255. },
  5256. data: chartData
  5257. }]
  5258. })
  5259. i++;
  5260. if (i === len) {
  5261. i = 0;
  5262. chartData.forEach((item, index) => {
  5263. item.sliced = false
  5264. item.selected = false
  5265. })
  5266. that.center4Chart.update({
  5267. series: [{
  5268. type: 'pie',
  5269. name: '占比',
  5270. point: {
  5271. events: {
  5272. click: function (e) {
  5273. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
  5274. }
  5275. }
  5276. },
  5277. data: chartData
  5278. }]
  5279. })
  5280. }
  5281. }, 2000);
  5282. },
  5283. legendItemClick: function (event) {
  5284. console.log(event);
  5285. return true;
  5286. }
  5287. }
  5288. },
  5289. credits: {
  5290. enabled: false //去掉hightchats水印
  5291. },
  5292. title: {
  5293. text: null
  5294. },
  5295. tooltip: {
  5296. crosshairs: true,
  5297. backgroundColor: 'rgba(0,0,0,0.5)',
  5298. // positioner: function(e){
  5299. // console.log(e, this)
  5300. // },
  5301. useHTML: false, //开启html模式
  5302. style: {
  5303. color: '#fff',
  5304. fontSize: '20',
  5305. fontFamily: 'Microsoft YaHei'
  5306. },
  5307. formatter: function (e) {
  5308. //console.log(this)
  5309. let num = chartData[this.colorIndex].num
  5310. this.percentage = Math.round(this.percentage)
  5311. return `${this.key}:<b>${this.percentage}%</b><br/>投资完成额:<b>${this.y}</b>亿<br/>投资数量:<b>${num}个</b>`
  5312. },
  5313. //pointFormat:
  5314. },
  5315. legend: {
  5316. layout: 'vertical',
  5317. align: 'right',
  5318. y: -10,
  5319. verticalAlign: 'bottom',
  5320. itemStyle: {
  5321. fontSize: '20px',
  5322. color: '#fff',
  5323. fontWeight: 0,
  5324. fontFamily: 'Microsoft YaHei'
  5325. }
  5326. },
  5327. plotOptions: {
  5328. pie: {
  5329. allowPointSelect: true,
  5330. showInLegend: true, // 图例
  5331. cursor: 'pointer',
  5332. size: 500,
  5333. // innerSize: 330, //环形图中间空白,0为饼图
  5334. innerSize: 0, //环形图中间空白,0为饼图
  5335. depth: 75, //立体高度
  5336. slicedOffset: 40, //动画距离
  5337. dataLabels: {
  5338. enabled: false, // 是否展示指示线
  5339. format: '{point.name}: {point.percentage}'
  5340. }
  5341. },
  5342. },
  5343. series: [{
  5344. type: 'pie',
  5345. name: '占比',
  5346. center: ['60%', '50%'],
  5347. y: -10,
  5348. point: {
  5349. events: {
  5350. click: function (e) { //点击事件
  5351. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
  5352. },
  5353. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  5354. //console.log(e)
  5355. chartData.forEach((item, index) => {
  5356. item.sliced = false
  5357. item.selected = false
  5358. })
  5359. chartData[e.target.index].sliced = true
  5360. chartData[e.target.index].selected = true
  5361. that.center4Chart.update({
  5362. series: [{
  5363. type: 'pie',
  5364. name: '占比',
  5365. point: {
  5366. events: {
  5367. click: function (e) {
  5368. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
  5369. }
  5370. }
  5371. },
  5372. data: chartData
  5373. }]
  5374. })
  5375. timer && clearInterval(timer);
  5376. },
  5377. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  5378. var points = that.center4Chart.series[0].points;
  5379. var len = points.length;
  5380. timer && clearInterval(timer);
  5381. timer = setInterval(function () {
  5382. autoTooltip(points[i]);
  5383. chartData.forEach((item, index) => {
  5384. item.sliced = false
  5385. item.selected = false
  5386. if (index == i) {
  5387. item.sliced = true
  5388. item.selected = true
  5389. }
  5390. })
  5391. that.center4Chart.update({
  5392. series: [{
  5393. type: 'pie',
  5394. name: '占比',
  5395. point: {
  5396. events: {
  5397. click: function (e) {
  5398. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
  5399. }
  5400. }
  5401. },
  5402. data: chartData
  5403. }]
  5404. })
  5405. i++;
  5406. if (i === len) {
  5407. i = 0;
  5408. chartData.forEach((item, index) => {
  5409. item.sliced = false
  5410. item.selected = false
  5411. })
  5412. that.center4Chart.update({
  5413. series: [{
  5414. type: 'pie',
  5415. name: '占比',
  5416. point: {
  5417. events: {
  5418. click: function (e) {
  5419. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
  5420. }
  5421. }
  5422. },
  5423. data: chartData
  5424. }]
  5425. })
  5426. }
  5427. }, 2000);
  5428. }
  5429. }
  5430. },
  5431. data: chartData
  5432. }]
  5433. });
  5434. function autoTooltip (point) {
  5435. that.center4Chart.tooltip.refresh(point);
  5436. }
  5437. } else {
  5438. // 环形图
  5439. let myChart = echarts.init(this.$refs['echartC4'])
  5440. data = center7
  5441. arrName = getArrayValue(data, "name");
  5442. arrValue = getArrayValue(data, "value");
  5443. sumValue = eval(arrValue.join("+"));
  5444. objData = array2obj(data, "name");
  5445. optionData = getData(data);
  5446. function getArrayValue (array, key) {
  5447. var key = key || "value";
  5448. var res = [];
  5449. if (array) {
  5450. array.forEach(function (t) {
  5451. res.push(t[key]);
  5452. });
  5453. }
  5454. return res;
  5455. }
  5456. function array2obj (array, key) {
  5457. var resObj = {};
  5458. for (var i = 0; i < array.length; i++) {
  5459. resObj[array[i][key]] = array[i];
  5460. }
  5461. return resObj;
  5462. }
  5463. function getData (data) {
  5464. var res = {
  5465. series: [],
  5466. yAxis: [],
  5467. };
  5468. for (let i = 0; i < data.length; i++) {
  5469. res.series.push({
  5470. name: "",
  5471. type: "pie",
  5472. clockWise: false, //顺时加载
  5473. hoverAnimation: false, //鼠标移入变大
  5474. radius: [73 - i * 40 + "%", 58 - i * 40 + "%"],
  5475. center: ["50%", "50%"],
  5476. label: {
  5477. show: false,
  5478. },
  5479. itemStyle: {
  5480. label: {
  5481. show: false,
  5482. },
  5483. labelLine: {
  5484. show: false,
  5485. },
  5486. borderWidth: 5,
  5487. },
  5488. data: [
  5489. {
  5490. value: data[i].value,
  5491. name: data[i].name,
  5492. },
  5493. {
  5494. value: sumValue - data[i].value,
  5495. name: "",
  5496. itemStyle: {
  5497. color: "rgba(0,0,0,0)",
  5498. borderWidth: 0,
  5499. },
  5500. tooltip: {
  5501. show: false,
  5502. },
  5503. hoverAnimation: false,
  5504. },
  5505. ],
  5506. });
  5507. res.series.push({
  5508. name: "",
  5509. type: "pie",
  5510. silent: true,
  5511. z: 1,
  5512. clockWise: false, //顺时加载
  5513. hoverAnimation: false, //鼠标移入变大
  5514. radius: [73 - i * 40 + "%", 58 - i * 40 + "%"],
  5515. center: ["50%", "50%"],
  5516. label: {
  5517. show: false,
  5518. },
  5519. itemStyle: {
  5520. label: {
  5521. show: false,
  5522. },
  5523. labelLine: {
  5524. show: false,
  5525. },
  5526. borderWidth: 10,
  5527. },
  5528. data: [
  5529. {
  5530. value: 7.5,
  5531. itemStyle: {
  5532. color: "rgba(9,40,83,0.7)",
  5533. borderWidth: 0,
  5534. },
  5535. tooltip: {
  5536. show: false,
  5537. },
  5538. hoverAnimation: false,
  5539. },
  5540. {
  5541. value: 2.5,
  5542. name: "",
  5543. itemStyle: {
  5544. color: "rgba(0,0,0,0)",
  5545. borderWidth: 0,
  5546. },
  5547. tooltip: {
  5548. show: false,
  5549. },
  5550. hoverAnimation: false,
  5551. },
  5552. ],
  5553. });
  5554. res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
  5555. }
  5556. return res;
  5557. }
  5558. let option = {
  5559. // graphic: {
  5560. // elements: [{
  5561. // type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  5562. // style: {
  5563. // // image: './images/loop.png', //这里添加图片地址
  5564. // width: 320,
  5565. // height: 320
  5566. // },
  5567. // left: '30',//
  5568. // top: 'middle' //配置图片居中
  5569. // }]
  5570. // },
  5571. // tooltip: {
  5572. // show: true,
  5573. // trigger: "item",
  5574. // normal: {
  5575. // show: false,
  5576. // label: {
  5577. // color: '#FFF', // 文字的颜色
  5578. // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  5579. // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  5580. // fontSize: '20', // 文字字体大小
  5581. // },
  5582. // },
  5583. // formatter: function (data) {
  5584. // console.log(data, '?????')
  5585. // // return `${data.data.name}:${data.percent}%<br/>${data.data.y}亿,${data.data.num}个`
  5586. // },
  5587. // // formatter: "{a}<br>{b}:{c}({d}%)666",
  5588. // textStyle: {
  5589. // fontSize: '20', // 文字字体大小
  5590. // color: '#FFF', // 文字的颜色
  5591. // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  5592. // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  5593. // },
  5594. // },
  5595. tooltip: {
  5596. trigger: 'item',
  5597. textStyle: {
  5598. color: '#fff', //X轴文字颜色
  5599. fontSize: 20,
  5600. fontFamily: 'Microsoft YaHei'
  5601. },
  5602. // 设置提示的位置
  5603. position: (p) => {
  5604. // return ['15%', '25%']
  5605. return [p[0] - 70, p[1] - 70]
  5606. // console.log(params,'???????位置信息是什么鬼')
  5607. // if (params.name == '新建') {
  5608. // return ['15%', '25%']
  5609. // }
  5610. },
  5611. formatter: data => {
  5612. let a = ''
  5613. a = center7.find(item => item.name == data.name)
  5614. return `${data.name}:${data.percent}%<br/>${data.value}亿,${a.value2}个`
  5615. },
  5616. },
  5617. legend: {
  5618. show: true,
  5619. icon: "circle",
  5620. top: "bottom",
  5621. right: "5%",
  5622. data: arrName,
  5623. orient: 'vertical',
  5624. // width: 50,
  5625. // padding: [0, 5],
  5626. itemGap: 5,
  5627. textStyle: {
  5628. color: '#fff',
  5629. fontSize: 20,
  5630. fontFamily: 'Microsoft YaHei'
  5631. },
  5632. },
  5633. color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  5634. grid: {
  5635. top: "8%",
  5636. bottom: "52%",
  5637. left: "50%",
  5638. containLabel: true,
  5639. },
  5640. yAxis: [
  5641. {
  5642. type: "category",
  5643. inverse: true,
  5644. axisLine: {
  5645. show: false,
  5646. },
  5647. axisTick: {
  5648. show: false,
  5649. },
  5650. axisLabel: {
  5651. interval: 0,
  5652. inside: true,
  5653. textStyle: {
  5654. color: "#fff",
  5655. fontSize: 20,
  5656. fontFamily: 'Microsoft YaHei'
  5657. },
  5658. show: true,
  5659. },
  5660. data: optionData.yAxis,
  5661. },
  5662. ],
  5663. xAxis: [
  5664. {
  5665. show: false,
  5666. },
  5667. ],
  5668. series: optionData.series,
  5669. }
  5670. myChart.setOption(option)
  5671. tools.loopShowTooltip(myChart, option, {
  5672. interval: 500,
  5673. loopSeries: true,
  5674. });
  5675. }
  5676. },
  5677. initProjectList () {
  5678. let dataList = []
  5679. center8.map(item => {
  5680. if (this.versions) {
  5681. dataList.push([item.office, item.name, this.yuanChange(item.value) + '亿', item.typeno])
  5682. } else {
  5683. dataList.push([item.office, item.name, item.value + '亿'])
  5684. }
  5685. })
  5686. this.storageRecordConfig2.data = dataList
  5687. this.storageRecordConfig2 = { ...this.storageRecordConfig2 }
  5688. },
  5689. // 大屏三
  5690. initChartR1 () {
  5691. let that = this
  5692. that.right1Chart = echarts.init(this.$refs['echartR1'])
  5693. that.right1Chart.on('showTip', (params) => {
  5694. // 如果是7或者15并且满足防抖则切换
  5695. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd) {
  5696. that.echartR1Fd = false
  5697. setTimeout(() => {
  5698. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  5699. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  5700. that.right1Chart.setOption(option);
  5701. // 防止勿刷新做的防抖
  5702. setTimeout(() => {
  5703. that.echartR1Fd = true
  5704. }, 2000)
  5705. }, 1900);
  5706. // 如果是17表示到了最后一个,那么重新来一遍
  5707. } else if (params.dataIndex == 17 && that.echartR1Fd) {
  5708. that.echartR1Fd = false
  5709. setTimeout(() => {
  5710. option.dataZoom[0].endValue = 0
  5711. option.dataZoom[0].startValue = 5
  5712. that.right1Chart.setOption(option);
  5713. // 防止勿刷新做的防抖
  5714. setTimeout(() => {
  5715. that.echartR1Fd = true
  5716. }, 2000)
  5717. }, 1900)
  5718. }
  5719. })
  5720. let option = {
  5721. tooltip: {
  5722. formatter: data => {
  5723. return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}:${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${data[3].seriesName}:${data[3].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[4].color.colorStops[0].color}"></span> ${data[4].seriesName}:${data[4].value}亿`
  5724. },
  5725. textStyle: {
  5726. color: '#FFF', // 文字的颜色
  5727. fontSize: '20', // 文字字体大小
  5728. fontFamily: 'Microsoft YaHei'
  5729. },
  5730. trigger: 'axis',
  5731. axisPointer: {
  5732. // type: 'cross',',
  5733. },
  5734. },
  5735. dataZoom: [
  5736. {
  5737. // start: 9,//默认为@
  5738. // end: 100,//黑认认为1@0
  5739. type: "slider",
  5740. show: false,
  5741. // xAxisIndex: [0]
  5742. handlesize: 0,//滑动条的 左右2个滑动条的大小
  5743. startValue: 5,// 初始显示值
  5744. endValue: 0,// 结束显示值
  5745. height: 10,//组件高度
  5746. left: "5%",
  5747. right: "4%",//右边的距离
  5748. bottom: "25%",//底边的距离
  5749. borderColor: "#939",
  5750. fillerColor: "#269cdb",
  5751. borderRadius: 5,
  5752. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  5753. showDataShadow: false,//是否显示数据阴影
  5754. showDetail: false,//即拖拽时候是否显示详细数值信息
  5755. truerealtime: true,//是否实时更新
  5756. filterMode: "filter"
  5757. }, {
  5758. type: 'inside',
  5759. show: true,
  5760. start: 1,
  5761. end: 100,
  5762. zoomOnMouseWheel: false, //滚轮是否触发缩放
  5763. moveOnMouseMove: false, //鼠标滚轮触发滚动
  5764. }
  5765. ],
  5766. grid: {
  5767. top: '10%',
  5768. right: '3%',
  5769. left: '5%',
  5770. bottom: '5%',
  5771. },
  5772. legend: {
  5773. data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
  5774. x: 'center',
  5775. y: '0px',
  5776. textStyle: {
  5777. color: '#fff',
  5778. fontSize: "20",
  5779. fontFamily: 'Microsoft YaHei'
  5780. },
  5781. },
  5782. xAxis: {
  5783. data: commonCompany,
  5784. // data: right4.map(item => item.name),
  5785. axisLine: {
  5786. show: true, //隐藏X轴轴线
  5787. lineStyle: {
  5788. color: '#005094',
  5789. width: 1,
  5790. },
  5791. },
  5792. axisTick: {
  5793. show: false, //隐藏X轴刻度
  5794. },
  5795. axisLabel: {
  5796. show: true,
  5797. // rotate: 40,
  5798. textStyle: {
  5799. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  5800. fontSize: "20",
  5801. fontFamily: 'Microsoft YaHei'
  5802. },
  5803. },
  5804. },
  5805. yAxis: [
  5806. {
  5807. type: 'value',
  5808. name: '亿',
  5809. nameTextStyle: {
  5810. color: 'rgba(255,255,255,0.6)',
  5811. },
  5812. splitLine: {
  5813. show: true,
  5814. lineStyle: {
  5815. color: '#68b4dd66',
  5816. type: 'dashed',
  5817. },
  5818. },
  5819. axisLine: {
  5820. show: true,
  5821. lineStyle: {
  5822. color: '#3D7495',
  5823. },
  5824. },
  5825. axisLabel: {
  5826. show: true,
  5827. textStyle: {
  5828. color: '#fff',
  5829. fontSize: "20",
  5830. fontFamily: 'Microsoft YaHei'
  5831. },
  5832. },
  5833. nameTextStyle: {
  5834. color: '#fff',
  5835. fontSize: 20,
  5836. fontFamily: 'Microsoft YaHei'
  5837. },
  5838. },
  5839. ],
  5840. series: [
  5841. {
  5842. name: '预算额',
  5843. type: 'bar',
  5844. barWidth: 10,
  5845. itemStyle: {
  5846. normal: {
  5847. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5848. {
  5849. offset: 0,
  5850. color: '#064F78',
  5851. },
  5852. {
  5853. offset: 1,
  5854. color: '#082550',
  5855. },
  5856. ]),
  5857. },
  5858. },
  5859. data: right4.map(item => item.value),
  5860. },
  5861. {
  5862. name: '已签合同额',
  5863. type: 'bar',
  5864. barWidth: 10,
  5865. itemStyle: {
  5866. normal: {
  5867. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5868. {
  5869. offset: 0,
  5870. color: '#BDB35D',
  5871. },
  5872. {
  5873. offset: 1,
  5874. color: '#082550',
  5875. },
  5876. ]),
  5877. },
  5878. },
  5879. data: right4.map(item => item.value2),
  5880. },
  5881. {
  5882. name: '产值认定额',
  5883. type: 'bar',
  5884. barWidth: 10,
  5885. itemStyle: {
  5886. normal: {
  5887. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5888. {
  5889. offset: 0,
  5890. color: '#623726',
  5891. },
  5892. {
  5893. offset: 1,
  5894. color: '#082550',
  5895. },
  5896. ]),
  5897. },
  5898. },
  5899. data: right4.map(item => item.value3),
  5900. },
  5901. {
  5902. name: '结算额',
  5903. type: 'bar',
  5904. barWidth: 10,
  5905. itemStyle: {
  5906. normal: {
  5907. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5908. {
  5909. offset: 0,
  5910. color: '#13400B',
  5911. },
  5912. {
  5913. offset: 1,
  5914. color: '#082550',
  5915. },
  5916. ]),
  5917. },
  5918. },
  5919. data: right4.map(item => item.value4),
  5920. },
  5921. {
  5922. name: '付款额',
  5923. type: 'bar',
  5924. barWidth: 10,
  5925. itemStyle: {
  5926. normal: {
  5927. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5928. {
  5929. offset: 0,
  5930. color: '#B57C63',
  5931. },
  5932. {
  5933. offset: 1,
  5934. color: '#082550',
  5935. },
  5936. ]),
  5937. },
  5938. },
  5939. data: right4.map(item => item.value5),
  5940. },
  5941. ],
  5942. }
  5943. that.right1Chart.on('click', function (param) {
  5944. if (that.versions) {
  5945. that.rightAdd.modelName = 2
  5946. that.rightAdd.substraction = ''
  5947. that.rightAdd.projectStepCode = ''
  5948. that.projectNum = 314
  5949. that.rightPenetrateTwo(2, '', that.findCode(param.name), 'right')
  5950. } else {
  5951. that.projectListTipShow = true
  5952. }
  5953. })
  5954. that.right1Chart.setOption(option)
  5955. tools.loopShowTooltip(that.right1Chart, option, {
  5956. interval: 2000,
  5957. loopSeries: true,
  5958. })
  5959. },
  5960. initChartR2 () {
  5961. let that = this
  5962. const itemStyle = {
  5963. // opacity: 0.8,
  5964. shadowBlur: 10,
  5965. shadowOffsetX: 0,
  5966. shadowOffsetY: 0,
  5967. shadowColor: 'rgba(0,0,0,0.3)'
  5968. };
  5969. that.right2Chart = echarts.init(this.$refs['echartR2'])
  5970. that.right2Chart.on('showTip', (params) => {
  5971. // 如果是7或者15并且满足防抖则切换
  5972. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd) {
  5973. that.echartR2Fd = false
  5974. setTimeout(() => {
  5975. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  5976. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  5977. that.right2Chart.setOption(option);
  5978. // 防止勿刷新做的防抖
  5979. setTimeout(() => {
  5980. that.echartR2Fd = true
  5981. }, 2000)
  5982. }, 1900);
  5983. // 如果是17表示到了最后一个,那么重新来一遍
  5984. } else if (params.dataIndex == 17 && that.echartR2Fd) {
  5985. that.echartR2Fd = false
  5986. setTimeout(() => {
  5987. option.dataZoom[0].endValue = 0
  5988. option.dataZoom[0].startValue = 5
  5989. that.right2Chart.setOption(option);
  5990. // 防止勿刷新做的防抖
  5991. setTimeout(() => {
  5992. that.echartR2Fd = true
  5993. }, 2000)
  5994. }, 1900)
  5995. }
  5996. })
  5997. let option = {
  5998. color: ['#04635E', '#697143', '#4A3042'],
  5999. dataZoom: [
  6000. {
  6001. // start: 9,//默认为@
  6002. // end: 100,//黑认认为1@0
  6003. type: "slider",
  6004. show: false,
  6005. // xAxisIndex: [0]
  6006. handlesize: 0,//滑动条的 左右2个滑动条的大小
  6007. startValue: 5,// 初始显示值
  6008. endValue: 0,// 结束显示值
  6009. height: 10,//组件高度
  6010. left: "5%",
  6011. right: "4%",//右边的距离
  6012. bottom: "25%",//底边的距离
  6013. borderColor: "#939",
  6014. fillerColor: "#269cdb",
  6015. borderRadius: 5,
  6016. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  6017. showDataShadow: false,//是否显示数据阴影
  6018. showDetail: false,//即拖拽时候是否显示详细数值信息
  6019. truerealtime: true,//是否实时更新
  6020. filterMode: "filter"
  6021. }, {
  6022. type: 'inside',
  6023. show: true,
  6024. start: 1,
  6025. end: 100,
  6026. zoomOnMouseWheel: false, //滚轮是否触发缩放
  6027. moveOnMouseMove: false, //鼠标滚轮触发滚动
  6028. }
  6029. ],
  6030. legend: {
  6031. top: 10,
  6032. data: ['正偏差', '容差', '负偏差'],
  6033. textStyle: {
  6034. fontSize: 20,
  6035. color: '#fff',
  6036. fontFamily: 'Microsoft YaHei'
  6037. }
  6038. },
  6039. textStyle: {
  6040. color: '#fff',
  6041. },
  6042. tooltip: {
  6043. show: true,
  6044. trigger: "axis",
  6045. textStyle: {
  6046. color: '#FFF', // 文字的颜色
  6047. fontSize: '20', // 文字字体大小
  6048. fontFamily: 'Microsoft YaHei'
  6049. },
  6050. formatter: data => {
  6051. return `${data[0].value[0]}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color}"></span> ${data[0].seriesName}:${data[0].data[2]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color}"></span> ${data[1].seriesName}:${data[1].data[2]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color}"></span> ${data[2].seriesName}:${data[2].data[2]}亿`
  6052. },
  6053. axisPointer: {
  6054. // // type: 'cross',',
  6055. },
  6056. },
  6057. grid: {
  6058. top: '10%',
  6059. right: '4%',
  6060. left: '5%',
  6061. bottom: '5%',
  6062. },
  6063. yAxis: {
  6064. name: '',
  6065. splitLine: {
  6066. show: true,
  6067. lineStyle: {
  6068. color: '#68b4dd66',
  6069. type: 'dashed',
  6070. },
  6071. },
  6072. axisLine: {
  6073. show: false
  6074. },
  6075. axisLabel: {
  6076. show: true,
  6077. formatter: '{value}%',
  6078. textStyle: {
  6079. color: '#fff',
  6080. fontSize: '20',
  6081. fontFamily: 'Microsoft YaHei'
  6082. },
  6083. },
  6084. nameTextStyle: {
  6085. color: '#fff',
  6086. fontSize: 20,
  6087. fontFamily: 'Microsoft YaHei'
  6088. },
  6089. },
  6090. xAxis: {
  6091. data: commonCompany,
  6092. // data: right5[0].map(item => item[0]),
  6093. axisLine: {
  6094. show: true, //隐藏X轴轴线
  6095. lineStyle: {
  6096. color: '#005094',
  6097. width: 1,
  6098. },
  6099. },
  6100. splitLine: {
  6101. show: true,
  6102. lineStyle: {
  6103. color: '#68b4dd66',
  6104. type: 'dashed',
  6105. },
  6106. },
  6107. axisTick: {
  6108. show: false, //隐藏X轴刻度
  6109. },
  6110. axisLabel: {
  6111. show: true,
  6112. // rotate: 40,
  6113. padding: [0, 0, 0, 0],
  6114. textStyle: {
  6115. color: '#fff', //X轴文字颜色
  6116. fontSize: 20,
  6117. fontFamily: 'Microsoft YaHei'
  6118. },
  6119. },
  6120. },
  6121. series: [
  6122. {
  6123. name: '正偏差',
  6124. type: 'scatter',
  6125. itemStyle: itemStyle,
  6126. data: right5[0],
  6127. symbolSize: function (data) {
  6128. return Math.sqrt(Math.abs(data[2])) * 9;
  6129. },
  6130. },
  6131. {
  6132. name: '容差',
  6133. type: 'scatter',
  6134. itemStyle: itemStyle,
  6135. data: right5[1],
  6136. symbolSize: function (data) {
  6137. return Math.sqrt(Math.abs(data[2])) * 9;
  6138. },
  6139. },
  6140. {
  6141. name: '负偏差',
  6142. type: 'scatter',
  6143. itemStyle: itemStyle,
  6144. data: right5[2],
  6145. symbolSize: function (data) {
  6146. return Math.sqrt(Math.abs(data[2])) * 9;
  6147. },
  6148. }
  6149. ]
  6150. }
  6151. that.right2Chart.on('click', function (param) {
  6152. if (that.versions) {
  6153. that.rightAdd.modelName = 1
  6154. that.rightAdd.substraction = param.seriesName == '正偏差' ? 1 : param.seriesName == '容差' ? 2 : 3
  6155. that.rightAdd.projectStepCode = ''
  6156. that.projectNum = 313
  6157. that.rightPenetrateTwo(1, param.seriesName == '正偏差' ? 1 : param.seriesName == '容差' ? 2 : 3, that.findCode(param.name), 'right')
  6158. } else {
  6159. that.projectListTipShow = true
  6160. }
  6161. })
  6162. that.right2Chart.setOption(option)
  6163. tools.loopShowTooltip(that.right2Chart, option, {
  6164. interval: 2000,
  6165. loopSeries: true,
  6166. })
  6167. },
  6168. initChartR3 () {
  6169. let that = this
  6170. that.right3Chart = echarts.init(this.$refs['echartR3'])
  6171. that.right3Chart.on('showTip', (params) => {
  6172. this.echartR4Chart ? this.echartR4Chart.dispose() : ''
  6173. this.echartR5Chart ? this.echartR5Chart.dispose() : ''
  6174. that.initChartR4(params.dataIndex)
  6175. that.initChartR5(params.dataIndex)
  6176. // 如果是7或者15并且满足防抖则切换
  6177. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR3Fd) {
  6178. that.echartR3Fd = false
  6179. setTimeout(() => {
  6180. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  6181. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  6182. that.right3Chart.setOption(option);
  6183. // 防止勿刷新做的防抖
  6184. setTimeout(() => {
  6185. that.echartR3Fd = true
  6186. }, 2000)
  6187. }, 7900);
  6188. // 如果是17表示到了最后一个,那么重新来一遍
  6189. } else if (params.dataIndex == 17 && that.echartR3Fd) {
  6190. that.echartR3Fd = false
  6191. setTimeout(() => {
  6192. option.dataZoom[0].endValue = 0
  6193. option.dataZoom[0].startValue = 5
  6194. that.right3Chart.setOption(option);
  6195. // 防止勿刷新做的防抖
  6196. setTimeout(() => {
  6197. that.echartR3Fd = true
  6198. }, 2000)
  6199. }, 7900)
  6200. }
  6201. })
  6202. let option = {
  6203. tooltip: {
  6204. formatter: data => {
  6205. return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}:${data[2].value}亿`
  6206. },
  6207. trigger: 'axis',
  6208. axisPointer: {
  6209. // type: 'cross',',
  6210. },
  6211. position: (params) => {
  6212. return [params[0] + 10, 60]
  6213. },
  6214. textStyle: {
  6215. color: '#FFF', // 文字的颜色
  6216. fontSize: '20', // 文字字体大小
  6217. fontFamily: 'Microsoft YaHei'
  6218. },
  6219. confine: true
  6220. },
  6221. dataZoom: [
  6222. {
  6223. // start: 9,//默认为@
  6224. // end: 100,//黑认认为1@0
  6225. type: "slider",
  6226. show: false,
  6227. // xAxisIndex: [0]
  6228. handlesize: 0,//滑动条的 左右2个滑动条的大小
  6229. startValue: 5,// 初始显示值
  6230. endValue: 0,// 结束显示值
  6231. height: 10,//组件高度
  6232. left: "5%",
  6233. right: "4%",//右边的距离
  6234. bottom: "25%",//底边的距离
  6235. borderColor: "#939",
  6236. fillerColor: "#269cdb",
  6237. borderRadius: 5,
  6238. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  6239. showDataShadow: false,//是否显示数据阴影
  6240. showDetail: false,//即拖拽时候是否显示详细数值信息
  6241. truerealtime: true,//是否实时更新
  6242. filterMode: "filter"
  6243. }, {
  6244. type: 'inside',
  6245. show: true,
  6246. start: 1,
  6247. end: 100,
  6248. zoomOnMouseWheel: false, //滚轮是否触发缩放
  6249. moveOnMouseMove: false, //鼠标滚轮触发滚动
  6250. }
  6251. ],
  6252. grid: {
  6253. top: '25%',
  6254. right: '3%',
  6255. left: '10%',
  6256. bottom: '20%',
  6257. },
  6258. legend: {
  6259. data: ["低风险", "中风险", '高风险'],
  6260. x: 'center',
  6261. y: '15px',
  6262. textStyle: {
  6263. // color: 'rgba(250,250,250,0.6)',
  6264. color: '#fff',
  6265. fontSize: "20",
  6266. fontFamily: 'Microsoft YaHei'
  6267. },
  6268. },
  6269. xAxis: {
  6270. data: commonCompany,
  6271. // data: right4.map(item => item.name),
  6272. axisLine: {
  6273. show: true, //隐藏X轴轴线
  6274. lineStyle: {
  6275. color: '#005094',
  6276. width: 1,
  6277. },
  6278. },
  6279. axisTick: {
  6280. show: false, //隐藏X轴刻度
  6281. },
  6282. axisLabel: {
  6283. show: true,
  6284. rotate: 40,
  6285. textStyle: {
  6286. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  6287. fontSize: '20',
  6288. fontFamily: 'Microsoft YaHei'
  6289. },
  6290. },
  6291. },
  6292. yAxis: [
  6293. {
  6294. type: 'value',
  6295. name: '亿',
  6296. nameTextStyle: {
  6297. color: 'rgba(255,255,255,0.6)',
  6298. },
  6299. splitLine: {
  6300. show: true,
  6301. lineStyle: {
  6302. color: '#68b4dd66',
  6303. type: 'dashed',
  6304. },
  6305. },
  6306. axisLine: {
  6307. show: true,
  6308. lineStyle: {
  6309. color: '#3D7495',
  6310. },
  6311. },
  6312. axisLabel: {
  6313. show: true,
  6314. textStyle: {
  6315. color: '#fff',
  6316. fontSize: '20',
  6317. fontFamily: 'Microsoft YaHei'
  6318. },
  6319. },
  6320. nameTextStyle: {
  6321. color: '#fff',
  6322. fontSize: 20,
  6323. fontFamily: 'Microsoft YaHei'
  6324. },
  6325. },
  6326. ],
  6327. series: [
  6328. {
  6329. name: '高风险',
  6330. type: 'bar',
  6331. stack: 'Ad',
  6332. barWidth: 10,
  6333. itemStyle: {
  6334. normal: {
  6335. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6336. {
  6337. offset: 0,
  6338. color: '#4A3042',
  6339. },
  6340. {
  6341. offset: 1,
  6342. color: '#4A3042',
  6343. },
  6344. ]),
  6345. },
  6346. },
  6347. data: right6.map(item => item.value),
  6348. },
  6349. {
  6350. name: '中风险',
  6351. type: 'bar',
  6352. stack: 'Ad',
  6353. barWidth: 10,
  6354. itemStyle: {
  6355. normal: {
  6356. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6357. {
  6358. offset: 0,
  6359. color: '#697143',
  6360. },
  6361. {
  6362. offset: 1,
  6363. color: '#697143',
  6364. },
  6365. ]),
  6366. },
  6367. },
  6368. data: right6.map(item => item.value2),
  6369. },
  6370. {
  6371. name: '低风险',
  6372. type: 'bar',
  6373. stack: 'Ad',
  6374. barWidth: 10,
  6375. itemStyle: {
  6376. normal: {
  6377. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6378. {
  6379. offset: 0,
  6380. color: '#04635E',
  6381. },
  6382. {
  6383. offset: 1,
  6384. color: '#04635E',
  6385. },
  6386. ]),
  6387. },
  6388. },
  6389. data: right6.map(item => item.value3),
  6390. },
  6391. ],
  6392. }
  6393. that.right3Chart.on('click', function (param) {
  6394. if (that.versions) {
  6395. that.rightAdd.modelName = 3
  6396. that.rightAdd.substraction = ''
  6397. that.rightAdd.projectStepCode = ''
  6398. that.projectNum = 315
  6399. that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name), 'right')
  6400. } else {
  6401. that.projectListTipShow = true
  6402. }
  6403. })
  6404. that.right3Chart.setOption(option)
  6405. tools.loopShowTooltip(that.right3Chart, option, {
  6406. interval: 8000,
  6407. loopSeries: true,
  6408. })
  6409. },
  6410. initChartR4 (indexValue) {
  6411. this.echartR4Chart = echarts.init(this.$refs['echartR4'])
  6412. option = {
  6413. title: {
  6414. text: ''
  6415. },
  6416. radar: {
  6417. center: ['50%', '50%'],
  6418. radius: 135,
  6419. indicator: [
  6420. { name: '安全风险', max: 100000 },
  6421. { name: '付款风险', max: 100000 },
  6422. { name: '合同风险', max: 100000 },
  6423. { name: '结算风险', max: 100000 },
  6424. { name: '进度风险', max: 100000 },
  6425. { name: '质量风险', max: 100000 },
  6426. ],
  6427. axisLine: { // 设置雷达图中间射线的颜色
  6428. lineStyle: {
  6429. color: '#887d33',
  6430. },
  6431. },
  6432. splitLine: { //网格颜色设置
  6433. show: true,
  6434. lineStyle: {
  6435. width: 1,
  6436. color: ['#871b1a', '#638f41', '#d29e35', '#b6802b']
  6437. },
  6438. },
  6439. name: { //修改indicator文字的颜色
  6440. textStyle: {
  6441. color: "#fff",
  6442. fontSize: '20',
  6443. fontFamily: 'Microsoft YaHei'
  6444. }
  6445. },
  6446. splitNumber: 4, //有几个圈
  6447. splitArea: { //设置图表颜色,show的值为true
  6448. show: true,
  6449. areaStyle: {
  6450. // color:"#c1ddf8", //一般设置方式
  6451. //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
  6452. //a ,b,c,d值可为0,1 a:1表示arr中的颜色右到左;c:1 arr中的颜色左到右
  6453. //b:1表示arr中的颜色下到上;d:1表示arr中的颜色上到下
  6454. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  6455. // { offset: 0, color: '#887D33' }, // 0% 处的颜色
  6456. // { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色
  6457. // { offset: 1, color: '#430705' }// 100% 处的颜色
  6458. // ], false)
  6459. color: ['#638f41', '#887d33', '#7d4216', '#430705'],
  6460. }
  6461. }
  6462. },
  6463. series: [
  6464. {
  6465. name: '',
  6466. type: 'radar',
  6467. symbol: 'circle', // 单个数值点的样式,还可以取值'rect','angle'等
  6468. symbolSize: 0, // 数值点的大小
  6469. data: [
  6470. {
  6471. value: right7[indexValue],
  6472. name: '安全风险',
  6473. itemStyle: { //该数值区域样式设置
  6474. normal: {
  6475. color: 'rgb(44,198,255,0.8)', //背景颜色,还需设置areaStyle
  6476. lineStyle: {
  6477. color: 'rgb(44,198,255,0.8)', //边框颜色
  6478. },
  6479. },
  6480. },
  6481. label: { //显示value中具体的数值
  6482. normal: {
  6483. show: false,
  6484. textStyle: { //更改数值样式
  6485. color: '#43EDE3'
  6486. }
  6487. },
  6488. },
  6489. areaStyle: { //设置区域背景颜色透明度
  6490. normal: {
  6491. width: 1,
  6492. opacity: 0.8,
  6493. },
  6494. },
  6495. }
  6496. ]
  6497. }
  6498. ]
  6499. };
  6500. // tools.loopShowTooltip(myChart, option, {
  6501. // interval: 2000,
  6502. // loopSeries: true,
  6503. // });
  6504. this.echartR4Chart.setOption(option)
  6505. },
  6506. initChartR5 () {
  6507. this.echartR5Chart = echarts.init(this.$refs['echartR5'])
  6508. let option = {
  6509. tooltip: {
  6510. formatter: data => {
  6511. return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}:${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${data[3].seriesName}:${data[3].value}亿`
  6512. },
  6513. trigger: 'axis',
  6514. axisPointer: {
  6515. // type: 'cross',',
  6516. },
  6517. textStyle: {
  6518. color: '#FFF', // 文字的颜色
  6519. fontSize: '20', // 文字字体大小
  6520. fontFamily: 'Microsoft YaHei'
  6521. },
  6522. },
  6523. grid: {
  6524. top: '15%',
  6525. right: '3%',
  6526. left: '5%',
  6527. bottom: '35',
  6528. },
  6529. legend: {
  6530. data: ["预算额", "合同额", "结算额", "支付额"],
  6531. x: 'center',
  6532. y: '10px',
  6533. textStyle: {
  6534. // color: 'rgba(250,250,250,0.6)',
  6535. color: '#fff',
  6536. fontSize: "20",
  6537. fontFamily: 'Microsoft YaHei'
  6538. },
  6539. },
  6540. xAxis: {
  6541. data: ['设备费', '设计费', '施工费', '材料费'],
  6542. axisLine: {
  6543. show: true, //隐藏X轴轴线
  6544. lineStyle: {
  6545. color: '#005094',
  6546. width: 1,
  6547. },
  6548. },
  6549. axisTick: {
  6550. show: false, //隐藏X轴刻度
  6551. },
  6552. axisLabel: {
  6553. show: true,
  6554. // rotate: 40,
  6555. textStyle: {
  6556. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  6557. fontSize: '20', // 文字字体大小
  6558. fontFamily: 'Microsoft YaHei'
  6559. },
  6560. },
  6561. },
  6562. yAxis: [
  6563. {
  6564. type: 'value',
  6565. name: '亿',
  6566. nameTextStyle: {
  6567. color: 'rgba(255,255,255,0.6)',
  6568. },
  6569. splitLine: {
  6570. show: true,
  6571. lineStyle: {
  6572. color: '#68b4dd66',
  6573. type: 'dashed',
  6574. },
  6575. },
  6576. axisLine: {
  6577. show: true,
  6578. lineStyle: {
  6579. color: '#3D7495',
  6580. },
  6581. },
  6582. axisLabel: {
  6583. show: true,
  6584. textStyle: {
  6585. color: '#fff',
  6586. fontSize: '20', // 文字字体大小
  6587. fontFamily: 'Microsoft YaHei'
  6588. },
  6589. },
  6590. nameTextStyle: {
  6591. color: '#fff',
  6592. fontSize: 20,
  6593. fontFamily: 'Microsoft YaHei'
  6594. },
  6595. },
  6596. ],
  6597. series: [
  6598. {
  6599. name: '预算额',
  6600. type: 'bar',
  6601. barWidth: 10,
  6602. itemStyle: {
  6603. normal: {
  6604. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6605. {
  6606. offset: 0,
  6607. color: '#064F78',
  6608. },
  6609. {
  6610. offset: 1,
  6611. color: '#082550',
  6612. },
  6613. ]),
  6614. },
  6615. },
  6616. data: right8.map(item => item.value),
  6617. },
  6618. {
  6619. name: '合同额',
  6620. type: 'bar',
  6621. barWidth: 10,
  6622. itemStyle: {
  6623. normal: {
  6624. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6625. {
  6626. offset: 0,
  6627. color: '#BDB35D',
  6628. },
  6629. {
  6630. offset: 1,
  6631. color: '#082550',
  6632. },
  6633. ]),
  6634. },
  6635. },
  6636. data: right8.map(item => item.value2),
  6637. },
  6638. {
  6639. name: '结算额',
  6640. type: 'bar',
  6641. barWidth: 10,
  6642. itemStyle: {
  6643. normal: {
  6644. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6645. {
  6646. offset: 0,
  6647. color: '#623726',
  6648. },
  6649. {
  6650. offset: 1,
  6651. color: '#082550',
  6652. },
  6653. ]),
  6654. },
  6655. },
  6656. data: right8.map(item => item.value3),
  6657. },
  6658. {
  6659. name: '支付额',
  6660. type: 'bar',
  6661. barWidth: 10,
  6662. itemStyle: {
  6663. normal: {
  6664. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6665. {
  6666. offset: 0,
  6667. color: '#955773',
  6668. },
  6669. {
  6670. offset: 1,
  6671. color: '#082550',
  6672. },
  6673. ]),
  6674. },
  6675. },
  6676. data: right8.map(item => item.value4),
  6677. },
  6678. ],
  6679. }
  6680. this.echartR5Chart.setOption(option)
  6681. tools.loopShowTooltip(this.echartR5Chart, option, {
  6682. interval: 2000,
  6683. loopSeries: true,
  6684. })
  6685. },
  6686. },
  6687. })