investHomeGroup.js 187 KB

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