investHomeGroup.js 186 KB

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