investHomeGroup.js 240 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933
  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: false, // 是否使用接口数据数据
  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 = 2023
  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][7] = item.mdnb_paymentamount / 10000
  797. that.config6.data[index][8] = 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. if (this.projectNum == 111) {
  1165. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "投资完成额(万元)"]
  1166. res.data.forEach((item, index) => {
  1167. that.config6.data[index] = []
  1168. that.config6.data[index][0] = item.orgName
  1169. that.config6.data[index][1] = item.projectname
  1170. that.config6.data[index][2] = item.tzzt
  1171. that.config6.data[index][3] = item.projectkind
  1172. that.config6.data[index][4] = item.projectkinddetail
  1173. that.config6.data[index][5] = item.amount / 10000
  1174. })
  1175. } else if (this.projectNum == 112) {
  1176. that.config6.header = ["所属集团", "项目名称", "投资主体", "产业类别I级", "产业类别II级", "投资完成额(万元)"]
  1177. res.data.forEach((item, index) => {
  1178. that.config6.data[index] = []
  1179. that.config6.data[index][0] = item.orgName
  1180. that.config6.data[index][1] = item.projectname
  1181. that.config6.data[index][2] = item.tzzt
  1182. that.config6.data[index][3] = item.cylb
  1183. that.config6.data[index][4] = item.cylb2
  1184. that.config6.data[index][5] = item.amount / 10000
  1185. })
  1186. } else if (this.projectNum == 1131) {
  1187. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "本年度计划投资额(万元)"]
  1188. res.data.forEach((item, index) => {
  1189. that.config6.data[index] = []
  1190. that.config6.data[index][0] = item.orgName
  1191. that.config6.data[index][1] = item.projectname
  1192. that.config6.data[index][2] = item.tzzt
  1193. that.config6.data[index][3] = item.projectkind
  1194. that.config6.data[index][4] = item.projectkinddetail
  1195. that.config6.data[index][5] = item.amount / 10000
  1196. })
  1197. } else if (this.projectNum == 1132) {
  1198. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "投资完成额 (万元)"]
  1199. res.data.forEach((item, index) => {
  1200. that.config6.data[index] = []
  1201. that.config6.data[index][0] = item.orgName
  1202. that.config6.data[index][1] = item.projectname
  1203. that.config6.data[index][2] = item.tzzt
  1204. that.config6.data[index][3] = item.projectkind
  1205. that.config6.data[index][4] = item.projectkinddetail
  1206. that.config6.data[index][5] = item.amount / 10000
  1207. })
  1208. } else if (this.projectNum == 114) {
  1209. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "是否“两个转型”", "本年度计划投资额 (万元)"]
  1210. res.data.forEach((item, index) => {
  1211. that.config6.data[index] = []
  1212. that.config6.data[index][0] = item.orgName
  1213. that.config6.data[index][1] = item.projectname
  1214. that.config6.data[index][2] = item.tzzt
  1215. that.config6.data[index][3] = item.projectkind
  1216. that.config6.data[index][4] = item.projectkinddetail
  1217. that.config6.data[index][5] = item.lgz
  1218. that.config6.data[index][6] = item.amount / 10000
  1219. })
  1220. } else if (this.projectNum == 115) {
  1221. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "是否“五个一体化”", "本年度计划投资额 (万元)"]
  1222. res.data.forEach((item, index) => {
  1223. that.config6.data[index] = []
  1224. that.config6.data[index][0] = item.orgName
  1225. that.config6.data[index][1] = item.projectname
  1226. that.config6.data[index][2] = item.tzzt
  1227. that.config6.data[index][3] = item.projectkind
  1228. that.config6.data[index][4] = item.projectkinddetail
  1229. that.config6.data[index][5] = item.wgy
  1230. that.config6.data[index][6] = item.amount / 10000
  1231. })
  1232. } else if (this.projectNum == 116) {
  1233. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "建设阶段", "投资完成额 (万元)"]
  1234. res.data.forEach((item, index) => {
  1235. that.config6.data[index] = []
  1236. that.config6.data[index][0] = item.orgName
  1237. that.config6.data[index][1] = item.projectname
  1238. that.config6.data[index][2] = item.tzzt
  1239. that.config6.data[index][3] = item.projectkind
  1240. that.config6.data[index][4] = item.projectkinddetail
  1241. that.config6.data[index][5] = item.mdnb_quality
  1242. that.config6.data[index][6] = item.amount / 10000
  1243. })
  1244. } else if (this.projectNum == 118) {
  1245. console.log('走了这里了',11181)
  1246. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "建设地点", "投资完成额 (万元)"]
  1247. res.data.forEach((item, index) => {
  1248. that.config6.data[index] = []
  1249. that.config6.data[index][0] = item.orgName
  1250. that.config6.data[index][1] = item.projectname
  1251. that.config6.data[index][2] = item.tzzt
  1252. that.config6.data[index][3] = item.projectkind
  1253. that.config6.data[index][4] = item.projectkinddetail
  1254. that.config6.data[index][5] = item.buildaddr
  1255. that.config6.data[index][6] = item.amount / 10000
  1256. })
  1257. }
  1258. that.config6 = { ...that.config6 }
  1259. that.projectListTipShow = true
  1260. resolve(1);
  1261. })
  1262. } else if (portType == 2) {
  1263. get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/MainPagePlanProject', value).then(res => {
  1264. that.config6.data = []
  1265. that.originalConfig6 = res.data
  1266. if (this.projectNum == 111) {
  1267. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "投资完成额(万元)"]
  1268. res.data.forEach((item, index) => {
  1269. that.config6.data[index] = []
  1270. that.config6.data[index][0] = item.orgName
  1271. that.config6.data[index][1] = item.projectname
  1272. that.config6.data[index][2] = item.tzzt
  1273. that.config6.data[index][3] = item.projectkind
  1274. that.config6.data[index][4] = item.projectkinddetail
  1275. that.config6.data[index][5] = item.amount / 10000
  1276. })
  1277. } else if (this.projectNum == 112) {
  1278. that.config6.header = ["所属集团", "项目名称", "投资主体", "产业类别I级", "产业类别II级", "投资完成额(万元)"]
  1279. res.data.forEach((item, index) => {
  1280. that.config6.data[index] = []
  1281. that.config6.data[index][0] = item.orgName
  1282. that.config6.data[index][1] = item.projectname
  1283. that.config6.data[index][2] = item.tzzt
  1284. that.config6.data[index][3] = item.cylb
  1285. that.config6.data[index][4] = item.cylb2
  1286. that.config6.data[index][5] = item.amount / 10000
  1287. })
  1288. } else if (this.projectNum == 1131) {
  1289. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "本年度计划投资额(万元)"]
  1290. res.data.forEach((item, index) => {
  1291. that.config6.data[index] = []
  1292. that.config6.data[index][0] = item.orgName
  1293. that.config6.data[index][1] = item.projectname
  1294. that.config6.data[index][2] = item.tzzt
  1295. that.config6.data[index][3] = item.projectkind
  1296. that.config6.data[index][4] = item.projectkinddetail
  1297. that.config6.data[index][5] = item.amount / 10000
  1298. })
  1299. } else if (this.projectNum == 1132) {
  1300. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "投资完成额 (万元)"]
  1301. res.data.forEach((item, index) => {
  1302. that.config6.data[index] = []
  1303. that.config6.data[index][0] = item.orgName
  1304. that.config6.data[index][1] = item.projectname
  1305. that.config6.data[index][2] = item.tzzt
  1306. that.config6.data[index][3] = item.projectkind
  1307. that.config6.data[index][4] = item.projectkinddetail
  1308. that.config6.data[index][5] = item.amount / 10000
  1309. })
  1310. } else if (this.projectNum == 114) {
  1311. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "是否“两个转型”", "本年度计划投资额 (万元)"]
  1312. res.data.forEach((item, index) => {
  1313. that.config6.data[index] = []
  1314. that.config6.data[index][0] = item.orgName
  1315. that.config6.data[index][1] = item.projectname
  1316. that.config6.data[index][2] = item.tzzt
  1317. that.config6.data[index][3] = item.projectkind
  1318. that.config6.data[index][4] = item.projectkinddetail
  1319. that.config6.data[index][5] = item.lgz
  1320. that.config6.data[index][6] = item.amount / 10000
  1321. })
  1322. } else if (this.projectNum == 115) {
  1323. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "是否“五个一体化”", "本年度计划投资额 (万元)"]
  1324. res.data.forEach((item, index) => {
  1325. that.config6.data[index] = []
  1326. that.config6.data[index][0] = item.orgName
  1327. that.config6.data[index][1] = item.projectname
  1328. that.config6.data[index][2] = item.tzzt
  1329. that.config6.data[index][3] = item.projectkind
  1330. that.config6.data[index][4] = item.projectkinddetail
  1331. that.config6.data[index][5] = item.wgy
  1332. that.config6.data[index][6] = item.amount / 10000
  1333. })
  1334. } else if (this.projectNum == 116) {
  1335. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "建设阶段", "投资完成额 (万元)"]
  1336. res.data.forEach((item, index) => {
  1337. that.config6.data[index] = []
  1338. that.config6.data[index][0] = item.orgName
  1339. that.config6.data[index][1] = item.projectname
  1340. that.config6.data[index][2] = item.tzzt
  1341. that.config6.data[index][3] = item.projectkind
  1342. that.config6.data[index][4] = item.projectkinddetail
  1343. that.config6.data[index][5] = item.mdnb_quality
  1344. that.config6.data[index][6] = item.amount / 10000
  1345. })
  1346. } else if (this.projectNum == 118) {
  1347. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "建设地点", "投资完成额 (万元)"]
  1348. res.data.forEach((item, index) => {
  1349. that.config6.data[index] = []
  1350. that.config6.data[index][0] = item.orgName
  1351. that.config6.data[index][1] = item.projectname
  1352. that.config6.data[index][2] = item.tzzt
  1353. that.config6.data[index][3] = item.projectkind
  1354. that.config6.data[index][4] = item.projectkinddetail
  1355. that.config6.data[index][5] = item.buildaddr
  1356. that.config6.data[index][6] = item.amount / 10000
  1357. })
  1358. }
  1359. that.config6 = { ...that.config6 }
  1360. that.projectListTipShow = true
  1361. resolve(1);
  1362. })
  1363. } else {
  1364. value = {
  1365. access_token: this.access_token,
  1366. mock: this.mockData,
  1367. presetYear: this.year,
  1368. type: 'investmentMap',
  1369. param: '太原市',
  1370. orgNum
  1371. }
  1372. get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/MainPageMonthReportProject', value).then(res => {
  1373. that.config6.data = []
  1374. that.originalConfig6 = res.data
  1375. if (this.projectNum == 118) {
  1376. that.config6.header = ["所属集团", "项目名称", "投资主体", "项目类型", "项目性质", "建设地点", "投资完成额 (万元)"]
  1377. res.data.forEach((item, index) => {
  1378. that.config6.data[index] = []
  1379. that.config6.data[index][0] = item.orgName
  1380. that.config6.data[index][1] = item.projectname
  1381. that.config6.data[index][2] = item.tzzt
  1382. that.config6.data[index][3] = item.projectkind
  1383. that.config6.data[index][4] = item.projectkinddetail
  1384. that.config6.data[index][5] = item.buildaddr
  1385. that.config6.data[index][6] = item.amount / 10000
  1386. })
  1387. }
  1388. that.config6 = { ...that.config6 }
  1389. that.projectListTipShow = true
  1390. resolve(1);
  1391. })
  1392. }
  1393. });
  1394. },
  1395. yellowMouse (index) {
  1396. if (index % 2 == 0) {
  1397. this.yellowCount = index
  1398. this.yellowPosition = (index / 2 - 1) * 315 + 40
  1399. this.yellowType = false
  1400. this.changeYellow()
  1401. }
  1402. },
  1403. // 回到中国地图
  1404. backChina () {
  1405. this.centerShow = false
  1406. this.mapChart.dispose()
  1407. setTimeout(() => {
  1408. this.initChinaChart()
  1409. });
  1410. },
  1411. // 找公司编码
  1412. findCode (code) {
  1413. let a = this.commonCompanyAll.find((item, index) => {
  1414. return item.simplename == code
  1415. })
  1416. return a ? a.number.slice(0, 4) : ''
  1417. },
  1418. // 找项目编码
  1419. findProjectCode (a, b, type) {
  1420. if (type == 'center') {
  1421. let c = this.originalConfig6.find(item => {
  1422. return item.projectname == a && item.tzzt == b
  1423. })
  1424. return c.projectno
  1425. } else if (type == 'right') {
  1426. let c = this.originalConfig6.find(item => {
  1427. return item.mdnb_project_name == a && item.mdnb_org == b
  1428. })
  1429. return c.mdnb_projectnumber
  1430. } else if (type == 'left') {
  1431. let c = this.originalConfig6.find(item => {
  1432. return item.mdnb_textfield6 == a && item.mdnb_textfield8 == b
  1433. })
  1434. return c.mdnb_textfield14
  1435. }
  1436. },
  1437. // 去项目看板
  1438. goLookBoard (e, f) {
  1439. console.log(e, '看看E')
  1440. if (f) {
  1441. this.boardType = f
  1442. 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)}`
  1443. } else {
  1444. 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)}`
  1445. }
  1446. // this.findProjectCode(e.row[0],e.row[2])
  1447. // 当前页面打开
  1448. // 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`
  1449. // 新页面打开
  1450. // 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')
  1451. this.boardTipShow = true
  1452. console.log(this.boardUrl, '跳转去的项目看板地址')
  1453. },
  1454. // 根据key分组
  1455. classify (arr, k) {
  1456. let map = {};
  1457. let myArr = [];
  1458. for (let i = 0; i < arr.length; i++) {
  1459. if (!map[arr[i][k]]) {
  1460. let a = {}
  1461. a[k] = arr[i][k]
  1462. a.data = [arr[i]]
  1463. myArr.push(a)
  1464. map[arr[i][k]] = arr[i]
  1465. } else {
  1466. for (let j = 0; j < myArr.length; j++) {
  1467. if (arr[i][k] === myArr[j][k]) {
  1468. myArr[j].data.push(arr[i]);
  1469. break
  1470. }
  1471. }
  1472. }
  1473. }
  1474. return myArr
  1475. },
  1476. // 两个柱状图的弹窗
  1477. showChartLTipDouble (e, location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo, portType, num, modelName, projectStepCode, substraction) {
  1478. modelName ? this.rightAdd.modelName = modelName : this.rightAdd.modelName = ''
  1479. projectStepCode ? this.rightAdd.projectStepCode = projectStepCode : this.rightAdd.projectStepCode = ''
  1480. substraction ? this.rightAdd.substraction = substraction : this.rightAdd.substraction = ''
  1481. num && (this.projectNum = num)
  1482. this.titleName = e
  1483. this.closeTap()
  1484. this.echartDoubleTipShow = true
  1485. if (this.versions) {
  1486. if (location == 'right') {
  1487. this.rightPenetrateOne()
  1488. }
  1489. if (location == 'left') {
  1490. this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, 2)
  1491. }
  1492. if (location == 'center') {
  1493. this.centerPenetrateOne(type, param, 2, typeCTwo, paramCTwo, portType)
  1494. }
  1495. } else {
  1496. setTimeout(() => {
  1497. this.initChartLTip2()
  1498. this.initChartLTip3()
  1499. })
  1500. }
  1501. },
  1502. // 单个柱状图的弹窗
  1503. showChartLTipSingle (e, location, type, param, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo, portType, num) {
  1504. this.projectNum = num
  1505. this.closeTap()
  1506. this.titleName = e
  1507. this.echartSingleTipShow = true
  1508. if (this.versions) {
  1509. if (location == 'center') {
  1510. this.centerPenetrateOne(type, param, 1, typeCTwo, paramCTwo, portType)
  1511. }
  1512. if (location == 'left') {
  1513. this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, 1, type, param)
  1514. }
  1515. } else {
  1516. setTimeout(() => {
  1517. this.initChartLTip(location)
  1518. })
  1519. }
  1520. },
  1521. initChartLTip (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo, portType) {
  1522. this.myChartTip1 = echarts.init(document.getElementById("echartSingleTip"));
  1523. let option = {
  1524. grid: {
  1525. top: 40,
  1526. right: 0,
  1527. left: 60,
  1528. bottom: 70,
  1529. },
  1530. tooltip: {
  1531. show: true,
  1532. trigger: "axis",
  1533. axisPointer: {
  1534. // 坐标轴指示器,坐标轴触发有效
  1535. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  1536. },
  1537. textStyle: {
  1538. color: '#FFF', // 文字的颜色
  1539. fontSize: '20', // 文字字体大小
  1540. fontFamily: 'Microsoft YaHei'
  1541. },
  1542. },
  1543. xAxis: {
  1544. data: commonCompany,
  1545. axisTick: {
  1546. show: false,
  1547. },
  1548. // x轴的字体颜色
  1549. axisLabel: {
  1550. rotate: 40,
  1551. textStyle: {
  1552. color: "white",
  1553. fontSize: '20',
  1554. fontFamily: 'Microsoft YaHei'
  1555. },
  1556. },
  1557. //y轴线的颜色以及宽度
  1558. axisLine: {
  1559. show: true,
  1560. lineStyle: {
  1561. color: "#1E5389",
  1562. width: 1,
  1563. type: "solid",
  1564. },
  1565. },
  1566. },
  1567. yAxis: {
  1568. name: '亿',
  1569. nameTextStyle: {//y轴上方单位的颜色
  1570. color: '#fff',
  1571. fontSize: '20',
  1572. fontFamily: 'Microsoft YaHei'
  1573. },
  1574. axisTick: {
  1575. lineStyle: {
  1576. color: "#18416F",
  1577. },
  1578. },
  1579. // y轴的字体颜色
  1580. axisLabel: {
  1581. textStyle: {
  1582. color: "white",
  1583. fontSize: '20'
  1584. },
  1585. },
  1586. splitLine: {
  1587. show: true,
  1588. lineStyle: {
  1589. color: '#68b4dd66',
  1590. type: 'dashed',
  1591. },
  1592. },
  1593. //y轴线的颜色以及宽度
  1594. axisLine: {
  1595. show: true,
  1596. lineStyle: {
  1597. color: "#1E5389",
  1598. width: 1,
  1599. type: "solid",
  1600. },
  1601. },
  1602. },
  1603. series: [
  1604. // {
  1605. // name: "2022年额度",
  1606. // type: "bar",
  1607. // 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],
  1608. // showBackground: false,
  1609. // backgroundStyle: {
  1610. // color: "#18416F",
  1611. // },
  1612. // barWidth: "10%",
  1613. // itemStyle: {
  1614. // barBorderRadius: [10, 10, 0, 0],
  1615. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1616. // {
  1617. // offset: 0,
  1618. // color: '#082550',
  1619. // },
  1620. // {
  1621. // offset: 1,
  1622. // color: '#69c0ff',
  1623. // },
  1624. // ]),
  1625. // },
  1626. // },
  1627. {
  1628. name: "总额度",
  1629. type: "bar",
  1630. data: common3,
  1631. showBackground: false,
  1632. backgroundStyle: {
  1633. color: "#18416F",
  1634. },
  1635. barWidth: "30%",
  1636. itemStyle: {
  1637. // barBorderRadius: [10, 10, 0, 0],
  1638. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1639. {
  1640. offset: 0,
  1641. color: '#082550',
  1642. },
  1643. {
  1644. offset: 1,
  1645. color: '#957DFF',
  1646. },
  1647. ]),
  1648. },
  1649. },
  1650. ],
  1651. legend: {
  1652. // data: ["2022年额度", "2023年额度"],
  1653. data: ["总额度"],
  1654. textStyle: {
  1655. // 图列内容样式
  1656. color: "#fff", // 字体颜色
  1657. fontSize: "20",
  1658. fontFamily: 'Microsoft YaHei'
  1659. },
  1660. right: 'center',
  1661. y: 5,
  1662. // 小图标的宽高
  1663. },
  1664. };
  1665. tools.loopShowTooltip(this.myChartTip1, option, {
  1666. nterval: 2000,
  1667. loopSeries: true,
  1668. })
  1669. let that = this
  1670. that.myChartTip1.on('click', function (param) {
  1671. if (that.versions) {
  1672. if (location == 'right') {
  1673. that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name))
  1674. } else if (location == 'left') {
  1675. that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum)
  1676. } else if (location == 'center') {
  1677. that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType)
  1678. }
  1679. } else {
  1680. that.projectListTipShow = true
  1681. }
  1682. })
  1683. that.myChartTip1.setOption(option);
  1684. },
  1685. initChartLTip2 (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo, portType) {
  1686. this.myChartTip2 = echarts.init(document.getElementById("echartSingleTip2"));
  1687. let option = {
  1688. grid: {
  1689. top: 40,
  1690. right: 0,
  1691. left: 60,
  1692. bottom: '15%',
  1693. },
  1694. tooltip: {
  1695. show: true,
  1696. trigger: "axis",
  1697. axisPointer: {
  1698. // 坐标轴指示器,坐标轴触发有效
  1699. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  1700. },
  1701. textStyle: {
  1702. color: '#FFF', // 文字的颜色
  1703. fontSize: '20', // 文字字体大小
  1704. fontFamily: 'Microsoft YaHei'
  1705. },
  1706. },
  1707. xAxis: {
  1708. data: this.changeLine ? commonCompany : this.lineCommonCompany,
  1709. axisTick: {
  1710. show: false,
  1711. },
  1712. // x轴的字体颜色
  1713. axisLabel: {
  1714. rotate: 40,
  1715. textStyle: {
  1716. color: "white",
  1717. fontSize: '20',
  1718. fontFamily: 'Microsoft YaHei'
  1719. },
  1720. },
  1721. //y轴线的颜色以及宽度
  1722. axisLine: {
  1723. show: true,
  1724. lineStyle: {
  1725. color: "#1E5389",
  1726. width: 1,
  1727. type: "solid",
  1728. },
  1729. },
  1730. },
  1731. yAxis: {
  1732. name: '个',
  1733. nameTextStyle: {//y轴上方单位的颜色
  1734. color: '#fff',
  1735. fontSize: '20',
  1736. fontFamily: 'Microsoft YaHei'
  1737. },
  1738. axisTick: {
  1739. lineStyle: {
  1740. color: "#18416F",
  1741. },
  1742. },
  1743. // y轴的字体颜色
  1744. axisLabel: {
  1745. textStyle: {
  1746. color: "#fff",
  1747. fontSize: '20',
  1748. fontFamily: 'Microsoft YaHei'
  1749. },
  1750. },
  1751. splitLine: {
  1752. show: true,
  1753. lineStyle: {
  1754. color: '#68b4dd66',
  1755. type: 'dashed',
  1756. },
  1757. },
  1758. //y轴线的颜色以及宽度
  1759. axisLine: {
  1760. show: true,
  1761. lineStyle: {
  1762. color: "#1E5389",
  1763. width: 1,
  1764. type: "solid",
  1765. },
  1766. },
  1767. },
  1768. series: [
  1769. {
  1770. name: "总数量",
  1771. type: this.changeLine ? "bar" : 'line',
  1772. data: common4,
  1773. showBackground: false,
  1774. backgroundStyle: {
  1775. color: "#18416F",
  1776. },
  1777. barWidth: "30%",
  1778. itemStyle: {
  1779. // barBorderRadius: [10, 10, 0, 0],
  1780. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1781. {
  1782. offset: 0,
  1783. color: '#082550',
  1784. },
  1785. {
  1786. offset: 1,
  1787. color: '#957DFF',
  1788. },
  1789. ]),
  1790. },
  1791. },
  1792. ],
  1793. legend: {
  1794. // data: ["2022年额度", "2023年额度"],
  1795. data: ["总数量"],
  1796. textStyle: {
  1797. // 图列内容样式
  1798. color: "#fff", // 字体颜色
  1799. fontSize: "20",
  1800. fontFamily: 'Microsoft YaHei'
  1801. },
  1802. right: 'center',
  1803. y: 0,
  1804. // 小图标的宽高
  1805. },
  1806. };
  1807. tools.loopShowTooltip(this.myChartTip2, option, {
  1808. nterval: 2000,
  1809. loopSeries: true,
  1810. })
  1811. let that = this
  1812. that.myChartTip2.on('click', function (param) {
  1813. if (that.versions) {
  1814. if (location == 'right') {
  1815. that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name))
  1816. } else if (location == 'left') {
  1817. that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum)
  1818. } else if (location == 'center') {
  1819. that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType)
  1820. }
  1821. } else {
  1822. that.projectListTipShow = true
  1823. }
  1824. })
  1825. that.myChartTip2.setOption(option);
  1826. },
  1827. initChartLTip3 (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo, portType) {
  1828. this.myChartTip3 = echarts.init(document.getElementById("echartSingleTip3"));
  1829. let option = {
  1830. grid: {
  1831. top: 40,
  1832. right: 0,
  1833. left: 60,
  1834. bottom: '15%',
  1835. },
  1836. tooltip: {
  1837. show: true,
  1838. trigger: "axis",
  1839. axisPointer: {
  1840. // 坐标轴指示器,坐标轴触发有效
  1841. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  1842. },
  1843. textStyle: {
  1844. color: '#FFF', // 文字的颜色
  1845. fontSize: '20', // 文字字体大小
  1846. fontFamily: 'Microsoft YaHei'
  1847. },
  1848. },
  1849. xAxis: {
  1850. data: commonCompany,
  1851. axisTick: {
  1852. show: false,
  1853. },
  1854. // x轴的字体颜色
  1855. axisLabel: {
  1856. rotate: 40,
  1857. textStyle: {
  1858. color: "#fff",
  1859. fontSize: '20',
  1860. fontFamily: 'Microsoft YaHei'
  1861. },
  1862. },
  1863. //y轴线的颜色以及宽度
  1864. axisLine: {
  1865. show: true,
  1866. lineStyle: {
  1867. color: "#1E5389",
  1868. width: 1,
  1869. type: "solid",
  1870. },
  1871. },
  1872. },
  1873. yAxis: {
  1874. name: '亿',
  1875. nameTextStyle: {//y轴上方单位的颜色
  1876. color: '#fff',
  1877. fontSize: '20',
  1878. fontFamily: 'Microsoft YaHei'
  1879. },
  1880. axisTick: {
  1881. lineStyle: {
  1882. color: "#18416F",
  1883. },
  1884. },
  1885. // y轴的字体颜色
  1886. axisLabel: {
  1887. textStyle: {
  1888. color: "#fff",
  1889. fontSize: '20',
  1890. fontFamily: 'Microsoft YaHei'
  1891. },
  1892. },
  1893. splitLine: {
  1894. show: true,
  1895. lineStyle: {
  1896. color: '#68b4dd66',
  1897. type: 'dashed',
  1898. },
  1899. },
  1900. //y轴线的颜色以及宽度
  1901. axisLine: {
  1902. show: true,
  1903. lineStyle: {
  1904. color: "#1E5389",
  1905. width: 1,
  1906. type: "solid",
  1907. },
  1908. },
  1909. },
  1910. series: [,
  1911. {
  1912. name: "总额度",
  1913. type: "bar",
  1914. data: common5,
  1915. showBackground: false,
  1916. backgroundStyle: {
  1917. color: "#18416F",
  1918. },
  1919. barWidth: "30%",
  1920. itemStyle: {
  1921. // barBorderRadius: [10, 10, 0, 0],
  1922. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1923. {
  1924. offset: 0,
  1925. color: '#082550',
  1926. },
  1927. {
  1928. offset: 1,
  1929. color: '#69c0ff',
  1930. },
  1931. ]),
  1932. },
  1933. },
  1934. ],
  1935. legend: {
  1936. data: ["总额度"],
  1937. textStyle: {
  1938. // 图列内容样式
  1939. color: "#fff", // 字体颜色
  1940. fontSize: "20",
  1941. fontFamily: 'Microsoft YaHei'
  1942. },
  1943. right: 'center',
  1944. y: 5,
  1945. },
  1946. };
  1947. tools.loopShowTooltip(this.myChartTip3, option, {
  1948. nterval: 2000,
  1949. loopSeries: true,
  1950. })
  1951. let that = this
  1952. that.myChartTip3.on('click', function (param) {
  1953. if (that.versions) {
  1954. if (location == 'right') {
  1955. that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name))
  1956. } else if (location == 'left') {
  1957. that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum)
  1958. } else if (location == 'center') {
  1959. that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType)
  1960. }
  1961. } else {
  1962. that.projectListTipShow = true
  1963. }
  1964. })
  1965. that.myChartTip3.setOption(option);
  1966. },
  1967. closeTap () {
  1968. this.changeLine = true
  1969. this.echartEnterpriseShow = false
  1970. this.mapTipShow = false
  1971. this.echartSingleTipShow = false
  1972. this.echartDoubleTipShow = false
  1973. this.projectListTipShow = false
  1974. this.myChartTip1 ? this.myChartTip1.dispose() : ''
  1975. this.myChartTip2 ? this.myChartTip2.dispose() : ''
  1976. this.myChartTip3 ? this.myChartTip3.dispose() : ''
  1977. },
  1978. //点击弹窗左半部分
  1979. popLeftClick () {
  1980. if (this.titleUrl == '2.png') {
  1981. this.titleUrl = '3.png'
  1982. } else if (this.titleUrl == '7.png') {
  1983. this.titleUrl = '8.png'
  1984. } else if (this.titleUrl == '3.png') {
  1985. this.titleUrl = '2.png'
  1986. } else if (this.titleUrl == '8.png') {
  1987. this.titleUrl = '7.png'
  1988. } else if (this.titleUrl == '5.png') {
  1989. this.titleUrl = '2.png'
  1990. } else if (this.titleUrl == '10.png') {
  1991. this.titleUrl = '7.png'
  1992. }
  1993. },
  1994. //点击弹窗右半部分
  1995. poprightClick () {
  1996. if (this.titleUrl == '2.png') {
  1997. this.titleUrl = '5.png'
  1998. } else if (this.titleUrl == '7.png') {
  1999. this.titleUrl = '10.png'
  2000. } else if (this.titleUrl == '5.png') {
  2001. this.titleUrl = '2.png'
  2002. } else if (this.titleUrl == '10.png') {
  2003. this.titleUrl = '7.png'
  2004. } else if (this.titleUrl == '3.png') {
  2005. this.titleUrl = '2.png'
  2006. } else if (this.titleUrl == '8.png') {
  2007. this.titleUrl = '7.png'
  2008. }
  2009. },
  2010. // 标题弹窗
  2011. showTitlePop (e, name) {
  2012. this.closeTap()
  2013. this.titleUrl = e
  2014. this.titleName = name
  2015. this.$nextTick(() => {
  2016. this.mapTipShow = true
  2017. })
  2018. },
  2019. changeYellow () {
  2020. this.titleList.forEach((item, index) => {
  2021. this.$set(this.titleList[index], 'type', 1)
  2022. })
  2023. this.$set(this.titleList[this.yellowCount], 'type', 2)
  2024. if (this.yellowCount == 14) {
  2025. this.yellowCount = 0
  2026. this.yellowPosition += 315
  2027. } else {
  2028. if (this.yellowCount != 0) {
  2029. this.yellowPosition += 315
  2030. } else {
  2031. this.yellowPosition = 40
  2032. }
  2033. this.yellowCount += 2
  2034. }
  2035. },
  2036. numFormat (value) {
  2037. if (!value) return '0'
  2038. // var intPart = Number(value).toFixed(0) // 获取整数部分
  2039. var intPart = parseInt(value)// 获取整数部分
  2040. var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  2041. var floatPart = '.00' // 预定义小数部分
  2042. var value2Array = value.toString().split('.')
  2043. // =2表示数据有小数位
  2044. if (value2Array.length === 2) {
  2045. floatPart = value2Array[1].toString() // 拿到小数部分
  2046. if (floatPart.length === 1) {
  2047. // 补0
  2048. return intPartFormat + '.' + floatPart + '0'
  2049. } else {
  2050. return intPartFormat + '.' + floatPart
  2051. }
  2052. } else {
  2053. return intPartFormat
  2054. }
  2055. },
  2056. changeTopColor () {
  2057. this.list = document.getElementsByClassName('row-item')
  2058. for (var i = 0; i < this.list.length; i++) {
  2059. if (i == 1) {
  2060. this.list[i].classList.add('light')
  2061. } else {
  2062. this.list[i].classList.remove('light')
  2063. }
  2064. }
  2065. this.initChartL9()
  2066. },
  2067. scrollChange (index) {
  2068. if (index == 18) {
  2069. this.count = -1
  2070. } else {
  2071. this.count = index
  2072. }
  2073. if (this.count > 12 && this.count != 18) {
  2074. this.countType = 1
  2075. } else {
  2076. this.countType = 0
  2077. }
  2078. for (var i = 0; i < this.list.length; i++) {
  2079. if (i == 2) {
  2080. this.list[i].classList.add('light')
  2081. } else {
  2082. this.list[i].classList.remove('light')
  2083. }
  2084. }
  2085. this.chartCarousel.dispose()
  2086. this.initChartL9()
  2087. },
  2088. initChartBall () {
  2089. this.left11Chart = echarts.init(this.$refs['echartBall'])
  2090. option = {
  2091. series: [
  2092. {
  2093. type: "liquidFill",
  2094. radius: "80%",
  2095. data: [left2[0], left2[0] + 0.02, left2[0] - 0.02],
  2096. amplitude: '4%',
  2097. waveLength: '20%', //波浪长度
  2098. // data: [
  2099. // {}
  2100. // ],
  2101. backgroundStyle: {
  2102. color: {
  2103. type: "radial",
  2104. x: 0.5,
  2105. y: 0.5,
  2106. r: 0.5,
  2107. // 水球体颜色
  2108. colorStops: [
  2109. {
  2110. offset: 0,
  2111. color: "#010a11",
  2112. },
  2113. {
  2114. offset: 0.9,
  2115. color: "#1a2f45",
  2116. },
  2117. {
  2118. offset: 1,
  2119. color: "#2b405a",
  2120. },
  2121. ],
  2122. globalCoord: false,
  2123. },
  2124. },
  2125. outline: {
  2126. borderDistance: 0,
  2127. itemStyle: {
  2128. borderWidth: 0,
  2129. borderColor: {
  2130. type: "linear",
  2131. x: 0,
  2132. y: 0,
  2133. x2: 0,
  2134. y2: 1,
  2135. colorStops: [
  2136. ],
  2137. globalCoord: false,
  2138. },
  2139. },
  2140. },
  2141. color: [
  2142. {
  2143. x: 0,
  2144. y: 0,
  2145. x2: 0,
  2146. y2: 1,
  2147. colorStops: [{
  2148. offset: 0,
  2149. color: '#237386',
  2150. },
  2151. {
  2152. offset: 1,
  2153. color: '#0078C8',
  2154. },],
  2155. },
  2156. {
  2157. x: 0,
  2158. y: 0,
  2159. x2: 0,
  2160. y2: 1,
  2161. colorStops: [{
  2162. offset: 0,
  2163. color: '#2F97A9',
  2164. },
  2165. {
  2166. offset: 1,
  2167. color: '#0078C8',
  2168. },],
  2169. },
  2170. {
  2171. x: 0,
  2172. y: 0,
  2173. x2: 0,
  2174. y2: 1,
  2175. colorStops: [{
  2176. offset: 0,
  2177. color: '#48E0ED',
  2178. },
  2179. {
  2180. offset: 1,
  2181. color: '#0078C8',
  2182. },],
  2183. }
  2184. ],
  2185. label: {
  2186. normal: {
  2187. textStyle: {
  2188. color: "#fff", // x轴文字颜色
  2189. fontSize: '70'
  2190. },
  2191. },
  2192. },
  2193. },
  2194. ],
  2195. };
  2196. this.left11Chart.setOption(option)
  2197. },
  2198. initChartL1 () {
  2199. this.left9Chart = echarts.init(this.$refs['echartL1'])
  2200. option = {
  2201. series: [
  2202. {
  2203. type: "liquidFill",
  2204. radius: "80%",
  2205. data: [left2[0], left2[0] + 0.02, left2[0] - 0.02],
  2206. amplitude: '4%',
  2207. // period:'1500',
  2208. waveLength: '20%', //波浪长度
  2209. // data: [
  2210. // {}
  2211. // ],
  2212. backgroundStyle: {
  2213. color: {
  2214. type: "radial",
  2215. x: 0.5,
  2216. y: 0.5,
  2217. r: 0.5,
  2218. // 水球体颜色
  2219. colorStops: [
  2220. {
  2221. offset: 0,
  2222. color: "#010a11",
  2223. },
  2224. {
  2225. offset: 0.9,
  2226. // color: "#203852",
  2227. color: "#1a2f45",
  2228. },
  2229. {
  2230. offset: 1,
  2231. // color: "#354e6d",
  2232. color: "#2b405a",
  2233. // color: "#314967",
  2234. },
  2235. ],
  2236. globalCoord: false,
  2237. },
  2238. },
  2239. outline: {
  2240. borderDistance: 0,
  2241. itemStyle: {
  2242. borderWidth: 0,
  2243. borderColor: {
  2244. type: "linear",
  2245. x: 0,
  2246. y: 0,
  2247. x2: 0,
  2248. y2: 1,
  2249. colorStops: [
  2250. ],
  2251. globalCoord: false,
  2252. },
  2253. },
  2254. },
  2255. color: [
  2256. {
  2257. x: 0,
  2258. y: 0,
  2259. x2: 0,
  2260. y2: 1,
  2261. colorStops: [{
  2262. offset: 0,
  2263. color: '#237386',
  2264. },
  2265. {
  2266. offset: 1,
  2267. color: '#0078C8',
  2268. },],
  2269. },
  2270. {
  2271. x: 0,
  2272. y: 0,
  2273. x2: 0,
  2274. y2: 1,
  2275. colorStops: [{
  2276. offset: 0,
  2277. color: '#2F97A9',
  2278. },
  2279. {
  2280. offset: 1,
  2281. color: '#0078C8',
  2282. },],
  2283. },
  2284. {
  2285. x: 0,
  2286. y: 0,
  2287. x2: 0,
  2288. y2: 1,
  2289. colorStops: [{
  2290. offset: 0,
  2291. color: '#48E0ED',
  2292. },
  2293. {
  2294. offset: 1,
  2295. color: '#0078C8',
  2296. },],
  2297. }
  2298. ],
  2299. label: {
  2300. normal: {
  2301. textStyle: {
  2302. color: "#fff", // x轴文字颜色
  2303. },
  2304. },
  2305. },
  2306. },
  2307. ],
  2308. };
  2309. this.left9Chart.setOption(option)
  2310. },
  2311. initChartL2 () {
  2312. var chartData = left5
  2313. var timer = null;
  2314. var i = 0;
  2315. let that = this
  2316. var option = {
  2317. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  2318. chart: {
  2319. type: 'pie',
  2320. backgroundColor: 'rgba(0,0,0,0)',
  2321. options3d: {
  2322. enabled: true,
  2323. alpha: 45,
  2324. //beta: 0
  2325. },
  2326. events: {
  2327. // load,图表加载完成时触发
  2328. load: function () {
  2329. var chart = this;
  2330. var points = chart.series[0].points;
  2331. var len = points.length;
  2332. timer && clearInterval(timer);
  2333. timer = setInterval(function () {
  2334. autoTooltip(points[i]);
  2335. chartData.forEach((item, index) => {
  2336. item.sliced = false
  2337. item.selected = false
  2338. if (index == i) {
  2339. // item.sliced = true
  2340. // item.selected = true
  2341. }
  2342. })
  2343. that.left1Chart.update({
  2344. series: [{
  2345. type: 'pie',
  2346. name: '占比',
  2347. point: {
  2348. events: {
  2349. click: function (e) {
  2350. that.projectNum = 2142
  2351. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2352. }
  2353. }
  2354. },
  2355. data: chartData
  2356. }]
  2357. })
  2358. i++;
  2359. if (i === len) {
  2360. i = 0;
  2361. chartData.forEach((item, index) => {
  2362. // item.sliced = false
  2363. // item.selected = false
  2364. })
  2365. that.left1Chart.update({
  2366. series: [{
  2367. type: 'pie',
  2368. name: '占比',
  2369. point: {
  2370. events: {
  2371. click: function (e) {
  2372. that.projectNum = 2142
  2373. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2374. }
  2375. }
  2376. },
  2377. data: chartData
  2378. }]
  2379. })
  2380. }
  2381. }, 2000);
  2382. },
  2383. legendItemClick: function (event) {
  2384. return true;
  2385. }
  2386. }
  2387. },
  2388. credits: {
  2389. enabled: false //去掉hightchats水印
  2390. },
  2391. legend: {
  2392. // labelFormatter: function() {
  2393. // return 123;
  2394. // },
  2395. align: 'right',//横向位置
  2396. verticalAlign: 'middle', // 纵向位置
  2397. layout: "vertical",//横排还是竖排
  2398. x: -110,
  2399. y: 90,
  2400. symbolWidth: 50,
  2401. itemStyle: {
  2402. fontSize: '20px',
  2403. color: '#fff',
  2404. x: 20,
  2405. fontWeight: 0,
  2406. fontFamily: 'Microsoft YaHei'
  2407. },
  2408. },
  2409. title: {
  2410. text: '主辅业计划占比',
  2411. style: {
  2412. color: '#fff',
  2413. fontSize: 24,
  2414. fontFamily: 'Microsoft YaHei',
  2415. },
  2416. align: 'center',
  2417. verticalAlign: "bottom",
  2418. x: -120
  2419. },
  2420. tooltip: {
  2421. crosshairs: false,
  2422. backgroundColor: 'rgba(0,0,0,0.5)',
  2423. // positioner: function(e){
  2424. // console.log(e, this)
  2425. // },
  2426. // useHTML: false, //开启html模式
  2427. style: {
  2428. color: '#fff',
  2429. fontSize: '20',
  2430. fontWeight: 0,
  2431. fontFamily: 'Microsoft YaHei'
  2432. },
  2433. formatter: function (e) {
  2434. let num = chartData[this.colorIndex].num
  2435. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2436. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2437. },
  2438. //pointFormat:
  2439. },
  2440. plotOptions: {
  2441. pie: {
  2442. allowPointSelect: true,
  2443. showInLegend: true, // 图例
  2444. cursor: 'pointer',
  2445. size: 220,
  2446. innerSize: 150, //环形图中间空白,0为饼图
  2447. depth: 25, //立体高度
  2448. slicedOffset: 21, //动画距离
  2449. dataLabels: {
  2450. enabled: false, // 是否展示指示线
  2451. format: '{point.name}: {point.percentage}'
  2452. }
  2453. },
  2454. },
  2455. series: [{
  2456. type: 'pie',
  2457. name: '占比',
  2458. center: ['50%', '50%'],
  2459. point: {
  2460. events: {
  2461. click: function (e) { //点击事件
  2462. that.projectNum = 2142
  2463. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2464. },
  2465. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2466. chartData.forEach((item, index) => {
  2467. // item.sliced = false
  2468. // item.selected = false
  2469. })
  2470. // chartData[e.target.index].sliced = true
  2471. // chartData[e.target.index].selected = true
  2472. that.left1Chart.update({
  2473. series: [{
  2474. type: 'pie',
  2475. name: '占比',
  2476. point: {
  2477. events: {
  2478. click: function (e) {
  2479. that.projectNum = 2142
  2480. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2481. }
  2482. }
  2483. },
  2484. data: chartData
  2485. }]
  2486. })
  2487. timer && clearInterval(timer);
  2488. },
  2489. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2490. var points = that.left1Chart.series[0].points;
  2491. var len = points.length;
  2492. timer && clearInterval(timer);
  2493. timer = setInterval(function () {
  2494. autoTooltip(points[i]);
  2495. chartData.forEach((item, index) => {
  2496. // item.sliced = false
  2497. // item.selected = false
  2498. if (index == i) {
  2499. // item.sliced = true
  2500. // item.selected = true
  2501. }
  2502. })
  2503. that.left1Chart.update({
  2504. series: [{
  2505. type: 'pie',
  2506. name: '占比',
  2507. point: {
  2508. events: {
  2509. click: function (e) {
  2510. that.projectNum = 2142
  2511. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2512. }
  2513. }
  2514. },
  2515. data: chartData
  2516. }]
  2517. })
  2518. i++;
  2519. if (i === len) {
  2520. i = 0;
  2521. chartData.forEach((item, index) => {
  2522. item.sliced = false
  2523. item.selected = false
  2524. })
  2525. that.left1Chart.update({
  2526. series: [{
  2527. type: 'pie',
  2528. name: '占比',
  2529. point: {
  2530. events: {
  2531. click: function (e) {
  2532. that.projectNum = 2142
  2533. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2534. }
  2535. }
  2536. },
  2537. data: chartData
  2538. }]
  2539. })
  2540. }
  2541. }, 2000);
  2542. }
  2543. }
  2544. },
  2545. data: chartData
  2546. }]
  2547. }
  2548. that.left1Chart = Highcharts.chart('echartL2', option);
  2549. function autoTooltip (point) {
  2550. that.left1Chart.tooltip.refresh(point);
  2551. }
  2552. },
  2553. initChartL3 () {
  2554. var chartData = left6
  2555. var timer = null;
  2556. var i = 0;
  2557. let that = this
  2558. that.left2Chart = Highcharts.chart('echartL3', {
  2559. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  2560. chart: {
  2561. type: 'pie',
  2562. backgroundColor: 'rgba(0,0,0,0)',
  2563. options3d: {
  2564. enabled: true,
  2565. alpha: 45,
  2566. //beta: 0
  2567. },
  2568. events: {
  2569. // load,图表加载完成时触发
  2570. load: function () {
  2571. var chart = this;
  2572. var points = chart.series[0].points;
  2573. var len = points.length;
  2574. timer && clearInterval(timer);
  2575. timer = setInterval(function () {
  2576. autoTooltip(points[i]);
  2577. chartData.forEach((item, index) => {
  2578. item.sliced = false
  2579. item.selected = false
  2580. if (index == i) {
  2581. // item.sliced = true
  2582. // item.selected = true
  2583. }
  2584. })
  2585. that.left2Chart.update({
  2586. series: [{
  2587. type: 'pie',
  2588. name: '占比',
  2589. point: {
  2590. events: {
  2591. click: function (e) {
  2592. that.projectNum = 2143
  2593. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2594. }
  2595. }
  2596. },
  2597. data: chartData
  2598. }]
  2599. })
  2600. i++;
  2601. if (i === len) {
  2602. i = 0;
  2603. chartData.forEach((item, index) => {
  2604. // item.sliced = false
  2605. // item.selected = false
  2606. })
  2607. that.left2Chart.update({
  2608. series: [{
  2609. type: 'pie',
  2610. name: '占比',
  2611. point: {
  2612. events: {
  2613. click: function (e) {
  2614. that.projectNum = 2143
  2615. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2616. }
  2617. }
  2618. },
  2619. data: chartData
  2620. }]
  2621. })
  2622. }
  2623. }, 2000);
  2624. },
  2625. legendItemClick: function (event) {
  2626. that.projectNum = 2143
  2627. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2628. return true;
  2629. }
  2630. }
  2631. },
  2632. credits: {
  2633. enabled: false //去掉hightchats水印
  2634. },
  2635. legend: {
  2636. // labelFormatter: function() {
  2637. // return 123;
  2638. // },
  2639. align: 'right',//横向位置
  2640. verticalAlign: 'middle', // 纵向位置
  2641. layout: "vertical",//横排还是竖排
  2642. x: -70,
  2643. y: 90,
  2644. symbolWidth: 50,
  2645. itemStyle: {
  2646. fontSize: '20px',
  2647. color: '#fff',
  2648. x: 20,
  2649. fontWeight: 0,
  2650. fontFamily: 'Microsoft YaHei'
  2651. },
  2652. },
  2653. title: {
  2654. text: '项目管理类型',
  2655. style: {
  2656. color: '#fff',
  2657. fontSize: 24,
  2658. fontFamily: 'Microsoft YaHei'
  2659. },
  2660. align: 'center',
  2661. verticalAlign: "bottom",
  2662. x: -120
  2663. },
  2664. tooltip: {
  2665. crosshairs: true,
  2666. backgroundColor: 'rgba(0,0,0,0.5)',
  2667. // positioner: function(e){
  2668. // console.log(e, this)
  2669. // },
  2670. useHTML: false, //开启html模式
  2671. style: {
  2672. color: '#fff',
  2673. fontSize: '20',
  2674. fontFamily: 'Microsoft YaHei'
  2675. },
  2676. formatter: function (e) {
  2677. //console.log(this)
  2678. let num = chartData[this.colorIndex].num
  2679. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2680. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2681. },
  2682. //pointFormat:
  2683. },
  2684. plotOptions: {
  2685. pie: {
  2686. allowPointSelect: true,
  2687. showInLegend: true, // 图例
  2688. cursor: 'pointer',
  2689. size: 220,
  2690. innerSize: 150, //环形图中间空白,0为饼图
  2691. depth: 25, //立体高度
  2692. slicedOffset: 21, //动画距离
  2693. dataLabels: {
  2694. enabled: false, // 是否展示指示线
  2695. format: '{point.name}: {point.percentage}'
  2696. }
  2697. },
  2698. },
  2699. series: [{
  2700. type: 'pie',
  2701. name: '占比',
  2702. // center: ['70%', '50%'],
  2703. point: {
  2704. events: {
  2705. click: function (e) { //点击事件
  2706. that.projectNum = 2143
  2707. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2708. },
  2709. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2710. //console.log(e)
  2711. chartData.forEach((item, index) => {
  2712. item.sliced = false
  2713. item.selected = false
  2714. })
  2715. // chartData[e.target.index].sliced = true
  2716. // chartData[e.target.index].selected = true
  2717. that.left2Chart.update({
  2718. series: [{
  2719. type: 'pie',
  2720. name: '占比',
  2721. point: {
  2722. events: {
  2723. click: function (e) {
  2724. that.projectNum = 2143
  2725. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2726. }
  2727. }
  2728. },
  2729. data: chartData
  2730. }]
  2731. })
  2732. timer && clearInterval(timer);
  2733. },
  2734. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2735. var points = that.left2Chart.series[0].points;
  2736. var len = points.length;
  2737. timer && clearInterval(timer);
  2738. timer = setInterval(function () {
  2739. autoTooltip(points[i]);
  2740. chartData.forEach((item, index) => {
  2741. item.sliced = false
  2742. item.selected = false
  2743. if (index == i) {
  2744. // item.sliced = true
  2745. // item.selected = true
  2746. }
  2747. })
  2748. that.left2Chart.update({
  2749. series: [{
  2750. type: 'pie',
  2751. name: '占比',
  2752. point: {
  2753. events: {
  2754. click: function (e) {
  2755. that.projectNum = 2143
  2756. that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
  2757. }
  2758. }
  2759. },
  2760. data: chartData
  2761. }]
  2762. })
  2763. i++;
  2764. if (i === len) {
  2765. i = 0;
  2766. chartData.forEach((item, index) => {
  2767. item.sliced = false
  2768. item.selected = false
  2769. })
  2770. that.left2Chart.update({
  2771. series: [{
  2772. type: 'pie',
  2773. name: '占比',
  2774. point: {
  2775. events: {
  2776. click: function (e) {
  2777. console.log(e)
  2778. }
  2779. }
  2780. },
  2781. data: chartData
  2782. }]
  2783. })
  2784. }
  2785. }, 2000);
  2786. }
  2787. }
  2788. },
  2789. data: chartData
  2790. }]
  2791. });
  2792. function autoTooltip (point) {
  2793. that.left2Chart.tooltip.refresh(point);
  2794. }
  2795. },
  2796. initChartL4 (dataList) {
  2797. this.left10Chart = echarts.init(document.getElementById("echartL4"));
  2798. let option = {
  2799. grid: {
  2800. top: 45,
  2801. right: 0,
  2802. left: 60,
  2803. bottom: 80,
  2804. },
  2805. tooltip: {
  2806. show: true,
  2807. trigger: "axis",
  2808. formatter: data => {
  2809. 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}亿`
  2810. },
  2811. axisPointer: {
  2812. // 坐标轴指示器,坐标轴触发有效
  2813. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  2814. },
  2815. textStyle: {
  2816. color: '#FFF', // 文字的颜色
  2817. fontSize: '20', // 文字字体大小
  2818. fontFamily: 'Microsoft YaHei'
  2819. },
  2820. },
  2821. xAxis: {
  2822. data: commonCompany,
  2823. axisTick: {
  2824. show: false,
  2825. },
  2826. // x轴的字体颜色
  2827. axisLabel: {
  2828. rotate: 40,
  2829. textStyle: {
  2830. color: "white",
  2831. fontSize: '20',
  2832. fontFamily: 'Microsoft YaHei'
  2833. },
  2834. },
  2835. //y轴线的颜色以及宽度
  2836. axisLine: {
  2837. show: true,
  2838. lineStyle: {
  2839. color: "#1E5389",
  2840. width: 1,
  2841. type: "solid",
  2842. },
  2843. },
  2844. },
  2845. yAxis: {
  2846. name: '亿',
  2847. axisTick: {
  2848. lineStyle: {
  2849. color: "#18416F",
  2850. },
  2851. },
  2852. // y轴的字体颜色
  2853. axisLabel: {
  2854. textStyle: {
  2855. color: "white",
  2856. fontSize: '20',
  2857. fontFamily: 'Microsoft YaHei'
  2858. },
  2859. },
  2860. splitLine: {
  2861. show: true,
  2862. lineStyle: {
  2863. color: "#68b4dd66",
  2864. width: 1,
  2865. type: "dashed",
  2866. },
  2867. },
  2868. //y轴线的颜色以及宽度
  2869. axisLine: {
  2870. show: true,
  2871. lineStyle: {
  2872. color: "#1E5389",
  2873. width: 1,
  2874. type: "solid",
  2875. },
  2876. },
  2877. nameTextStyle: {
  2878. color: '#fff',
  2879. fontSize: 20,
  2880. fontFamily: 'Microsoft YaHei'
  2881. },
  2882. },
  2883. series: [
  2884. {
  2885. name: "已用额度",
  2886. type: "bar",
  2887. data: left3[0],
  2888. stack: 'Ad',
  2889. showBackground: false,
  2890. backgroundStyle: {
  2891. color: "#18416F",
  2892. },
  2893. barWidth: "20",
  2894. itemStyle: {
  2895. // barBorderRadius: [10, 10, 0, 0],
  2896. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  2897. {
  2898. offset: 0,
  2899. color: '#082550',
  2900. },
  2901. {
  2902. offset: 1,
  2903. color: '#3986F8',
  2904. },
  2905. ]),
  2906. },
  2907. },
  2908. {
  2909. name: "总额度",
  2910. type: "bar",
  2911. data: left3[1],
  2912. stack: 'Ad',
  2913. showBackground: false,
  2914. backgroundStyle: {
  2915. color: "#18416F",
  2916. },
  2917. barWidth: "20",
  2918. itemStyle: {
  2919. // barBorderRadius: [10, 10, 0, 0],
  2920. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  2921. {
  2922. offset: 0,
  2923. color: '#b9b7c060',
  2924. },
  2925. {
  2926. offset: 1,
  2927. color: '#b9b7c060',
  2928. },
  2929. ]),
  2930. },
  2931. },
  2932. ],
  2933. legend: {
  2934. // data: ["2022年额度", "2023年额度"],
  2935. data: ["2023年额度"],
  2936. textStyle: {
  2937. // 图列内容样式
  2938. color: "#fff", // 字体颜色
  2939. fontSize: "20",
  2940. fontFamily: 'Microsoft YaHei'
  2941. },
  2942. right: 'center',
  2943. y: 5,
  2944. // icon: "roundRect",
  2945. // 小图标的宽高
  2946. },
  2947. };
  2948. let that = this
  2949. tools.loopShowTooltip(that.left10Chart, option, {
  2950. nterval: 2000,
  2951. loopSeries: true,
  2952. })
  2953. that.left10Chart.on('click', function (param) {
  2954. that.titleName = param.name
  2955. that.echartEnterpriseShow = true
  2956. // 如果是接口版数据版
  2957. if (that.versions) {
  2958. let findData = dataList.find(item => {
  2959. return item.mdnb_textfield == param.name
  2960. })
  2961. common1[0] = findData.mdnb_amountfield18
  2962. common1[1] = findData.mdnb_amountfield20
  2963. common1[2] = findData.mdnb_amountfield19
  2964. common1[3] = findData.mdnb_amountfield26
  2965. common1[4] = findData.mdnb_amountfield27
  2966. common1[5] = findData.mdnb_amountfield25
  2967. common2[0] = findData.mdnb_decimalfield6
  2968. }
  2969. setTimeout(() => {
  2970. that.initChartBall()
  2971. });
  2972. })
  2973. that.left10Chart.setOption(option);
  2974. },
  2975. initChartL5 () {
  2976. var chartData = left7
  2977. var timer = null;
  2978. var i = 0;
  2979. let that = this
  2980. var option = {
  2981. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  2982. chart: {
  2983. type: 'pie',
  2984. backgroundColor: 'rgba(0,0,0,0)',
  2985. options3d: {
  2986. enabled: true,
  2987. alpha: 45,
  2988. //beta: 0
  2989. },
  2990. events: {
  2991. // load,图表加载完成时触发
  2992. load: function () {
  2993. var chart = this;
  2994. var points = chart.series[0].points;
  2995. var len = points.length;
  2996. timer && clearInterval(timer);
  2997. timer = setInterval(function () {
  2998. autoTooltip(points[i]);
  2999. chartData.forEach((item, index) => {
  3000. item.sliced = false
  3001. item.selected = false
  3002. if (index == i) {
  3003. item.sliced = true
  3004. item.selected = true
  3005. }
  3006. })
  3007. that.left3Chart.update({
  3008. series: [{
  3009. type: 'pie',
  3010. name: '占比',
  3011. point: {
  3012. events: {
  3013. click: function (e) {
  3014. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215)
  3015. // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '')
  3016. }
  3017. }
  3018. },
  3019. data: chartData
  3020. }]
  3021. })
  3022. i++;
  3023. if (i === len) {
  3024. i = 0;
  3025. }
  3026. }, 2000);
  3027. },
  3028. legendItemClick: function (event) {
  3029. console.log(event);
  3030. return true;
  3031. }
  3032. }
  3033. },
  3034. credits: {
  3035. enabled: false //去掉hightchats水印
  3036. },
  3037. legend: {
  3038. // labelFormatter: function() {
  3039. // return 123;
  3040. // },
  3041. align: 'right',//横向位置
  3042. verticalAlign: 'middle', // 纵向位置
  3043. layout: "vertical",//横排还是竖排
  3044. x: -110,
  3045. y: 50,
  3046. symbolWidth: 50,
  3047. itemDistance: 50,
  3048. itemStyle: {
  3049. fontSize: '20px',
  3050. color: '#fff',
  3051. x: 20,
  3052. fontWeight: 0,
  3053. fontFamily: 'Microsoft YaHei'
  3054. },
  3055. },
  3056. title: {
  3057. text: '传统产业分析',
  3058. style: {
  3059. color: '#fff',
  3060. fontSize: 24,
  3061. fontFamily: 'Microsoft YaHei'
  3062. },
  3063. align: 'center',
  3064. verticalAlign: "bottom",
  3065. x: -120
  3066. },
  3067. tooltip: {
  3068. crosshairs: true,
  3069. backgroundColor: 'rgba(0,0,0,0.5)',
  3070. // positioner: function(e){
  3071. // console.log(e, this)
  3072. // },
  3073. useHTML: false, //开启html模式
  3074. style: {
  3075. color: '#fff',
  3076. fontSize: '20',
  3077. fontFamily: 'Microsoft YaHei'
  3078. },
  3079. formatter: function (e) {
  3080. //console.log(this)
  3081. let num = chartData[this.colorIndex].num
  3082. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3083. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3084. },
  3085. //pointFormat:
  3086. },
  3087. plotOptions: {
  3088. pie: {
  3089. allowPointSelect: true,
  3090. showInLegend: true, // 图例
  3091. cursor: 'pointer',
  3092. size: 220,
  3093. innerSize: 150, //环形图中间空白,0为饼图
  3094. depth: 25, //立体高度
  3095. slicedOffset: 21, //动画距离
  3096. dataLabels: {
  3097. enabled: false, // 是否展示指示线
  3098. format: '{point.name}: {point.percentage}'
  3099. }
  3100. },
  3101. },
  3102. series: [{
  3103. type: 'pie',
  3104. name: '占比',
  3105. //center: ['35%','50%'],
  3106. point: {
  3107. events: {
  3108. click: function (e) { //点击事件
  3109. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215)
  3110. // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '')
  3111. },
  3112. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3113. //console.log(e)
  3114. chartData.forEach((item, index) => {
  3115. item.sliced = false
  3116. item.selected = false
  3117. })
  3118. chartData[e.target.index].sliced = true
  3119. chartData[e.target.index].selected = true
  3120. that.left3Chart.update({
  3121. series: [{
  3122. type: 'pie',
  3123. name: '占比',
  3124. point: {
  3125. events: {
  3126. click: function (e) {
  3127. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215)
  3128. // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '')
  3129. }
  3130. }
  3131. },
  3132. data: chartData
  3133. }]
  3134. })
  3135. timer && clearInterval(timer);
  3136. },
  3137. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3138. var points = that.left3Chart.series[0].points;
  3139. var len = points.length;
  3140. timer && clearInterval(timer);
  3141. timer = setInterval(function () {
  3142. autoTooltip(points[i]);
  3143. chartData.forEach((item, index) => {
  3144. item.sliced = false
  3145. item.selected = false
  3146. if (index == i) {
  3147. item.sliced = true
  3148. item.selected = true
  3149. }
  3150. })
  3151. that.left3Chart.update({
  3152. series: [{
  3153. type: 'pie',
  3154. name: '占比',
  3155. point: {
  3156. events: {
  3157. click: function (e) {
  3158. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215)
  3159. // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '')
  3160. }
  3161. }
  3162. },
  3163. data: chartData
  3164. }]
  3165. })
  3166. i++;
  3167. if (i === len) {
  3168. i = 0;
  3169. }
  3170. }, 2000);
  3171. }
  3172. }
  3173. },
  3174. data: chartData
  3175. }]
  3176. }
  3177. that.left3Chart = Highcharts.chart('echartL5', option);
  3178. function autoTooltip (point) {
  3179. that.left3Chart.tooltip.refresh(point);
  3180. }
  3181. },
  3182. initChartL6 () {
  3183. var chartData = left8
  3184. var timer = null;
  3185. var i = 0;
  3186. let that = this
  3187. var option = {
  3188. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  3189. chart: {
  3190. type: 'pie',
  3191. backgroundColor: 'rgba(0,0,0,0)',
  3192. options3d: {
  3193. enabled: true,
  3194. alpha: 45,
  3195. //beta: 0
  3196. },
  3197. events: {
  3198. // load,图表加载完成时触发
  3199. load: function () {
  3200. var chart = this;
  3201. var points = chart.series[0].points;
  3202. var len = points.length;
  3203. timer && clearInterval(timer);
  3204. timer = setInterval(function () {
  3205. autoTooltip(points[i]);
  3206. chartData.forEach((item, index) => {
  3207. item.sliced = false
  3208. item.selected = false
  3209. if (index == i) {
  3210. item.sliced = true
  3211. item.selected = true
  3212. }
  3213. })
  3214. that.left4Chart.update({
  3215. series: [{
  3216. type: 'pie',
  3217. name: '占比',
  3218. point: {
  3219. events: {
  3220. click: function (e) {
  3221. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215)
  3222. }
  3223. }
  3224. },
  3225. data: chartData
  3226. }]
  3227. })
  3228. i++;
  3229. if (i === len) {
  3230. i = 0;
  3231. }
  3232. }, 2000);
  3233. },
  3234. legendItemClick: function (event) {
  3235. console.log(event);
  3236. return true;
  3237. }
  3238. }
  3239. },
  3240. credits: {
  3241. enabled: false //去掉hightchats水印
  3242. },
  3243. legend: {
  3244. // labelFormatter: function() {
  3245. // return 123;
  3246. // },
  3247. align: 'right',//横向位置
  3248. verticalAlign: 'middle', // 纵向位置
  3249. layout: "vertical",//横排还是竖排
  3250. x: -30,
  3251. y: 30,
  3252. symbolWidth: 50,
  3253. itemDistance: 50,
  3254. itemStyle: {
  3255. fontSize: '20px',
  3256. color: '#fff',
  3257. x: 20,
  3258. fontWeight: 0,
  3259. fontFamily: 'Microsoft YaHei'
  3260. },
  3261. },
  3262. title: {
  3263. text: '战略性新兴产业',
  3264. style: {
  3265. color: '#fff',
  3266. fontSize: 24,
  3267. fontFamily: 'Microsoft YaHei'
  3268. },
  3269. align: 'center',
  3270. verticalAlign: "bottom",
  3271. x: -120
  3272. },
  3273. tooltip: {
  3274. crosshairs: true,
  3275. backgroundColor: 'rgba(0,0,0,0.5)',
  3276. // positioner: function(e){
  3277. // console.log(e, this)
  3278. // },
  3279. useHTML: false, //开启html模式
  3280. style: {
  3281. color: '#fff',
  3282. fontSize: '20',
  3283. fontFamily: 'Microsoft YaHei'
  3284. },
  3285. formatter: function (e) {
  3286. //console.log(this)
  3287. let num = chartData[this.colorIndex].num
  3288. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3289. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3290. },
  3291. //pointFormat:
  3292. },
  3293. plotOptions: {
  3294. pie: {
  3295. allowPointSelect: true,
  3296. showInLegend: true, // 图例
  3297. cursor: 'pointer',
  3298. size: 220,
  3299. innerSize: 150, //环形图中间空白,0为饼图
  3300. depth: 25, //立体高度
  3301. slicedOffset: 21, //动画距离
  3302. dataLabels: {
  3303. enabled: false, // 是否展示指示线
  3304. format: '{point.name}: {point.percentage}'
  3305. }
  3306. },
  3307. },
  3308. series: [{
  3309. type: 'pie',
  3310. name: '占比',
  3311. //center: ['35%','50%'],
  3312. point: {
  3313. events: {
  3314. click: function (e) { //点击事件
  3315. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215)
  3316. },
  3317. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3318. //console.log(e)
  3319. chartData.forEach((item, index) => {
  3320. item.sliced = false
  3321. item.selected = false
  3322. })
  3323. chartData[e.target.index].sliced = true
  3324. chartData[e.target.index].selected = true
  3325. that.left4Chart.update({
  3326. series: [{
  3327. type: 'pie',
  3328. name: '占比',
  3329. point: {
  3330. events: {
  3331. click: function (e) {
  3332. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215)
  3333. }
  3334. }
  3335. },
  3336. data: chartData
  3337. }]
  3338. })
  3339. timer && clearInterval(timer);
  3340. },
  3341. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3342. var points = that.left4Chart.series[0].points;
  3343. var len = points.length;
  3344. timer && clearInterval(timer);
  3345. timer = setInterval(function () {
  3346. autoTooltip(points[i]);
  3347. chartData.forEach((item, index) => {
  3348. item.sliced = false
  3349. item.selected = false
  3350. if (index == i) {
  3351. item.sliced = true
  3352. item.selected = true
  3353. }
  3354. })
  3355. that.left4Chart.update({
  3356. series: [{
  3357. type: 'pie',
  3358. name: '占比',
  3359. point: {
  3360. events: {
  3361. click: function (e) {
  3362. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215)
  3363. }
  3364. }
  3365. },
  3366. data: chartData
  3367. }]
  3368. })
  3369. i++;
  3370. if (i === len) {
  3371. i = 0;
  3372. }
  3373. }, 2000);
  3374. }
  3375. }
  3376. },
  3377. data: chartData
  3378. }]
  3379. }
  3380. that.left4Chart = Highcharts.chart('echartL6', option);
  3381. function autoTooltip (point) {
  3382. that.left4Chart.tooltip.refresh(point);
  3383. }
  3384. },
  3385. initChartL7 () {
  3386. var chartData = left9
  3387. var timer = null;
  3388. var i = 0;
  3389. let that = this
  3390. var option = {
  3391. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  3392. chart: {
  3393. type: 'pie',
  3394. backgroundColor: 'rgba(0,0,0,0)',
  3395. options3d: {
  3396. enabled: true,
  3397. alpha: 45,
  3398. //beta: 0
  3399. },
  3400. events: {
  3401. // load,图表加载完成时触发
  3402. load: function () {
  3403. var chart = this;
  3404. var points = chart.series[0].points;
  3405. var len = points.length;
  3406. timer && clearInterval(timer);
  3407. timer = setInterval(function () {
  3408. autoTooltip(points[i]);
  3409. chartData.forEach((item, index) => {
  3410. item.sliced = false
  3411. item.selected = false
  3412. if (index == i) {
  3413. item.sliced = true
  3414. item.selected = true
  3415. }
  3416. })
  3417. that.left5Chart.update({
  3418. series: [{
  3419. type: 'pie',
  3420. name: '占比',
  3421. point: {
  3422. events: {
  3423. click: function (e) {
  3424. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215)
  3425. }
  3426. }
  3427. },
  3428. data: chartData
  3429. }]
  3430. })
  3431. i++;
  3432. if (i === len) {
  3433. i = 0;
  3434. }
  3435. }, 2000);
  3436. },
  3437. legendItemClick: function (event) {
  3438. console.log(event);
  3439. return true;
  3440. }
  3441. }
  3442. },
  3443. credits: {
  3444. enabled: false //去掉hightchats水印
  3445. },
  3446. title: {
  3447. text: '特色优势产业',
  3448. style: {
  3449. color: '#fff',
  3450. fontSize: 24,
  3451. fontFamily: 'Microsoft YaHei'
  3452. },
  3453. align: 'center',
  3454. verticalAlign: "bottom",
  3455. x: -120
  3456. },
  3457. legend: {
  3458. // labelFormatter: function() {
  3459. // return 123;
  3460. // },
  3461. align: 'right',//横向位置
  3462. verticalAlign: 'middle', // 纵向位置
  3463. layout: "vertical",//横排还是竖排
  3464. x: -50,
  3465. y: 30,
  3466. symbolWidth: 50,
  3467. itemDistance: 50,
  3468. itemStyle: {
  3469. fontSize: '20px',
  3470. color: '#fff',
  3471. x: 20,
  3472. fontWeight: 0,
  3473. fontFamily: 'Microsoft YaHei'
  3474. },
  3475. },
  3476. tooltip: {
  3477. crosshairs: true,
  3478. backgroundColor: 'rgba(0,0,0,0.5)',
  3479. // positioner: function(e){
  3480. // console.log(e, this)
  3481. // },
  3482. useHTML: false, //开启html模式
  3483. style: {
  3484. color: '#fff',
  3485. fontSize: '20',
  3486. fontFamily: 'Microsoft YaHei'
  3487. },
  3488. formatter: function (e) {
  3489. //console.log(this)
  3490. let num = chartData[this.colorIndex].num
  3491. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3492. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3493. },
  3494. //pointFormat:
  3495. },
  3496. plotOptions: {
  3497. pie: {
  3498. allowPointSelect: true,
  3499. showInLegend: true, // 图例
  3500. cursor: 'pointer',
  3501. size: 220,
  3502. innerSize: 150, //环形图中间空白,0为饼图
  3503. depth: 25, //立体高度
  3504. slicedOffset: 21, //动画距离
  3505. dataLabels: {
  3506. enabled: false, // 是否展示指示线
  3507. format: '{point.name}: {point.percentage}'
  3508. }
  3509. },
  3510. },
  3511. series: [{
  3512. type: 'pie',
  3513. name: '占比',
  3514. //center: ['35%','50%'],
  3515. point: {
  3516. events: {
  3517. click: function (e) { //点击事件
  3518. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215)
  3519. },
  3520. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3521. //console.log(e)
  3522. chartData.forEach((item, index) => {
  3523. item.sliced = false
  3524. item.selected = false
  3525. })
  3526. chartData[e.target.index].sliced = true
  3527. chartData[e.target.index].selected = true
  3528. that.left5Chart.update({
  3529. series: [{
  3530. type: 'pie',
  3531. name: '占比',
  3532. point: {
  3533. events: {
  3534. click: function (e) {
  3535. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215)
  3536. }
  3537. }
  3538. },
  3539. data: chartData
  3540. }]
  3541. })
  3542. timer && clearInterval(timer);
  3543. },
  3544. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3545. var points = that.left5Chart.series[0].points;
  3546. var len = points.length;
  3547. timer && clearInterval(timer);
  3548. timer = setInterval(function () {
  3549. autoTooltip(points[i]);
  3550. chartData.forEach((item, index) => {
  3551. item.sliced = false
  3552. item.selected = false
  3553. if (index == i) {
  3554. item.sliced = true
  3555. item.selected = true
  3556. }
  3557. })
  3558. that.left5Chart.update({
  3559. series: [{
  3560. type: 'pie',
  3561. name: '占比',
  3562. point: {
  3563. events: {
  3564. click: function (e) {
  3565. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215)
  3566. }
  3567. }
  3568. },
  3569. data: chartData
  3570. }]
  3571. })
  3572. i++;
  3573. if (i === len) {
  3574. i = 0;
  3575. }
  3576. }, 2000);
  3577. }
  3578. }
  3579. },
  3580. data: chartData
  3581. }]
  3582. }
  3583. that.left5Chart = Highcharts.chart('echartL7', option);
  3584. function autoTooltip (point) {
  3585. that.left5Chart.tooltip.refresh(point);
  3586. }
  3587. },
  3588. initChartL8 () {
  3589. var chartData = left10
  3590. var timer = null;
  3591. var i = 0;
  3592. let that = this
  3593. var option = {
  3594. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  3595. chart: {
  3596. type: 'pie',
  3597. backgroundColor: 'rgba(0,0,0,0)',
  3598. options3d: {
  3599. enabled: true,
  3600. alpha: 45,
  3601. //beta: 0
  3602. },
  3603. events: {
  3604. // load,图表加载完成时触发
  3605. load: function () {
  3606. var chart = this;
  3607. var points = chart.series[0].points;
  3608. var len = points.length;
  3609. timer && clearInterval(timer);
  3610. timer = setInterval(function () {
  3611. autoTooltip(points[i]);
  3612. chartData.forEach((item, index) => {
  3613. item.sliced = false
  3614. item.selected = false
  3615. if (index == i) {
  3616. item.sliced = true
  3617. item.selected = true
  3618. }
  3619. })
  3620. that.left6Chart.update({
  3621. series: [{
  3622. type: 'pie',
  3623. name: '占比',
  3624. point: {
  3625. events: {
  3626. click: function (e) {
  3627. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215)
  3628. }
  3629. }
  3630. },
  3631. data: chartData
  3632. }]
  3633. })
  3634. i++;
  3635. if (i === len) {
  3636. i = 0;
  3637. }
  3638. }, 2000);
  3639. },
  3640. legendItemClick: function (event) {
  3641. console.log(event);
  3642. return true;
  3643. }
  3644. }
  3645. },
  3646. credits: {
  3647. enabled: false //去掉hightchats水印
  3648. },
  3649. title: {
  3650. text: '公共基础等产业',
  3651. style: {
  3652. color: '#fff',
  3653. fontSize: 24,
  3654. fontFamily: 'Microsoft YaHei'
  3655. },
  3656. align: 'center',
  3657. verticalAlign: "bottom",
  3658. x: -120
  3659. },
  3660. legend: {
  3661. // labelFormatter: function() {
  3662. // return 123;
  3663. // },
  3664. align: 'right',//横向位置
  3665. verticalAlign: 'middle', // 纵向位置
  3666. layout: "vertical",//横排还是竖排
  3667. x: -70,
  3668. y: 50,
  3669. symbolWidth: 50,
  3670. itemDistance: 50,
  3671. itemStyle: {
  3672. fontSize: '20px',
  3673. color: '#fff',
  3674. x: 20,
  3675. fontWeight: 0,
  3676. fontFamily: 'Microsoft YaHei'
  3677. },
  3678. },
  3679. tooltip: {
  3680. crosshairs: true,
  3681. backgroundColor: 'rgba(0,0,0,0.5)',
  3682. // positioner: function(e){
  3683. // console.log(e, this)
  3684. // },
  3685. useHTML: false, //开启html模式
  3686. style: {
  3687. color: '#fff',
  3688. fontSize: '20',
  3689. fontFamily: 'Microsoft YaHei'
  3690. },
  3691. formatter: function (e) {
  3692. //console.log(this)
  3693. let num = chartData[this.colorIndex].num
  3694. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3695. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3696. },
  3697. //pointFormat:
  3698. },
  3699. plotOptions: {
  3700. pie: {
  3701. allowPointSelect: true,
  3702. showInLegend: true, // 图例
  3703. cursor: 'pointer',
  3704. size: 220,
  3705. innerSize: 150, //环形图中间空白,0为饼图
  3706. depth: 25, //立体高度
  3707. slicedOffset: 21, //动画距离
  3708. dataLabels: {
  3709. enabled: false, // 是否展示指示线
  3710. format: '{point.name}: {point.percentage}'
  3711. }
  3712. },
  3713. },
  3714. series: [{
  3715. type: 'pie',
  3716. name: '占比',
  3717. //center: ['35%','50%'],
  3718. point: {
  3719. events: {
  3720. click: function (e) { //点击事件
  3721. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215)
  3722. },
  3723. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3724. //console.log(e)
  3725. chartData.forEach((item, index) => {
  3726. item.sliced = false
  3727. item.selected = false
  3728. })
  3729. chartData[e.target.index].sliced = true
  3730. chartData[e.target.index].selected = true
  3731. that.left6Chart.update({
  3732. series: [{
  3733. type: 'pie',
  3734. name: '占比',
  3735. point: {
  3736. events: {
  3737. click: function (e) {
  3738. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215)
  3739. }
  3740. }
  3741. },
  3742. data: chartData
  3743. }]
  3744. })
  3745. timer && clearInterval(timer);
  3746. },
  3747. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3748. var points = that.left6Chart.series[0].points;
  3749. var len = points.length;
  3750. timer && clearInterval(timer);
  3751. timer = setInterval(function () {
  3752. autoTooltip(points[i]);
  3753. chartData.forEach((item, index) => {
  3754. item.sliced = false
  3755. item.selected = false
  3756. if (index == i) {
  3757. item.sliced = true
  3758. item.selected = true
  3759. }
  3760. })
  3761. that.left6Chart.update({
  3762. series: [{
  3763. type: 'pie',
  3764. name: '占比',
  3765. point: {
  3766. events: {
  3767. click: function (e) {
  3768. that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215)
  3769. }
  3770. }
  3771. },
  3772. data: chartData
  3773. }]
  3774. })
  3775. i++;
  3776. if (i === len) {
  3777. i = 0;
  3778. }
  3779. }, 2000);
  3780. }
  3781. }
  3782. },
  3783. data: chartData
  3784. }]
  3785. }
  3786. that.left6Chart = Highcharts.chart('echartL8', option);
  3787. function autoTooltip (point) {
  3788. that.left6Chart.tooltip.refresh(point);
  3789. }
  3790. },
  3791. initChartL9 () {
  3792. this.chartCarousel = echarts.init(document.getElementById("echartL9"));
  3793. option = {
  3794. tooltip: {
  3795. trigger: 'axis',
  3796. formatter: '指标:' + '{c0}' + '<br/>' + '发展线:' + '{c1}' + '<br/>' + '生存线:' + '{c2}', //+ '<br/>'+ '{a1}:{c1}' + '%',
  3797. axisPointer: {
  3798. type: 'shadow',
  3799. },
  3800. },
  3801. grid: {
  3802. top: '10%',
  3803. right: '5%',
  3804. left: '12%',
  3805. bottom: '15%',
  3806. },
  3807. xAxis: {
  3808. // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
  3809. data: left15[this.countType],
  3810. axisLine: {
  3811. show: true, //隐藏X轴轴线
  3812. lineStyle: {
  3813. color: '#005094',
  3814. width: 1,
  3815. },
  3816. },
  3817. axisTick: {
  3818. show: true, //隐藏X轴刻度
  3819. },
  3820. axisLabel: {
  3821. show: true,
  3822. rotate: 30,
  3823. textStyle: {
  3824. color: '#fff', //X轴文字颜色
  3825. fontSize: 20,
  3826. fontFamily: 'Microsoft YaHei'
  3827. },
  3828. },
  3829. },
  3830. yAxis: [
  3831. {
  3832. type: 'value',
  3833. splitLine: {
  3834. show: true,
  3835. lineStyle: {
  3836. color: '#68b4dd66',
  3837. type: 'dashed',
  3838. },
  3839. },
  3840. axisLine: {
  3841. show: false
  3842. },
  3843. axisLabel: {
  3844. show: true,
  3845. formatter: '{value}%',
  3846. textStyle: {
  3847. color: '#fff',
  3848. fontSize: 20,
  3849. fontFamily: 'Microsoft YaHei'
  3850. },
  3851. },
  3852. nameTextStyle: {
  3853. color: '#ebf8ac',
  3854. fontSize: 16,
  3855. fontFamily: 'Microsoft YaHei'
  3856. },
  3857. },
  3858. ],
  3859. series: [
  3860. {
  3861. name: '实际值',
  3862. type: 'bar',
  3863. barWidth: 20,
  3864. itemStyle: {
  3865. normal: {
  3866. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3867. {
  3868. offset: 0,
  3869. color: '#69c0ff',
  3870. },
  3871. {
  3872. offset: 1,
  3873. color: '#082550',
  3874. },
  3875. ]),
  3876. },
  3877. },
  3878. // data: [70, 52, 33, 41, 52],
  3879. data: left12[this.count + 1][2]
  3880. },
  3881. {
  3882. name: '',
  3883. type: 'line',
  3884. barWidth: 15,
  3885. itemStyle: {
  3886. normal: {
  3887. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3888. {
  3889. offset: 0,
  3890. color: '#69c0ff',
  3891. },
  3892. {
  3893. offset: 1,
  3894. color: 'green',
  3895. },
  3896. ]),
  3897. },
  3898. },
  3899. // data: [20, 30, 15, 28, 36],
  3900. data: left12[this.count + 1][1]
  3901. },
  3902. {
  3903. name: '',
  3904. type: 'line',
  3905. barWidth: 15,
  3906. itemStyle: {
  3907. normal: {
  3908. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3909. {
  3910. offset: 0,
  3911. color: '#69c0ff',
  3912. },
  3913. {
  3914. offset: 1,
  3915. color: 'yellow',
  3916. },
  3917. ]),
  3918. },
  3919. },
  3920. // data: [15, 22, 17, 33, 14],
  3921. data: left12[this.count + 1][0]
  3922. },
  3923. ],
  3924. }
  3925. let that = this
  3926. // this.chartCarousel.on('click', function (param) {
  3927. // that.titleName = param.name
  3928. // that.echartSingleTipShow = true
  3929. // setTimeout(() => {
  3930. // that.initChartLTip()
  3931. // });
  3932. // })
  3933. this.chartCarousel.on('mouseover', (params) => {
  3934. that.$refs.indicator.handleHover(true, 1, 2, 3, 4)
  3935. })
  3936. this.chartCarousel.on('mouseout', (params) => {
  3937. that.$refs.indicator.handleHover(false, 1, 2, 3, 4)
  3938. })
  3939. this.chartCarousel.setOption(option)
  3940. // tools.loopShowTooltip(myChart, option, {
  3941. // nterval: 2000,
  3942. // loopSeries: true,
  3943. // })
  3944. },
  3945. initChartL10 () {
  3946. this.left7Chart = echarts.init(document.getElementById("echartL10"));
  3947. let option = {
  3948. title: {
  3949. text: '固定资产进度分布',
  3950. textStyle: {
  3951. color: '#69C0FF',
  3952. fontSize: 30,
  3953. fontWeight: 500,
  3954. fontFamily: 'Microsoft YaHei'
  3955. },
  3956. top: '20',
  3957. left: '20'
  3958. },
  3959. textStyle: {
  3960. color: '#fff',
  3961. },
  3962. tooltip: {
  3963. trigger: "axis",
  3964. formatter: function (params) {
  3965. 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] + '亿';
  3966. return tip
  3967. },
  3968. textStyle: {
  3969. color: '#ffffff', // 文字的颜色
  3970. fontSize: '20', // 文字字体大小
  3971. fontFamily: 'Microsoft YaHei'
  3972. },
  3973. axisPointer: {
  3974. // lineStyle: {
  3975. // type: 'dashed',
  3976. // width: 2,
  3977. // color: 'rgba(255,255,255,0.6)'
  3978. // },
  3979. animation: false
  3980. }
  3981. },
  3982. grid: {
  3983. top: '0%',
  3984. right: '5%',
  3985. left: '15%',
  3986. bottom: '-10%',
  3987. },
  3988. yAxis: {
  3989. data: ['备案', '特别监管'],
  3990. splitLine: {
  3991. show: false,
  3992. lineStyle: {
  3993. color: '#68b4dd66',
  3994. type: 'dashed',
  3995. },
  3996. },
  3997. axisLine: {
  3998. show: false
  3999. },
  4000. axisLabel: {
  4001. show: true,
  4002. formatter: '{value}',
  4003. textStyle: {
  4004. color: '#fff',
  4005. fontSize: 20,
  4006. padding: [0, -10, 0, 0],
  4007. fontFamily: 'Microsoft YaHei',
  4008. },
  4009. },
  4010. nameTextStyle: {
  4011. color: '#ebf8ac',
  4012. fontSize: 16,
  4013. fontFamily: 'Microsoft YaHei'
  4014. },
  4015. },
  4016. xAxis: {
  4017. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  4018. axisLine: {
  4019. show: true, //隐藏X轴轴线
  4020. lineStyle: {
  4021. color: '#005094',
  4022. width: 1,
  4023. },
  4024. },
  4025. axisTick: {
  4026. show: false, //隐藏X轴刻度
  4027. },
  4028. axisLabel: {
  4029. show: true,
  4030. textStyle: {
  4031. color: '#fff', //X轴文字颜色
  4032. fontSize: 20,
  4033. padding: [-320, 0, 0, 0],
  4034. fontFamily: 'Microsoft YaHei'
  4035. },
  4036. }
  4037. },
  4038. series: [
  4039. {
  4040. name: '特别监管',
  4041. type: 'scatter',
  4042. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  4043. symbolSize: function (data) {
  4044. return Math.sqrt(data[2]) * 5;
  4045. },
  4046. // label: {
  4047. // emphasis: {
  4048. // show: true,
  4049. // formatter: function (param) {
  4050. // return param.data[2];
  4051. // },
  4052. // position: 'top'
  4053. // }
  4054. // },
  4055. itemStyle: {
  4056. normal: {
  4057. color: '#69c0ff'
  4058. }
  4059. },
  4060. data: left13[0]
  4061. },
  4062. {
  4063. name: '备案',
  4064. type: 'scatter',
  4065. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  4066. symbolSize: function (data) {
  4067. return Math.sqrt(data[2]) * 5;
  4068. },
  4069. // label: {
  4070. // emphasis: {
  4071. // show: true,
  4072. // formatter: function (param) {
  4073. // return param.data[2];
  4074. // },
  4075. // position: 'top'
  4076. // }
  4077. // },
  4078. itemStyle: {
  4079. normal: {
  4080. color: '#957DFF'
  4081. }
  4082. },
  4083. data: left13[1]
  4084. },
  4085. ]
  4086. }
  4087. let that = this
  4088. that.left7Chart.on('click', function (param) {
  4089. that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '固定资产', param.name, param.seriesName, '', '', '', '', '', 216)
  4090. })
  4091. that.left7Chart.setOption(option)
  4092. tools.loopShowTooltip(that.left7Chart, option, {
  4093. nterval: 2000,
  4094. loopSeries: true,
  4095. })
  4096. },
  4097. initChartL11 () {
  4098. this.left8Chart = echarts.init(document.getElementById("echartL11"));
  4099. let option = {
  4100. title: {
  4101. text: '股权类进度分布',
  4102. textStyle: {
  4103. color: '#69C0FF',
  4104. fontSize: 30,
  4105. fontWeight: 500,
  4106. fontFamily: 'Microsoft YaHei'
  4107. },
  4108. top: '20',
  4109. left: '20'
  4110. },
  4111. textStyle: {
  4112. color: '#fff',
  4113. },
  4114. tooltip: {
  4115. trigger: "axis",
  4116. formatter: function (params) {
  4117. 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] + '亿';
  4118. return tip
  4119. },
  4120. textStyle: {
  4121. color: '#FFF', // 文字的颜色
  4122. fontSize: '20', // 文字字体大小
  4123. fontFamily: 'Microsoft YaHei'
  4124. },
  4125. axisPointer: {
  4126. // lineStyle: {
  4127. // type: 'dashed',
  4128. // width: 2,
  4129. // color: 'rgba(255,255,255,0.6)'
  4130. // },
  4131. animation: true
  4132. }
  4133. },
  4134. grid: {
  4135. top: '0%',
  4136. right: '5%',
  4137. left: '15%',
  4138. bottom: '-10%',
  4139. },
  4140. yAxis: {
  4141. data: ['备案', '特别监管'],
  4142. splitLine: {
  4143. show: false,
  4144. lineStyle: {
  4145. color: '#68b4dd66',
  4146. type: 'dashed',
  4147. },
  4148. },
  4149. axisLine: {
  4150. show: false
  4151. },
  4152. axisLabel: {
  4153. show: true,
  4154. formatter: '{value}',
  4155. textStyle: {
  4156. fontSize: 20,
  4157. padding: [0, -10, 0, 0],
  4158. fontFamily: 'Microsoft YaHei'
  4159. },
  4160. },
  4161. nameTextStyle: {
  4162. color: '#ebf8ac',
  4163. fontSize: 16,
  4164. fontFamily: 'Microsoft YaHei'
  4165. },
  4166. },
  4167. xAxis: {
  4168. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  4169. axisLine: {
  4170. show: true, //隐藏X轴轴线
  4171. lineStyle: {
  4172. color: '#005094',
  4173. width: 1,
  4174. },
  4175. },
  4176. axisTick: {
  4177. show: true, //隐藏X轴刻度
  4178. },
  4179. axisLabel: {
  4180. show: true,
  4181. textStyle: {
  4182. color: '#fff', //X轴文字颜色
  4183. fontSize: 20,
  4184. padding: [-320, 0, 0, 0],
  4185. fontFamily: 'Microsoft YaHei'
  4186. },
  4187. },
  4188. },
  4189. series: [
  4190. {
  4191. name: '',
  4192. type: 'scatter',
  4193. symbol: 'circle',
  4194. symbolSize: function (data) {
  4195. return Math.sqrt(data[2]) * 5;
  4196. },
  4197. // label: {
  4198. // emphasis: {
  4199. // show: true,
  4200. // formatter: function (param) {
  4201. // return param.data[2];
  4202. // },
  4203. // position: 'top'
  4204. // }
  4205. // },
  4206. itemStyle: {
  4207. normal: {
  4208. color: '#40A9FF'
  4209. }
  4210. },
  4211. data: left14[0]
  4212. },
  4213. {
  4214. name: '',
  4215. type: 'scatter',
  4216. symbol: 'circle',
  4217. symbolSize: function (data) {
  4218. return Math.sqrt(data[2]) * 5;
  4219. },
  4220. // label: {
  4221. // emphasis: {
  4222. // show: true,
  4223. // formatter: function (param) {
  4224. // return param.data[2];
  4225. // },
  4226. // position: 'top'
  4227. // }
  4228. // },
  4229. itemStyle: {
  4230. normal: {
  4231. color: '#957DFF'
  4232. }
  4233. },
  4234. data: left14[1]
  4235. },
  4236. ]
  4237. }
  4238. let that = this
  4239. that.left8Chart.on('click', function (param) {
  4240. that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '股权类进度分布', param.name, param.seriesName, '', '', '', '', '', 216)
  4241. })
  4242. that.left8Chart.setOption(option)
  4243. tools.loopShowTooltip(that.left8Chart, option, {
  4244. nterval: 2000,
  4245. loopSeries: true,
  4246. })
  4247. },
  4248. // 大屏二
  4249. initChartC1 () {
  4250. if (this.centerType) {
  4251. //3D饼图
  4252. var chartData = center2
  4253. var timer = null;
  4254. var i = 0;
  4255. let that = this
  4256. var option = {
  4257. colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  4258. chart: {
  4259. type: 'pie',
  4260. backgroundColor: 'rgba(0,0,0,0)',
  4261. options3d: {
  4262. enabled: true,
  4263. alpha: 60,
  4264. //beta: 0
  4265. },
  4266. events: {
  4267. // load,图表加载完成时触发
  4268. load: function () {
  4269. var chart = this;
  4270. var points = chart.series[0].points;
  4271. var len = points.length;
  4272. timer && clearInterval(timer);
  4273. timer = setInterval(function () {
  4274. autoTooltip(points[i]);
  4275. chartData.forEach((item, index) => {
  4276. item.sliced = false
  4277. item.selected = false
  4278. if (index == i) {
  4279. item.sliced = true
  4280. item.selected = true
  4281. }
  4282. })
  4283. that.center1Chart.update({
  4284. series: [{
  4285. type: 'pie',
  4286. name: '占比',
  4287. point: {
  4288. events: {
  4289. click: function (e) {
  4290. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1, 112)
  4291. }
  4292. }
  4293. },
  4294. data: chartData
  4295. }]
  4296. })
  4297. i++;
  4298. if (i === len) {
  4299. i = 0;
  4300. }
  4301. }, 2000);
  4302. },
  4303. legendItemClick: function (event) {
  4304. console.log(event);
  4305. return true;
  4306. }
  4307. }
  4308. },
  4309. credits: {
  4310. enabled: false //去掉hightchats水印
  4311. },
  4312. legend: {
  4313. layout: 'vertical',
  4314. align: 'right',
  4315. y: -10,
  4316. verticalAlign: 'bottom',
  4317. itemStyle: {
  4318. fontSize: '20px',
  4319. color: '#fff',
  4320. fontWeight: 0,
  4321. fontFamily: 'Microsoft YaHei'
  4322. }
  4323. },
  4324. tooltip: {
  4325. crosshairs: true,
  4326. backgroundColor: 'rgba(0,0,0,0.5)',
  4327. useHTML: false, //开启html模式
  4328. style: {
  4329. color: '#fff',
  4330. fontSize: '20',
  4331. fontFamily: 'Microsoft YaHei'
  4332. },
  4333. formatter: function (e) {
  4334. let num = chartData[this.colorIndex].num
  4335. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  4336. return `${this.key}:<b>${this.percentage}%</b><br/>投资完成额:<b>${this.y}</b>亿<br/>投资数量:<b>${num}个</b>`
  4337. },
  4338. //pointFormat:
  4339. },
  4340. plotOptions: {
  4341. pie: {
  4342. allowPointSelect: true,
  4343. showInLegend: true, // 图例
  4344. cursor: 'pointer',
  4345. size: 500,
  4346. // innerSize: 330, //环形图中间空白,0为饼图
  4347. innerSize: 0, //环形图中间空白,0为饼图
  4348. depth: 75, //立体高度
  4349. slicedOffset: 40, //动画距离
  4350. dataLabels: {
  4351. enabled: false, // 是否展示指示线
  4352. format: '{point.name}: {point.percentage}'
  4353. }
  4354. },
  4355. },
  4356. title: {
  4357. text: '',
  4358. style: {
  4359. color: '#fff',
  4360. fontSize: 24,
  4361. fontFamily: 'Microsoft YaHei'
  4362. },
  4363. align: 'center',
  4364. verticalAlign: "bottom",
  4365. x: -120
  4366. },
  4367. series: [{
  4368. type: 'pie',
  4369. name: '占比',
  4370. center: ['74%', '50%'],
  4371. point: {
  4372. events: {
  4373. click: function (e) { //点击事件
  4374. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1, 112)
  4375. },
  4376. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  4377. //console.log(e)
  4378. chartData.forEach((item, index) => {
  4379. item.sliced = false
  4380. item.selected = false
  4381. })
  4382. chartData[e.target.index].sliced = true
  4383. chartData[e.target.index].selected = true
  4384. that.center1Chart.update({
  4385. series: [{
  4386. type: 'pie',
  4387. name: '占比',
  4388. point: {
  4389. events: {
  4390. click: function (e) {
  4391. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1, 112)
  4392. }
  4393. }
  4394. },
  4395. data: chartData
  4396. }]
  4397. })
  4398. timer && clearInterval(timer);
  4399. },
  4400. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  4401. var points = that.center1Chart.series[0].points;
  4402. var len = points.length;
  4403. timer && clearInterval(timer);
  4404. timer = setInterval(function () {
  4405. autoTooltip(points[i]);
  4406. chartData.forEach((item, index) => {
  4407. item.sliced = false
  4408. item.selected = false
  4409. if (index == i) {
  4410. item.sliced = true
  4411. item.selected = true
  4412. }
  4413. })
  4414. that.center1Chart.update({
  4415. series: [{
  4416. type: 'pie',
  4417. name: '占比',
  4418. point: {
  4419. events: {
  4420. click: function (e) {
  4421. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1, 112)
  4422. }
  4423. }
  4424. },
  4425. data: chartData
  4426. }]
  4427. })
  4428. i++;
  4429. if (i === len) {
  4430. i = 0;
  4431. }
  4432. }, 2000);
  4433. }
  4434. }
  4435. },
  4436. data: chartData
  4437. }]
  4438. }
  4439. that.center1Chart = Highcharts.chart('echartC1', option);
  4440. function autoTooltip (point) {
  4441. that.center1Chart.tooltip.refresh(point);
  4442. }
  4443. } else {
  4444. let myChart = echarts.init(this.$refs['echartC1'])
  4445. data = center2
  4446. arrName = getArrayValue(data, "name");
  4447. arrValue = getArrayValue(data, "value");
  4448. sumValue = eval(arrValue.join("+"));
  4449. objData = array2obj(data, "name");
  4450. optionData = getData(data);
  4451. function getArrayValue (array, key) {
  4452. var key = key || "value";
  4453. var res = [];
  4454. if (array) {
  4455. array.forEach(function (t) {
  4456. res.push(t[key]);
  4457. });
  4458. }
  4459. return res;
  4460. }
  4461. function array2obj (array, key) {
  4462. var resObj = {};
  4463. for (var i = 0; i < array.length; i++) {
  4464. resObj[array[i][key]] = array[i];
  4465. }
  4466. return resObj;
  4467. }
  4468. function getData (data) {
  4469. var res = {
  4470. series: [],
  4471. yAxis: [],
  4472. };
  4473. for (let i = 0; i < data.length; i++) {
  4474. // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
  4475. res.series.push({
  4476. name: "",
  4477. type: "pie",
  4478. clockWise: false, //顺时加载
  4479. hoverAnimation: false, //鼠标移入变大
  4480. radius: [55 - i * 15 + "%", 50 - i * 15 + "%"],
  4481. center: ["25%", "60%"],
  4482. label: {
  4483. show: false,
  4484. },
  4485. itemStyle: {
  4486. label: {
  4487. show: false,
  4488. },
  4489. labelLine: {
  4490. show: false,
  4491. },
  4492. borderWidth: 5,
  4493. },
  4494. data: [
  4495. {
  4496. value: data[i].value,
  4497. name: data[i].name,
  4498. },
  4499. {
  4500. value: sumValue - data[i].value,
  4501. name: "",
  4502. itemStyle: {
  4503. color: "rgba(0,0,0,0)",
  4504. borderWidth: 0,
  4505. },
  4506. tooltip: {
  4507. show: false,
  4508. },
  4509. hoverAnimation: false,
  4510. },
  4511. ],
  4512. });
  4513. res.series.push({
  4514. name: "",
  4515. type: "pie",
  4516. silent: true,
  4517. z: 1,
  4518. clockWise: false, //顺时加载
  4519. hoverAnimation: false, //鼠标移入变大
  4520. radius: [55 - i * 15 + "%", 50 - i * 15 + "%"],
  4521. center: ["25%", "60%"],
  4522. label: {
  4523. show: false,
  4524. },
  4525. itemStyle: {
  4526. label: {
  4527. show: false,
  4528. },
  4529. labelLine: {
  4530. show: false,
  4531. },
  4532. borderWidth: 5,
  4533. },
  4534. data: [
  4535. {
  4536. value: 7.5,
  4537. itemStyle: {
  4538. color: "#4d638050",
  4539. borderWidth: 0,
  4540. },
  4541. tooltip: {
  4542. show: false,
  4543. },
  4544. hoverAnimation: false,
  4545. },
  4546. {
  4547. value: 2.5,
  4548. name: "",
  4549. itemStyle: {
  4550. color: "rgba(0,0,0,0)",
  4551. borderWidth: 0,
  4552. },
  4553. tooltip: {
  4554. show: false,
  4555. },
  4556. hoverAnimation: false,
  4557. },
  4558. ],
  4559. });
  4560. res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
  4561. }
  4562. return res;
  4563. }
  4564. let option = {
  4565. // graphic: {
  4566. // elements: [{
  4567. // type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  4568. // style: {
  4569. // image: './images/loop.png', //这里添加图片地址
  4570. // width: 320,
  4571. // height: 320
  4572. // },
  4573. // left: '30',//
  4574. // top: 'middle' //配置图片居中
  4575. // }]
  4576. // },
  4577. legend: {
  4578. show: false,
  4579. trigger: 'item',
  4580. icon: "circle",
  4581. top: "center",
  4582. left: "70%",
  4583. data: arrName,
  4584. width: 50,
  4585. padding: [0, 5],
  4586. itemGap: 25,
  4587. formatter: function (data) {
  4588. let a = center2.find(item => item.name == data)
  4589. console.log(a)
  4590. // 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}个`
  4591. return `${data}<br/>`
  4592. },
  4593. textStyle: {
  4594. fontSize: 20,
  4595. color: '#fff',
  4596. fontFamily: 'Microsoft YaHei'
  4597. // rich: {
  4598. // title: {
  4599. // fontSize: 14,
  4600. // lineHeight: 15,
  4601. // color: "rgb(0, 178, 246)",
  4602. // },
  4603. // value: {
  4604. // fontSize: 18,
  4605. // lineHeight: 20,
  4606. // color: "#fff",
  4607. // },
  4608. // },
  4609. },
  4610. },
  4611. // tooltip: {
  4612. // show: false,
  4613. // normal: {
  4614. // show: false,
  4615. // trigger: "item",
  4616. // label: {
  4617. // margin: 10, // label 距离轴的距离
  4618. // color: '#FFF', // 文字的颜色
  4619. // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  4620. // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  4621. // fontSize: '20', // 文字字体大小
  4622. // lineHeight: '50', // 行高
  4623. // },
  4624. // },
  4625. // // formatter: "{a}<br>{b}:{c}({d}%)666",
  4626. // textStyle: {
  4627. // color: '#FFF', // 文字的颜色
  4628. // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  4629. // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  4630. // },
  4631. // formatter: data => {
  4632. // console.log(data)
  4633. // // 小圆点
  4634. // 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}`
  4635. // },
  4636. // },
  4637. color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  4638. grid: {
  4639. top: "30%",
  4640. bottom: "47%",
  4641. left: "26%",
  4642. containLabel: false,
  4643. },
  4644. yAxis: [
  4645. {
  4646. type: "category",
  4647. inverse: true,
  4648. axisLine: {
  4649. show: false,
  4650. },
  4651. axisTick: {
  4652. show: false,
  4653. },
  4654. axisLabel: {
  4655. interval: 0,
  4656. inside: true,
  4657. textStyle: {
  4658. color: "#fff",
  4659. fontSize: 20,
  4660. fontFamily: 'Microsoft YaHei'
  4661. },
  4662. show: true,
  4663. formatter: data => {
  4664. return `----- ${data}`
  4665. },
  4666. },
  4667. data: optionData.yAxis,
  4668. },
  4669. ],
  4670. xAxis: [
  4671. {
  4672. show: false,
  4673. },
  4674. ],
  4675. series: optionData.series,
  4676. }
  4677. myChart.setOption(option)
  4678. // tools.loopShowTooltip(myChart, option, {
  4679. // interval: 500,
  4680. // loopSeries: true,
  4681. // });
  4682. }
  4683. },
  4684. initChartC2 () {
  4685. let that = this
  4686. that.center2Chart = echarts.init(this.$refs['echartC2'])
  4687. that.center2Chart.on('showTip', (params) => {
  4688. // 如果是7或者15并且满足防抖则切换
  4689. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartC2Fd) {
  4690. that.echartC2Fd = false
  4691. setTimeout(() => {
  4692. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  4693. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  4694. that.center2Chart.setOption(option);
  4695. // 防止勿刷新做的防抖
  4696. setTimeout(() => {
  4697. that.echartC2Fd = true
  4698. }, 2000)
  4699. }, 1900);
  4700. // 如果是17表示到了最后一个,那么重新来一遍
  4701. } else if (params.dataIndex == 17 && that.echartC2Fd) {
  4702. that.echartC2Fd = false
  4703. setTimeout(() => {
  4704. option.dataZoom[0].endValue = 0
  4705. option.dataZoom[0].startValue = 5
  4706. that.center2Chart.setOption(option);
  4707. // 防止勿刷新做的防抖
  4708. setTimeout(() => {
  4709. that.echartC2Fd = true
  4710. }, 2000)
  4711. }, 1900)
  4712. }
  4713. })
  4714. let option = {
  4715. tooltip: {
  4716. formatter: data => {
  4717. 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}亿`
  4718. },
  4719. trigger: 'axis',
  4720. axisPointer: {
  4721. // type: 'cross',',
  4722. },
  4723. textStyle: {
  4724. color: '#FFF', // 文字的颜色
  4725. fontSize: '20', // 文字字体大小
  4726. fontFamily: 'Microsoft YaHei'
  4727. },
  4728. },
  4729. dataZoom: [
  4730. {
  4731. // start: 9,//默认为@
  4732. // end: 100,//黑认认为1@0
  4733. type: "slider",
  4734. show: false,
  4735. // xAxisIndex: [0]
  4736. handlesize: 0,//滑动条的 左右2个滑动条的大小
  4737. startValue: 5,// 初始显示值
  4738. endValue: 0,// 结束显示值
  4739. height: 10,//组件高度
  4740. left: "5%",
  4741. right: "4%",//右边的距离
  4742. bottom: "25%",//底边的距离
  4743. borderColor: "#939",
  4744. fillerColor: "#269cdb",
  4745. borderRadius: 5,
  4746. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  4747. showDataShadow: false,//是否显示数据阴影
  4748. showDetail: false,//即拖拽时候是否显示详细数值信息
  4749. truerealtime: true,//是否实时更新
  4750. filterMode: "filter"
  4751. }, {
  4752. type: 'inside',
  4753. show: true,
  4754. start: 1,
  4755. end: 100,
  4756. zoomOnMouseWheel: false, //滚轮是否触发缩放
  4757. moveOnMouseMove: false, //鼠标滚轮触发滚动
  4758. }
  4759. ],
  4760. grid: {
  4761. top: '10%',
  4762. right: '3%',
  4763. left: '7%',
  4764. bottom: '15%',
  4765. },
  4766. legend: {
  4767. top: '1',
  4768. right: 'center',
  4769. textStyle: {
  4770. color: '#fff',
  4771. fontSize: '20',
  4772. fontFamily: 'Microsoft YaHei'
  4773. },
  4774. },
  4775. xAxis: {
  4776. data: commonCompany,
  4777. // data: center3.map(item => item.name),
  4778. axisLine: {
  4779. show: true, //隐藏X轴轴线
  4780. lineStyle: {
  4781. color: '#005094',
  4782. width: 1,
  4783. },
  4784. },
  4785. axisTick: {
  4786. show: false, //隐藏X轴刻度
  4787. },
  4788. axisLabel: {
  4789. show: true,
  4790. rotate: 40,
  4791. textStyle: {
  4792. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  4793. fontSize: '20',
  4794. fontFamily: 'Microsoft YaHei'
  4795. },
  4796. },
  4797. },
  4798. yAxis: [
  4799. {
  4800. type: 'value',
  4801. name: '亿',
  4802. splitLine: {
  4803. show: true,
  4804. lineStyle: {
  4805. color: '#68b4dd66',
  4806. type: 'dashed',
  4807. },
  4808. },
  4809. axisLine: {
  4810. show: true,
  4811. lineStyle: {
  4812. color: '#3D7495',
  4813. },
  4814. },
  4815. axisLabel: {
  4816. show: true,
  4817. textStyle: {
  4818. color: '#fff',
  4819. fontSize: '20',
  4820. fontFamily: 'Microsoft YaHei'
  4821. },
  4822. },
  4823. nameTextStyle: {
  4824. color: '#fff',
  4825. fontSize: 20,
  4826. fontFamily: 'Microsoft YaHei'
  4827. },
  4828. },
  4829. ],
  4830. series: [
  4831. {
  4832. name: '计划投资',
  4833. type: 'bar',
  4834. barWidth: 10,
  4835. itemStyle: {
  4836. normal: {
  4837. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4838. {
  4839. offset: 0,
  4840. color: '#69c0ff',
  4841. },
  4842. {
  4843. offset: 1,
  4844. color: '#082550',
  4845. },
  4846. ]),
  4847. },
  4848. },
  4849. data: center3.map(item => item.value),
  4850. },
  4851. {
  4852. name: '实际投资',
  4853. type: 'bar',
  4854. barWidth: 10,
  4855. itemStyle: {
  4856. normal: {
  4857. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4858. {
  4859. offset: 0,
  4860. color: '#957DFF',
  4861. },
  4862. {
  4863. offset: 1,
  4864. color: '#082550',
  4865. },
  4866. ]),
  4867. },
  4868. },
  4869. data: center3.map(item => item.value2),
  4870. },
  4871. ],
  4872. }
  4873. that.center2Chart.on('click', function (param) {
  4874. that.projectListTipShow = true
  4875. param.seriesName == '计划投资' ? that.projectNum = 1131 : that.projectNum = 1132
  4876. that.centerPenetrateTwo('', '', that.findCode(param.name), param.seriesName == '计划投资' ? 2 : 1)
  4877. })
  4878. that.center2Chart.setOption(option)
  4879. tools.loopShowTooltip(that.center2Chart, option, {
  4880. nterval: 2000,
  4881. loopSeries: true,
  4882. })
  4883. // let arr = center3.map(item => item.value2)
  4884. // this.timeOut = setInterval(function () {
  4885. // let startValue = myChart.getModel().option.dataZoom[0].startValue;
  4886. // let endValue = myChart.getModel().option.dataZoom[0].endValue;
  4887. // let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
  4888. // let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
  4889. // // 每次向后滚动一个,最后一个从头开始。
  4890. // // console.log(option.dataZoom[0].endValue);
  4891. // if (option.dataZoom[0].endValue >= 12) {
  4892. // option.dataZoom[0].endValue = 5
  4893. // option.dataZoom[0].startValue = 0
  4894. // } else {
  4895. // option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  4896. // option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  4897. // }
  4898. // // myChart.dispatchAction({
  4899. // // type: 'showTip',
  4900. // // seriesIndex: 0,
  4901. // // dataIndex: startValue +1,
  4902. // // });
  4903. // myChart.setOption(option);
  4904. // }, 12000);
  4905. },
  4906. convertData (data) {
  4907. var res = []
  4908. for (var i = 0; i < data.length; i++) {
  4909. var geoCoord = this.geoCoordMap[data[i].name]
  4910. if (geoCoord) {
  4911. res.push({
  4912. name: data[i].name,
  4913. value: geoCoord.concat(data[i].value),
  4914. })
  4915. }
  4916. }
  4917. return res
  4918. },
  4919. yuanChange (value) {
  4920. return Number((value / 100000000).toFixed(2))
  4921. },
  4922. // 逢三折断
  4923. numFormat (value) {
  4924. if (!value) return '0'
  4925. // var intPart = Number(value).toFixed(0) // 获取整数部分
  4926. var intPart = parseInt(value)// 获取整数部分
  4927. var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  4928. var floatPart = '.00' // 预定义小数部分
  4929. var value2Array = value.toString().split('.')
  4930. // =2表示数据有小数位
  4931. if (value2Array.length === 2) {
  4932. floatPart = value2Array[1].toString() // 拿到小数部分
  4933. if (floatPart.length === 1) {
  4934. // 补0
  4935. return intPartFormat + '.' + floatPart + '0'
  4936. } else {
  4937. return intPartFormat + '.' + floatPart
  4938. }
  4939. } else {
  4940. return intPartFormat
  4941. }
  4942. },
  4943. initProvinceChart () {
  4944. var data = center5
  4945. this.geoCoordMap = []
  4946. /*获取地图数据*/
  4947. this.mapChart = echarts.init(this.$refs['echarts-map'])
  4948. echarts.registerMap('shanxi', shanxi)
  4949. var mapFeatures = echarts.getMap('shanxi').geoJson.features
  4950. mapFeatures.forEach(v => {
  4951. // 地区名称
  4952. var name = v.properties.name
  4953. // 地区经纬度
  4954. this.geoCoordMap[name] = v.properties.centroid
  4955. // 按照地图乱序
  4956. // data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
  4957. })
  4958. let option = {
  4959. tooltip: {
  4960. padding: 15,
  4961. enterable: true,
  4962. transitionDuration: 1,
  4963. formatter: (params, ticket, callback) => {
  4964. // 清空所有轮播
  4965. for (var k in this.geoCoordMap) {
  4966. this.mapChart.dispatchAction({
  4967. // type: 'geoUnSelect',
  4968. type: 'downplay',
  4969. name: k,
  4970. })
  4971. }
  4972. // 如果鼠标滑动到线线上面,则返回空
  4973. this.mapChart.dispatchAction({
  4974. // type: 'geoSelect',
  4975. type: 'highlight',
  4976. name: params.name,
  4977. })
  4978. if (params.componentSubType == 'lines') {
  4979. return
  4980. }
  4981. if (params.componentSubType == 'scatter') {
  4982. let tipHtml = `
  4983. <div class="tooltip-cont">
  4984. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  4985. <p>总投资额:<span>${params.data.value[2]}亿</span></p>
  4986. </div>`
  4987. callback(ticket, tipHtml)
  4988. return tipHtml
  4989. }
  4990. if (params.componentSubType == 'map') {
  4991. let tipHtml = `
  4992. <div class="tooltip-cont">
  4993. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  4994. <p>总投资额:<span>${params.data.value}亿</span></p>
  4995. </div>`
  4996. callback(ticket, tipHtml)
  4997. return tipHtml
  4998. }
  4999. },
  5000. },
  5001. visualMap: {
  5002. show: false,
  5003. min: 0,
  5004. max: 300,
  5005. right: 0,
  5006. bottom: 0,
  5007. text: ['高', '低'],
  5008. textStyle: {
  5009. color: '#f1f1f1'
  5010. },
  5011. realtime: false,
  5012. calculable: false,
  5013. inRange: {
  5014. color: ['lightskyblue', '#2754b7']
  5015. }
  5016. },
  5017. geo: {
  5018. show: true,
  5019. map: 'shanxi',
  5020. layoutCenter: ['50%', '50%'], //地图位置
  5021. layoutSize: '140%',
  5022. label: {
  5023. normal: {
  5024. position: [100, 100],
  5025. fontSize: 25,
  5026. fontFamily: 'Microsoft YaHei',
  5027. fontWeight: 600,
  5028. color: '#fff',
  5029. show: true,
  5030. },
  5031. emphasis: {
  5032. show: true,
  5033. color: '#e7e1a0',
  5034. fontSize: 30,
  5035. },
  5036. },
  5037. roam: false,
  5038. itemStyle: {
  5039. normal: {
  5040. areaColor: '#1946a8',
  5041. shadowColor: '#1946a8',
  5042. borderWidth: 2, //设置外层边框
  5043. borderColor: '#1946a8',
  5044. shadowOffsetX: 0,
  5045. shadowOffsetY: 0,
  5046. shadowBlur: 0,
  5047. },
  5048. emphasis: {
  5049. areaColor: '#013d95',
  5050. borderColor: '#e7e1a0',
  5051. borderWidth: 4, //设置外层边框
  5052. },
  5053. },
  5054. },
  5055. series: [
  5056. {
  5057. type: 'map',
  5058. map: 'shanxi',
  5059. geoIndex: 0,
  5060. aspectScale: 1.5, //长宽比
  5061. data: data,
  5062. },
  5063. ],
  5064. }
  5065. let that = this
  5066. this.mapChart.on('click', function (params) {
  5067. if (params.name == '太原市') {
  5068. that.showChartLTipDouble(params.name, 'center', '', '', '', '', 'investmentMap', '太原市', '山西省','','',118)
  5069. }
  5070. })
  5071. tools.loopShowTooltip(this.mapChart, option, {
  5072. interval: 2000,
  5073. loopSeries: false,
  5074. });
  5075. this.mapChart.setOption(option)
  5076. },
  5077. initChinaChart () {
  5078. var data = centerChina
  5079. this.geoCoordMap = []
  5080. /*获取地图数据*/
  5081. this.mapChart = echarts.init(this.$refs['chinaMap'])
  5082. echarts.registerMap('china', china)
  5083. var mapFeatures = echarts.getMap('china').geoJson.features
  5084. mapFeatures.forEach(v => {
  5085. // 地区名称
  5086. var name = v.properties.name
  5087. // 地区经纬度
  5088. this.geoCoordMap[name] = v.properties.cp
  5089. data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
  5090. })
  5091. let option = {
  5092. tooltip: {
  5093. padding: 15,
  5094. enterable: true,
  5095. transitionDuration: 1,
  5096. formatter: (params, ticket, callback) => {
  5097. // 清空所有轮播
  5098. this.mapChart.dispatchAction({
  5099. // type: 'geoUnSelect',
  5100. type: 'downplay',
  5101. name: '南海诸岛',
  5102. })
  5103. for (var k in this.geoCoordMap) {
  5104. this.mapChart.dispatchAction({
  5105. // type: 'geoUnSelect',
  5106. type: 'downplay',
  5107. name: k,
  5108. })
  5109. }
  5110. // 如果鼠标滑动到线线上面,则返回空
  5111. this.mapChart.dispatchAction({
  5112. // type: 'geoSelect',
  5113. type: 'highlight',
  5114. name: params.name,
  5115. })
  5116. if (params.componentSubType == 'lines') {
  5117. return
  5118. }
  5119. if (params.componentSubType == 'scatter') {
  5120. let tipHtml = `
  5121. <div class="tooltip-cont">
  5122. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  5123. <p>总投资额:<span>${params.data.value[2]}亿</span></p>
  5124. </div>`
  5125. callback(ticket, tipHtml)
  5126. return tipHtml
  5127. }
  5128. if (params.componentSubType == 'map') {
  5129. let tipHtml = `
  5130. <div class="tooltip-cont">
  5131. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  5132. <p>总投资额:<span>${params.data.value}亿</span></p>
  5133. </div>`
  5134. callback(ticket, tipHtml)
  5135. return tipHtml
  5136. }
  5137. },
  5138. },
  5139. visualMap: {
  5140. show: false,
  5141. min: 0,
  5142. max: 1000,
  5143. left: '100',
  5144. bottom: 100,
  5145. text: ['高', '低'],
  5146. textStyle: {
  5147. color: '#f1f1f1'
  5148. },
  5149. realtime: true, //拖拽时,是否实时更新
  5150. calculable: false,
  5151. inRange: {
  5152. color: ['lightskyblue', '#2754b7']
  5153. },
  5154. itemWidth: 50, //图形的宽度,即长条的宽度。
  5155. itemHeight: 400, //图形的高度,即长条的高度。
  5156. textStyle: {
  5157. fontSize: 30,
  5158. color: '#fff'
  5159. }
  5160. },
  5161. geo: {
  5162. show: true,
  5163. map: 'china',
  5164. layoutCenter: ['50%', '50%'], //地图位置
  5165. layoutSize: '110%',
  5166. label: {
  5167. normal: {
  5168. position: [100, 100],
  5169. fontSize: 25,
  5170. fontFamily: 'Microsoft YaHei',
  5171. fontWeight: 600,
  5172. color: '#fff',
  5173. show: true,
  5174. },
  5175. emphasis: {
  5176. show: true,
  5177. color: '#e7e1a0',
  5178. fontSize: 30,
  5179. },
  5180. },
  5181. // 滑轮缩放
  5182. roam: false,
  5183. itemStyle: {
  5184. normal: {
  5185. areaColor: '#1946a8',
  5186. shadowColor: '#1946a8',
  5187. borderWidth: 2, //设置外层边框
  5188. borderColor: '#0b245b',
  5189. shadowOffsetX: 0,
  5190. shadowOffsetY: 0,
  5191. shadowBlur: 0,
  5192. },
  5193. emphasis: {
  5194. areaColor: '#013d95',
  5195. borderColor: '#e7e1a0',
  5196. borderWidth: 4, //设置外层边框
  5197. },
  5198. },
  5199. },
  5200. series: [
  5201. {
  5202. type: 'map',
  5203. map: 'china',
  5204. geoIndex: 0,
  5205. data: data,
  5206. },
  5207. ],
  5208. }
  5209. let that = this
  5210. this.mapChart.on('click', function (params) {
  5211. if (params.name == '山西') {
  5212. // that.showChartLTipDouble(params.name, 'center', '', '', '', '', '', 'investmentMap', '山西省')
  5213. that.mapChart.dispose()
  5214. that.centerShow = true
  5215. setTimeout(() => {
  5216. that.initChartC1()
  5217. that.initChartC2()
  5218. that.initChartC3()
  5219. that.initChartC4()
  5220. if (that.versions) {
  5221. that.centerPenetrateOne('investmentMap', params.name, 3, '', '')
  5222. } else {
  5223. that.initProvinceChart()
  5224. }
  5225. that.initProjectList()
  5226. })
  5227. }
  5228. })
  5229. tools.loopShowTooltip(this.mapChart, option, {
  5230. interval: 2000,
  5231. loopSeries: false,
  5232. });
  5233. this.mapChart.setOption(option)
  5234. },
  5235. initChartC3 () {
  5236. this.center3Chart = echarts.init(this.$refs['echartC3'])
  5237. let option = {
  5238. tooltip: {
  5239. trigger: 'axis',
  5240. formatter: '{a0}:{c0}' + '亿', //+ '<br/>'+ '{a1}:{c1}' + '%',
  5241. axisPointer: {
  5242. // type: 'cross',',
  5243. },
  5244. textStyle: {
  5245. color: '#FFF', // 文字的颜色
  5246. fontSize: '20', // 文字字体大小
  5247. fontFamily: 'Microsoft YaHei'
  5248. },
  5249. },
  5250. grid: {
  5251. top: '8%',
  5252. right: '3%',
  5253. left: '7%',
  5254. bottom: '10%',
  5255. },
  5256. // legend: {
  5257. // top: '1',
  5258. // textStyle: {
  5259. // color: 'rgba(250,250,250,0.6)',
  5260. // },
  5261. // },
  5262. xAxis: {
  5263. data: center6.map(item => item.name),
  5264. axisLine: {
  5265. show: true, //隐藏X轴轴线
  5266. lineStyle: {
  5267. color: '#005094',
  5268. width: 1,
  5269. },
  5270. },
  5271. axisTick: {
  5272. show: false, //隐藏X轴刻度
  5273. },
  5274. axisLabel: {
  5275. show: true,
  5276. rotate: 20,
  5277. textStyle: {
  5278. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  5279. fontSize: '20',
  5280. fontFamily: 'Microsoft YaHei'
  5281. },
  5282. },
  5283. },
  5284. yAxis: [
  5285. {
  5286. type: 'value',
  5287. name: '亿',
  5288. splitLine: {
  5289. show: true,
  5290. lineStyle: {
  5291. color: '#68b4dd66',
  5292. type: 'dashed',
  5293. },
  5294. },
  5295. axisLine: {
  5296. show: true,
  5297. lineStyle: {
  5298. color: '#3D7495',
  5299. },
  5300. },
  5301. axisLabel: {
  5302. show: true,
  5303. textStyle: {
  5304. color: '#fff',
  5305. fontSize: '20',
  5306. fontFamily: 'Microsoft YaHei'
  5307. },
  5308. },
  5309. nameTextStyle: {
  5310. color: '#fff',
  5311. fontSize: 20,
  5312. fontFamily: 'Microsoft YaHei'
  5313. },
  5314. },
  5315. {
  5316. type: 'value',
  5317. axisLine: {
  5318. show: false,
  5319. },
  5320. splitLine: {
  5321. show: false,
  5322. },
  5323. axisLabel: {
  5324. show: true,
  5325. formatter: '{value} %',
  5326. textStyle: {
  5327. color: 'rgba(250,250,250,0.6)',
  5328. fontFamily: 'Microsoft YaHei'
  5329. },
  5330. },
  5331. },
  5332. ],
  5333. series: [
  5334. {
  5335. type: 'bar',
  5336. name: '投资金额',
  5337. barWidth: 15,
  5338. itemStyle: {
  5339. normal: {
  5340. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5341. {
  5342. offset: 0,
  5343. color: '#69c0ff',
  5344. },
  5345. {
  5346. offset: 1,
  5347. color: '#082550',
  5348. },
  5349. ]),
  5350. },
  5351. },
  5352. data: center6.map(item => item.value),
  5353. },
  5354. ],
  5355. }
  5356. let that = this
  5357. that.center3Chart.on('click', function (param) {
  5358. if (param.name == '煤炭和煤电') {
  5359. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ceiamount', '', '', '', '', 'five', '1', 2,115)
  5360. } else if (param.name == '煤电和新能源') {
  5361. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cpneiamount', '', '', '', '', 'five', '2', 2,115)
  5362. } else if (param.name == '煤炭和化工') {
  5363. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ccheiamount', '', '', '', '', 'five', '3', 2,115)
  5364. } else if (param.name == '煤炭和数字') {
  5365. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cdiamount', '', '', '', '', 'five', '4', 2,115)
  5366. } else if (param.name == '煤炭和降炭') {
  5367. that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cciamount', '', '', '', '', 'five', '5', 2,115)
  5368. }
  5369. })
  5370. that.center3Chart.setOption(option)
  5371. tools.loopShowTooltip(that.center3Chart, option, {
  5372. nterval: 2000,
  5373. loopSeries: true,
  5374. })
  5375. },
  5376. initChartC4 () {
  5377. if (this.centerType) {
  5378. // 3D饼图
  5379. var chartData = []
  5380. var timer = null;
  5381. var timer2 = null;
  5382. var i = 0;
  5383. center7.forEach((item, index) => {
  5384. let obj = {
  5385. name: item.name,
  5386. y: item.value2,
  5387. num: item.value,
  5388. typeno: item.typeno,
  5389. sliced: false,
  5390. selected: false,
  5391. color: index == 0 ? '#064F78' : '#BDB35D'
  5392. }
  5393. chartData.push(obj)
  5394. })
  5395. let that = this
  5396. that.center4Chart = Highcharts.chart('echartC4', {
  5397. chart: {
  5398. type: 'pie',
  5399. backgroundColor: 'rgba(0,0,0,0)',
  5400. options3d: {
  5401. enabled: true,
  5402. alpha: 60,
  5403. //beta: 0
  5404. },
  5405. events: {
  5406. // load,图表加载完成时触发
  5407. load: function () {
  5408. var chart = this;
  5409. var points = chart.series[0].points;
  5410. var len = points.length;
  5411. timer && clearInterval(timer);
  5412. timer = setInterval(function () {
  5413. autoTooltip(points[i]);
  5414. chartData.forEach((item, index) => {
  5415. item.sliced = false
  5416. item.selected = false
  5417. if (index == i) {
  5418. item.sliced = true
  5419. item.selected = true
  5420. }
  5421. })
  5422. that.center4Chart.update({
  5423. series: [{
  5424. type: 'pie',
  5425. name: '占比',
  5426. point: {
  5427. events: {
  5428. click: function (e) {
  5429. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1,116)
  5430. }
  5431. }
  5432. },
  5433. data: chartData
  5434. }]
  5435. })
  5436. i++;
  5437. if (i === len) {
  5438. i = 0;
  5439. chartData.forEach((item, index) => {
  5440. item.sliced = false
  5441. item.selected = false
  5442. })
  5443. that.center4Chart.update({
  5444. series: [{
  5445. type: 'pie',
  5446. name: '占比',
  5447. point: {
  5448. events: {
  5449. click: function (e) {
  5450. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1,116)
  5451. }
  5452. }
  5453. },
  5454. data: chartData
  5455. }]
  5456. })
  5457. }
  5458. }, 2000);
  5459. },
  5460. legendItemClick: function (event) {
  5461. console.log(event);
  5462. return true;
  5463. }
  5464. }
  5465. },
  5466. credits: {
  5467. enabled: false //去掉hightchats水印
  5468. },
  5469. title: {
  5470. text: null
  5471. },
  5472. tooltip: {
  5473. crosshairs: true,
  5474. backgroundColor: 'rgba(0,0,0,0.5)',
  5475. // positioner: function(e){
  5476. // console.log(e, this)
  5477. // },
  5478. useHTML: false, //开启html模式
  5479. style: {
  5480. color: '#fff',
  5481. fontSize: '20',
  5482. fontFamily: 'Microsoft YaHei'
  5483. },
  5484. formatter: function (e) {
  5485. //console.log(this)
  5486. let num = chartData[this.colorIndex].num
  5487. this.percentage = Math.round(this.percentage)
  5488. return `${this.key}:<b>${this.percentage}%</b><br/>投资完成额:<b>${this.y}</b>亿<br/>投资数量:<b>${num}个</b>`
  5489. },
  5490. //pointFormat:
  5491. },
  5492. legend: {
  5493. layout: 'vertical',
  5494. align: 'right',
  5495. y: -10,
  5496. verticalAlign: 'bottom',
  5497. itemStyle: {
  5498. fontSize: '20px',
  5499. color: '#fff',
  5500. fontWeight: 0,
  5501. fontFamily: 'Microsoft YaHei'
  5502. }
  5503. },
  5504. plotOptions: {
  5505. pie: {
  5506. allowPointSelect: true,
  5507. showInLegend: true, // 图例
  5508. cursor: 'pointer',
  5509. size: 500,
  5510. // innerSize: 330, //环形图中间空白,0为饼图
  5511. innerSize: 0, //环形图中间空白,0为饼图
  5512. depth: 75, //立体高度
  5513. slicedOffset: 40, //动画距离
  5514. dataLabels: {
  5515. enabled: false, // 是否展示指示线
  5516. format: '{point.name}: {point.percentage}'
  5517. }
  5518. },
  5519. },
  5520. series: [{
  5521. type: 'pie',
  5522. name: '占比',
  5523. center: ['60%', '50%'],
  5524. y: -10,
  5525. point: {
  5526. events: {
  5527. click: function (e) { //点击事件
  5528. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1,116)
  5529. },
  5530. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  5531. //console.log(e)
  5532. chartData.forEach((item, index) => {
  5533. item.sliced = false
  5534. item.selected = false
  5535. })
  5536. chartData[e.target.index].sliced = true
  5537. chartData[e.target.index].selected = true
  5538. that.center4Chart.update({
  5539. series: [{
  5540. type: 'pie',
  5541. name: '占比',
  5542. point: {
  5543. events: {
  5544. click: function (e) {
  5545. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1,116)
  5546. }
  5547. }
  5548. },
  5549. data: chartData
  5550. }]
  5551. })
  5552. timer && clearInterval(timer);
  5553. },
  5554. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  5555. var points = that.center4Chart.series[0].points;
  5556. var len = points.length;
  5557. timer && clearInterval(timer);
  5558. timer = setInterval(function () {
  5559. autoTooltip(points[i]);
  5560. chartData.forEach((item, index) => {
  5561. item.sliced = false
  5562. item.selected = false
  5563. if (index == i) {
  5564. item.sliced = true
  5565. item.selected = true
  5566. }
  5567. })
  5568. that.center4Chart.update({
  5569. series: [{
  5570. type: 'pie',
  5571. name: '占比',
  5572. point: {
  5573. events: {
  5574. click: function (e) {
  5575. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1,116)
  5576. }
  5577. }
  5578. },
  5579. data: chartData
  5580. }]
  5581. })
  5582. i++;
  5583. if (i === len) {
  5584. i = 0;
  5585. chartData.forEach((item, index) => {
  5586. item.sliced = false
  5587. item.selected = false
  5588. })
  5589. that.center4Chart.update({
  5590. series: [{
  5591. type: 'pie',
  5592. name: '占比',
  5593. point: {
  5594. events: {
  5595. click: function (e) {
  5596. that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1,116)
  5597. }
  5598. }
  5599. },
  5600. data: chartData
  5601. }]
  5602. })
  5603. }
  5604. }, 2000);
  5605. }
  5606. }
  5607. },
  5608. data: chartData
  5609. }]
  5610. });
  5611. function autoTooltip (point) {
  5612. that.center4Chart.tooltip.refresh(point);
  5613. }
  5614. } else {
  5615. // 环形图
  5616. let myChart = echarts.init(this.$refs['echartC4'])
  5617. data = center7
  5618. arrName = getArrayValue(data, "name");
  5619. arrValue = getArrayValue(data, "value");
  5620. sumValue = eval(arrValue.join("+"));
  5621. objData = array2obj(data, "name");
  5622. optionData = getData(data);
  5623. function getArrayValue (array, key) {
  5624. var key = key || "value";
  5625. var res = [];
  5626. if (array) {
  5627. array.forEach(function (t) {
  5628. res.push(t[key]);
  5629. });
  5630. }
  5631. return res;
  5632. }
  5633. function array2obj (array, key) {
  5634. var resObj = {};
  5635. for (var i = 0; i < array.length; i++) {
  5636. resObj[array[i][key]] = array[i];
  5637. }
  5638. return resObj;
  5639. }
  5640. function getData (data) {
  5641. var res = {
  5642. series: [],
  5643. yAxis: [],
  5644. };
  5645. for (let i = 0; i < data.length; i++) {
  5646. res.series.push({
  5647. name: "",
  5648. type: "pie",
  5649. clockWise: false, //顺时加载
  5650. hoverAnimation: false, //鼠标移入变大
  5651. radius: [73 - i * 40 + "%", 58 - i * 40 + "%"],
  5652. center: ["50%", "50%"],
  5653. label: {
  5654. show: false,
  5655. },
  5656. itemStyle: {
  5657. label: {
  5658. show: false,
  5659. },
  5660. labelLine: {
  5661. show: false,
  5662. },
  5663. borderWidth: 5,
  5664. },
  5665. data: [
  5666. {
  5667. value: data[i].value,
  5668. name: data[i].name,
  5669. },
  5670. {
  5671. value: sumValue - data[i].value,
  5672. name: "",
  5673. itemStyle: {
  5674. color: "rgba(0,0,0,0)",
  5675. borderWidth: 0,
  5676. },
  5677. tooltip: {
  5678. show: false,
  5679. },
  5680. hoverAnimation: false,
  5681. },
  5682. ],
  5683. });
  5684. res.series.push({
  5685. name: "",
  5686. type: "pie",
  5687. silent: true,
  5688. z: 1,
  5689. clockWise: false, //顺时加载
  5690. hoverAnimation: false, //鼠标移入变大
  5691. radius: [73 - i * 40 + "%", 58 - i * 40 + "%"],
  5692. center: ["50%", "50%"],
  5693. label: {
  5694. show: false,
  5695. },
  5696. itemStyle: {
  5697. label: {
  5698. show: false,
  5699. },
  5700. labelLine: {
  5701. show: false,
  5702. },
  5703. borderWidth: 10,
  5704. },
  5705. data: [
  5706. {
  5707. value: 7.5,
  5708. itemStyle: {
  5709. color: "rgba(9,40,83,0.7)",
  5710. borderWidth: 0,
  5711. },
  5712. tooltip: {
  5713. show: false,
  5714. },
  5715. hoverAnimation: false,
  5716. },
  5717. {
  5718. value: 2.5,
  5719. name: "",
  5720. itemStyle: {
  5721. color: "rgba(0,0,0,0)",
  5722. borderWidth: 0,
  5723. },
  5724. tooltip: {
  5725. show: false,
  5726. },
  5727. hoverAnimation: false,
  5728. },
  5729. ],
  5730. });
  5731. res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
  5732. }
  5733. return res;
  5734. }
  5735. let option = {
  5736. // graphic: {
  5737. // elements: [{
  5738. // type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  5739. // style: {
  5740. // // image: './images/loop.png', //这里添加图片地址
  5741. // width: 320,
  5742. // height: 320
  5743. // },
  5744. // left: '30',//
  5745. // top: 'middle' //配置图片居中
  5746. // }]
  5747. // },
  5748. // tooltip: {
  5749. // show: true,
  5750. // trigger: "item",
  5751. // normal: {
  5752. // show: false,
  5753. // label: {
  5754. // color: '#FFF', // 文字的颜色
  5755. // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  5756. // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  5757. // fontSize: '20', // 文字字体大小
  5758. // },
  5759. // },
  5760. // formatter: function (data) {
  5761. // console.log(data, '?????')
  5762. // // return `${data.data.name}:${data.percent}%<br/>${data.data.y}亿,${data.data.num}个`
  5763. // },
  5764. // // formatter: "{a}<br>{b}:{c}({d}%)666",
  5765. // textStyle: {
  5766. // fontSize: '20', // 文字字体大小
  5767. // color: '#FFF', // 文字的颜色
  5768. // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  5769. // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  5770. // },
  5771. // },
  5772. tooltip: {
  5773. trigger: 'item',
  5774. textStyle: {
  5775. color: '#fff', //X轴文字颜色
  5776. fontSize: 20,
  5777. fontFamily: 'Microsoft YaHei'
  5778. },
  5779. // 设置提示的位置
  5780. position: (p) => {
  5781. // return ['15%', '25%']
  5782. return [p[0] - 70, p[1] - 70]
  5783. // console.log(params,'???????位置信息是什么鬼')
  5784. // if (params.name == '新建') {
  5785. // return ['15%', '25%']
  5786. // }
  5787. },
  5788. formatter: data => {
  5789. let a = ''
  5790. a = center7.find(item => item.name == data.name)
  5791. return `${data.name}:${data.percent}%<br/>${data.value}亿,${a.value2}个`
  5792. },
  5793. },
  5794. legend: {
  5795. show: true,
  5796. icon: "circle",
  5797. top: "bottom",
  5798. right: "5%",
  5799. data: arrName,
  5800. orient: 'vertical',
  5801. // width: 50,
  5802. // padding: [0, 5],
  5803. itemGap: 5,
  5804. textStyle: {
  5805. color: '#fff',
  5806. fontSize: 20,
  5807. fontFamily: 'Microsoft YaHei'
  5808. },
  5809. },
  5810. color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'],
  5811. grid: {
  5812. top: "8%",
  5813. bottom: "52%",
  5814. left: "50%",
  5815. containLabel: true,
  5816. },
  5817. yAxis: [
  5818. {
  5819. type: "category",
  5820. inverse: true,
  5821. axisLine: {
  5822. show: false,
  5823. },
  5824. axisTick: {
  5825. show: false,
  5826. },
  5827. axisLabel: {
  5828. interval: 0,
  5829. inside: true,
  5830. textStyle: {
  5831. color: "#fff",
  5832. fontSize: 20,
  5833. fontFamily: 'Microsoft YaHei'
  5834. },
  5835. show: true,
  5836. },
  5837. data: optionData.yAxis,
  5838. },
  5839. ],
  5840. xAxis: [
  5841. {
  5842. show: false,
  5843. },
  5844. ],
  5845. series: optionData.series,
  5846. }
  5847. myChart.setOption(option)
  5848. tools.loopShowTooltip(myChart, option, {
  5849. interval: 500,
  5850. loopSeries: true,
  5851. });
  5852. }
  5853. },
  5854. initProjectList () {
  5855. let dataList = []
  5856. center8.map(item => {
  5857. if (this.versions) {
  5858. dataList.push([item.office, item.name, this.yuanChange(item.value) + '亿', item.typeno])
  5859. } else {
  5860. dataList.push([item.office, item.name, item.value + '亿'])
  5861. }
  5862. })
  5863. this.storageRecordConfig2.data = dataList
  5864. this.storageRecordConfig2 = { ...this.storageRecordConfig2 }
  5865. },
  5866. // 大屏三
  5867. initChartR1 () {
  5868. let that = this
  5869. that.right1Chart = echarts.init(this.$refs['echartR1'])
  5870. that.right1Chart.on('showTip', (params) => {
  5871. // 如果是7或者15并且满足防抖则切换
  5872. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd) {
  5873. that.echartR1Fd = false
  5874. setTimeout(() => {
  5875. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  5876. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  5877. that.right1Chart.setOption(option);
  5878. // 防止勿刷新做的防抖
  5879. setTimeout(() => {
  5880. that.echartR1Fd = true
  5881. }, 2000)
  5882. }, 1900);
  5883. // 如果是17表示到了最后一个,那么重新来一遍
  5884. } else if (params.dataIndex == 17 && that.echartR1Fd) {
  5885. that.echartR1Fd = false
  5886. setTimeout(() => {
  5887. option.dataZoom[0].endValue = 0
  5888. option.dataZoom[0].startValue = 5
  5889. that.right1Chart.setOption(option);
  5890. // 防止勿刷新做的防抖
  5891. setTimeout(() => {
  5892. that.echartR1Fd = true
  5893. }, 2000)
  5894. }, 1900)
  5895. }
  5896. })
  5897. let option = {
  5898. tooltip: {
  5899. formatter: data => {
  5900. 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}亿`
  5901. },
  5902. textStyle: {
  5903. color: '#FFF', // 文字的颜色
  5904. fontSize: '20', // 文字字体大小
  5905. fontFamily: 'Microsoft YaHei'
  5906. },
  5907. trigger: 'axis',
  5908. axisPointer: {
  5909. // type: 'cross',',
  5910. },
  5911. },
  5912. dataZoom: [
  5913. {
  5914. // start: 9,//默认为@
  5915. // end: 100,//黑认认为1@0
  5916. type: "slider",
  5917. show: false,
  5918. // xAxisIndex: [0]
  5919. handlesize: 0,//滑动条的 左右2个滑动条的大小
  5920. startValue: 5,// 初始显示值
  5921. endValue: 0,// 结束显示值
  5922. height: 10,//组件高度
  5923. left: "5%",
  5924. right: "4%",//右边的距离
  5925. bottom: "25%",//底边的距离
  5926. borderColor: "#939",
  5927. fillerColor: "#269cdb",
  5928. borderRadius: 5,
  5929. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  5930. showDataShadow: false,//是否显示数据阴影
  5931. showDetail: false,//即拖拽时候是否显示详细数值信息
  5932. truerealtime: true,//是否实时更新
  5933. filterMode: "filter"
  5934. }, {
  5935. type: 'inside',
  5936. show: true,
  5937. start: 1,
  5938. end: 100,
  5939. zoomOnMouseWheel: false, //滚轮是否触发缩放
  5940. moveOnMouseMove: false, //鼠标滚轮触发滚动
  5941. }
  5942. ],
  5943. grid: {
  5944. top: '10%',
  5945. right: '3%',
  5946. left: '5%',
  5947. bottom: '5%',
  5948. },
  5949. legend: {
  5950. data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
  5951. x: 'center',
  5952. y: '0px',
  5953. textStyle: {
  5954. color: '#fff',
  5955. fontSize: "20",
  5956. fontFamily: 'Microsoft YaHei'
  5957. },
  5958. },
  5959. xAxis: {
  5960. data: commonCompany,
  5961. // data: right4.map(item => item.name),
  5962. axisLine: {
  5963. show: true, //隐藏X轴轴线
  5964. lineStyle: {
  5965. color: '#005094',
  5966. width: 1,
  5967. },
  5968. },
  5969. axisTick: {
  5970. show: false, //隐藏X轴刻度
  5971. },
  5972. axisLabel: {
  5973. show: true,
  5974. // rotate: 40,
  5975. textStyle: {
  5976. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  5977. fontSize: "20",
  5978. fontFamily: 'Microsoft YaHei'
  5979. },
  5980. },
  5981. },
  5982. yAxis: [
  5983. {
  5984. type: 'value',
  5985. name: '亿',
  5986. nameTextStyle: {
  5987. color: 'rgba(255,255,255,0.6)',
  5988. },
  5989. splitLine: {
  5990. show: true,
  5991. lineStyle: {
  5992. color: '#68b4dd66',
  5993. type: 'dashed',
  5994. },
  5995. },
  5996. axisLine: {
  5997. show: true,
  5998. lineStyle: {
  5999. color: '#3D7495',
  6000. },
  6001. },
  6002. axisLabel: {
  6003. show: true,
  6004. textStyle: {
  6005. color: '#fff',
  6006. fontSize: "20",
  6007. fontFamily: 'Microsoft YaHei'
  6008. },
  6009. },
  6010. nameTextStyle: {
  6011. color: '#fff',
  6012. fontSize: 20,
  6013. fontFamily: 'Microsoft YaHei'
  6014. },
  6015. },
  6016. ],
  6017. series: [
  6018. {
  6019. name: '预算额',
  6020. type: 'bar',
  6021. barWidth: 10,
  6022. itemStyle: {
  6023. normal: {
  6024. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6025. {
  6026. offset: 0,
  6027. color: '#064F78',
  6028. },
  6029. {
  6030. offset: 1,
  6031. color: '#082550',
  6032. },
  6033. ]),
  6034. },
  6035. },
  6036. data: right4.map(item => item.value),
  6037. },
  6038. {
  6039. name: '已签合同额',
  6040. type: 'bar',
  6041. barWidth: 10,
  6042. itemStyle: {
  6043. normal: {
  6044. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6045. {
  6046. offset: 0,
  6047. color: '#BDB35D',
  6048. },
  6049. {
  6050. offset: 1,
  6051. color: '#082550',
  6052. },
  6053. ]),
  6054. },
  6055. },
  6056. data: right4.map(item => item.value2),
  6057. },
  6058. {
  6059. name: '产值认定额',
  6060. type: 'bar',
  6061. barWidth: 10,
  6062. itemStyle: {
  6063. normal: {
  6064. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6065. {
  6066. offset: 0,
  6067. color: '#623726',
  6068. },
  6069. {
  6070. offset: 1,
  6071. color: '#082550',
  6072. },
  6073. ]),
  6074. },
  6075. },
  6076. data: right4.map(item => item.value3),
  6077. },
  6078. {
  6079. name: '结算额',
  6080. type: 'bar',
  6081. barWidth: 10,
  6082. itemStyle: {
  6083. normal: {
  6084. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6085. {
  6086. offset: 0,
  6087. color: '#13400B',
  6088. },
  6089. {
  6090. offset: 1,
  6091. color: '#082550',
  6092. },
  6093. ]),
  6094. },
  6095. },
  6096. data: right4.map(item => item.value4),
  6097. },
  6098. {
  6099. name: '付款额',
  6100. type: 'bar',
  6101. barWidth: 10,
  6102. itemStyle: {
  6103. normal: {
  6104. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6105. {
  6106. offset: 0,
  6107. color: '#B57C63',
  6108. },
  6109. {
  6110. offset: 1,
  6111. color: '#082550',
  6112. },
  6113. ]),
  6114. },
  6115. },
  6116. data: right4.map(item => item.value5),
  6117. },
  6118. ],
  6119. }
  6120. that.right1Chart.on('click', function (param) {
  6121. if (that.versions) {
  6122. that.rightAdd.modelName = 2
  6123. that.rightAdd.substraction = ''
  6124. that.rightAdd.projectStepCode = ''
  6125. that.projectNum = 314
  6126. that.rightPenetrateTwo(2, '', that.findCode(param.name), 'right')
  6127. } else {
  6128. that.projectListTipShow = true
  6129. }
  6130. })
  6131. that.right1Chart.setOption(option)
  6132. tools.loopShowTooltip(that.right1Chart, option, {
  6133. interval: 2000,
  6134. loopSeries: true,
  6135. })
  6136. },
  6137. initChartR2 () {
  6138. let that = this
  6139. const itemStyle = {
  6140. // opacity: 0.8,
  6141. shadowBlur: 10,
  6142. shadowOffsetX: 0,
  6143. shadowOffsetY: 0,
  6144. shadowColor: 'rgba(0,0,0,0.3)'
  6145. };
  6146. that.right2Chart = echarts.init(this.$refs['echartR2'])
  6147. that.right2Chart.on('showTip', (params) => {
  6148. // 如果是7或者15并且满足防抖则切换
  6149. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd) {
  6150. that.echartR2Fd = false
  6151. setTimeout(() => {
  6152. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  6153. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  6154. that.right2Chart.setOption(option);
  6155. // 防止勿刷新做的防抖
  6156. setTimeout(() => {
  6157. that.echartR2Fd = true
  6158. }, 2000)
  6159. }, 1900);
  6160. // 如果是17表示到了最后一个,那么重新来一遍
  6161. } else if (params.dataIndex == 17 && that.echartR2Fd) {
  6162. that.echartR2Fd = false
  6163. setTimeout(() => {
  6164. option.dataZoom[0].endValue = 0
  6165. option.dataZoom[0].startValue = 5
  6166. that.right2Chart.setOption(option);
  6167. // 防止勿刷新做的防抖
  6168. setTimeout(() => {
  6169. that.echartR2Fd = true
  6170. }, 2000)
  6171. }, 1900)
  6172. }
  6173. })
  6174. let option = {
  6175. color: ['#04635E', '#697143', '#4A3042'],
  6176. dataZoom: [
  6177. {
  6178. // start: 9,//默认为@
  6179. // end: 100,//黑认认为1@0
  6180. type: "slider",
  6181. show: false,
  6182. // xAxisIndex: [0]
  6183. handlesize: 0,//滑动条的 左右2个滑动条的大小
  6184. startValue: 5,// 初始显示值
  6185. endValue: 0,// 结束显示值
  6186. height: 10,//组件高度
  6187. left: "5%",
  6188. right: "4%",//右边的距离
  6189. bottom: "25%",//底边的距离
  6190. borderColor: "#939",
  6191. fillerColor: "#269cdb",
  6192. borderRadius: 5,
  6193. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  6194. showDataShadow: false,//是否显示数据阴影
  6195. showDetail: false,//即拖拽时候是否显示详细数值信息
  6196. truerealtime: true,//是否实时更新
  6197. filterMode: "filter"
  6198. }, {
  6199. type: 'inside',
  6200. show: true,
  6201. start: 1,
  6202. end: 100,
  6203. zoomOnMouseWheel: false, //滚轮是否触发缩放
  6204. moveOnMouseMove: false, //鼠标滚轮触发滚动
  6205. }
  6206. ],
  6207. legend: {
  6208. top: 10,
  6209. data: ['正偏差', '容差', '负偏差'],
  6210. textStyle: {
  6211. fontSize: 20,
  6212. color: '#fff',
  6213. fontFamily: 'Microsoft YaHei'
  6214. }
  6215. },
  6216. textStyle: {
  6217. color: '#fff',
  6218. },
  6219. tooltip: {
  6220. show: true,
  6221. trigger: "axis",
  6222. textStyle: {
  6223. color: '#FFF', // 文字的颜色
  6224. fontSize: '20', // 文字字体大小
  6225. fontFamily: 'Microsoft YaHei'
  6226. },
  6227. formatter: data => {
  6228. 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]}亿`
  6229. },
  6230. axisPointer: {
  6231. // // type: 'cross',',
  6232. },
  6233. },
  6234. grid: {
  6235. top: '10%',
  6236. right: '4%',
  6237. left: '5%',
  6238. bottom: '5%',
  6239. },
  6240. yAxis: {
  6241. name: '',
  6242. splitLine: {
  6243. show: true,
  6244. lineStyle: {
  6245. color: '#68b4dd66',
  6246. type: 'dashed',
  6247. },
  6248. },
  6249. axisLine: {
  6250. show: false
  6251. },
  6252. axisLabel: {
  6253. show: true,
  6254. formatter: '{value}%',
  6255. textStyle: {
  6256. color: '#fff',
  6257. fontSize: '20',
  6258. fontFamily: 'Microsoft YaHei'
  6259. },
  6260. },
  6261. nameTextStyle: {
  6262. color: '#fff',
  6263. fontSize: 20,
  6264. fontFamily: 'Microsoft YaHei'
  6265. },
  6266. },
  6267. xAxis: {
  6268. data: commonCompany,
  6269. // data: right5[0].map(item => item[0]),
  6270. axisLine: {
  6271. show: true, //隐藏X轴轴线
  6272. lineStyle: {
  6273. color: '#005094',
  6274. width: 1,
  6275. },
  6276. },
  6277. splitLine: {
  6278. show: true,
  6279. lineStyle: {
  6280. color: '#68b4dd66',
  6281. type: 'dashed',
  6282. },
  6283. },
  6284. axisTick: {
  6285. show: false, //隐藏X轴刻度
  6286. },
  6287. axisLabel: {
  6288. show: true,
  6289. // rotate: 40,
  6290. padding: [0, 0, 0, 0],
  6291. textStyle: {
  6292. color: '#fff', //X轴文字颜色
  6293. fontSize: 20,
  6294. fontFamily: 'Microsoft YaHei'
  6295. },
  6296. },
  6297. },
  6298. series: [
  6299. {
  6300. name: '正偏差',
  6301. type: 'scatter',
  6302. itemStyle: itemStyle,
  6303. data: right5[0],
  6304. symbolSize: function (data) {
  6305. return Math.sqrt(Math.abs(data[2])) * 9;
  6306. },
  6307. },
  6308. {
  6309. name: '容差',
  6310. type: 'scatter',
  6311. itemStyle: itemStyle,
  6312. data: right5[1],
  6313. symbolSize: function (data) {
  6314. return Math.sqrt(Math.abs(data[2])) * 9;
  6315. },
  6316. },
  6317. {
  6318. name: '负偏差',
  6319. type: 'scatter',
  6320. itemStyle: itemStyle,
  6321. data: right5[2],
  6322. symbolSize: function (data) {
  6323. return Math.sqrt(Math.abs(data[2])) * 9;
  6324. },
  6325. }
  6326. ]
  6327. }
  6328. that.right2Chart.on('click', function (param) {
  6329. if (that.versions) {
  6330. that.rightAdd.modelName = 1
  6331. that.rightAdd.substraction = param.seriesName == '正偏差' ? 1 : param.seriesName == '容差' ? 2 : 3
  6332. that.rightAdd.projectStepCode = ''
  6333. that.projectNum = 313
  6334. that.rightPenetrateTwo(1, param.seriesName == '正偏差' ? 1 : param.seriesName == '容差' ? 2 : 3, that.findCode(param.name), 'right')
  6335. } else {
  6336. that.projectListTipShow = true
  6337. }
  6338. })
  6339. that.right2Chart.setOption(option)
  6340. tools.loopShowTooltip(that.right2Chart, option, {
  6341. interval: 2000,
  6342. loopSeries: true,
  6343. })
  6344. },
  6345. initChartR3 () {
  6346. let that = this
  6347. that.right3Chart = echarts.init(this.$refs['echartR3'])
  6348. that.right3Chart.on('showTip', (params) => {
  6349. this.echartR4Chart ? this.echartR4Chart.dispose() : ''
  6350. this.echartR5Chart ? this.echartR5Chart.dispose() : ''
  6351. that.initChartR4(params.dataIndex)
  6352. that.initChartR5(params.dataIndex)
  6353. // 如果是7或者15并且满足防抖则切换
  6354. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR3Fd) {
  6355. that.echartR3Fd = false
  6356. setTimeout(() => {
  6357. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  6358. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  6359. that.right3Chart.setOption(option);
  6360. // 防止勿刷新做的防抖
  6361. setTimeout(() => {
  6362. that.echartR3Fd = true
  6363. }, 2000)
  6364. }, 7900);
  6365. // 如果是17表示到了最后一个,那么重新来一遍
  6366. } else if (params.dataIndex == 17 && that.echartR3Fd) {
  6367. that.echartR3Fd = false
  6368. setTimeout(() => {
  6369. option.dataZoom[0].endValue = 0
  6370. option.dataZoom[0].startValue = 5
  6371. that.right3Chart.setOption(option);
  6372. // 防止勿刷新做的防抖
  6373. setTimeout(() => {
  6374. that.echartR3Fd = true
  6375. }, 2000)
  6376. }, 7900)
  6377. }
  6378. })
  6379. let option = {
  6380. tooltip: {
  6381. formatter: data => {
  6382. 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}亿`
  6383. },
  6384. trigger: 'axis',
  6385. axisPointer: {
  6386. // type: 'cross',',
  6387. },
  6388. position: (params) => {
  6389. return [params[0] + 10, 60]
  6390. },
  6391. textStyle: {
  6392. color: '#FFF', // 文字的颜色
  6393. fontSize: '20', // 文字字体大小
  6394. fontFamily: 'Microsoft YaHei'
  6395. },
  6396. confine: true
  6397. },
  6398. dataZoom: [
  6399. {
  6400. // start: 9,//默认为@
  6401. // end: 100,//黑认认为1@0
  6402. type: "slider",
  6403. show: false,
  6404. // xAxisIndex: [0]
  6405. handlesize: 0,//滑动条的 左右2个滑动条的大小
  6406. startValue: 5,// 初始显示值
  6407. endValue: 0,// 结束显示值
  6408. height: 10,//组件高度
  6409. left: "5%",
  6410. right: "4%",//右边的距离
  6411. bottom: "25%",//底边的距离
  6412. borderColor: "#939",
  6413. fillerColor: "#269cdb",
  6414. borderRadius: 5,
  6415. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  6416. showDataShadow: false,//是否显示数据阴影
  6417. showDetail: false,//即拖拽时候是否显示详细数值信息
  6418. truerealtime: true,//是否实时更新
  6419. filterMode: "filter"
  6420. }, {
  6421. type: 'inside',
  6422. show: true,
  6423. start: 1,
  6424. end: 100,
  6425. zoomOnMouseWheel: false, //滚轮是否触发缩放
  6426. moveOnMouseMove: false, //鼠标滚轮触发滚动
  6427. }
  6428. ],
  6429. grid: {
  6430. top: '25%',
  6431. right: '3%',
  6432. left: '10%',
  6433. bottom: '20%',
  6434. },
  6435. legend: {
  6436. data: ["低风险", "中风险", '高风险'],
  6437. x: 'center',
  6438. y: '15px',
  6439. textStyle: {
  6440. // color: 'rgba(250,250,250,0.6)',
  6441. color: '#fff',
  6442. fontSize: "20",
  6443. fontFamily: 'Microsoft YaHei'
  6444. },
  6445. },
  6446. xAxis: {
  6447. data: commonCompany,
  6448. // data: right4.map(item => item.name),
  6449. axisLine: {
  6450. show: true, //隐藏X轴轴线
  6451. lineStyle: {
  6452. color: '#005094',
  6453. width: 1,
  6454. },
  6455. },
  6456. axisTick: {
  6457. show: false, //隐藏X轴刻度
  6458. },
  6459. axisLabel: {
  6460. show: true,
  6461. rotate: 40,
  6462. textStyle: {
  6463. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  6464. fontSize: '20',
  6465. fontFamily: 'Microsoft YaHei'
  6466. },
  6467. },
  6468. },
  6469. yAxis: [
  6470. {
  6471. type: 'value',
  6472. name: '亿',
  6473. nameTextStyle: {
  6474. color: 'rgba(255,255,255,0.6)',
  6475. },
  6476. splitLine: {
  6477. show: true,
  6478. lineStyle: {
  6479. color: '#68b4dd66',
  6480. type: 'dashed',
  6481. },
  6482. },
  6483. axisLine: {
  6484. show: true,
  6485. lineStyle: {
  6486. color: '#3D7495',
  6487. },
  6488. },
  6489. axisLabel: {
  6490. show: true,
  6491. textStyle: {
  6492. color: '#fff',
  6493. fontSize: '20',
  6494. fontFamily: 'Microsoft YaHei'
  6495. },
  6496. },
  6497. nameTextStyle: {
  6498. color: '#fff',
  6499. fontSize: 20,
  6500. fontFamily: 'Microsoft YaHei'
  6501. },
  6502. },
  6503. ],
  6504. series: [
  6505. {
  6506. name: '高风险',
  6507. type: 'bar',
  6508. stack: 'Ad',
  6509. barWidth: 10,
  6510. itemStyle: {
  6511. normal: {
  6512. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6513. {
  6514. offset: 0,
  6515. color: '#4A3042',
  6516. },
  6517. {
  6518. offset: 1,
  6519. color: '#4A3042',
  6520. },
  6521. ]),
  6522. },
  6523. },
  6524. data: right6.map(item => item.value),
  6525. },
  6526. {
  6527. name: '中风险',
  6528. type: 'bar',
  6529. stack: 'Ad',
  6530. barWidth: 10,
  6531. itemStyle: {
  6532. normal: {
  6533. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6534. {
  6535. offset: 0,
  6536. color: '#697143',
  6537. },
  6538. {
  6539. offset: 1,
  6540. color: '#697143',
  6541. },
  6542. ]),
  6543. },
  6544. },
  6545. data: right6.map(item => item.value2),
  6546. },
  6547. {
  6548. name: '低风险',
  6549. type: 'bar',
  6550. stack: 'Ad',
  6551. barWidth: 10,
  6552. itemStyle: {
  6553. normal: {
  6554. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6555. {
  6556. offset: 0,
  6557. color: '#04635E',
  6558. },
  6559. {
  6560. offset: 1,
  6561. color: '#04635E',
  6562. },
  6563. ]),
  6564. },
  6565. },
  6566. data: right6.map(item => item.value3),
  6567. },
  6568. ],
  6569. }
  6570. that.right3Chart.on('click', function (param) {
  6571. if (that.versions) {
  6572. that.rightAdd.modelName = 3
  6573. that.rightAdd.substraction = ''
  6574. that.rightAdd.projectStepCode = ''
  6575. that.projectNum = 315
  6576. that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name), 'right')
  6577. } else {
  6578. that.projectListTipShow = true
  6579. }
  6580. })
  6581. that.right3Chart.setOption(option)
  6582. tools.loopShowTooltip(that.right3Chart, option, {
  6583. interval: 8000,
  6584. loopSeries: true,
  6585. })
  6586. },
  6587. initChartR4 (indexValue) {
  6588. this.echartR4Chart = echarts.init(this.$refs['echartR4'])
  6589. option = {
  6590. title: {
  6591. text: ''
  6592. },
  6593. radar: {
  6594. center: ['50%', '50%'],
  6595. radius: 135,
  6596. indicator: [
  6597. { name: '安全风险', max: 100000 },
  6598. { name: '付款风险', max: 100000 },
  6599. { name: '合同风险', max: 100000 },
  6600. { name: '结算风险', max: 100000 },
  6601. { name: '进度风险', max: 100000 },
  6602. { name: '质量风险', max: 100000 },
  6603. ],
  6604. axisLine: { // 设置雷达图中间射线的颜色
  6605. lineStyle: {
  6606. color: '#887d33',
  6607. },
  6608. },
  6609. splitLine: { //网格颜色设置
  6610. show: true,
  6611. lineStyle: {
  6612. width: 1,
  6613. color: ['#871b1a', '#638f41', '#d29e35', '#b6802b']
  6614. },
  6615. },
  6616. name: { //修改indicator文字的颜色
  6617. textStyle: {
  6618. color: "#fff",
  6619. fontSize: '20',
  6620. fontFamily: 'Microsoft YaHei'
  6621. }
  6622. },
  6623. splitNumber: 4, //有几个圈
  6624. splitArea: { //设置图表颜色,show的值为true
  6625. show: true,
  6626. areaStyle: {
  6627. // color:"#c1ddf8", //一般设置方式
  6628. //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
  6629. //a ,b,c,d值可为0,1 a:1表示arr中的颜色右到左;c:1 arr中的颜色左到右
  6630. //b:1表示arr中的颜色下到上;d:1表示arr中的颜色上到下
  6631. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  6632. // { offset: 0, color: '#887D33' }, // 0% 处的颜色
  6633. // { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色
  6634. // { offset: 1, color: '#430705' }// 100% 处的颜色
  6635. // ], false)
  6636. color: ['#638f41', '#887d33', '#7d4216', '#430705'],
  6637. }
  6638. }
  6639. },
  6640. series: [
  6641. {
  6642. name: '',
  6643. type: 'radar',
  6644. symbol: 'circle', // 单个数值点的样式,还可以取值'rect','angle'等
  6645. symbolSize: 0, // 数值点的大小
  6646. data: [
  6647. {
  6648. value: right7[indexValue],
  6649. name: '安全风险',
  6650. itemStyle: { //该数值区域样式设置
  6651. normal: {
  6652. color: 'rgb(44,198,255,0.8)', //背景颜色,还需设置areaStyle
  6653. lineStyle: {
  6654. color: 'rgb(44,198,255,0.8)', //边框颜色
  6655. },
  6656. },
  6657. },
  6658. label: { //显示value中具体的数值
  6659. normal: {
  6660. show: false,
  6661. textStyle: { //更改数值样式
  6662. color: '#43EDE3'
  6663. }
  6664. },
  6665. },
  6666. areaStyle: { //设置区域背景颜色透明度
  6667. normal: {
  6668. width: 1,
  6669. opacity: 0.8,
  6670. },
  6671. },
  6672. }
  6673. ]
  6674. }
  6675. ]
  6676. };
  6677. // tools.loopShowTooltip(myChart, option, {
  6678. // interval: 2000,
  6679. // loopSeries: true,
  6680. // });
  6681. this.echartR4Chart.setOption(option)
  6682. },
  6683. initChartR5 () {
  6684. this.echartR5Chart = echarts.init(this.$refs['echartR5'])
  6685. let option = {
  6686. tooltip: {
  6687. formatter: data => {
  6688. 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}亿`
  6689. },
  6690. trigger: 'axis',
  6691. axisPointer: {
  6692. // type: 'cross',',
  6693. },
  6694. textStyle: {
  6695. color: '#FFF', // 文字的颜色
  6696. fontSize: '20', // 文字字体大小
  6697. fontFamily: 'Microsoft YaHei'
  6698. },
  6699. },
  6700. grid: {
  6701. top: '15%',
  6702. right: '3%',
  6703. left: '5%',
  6704. bottom: '35',
  6705. },
  6706. legend: {
  6707. data: ["预算额", "合同额", "结算额", "支付额"],
  6708. x: 'center',
  6709. y: '10px',
  6710. textStyle: {
  6711. // color: 'rgba(250,250,250,0.6)',
  6712. color: '#fff',
  6713. fontSize: "20",
  6714. fontFamily: 'Microsoft YaHei'
  6715. },
  6716. },
  6717. xAxis: {
  6718. data: ['设备费', '设计费', '施工费', '材料费'],
  6719. axisLine: {
  6720. show: true, //隐藏X轴轴线
  6721. lineStyle: {
  6722. color: '#005094',
  6723. width: 1,
  6724. },
  6725. },
  6726. axisTick: {
  6727. show: false, //隐藏X轴刻度
  6728. },
  6729. axisLabel: {
  6730. show: true,
  6731. // rotate: 40,
  6732. textStyle: {
  6733. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  6734. fontSize: '20', // 文字字体大小
  6735. fontFamily: 'Microsoft YaHei'
  6736. },
  6737. },
  6738. },
  6739. yAxis: [
  6740. {
  6741. type: 'value',
  6742. name: '亿',
  6743. nameTextStyle: {
  6744. color: 'rgba(255,255,255,0.6)',
  6745. },
  6746. splitLine: {
  6747. show: true,
  6748. lineStyle: {
  6749. color: '#68b4dd66',
  6750. type: 'dashed',
  6751. },
  6752. },
  6753. axisLine: {
  6754. show: true,
  6755. lineStyle: {
  6756. color: '#3D7495',
  6757. },
  6758. },
  6759. axisLabel: {
  6760. show: true,
  6761. textStyle: {
  6762. color: '#fff',
  6763. fontSize: '20', // 文字字体大小
  6764. fontFamily: 'Microsoft YaHei'
  6765. },
  6766. },
  6767. nameTextStyle: {
  6768. color: '#fff',
  6769. fontSize: 20,
  6770. fontFamily: 'Microsoft YaHei'
  6771. },
  6772. },
  6773. ],
  6774. series: [
  6775. {
  6776. name: '预算额',
  6777. type: 'bar',
  6778. barWidth: 10,
  6779. itemStyle: {
  6780. normal: {
  6781. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6782. {
  6783. offset: 0,
  6784. color: '#064F78',
  6785. },
  6786. {
  6787. offset: 1,
  6788. color: '#082550',
  6789. },
  6790. ]),
  6791. },
  6792. },
  6793. data: right8.map(item => item.value),
  6794. },
  6795. {
  6796. name: '合同额',
  6797. type: 'bar',
  6798. barWidth: 10,
  6799. itemStyle: {
  6800. normal: {
  6801. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6802. {
  6803. offset: 0,
  6804. color: '#BDB35D',
  6805. },
  6806. {
  6807. offset: 1,
  6808. color: '#082550',
  6809. },
  6810. ]),
  6811. },
  6812. },
  6813. data: right8.map(item => item.value2),
  6814. },
  6815. {
  6816. name: '结算额',
  6817. type: 'bar',
  6818. barWidth: 10,
  6819. itemStyle: {
  6820. normal: {
  6821. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6822. {
  6823. offset: 0,
  6824. color: '#623726',
  6825. },
  6826. {
  6827. offset: 1,
  6828. color: '#082550',
  6829. },
  6830. ]),
  6831. },
  6832. },
  6833. data: right8.map(item => item.value3),
  6834. },
  6835. {
  6836. name: '支付额',
  6837. type: 'bar',
  6838. barWidth: 10,
  6839. itemStyle: {
  6840. normal: {
  6841. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  6842. {
  6843. offset: 0,
  6844. color: '#955773',
  6845. },
  6846. {
  6847. offset: 1,
  6848. color: '#082550',
  6849. },
  6850. ]),
  6851. },
  6852. },
  6853. data: right8.map(item => item.value4),
  6854. },
  6855. ],
  6856. }
  6857. this.echartR5Chart.setOption(option)
  6858. tools.loopShowTooltip(this.echartR5Chart, option, {
  6859. interval: 2000,
  6860. loopSeries: true,
  6861. })
  6862. },
  6863. },
  6864. })