investHomeGroup.js 171 KB

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