investHomeGroup.js 206 KB

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