investHomeGroup.js 174 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645
  1. let app = new Vue({
  2. el: '#app',
  3. data () {
  4. return {
  5. mapChart: '',//地图专用echart
  6. mapTipShow: false,
  7. echartSingleTipShow: false,
  8. echartDoubleTipShow: false,
  9. backShow: false,
  10. titleUrl: '',
  11. titleName: '',
  12. yellowCount: 0, // 黄圈轮播参数
  13. yellowPosition: 40,// 黄圈悬浮窗位置参数
  14. echartR1Fd: true,
  15. echartR2Fd: true,
  16. echartR3Fd: true,
  17. echarts1Time: 16000,
  18. time: '',
  19. timer: '',
  20. timer2: '',
  21. totleLimit: '1363.88',
  22. showTip2: false,
  23. showTip3: false,
  24. list: '',
  25. count: 0,
  26. countType: 0,
  27. mapName: 'shanxi',
  28. geoCoordMap: {},
  29. storageRecordConfig2: [],
  30. titleList: [
  31. { name: '初步设计', type: 1, number: '106' },
  32. { name: '', type: 1, number: '' },
  33. { name: '详细设计', type: 1, number: '103' },
  34. { name: '', type: 1, number: '' },
  35. { name: '施工', type: 1, number: '62' },
  36. { name: '', type: 1, number: '' },
  37. { name: '完工', type: 1, number: '35' },
  38. { name: '', type: 1, number: '' },
  39. { name: '验收', type: 1, number: '42' },
  40. { name: '', type: 1, number: '' },
  41. { name: '结算', type: 1, number: '33' },
  42. { name: '', type: 1, number: '' },
  43. { name: '前期准备', type: 1, number: '66' },
  44. { name: '', type: 1, number: '' },
  45. { name: '工商变更登记', type: 1, number: '77' },
  46. { name: '', type: 1, number: '' },
  47. ],
  48. centerLeftList: [
  49. { name: '正偏差', value: '160', value2: '500' },
  50. { name: '容差内', value: '28', value2: '264' },
  51. { name: '负偏差', value: '103', value2: '182' }
  52. ],
  53. storageRecordConfig: {
  54. // waitTime: '30000',
  55. hoverPause: false,
  56. header: ['企业集团', '项目名 ', '投资总额'],
  57. // headerBGC: '#05507b33',
  58. // oddRowBGC: '#05507b33',
  59. // evenRowBGC: '#05507b33',
  60. headerHeight: 50,
  61. headerBGC: '#05507b33',
  62. oddRowBGC: '#05507b33',
  63. rowNum: 6,
  64. // columnWidth: [100, 550,100],
  65. align: ['center', 'center', 'center'],
  66. data: [
  67. ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"],
  68. ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"],
  69. ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.02亿元"],
  70. ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"],
  71. ['潞安化工', '分布式光伏发电项目', "2.01亿元"],
  72. ['太重集团', '设立太重(大同)新能源产业投资公司', "0.30亿元"],
  73. ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"],
  74. ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"],
  75. ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"],
  76. ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"],
  77. ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"],
  78. ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元"],
  79. ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"],
  80. ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元"],
  81. ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"],
  82. ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"],
  83. ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"],
  84. ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"],
  85. ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"]
  86. ],
  87. },
  88. }
  89. },
  90. created () {
  91. this.time = formatDate()
  92. this.timer = setInterval(() => {
  93. this.time = formatDate()
  94. }, 1000)
  95. this.timer2 = setInterval(() => {
  96. this.changeYellow()
  97. }, 2000)
  98. },
  99. beforeDestroy () {
  100. if (this.timer) {
  101. clearInterval(this.timer);
  102. }
  103. if (this.timer2) {
  104. clearInterval(this.timer2);
  105. }
  106. },
  107. mounted () {
  108. setTimeout(() => {
  109. this.initChartL1()
  110. this.initChartL2()
  111. this.initChartL3()
  112. this.initChartL4()
  113. this.initChartL5()
  114. this.initChartL6()
  115. this.initChartL7()
  116. this.initChartL8()
  117. this.initChartL9()
  118. this.initChartL10()
  119. this.initChartL11()
  120. this.changeTopColor()
  121. // 大屏二
  122. this.initChartC1()
  123. this.initChartC2()
  124. this.initChartC3()
  125. this.initChartC4()
  126. this.initChinaChart()
  127. this.initProjectList()
  128. // 大屏三
  129. this.initChartR1()
  130. this.initChartR2()
  131. this.initChartR3()
  132. this.initChartR4()
  133. this.initChartR5()
  134. this.changeYellow()
  135. })
  136. },
  137. methods: {
  138. // 回到中国地图
  139. backChina () {
  140. this.backShow = false
  141. this.mapChart.dispose()
  142. setTimeout(() => {
  143. this.initChinaChart()
  144. });
  145. },
  146. // 去项目看板
  147. goLookBoard (e) {
  148. console.log(e, '?????')
  149. },
  150. // 单个柱状图的弹窗
  151. showChartLTipSingle (e) {
  152. this.closeTap()
  153. this.titleName = e
  154. this.echartSingleTipShow = true
  155. setTimeout(() => {
  156. this.initChartLTip()
  157. })
  158. },
  159. // 两个柱状图的弹窗
  160. showChartLTipDouble (e) {
  161. // this.closeTap()
  162. this.titleName = e
  163. this.echartDoubleTipShow = true
  164. setTimeout(() => {
  165. this.initChartLTip2()
  166. this.initChartLTip3()
  167. })
  168. },
  169. initChartLTip () {
  170. let myChart = echarts.init(document.getElementById("echartSingleTip"));
  171. let option = {
  172. grid: {
  173. top: 40,
  174. right: 0,
  175. left: 60,
  176. bottom: 70,
  177. },
  178. tooltip: {
  179. show: true,
  180. trigger: "axis",
  181. axisPointer: {
  182. // 坐标轴指示器,坐标轴触发有效
  183. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  184. },
  185. textStyle: {
  186. color: '#FFF', // 文字的颜色
  187. fontSize: '20', // 文字字体大小
  188. },
  189. },
  190. xAxis: {
  191. data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
  192. axisTick: {
  193. show: false,
  194. },
  195. // x轴的字体颜色
  196. axisLabel: {
  197. rotate: 40,
  198. textStyle: {
  199. color: "white",
  200. fontSize: '20'
  201. },
  202. },
  203. //y轴线的颜色以及宽度
  204. axisLine: {
  205. show: true,
  206. lineStyle: {
  207. color: "#1E5389",
  208. width: 1,
  209. type: "solid",
  210. },
  211. },
  212. },
  213. yAxis: {
  214. name: '亿元',
  215. nameTextStyle: {//y轴上方单位的颜色
  216. color: '#fff',
  217. fontSize: '20'
  218. },
  219. axisTick: {
  220. lineStyle: {
  221. color: "#18416F",
  222. },
  223. },
  224. // y轴的字体颜色
  225. axisLabel: {
  226. textStyle: {
  227. color: "white",
  228. fontSize: '20'
  229. },
  230. },
  231. splitLine: {
  232. show: true,
  233. lineStyle: {
  234. color: "#204561",
  235. width: 1,
  236. type: "dotted",
  237. },
  238. },
  239. //y轴线的颜色以及宽度
  240. axisLine: {
  241. show: true,
  242. lineStyle: {
  243. color: "#1E5389",
  244. width: 1,
  245. type: "solid",
  246. },
  247. },
  248. },
  249. series: [
  250. // {
  251. // name: "2022年额度",
  252. // type: "bar",
  253. // 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],
  254. // showBackground: false,
  255. // backgroundStyle: {
  256. // color: "#18416F",
  257. // },
  258. // barWidth: "10%",
  259. // itemStyle: {
  260. // barBorderRadius: [10, 10, 0, 0],
  261. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  262. // {
  263. // offset: 0,
  264. // color: '#082550',
  265. // },
  266. // {
  267. // offset: 1,
  268. // color: '#69c0ff',
  269. // },
  270. // ]),
  271. // },
  272. // },
  273. {
  274. name: "2023年额度",
  275. type: "bar",
  276. data: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28],
  277. showBackground: false,
  278. backgroundStyle: {
  279. color: "#18416F",
  280. },
  281. barWidth: "30%",
  282. itemStyle: {
  283. // barBorderRadius: [10, 10, 0, 0],
  284. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  285. {
  286. offset: 0,
  287. color: '#082550',
  288. },
  289. {
  290. offset: 1,
  291. color: '#957DFF',
  292. },
  293. ]),
  294. },
  295. },
  296. ],
  297. legend: {
  298. // data: ["2022年额度", "2023年额度"],
  299. data: ["2023年额度"],
  300. textStyle: {
  301. // 图列内容样式
  302. color: "#fff", // 字体颜色
  303. fontSize: "20",
  304. },
  305. right: 'center',
  306. y: 5,
  307. icon: "roundRect",
  308. // 小图标的宽高
  309. itemHeight: 5,
  310. },
  311. };
  312. tools.loopShowTooltip(myChart, option, {
  313. nterval: 2000,
  314. loopSeries: true,
  315. })
  316. let that = this
  317. myChart.on('click', function (param) {
  318. window.location.href = './investHomeChild.html?type=2'
  319. })
  320. myChart.setOption(option);
  321. },
  322. initChartLTip2 () {
  323. let myChart = echarts.init(document.getElementById("echartSingleTip2"));
  324. let option = {
  325. grid: {
  326. top: 35,
  327. right: 0,
  328. left: 60,
  329. bottom: 50,
  330. },
  331. tooltip: {
  332. show: true,
  333. trigger: "axis",
  334. axisPointer: {
  335. // 坐标轴指示器,坐标轴触发有效
  336. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  337. },
  338. textStyle: {
  339. color: '#FFF', // 文字的颜色
  340. fontSize: '20', // 文字字体大小
  341. },
  342. },
  343. xAxis: {
  344. data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
  345. axisTick: {
  346. show: false,
  347. },
  348. // x轴的字体颜色
  349. axisLabel: {
  350. rotate: 40,
  351. textStyle: {
  352. color: "white",
  353. fontSize: '15'
  354. },
  355. },
  356. //y轴线的颜色以及宽度
  357. axisLine: {
  358. show: true,
  359. lineStyle: {
  360. color: "#1E5389",
  361. width: 1,
  362. type: "solid",
  363. },
  364. },
  365. },
  366. yAxis: {
  367. name: '亿元',
  368. nameTextStyle: {//y轴上方单位的颜色
  369. color: '#fff',
  370. fontSize: '15'
  371. },
  372. axisTick: {
  373. lineStyle: {
  374. color: "#18416F",
  375. },
  376. },
  377. // y轴的字体颜色
  378. axisLabel: {
  379. textStyle: {
  380. color: "white",
  381. fontSize: '15'
  382. },
  383. },
  384. splitLine: {
  385. show: true,
  386. lineStyle: {
  387. color: "#204561",
  388. width: 1,
  389. type: "dotted",
  390. },
  391. },
  392. //y轴线的颜色以及宽度
  393. axisLine: {
  394. show: true,
  395. lineStyle: {
  396. color: "#1E5389",
  397. width: 1,
  398. type: "solid",
  399. },
  400. },
  401. },
  402. series: [
  403. // {
  404. // name: "2022年额度",
  405. // type: "bar",
  406. // 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],
  407. // showBackground: false,
  408. // backgroundStyle: {
  409. // color: "#18416F",
  410. // },
  411. // barWidth: "10%",
  412. // itemStyle: {
  413. // barBorderRadius: [10, 10, 0, 0],
  414. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  415. // {
  416. // offset: 0,
  417. // color: '#082550',
  418. // },
  419. // {
  420. // offset: 1,
  421. // color: '#69c0ff',
  422. // },
  423. // ]),
  424. // },
  425. // },
  426. {
  427. name: "2023年额度",
  428. type: "bar",
  429. data: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28],
  430. showBackground: false,
  431. backgroundStyle: {
  432. color: "#18416F",
  433. },
  434. barWidth: "30%",
  435. itemStyle: {
  436. // barBorderRadius: [10, 10, 0, 0],
  437. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  438. {
  439. offset: 0,
  440. color: '#082550',
  441. },
  442. {
  443. offset: 1,
  444. color: '#957DFF',
  445. },
  446. ]),
  447. },
  448. },
  449. ],
  450. legend: {
  451. // data: ["2022年额度", "2023年额度"],
  452. data: ["2023年额度"],
  453. textStyle: {
  454. // 图列内容样式
  455. color: "#fff", // 字体颜色
  456. fontSize: "20",
  457. },
  458. right: 'center',
  459. y: 5,
  460. icon: "roundRect",
  461. // 小图标的宽高
  462. itemHeight: 5,
  463. },
  464. };
  465. tools.loopShowTooltip(myChart, option, {
  466. nterval: 2000,
  467. loopSeries: true,
  468. })
  469. let that = this
  470. myChart.on('click', function (param) {
  471. window.location.href = './investHomeChild.html?type=2'
  472. })
  473. myChart.setOption(option);
  474. },
  475. initChartLTip3 () {
  476. let myChart = echarts.init(document.getElementById("echartSingleTip3"));
  477. let option = {
  478. grid: {
  479. top: 35,
  480. right: 0,
  481. left: 60,
  482. bottom: 50,
  483. },
  484. tooltip: {
  485. show: true,
  486. trigger: "axis",
  487. axisPointer: {
  488. // 坐标轴指示器,坐标轴触发有效
  489. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  490. },
  491. textStyle: {
  492. color: '#FFF', // 文字的颜色
  493. fontSize: '20', // 文字字体大小
  494. },
  495. },
  496. xAxis: {
  497. data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
  498. axisTick: {
  499. show: false,
  500. },
  501. // x轴的字体颜色
  502. axisLabel: {
  503. rotate: 40,
  504. textStyle: {
  505. color: "white",
  506. fontSize: '15'
  507. },
  508. },
  509. //y轴线的颜色以及宽度
  510. axisLine: {
  511. show: true,
  512. lineStyle: {
  513. color: "#1E5389",
  514. width: 1,
  515. type: "solid",
  516. },
  517. },
  518. },
  519. yAxis: {
  520. name: '亿元',
  521. nameTextStyle: {//y轴上方单位的颜色
  522. color: '#fff',
  523. fontSize: '15'
  524. },
  525. axisTick: {
  526. lineStyle: {
  527. color: "#18416F",
  528. },
  529. },
  530. // y轴的字体颜色
  531. axisLabel: {
  532. textStyle: {
  533. color: "white",
  534. fontSize: '15'
  535. },
  536. },
  537. splitLine: {
  538. show: true,
  539. lineStyle: {
  540. color: "#204561",
  541. width: 1,
  542. type: "dotted",
  543. },
  544. },
  545. //y轴线的颜色以及宽度
  546. axisLine: {
  547. show: true,
  548. lineStyle: {
  549. color: "#1E5389",
  550. width: 1,
  551. type: "solid",
  552. },
  553. },
  554. },
  555. series: [
  556. // {
  557. // name: "2022年额度",
  558. // type: "bar",
  559. // 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],
  560. // showBackground: false,
  561. // backgroundStyle: {
  562. // color: "#18416F",
  563. // },
  564. // barWidth: "10%",
  565. // itemStyle: {
  566. // barBorderRadius: [10, 10, 0, 0],
  567. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  568. // {
  569. // offset: 0,
  570. // color: '#082550',
  571. // },
  572. // {
  573. // offset: 1,
  574. // color: '#69c0ff',
  575. // },
  576. // ]),
  577. // },
  578. // },
  579. {
  580. name: "2023年额度",
  581. type: "bar",
  582. data: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28],
  583. showBackground: false,
  584. backgroundStyle: {
  585. color: "#18416F",
  586. },
  587. barWidth: "30%",
  588. itemStyle: {
  589. // barBorderRadius: [10, 10, 0, 0],
  590. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  591. {
  592. offset: 0,
  593. color: '#082550',
  594. },
  595. {
  596. offset: 1,
  597. color: '#957DFF',
  598. },
  599. ]),
  600. },
  601. },
  602. ],
  603. legend: {
  604. // data: ["2022年额度", "2023年额度"],
  605. data: ["2023年额度"],
  606. textStyle: {
  607. // 图列内容样式
  608. color: "#fff", // 字体颜色
  609. fontSize: "20",
  610. },
  611. right: 'center',
  612. y: 5,
  613. icon: "roundRect",
  614. // 小图标的宽高
  615. itemHeight: 5,
  616. },
  617. };
  618. tools.loopShowTooltip(myChart, option, {
  619. nterval: 2000,
  620. loopSeries: true,
  621. })
  622. let that = this
  623. myChart.on('click', function (param) {
  624. window.location.href = './investHomeChild.html?type=2'
  625. })
  626. myChart.setOption(option);
  627. },
  628. closeTap () {
  629. this.mapTipShow = false
  630. this.echartSingleTipShow = false
  631. this.echartDoubleTipShow = false
  632. },
  633. //点击弹窗左半部分
  634. popLeftClick () {
  635. if (this.titleUrl == '2.png') {
  636. this.titleUrl = '3.png'
  637. } else if (this.titleUrl == '7.png') {
  638. this.titleUrl = '8.png'
  639. } else if (this.titleUrl == '3.png') {
  640. this.titleUrl = '2.png'
  641. } else if (this.titleUrl == '8.png') {
  642. this.titleUrl = '7.png'
  643. } else if (this.titleUrl == '5.png') {
  644. this.titleUrl = '2.png'
  645. } else if (this.titleUrl == '10.png') {
  646. this.titleUrl = '7.png'
  647. }
  648. },
  649. //点击弹窗右半部分
  650. poprightClick () {
  651. if (this.titleUrl == '2.png') {
  652. this.titleUrl = '5.png'
  653. } else if (this.titleUrl == '7.png') {
  654. this.titleUrl = '10.png'
  655. } else if (this.titleUrl == '5.png') {
  656. this.titleUrl = '2.png'
  657. } else if (this.titleUrl == '10.png') {
  658. this.titleUrl = '7.png'
  659. } else if (this.titleUrl == '3.png') {
  660. this.titleUrl = '2.png'
  661. } else if (this.titleUrl == '8.png') {
  662. this.titleUrl = '7.png'
  663. }
  664. },
  665. // 标题弹窗
  666. showTitlePop (e, name) {
  667. this.closeTap()
  668. this.titleUrl = e
  669. this.titleName = name
  670. this.mapTipShow = true
  671. },
  672. changeYellow () {
  673. this.titleList.forEach((item, index) => {
  674. this.$set(this.titleList[index], 'type', 1)
  675. })
  676. this.$set(this.titleList[this.yellowCount], 'type', 2)
  677. if (this.yellowCount == 14) {
  678. this.yellowCount = 0
  679. this.yellowPosition += 315
  680. } else {
  681. if (this.yellowCount != 0) {
  682. this.yellowPosition += 315
  683. } else {
  684. this.yellowPosition = 40
  685. }
  686. this.yellowCount += 2
  687. }
  688. },
  689. numFormat (value) {
  690. if (!value) return '0'
  691. // var intPart = Number(value).toFixed(0) // 获取整数部分
  692. var intPart = parseInt(value)// 获取整数部分
  693. var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  694. var floatPart = '.00' // 预定义小数部分
  695. var value2Array = value.toString().split('.')
  696. // =2表示数据有小数位
  697. if (value2Array.length === 2) {
  698. floatPart = value2Array[1].toString() // 拿到小数部分
  699. if (floatPart.length === 1) {
  700. // 补0
  701. return intPartFormat + '.' + floatPart + '0'
  702. } else {
  703. return intPartFormat + '.' + floatPart
  704. }
  705. } else {
  706. return intPartFormat
  707. }
  708. },
  709. changeTopColor () {
  710. this.list = document.getElementsByClassName('row-item')
  711. for (var i = 0; i < this.list.length; i++) {
  712. if (i == 1) {
  713. this.list[i].classList.add('light')
  714. } else {
  715. this.list[i].classList.remove('light')
  716. }
  717. }
  718. this.initChartL9()
  719. },
  720. scrollChange (index) {
  721. if (index == 18) {
  722. this.count = -1
  723. } else {
  724. this.count = index
  725. }
  726. if (this.count > 12 && this.count != 18) {
  727. this.countType = 1
  728. } else {
  729. this.countType = 0
  730. }
  731. this.list = document.getElementsByClassName('row-item')
  732. for (var i = 0; i < this.list.length; i++) {
  733. if (i == 2) {
  734. this.list[i].classList.add('light')
  735. } else {
  736. this.list[i].classList.remove('light')
  737. }
  738. }
  739. this.initChartL9()
  740. },
  741. initChartL1 () {
  742. let myChart = echarts.init(this.$refs['echartL1'])
  743. var value = 0.1463;
  744. var data = [value];
  745. let option = {
  746. backgroundColor: 'transparent',
  747. title: [
  748. {
  749. // text: '总额度285.48亿',
  750. // formatter: `<span>总额度</span>285.48亿`,
  751. x: '37%',
  752. y: '80%',
  753. textStyle: {
  754. fontSize: 24,
  755. fontWeight: 'bold',
  756. color: '#2CB7E0',
  757. lineHeight: 16,
  758. textAlign: 'center',
  759. },
  760. }
  761. ],
  762. series: [
  763. {
  764. type: 'liquidFill',
  765. radius: '70%',
  766. center: ['50%', '40%'],
  767. color: [
  768. {
  769. type: 'linear',
  770. x: 0,
  771. y: 0,
  772. x2: 0,
  773. y2: 1,
  774. colorStops: [
  775. {
  776. offset: 0,
  777. color: '#446bf5',
  778. },
  779. {
  780. offset: 1,
  781. color: '#2ca3e2',
  782. },
  783. ],
  784. globalCoord: false,
  785. },
  786. ],
  787. data: [value, value], // data个数代表波浪数
  788. backgroundStyle: {
  789. borderWidth: 1,
  790. color: 'RGBA(51, 66, 127, 0.7)',
  791. },
  792. label: {
  793. normal: {
  794. formatter: function (data) {
  795. return (data.value * 100).toFixed(2) + '%'
  796. },
  797. textStyle: {
  798. fontSize: 30,
  799. color: '#fff',
  800. },
  801. },
  802. },
  803. outline: {
  804. // show: false
  805. borderDistance: 0,
  806. itemStyle: {
  807. borderWidth: 2,
  808. borderColor: 'transparent',
  809. },
  810. },
  811. },
  812. ],
  813. }
  814. myChart.setOption(option)
  815. },
  816. initChartL2 () {
  817. var chartData = [
  818. {
  819. name: '辅业',
  820. y: 76.38,
  821. num: 84,
  822. sliced: false,
  823. selected: false,
  824. },
  825. {
  826. name: '主业',
  827. y: 1287.50,
  828. num: 713,
  829. sliced: false,
  830. selected: false,
  831. }
  832. ]
  833. var timer = null;
  834. var i = 0;
  835. let that = this
  836. var option = {
  837. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  838. chart: {
  839. type: 'pie',
  840. backgroundColor: 'rgba(0,0,0,0)',
  841. options3d: {
  842. enabled: true,
  843. alpha: 45,
  844. //beta: 0
  845. },
  846. events: {
  847. // load,图表加载完成时触发
  848. load: function () {
  849. var chart = this;
  850. var points = chart.series[0].points;
  851. var len = points.length;
  852. timer && clearInterval(timer);
  853. timer = setInterval(function () {
  854. autoTooltip(points[i]);
  855. chartData.forEach((item, index) => {
  856. item.sliced = false
  857. item.selected = false
  858. if (index == i) {
  859. item.sliced = true
  860. item.selected = true
  861. }
  862. })
  863. chart.update({
  864. series: [{
  865. type: 'pie',
  866. name: '占比',
  867. point: {
  868. events: {
  869. click: function (e) {
  870. that.showTip3 = true
  871. that.echartTitle = '主辅业计划占比'
  872. setTimeout(() => {
  873. // that.initChartT1(chartData)
  874. })
  875. }
  876. }
  877. },
  878. data: chartData
  879. }]
  880. })
  881. i++;
  882. if (i === len) {
  883. i = 0;
  884. chartData.forEach((item, index) => {
  885. item.sliced = false
  886. item.selected = false
  887. })
  888. chart.update({
  889. series: [{
  890. type: 'pie',
  891. name: '占比',
  892. point: {
  893. events: {
  894. click: function (e) {
  895. console.log(e)
  896. }
  897. }
  898. },
  899. data: chartData
  900. }]
  901. })
  902. }
  903. }, 2000);
  904. },
  905. legendItemClick: function (event) {
  906. console.log(event);
  907. return true;
  908. }
  909. }
  910. },
  911. credits: {
  912. enabled: false //去掉hightchats水印
  913. },
  914. legend: {
  915. // labelFormatter: function() {
  916. // return 123;
  917. // },
  918. align: 'right',//横向位置
  919. verticalAlign: 'middle', // 纵向位置
  920. layout: "vertical",//横排还是竖排
  921. x: -30,
  922. y: 50,
  923. symbolWidth: 50,
  924. itemStyle: {
  925. fontSize: '20px',
  926. color: '#fff',
  927. x: 20
  928. },
  929. },
  930. title: {
  931. text: '主辅业计划占比',
  932. style: {
  933. color: '#fff',
  934. fontSize: 22,
  935. },
  936. align: 'center',
  937. verticalAlign: "bottom",
  938. x: -80
  939. },
  940. tooltip: {
  941. crosshairs: false,
  942. backgroundColor: 'rgba(0,0,0,0.5)',
  943. // positioner: function(e){
  944. // console.log(e, this)
  945. // },
  946. useHTML: false, //开启html模式
  947. style: {
  948. color: '#fff',
  949. fontSize:'20'
  950. },
  951. formatter: function (e) {
  952. let num = chartData[this.colorIndex].num
  953. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  954. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  955. },
  956. //pointFormat:
  957. },
  958. plotOptions: {
  959. pie: {
  960. allowPointSelect: true,
  961. showInLegend: true, // 图例
  962. cursor: 'pointer',
  963. size: 220,
  964. innerSize: 150, //环形图中间空白,0为饼图
  965. depth: 25, //立体高度
  966. slicedOffset: 21, //动画距离
  967. dataLabels: {
  968. enabled: false, // 是否展示指示线
  969. format: '{point.name}: {point.percentage}'
  970. }
  971. },
  972. },
  973. series: [{
  974. type: 'pie',
  975. name: '占比',
  976. // center: ['70%', '50%'],
  977. point: {
  978. events: {
  979. click: function (e) { //点击事件
  980. that.showTip3 = true
  981. that.echartTitle = '主辅业计划占比'
  982. setTimeout(() => {
  983. // that.initChartT1(chartData)
  984. })
  985. },
  986. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  987. //console.log(e)
  988. chartData.forEach((item, index) => {
  989. item.sliced = false
  990. item.selected = false
  991. })
  992. chartData[e.target.index].sliced = true
  993. chartData[e.target.index].selected = true
  994. chart.update({
  995. series: [{
  996. type: 'pie',
  997. name: '占比',
  998. point: {
  999. events: {
  1000. click: function (e) {
  1001. that.showTip3 = true
  1002. that.echartTitle = '主辅业计划占比'
  1003. setTimeout(() => {
  1004. // that.initChartT1(chartData)
  1005. })
  1006. }
  1007. }
  1008. },
  1009. data: chartData
  1010. }]
  1011. })
  1012. timer && clearInterval(timer);
  1013. },
  1014. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  1015. var points = chart.series[0].points;
  1016. var len = points.length;
  1017. timer && clearInterval(timer);
  1018. timer = setInterval(function () {
  1019. autoTooltip(points[i]);
  1020. chartData.forEach((item, index) => {
  1021. item.sliced = false
  1022. item.selected = false
  1023. if (index == i) {
  1024. item.sliced = true
  1025. item.selected = true
  1026. }
  1027. })
  1028. chart.update({
  1029. series: [{
  1030. type: 'pie',
  1031. name: '占比',
  1032. point: {
  1033. events: {
  1034. click: function (e) {
  1035. that.showTip3 = true
  1036. that.echartTitle = '主辅业计划占比'
  1037. setTimeout(() => {
  1038. // that.initChartT1(chartData)
  1039. })
  1040. }
  1041. }
  1042. },
  1043. data: chartData
  1044. }]
  1045. })
  1046. i++;
  1047. if (i === len) {
  1048. i = 0;
  1049. chartData.forEach((item, index) => {
  1050. item.sliced = false
  1051. item.selected = false
  1052. })
  1053. chart.update({
  1054. series: [{
  1055. type: 'pie',
  1056. name: '占比',
  1057. point: {
  1058. events: {
  1059. click: function (e) {
  1060. that.showTip3 = true
  1061. that.echartTitle = '主辅业计划占比'
  1062. setTimeout(() => {
  1063. // that.initChartT1(chartData)
  1064. })
  1065. }
  1066. }
  1067. },
  1068. data: chartData
  1069. }]
  1070. })
  1071. }
  1072. }, 2000);
  1073. }
  1074. }
  1075. },
  1076. data: chartData
  1077. }]
  1078. }
  1079. var chart = Highcharts.chart('echartL2', option);
  1080. function autoTooltip (point) {
  1081. chart.tooltip.refresh(point);
  1082. }
  1083. },
  1084. initChartL3 () {
  1085. var chartData = [
  1086. {
  1087. name: '特别监管类',
  1088. y: 635.84,
  1089. num: 168,
  1090. sliced: false,
  1091. selected: false,
  1092. },
  1093. {
  1094. name: '备案类',
  1095. y: 728.04,
  1096. num: 465,
  1097. sliced: false,
  1098. selected: false,
  1099. }
  1100. ]
  1101. var timer = null;
  1102. var i = 0;
  1103. let that = this
  1104. var chart = Highcharts.chart('echartL3', {
  1105. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1106. chart: {
  1107. type: 'pie',
  1108. backgroundColor: 'rgba(0,0,0,0)',
  1109. options3d: {
  1110. enabled: true,
  1111. alpha: 45,
  1112. //beta: 0
  1113. },
  1114. events: {
  1115. // load,图表加载完成时触发
  1116. load: function () {
  1117. var chart = this;
  1118. var points = chart.series[0].points;
  1119. var len = points.length;
  1120. timer && clearInterval(timer);
  1121. timer = setInterval(function () {
  1122. autoTooltip(points[i]);
  1123. chartData.forEach((item, index) => {
  1124. item.sliced = false
  1125. item.selected = false
  1126. if (index == i) {
  1127. item.sliced = true
  1128. item.selected = true
  1129. }
  1130. })
  1131. chart.update({
  1132. series: [{
  1133. type: 'pie',
  1134. name: '占比',
  1135. point: {
  1136. events: {
  1137. click: function (e) {
  1138. that.showTip3 = true
  1139. that.echartTitle = '项目管理类型'
  1140. setTimeout(() => {
  1141. that.initChartT1(chartData)
  1142. })
  1143. }
  1144. }
  1145. },
  1146. data: chartData
  1147. }]
  1148. })
  1149. i++;
  1150. if (i === len) {
  1151. i = 0;
  1152. chartData.forEach((item, index) => {
  1153. item.sliced = false
  1154. item.selected = false
  1155. })
  1156. chart.update({
  1157. series: [{
  1158. type: 'pie',
  1159. name: '占比',
  1160. point: {
  1161. events: {
  1162. click: function (e) {
  1163. console.log(e)
  1164. }
  1165. }
  1166. },
  1167. data: chartData
  1168. }]
  1169. })
  1170. }
  1171. }, 2000);
  1172. },
  1173. legendItemClick: function (event) {
  1174. //console.log(event);
  1175. that.showTip3 = true
  1176. that.echartTitle = '项目管理类型'
  1177. setTimeout(() => {
  1178. that.initChartT1(chartData)
  1179. })
  1180. return true;
  1181. }
  1182. }
  1183. },
  1184. credits: {
  1185. enabled: false //去掉hightchats水印
  1186. },
  1187. legend: {
  1188. // labelFormatter: function() {
  1189. // return 123;
  1190. // },
  1191. align: 'right',//横向位置
  1192. verticalAlign: 'middle', // 纵向位置
  1193. layout: "vertical",//横排还是竖排
  1194. x: -30,
  1195. y: 50,
  1196. symbolWidth: 50,
  1197. itemDistance: 50,
  1198. itemStyle: {
  1199. fontSize: '20px',
  1200. color: '#fff',
  1201. x: 20
  1202. },
  1203. },
  1204. title: {
  1205. text: '项目管理类型',
  1206. style: {
  1207. color: '#fff',
  1208. fontSize: 22,
  1209. },
  1210. align: 'center',
  1211. verticalAlign: "bottom",
  1212. x: -120
  1213. },
  1214. tooltip: {
  1215. crosshairs: true,
  1216. backgroundColor: 'rgba(0,0,0,0.5)',
  1217. // positioner: function(e){
  1218. // console.log(e, this)
  1219. // },
  1220. useHTML: false, //开启html模式
  1221. style: {
  1222. color: '#fff',
  1223. fontSize:'20'
  1224. },
  1225. formatter: function (e) {
  1226. //console.log(this)
  1227. let num = chartData[this.colorIndex].num
  1228. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1229. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1230. },
  1231. //pointFormat:
  1232. },
  1233. plotOptions: {
  1234. pie: {
  1235. allowPointSelect: true,
  1236. showInLegend: true, // 图例
  1237. cursor: 'pointer',
  1238. size: 220,
  1239. innerSize: 150, //环形图中间空白,0为饼图
  1240. depth: 25, //立体高度
  1241. slicedOffset: 21, //动画距离
  1242. dataLabels: {
  1243. enabled: false, // 是否展示指示线
  1244. format: '{point.name}: {point.percentage}'
  1245. }
  1246. },
  1247. },
  1248. series: [{
  1249. type: 'pie',
  1250. name: '占比',
  1251. // center: ['70%', '50%'],
  1252. point: {
  1253. events: {
  1254. click: function (e) { //点击事件
  1255. that.showTip3 = true
  1256. that.echartTitle = '项目管理类型'
  1257. setTimeout(() => {
  1258. that.initChartT1(chartData)
  1259. })
  1260. },
  1261. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1262. //console.log(e)
  1263. chartData.forEach((item, index) => {
  1264. item.sliced = false
  1265. item.selected = false
  1266. })
  1267. chartData[e.target.index].sliced = true
  1268. chartData[e.target.index].selected = true
  1269. chart.update({
  1270. series: [{
  1271. type: 'pie',
  1272. name: '占比',
  1273. point: {
  1274. events: {
  1275. click: function (e) {
  1276. that.showTip3 = true
  1277. that.echartTitle = '项目管理类型'
  1278. setTimeout(() => {
  1279. that.initChartT1(chartData)
  1280. })
  1281. }
  1282. }
  1283. },
  1284. data: chartData
  1285. }]
  1286. })
  1287. timer && clearInterval(timer);
  1288. },
  1289. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  1290. var points = chart.series[0].points;
  1291. var len = points.length;
  1292. timer && clearInterval(timer);
  1293. timer = setInterval(function () {
  1294. autoTooltip(points[i]);
  1295. chartData.forEach((item, index) => {
  1296. item.sliced = false
  1297. item.selected = false
  1298. if (index == i) {
  1299. item.sliced = true
  1300. item.selected = true
  1301. }
  1302. })
  1303. chart.update({
  1304. series: [{
  1305. type: 'pie',
  1306. name: '占比',
  1307. point: {
  1308. events: {
  1309. click: function (e) {
  1310. that.showTip3 = true
  1311. that.echartTitle = '项目管理类型'
  1312. setTimeout(() => {
  1313. that.initChartT1(chartData)
  1314. })
  1315. }
  1316. }
  1317. },
  1318. data: chartData
  1319. }]
  1320. })
  1321. i++;
  1322. if (i === len) {
  1323. i = 0;
  1324. chartData.forEach((item, index) => {
  1325. item.sliced = false
  1326. item.selected = false
  1327. })
  1328. chart.update({
  1329. series: [{
  1330. type: 'pie',
  1331. name: '占比',
  1332. point: {
  1333. events: {
  1334. click: function (e) {
  1335. console.log(e)
  1336. }
  1337. }
  1338. },
  1339. data: chartData
  1340. }]
  1341. })
  1342. }
  1343. }, 2000);
  1344. }
  1345. }
  1346. },
  1347. data: chartData
  1348. }]
  1349. });
  1350. function autoTooltip (point) {
  1351. chart.tooltip.refresh(point);
  1352. }
  1353. },
  1354. initChartL4 () {
  1355. let myChart = echarts.init(document.getElementById("echartL4"));
  1356. let option = {
  1357. grid: {
  1358. top: 45,
  1359. right: 0,
  1360. left: 60,
  1361. bottom: 60,
  1362. },
  1363. tooltip: {
  1364. show: true,
  1365. trigger: "axis",
  1366. axisPointer: {
  1367. // 坐标轴指示器,坐标轴触发有效
  1368. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  1369. },
  1370. textStyle: {
  1371. color: '#FFF', // 文字的颜色
  1372. fontSize: '20', // 文字字体大小
  1373. },
  1374. },
  1375. xAxis: {
  1376. data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
  1377. axisTick: {
  1378. show: false,
  1379. },
  1380. // x轴的字体颜色
  1381. axisLabel: {
  1382. rotate: 40,
  1383. textStyle: {
  1384. color: "white",
  1385. fontSize: '15'
  1386. },
  1387. },
  1388. //y轴线的颜色以及宽度
  1389. axisLine: {
  1390. show: true,
  1391. lineStyle: {
  1392. color: "#1E5389",
  1393. width: 1,
  1394. type: "solid",
  1395. },
  1396. },
  1397. },
  1398. yAxis: {
  1399. name: '亿元',
  1400. nameTextStyle: {//y轴上方单位的颜色
  1401. color: '#fff',
  1402. },
  1403. axisTick: {
  1404. lineStyle: {
  1405. color: "#18416F",
  1406. },
  1407. },
  1408. // y轴的字体颜色
  1409. axisLabel: {
  1410. textStyle: {
  1411. color: "white",
  1412. fontSize: '15'
  1413. },
  1414. },
  1415. splitLine: {
  1416. show: true,
  1417. lineStyle: {
  1418. color: "#204561",
  1419. width: 1,
  1420. type: "dotted",
  1421. },
  1422. },
  1423. //y轴线的颜色以及宽度
  1424. axisLine: {
  1425. show: true,
  1426. lineStyle: {
  1427. color: "#1E5389",
  1428. width: 1,
  1429. type: "solid",
  1430. },
  1431. },
  1432. nameTextStyle: {
  1433. color: '#fff',
  1434. fontSize: 15,
  1435. },
  1436. },
  1437. series: [
  1438. // {
  1439. // name: "2022年额度",
  1440. // type: "bar",
  1441. // 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],
  1442. // showBackground: false,
  1443. // backgroundStyle: {
  1444. // color: "#18416F",
  1445. // },
  1446. // barWidth: "10%",
  1447. // itemStyle: {
  1448. // barBorderRadius: [10, 10, 0, 0],
  1449. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1450. // {
  1451. // offset: 0,
  1452. // color: '#082550',
  1453. // },
  1454. // {
  1455. // offset: 1,
  1456. // color: '#69c0ff',
  1457. // },
  1458. // ]),
  1459. // },
  1460. // },
  1461. {
  1462. name: "2023年额度",
  1463. type: "bar",
  1464. data: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28],
  1465. showBackground: false,
  1466. backgroundStyle: {
  1467. color: "#18416F",
  1468. },
  1469. barWidth: "30%",
  1470. itemStyle: {
  1471. // barBorderRadius: [10, 10, 0, 0],
  1472. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  1473. {
  1474. offset: 0,
  1475. color: '#082550',
  1476. },
  1477. {
  1478. offset: 1,
  1479. color: '#957DFF',
  1480. },
  1481. ]),
  1482. },
  1483. },
  1484. ],
  1485. legend: {
  1486. // data: ["2022年额度", "2023年额度"],
  1487. data: ["2023年额度"],
  1488. textStyle: {
  1489. // 图列内容样式
  1490. color: "#fff", // 字体颜色
  1491. fontSize: "20",
  1492. },
  1493. right: 'center',
  1494. y: 5,
  1495. icon: "roundRect",
  1496. // 小图标的宽高
  1497. itemHeight: 5,
  1498. },
  1499. };
  1500. tools.loopShowTooltip(myChart, option, {
  1501. nterval: 2000,
  1502. loopSeries: true,
  1503. })
  1504. let that = this
  1505. myChart.on('click', function (param) {
  1506. window.location.href = './investHomeChild.html?type=2'
  1507. })
  1508. myChart.setOption(option);
  1509. },
  1510. initChartL5 () {
  1511. var chartData = [
  1512. {
  1513. name: '煤炭',
  1514. y: 294.61,
  1515. num: 95,
  1516. sliced: false,
  1517. selected: false,
  1518. },
  1519. {
  1520. name: '火电',
  1521. y: 39.24,
  1522. num: 1,
  1523. sliced: false,
  1524. selected: false,
  1525. },
  1526. {
  1527. name: '冶金',
  1528. y: 38.85,
  1529. num: 6,
  1530. sliced: false,
  1531. selected: false,
  1532. },
  1533. {
  1534. name: '焦化',
  1535. y: 16.49,
  1536. num: 4,
  1537. sliced: false,
  1538. selected: false,
  1539. },
  1540. {
  1541. name: '其他传统产业',
  1542. y: 14.19,
  1543. num: 5,
  1544. sliced: false,
  1545. selected: false,
  1546. }
  1547. ]
  1548. var timer = null;
  1549. var i = 0;
  1550. let that = this
  1551. var option = {
  1552. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1553. chart: {
  1554. type: 'pie',
  1555. backgroundColor: 'rgba(0,0,0,0)',
  1556. options3d: {
  1557. enabled: true,
  1558. alpha: 45,
  1559. //beta: 0
  1560. },
  1561. events: {
  1562. // load,图表加载完成时触发
  1563. load: function () {
  1564. var chart = this;
  1565. var points = chart.series[0].points;
  1566. var len = points.length;
  1567. timer && clearInterval(timer);
  1568. timer = setInterval(function () {
  1569. autoTooltip(points[i]);
  1570. chartData.forEach((item, index) => {
  1571. item.sliced = false
  1572. item.selected = false
  1573. if (index == i) {
  1574. item.sliced = true
  1575. item.selected = true
  1576. }
  1577. })
  1578. chart.update({
  1579. series: [{
  1580. type: 'pie',
  1581. name: '占比',
  1582. point: {
  1583. events: {
  1584. click: function (e) {
  1585. that.showTip3 = true
  1586. that.echartTitle = '传统产业分析'
  1587. setTimeout(() => {
  1588. that.initChartT1(chartData)
  1589. })
  1590. }
  1591. }
  1592. },
  1593. data: chartData
  1594. }]
  1595. })
  1596. i++;
  1597. if (i === len) {
  1598. i = 0;
  1599. }
  1600. }, 2000);
  1601. },
  1602. legendItemClick: function (event) {
  1603. console.log(event);
  1604. return true;
  1605. }
  1606. }
  1607. },
  1608. credits: {
  1609. enabled: false //去掉hightchats水印
  1610. },
  1611. legend: {
  1612. // labelFormatter: function() {
  1613. // return 123;
  1614. // },
  1615. align: 'right',//横向位置
  1616. verticalAlign: 'middle', // 纵向位置
  1617. layout: "vertical",//横排还是竖排
  1618. x: -30,
  1619. y: 50,
  1620. symbolWidth: 50,
  1621. itemDistance: 50,
  1622. itemStyle: {
  1623. fontSize: '20px',
  1624. color: '#fff',
  1625. x: 20
  1626. },
  1627. },
  1628. title: {
  1629. text: '传统产业分析',
  1630. style: {
  1631. color: '#fff',
  1632. fontSize: 22,
  1633. },
  1634. align: 'center',
  1635. verticalAlign: "bottom",
  1636. x: -120
  1637. },
  1638. tooltip: {
  1639. crosshairs: true,
  1640. backgroundColor: 'rgba(0,0,0,0.5)',
  1641. // positioner: function(e){
  1642. // console.log(e, this)
  1643. // },
  1644. useHTML: false, //开启html模式
  1645. style: {
  1646. color: '#fff',
  1647. fontSize:'20'
  1648. },
  1649. formatter: function (e) {
  1650. //console.log(this)
  1651. let num = chartData[this.colorIndex].num
  1652. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1653. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1654. },
  1655. //pointFormat:
  1656. },
  1657. plotOptions: {
  1658. pie: {
  1659. allowPointSelect: true,
  1660. showInLegend: true, // 图例
  1661. cursor: 'pointer',
  1662. size: 220,
  1663. innerSize: 150, //环形图中间空白,0为饼图
  1664. depth: 25, //立体高度
  1665. slicedOffset: 21, //动画距离
  1666. dataLabels: {
  1667. enabled: false, // 是否展示指示线
  1668. format: '{point.name}: {point.percentage}'
  1669. }
  1670. },
  1671. },
  1672. series: [{
  1673. type: 'pie',
  1674. name: '占比',
  1675. //center: ['35%','50%'],
  1676. point: {
  1677. events: {
  1678. click: function (e) { //点击事件
  1679. that.showTip3 = true
  1680. that.echartTitle = '传统产业分析'
  1681. setTimeout(() => {
  1682. that.initChartT1(chartData)
  1683. })
  1684. },
  1685. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1686. //console.log(e)
  1687. chartData.forEach((item, index) => {
  1688. item.sliced = false
  1689. item.selected = false
  1690. })
  1691. chartData[e.target.index].sliced = true
  1692. chartData[e.target.index].selected = true
  1693. chart.update({
  1694. series: [{
  1695. type: 'pie',
  1696. name: '占比',
  1697. point: {
  1698. events: {
  1699. click: function (e) {
  1700. that.showTip3 = true
  1701. that.echartTitle = '传统产业分析'
  1702. setTimeout(() => {
  1703. that.initChartT1(chartData)
  1704. })
  1705. }
  1706. }
  1707. },
  1708. data: chartData
  1709. }]
  1710. })
  1711. timer && clearInterval(timer);
  1712. },
  1713. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  1714. var points = chart.series[0].points;
  1715. var len = points.length;
  1716. timer && clearInterval(timer);
  1717. timer = setInterval(function () {
  1718. autoTooltip(points[i]);
  1719. chartData.forEach((item, index) => {
  1720. item.sliced = false
  1721. item.selected = false
  1722. if (index == i) {
  1723. item.sliced = true
  1724. item.selected = true
  1725. }
  1726. })
  1727. chart.update({
  1728. series: [{
  1729. type: 'pie',
  1730. name: '占比',
  1731. point: {
  1732. events: {
  1733. click: function (e) {
  1734. that.showTip3 = true
  1735. that.echartTitle = '传统产业分析'
  1736. setTimeout(() => {
  1737. that.initChartT1(chartData)
  1738. })
  1739. }
  1740. }
  1741. },
  1742. data: chartData
  1743. }]
  1744. })
  1745. i++;
  1746. if (i === len) {
  1747. i = 0;
  1748. }
  1749. }, 2000);
  1750. }
  1751. }
  1752. },
  1753. data: chartData
  1754. }]
  1755. }
  1756. var chart = Highcharts.chart('echartL5', option);
  1757. function autoTooltip (point) {
  1758. chart.tooltip.refresh(point);
  1759. }
  1760. },
  1761. initChartL6 () {
  1762. var chartData = [
  1763. {
  1764. name: '新一代信息技术',
  1765. y: 29.26,
  1766. num: 75,
  1767. //x: 75,
  1768. sliced: false,
  1769. selected: false,
  1770. },
  1771. {
  1772. name: '高端装备制造',
  1773. y: 100.41,
  1774. num: 28,
  1775. sliced: false,
  1776. selected: false,
  1777. },
  1778. {
  1779. name: '新材料',
  1780. y: 6.72,
  1781. num: 4,
  1782. sliced: false,
  1783. selected: false,
  1784. },
  1785. {
  1786. name: '生物',
  1787. y: 3.60,
  1788. num: 58,
  1789. sliced: false,
  1790. selected: false,
  1791. },
  1792. {
  1793. name: '新能源',
  1794. y: 170.03,
  1795. num: 58,
  1796. sliced: false,
  1797. selected: false,
  1798. },
  1799. {
  1800. name: '节能环保',
  1801. y: 26.30,
  1802. num: 24,
  1803. sliced: false,
  1804. selected: false,
  1805. },
  1806. {
  1807. name: '相关服务业',
  1808. y: 5.10,
  1809. num: 2,
  1810. sliced: false,
  1811. selected: false,
  1812. }
  1813. ]
  1814. var timer = null;
  1815. var i = 0;
  1816. let that = this
  1817. var option = {
  1818. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39', '#5783ab'],
  1819. chart: {
  1820. type: 'pie',
  1821. backgroundColor: 'rgba(0,0,0,0)',
  1822. options3d: {
  1823. enabled: true,
  1824. alpha: 45,
  1825. //beta: 0
  1826. },
  1827. events: {
  1828. // load,图表加载完成时触发
  1829. load: function () {
  1830. var chart = this;
  1831. var points = chart.series[0].points;
  1832. var len = points.length;
  1833. timer && clearInterval(timer);
  1834. timer = setInterval(function () {
  1835. autoTooltip(points[i]);
  1836. chartData.forEach((item, index) => {
  1837. item.sliced = false
  1838. item.selected = false
  1839. if (index == i) {
  1840. item.sliced = true
  1841. item.selected = true
  1842. }
  1843. })
  1844. chart.update({
  1845. series: [{
  1846. type: 'pie',
  1847. name: '占比',
  1848. point: {
  1849. events: {
  1850. click: function (e) {
  1851. that.showTip3 = true
  1852. that.echartTitle = '战略性新兴产业'
  1853. setTimeout(() => {
  1854. that.initChartT1(chartData)
  1855. })
  1856. }
  1857. }
  1858. },
  1859. data: chartData
  1860. }]
  1861. })
  1862. i++;
  1863. if (i === len) {
  1864. i = 0;
  1865. }
  1866. }, 2000);
  1867. },
  1868. legendItemClick: function (event) {
  1869. console.log(event);
  1870. return true;
  1871. }
  1872. }
  1873. },
  1874. credits: {
  1875. enabled: false //去掉hightchats水印
  1876. },
  1877. legend: {
  1878. // labelFormatter: function() {
  1879. // return 123;
  1880. // },
  1881. align: 'right',//横向位置
  1882. verticalAlign: 'middle', // 纵向位置
  1883. layout: "vertical",//横排还是竖排
  1884. x: -30,
  1885. y: 30,
  1886. symbolWidth: 50,
  1887. itemDistance: 50,
  1888. itemStyle: {
  1889. fontSize: '20px',
  1890. color: '#fff',
  1891. x: 20
  1892. },
  1893. },
  1894. title: {
  1895. text: '战略性新兴产业',
  1896. style: {
  1897. color: '#fff',
  1898. fontSize: 22,
  1899. },
  1900. align: 'center',
  1901. verticalAlign: "bottom",
  1902. x: -120
  1903. },
  1904. tooltip: {
  1905. crosshairs: true,
  1906. backgroundColor: 'rgba(0,0,0,0.5)',
  1907. // positioner: function(e){
  1908. // console.log(e, this)
  1909. // },
  1910. useHTML: false, //开启html模式
  1911. style: {
  1912. color: '#fff',
  1913. fontSize:'20'
  1914. },
  1915. formatter: function (e) {
  1916. //console.log(this)
  1917. let num = chartData[this.colorIndex].num
  1918. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1919. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1920. },
  1921. //pointFormat:
  1922. },
  1923. plotOptions: {
  1924. pie: {
  1925. allowPointSelect: true,
  1926. showInLegend: true, // 图例
  1927. cursor: 'pointer',
  1928. size: 220,
  1929. innerSize: 150, //环形图中间空白,0为饼图
  1930. depth: 25, //立体高度
  1931. slicedOffset: 21, //动画距离
  1932. dataLabels: {
  1933. enabled: false, // 是否展示指示线
  1934. format: '{point.name}: {point.percentage}'
  1935. }
  1936. },
  1937. },
  1938. series: [{
  1939. type: 'pie',
  1940. name: '占比',
  1941. //center: ['35%','50%'],
  1942. point: {
  1943. events: {
  1944. click: function (e) { //点击事件
  1945. that.showTip3 = true
  1946. that.echartTitle = '战略性新兴产业'
  1947. setTimeout(() => {
  1948. that.initChartT1(chartData)
  1949. })
  1950. },
  1951. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1952. //console.log(e)
  1953. chartData.forEach((item, index) => {
  1954. item.sliced = false
  1955. item.selected = false
  1956. })
  1957. chartData[e.target.index].sliced = true
  1958. chartData[e.target.index].selected = true
  1959. chart.update({
  1960. series: [{
  1961. type: 'pie',
  1962. name: '占比',
  1963. point: {
  1964. events: {
  1965. click: function (e) {
  1966. that.showTip3 = true
  1967. that.echartTitle = '战略性新兴产业'
  1968. setTimeout(() => {
  1969. that.initChartT1(chartData)
  1970. })
  1971. }
  1972. }
  1973. },
  1974. data: chartData
  1975. }]
  1976. })
  1977. timer && clearInterval(timer);
  1978. },
  1979. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  1980. var points = chart.series[0].points;
  1981. var len = points.length;
  1982. timer && clearInterval(timer);
  1983. timer = setInterval(function () {
  1984. autoTooltip(points[i]);
  1985. chartData.forEach((item, index) => {
  1986. item.sliced = false
  1987. item.selected = false
  1988. if (index == i) {
  1989. item.sliced = true
  1990. item.selected = true
  1991. }
  1992. })
  1993. chart.update({
  1994. series: [{
  1995. type: 'pie',
  1996. name: '占比',
  1997. point: {
  1998. events: {
  1999. click: function (e) {
  2000. that.showTip3 = true
  2001. that.echartTitle = '战略性新兴产业'
  2002. setTimeout(() => {
  2003. that.initChartT1(chartData)
  2004. })
  2005. }
  2006. }
  2007. },
  2008. data: chartData
  2009. }]
  2010. })
  2011. i++;
  2012. if (i === len) {
  2013. i = 0;
  2014. }
  2015. }, 2000);
  2016. }
  2017. }
  2018. },
  2019. data: chartData
  2020. }]
  2021. }
  2022. var chart = Highcharts.chart('echartL6', option);
  2023. function autoTooltip (point) {
  2024. chart.tooltip.refresh(point);
  2025. }
  2026. },
  2027. initChartL7 () {
  2028. var chartData = [
  2029. {
  2030. name: '化工',
  2031. y: 43.86,
  2032. num: 32,
  2033. sliced: false,
  2034. selected: false,
  2035. },
  2036. {
  2037. name: '煤层气',
  2038. y: 29.49,
  2039. num: 16,
  2040. sliced: false,
  2041. selected: false,
  2042. },
  2043. {
  2044. name: '文旅康养',
  2045. y: 0.07,
  2046. num: 1,
  2047. sliced: false,
  2048. selected: false,
  2049. },
  2050. {
  2051. name: '体育',
  2052. y: 2.57,
  2053. num: 5,
  2054. sliced: false,
  2055. selected: false,
  2056. },
  2057. {
  2058. name: '酿造',
  2059. y: 15.83,
  2060. num: 4,
  2061. sliced: false,
  2062. selected: false,
  2063. },
  2064. {
  2065. name: '建筑房地产',
  2066. y: 120.81,
  2067. num: 96,
  2068. sliced: false,
  2069. selected: false,
  2070. },
  2071. {
  2072. name: '农业',
  2073. y: 15.47,
  2074. num: 10,
  2075. sliced: false,
  2076. selected: false,
  2077. }
  2078. ]
  2079. var timer = null;
  2080. var i = 0;
  2081. let that = this
  2082. var option = {
  2083. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2084. chart: {
  2085. type: 'pie',
  2086. backgroundColor: 'rgba(0,0,0,0)',
  2087. options3d: {
  2088. enabled: true,
  2089. alpha: 45,
  2090. //beta: 0
  2091. },
  2092. events: {
  2093. // load,图表加载完成时触发
  2094. load: function () {
  2095. var chart = this;
  2096. var points = chart.series[0].points;
  2097. var len = points.length;
  2098. timer && clearInterval(timer);
  2099. timer = setInterval(function () {
  2100. autoTooltip(points[i]);
  2101. chartData.forEach((item, index) => {
  2102. item.sliced = false
  2103. item.selected = false
  2104. if (index == i) {
  2105. item.sliced = true
  2106. item.selected = true
  2107. }
  2108. })
  2109. chart.update({
  2110. series: [{
  2111. type: 'pie',
  2112. name: '占比',
  2113. point: {
  2114. events: {
  2115. click: function (e) {
  2116. that.showTip3 = true
  2117. that.echartTitle = '特色优势产业'
  2118. setTimeout(() => {
  2119. that.initChartT1(chartData)
  2120. })
  2121. }
  2122. }
  2123. },
  2124. data: chartData
  2125. }]
  2126. })
  2127. i++;
  2128. if (i === len) {
  2129. i = 0;
  2130. }
  2131. }, 2000);
  2132. },
  2133. legendItemClick: function (event) {
  2134. console.log(event);
  2135. return true;
  2136. }
  2137. }
  2138. },
  2139. credits: {
  2140. enabled: false //去掉hightchats水印
  2141. },
  2142. title: {
  2143. text: '特色优势产业',
  2144. style: {
  2145. color: '#fff',
  2146. fontSize: 22,
  2147. },
  2148. align: 'center',
  2149. verticalAlign: "bottom",
  2150. x: -120
  2151. },
  2152. legend: {
  2153. // labelFormatter: function() {
  2154. // return 123;
  2155. // },
  2156. align: 'right',//横向位置
  2157. verticalAlign: 'middle', // 纵向位置
  2158. layout: "vertical",//横排还是竖排
  2159. x: -50,
  2160. y: 30,
  2161. symbolWidth: 50,
  2162. itemDistance: 50,
  2163. itemStyle: {
  2164. fontSize: '20px',
  2165. color: '#fff',
  2166. x: 20
  2167. },
  2168. },
  2169. tooltip: {
  2170. crosshairs: true,
  2171. backgroundColor: 'rgba(0,0,0,0.5)',
  2172. // positioner: function(e){
  2173. // console.log(e, this)
  2174. // },
  2175. useHTML: false, //开启html模式
  2176. style: {
  2177. color: '#fff',
  2178. fontSize:'20'
  2179. },
  2180. formatter: function (e) {
  2181. //console.log(this)
  2182. let num = chartData[this.colorIndex].num
  2183. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2184. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2185. },
  2186. //pointFormat:
  2187. },
  2188. plotOptions: {
  2189. pie: {
  2190. allowPointSelect: true,
  2191. showInLegend: true, // 图例
  2192. cursor: 'pointer',
  2193. size: 220,
  2194. innerSize: 150, //环形图中间空白,0为饼图
  2195. depth: 25, //立体高度
  2196. slicedOffset: 21, //动画距离
  2197. dataLabels: {
  2198. enabled: false, // 是否展示指示线
  2199. format: '{point.name}: {point.percentage}'
  2200. }
  2201. },
  2202. },
  2203. series: [{
  2204. type: 'pie',
  2205. name: '占比',
  2206. //center: ['35%','50%'],
  2207. point: {
  2208. events: {
  2209. click: function (e) { //点击事件
  2210. that.showTip3 = true
  2211. that.echartTitle = '特色优势产业'
  2212. setTimeout(() => {
  2213. that.initChartT1(chartData)
  2214. })
  2215. },
  2216. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2217. //console.log(e)
  2218. chartData.forEach((item, index) => {
  2219. item.sliced = false
  2220. item.selected = false
  2221. })
  2222. chartData[e.target.index].sliced = true
  2223. chartData[e.target.index].selected = true
  2224. chart.update({
  2225. series: [{
  2226. type: 'pie',
  2227. name: '占比',
  2228. point: {
  2229. events: {
  2230. click: function (e) {
  2231. that.showTip3 = true
  2232. that.echartTitle = '特色优势产业'
  2233. setTimeout(() => {
  2234. that.initChartT1(chartData)
  2235. })
  2236. }
  2237. }
  2238. },
  2239. data: chartData
  2240. }]
  2241. })
  2242. timer && clearInterval(timer);
  2243. },
  2244. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2245. var points = chart.series[0].points;
  2246. var len = points.length;
  2247. timer && clearInterval(timer);
  2248. timer = setInterval(function () {
  2249. autoTooltip(points[i]);
  2250. chartData.forEach((item, index) => {
  2251. item.sliced = false
  2252. item.selected = false
  2253. if (index == i) {
  2254. item.sliced = true
  2255. item.selected = true
  2256. }
  2257. })
  2258. chart.update({
  2259. series: [{
  2260. type: 'pie',
  2261. name: '占比',
  2262. point: {
  2263. events: {
  2264. click: function (e) {
  2265. that.showTip3 = true
  2266. that.echartTitle = '特色优势产业'
  2267. setTimeout(() => {
  2268. that.initChartT1(chartData)
  2269. })
  2270. }
  2271. }
  2272. },
  2273. data: chartData
  2274. }]
  2275. })
  2276. i++;
  2277. if (i === len) {
  2278. i = 0;
  2279. }
  2280. }, 2000);
  2281. }
  2282. }
  2283. },
  2284. data: chartData
  2285. }]
  2286. }
  2287. var chart = Highcharts.chart('echartL7', option);
  2288. function autoTooltip (point) {
  2289. chart.tooltip.refresh(point);
  2290. }
  2291. },
  2292. initChartL8 () {
  2293. var chartData = [
  2294. {
  2295. name: '交通运输业',
  2296. y: 264.70,
  2297. num: 38,
  2298. sliced: false,
  2299. selected: false,
  2300. },
  2301. {
  2302. name: '煤气层管网',
  2303. y: 14.39,
  2304. num: 14,
  2305. sliced: false,
  2306. selected: false,
  2307. },
  2308. {
  2309. name: '物流贸易',
  2310. y: 18.07,
  2311. num: 18,
  2312. sliced: false,
  2313. selected: false,
  2314. },
  2315. {
  2316. name: '水务',
  2317. y: 69.73,
  2318. num: 34,
  2319. sliced: false,
  2320. selected: false,
  2321. },
  2322. {
  2323. name: '其他',
  2324. y: 3.64,
  2325. num: 5,
  2326. sliced: false,
  2327. selected: false,
  2328. }
  2329. ]
  2330. var timer = null;
  2331. var i = 0;
  2332. let that = this
  2333. var option = {
  2334. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2335. chart: {
  2336. type: 'pie',
  2337. backgroundColor: 'rgba(0,0,0,0)',
  2338. options3d: {
  2339. enabled: true,
  2340. alpha: 45,
  2341. //beta: 0
  2342. },
  2343. events: {
  2344. // load,图表加载完成时触发
  2345. load: function () {
  2346. var chart = this;
  2347. var points = chart.series[0].points;
  2348. var len = points.length;
  2349. timer && clearInterval(timer);
  2350. timer = setInterval(function () {
  2351. autoTooltip(points[i]);
  2352. chartData.forEach((item, index) => {
  2353. item.sliced = false
  2354. item.selected = false
  2355. if (index == i) {
  2356. item.sliced = true
  2357. item.selected = true
  2358. }
  2359. })
  2360. chart.update({
  2361. series: [{
  2362. type: 'pie',
  2363. name: '占比',
  2364. point: {
  2365. events: {
  2366. click: function (e) {
  2367. that.showTip3 = true
  2368. that.echartTitle = '公共基础等产业'
  2369. setTimeout(() => {
  2370. that.initChartT1(chartData)
  2371. })
  2372. }
  2373. }
  2374. },
  2375. data: chartData
  2376. }]
  2377. })
  2378. i++;
  2379. if (i === len) {
  2380. i = 0;
  2381. }
  2382. }, 2000);
  2383. },
  2384. legendItemClick: function (event) {
  2385. console.log(event);
  2386. return true;
  2387. }
  2388. }
  2389. },
  2390. credits: {
  2391. enabled: false //去掉hightchats水印
  2392. },
  2393. title: {
  2394. text: '公共基础等产业',
  2395. style: {
  2396. color: '#fff',
  2397. fontSize: 22,
  2398. },
  2399. align: 'center',
  2400. verticalAlign: "bottom",
  2401. x: -120
  2402. },
  2403. legend: {
  2404. // labelFormatter: function() {
  2405. // return 123;
  2406. // },
  2407. align: 'right',//横向位置
  2408. verticalAlign: 'middle', // 纵向位置
  2409. layout: "vertical",//横排还是竖排
  2410. x: -70,
  2411. y: 50,
  2412. symbolWidth: 50,
  2413. itemDistance: 50,
  2414. itemStyle: {
  2415. fontSize: '20px',
  2416. color: '#fff',
  2417. x: 20
  2418. },
  2419. },
  2420. tooltip: {
  2421. crosshairs: true,
  2422. backgroundColor: 'rgba(0,0,0,0.5)',
  2423. // positioner: function(e){
  2424. // console.log(e, this)
  2425. // },
  2426. useHTML: false, //开启html模式
  2427. style: {
  2428. color: '#fff',
  2429. fontSize:'20'
  2430. },
  2431. formatter: function (e) {
  2432. //console.log(this)
  2433. let num = chartData[this.colorIndex].num
  2434. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2435. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2436. },
  2437. //pointFormat:
  2438. },
  2439. plotOptions: {
  2440. pie: {
  2441. allowPointSelect: true,
  2442. showInLegend: true, // 图例
  2443. cursor: 'pointer',
  2444. size: 220,
  2445. innerSize: 150, //环形图中间空白,0为饼图
  2446. depth: 25, //立体高度
  2447. slicedOffset: 21, //动画距离
  2448. dataLabels: {
  2449. enabled: false, // 是否展示指示线
  2450. format: '{point.name}: {point.percentage}'
  2451. }
  2452. },
  2453. },
  2454. series: [{
  2455. type: 'pie',
  2456. name: '占比',
  2457. //center: ['35%','50%'],
  2458. point: {
  2459. events: {
  2460. click: function (e) { //点击事件
  2461. that.showTip3 = true
  2462. that.echartTitle = '公共基础等产业'
  2463. setTimeout(() => {
  2464. that.initChartT1(chartData)
  2465. })
  2466. },
  2467. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2468. //console.log(e)
  2469. chartData.forEach((item, index) => {
  2470. item.sliced = false
  2471. item.selected = false
  2472. })
  2473. chartData[e.target.index].sliced = true
  2474. chartData[e.target.index].selected = true
  2475. chart.update({
  2476. series: [{
  2477. type: 'pie',
  2478. name: '占比',
  2479. point: {
  2480. events: {
  2481. click: function (e) {
  2482. that.showTip3 = true
  2483. that.echartTitle = '公共基础等产业'
  2484. setTimeout(() => {
  2485. that.initChartT1(chartData)
  2486. })
  2487. }
  2488. }
  2489. },
  2490. data: chartData
  2491. }]
  2492. })
  2493. timer && clearInterval(timer);
  2494. },
  2495. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2496. var points = chart.series[0].points;
  2497. var len = points.length;
  2498. timer && clearInterval(timer);
  2499. timer = setInterval(function () {
  2500. autoTooltip(points[i]);
  2501. chartData.forEach((item, index) => {
  2502. item.sliced = false
  2503. item.selected = false
  2504. if (index == i) {
  2505. item.sliced = true
  2506. item.selected = true
  2507. }
  2508. })
  2509. chart.update({
  2510. series: [{
  2511. type: 'pie',
  2512. name: '占比',
  2513. point: {
  2514. events: {
  2515. click: function (e) {
  2516. that.showTip3 = true
  2517. that.echartTitle = '公共基础等产业'
  2518. setTimeout(() => {
  2519. that.initChartT1(chartData)
  2520. })
  2521. }
  2522. }
  2523. },
  2524. data: chartData
  2525. }]
  2526. })
  2527. i++;
  2528. if (i === len) {
  2529. i = 0;
  2530. }
  2531. }, 2000);
  2532. }
  2533. }
  2534. },
  2535. data: chartData
  2536. }]
  2537. }
  2538. var chart = Highcharts.chart('echartL8', option);
  2539. function autoTooltip (point) {
  2540. chart.tooltip.refresh(point);
  2541. }
  2542. },
  2543. initChartL9 () {
  2544. let myChart = echarts.init(document.getElementById("echartL9"));
  2545. option = {
  2546. tooltip: {
  2547. trigger: 'axis',
  2548. formatter: '指标:' + '{c0}' + '<br/>' + '发展线:' + '{c1}' + '<br/>' + '生存线:' + '{c2}', //+ '<br/>'+ '{a1}:{c1}' + '%',
  2549. axisPointer: {
  2550. type: 'shadow',
  2551. },
  2552. },
  2553. grid: {
  2554. top: '10%',
  2555. right: '5%',
  2556. left: '10%',
  2557. bottom: '10%',
  2558. },
  2559. xAxis: {
  2560. // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
  2561. data: dataType[this.countType],
  2562. axisLine: {
  2563. show: true, //隐藏X轴轴线
  2564. lineStyle: {
  2565. color: '#005094',
  2566. width: 1,
  2567. },
  2568. },
  2569. axisTick: {
  2570. show: true, //隐藏X轴刻度
  2571. },
  2572. axisLabel: {
  2573. show: true,
  2574. rotate: 15,
  2575. textStyle: {
  2576. color: '#fff', //X轴文字颜色
  2577. fontSize: 15,
  2578. },
  2579. },
  2580. },
  2581. yAxis: [
  2582. {
  2583. type: 'value',
  2584. splitLine: {
  2585. show: true,
  2586. lineStyle: {
  2587. color: '#68b4dd66',
  2588. type: 'dashed',
  2589. },
  2590. },
  2591. axisLine: {
  2592. show: false
  2593. },
  2594. axisLabel: {
  2595. show: true,
  2596. formatter: '{value}',
  2597. textStyle: {
  2598. color: '#fff',
  2599. fontSize: 15
  2600. },
  2601. },
  2602. nameTextStyle: {
  2603. color: '#ebf8ac',
  2604. fontSize: 16,
  2605. },
  2606. },
  2607. ],
  2608. series: [
  2609. {
  2610. name: '实际值',
  2611. type: 'bar',
  2612. barWidth: 15,
  2613. itemStyle: {
  2614. normal: {
  2615. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  2616. {
  2617. offset: 0,
  2618. color: '#69c0ff',
  2619. },
  2620. {
  2621. offset: 1,
  2622. color: '#082550',
  2623. },
  2624. ]),
  2625. },
  2626. },
  2627. // data: [70, 52, 33, 41, 52],
  2628. data: dataList[this.count + 1][2]
  2629. // markLine: {
  2630. // symbol: ['none', 'none'],
  2631. // data: [
  2632. // {
  2633. // name: '生存线',
  2634. // yAxis: 10,
  2635. // lineStyle: {
  2636. // color: '#FF8F0A',
  2637. // },
  2638. // label: {
  2639. // formatter: '{b}',
  2640. // position: 'middle',
  2641. // color: '#FF8F0A',
  2642. // fontSize: 12,
  2643. // },
  2644. // },
  2645. // {
  2646. // name: '发展线',
  2647. // yAxis: 15,
  2648. // lineStyle: {
  2649. // color: '#00EEA2',
  2650. // },
  2651. // label: {
  2652. // formatter: '{b}',
  2653. // position: 'middle',
  2654. // color: '#00EEA2',
  2655. // fontSize: 12,
  2656. // },
  2657. // },
  2658. // ],
  2659. // label: {
  2660. // distance: [50, 0],
  2661. // },
  2662. // },
  2663. },
  2664. {
  2665. name: '',
  2666. type: 'line',
  2667. barWidth: 15,
  2668. itemStyle: {
  2669. normal: {
  2670. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  2671. {
  2672. offset: 0,
  2673. color: '#69c0ff',
  2674. },
  2675. {
  2676. offset: 1,
  2677. color: 'green',
  2678. },
  2679. ]),
  2680. },
  2681. },
  2682. // data: [20, 30, 15, 28, 36],
  2683. data: dataList[this.count + 1][1]
  2684. },
  2685. {
  2686. name: '',
  2687. type: 'line',
  2688. barWidth: 15,
  2689. itemStyle: {
  2690. normal: {
  2691. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  2692. {
  2693. offset: 0,
  2694. color: '#69c0ff',
  2695. },
  2696. {
  2697. offset: 1,
  2698. color: 'yellow',
  2699. },
  2700. ]),
  2701. },
  2702. },
  2703. // data: [15, 22, 17, 33, 14],
  2704. data: dataList[this.count + 1][0]
  2705. },
  2706. ],
  2707. }
  2708. myChart.setOption(option)
  2709. // tools.loopShowTooltip(myChart, option, {
  2710. // nterval: 2000,
  2711. // loopSeries: true,
  2712. // })
  2713. },
  2714. initChartL10 () {
  2715. let myChart = echarts.init(document.getElementById("echartL10"));
  2716. let option = {
  2717. title: {
  2718. text: '固定资产',
  2719. textStyle: {
  2720. color: '#69C0FF',
  2721. fontSize: 25,
  2722. fontWeight: 500
  2723. },
  2724. top: '20',
  2725. left: '20'
  2726. },
  2727. textStyle: {
  2728. color: '#fff',
  2729. },
  2730. tooltip: {
  2731. trigger: "axis",
  2732. formatter: function (params) {
  2733. 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] + '亿元';
  2734. return tip
  2735. },
  2736. textStyle: {
  2737. color: '#FFF', // 文字的颜色
  2738. fontSize: '20', // 文字字体大小
  2739. },
  2740. axisPointer: {
  2741. lineStyle: {
  2742. type: 'dashed',
  2743. width: 2,
  2744. color: 'rgba(255,255,255,0.6)'
  2745. },
  2746. animation: true
  2747. }
  2748. },
  2749. grid: {
  2750. top: '10%',
  2751. right: '5%',
  2752. left: '15%',
  2753. bottom: '6%',
  2754. },
  2755. yAxis: {
  2756. data: ['备案', '特别监管'],
  2757. splitLine: {
  2758. show: true,
  2759. lineStyle: {
  2760. color: '#68b4dd66',
  2761. type: 'dashed',
  2762. },
  2763. },
  2764. axisLine: {
  2765. show: false
  2766. },
  2767. axisLabel: {
  2768. show: true,
  2769. formatter: '{value}',
  2770. textStyle: {
  2771. color: '#fff',
  2772. fontSize: 15,
  2773. },
  2774. },
  2775. nameTextStyle: {
  2776. color: '#ebf8ac',
  2777. fontSize: 16,
  2778. },
  2779. },
  2780. xAxis: {
  2781. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  2782. axisLine: {
  2783. show: true, //隐藏X轴轴线
  2784. lineStyle: {
  2785. color: '#005094',
  2786. width: 1,
  2787. },
  2788. },
  2789. axisTick: {
  2790. show: false, //隐藏X轴刻度
  2791. },
  2792. axisLabel: {
  2793. show: true,
  2794. textStyle: {
  2795. color: '#fff', //X轴文字颜色
  2796. fontSize: 15,
  2797. },
  2798. },
  2799. },
  2800. series: [
  2801. {
  2802. name: '特别监管',
  2803. type: 'scatter',
  2804. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2805. symbolSize: function (data) {
  2806. return Math.sqrt(data[2]) * 3;
  2807. },
  2808. label: {
  2809. emphasis: {
  2810. show: true,
  2811. formatter: function (param) {
  2812. return param.data[2];
  2813. },
  2814. position: 'top'
  2815. }
  2816. },
  2817. itemStyle: {
  2818. normal: {
  2819. color: '#40A9FF'
  2820. }
  2821. },
  2822. data: [
  2823. ['项目储备', '特别监管', 14, 12.05],
  2824. ['项目立项', '特别监管', 2, 1.25],
  2825. ['可研论证', '特别监管', 10, 32.69],
  2826. ['投资决策', '特别监管', 15, 28.53],
  2827. ]
  2828. },
  2829. {
  2830. name: '备案',
  2831. type: 'scatter',
  2832. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2833. symbolSize: function (data) {
  2834. return Math.sqrt(data[2]) * 3;
  2835. },
  2836. label: {
  2837. emphasis: {
  2838. show: true,
  2839. formatter: function (param) {
  2840. return param.data[2];
  2841. },
  2842. position: 'top'
  2843. }
  2844. },
  2845. itemStyle: {
  2846. normal: {
  2847. color: '#45DAD1'
  2848. }
  2849. },
  2850. data: [
  2851. ['项目储备', '备案', 27, 23.86],
  2852. ['项目立项', '备案', 1, 1.05],
  2853. ['可研论证', '备案', 14, 18.46],
  2854. ['投资决策', '备案', 40, 38.86],
  2855. ]
  2856. },
  2857. ]
  2858. }
  2859. myChart.setOption(option)
  2860. tools.loopShowTooltip(myChart, option, {
  2861. nterval: 2000,
  2862. loopSeries: true,
  2863. })
  2864. },
  2865. initChartL11 () {
  2866. let myChart = echarts.init(document.getElementById("echartL11"));
  2867. let option = {
  2868. title: {
  2869. text: '股权类',
  2870. textStyle: {
  2871. color: '#69C0FF',
  2872. fontSize: 25,
  2873. fontWeight: 500
  2874. },
  2875. top: '20',
  2876. left: '20'
  2877. },
  2878. textStyle: {
  2879. color: '#fff',
  2880. },
  2881. tooltip: {
  2882. trigger: "axis",
  2883. formatter: function (params) {
  2884. 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] + '亿元';
  2885. return tip
  2886. },
  2887. textStyle: {
  2888. color: '#FFF', // 文字的颜色
  2889. fontSize: '20', // 文字字体大小
  2890. },
  2891. axisPointer: {
  2892. lineStyle: {
  2893. type: 'dashed',
  2894. width: 2,
  2895. color: 'rgba(255,255,255,0.6)'
  2896. },
  2897. animation: true
  2898. }
  2899. },
  2900. grid: {
  2901. top: '10%',
  2902. right: '5%',
  2903. left: '15%',
  2904. bottom: '6%',
  2905. },
  2906. yAxis: {
  2907. data: ['备案', '特别监管'],
  2908. splitLine: {
  2909. show: true,
  2910. lineStyle: {
  2911. color: '#68b4dd66',
  2912. type: 'dashed',
  2913. },
  2914. },
  2915. axisLine: {
  2916. show: false
  2917. },
  2918. axisLabel: {
  2919. show: true,
  2920. formatter: '{value}',
  2921. textStyle: {
  2922. color: "#fff",
  2923. fontSize: 15,
  2924. },
  2925. },
  2926. nameTextStyle: {
  2927. color: '#ebf8ac',
  2928. fontSize: 16,
  2929. },
  2930. },
  2931. xAxis: {
  2932. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  2933. axisLine: {
  2934. show: true, //隐藏X轴轴线
  2935. lineStyle: {
  2936. color: '#005094',
  2937. width: 1,
  2938. },
  2939. },
  2940. axisTick: {
  2941. show: false, //隐藏X轴刻度
  2942. },
  2943. axisLabel: {
  2944. show: true,
  2945. textStyle: {
  2946. color: '#fff', //X轴文字颜色
  2947. fontSize: 15,
  2948. },
  2949. },
  2950. },
  2951. series: [
  2952. {
  2953. name: '',
  2954. type: 'scatter',
  2955. symbol: 'circle',
  2956. symbolSize: function (data) {
  2957. return Math.sqrt(data[2]) * 3;
  2958. },
  2959. label: {
  2960. emphasis: {
  2961. show: true,
  2962. formatter: function (param) {
  2963. return param.data[2];
  2964. },
  2965. position: 'top'
  2966. }
  2967. },
  2968. itemStyle: {
  2969. normal: {
  2970. color: '#40A9FF'
  2971. }
  2972. },
  2973. data: [
  2974. ['项目储备', '特别监管', 9, 6.49],
  2975. ['项目立项', '特别监管', 0, 0.00],
  2976. ['可研论证', '特别监管', 2, 0.10],
  2977. ['投资决策', '特别监管', 27, 15.52],
  2978. ]
  2979. },
  2980. {
  2981. name: '',
  2982. type: 'scatter',
  2983. symbol: 'circle',
  2984. symbolSize: function (data) {
  2985. return Math.sqrt(data[2]) * 3;
  2986. },
  2987. label: {
  2988. emphasis: {
  2989. show: true,
  2990. formatter: function (param) {
  2991. return param.data[2];
  2992. },
  2993. position: 'top'
  2994. }
  2995. },
  2996. itemStyle: {
  2997. normal: {
  2998. color: '#45DAD1'
  2999. }
  3000. },
  3001. data: [
  3002. ['项目储备', '备案', 39, 8.08],
  3003. ['项目立项', '备案', 7, 1.83],
  3004. ['可研论证', '备案', 19, 1.01],
  3005. ['投资决策', '备案', 73, 17.65],
  3006. ]
  3007. },
  3008. ]
  3009. }
  3010. myChart.setOption(option)
  3011. tools.loopShowTooltip(myChart, option, {
  3012. nterval: 2000,
  3013. loopSeries: true,
  3014. })
  3015. },
  3016. // 大屏二
  3017. initChartC1 () {
  3018. var chartData = []
  3019. var timer = null;
  3020. var timer2 = null;
  3021. var i = 0;
  3022. industryList.forEach((item, index) => {
  3023. let obj = {
  3024. name: item.name,
  3025. y: item.value,
  3026. sliced: false,
  3027. selected: false,
  3028. color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
  3029. }
  3030. chartData.push(obj)
  3031. })
  3032. let that = this
  3033. var chart = Highcharts.chart('echartC1', {
  3034. chart: {
  3035. type: 'pie',
  3036. backgroundColor: 'rgba(0,0,0,0)',
  3037. options3d: {
  3038. enabled: true,
  3039. alpha: 45,
  3040. //beta: 0
  3041. },
  3042. events: {
  3043. // load,图表加载完成时触发
  3044. load: function () {
  3045. var chart = this;
  3046. var points = chart.series[0].points;
  3047. var len = points.length;
  3048. timer && clearInterval(timer);
  3049. timer = setInterval(function () {
  3050. autoTooltip(points[i]);
  3051. chartData.forEach((item, index) => {
  3052. item.sliced = false
  3053. item.selected = false
  3054. if (index == i) {
  3055. item.sliced = true
  3056. item.selected = true
  3057. }
  3058. })
  3059. chart.update({
  3060. series: [{
  3061. type: 'pie',
  3062. name: '占比',
  3063. point: {
  3064. events: {
  3065. click: function (e) {
  3066. that.showChartLTipDouble(e.point.name)
  3067. }
  3068. }
  3069. },
  3070. data: chartData
  3071. }]
  3072. })
  3073. i++;
  3074. if (i === len) {
  3075. i = 0;
  3076. }
  3077. }, 2000);
  3078. },
  3079. legendItemClick: function (event) {
  3080. console.log(event);
  3081. return true;
  3082. }
  3083. }
  3084. },
  3085. credits: {
  3086. enabled: false //去掉hightchats水印
  3087. },
  3088. title: {
  3089. text: null
  3090. },
  3091. tooltip: {
  3092. crosshairs: true,
  3093. backgroundColor: 'rgba(0,0,0,0.5)',
  3094. useHTML: false, //开启html模式
  3095. style: {
  3096. color: '#fff',
  3097. fontSize: '20'
  3098. },
  3099. formatter: function (e) {
  3100. //console.log(this, e)
  3101. this.percentage = Math.round(this.percentage)
  3102. // e.options.backgroundColor = 'rgba(0,0,0,0.5)'
  3103. // e.options.style.color = '#fff'
  3104. return `${this.key}:<b>${this.percentage}%</b><br/>金额:<b>${this.y}</b>亿`
  3105. },
  3106. //pointFormat:
  3107. },
  3108. legend: {
  3109. layout: 'vertical',
  3110. align: 'right',
  3111. verticalAlign: 'bottom',
  3112. itemStyle: {
  3113. fontSize: '20px',
  3114. color: '#fff',
  3115. x: 20
  3116. }
  3117. },
  3118. plotOptions: {
  3119. pie: {
  3120. allowPointSelect: true,
  3121. showInLegend: true, // 图例
  3122. cursor: 'pointer',
  3123. size: 500,
  3124. innerSize: 300, //环形图中间空白,0为饼图
  3125. depth: 28, //立体高度
  3126. slicedOffset: 23, //动画距离
  3127. dataLabels: {
  3128. enabled: false, // 是否展示指示线
  3129. format: '{point.name}: {point.percentage}'
  3130. }
  3131. },
  3132. },
  3133. series: [{
  3134. type: 'pie',
  3135. name: '占比',
  3136. center: ['70%', '50%'],
  3137. point: {
  3138. events: {
  3139. click: function (e) { //点击事件
  3140. that.showChartLTipDouble(e.point.name)
  3141. },
  3142. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3143. //console.log(e)
  3144. chartData.forEach((item, index) => {
  3145. item.sliced = false
  3146. item.selected = false
  3147. })
  3148. chartData[e.target.index].sliced = true
  3149. chartData[e.target.index].selected = true
  3150. chart.update({
  3151. series: [{
  3152. type: 'pie',
  3153. name: '占比',
  3154. point: {
  3155. events: {
  3156. click: function (e) {
  3157. console.log(222222)
  3158. that.showChartLTipDouble(e.point.name)
  3159. // if (e.point.name == '战略新兴产业') {
  3160. // that.tipTitle2 = e.point.name
  3161. // that.showTip2 = true
  3162. // }
  3163. }
  3164. }
  3165. },
  3166. data: chartData
  3167. }]
  3168. })
  3169. timer && clearInterval(timer);
  3170. },
  3171. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3172. var points = chart.series[0].points;
  3173. var len = points.length;
  3174. timer && clearInterval(timer);
  3175. timer = setInterval(function () {
  3176. autoTooltip(points[i]);
  3177. chartData.forEach((item, index) => {
  3178. item.sliced = false
  3179. item.selected = false
  3180. if (index == i) {
  3181. item.sliced = true
  3182. item.selected = true
  3183. }
  3184. })
  3185. chart.update({
  3186. series: [{
  3187. type: 'pie',
  3188. name: '占比',
  3189. point: {
  3190. events: {
  3191. click: function (e) {
  3192. console.log(111111)
  3193. that.showChartLTipDouble(e.point.name)
  3194. // if (e.point.name == '战略新兴产业') {
  3195. // that.tipTitle2 = e.point.name
  3196. // that.showTip2 = true
  3197. // }
  3198. }
  3199. }
  3200. },
  3201. data: chartData
  3202. }]
  3203. })
  3204. i++;
  3205. if (i === len) {
  3206. i = 0;
  3207. }
  3208. }, 2000);
  3209. }
  3210. }
  3211. },
  3212. data: chartData
  3213. }]
  3214. });
  3215. function autoTooltip (point) {
  3216. chart.tooltip.refresh(point);
  3217. }
  3218. },
  3219. initChartC2 () {
  3220. let myChart = echarts.init(this.$refs['echartC2'])
  3221. let option = {
  3222. tooltip: {
  3223. formatter: data => {
  3224. 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}亿`
  3225. },
  3226. trigger: 'axis',
  3227. axisPointer: {
  3228. type: 'cross',
  3229. },
  3230. textStyle: {
  3231. color: '#FFF', // 文字的颜色
  3232. fontSize: '20', // 文字字体大小
  3233. },
  3234. },
  3235. dataZoom: [
  3236. {
  3237. // start: 9,//默认为@
  3238. // end: 100,//黑认认为1@0
  3239. type: "slider",
  3240. show: false,
  3241. // xAxisIndex: [0]
  3242. handlesize: 0,//滑动条的 左右2个滑动条的大小
  3243. startValue: 5,// 初始显示值
  3244. endValue: 0,// 结束显示值
  3245. height: 10,//组件高度
  3246. left: "5%",
  3247. right: "4%",//右边的距离
  3248. bottom: "25%",//底边的距离
  3249. borderColor: "#939",
  3250. fillerColor: "#269cdb",
  3251. borderRadius: 5,
  3252. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  3253. showDataShadow: false,//是否显示数据阴影
  3254. showDetail: false,//即拖拽时候是否显示详细数值信息
  3255. truerealtime: true,//是否实时更新
  3256. filterMode: "filter"
  3257. }, {
  3258. type: 'inside',
  3259. show: true,
  3260. start: 1,
  3261. end: 100,
  3262. zoomOnMouseWheel: false, //滚轮是否触发缩放
  3263. moveOnMouseMove: false, //鼠标滚轮触发滚动
  3264. }
  3265. ],
  3266. grid: {
  3267. top: '10%',
  3268. right: '3%',
  3269. left: '7%',
  3270. bottom: '10%',
  3271. },
  3272. legend: {
  3273. top: '1',
  3274. right: '10',
  3275. textStyle: {
  3276. color: 'rgba(250,250,250,0.6)',
  3277. fontSize: '15'
  3278. },
  3279. },
  3280. xAxis: {
  3281. data: executeList.map(item => item.name),
  3282. axisLine: {
  3283. show: true, //隐藏X轴轴线
  3284. lineStyle: {
  3285. color: '#005094',
  3286. width: 1,
  3287. },
  3288. },
  3289. axisTick: {
  3290. show: false, //隐藏X轴刻度
  3291. },
  3292. axisLabel: {
  3293. show: true,
  3294. rotate: 40,
  3295. textStyle: {
  3296. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  3297. fontSize: '15'
  3298. },
  3299. },
  3300. },
  3301. yAxis: [
  3302. {
  3303. type: 'value',
  3304. name: '亿元',
  3305. nameTextStyle: {
  3306. color: 'rgba(255,255,255,0.6)',
  3307. fontSize: '15'
  3308. },
  3309. splitLine: {
  3310. show: true,
  3311. lineStyle: {
  3312. color: '#68b4dd66',
  3313. type: 'dashed',
  3314. },
  3315. },
  3316. axisLine: {
  3317. show: true,
  3318. lineStyle: {
  3319. color: '#3D7495',
  3320. },
  3321. },
  3322. axisLabel: {
  3323. show: true,
  3324. textStyle: {
  3325. color: '#fff',
  3326. fontSize: '15'
  3327. },
  3328. },
  3329. nameTextStyle: {
  3330. color: '#fff',
  3331. fontSize: 15,
  3332. },
  3333. },
  3334. ],
  3335. series: [
  3336. {
  3337. name: '计划投资',
  3338. type: 'bar',
  3339. barWidth: 10,
  3340. itemStyle: {
  3341. normal: {
  3342. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3343. {
  3344. offset: 0,
  3345. color: '#69c0ff',
  3346. },
  3347. {
  3348. offset: 1,
  3349. color: '#082550',
  3350. },
  3351. ]),
  3352. },
  3353. },
  3354. data: executeList.map(item => item.value),
  3355. },
  3356. {
  3357. name: '实际投资',
  3358. type: 'bar',
  3359. barWidth: 10,
  3360. itemStyle: {
  3361. normal: {
  3362. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3363. {
  3364. offset: 0,
  3365. color: '#957DFF',
  3366. },
  3367. {
  3368. offset: 1,
  3369. color: '#082550',
  3370. },
  3371. ]),
  3372. },
  3373. },
  3374. data: executeList.map(item => item.value2),
  3375. },
  3376. ],
  3377. }
  3378. myChart.on('click', function (param) {
  3379. window.location.href = './investHomeChild.html?type=2'
  3380. })
  3381. myChart.setOption(option)
  3382. tools.loopShowTooltip(myChart, option, {
  3383. nterval: 2000,
  3384. loopSeries: true,
  3385. })
  3386. let arr = executeList.map(item => item.value2)
  3387. this.timeOut = setInterval(function () {
  3388. let startValue = myChart.getModel().option.dataZoom[0].startValue;
  3389. let endValue = myChart.getModel().option.dataZoom[0].endValue;
  3390. let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
  3391. let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
  3392. // 每次向后滚动一个,最后一个从头开始。
  3393. // console.log(option.dataZoom[0].endValue);
  3394. if (option.dataZoom[0].endValue >= 12) {
  3395. option.dataZoom[0].endValue = 5
  3396. option.dataZoom[0].startValue = 0
  3397. } else {
  3398. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  3399. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  3400. }
  3401. // myChart.dispatchAction({
  3402. // type: 'showTip',
  3403. // seriesIndex: 0,
  3404. // dataIndex: startValue +1,
  3405. // });
  3406. myChart.setOption(option);
  3407. }, 12000);
  3408. },
  3409. convertData (data) {
  3410. var res = []
  3411. for (var i = 0; i < data.length; i++) {
  3412. var geoCoord = this.geoCoordMap[data[i].name]
  3413. if (geoCoord) {
  3414. res.push({
  3415. name: data[i].name,
  3416. value: geoCoord.concat(data[i].value),
  3417. })
  3418. }
  3419. }
  3420. return res
  3421. },
  3422. initProvinceChart () {
  3423. var data = [
  3424. { name: '大同市', value: 60.35, value2: 28 },
  3425. { name: '朔州市', value: 33.61, value2: 13 },
  3426. { name: '忻州市', value: 73.35, value2: 25 },
  3427. { name: '吕梁市', value: 109.04, value2: 45 },
  3428. { name: '太原市', value: 251.67, value2: 113 },
  3429. { name: '阳泉市', value: 25.12, value2: 28 },
  3430. { name: '晋中市', value: 148.57, value2: 52 },
  3431. { name: '临汾市', value: 130.55, value2: 30 },
  3432. { name: '长治市', value: 103.00, value2: 23 },
  3433. { name: '运城市', value: 41.06, value2: 23 },
  3434. { name: '晋城市', value: 45.43, value2: 31 }
  3435. ]
  3436. var moveLine = {
  3437. normal: [
  3438. {
  3439. fromName: '太原市',
  3440. toName: '吕梁市',
  3441. coords: [
  3442. [112.3352, 37.9413],
  3443. [111.3574, 37.7325],
  3444. ],
  3445. },
  3446. {
  3447. fromName: '太原市',
  3448. toName: '忻州市',
  3449. coords: [
  3450. [112.3352, 37.9413],
  3451. [112.4561, 38.8971],
  3452. ],
  3453. },
  3454. {
  3455. fromName: '太原市',
  3456. toName: '临汾市',
  3457. coords: [
  3458. [112.3352, 37.9413],
  3459. [111.4783, 36.1615],
  3460. ],
  3461. },
  3462. {
  3463. fromName: '太原市',
  3464. toName: '阳泉市',
  3465. coords: [
  3466. [112.3352, 37.9413],
  3467. [113.4778, 38.0951],
  3468. ],
  3469. },
  3470. {
  3471. fromName: '太原市',
  3472. toName: '晋中市',
  3473. coords: [
  3474. [112.3352, 37.9413],
  3475. [112.7747, 37.37],
  3476. ],
  3477. },
  3478. {
  3479. fromName: '太原市',
  3480. toName: '运城市',
  3481. coords: [
  3482. [112.3352, 37.9413],
  3483. [111.1487, 35.2002],
  3484. ],
  3485. },
  3486. {
  3487. fromName: '太原市',
  3488. toName: '大同市',
  3489. coords: [
  3490. [112.3352, 37.9413],
  3491. [113.7854, 39.8035],
  3492. ],
  3493. },
  3494. {
  3495. fromName: '太原市',
  3496. toName: '晋城市',
  3497. coords: [
  3498. [112.3352, 37.9413],
  3499. [112.7856, 35.6342],
  3500. ],
  3501. },
  3502. {
  3503. fromName: '太原市',
  3504. toName: '长治市',
  3505. coords: [
  3506. [112.3352, 37.9413],
  3507. [112.8625, 36.4746],
  3508. ],
  3509. },
  3510. {
  3511. fromName: '太原市',
  3512. toName: '朔州市',
  3513. coords: [
  3514. [112.3352, 37.9413],
  3515. [113.0713, 39.6991],
  3516. ],
  3517. },
  3518. ],
  3519. }
  3520. /*获取地图数据*/
  3521. this.mapChart = echarts.init(this.$refs['echarts-map'])
  3522. echarts.registerMap('shanxi', {
  3523. type: 'FeatureCollection',
  3524. features: [
  3525. {
  3526. type: 'Feature',
  3527. id: '1409',
  3528. properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
  3529. geometry: {
  3530. type: 'Polygon',
  3531. coordinates: [
  3532. '@@Vx@lnbn¦WlnnUšmš°š²VšV‚VVVnUn„ºlz@l„„@Jƒ@kXWVXl@Lƒa@„ƒKUL„ŽlbnKlLnK‚LnKÆXn°šbVV@bUVl°Un@LnaVJUbW@UX²l‚@ČwlVVIšWnkÆa°„„anV‚Kn°™UW¯@™aVUVk@Un@„aV@ValwUanmWU„k@WVUUanaVwnLVl°@nk@mVU@UVK@w„LVKVU@ƒ„K@UUKVUV@@bnL„a‚V„aôšlIXmlKX_°KVV@bVV„@šzV`kblI„V„Ul‚šL@bnV@V„Ċll„„VlIXW@k„a‚U²blKšVnIlJ„albXXlWVn°JnšnL@l@XlJlaX@„X˜W²@l_VmnKšU„blU@mnkVK„¯@U@ƒma@kX¥VƒmakkƒLƒa@aƒ@WIUUVXWWnk@a°a@kkm@kUUmJm@WUUUIk`m@V—kaWWkX™KmƒXk¯ƒ@WKƒLkak@±bƒw@ƒaƒa@akaƒ@ma¯@ƒL—KÇÅkKWbkmġ™±ÅUƒLUK™VVkƒm¯LUVVbƒ„UwUW¯bm„ƒULƒxWJ—@ƒklmkUm@@KnwVkVK@akwƒ@@a¯bƒKkn›VUI™b¯mmbk@UbmKUL@xUUƒ@klmLUŽlVXI‚VVVUVUœU`mLXVWbXnW`Ų°xmށxU@mĉƒƒwU@mbU@UƒmbkVW¦kJ™@ƒX@`¯Im@UlUVVnb@bWJXnmbƒJUU™UUaƒ@UamIkaƒxƒ@@x@b',
  3533. ],
  3534. encodeOffsets: [[113614, 39657]],
  3535. },
  3536. },
  3537. {
  3538. type: 'Feature',
  3539. id: '1411',
  3540. properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
  3541. geometry: {
  3542. type: 'Polygon',
  3543. coordinates: [
  3544. '@@@a@w„@„wlbnJVb„@VbšVVV„InaWmXI@a‚aUmVUVkn@°J@_„Wš@lIX¥lUnaV„V@naV@„xĊ„n‚V@‚wn¯wƱX_WmXaWUnKV_V›VUUUUWJkUVnKlk¯™@@kmKUaٱKkU@WmI@WUIlUUmVwXƒ‚w@ƒUlUVwœV‚@„Lnb‚W@anU@UšaVkô@l»n@na˜JnUÈLVaƃUUVm„VKVƒ²L@mU_lK@UVWkU‚a@a@U¯aUaƒÑóÑUb™„ƒKk@@aƒk¯mVaUwVƒÑkWUmK@UUKmXUWÝwUa™LUU@aWJUUU@Ua݄U@WL@VKVaVI@WnU@alIVKƒƒ@kIƒmIkJ@™m@ƒ™@@_™K@xƒ@kaW@U„@Vmn@ŽUK@mIƒJUXV¤XXWlkKƒkkK@XmJVakImJU@ó™¯LWKUV@nUVƒLkxmKkLma@kXKmmƒLƒab™LmK@V@mXVÆUxƒX@`nL„aV@@VmLUVnLlLš˜„b@„šŽ°²nx@b‚VUxlb@V¯bUV@zV‚XVĊXVx@lVn@VnnmŽUš@LlJXVƒz¯VWVXbšV@bmn™VUVk„Çþń@XVxmbUlV„Uln„W„@„Xl‚@VLXÒ@bÞJ°¦„L˜ò„@nU‚b@°„X@ŽXbmVU„V„nb@x‚x',
  3545. ],
  3546. encodeOffsets: [[113614, 39657]],
  3547. },
  3548. },
  3549. {
  3550. type: 'Feature',
  3551. id: '1410',
  3552. properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
  3553. geometry: {
  3554. type: 'Polygon',
  3555. coordinates: [
  3556. '@@nW‚@@UnLšK‚a„b„KnnWL@lnblKnLlw„KVU@mVUXL°KôšV@nIlJUbnI@WlL„llLXkWWU£VW„InJ‚@VL@nm@UVƒX@lb„@@wšL@`‚@„šn@V@lw„@n„VmVX„WmwnUlƒœa@_lK„wVlUn°xVKVXXWlUšVVI@K@K„n°KœwlVlU@kna@V_„Wn‚m„UVm@kXml_@m„LlKXw°m@_ôJVUV@X™l@UaV@Va°I„lk»VwUkVmwUmmVn@V¯@KƒU—wmK@U¯wUVÝ@mJƒU—nWK™@@UnKVa„_lykUmKÛnm@™x@ƒUUlwVk™ƒXW@ƒa@Uƒ@@K@ƒkIV™nammVakUlƒ@wX@@kƒ™¯@ƒVVbml@„„°UbULmlVbnbÅK±VƒKVXUJWa@ULWaUU@@U@aWK@UkxUKƒLUUUJ±UkL@V±kk@kam@UV@l@LWl@n@VVUx„LlUUx@VUV™U@aƒIUl™L@°mLU‚ƒbkUUaWUUaUU@aWK—LWJ@bUL@VUVVbU@m@a@kmKmnĉlUK™XƒWUblb—xmIkƒƒU@xWb@lkšVx™LXŽmzVV@bklVVUzm˜@bk„@Vx@xlŽU„@lUbVnl@„Wxnl@n@ŽUbV„mL‚mƒb@`X@lUX@@xlnkLWaUJnnWV™Vn@l„@bULVV@l™V@XnJVX',
  3557. ],
  3558. encodeOffsets: [[113063, 37784]],
  3559. },
  3560. },
  3561. {
  3562. type: 'Feature',
  3563. id: '1407',
  3564. properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
  3565. geometry: {
  3566. type: 'Polygon',
  3567. coordinates: [
  3568. '@@@šlInJ„lJ„@‚„ULkJ@bmV@XUJUb‚L@UXKV@ރVbV@VVXI@bVVšKVbÞxVXnWVL@VnLV‚lX„ÒUŽVxUb°n„l@bl@„LšƒVaô҄ÒVb°b@VnLnnV@lmn@lb„U„V@„‚JœUVV‚Xkl@lUzmJ@xšXkl‚bUn„JVšUb„nU‚lb„V@nlLX@lakšV`Ub°š@XVJnU‚L²KlxnI@KV@lbUbVV„KnVl@„zlm@Uš@nŽšI@WUaVl@@mVU„@XkW@ƒnkVKVƒ„_Vw„y@knwVa‚@XalU„@šVnml@„X@V„L‚KVaÞbnnlJšI„mVKn„VVVInVlU„@„m@™mXK@UmyUI@mWUUakamw@wUwmLkakwVƒmK™w@wUam£y@am_ƒW@™UU@knmm„amU@WUa@knw@ƒUUUUV@nƒJm@mVUkKVUUUkKmwƒKULƒKUImV@lUn™nŽm@mbUK@°™bUnmbUmkkƒWUb@am@UXkK@a±@™V™@ĉř„V‚UXVxUVkLWl¯@@bULUlm@@nm`—XƒlWakIkm›VUbUL@Vm@kIƒ@@Kšm@—VaX‚I@W@aU@kUƒVU_™KƒbƒJkkǎ™b@nkKmL™wÅW@kVUUƒVU@WUIƒJmIXmma@_kyVaUUlkUm@ƒkU›x¯Lƒm@L@LUJ™UkVWXUWUL¯wVmUkƒxkL@`›bk„mVnxƒXUWUnmƒƒ@kxU@',
  3569. ],
  3570. encodeOffsets: [[114087, 37682]],
  3571. },
  3572. },
  3573. {
  3574. type: 'Feature',
  3575. id: '1408',
  3576. properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
  3577. geometry: {
  3578. type: 'Polygon',
  3579. coordinates: [
  3580. '@@„Vl„nJ˜wkaVa„XšWVLĊknmnL‚l@@bn‚V@UaVU@UVK@aXI˜KXL@bVVVbXVVblV„aVnK@¯šKVk„J@bšVVU@UVwkVƒKVwUUm@@Xk@K@kVUn@lbl@²l@UlK²VVIVV„KVLlw@VXL@b@VV@VŽXbVK‚@XbVIUW„L‚U²ÆLmaUankVKVaƒ¯@ƒnkUa„U°@„š‚n@@kWa„UVaXUW@IXKVw@U™ƒ„™WU@W@@UUƒU@mn@ƒ`m@UUULkUmJ™IUƒ@@UƒK@U@›anƒ™ak_@wmKUwmakV™kmK™V™k¯b™wƒ`kwUIÇx¯»ÇaŃmn@@™mƒmUkV@wkKW@kxmL™UkĉLÝk™xÝw¯lóVU„mV@ĀVVX¦W¤kz@`Vx°„²ĸ‚š@„Ul@x„êĸNJ°¤V„VlXLWnXxmV@nUl@„',
  3581. ],
  3582. encodeOffsets: [[113232, 36597]],
  3583. },
  3584. },
  3585. {
  3586. type: 'Feature',
  3587. id: '1402',
  3588. properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
  3589. geometry: {
  3590. type: 'Polygon',
  3591. coordinates: [
  3592. '@@²£šyl@Ȑ˜Ė@bĸŽĢbĸ„˜X„a‚KŤnn@ŎôllÈx„nVnÞDŽV@b‚nXllL°KšbVb@J@b—„‚„@ŽU„„xlKXLlKlXk„@Ulk„JlkUƒVKXUƒÇVIVm@_nǚLšašl‚w„VnU@UUwma@aƒaÝaLmUk@@Wƒ@U@@X™wVWÝUUUk@@VmLƒKV»nwUw™aUL@`mzƒJUIVƒUaUw™KUaVIlJôanÑlLVUn@ša„@VV„@@UUwVK°Vn_lJÆLœéW@UUUÅ@»lm@aÞIVwXW˜UUkkm@U@aƒU@mwU£VWU_kWmƒXwW_°yUkkK@UÇK@kkUVymóK—U@KWIƒbUak@mJ@bkbmLkŽ™UmƒkVU„W¦@lnb@„@Vƒ°ULml@nkVƒa™VmLUnk`±@—XƒWW@kbǦXޝ„WxI@xmbmxXlWV„„@bŎUz@J‚b@bÞb™ŽU@Wbk@ƒxk@WX¯VۙƒWÝbÝUkVUU@alI@a@akLWa™m@U¯UUmÇL@K@aU@¯VUkƒKmX@`@œkJ@nV‚Ub@lbVÆXVW„ULU`VbkLUV@XWl@bXJ˜@VbV@Vl',
  3593. ],
  3594. encodeOffsets: [[115335, 41209]],
  3595. },
  3596. },
  3597. {
  3598. type: 'Feature',
  3599. id: '1404',
  3600. properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
  3601. geometry: {
  3602. type: 'Polygon',
  3603. coordinates: [
  3604. '@@Uk™Lky@I‚JVa@mÞaWšy@_W@_WƒXVlUVwš@nw°K@m„UƒVaƒmVkU@mmmnLVUmKXa™U@IlKVUnK@UmWkX@WV_Vƒ@akU@a„KWIXyƒIUVmUn™Ua@WaXUVKVmkUWVkUƒLU@@VƒbƒKbƒIUmƒ@mbVL—x›WUUkn±V¯wƒbÅJUbmLkbmKÅKƒbVnUbƒV™KUb™KUbmLKmƒb™aƒKkUm@UŽnn‚VnxUVlUxl¼ƒk¯JUbU@Vbk@WšU@UVóI@`¯nWxkLƒK@nk`Wn@lUnƒVnm‚ƒXU`@mb@lkV@„VnklVVUblz@`nbWnnJ„IVJ@XUVV„UV@lÆXšxnKlL@mšaȍll„I„ašLV`„UlVV@@b@XJWUb@˜™n@L„@lJn@@UVKVaœUlnlJXb„k˜Wn_@mn@VkVK@a°@XklKVUUwVWUšƒĊƚ@šU²@@blLVWn@@bVa„XllVnnaVmša@¯VLnan@‚šmVm@knUVJ',
  3605. ],
  3606. encodeOffsets: [[116269, 37637]],
  3607. },
  3608. },
  3609. {
  3610. type: 'Feature',
  3611. id: '1406',
  3612. properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
  3613. geometry: {
  3614. type: 'Polygon',
  3615. coordinates: [
  3616. '@@XXWVXVWnnlnn@èÆ¼@„„xlš„ŽV„nblšššVŽÈUVl‚š@„blnœL܃ĊmUkU@Ua‚—@WI@aXk@WVUlKUaV_VKXƒWUUÅka@VaU@mlI@›@_nW„LVl°UV@@b@LÈKVn°V@VšnXblK@b@bkJ@bVVlUÞVÞa„Xܚ°UXWl@„wl@XaV@šÝa@aa@IVyƍ@aƒƒXUWknwna@w‚JXw°ƒWÈ¥kI@W@kmKm™¯IUmkXWWkaƒbkImJ™UkL±aVƒb@lWXkJƒUkƒĉkƒ@UmU@a™KkƒVƒUkJlaU_™yƒ@UU@aUU¯LW`kLWnkJó™ƒbUƒbmK@aU@UVVL@VƒL@„UVULƒK@xUL@VUV@nml¯@UkmKUxmbVbUV@XƒlXVmnVbkxUbU@ƒbm@@VUlUVšb°@VX¯šm‚',
  3617. ],
  3618. encodeOffsets: [[114615, 40562]],
  3619. },
  3620. },
  3621. {
  3622. type: 'Feature',
  3623. id: '1405',
  3624. properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
  3625. geometry: {
  3626. type: 'Polygon',
  3627. coordinates: [
  3628. '@@lV„Lšb„an‚LnKVašLVašL„UVaUm„aÆLnLlanKVaÆI„a°x²UlmVVœX˜wUKna„@Vn„J‚a„L„a@UV@@alUkKVKnkmmVwUk„w@ƒ™@kxWUXƒW@@mƒk@aUa@a¯aƒLkKmwkUm@kL@K@aWIXmƒVƒXƒWkUVakL@UVKƒw@aUK@UUKmLU@¯n™KUwVƒUIWJUWmka™@UXƒJƒk@UkmW@kLWKVƒx@bmI@VUaVU@a¯@UUmVKmX@±`kÝKVxUL±akL@V™bƒLkKmVƒ@XWVUbƒVXb@lm@@lW@@xk„lVUbnnmbUšlJ@„@L„@@V„b@‚WXš„UlkxVV@„šwn@ÜmnLlVkzƒ`UbmL@Vš@XL˜m„VnIÞ@VU°x@VnL˜x„V@LU°',
  3629. ],
  3630. encodeOffsets: [[115223, 36895]],
  3631. },
  3632. },
  3633. {
  3634. type: 'Feature',
  3635. id: '1401',
  3636. properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
  3637. geometry: {
  3638. type: 'Polygon',
  3639. coordinates: [
  3640. '@@„@VV@wVKnLVal@na°nšaVJœUlm„L°a@b„@lx@bULUlmx@Ln@lVkn„l˜@XI„w‚K„Vnƒ°aVXVx„ƒUaVU°K„nUlšUVL„KÆVš²Ģ‚lnXalLÈÆ˜L„KUaVkUanmWU™a@WwkUWU¯y¯Ñ@anIl@@aVU„m„I„ymUƒLUUVakaU@@LmJkw±LKmVUI@W¯™VaU_l™kbW@kK@mƒUkaVƒmVaU™ƒIVmalk™W@wnIVy@klkWUU›VI@ƒƒUƒVkam@knU@mmmK@bblVUX@VkLV`@n±KU„ULƒ‚UnVVńUbÇKmV—Imbm@k¼ó@Ul™b@VmV@bXmaƒK@›UUxkV‚V@„xW„UxVnkVVJ@XnJ@XlV²LƂVbnL@lš@°',
  3641. ],
  3642. encodeOffsets: [[114503, 39134]],
  3643. },
  3644. },
  3645. {
  3646. type: 'Feature',
  3647. id: '1403',
  3648. properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
  3649. geometry: {
  3650. type: 'Polygon',
  3651. coordinates: [
  3652. '@@°@nb„@lb@b„b„b‚@„x²al@lb„KXU@m‚kUWkkmUUƒVwV@XUW@™naVklKXblKnL‚ƒnLVanImaXKlL„ašV@U@KUKW„alƒXK@£WKXUV@VU„ƒUUVW„_V™@W@@K„@šƒUƒƒIWmXUmƒULƒn™JkImmÝaUbLƒK@UƒWk@mn™Uƒ@kVWb@Ubmx@lƒzUxƒ`U„ULml@„XWlƒ@UV@nk@U‚Vb@X™Jm™@@Vknƒyk@ƒzƒJƒnUV@bk@mJ@b°Ò°zXVlVXx‚@šbXVmnVbUlVb',
  3653. ],
  3654. encodeOffsets: [[115864, 39336]],
  3655. },
  3656. },
  3657. ],
  3658. UTF8Encoding: true,
  3659. })
  3660. var mapFeatures = echarts.getMap(this.mapName).geoJson.features
  3661. mapFeatures.forEach(v => {
  3662. // 地区名称
  3663. var name = v.properties.name
  3664. // 地区经纬度
  3665. this.geoCoordMap[name] = v.properties.cp
  3666. })
  3667. // <p>当前阶段:<span>可论证阶段</span></p>
  3668. // <p>时间节点:<span>2021.10-2022.10</span></p>
  3669. let option = {
  3670. tooltip: {
  3671. padding: 15,
  3672. enterable: true,
  3673. transitionDuration: 1,
  3674. formatter: (params, ticket, callback) => {
  3675. // 清空所有轮播
  3676. for (var k in this.geoCoordMap) {
  3677. this.mapChart.dispatchAction({
  3678. // type: 'geoUnSelect',
  3679. type: 'downplay',
  3680. name: k,
  3681. })
  3682. }
  3683. // 如果鼠标滑动到线线上面,则返回空
  3684. this.mapChart.dispatchAction({
  3685. // type: 'geoSelect',
  3686. type: 'highlight',
  3687. name: params.name,
  3688. })
  3689. if (params.componentSubType == 'lines') {
  3690. return
  3691. }
  3692. if (params.componentSubType == 'scatter') {
  3693. let tipHtml = `
  3694. <div class="tooltip-cont">
  3695. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  3696. <p>总投资额:<span>${params.data.value[2]}亿</span></p>
  3697. </div>`
  3698. callback(ticket, tipHtml)
  3699. return tipHtml
  3700. }
  3701. if (params.componentSubType == 'map') {
  3702. let tipHtml = `
  3703. <div class="tooltip-cont">
  3704. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  3705. <p>总投资额:<span>${params.data.value}亿</span></p>
  3706. </div>`
  3707. callback(ticket, tipHtml)
  3708. return tipHtml
  3709. }
  3710. },
  3711. },
  3712. visualMap: {
  3713. show: false,
  3714. min: 0,
  3715. max: 300,
  3716. right: 0,
  3717. bottom: 0,
  3718. text: ['高', '低'],
  3719. textStyle: {
  3720. color: '#f1f1f1'
  3721. },
  3722. realtime: false,
  3723. calculable: false,
  3724. inRange: {
  3725. color: ['lightskyblue', '#2754b7']
  3726. }
  3727. },
  3728. geo: {
  3729. show: true,
  3730. map: 'shanxi',
  3731. layoutCenter: ['50%', '50%'], //地图位置
  3732. layoutSize: '65%',
  3733. zoom: 1.5,
  3734. label: {
  3735. normal: {
  3736. show: false,
  3737. },
  3738. emphasis: {
  3739. show: false,
  3740. },
  3741. },
  3742. roam: false,
  3743. itemStyle: {
  3744. normal: {
  3745. areaColor: '#1946a8',
  3746. shadowColor: '#1946a8',
  3747. borderWidth: 1, //设置外层边框
  3748. borderColor: '#1946a8',
  3749. shadowOffsetX: 10,
  3750. shadowOffsetY: 5,
  3751. shadowBlur: 2,
  3752. },
  3753. emphasis: {
  3754. areaColor: '#1946a8',
  3755. borderColor: '#d4bc1d',
  3756. borderWidth: 2, //设置外层边框
  3757. },
  3758. },
  3759. },
  3760. series: [
  3761. {
  3762. name: '散点',
  3763. type: 'scatter',
  3764. coordinateSystem: 'geo',
  3765. data: this.convertData(data),
  3766. symbolSize: function (val) {
  3767. return 10
  3768. },
  3769. label: {
  3770. normal: {
  3771. formatter: '{b}',
  3772. position: [10, 10],
  3773. fontSize: 30,
  3774. fontWeight: 600,
  3775. fontStyle: 'italic',
  3776. color: '#fff',
  3777. show: true,
  3778. },
  3779. emphasis: {
  3780. show: true,
  3781. },
  3782. },
  3783. itemStyle: {
  3784. normal: {
  3785. color: '#000',
  3786. borderWidth: 2,
  3787. borderColor: '#fff',
  3788. },
  3789. },
  3790. },
  3791. {
  3792. type: 'map',
  3793. map: this.mapName,
  3794. geoIndex: 0,
  3795. aspectScale: 1.5, //长宽比
  3796. showLegendSymbol: true, // 存在legend时显示
  3797. label: {
  3798. normal: {
  3799. show: true,
  3800. },
  3801. emphasis: {
  3802. show: false,
  3803. textStyle: {
  3804. color: '#fff',
  3805. },
  3806. },
  3807. },
  3808. roam: true,
  3809. itemStyle: {
  3810. normal: {
  3811. areaColor: '#031525',
  3812. borderColor: '#3B5077',
  3813. },
  3814. emphasis: {
  3815. areaColor: '#2B91B7',
  3816. },
  3817. },
  3818. animation: false,
  3819. data: data,
  3820. },
  3821. {
  3822. name: '点',
  3823. type: 'scatter',
  3824. coordinateSystem: 'geo',
  3825. zlevel: 6,
  3826. },
  3827. {
  3828. name: 'Top 5',
  3829. type: 'effectScatter',
  3830. coordinateSystem: 'geo',
  3831. data: this.convertData(
  3832. data
  3833. .sort(function (a, b) {
  3834. return b.value - a.value
  3835. })
  3836. .slice(0, 5)
  3837. ),
  3838. symbolSize: function (val) {
  3839. return 15
  3840. },
  3841. showEffectOn: 'render',
  3842. rippleEffect: {
  3843. brushType: 'stroke',
  3844. },
  3845. hoverAnimation: true,
  3846. label: {
  3847. normal: {
  3848. formatter: '{b}',
  3849. position: 'left',
  3850. show: false,
  3851. },
  3852. },
  3853. itemStyle: {
  3854. normal: {
  3855. color: 'yellow',
  3856. shadowBlur: 10,
  3857. shadowColor: 'yellow',
  3858. },
  3859. },
  3860. zlevel: 1000,
  3861. },
  3862. {
  3863. name: '线路',
  3864. type: 'lines',
  3865. zlevel: 2,
  3866. effect: {
  3867. show: true,
  3868. period: 4, //箭头指向速度,值越小速度越快
  3869. trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
  3870. symbol: 'arrow', //箭头图标
  3871. symbolSize: 5, //图标大小
  3872. },
  3873. lineStyle: {
  3874. normal: {
  3875. color: '#00FFFF',
  3876. width: 1,
  3877. type: 'dashed',
  3878. opacity: 0.5, //尾迹线条透明度
  3879. curveness: -0.3, //尾迹线条曲直度
  3880. },
  3881. },
  3882. data: moveLine.normal,
  3883. },
  3884. ],
  3885. }
  3886. let that = this
  3887. this.mapChart.on('click', function (params) {
  3888. if (params.name == '太原市') {
  3889. that.showChartLTipDouble('太原市')
  3890. }
  3891. })
  3892. tools.loopShowTooltip(this.mapChart, option, {
  3893. interval: 2000,
  3894. loopSeries: false,
  3895. });
  3896. this.mapChart.setOption(option)
  3897. },
  3898. initChinaChart () {
  3899. var data = [
  3900. // { name: '大同市', value: 60.35, value2: 28 },
  3901. // { name: '朔州市', value: 33.61, value2: 13 },
  3902. // { name: '忻州市', value: 73.35, value2: 25 },
  3903. // { name: '吕梁市', value: 109.04, value2: 45 },
  3904. // { name: '太原市', value: 251.67, value2: 113 },
  3905. // { name: '阳泉市', value: 25.12, value2: 28 },
  3906. // { name: '晋中市', value: 148.57, value2: 52 },
  3907. // { name: '临汾市', value: 130.55, value2: 30 },
  3908. // { name: '长治市', value: 103.00, value2: 23 },
  3909. // { name: '运城市', value: 41.06, value2: 23 },
  3910. // { name: '晋城市', value: 45.43, value2: 31 }
  3911. ]
  3912. var moveLine = {
  3913. normal: [
  3914. // {
  3915. // fromName: '太原市',
  3916. // toName: '吕梁市',
  3917. // coords: [
  3918. // [112.3352, 37.9413],
  3919. // [111.3574, 37.7325],
  3920. // ],
  3921. // },
  3922. // {
  3923. // fromName: '太原市',
  3924. // toName: '忻州市',
  3925. // coords: [
  3926. // [112.3352, 37.9413],
  3927. // [112.4561, 38.8971],
  3928. // ],
  3929. // },
  3930. // {
  3931. // fromName: '太原市',
  3932. // toName: '临汾市',
  3933. // coords: [
  3934. // [112.3352, 37.9413],
  3935. // [111.4783, 36.1615],
  3936. // ],
  3937. // },
  3938. // {
  3939. // fromName: '太原市',
  3940. // toName: '阳泉市',
  3941. // coords: [
  3942. // [112.3352, 37.9413],
  3943. // [113.4778, 38.0951],
  3944. // ],
  3945. // },
  3946. // {
  3947. // fromName: '太原市',
  3948. // toName: '晋中市',
  3949. // coords: [
  3950. // [112.3352, 37.9413],
  3951. // [112.7747, 37.37],
  3952. // ],
  3953. // },
  3954. // {
  3955. // fromName: '太原市',
  3956. // toName: '运城市',
  3957. // coords: [
  3958. // [112.3352, 37.9413],
  3959. // [111.1487, 35.2002],
  3960. // ],
  3961. // },
  3962. // {
  3963. // fromName: '太原市',
  3964. // toName: '大同市',
  3965. // coords: [
  3966. // [112.3352, 37.9413],
  3967. // [113.7854, 39.8035],
  3968. // ],
  3969. // },
  3970. // {
  3971. // fromName: '太原市',
  3972. // toName: '晋城市',
  3973. // coords: [
  3974. // [112.3352, 37.9413],
  3975. // [112.7856, 35.6342],
  3976. // ],
  3977. // },
  3978. // {
  3979. // fromName: '太原市',
  3980. // toName: '长治市',
  3981. // coords: [
  3982. // [112.3352, 37.9413],
  3983. // [112.8625, 36.4746],
  3984. // ],
  3985. // },
  3986. // {
  3987. // fromName: '太原市',
  3988. // toName: '朔州市',
  3989. // coords: [
  3990. // [112.3352, 37.9413],
  3991. // [113.0713, 39.6991],
  3992. // ],
  3993. // },
  3994. ],
  3995. }
  3996. /*获取地图数据*/
  3997. this.mapChart = echarts.init(this.$refs['echarts-map'])
  3998. echarts.registerMap('shanxi', china)
  3999. var mapFeatures = echarts.getMap(this.mapName).geoJson.features
  4000. mapFeatures.forEach(v => {
  4001. // 地区名称
  4002. var name = v.properties.name
  4003. // 地区经纬度
  4004. // this.geoCoordMap[name] = v.properties.centroid
  4005. this.geoCoordMap[name] = v.properties.cp
  4006. data.push({ name: v.properties.name, value1: v.properties.cp[0], value2: v.properties.cp[1] })
  4007. })
  4008. // <p>当前阶段:<span>可论证阶段</span></p>
  4009. // <p>时间节点:<span>2021.10-2022.10</span></p>
  4010. let option = {
  4011. // tooltip: {
  4012. // padding: 15,
  4013. // enterable: true,
  4014. // transitionDuration: 1,
  4015. // formatter: (params, ticket, callback) => {
  4016. // // 清空所有轮播
  4017. // for (var k in this.geoCoordMap) {
  4018. // myChart.dispatchAction({
  4019. // // type: 'geoUnSelect',
  4020. // type: 'downplay',
  4021. // name: k,
  4022. // })
  4023. // }
  4024. // // 如果鼠标滑动到线线上面,则返回空
  4025. // myChart.dispatchAction({
  4026. // // type: 'geoSelect',
  4027. // type: 'highlight',
  4028. // name: params.name,
  4029. // })
  4030. // if (params.componentSubType == 'lines') {
  4031. // return
  4032. // }
  4033. // if (params.componentSubType == 'scatter') {
  4034. // let tipHtml = `
  4035. // <div class="tooltip-cont">
  4036. // <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  4037. // <p>总投资额:<span>${params.data.value[2]}亿</span></p>
  4038. // </div>`
  4039. // callback(ticket, tipHtml)
  4040. // return tipHtml
  4041. // }
  4042. // if (params.componentSubType == 'map') {
  4043. // let tipHtml = `
  4044. // <div class="tooltip-cont">
  4045. // <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  4046. // <p>总投资额:<span>${params.data.value}亿</span></p>
  4047. // </div>`
  4048. // callback(ticket, tipHtml)
  4049. // return tipHtml
  4050. // }
  4051. // },
  4052. // },
  4053. //视觉映射,根据数值颜色深浅
  4054. visualMap: {
  4055. show: false,
  4056. min: 0,
  4057. max: 300,
  4058. right: 0,
  4059. bottom: 0,
  4060. text: ['高', '低'],
  4061. textStyle: {
  4062. color: '#f1f1f1'
  4063. },
  4064. realtime: false,
  4065. calculable: false,
  4066. inRange: {
  4067. color: ['lightskyblue', '#2754b7']
  4068. }
  4069. },
  4070. geo: {
  4071. show: true,
  4072. map: 'shanxi',
  4073. layoutCenter: ['50%', '50%'], //地图位置
  4074. layoutSize: '65%',
  4075. zoom: 1.5,
  4076. label: {
  4077. normal: {
  4078. show: false,
  4079. },
  4080. emphasis: {
  4081. show: false,
  4082. },
  4083. },
  4084. roam: false,
  4085. itemStyle: {
  4086. normal: {
  4087. areaColor: '#70b0ea',
  4088. shadowColor: '#1946a8',
  4089. borderWidth: 1, //设置外层边框
  4090. borderColor: '#1946a8',
  4091. shadowOffsetX: 2,
  4092. shadowOffsetY: 1,
  4093. shadowBlur: 2,
  4094. },
  4095. emphasis: {
  4096. areaColor: '#1946a8',
  4097. borderColor: '#d4bc1d',
  4098. borderWidth: 2, //设置外层边框
  4099. },
  4100. },
  4101. },
  4102. series: [
  4103. {
  4104. name: '散点',
  4105. type: 'scatter',
  4106. coordinateSystem: 'geo',
  4107. data: this.convertData(data),
  4108. symbolSize: function (val) {
  4109. return 10
  4110. },
  4111. label: {
  4112. normal: {
  4113. formatter: '{b}',
  4114. position: [10, 10],
  4115. fontSize: 20,
  4116. fontWeight: 600,
  4117. // fontStyle: 'italic',
  4118. color: '#fff',
  4119. show: true,
  4120. },
  4121. emphasis: {
  4122. show: true,
  4123. },
  4124. },
  4125. itemStyle: {
  4126. normal: {
  4127. color: 'rgba(0,0,0,0)',
  4128. borderWidth: 2,
  4129. borderColor: '#fff',
  4130. },
  4131. },
  4132. },
  4133. {
  4134. type: 'map',
  4135. map: this.mapName,
  4136. geoIndex: 0,
  4137. aspectScale: 1.5, //长宽比
  4138. showLegendSymbol: true, // 存在legend时显示
  4139. label: {
  4140. normal: {
  4141. show: true,
  4142. },
  4143. emphasis: {
  4144. show: false,
  4145. textStyle: {
  4146. color: '#fff',
  4147. },
  4148. },
  4149. },
  4150. roam: true,
  4151. itemStyle: {
  4152. normal: {
  4153. areaColor: '#031525',
  4154. borderColor: '#3B5077',
  4155. },
  4156. emphasis: {
  4157. areaColor: '#2B91B7',
  4158. },
  4159. },
  4160. animation: false,
  4161. data: data,
  4162. },
  4163. {
  4164. name: '点',
  4165. type: 'scatter',
  4166. coordinateSystem: 'geo',
  4167. zlevel: 6,
  4168. },
  4169. // {
  4170. // name: 'Top 5',
  4171. // type: 'effectScatter',
  4172. // coordinateSystem: 'geo',
  4173. // data: this.convertData(
  4174. // data
  4175. // .sort(function (a, b) {
  4176. // return b.value - a.value
  4177. // })
  4178. // .slice(0, 5)
  4179. // ),
  4180. // symbolSize: function (val) {
  4181. // return 15
  4182. // },
  4183. // showEffectOn: 'render',
  4184. // rippleEffect: {
  4185. // brushType: 'stroke',
  4186. // },
  4187. // hoverAnimation: true,
  4188. // label: {
  4189. // normal: {
  4190. // formatter: '{b}',
  4191. // position: 'left',
  4192. // show: false,
  4193. // },
  4194. // },
  4195. // itemStyle: {
  4196. // normal: {
  4197. // color: 'yellow',
  4198. // shadowBlur: 10,
  4199. // shadowColor: 'yellow',
  4200. // },
  4201. // },
  4202. // zlevel: 1000,
  4203. // },
  4204. // {
  4205. // name: '线路',
  4206. // type: 'lines',
  4207. // zlevel: 2,
  4208. // effect: {
  4209. // show: true,
  4210. // period: 4, //箭头指向速度,值越小速度越快
  4211. // trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
  4212. // symbol: 'arrow', //箭头图标
  4213. // symbolSize: 5, //图标大小
  4214. // },
  4215. // lineStyle: {
  4216. // normal: {
  4217. // color: '#00FFFF',
  4218. // width: 1,
  4219. // type: 'dashed',
  4220. // opacity: 0.5, //尾迹线条透明度
  4221. // curveness: -0.3, //尾迹线条曲直度
  4222. // },
  4223. // },
  4224. // data: moveLine.normal,
  4225. // },
  4226. ],
  4227. }
  4228. let that = this
  4229. this.mapChart.on('click', function (params) {
  4230. if (params.name == '山西') {
  4231. that.backShow = true
  4232. setTimeout(() => {
  4233. that.initProvinceChart()
  4234. })
  4235. }
  4236. })
  4237. tools.loopShowTooltip(this.mapChart, option, {
  4238. interval: 2000,
  4239. loopSeries: true,
  4240. })
  4241. this.mapChart.setOption(option)
  4242. },
  4243. initChartC3 () {
  4244. let myChart = echarts.init(this.$refs['echartC3'])
  4245. let option = {
  4246. tooltip: {
  4247. trigger: 'axis',
  4248. formatter: '{a0}:{c0}' + '亿元', //+ '<br/>'+ '{a1}:{c1}' + '%',
  4249. axisPointer: {
  4250. type: 'cross',
  4251. },
  4252. textStyle: {
  4253. color: '#FFF', // 文字的颜色
  4254. fontSize: '20', // 文字字体大小
  4255. },
  4256. },
  4257. grid: {
  4258. top: '8%',
  4259. right: '3%',
  4260. left: '7%',
  4261. bottom: '10%',
  4262. },
  4263. // legend: {
  4264. // top: '1',
  4265. // textStyle: {
  4266. // color: 'rgba(250,250,250,0.6)',
  4267. // },
  4268. // },
  4269. xAxis: {
  4270. data: statusList.map(item => item.name),
  4271. axisLine: {
  4272. show: true, //隐藏X轴轴线
  4273. lineStyle: {
  4274. color: '#005094',
  4275. width: 1,
  4276. },
  4277. },
  4278. axisTick: {
  4279. show: false, //隐藏X轴刻度
  4280. },
  4281. axisLabel: {
  4282. show: true,
  4283. rotate: 20,
  4284. textStyle: {
  4285. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  4286. fontSize: '15'
  4287. },
  4288. },
  4289. },
  4290. yAxis: [
  4291. {
  4292. type: 'value',
  4293. name: '亿元',
  4294. nameTextStyle: {
  4295. color: 'rgba(255,255,255,0.6)',
  4296. fontSize: '15'
  4297. },
  4298. splitLine: {
  4299. show: true,
  4300. lineStyle: {
  4301. color: '#68b4dd66',
  4302. type: 'dashed',
  4303. },
  4304. },
  4305. axisLine: {
  4306. show: true,
  4307. lineStyle: {
  4308. color: '#3D7495',
  4309. },
  4310. },
  4311. axisLabel: {
  4312. show: true,
  4313. textStyle: {
  4314. color: '#fff',
  4315. fontSize: '15'
  4316. },
  4317. },
  4318. nameTextStyle: {
  4319. color: '#fff',
  4320. fontSize: 15,
  4321. },
  4322. },
  4323. {
  4324. type: 'value',
  4325. axisLine: {
  4326. show: false,
  4327. },
  4328. splitLine: {
  4329. show: false,
  4330. },
  4331. axisLabel: {
  4332. show: true,
  4333. formatter: '{value} %',
  4334. textStyle: {
  4335. color: 'rgba(250,250,250,0.6)',
  4336. },
  4337. },
  4338. },
  4339. ],
  4340. series: [
  4341. {
  4342. type: 'bar',
  4343. name: '投资金额',
  4344. barWidth: 15,
  4345. itemStyle: {
  4346. normal: {
  4347. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4348. {
  4349. offset: 0,
  4350. color: '#69c0ff',
  4351. },
  4352. {
  4353. offset: 1,
  4354. color: '#082550',
  4355. },
  4356. ]),
  4357. },
  4358. },
  4359. data: statusList.map(item => item.value),
  4360. },
  4361. ],
  4362. }
  4363. myChart.on('click', function (param) {
  4364. window.location.href = './investHomeChild.html?type=2'
  4365. })
  4366. myChart.setOption(option)
  4367. tools.loopShowTooltip(myChart, option, {
  4368. nterval: 2000,
  4369. loopSeries: true,
  4370. })
  4371. },
  4372. initChartC4 () {
  4373. var chartData = []
  4374. var timer = null;
  4375. var timer2 = null;
  4376. var i = 0;
  4377. chartDateR2.forEach((item, index) => {
  4378. let obj = {
  4379. name: item.name,
  4380. y: item.value2,
  4381. num: item.value,
  4382. sliced: false,
  4383. selected: false,
  4384. color: index == 0 ? '#43ede3' : '#8ba2ff'
  4385. }
  4386. chartData.push(obj)
  4387. })
  4388. let that = this
  4389. var chart = Highcharts.chart('echartC4', {
  4390. chart: {
  4391. type: 'pie',
  4392. backgroundColor: 'rgba(0,0,0,0)',
  4393. options3d: {
  4394. enabled: true,
  4395. alpha: 45,
  4396. //beta: 0
  4397. },
  4398. events: {
  4399. // load,图表加载完成时触发
  4400. load: function () {
  4401. var chart = this;
  4402. var points = chart.series[0].points;
  4403. var len = points.length;
  4404. timer && clearInterval(timer);
  4405. timer = setInterval(function () {
  4406. autoTooltip(points[i]);
  4407. chartData.forEach((item, index) => {
  4408. item.sliced = false
  4409. item.selected = false
  4410. if (index == i) {
  4411. item.sliced = true
  4412. item.selected = true
  4413. }
  4414. })
  4415. chart.update({
  4416. series: [{
  4417. type: 'pie',
  4418. name: '占比',
  4419. point: {
  4420. events: {
  4421. click: function (e) {
  4422. that.showChartLTipDouble(e.point.name)
  4423. }
  4424. }
  4425. },
  4426. data: chartData
  4427. }]
  4428. })
  4429. i++;
  4430. if (i === len) {
  4431. i = 0;
  4432. chartData.forEach((item, index) => {
  4433. item.sliced = false
  4434. item.selected = false
  4435. })
  4436. chart.update({
  4437. series: [{
  4438. type: 'pie',
  4439. name: '占比',
  4440. point: {
  4441. events: {
  4442. click: function (e) {
  4443. that.showChartLTipDouble(e.point.name)
  4444. }
  4445. }
  4446. },
  4447. data: chartData
  4448. }]
  4449. })
  4450. }
  4451. }, 2000);
  4452. },
  4453. legendItemClick: function (event) {
  4454. console.log(event);
  4455. return true;
  4456. }
  4457. }
  4458. },
  4459. credits: {
  4460. enabled: false //去掉hightchats水印
  4461. },
  4462. title: {
  4463. text: null
  4464. },
  4465. tooltip: {
  4466. crosshairs: true,
  4467. backgroundColor: 'rgba(0,0,0,0.5)',
  4468. // positioner: function(e){
  4469. // console.log(e, this)
  4470. // },
  4471. useHTML: false, //开启html模式
  4472. style: {
  4473. color: '#fff',
  4474. fontSize: '20'
  4475. },
  4476. formatter: function (e) {
  4477. //console.log(this)
  4478. let num = chartData[this.colorIndex].num
  4479. this.percentage = Math.round(this.percentage)
  4480. return `${this.key}:<b>${this.percentage}%</b><br/>投资完成额:<b>${this.y}</b>亿<br/>投资数量:<b>${num}个</b>`
  4481. },
  4482. //pointFormat:
  4483. },
  4484. legend: {
  4485. layout: 'vertical',
  4486. align: 'right',
  4487. verticalAlign: 'bottom',
  4488. itemStyle: {
  4489. fontSize: '20px',
  4490. color: '#fff',
  4491. x: 20
  4492. }
  4493. },
  4494. plotOptions: {
  4495. pie: {
  4496. allowPointSelect: true,
  4497. showInLegend: true, // 图例
  4498. cursor: 'pointer',
  4499. size: 500,
  4500. innerSize: 300, //环形图中间空白,0为饼图
  4501. depth: 28, //立体高度
  4502. slicedOffset: 23, //动画距离
  4503. dataLabels: {
  4504. enabled: false, // 是否展示指示线
  4505. format: '{point.name}: {point.percentage}'
  4506. }
  4507. },
  4508. },
  4509. series: [{
  4510. type: 'pie',
  4511. name: '占比',
  4512. center: ['60%', '50%'],
  4513. point: {
  4514. events: {
  4515. click: function (e) { //点击事件
  4516. that.showChartLTipDouble(e.point.name)
  4517. },
  4518. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  4519. //console.log(e)
  4520. chartData.forEach((item, index) => {
  4521. item.sliced = false
  4522. item.selected = false
  4523. })
  4524. chartData[e.target.index].sliced = true
  4525. chartData[e.target.index].selected = true
  4526. chart.update({
  4527. series: [{
  4528. type: 'pie',
  4529. name: '占比',
  4530. point: {
  4531. events: {
  4532. click: function (e) {
  4533. that.showChartLTipDouble(e.point.name)
  4534. }
  4535. }
  4536. },
  4537. data: chartData
  4538. }]
  4539. })
  4540. timer && clearInterval(timer);
  4541. },
  4542. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  4543. var points = chart.series[0].points;
  4544. var len = points.length;
  4545. timer && clearInterval(timer);
  4546. timer = setInterval(function () {
  4547. autoTooltip(points[i]);
  4548. chartData.forEach((item, index) => {
  4549. item.sliced = false
  4550. item.selected = false
  4551. if (index == i) {
  4552. item.sliced = true
  4553. item.selected = true
  4554. }
  4555. })
  4556. chart.update({
  4557. series: [{
  4558. type: 'pie',
  4559. name: '占比',
  4560. point: {
  4561. events: {
  4562. click: function (e) {
  4563. that.showChartLTipDouble(e.point.name)
  4564. }
  4565. }
  4566. },
  4567. data: chartData
  4568. }]
  4569. })
  4570. i++;
  4571. if (i === len) {
  4572. i = 0;
  4573. chartData.forEach((item, index) => {
  4574. item.sliced = false
  4575. item.selected = false
  4576. })
  4577. chart.update({
  4578. series: [{
  4579. type: 'pie',
  4580. name: '占比',
  4581. point: {
  4582. events: {
  4583. click: function (e) {
  4584. that.showChartLTipDouble(e.point.name)
  4585. }
  4586. }
  4587. },
  4588. data: chartData
  4589. }]
  4590. })
  4591. }
  4592. }, 2000);
  4593. }
  4594. }
  4595. },
  4596. data: chartData
  4597. }]
  4598. });
  4599. function autoTooltip (point) {
  4600. chart.tooltip.refresh(point);
  4601. }
  4602. },
  4603. initProjectList () {
  4604. let dataList = []
  4605. projectList.map(item => {
  4606. dataList.push([item.office, item.name, item.value + '亿'])
  4607. })
  4608. this.storageRecordConfig2 = {
  4609. header: ['企业集团', '项目名称', '投资金额'],
  4610. headerBGC: '#05507b33',
  4611. oddRowBGC: '#05507b33',
  4612. evenRowBGC: '',
  4613. headerHeight: '40',
  4614. rowNum: 6,
  4615. columnWidth: [100, 450, 100],
  4616. align: ['center', 'center', 'center'],
  4617. data: dataList,
  4618. }
  4619. },
  4620. // 大屏三
  4621. initChartR1 () {
  4622. let that = this
  4623. let myChart = echarts.init(this.$refs['echartR1'])
  4624. myChart.on('showTip', (params) => {
  4625. // 如果是7或者15并且满足防抖则切换
  4626. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd) {
  4627. that.echartR1Fd = false
  4628. setTimeout(() => {
  4629. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  4630. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  4631. myChart.setOption(option);
  4632. // 防止勿刷新做的防抖
  4633. setTimeout(() => {
  4634. that.echartR1Fd = true
  4635. }, 2000)
  4636. }, 1900);
  4637. // 如果是17表示到了最后一个,那么重新来一遍
  4638. } else if (params.dataIndex == 17 && that.echartR1Fd) {
  4639. that.echartR1Fd = false
  4640. setTimeout(() => {
  4641. option.dataZoom[0].endValue = 0
  4642. option.dataZoom[0].startValue = 5
  4643. myChart.setOption(option);
  4644. // 防止勿刷新做的防抖
  4645. setTimeout(() => {
  4646. that.echartR1Fd = true
  4647. }, 2000)
  4648. }, 1900)
  4649. }
  4650. })
  4651. let option = {
  4652. tooltip: {
  4653. formatter: data => {
  4654. 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}亿`
  4655. },
  4656. textStyle: {
  4657. color: '#FFF', // 文字的颜色
  4658. fontSize: '20', // 文字字体大小
  4659. },
  4660. trigger: 'axis',
  4661. axisPointer: {
  4662. type: 'cross',
  4663. },
  4664. },
  4665. dataZoom: [
  4666. {
  4667. // start: 9,//默认为@
  4668. // end: 100,//黑认认为1@0
  4669. type: "slider",
  4670. show: false,
  4671. // xAxisIndex: [0]
  4672. handlesize: 0,//滑动条的 左右2个滑动条的大小
  4673. startValue: 5,// 初始显示值
  4674. endValue: 0,// 结束显示值
  4675. height: 10,//组件高度
  4676. left: "5%",
  4677. right: "4%",//右边的距离
  4678. bottom: "25%",//底边的距离
  4679. borderColor: "#939",
  4680. fillerColor: "#269cdb",
  4681. borderRadius: 5,
  4682. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  4683. showDataShadow: false,//是否显示数据阴影
  4684. showDetail: false,//即拖拽时候是否显示详细数值信息
  4685. truerealtime: true,//是否实时更新
  4686. filterMode: "filter"
  4687. }, {
  4688. type: 'inside',
  4689. show: true,
  4690. start: 1,
  4691. end: 100,
  4692. zoomOnMouseWheel: false, //滚轮是否触发缩放
  4693. moveOnMouseMove: false, //鼠标滚轮触发滚动
  4694. }
  4695. ],
  4696. grid: {
  4697. top: '10%',
  4698. right: '3%',
  4699. left: '5%',
  4700. bottom: '5%',
  4701. },
  4702. legend: {
  4703. data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
  4704. x: 'center',
  4705. y: '20px',
  4706. textStyle: {
  4707. color: '#fff',
  4708. fontSize: "20",
  4709. },
  4710. },
  4711. xAxis: {
  4712. data: echart1.map(item => item.name),
  4713. axisLine: {
  4714. show: true, //隐藏X轴轴线
  4715. lineStyle: {
  4716. color: '#005094',
  4717. width: 1,
  4718. },
  4719. },
  4720. axisTick: {
  4721. show: false, //隐藏X轴刻度
  4722. },
  4723. axisLabel: {
  4724. show: true,
  4725. // rotate: 40,
  4726. textStyle: {
  4727. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  4728. fontSize: "15",
  4729. },
  4730. },
  4731. },
  4732. yAxis: [
  4733. {
  4734. type: 'value',
  4735. name: '亿元',
  4736. nameTextStyle: {
  4737. color: 'rgba(255,255,255,0.6)',
  4738. },
  4739. splitLine: {
  4740. show: true,
  4741. lineStyle: {
  4742. color: '#68b4dd66',
  4743. type: 'dashed',
  4744. },
  4745. },
  4746. axisLine: {
  4747. show: true,
  4748. lineStyle: {
  4749. color: '#3D7495',
  4750. },
  4751. },
  4752. axisLabel: {
  4753. show: true,
  4754. textStyle: {
  4755. color: '#fff',
  4756. fontSize: "15",
  4757. },
  4758. },
  4759. nameTextStyle: {
  4760. color: '#fff',
  4761. fontSize: 15,
  4762. },
  4763. },
  4764. ],
  4765. series: [
  4766. {
  4767. name: '预算额',
  4768. type: 'bar',
  4769. barWidth: 10,
  4770. itemStyle: {
  4771. normal: {
  4772. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4773. {
  4774. offset: 0,
  4775. color: '#71D5FF',
  4776. },
  4777. {
  4778. offset: 1,
  4779. color: '#082550',
  4780. },
  4781. ]),
  4782. },
  4783. },
  4784. data: echart1.map(item => item.value),
  4785. },
  4786. {
  4787. name: '已签合同额',
  4788. type: 'bar',
  4789. barWidth: 10,
  4790. itemStyle: {
  4791. normal: {
  4792. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4793. {
  4794. offset: 0,
  4795. color: '#4D6FF6',
  4796. },
  4797. {
  4798. offset: 1,
  4799. color: '#082550',
  4800. },
  4801. ]),
  4802. },
  4803. },
  4804. data: echart1.map(item => item.value2),
  4805. },
  4806. {
  4807. name: '产值认定额',
  4808. type: 'bar',
  4809. barWidth: 10,
  4810. itemStyle: {
  4811. normal: {
  4812. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4813. {
  4814. offset: 0,
  4815. color: '#877CFC',
  4816. },
  4817. {
  4818. offset: 1,
  4819. color: '#082550',
  4820. },
  4821. ]),
  4822. },
  4823. },
  4824. data: echart1.map(item => item.value),
  4825. },
  4826. {
  4827. name: '结算额',
  4828. type: 'bar',
  4829. barWidth: 10,
  4830. itemStyle: {
  4831. normal: {
  4832. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4833. {
  4834. offset: 0,
  4835. color: '#52BF80',
  4836. },
  4837. {
  4838. offset: 1,
  4839. color: '#082550',
  4840. },
  4841. ]),
  4842. },
  4843. },
  4844. data: echart1.map(item => item.value2),
  4845. },
  4846. {
  4847. name: '付款额',
  4848. type: 'bar',
  4849. barWidth: 10,
  4850. itemStyle: {
  4851. normal: {
  4852. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  4853. {
  4854. offset: 0,
  4855. color: '#CADD62',
  4856. },
  4857. {
  4858. offset: 1,
  4859. color: '#082550',
  4860. },
  4861. ]),
  4862. },
  4863. },
  4864. data: echart1.map(item => item.value),
  4865. },
  4866. ],
  4867. }
  4868. myChart.setOption(option)
  4869. tools.loopShowTooltip(myChart, option, {
  4870. interval: 2000,
  4871. loopSeries: true,
  4872. })
  4873. },
  4874. initChartR2 () {
  4875. let that = this
  4876. const itemStyle = {
  4877. // opacity: 0.8,
  4878. shadowBlur: 10,
  4879. shadowOffsetX: 0,
  4880. shadowOffsetY: 0,
  4881. shadowColor: 'rgba(0,0,0,0.3)'
  4882. };
  4883. let myChart = echarts.init(this.$refs['echartR2'])
  4884. myChart.on('showTip', (params) => {
  4885. // 如果是7或者15并且满足防抖则切换
  4886. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd) {
  4887. that.echartR2Fd = false
  4888. setTimeout(() => {
  4889. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  4890. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  4891. myChart.setOption(option);
  4892. // 防止勿刷新做的防抖
  4893. setTimeout(() => {
  4894. that.echartR2Fd = true
  4895. }, 2000)
  4896. }, 1900);
  4897. // 如果是17表示到了最后一个,那么重新来一遍
  4898. } else if (params.dataIndex == 17 && that.echartR2Fd) {
  4899. that.echartR2Fd = false
  4900. setTimeout(() => {
  4901. option.dataZoom[0].endValue = 0
  4902. option.dataZoom[0].startValue = 5
  4903. myChart.setOption(option);
  4904. // 防止勿刷新做的防抖
  4905. setTimeout(() => {
  4906. that.echartR2Fd = true
  4907. }, 2000)
  4908. }, 1900)
  4909. }
  4910. })
  4911. let option = {
  4912. color: ['#80F1BE', '#fec42c', '#dd4444'],
  4913. title: {
  4914. textStyle: {
  4915. color: '#69C0FF',
  4916. fontSize: 16,
  4917. fontWeight: 500
  4918. },
  4919. top: '10',
  4920. left: '10'
  4921. },
  4922. dataZoom: [
  4923. {
  4924. // start: 9,//默认为@
  4925. // end: 100,//黑认认为1@0
  4926. type: "slider",
  4927. show: false,
  4928. // xAxisIndex: [0]
  4929. handlesize: 0,//滑动条的 左右2个滑动条的大小
  4930. startValue: 5,// 初始显示值
  4931. endValue: 0,// 结束显示值
  4932. height: 10,//组件高度
  4933. left: "5%",
  4934. right: "4%",//右边的距离
  4935. bottom: "25%",//底边的距离
  4936. borderColor: "#939",
  4937. fillerColor: "#269cdb",
  4938. borderRadius: 5,
  4939. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  4940. showDataShadow: false,//是否显示数据阴影
  4941. showDetail: false,//即拖拽时候是否显示详细数值信息
  4942. truerealtime: true,//是否实时更新
  4943. filterMode: "filter"
  4944. }, {
  4945. type: 'inside',
  4946. show: true,
  4947. start: 1,
  4948. end: 100,
  4949. zoomOnMouseWheel: false, //滚轮是否触发缩放
  4950. moveOnMouseMove: false, //鼠标滚轮触发滚动
  4951. }
  4952. ],
  4953. legend: {
  4954. top: 10,
  4955. data: ['正偏差', '容差', '负偏差'],
  4956. textStyle: {
  4957. fontSize: 20,
  4958. color: '#fff'
  4959. }
  4960. },
  4961. textStyle: {
  4962. color: '#fff',
  4963. },
  4964. tooltip: {
  4965. show: true,
  4966. trigger: "axis",
  4967. textStyle: {
  4968. color: '#FFF', // 文字的颜色
  4969. fontSize: '20', // 文字字体大小
  4970. },
  4971. formatter: data => {
  4972. 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]}亿`
  4973. },
  4974. axisPointer: {
  4975. type: 'cross',
  4976. },
  4977. // axisPointer: {
  4978. // lineStyle: {
  4979. // type: 'dashed',
  4980. // width: 2,
  4981. // color: 'rgba(255,255,255,0.6)'
  4982. // },
  4983. // animation: true
  4984. // }
  4985. },
  4986. grid: {
  4987. top: '10%',
  4988. right: '4%',
  4989. left: '5%',
  4990. bottom: '5%',
  4991. },
  4992. yAxis: {
  4993. name: '亿元',
  4994. splitLine: {
  4995. show: true,
  4996. lineStyle: {
  4997. color: '#68b4dd66',
  4998. type: 'dashed',
  4999. },
  5000. },
  5001. axisLine: {
  5002. show: false
  5003. },
  5004. axisLabel: {
  5005. show: true,
  5006. formatter: '{value}',
  5007. textStyle: {
  5008. color:'#fff',
  5009. fontSize:'15'
  5010. },
  5011. },
  5012. nameTextStyle: {
  5013. color: '#fff',
  5014. fontSize: 15,
  5015. },
  5016. },
  5017. xAxis: {
  5018. data: echart2[0].map(item => item[0]),
  5019. axisLine: {
  5020. show: true, //隐藏X轴轴线
  5021. lineStyle: {
  5022. color: '#005094',
  5023. width: 1,
  5024. },
  5025. },
  5026. splitLine: {
  5027. show: true,
  5028. lineStyle: {
  5029. color: '#68b4dd66',
  5030. type: 'dashed',
  5031. },
  5032. },
  5033. axisTick: {
  5034. show: false, //隐藏X轴刻度
  5035. },
  5036. axisLabel: {
  5037. show: true,
  5038. // rotate: 40,
  5039. padding: [0, 0, 0, 0],
  5040. textStyle: {
  5041. color: '#fff', //X轴文字颜色
  5042. fontSize: 15,
  5043. },
  5044. },
  5045. },
  5046. series: [
  5047. {
  5048. name: '正偏差',
  5049. type: 'scatter',
  5050. itemStyle: itemStyle,
  5051. data: echart2[0],
  5052. symbolSize: function (data) {
  5053. return Math.sqrt(data[1]) * 9;
  5054. },
  5055. },
  5056. {
  5057. name: '容差',
  5058. type: 'scatter',
  5059. itemStyle: itemStyle,
  5060. data: echart2[1],
  5061. symbolSize: function (data) {
  5062. return Math.sqrt(data[1]) * 8;
  5063. },
  5064. },
  5065. {
  5066. name: '负偏差',
  5067. type: 'scatter',
  5068. itemStyle: itemStyle,
  5069. data: echart2[2],
  5070. symbolSize: function (data) {
  5071. return Math.sqrt(data[1]) * 7;
  5072. },
  5073. }
  5074. ]
  5075. }
  5076. myChart.setOption(option)
  5077. tools.loopShowTooltip(myChart, option, {
  5078. interval: 2000,
  5079. loopSeries: true,
  5080. })
  5081. },
  5082. initChartR3 () {
  5083. let that = this
  5084. let myChart = echarts.init(this.$refs['echartR3'])
  5085. myChart.on('showTip', (params) => {
  5086. // 如果是7或者15并且满足防抖则切换
  5087. if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR3Fd) {
  5088. that.echartR3Fd = false
  5089. setTimeout(() => {
  5090. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  5091. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  5092. myChart.setOption(option);
  5093. // 防止勿刷新做的防抖
  5094. setTimeout(() => {
  5095. that.echartR3Fd = true
  5096. }, 2000)
  5097. }, 1900);
  5098. // 如果是17表示到了最后一个,那么重新来一遍
  5099. } else if (params.dataIndex == 17 && that.echartR3Fd) {
  5100. that.echartR3Fd = false
  5101. setTimeout(() => {
  5102. option.dataZoom[0].endValue = 0
  5103. option.dataZoom[0].startValue = 5
  5104. myChart.setOption(option);
  5105. // 防止勿刷新做的防抖
  5106. setTimeout(() => {
  5107. that.echartR3Fd = true
  5108. }, 2000)
  5109. }, 1900)
  5110. }
  5111. })
  5112. let option = {
  5113. tooltip: {
  5114. formatter: data => {
  5115. 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}亿`
  5116. },
  5117. trigger: 'axis',
  5118. axisPointer: {
  5119. type: 'cross',
  5120. },
  5121. position: (params) => {
  5122. return [params[0] + 10, 60]
  5123. },
  5124. },
  5125. dataZoom: [
  5126. {
  5127. // start: 9,//默认为@
  5128. // end: 100,//黑认认为1@0
  5129. type: "slider",
  5130. show: false,
  5131. // xAxisIndex: [0]
  5132. handlesize: 0,//滑动条的 左右2个滑动条的大小
  5133. startValue: 5,// 初始显示值
  5134. endValue: 0,// 结束显示值
  5135. height: 10,//组件高度
  5136. left: "5%",
  5137. right: "4%",//右边的距离
  5138. bottom: "25%",//底边的距离
  5139. borderColor: "#939",
  5140. fillerColor: "#269cdb",
  5141. borderRadius: 5,
  5142. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  5143. showDataShadow: false,//是否显示数据阴影
  5144. showDetail: false,//即拖拽时候是否显示详细数值信息
  5145. truerealtime: true,//是否实时更新
  5146. filterMode: "filter"
  5147. }, {
  5148. type: 'inside',
  5149. show: true,
  5150. start: 1,
  5151. end: 100,
  5152. zoomOnMouseWheel: false, //滚轮是否触发缩放
  5153. moveOnMouseMove: false, //鼠标滚轮触发滚动
  5154. }
  5155. ],
  5156. grid: {
  5157. top: '25%',
  5158. right: '3%',
  5159. left: '10%',
  5160. bottom: '15%',
  5161. },
  5162. legend: {
  5163. data: ["高风险", "中风险", '低风险'],
  5164. x: 'center',
  5165. y: '15px',
  5166. textStyle: {
  5167. // color: 'rgba(250,250,250,0.6)',
  5168. color: '#fff',
  5169. fontSize: "20",
  5170. },
  5171. },
  5172. xAxis: {
  5173. data: echart1.map(item => item.name),
  5174. axisLine: {
  5175. show: true, //隐藏X轴轴线
  5176. lineStyle: {
  5177. color: '#005094',
  5178. width: 1,
  5179. },
  5180. },
  5181. axisTick: {
  5182. show: false, //隐藏X轴刻度
  5183. },
  5184. axisLabel: {
  5185. show: true,
  5186. rotate: 40,
  5187. textStyle: {
  5188. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  5189. fontSize:'15'
  5190. },
  5191. },
  5192. },
  5193. yAxis: [
  5194. {
  5195. type: 'value',
  5196. name: '亿元',
  5197. nameTextStyle: {
  5198. color: 'rgba(255,255,255,0.6)',
  5199. },
  5200. splitLine: {
  5201. show: true,
  5202. lineStyle: {
  5203. color: '#68b4dd66',
  5204. type: 'dashed',
  5205. },
  5206. },
  5207. axisLine: {
  5208. show: true,
  5209. lineStyle: {
  5210. color: '#3D7495',
  5211. },
  5212. },
  5213. axisLabel: {
  5214. show: true,
  5215. textStyle: {
  5216. color: '#fff',
  5217. fontSize:'15'
  5218. },
  5219. },
  5220. nameTextStyle: {
  5221. color: '#fff',
  5222. fontSize: 15,
  5223. },
  5224. },
  5225. ],
  5226. series: [
  5227. {
  5228. name: '高风险',
  5229. type: 'bar',
  5230. stack: 'Ad',
  5231. barWidth: 10,
  5232. itemStyle: {
  5233. normal: {
  5234. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5235. {
  5236. offset: 0,
  5237. color: '#CADD62',
  5238. },
  5239. {
  5240. offset: 1,
  5241. color: '#082550',
  5242. },
  5243. ]),
  5244. },
  5245. },
  5246. data: echart3.map(item => item.value),
  5247. },
  5248. {
  5249. name: '中风险',
  5250. type: 'bar',
  5251. stack: 'Ad',
  5252. barWidth: 10,
  5253. itemStyle: {
  5254. normal: {
  5255. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5256. {
  5257. offset: 0,
  5258. color: '#4D6FF6',
  5259. },
  5260. {
  5261. offset: 1,
  5262. color: '#082550',
  5263. },
  5264. ]),
  5265. },
  5266. },
  5267. data: echart3.map(item => item.value2),
  5268. },
  5269. {
  5270. name: '低风险',
  5271. type: 'bar',
  5272. stack: 'Ad',
  5273. barWidth: 10,
  5274. itemStyle: {
  5275. normal: {
  5276. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5277. {
  5278. offset: 0,
  5279. color: '#52BF80',
  5280. },
  5281. {
  5282. offset: 1,
  5283. color: '#082550',
  5284. },
  5285. ]),
  5286. },
  5287. },
  5288. data: echart3.map(item => item.value3),
  5289. },
  5290. ],
  5291. }
  5292. myChart.setOption(option)
  5293. tools.loopShowTooltip(myChart, option, {
  5294. interval: 8000,
  5295. loopSeries: true,
  5296. })
  5297. },
  5298. initChartR4 () {
  5299. let myChart = echarts.init(this.$refs['echartR4'])
  5300. option = {
  5301. title: {
  5302. text: ''
  5303. },
  5304. // legend: {
  5305. // data: ['安全风险', '付款风险', '合同风险', '结算风险', '进度风险', '质量风险'],
  5306. // textStyle: {
  5307. // color: '#9DB9EB',
  5308. // },
  5309. // top: 'center',
  5310. // right:'50',
  5311. // orient: 'vertical', // vertical 竖着
  5312. // },
  5313. radar: {
  5314. // shape: 'circle',
  5315. center: ['50%', '50%'],
  5316. radius: 135,
  5317. indicator: [
  5318. { name: '安全风险', max: 100000 },
  5319. { name: '付款风险', max: 100000 },
  5320. { name: '合同风险', max: 100000 },
  5321. { name: '结算风险', max: 100000 },
  5322. { name: '进度风险', max: 100000 },
  5323. { name: '质量风险', max: 100000 },
  5324. ],
  5325. axisLine: { // 设置雷达图中间射线的颜色
  5326. lineStyle: {
  5327. color: '#887d33',
  5328. },
  5329. },
  5330. splitLine: { //网格颜色设置
  5331. show: true,
  5332. lineStyle: {
  5333. width: 1,
  5334. color: ['#871b1a', '#638f41', '#d29e35', '#b6802b']
  5335. // color: '#000',
  5336. // color:(color)=>{
  5337. // console.log(color,'??????')
  5338. // }
  5339. },
  5340. },
  5341. name: { //修改indicator文字的颜色
  5342. textStyle: {
  5343. color: "#fff",
  5344. fontSize: '20'
  5345. }
  5346. },
  5347. splitNumber: 4, //有几个圈
  5348. splitArea: { //设置图表颜色,show的值为true
  5349. show: true,
  5350. areaStyle: {
  5351. // color:"#c1ddf8", //一般设置方式
  5352. //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
  5353. //a ,b,c,d值可为0,1 a:1表示arr中的颜色右到左;c:1 arr中的颜色左到右
  5354. //b:1表示arr中的颜色下到上;d:1表示arr中的颜色上到下
  5355. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  5356. // { offset: 0, color: '#887D33' }, // 0% 处的颜色
  5357. // { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色
  5358. // { offset: 1, color: '#430705' }// 100% 处的颜色
  5359. // ], false)
  5360. color: ['#638f41', '#887d33', '#7d4216', '#430705'],
  5361. }
  5362. }
  5363. },
  5364. series: [
  5365. {
  5366. name: '',
  5367. type: 'radar',
  5368. symbol: 'circle', // 单个数值点的样式,还可以取值'rect','angle'等
  5369. symbolSize: 0, // 数值点的大小
  5370. data: [
  5371. {
  5372. value: echart4[0],
  5373. name: '安全风险',
  5374. itemStyle: { //该数值区域样式设置
  5375. normal: {
  5376. color: 'rgb(44,198,255,0.8)', //背景颜色,还需设置areaStyle
  5377. lineStyle: {
  5378. color: 'rgb(44,198,255,0.8)', //边框颜色
  5379. },
  5380. },
  5381. },
  5382. label: { //显示value中具体的数值
  5383. normal: {
  5384. show: false,
  5385. textStyle: { //更改数值样式
  5386. color: '#43EDE3'
  5387. }
  5388. },
  5389. },
  5390. areaStyle: { //设置区域背景颜色透明度
  5391. normal: {
  5392. width: 1,
  5393. opacity: 0.8,
  5394. },
  5395. },
  5396. }
  5397. ]
  5398. }
  5399. ]
  5400. };
  5401. // tools.loopShowTooltip(myChart, option, {
  5402. // interval: 2000,
  5403. // loopSeries: true,
  5404. // });
  5405. myChart.setOption(option)
  5406. },
  5407. initChartR5 () {
  5408. let myChart = echarts.init(this.$refs['echartR5'])
  5409. let option = {
  5410. tooltip: {
  5411. formatter: data => {
  5412. 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}亿`
  5413. },
  5414. trigger: 'axis',
  5415. axisPointer: {
  5416. type: 'cross',
  5417. }
  5418. },
  5419. grid: {
  5420. top: '15%',
  5421. right: '3%',
  5422. left: '5%',
  5423. bottom: '35',
  5424. },
  5425. legend: {
  5426. data: ["预算额", "合同额", "结算额", "支付额"],
  5427. x: 'center',
  5428. y: '10px',
  5429. textStyle: {
  5430. // color: 'rgba(250,250,250,0.6)',
  5431. color: '#fff',
  5432. fontSize: "20",
  5433. },
  5434. },
  5435. xAxis: {
  5436. data: ['设备费', '设计费', '施工费', '材料费'],
  5437. axisLine: {
  5438. show: true, //隐藏X轴轴线
  5439. lineStyle: {
  5440. color: '#005094',
  5441. width: 1,
  5442. },
  5443. },
  5444. axisTick: {
  5445. show: false, //隐藏X轴刻度
  5446. },
  5447. axisLabel: {
  5448. show: true,
  5449. // rotate: 40,
  5450. textStyle: {
  5451. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  5452. fontSize: '15', // 文字字体大小
  5453. },
  5454. },
  5455. },
  5456. yAxis: [
  5457. {
  5458. type: 'value',
  5459. name: '亿元',
  5460. nameTextStyle: {
  5461. color: 'rgba(255,255,255,0.6)',
  5462. },
  5463. splitLine: {
  5464. show: true,
  5465. lineStyle: {
  5466. color: '#68b4dd66',
  5467. type: 'dashed',
  5468. },
  5469. },
  5470. axisLine: {
  5471. show: true,
  5472. lineStyle: {
  5473. color: '#3D7495',
  5474. },
  5475. },
  5476. axisLabel: {
  5477. show: true,
  5478. textStyle: {
  5479. color: '#fff',
  5480. fontSize: '15', // 文字字体大小
  5481. },
  5482. },
  5483. nameTextStyle: {
  5484. color: '#fff',
  5485. fontSize: 15,
  5486. },
  5487. },
  5488. ],
  5489. series: [
  5490. {
  5491. name: '预算额',
  5492. type: 'bar',
  5493. barWidth: 10,
  5494. itemStyle: {
  5495. normal: {
  5496. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5497. {
  5498. offset: 0,
  5499. color: '#71D5FF',
  5500. },
  5501. {
  5502. offset: 1,
  5503. color: '#082550',
  5504. },
  5505. ]),
  5506. },
  5507. },
  5508. data: echart5.map(item => item.value),
  5509. },
  5510. {
  5511. name: '合同额',
  5512. type: 'bar',
  5513. barWidth: 10,
  5514. itemStyle: {
  5515. normal: {
  5516. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5517. {
  5518. offset: 0,
  5519. color: '#4D6FF6',
  5520. },
  5521. {
  5522. offset: 1,
  5523. color: '#082550',
  5524. },
  5525. ]),
  5526. },
  5527. },
  5528. data: echart5.map(item => item.value2),
  5529. },
  5530. {
  5531. name: '结算额',
  5532. type: 'bar',
  5533. barWidth: 10,
  5534. itemStyle: {
  5535. normal: {
  5536. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5537. {
  5538. offset: 0,
  5539. color: '#877CFC',
  5540. },
  5541. {
  5542. offset: 1,
  5543. color: '#082550',
  5544. },
  5545. ]),
  5546. },
  5547. },
  5548. data: echart5.map(item => item.value3),
  5549. },
  5550. {
  5551. name: '支付额',
  5552. type: 'bar',
  5553. barWidth: 10,
  5554. itemStyle: {
  5555. normal: {
  5556. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  5557. {
  5558. offset: 0,
  5559. color: '#52BF80',
  5560. },
  5561. {
  5562. offset: 1,
  5563. color: '#082550',
  5564. },
  5565. ]),
  5566. },
  5567. },
  5568. data: echart5.map(item => item.value4),
  5569. },
  5570. ],
  5571. }
  5572. myChart.setOption(option)
  5573. tools.loopShowTooltip(myChart, option, {
  5574. interval: 2000,
  5575. loopSeries: true,
  5576. })
  5577. },
  5578. },
  5579. })