| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908 |
- let app = new Vue({
- el: "#app",
- data () {
- return {
- count: 0, //重点项目两线指标轮到哪个
- list: [], //重点项目两线指标数组
- countType: 0, //重点项目两线指标数组
- mapShow: false, // false为中国地图 true为山西地图
- leftEcharts1: "",
- leftEcharts2: "",
- leftEcharts3: "",
- leftEcharts4: "",
- leftEcharts5: "",
- leftEcharts6: "",
- leftEcharts7: "",
- leftEcharts8: "",
- leftEcharts9: "",
- leftEcharts10: "",
- leftEcharts11: "",
- leftEcharts12: '',
- leftEcharts13: '',
- leftEcharts14: '',
- leftEcharts15: '',
- echartR2Fd: true, // 投后进度成本偏差防抖
- leftEcharts16: '', // 中国地图背景地球
- rightEcharts1: '', // 投后进度成本偏差
- shanxiMap: "", // 山西地图
- chinaMap: '', // 中国地图
- industryProportion: 1, // 主辅业占比轮播
- industryLayout: 0, //产业布局分析
- time1: "", // 4秒定时器
- time2: "", // 针对投前产业布局分析的定时器
- projectNum: 0, // 项目阶段分析指示器
- projecList: [ //项目阶段分析内容距离
- [
- { name: '特别监管', value: '1230', value2: '1036' },
- { name: '备案', value: '1230', value2: '1036' },
- { name: '项目储备', distance: '250px' }
- ],
- [
- { name: '特别监管', value: '1230', value2: '1036' },
- { name: '备案', value: '1230', value2: '1036' },
- { name: '项目储备', distance: '370px' }
- ],
- [
- { name: '特别监管', value: '1230', value2: '1036' },
- { name: '备案', value: '1230', value2: '1036' },
- { name: '项目储备', distance: '490px' }
- ],
- [
- { name: '特别监管', value: '1230', value2: '1036' },
- { name: '备案', value: '1230', value2: '1036' },
- { name: '项目储备', distance: '610px' }
- ],
- [
- { name: '特别监管', value: '1230', value2: '1036' },
- { name: '备案', value: '1230', value2: '1036' },
- { name: '项目储备', distance: '350px' }
- ],
- [
- { name: '特别监管', value: '1230', value2: '1036' },
- { name: '备案', value: '1230', value2: '1036' },
- { name: '项目储备', distance: '470px' }
- ],
- [
- { name: '特别监管', value: '1230', value2: '1036' },
- { name: '备案', value: '1230', value2: '1036' },
- { name: '项目储备', distance: '590px' }
- ],
- [
- { name: '特别监管', value: '1230', value2: '1036' },
- { name: '备案', value: '1230', value2: '1036' },
- { name: '项目储备', distance: '710px' }
- ],
- ],
- storageRecordConfig: {
- waitTime: "2000",
- hoverPause: true,
- header: ["企业集团", "项目名 ", "投资总额"],
- headerHeight: 80,
- headerBGC: '#69C0FF20',
- oddRowBGC: '#011e4800',
- evenRowBGC: '#69C0FF20',
- // oddRowBGC: '#05507b33',
- rowNum: 6,
- columnWidth: [150, 450, 150],
- align: ["center", "center", "center"],
- data: [
- ["国际能源", "娄烦县120MW智慧光伏发电项目+10%储能", "6.78亿元"],
- ["国际能源", "平朔矿区150MW农光储氢一体化项目", "7.84亿元"],
- ["汾酒集团", "汾酒2030技改原酒产储能扩建项目(一期)", "91.02亿元"],
- [
- "大地控股",
- "山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目",
- "8.67亿元",
- ],
- ["潞安化工", "分布式光伏发电项目", "2.01亿元"],
- ["太重集团", "设立太重(大同)新能源产业投资公司", "0.30亿元"],
- [
- "大地控股",
- "山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目",
- "3.60亿元",
- ],
- [
- "大地控股",
- "山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目",
- "3.11亿元",
- ],
- ["汾酒集团", "保健酒园区新增原酒产能项目", "4.98亿元"],
- ["汾酒集团", "白玉酒厂改扩建项目", "4.96亿元"],
- ["华阳新材", "5GW高效光伏组件制造项目", "4.82亿元"],
- ["华新燃气", "吉县—延长输气管道项目(一期工程)", "3.54亿元"],
- ["太重集团", "建设液压挖掘机配套油缸项目", "2.60亿元"],
- [
- "华远陆港",
- "物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目",
- "6.60亿元",
- ],
- ["太重集团", "设立昔阳县晶能新能源有限公司", "0.50亿元"],
- ["山西建投", "设立山西低碳环保产业集团有限公司", "30.00亿元"],
- [
- "山西建投",
- "设立山西省太忻经济一体化发展投资集团有限公司",
- "30.00亿元",
- ],
- ["华新燃气", "设立山西华新液化天然气集团有限公司", "3.00亿元"],
- ["交控集团", "设立山西交控新能源发展有限公司", "3.00亿元"],
- ],
- },
- storageRecordConfig2: {
- header: ['企业集团', '项目名称', '投资金额'],
- headerBGC: '#69C0FF20',
- oddRowBGC: '#011e4800',
- evenRowBGC: '#69C0FF20',
- headerHeight: '80',
- rowNum: 6,
- // columnWidth: [250],
- align: ['center', 'center', 'center'],
- data: [
- ["战略性新兴产业", "新材料", "20,340.00"],
- ["战略性新兴产业", "新材料", "20,340.00"],
- ["战略性新兴产业", "新材料", "20,340.00"],
- ["战略性新兴产业", "新材料", "20,340.00"],
- ["战略性新兴产业", "新材料", "20,340.00"],
- ["战略性新兴产业", "新材料", "20,340.00"],
- ["战略性新兴产业", "新材料", "20,340.00"],
- ["战略性新兴产业", "新材料", "20,340.00"],
- ["战略性新兴产业", "新材料", "20,340.00"],
- ],
- },
- meansList: [
- {
- label: "初步设计",
- value: "106",
- },
- {
- label: "详细设计",
- value: "103",
- },
- {
- label: "施工",
- value: "62",
- },
- {
- label: "完工",
- value: "35",
- },
- {
- label: "验收",
- value: "42",
- },
- {
- label: "结算",
- value: "33",
- },
- ],
- stockRightList: [
- {
- label: "前期准备",
- value: "66",
- },
- {
- label: "变更登记",
- value: "77",
- },
- ],
- costList: [
- {
- num: 160,
- value: 284,
- status: "正偏差",
- },
- {
- num: 280,
- value: 129,
- status: "容差内",
- },
- {
- num: 103,
- value: 1082,
- status: "负偏差",
- },
- ],
- investData: {
- investList: [
- {
- name: "大地控股",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo15.png",
- },
- {
- name: "云时代",
- yse: "21.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo16.png",
- },
- {
- name: "华舰体育",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo17.png",
- },
- {
- name: "神农科技",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo18.png",
- },
- {
- name: "山西焦煤",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo1.png",
- },
- {
- name: "晋能控股",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo2.png",
- },
- {
- name: "华阳新材",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo3.png",
- },
- {
- name: "潞安化工",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo4.png",
- },
- {
- name: "华新燃气",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo5.png",
- },
- {
- name: "太重集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo6.png",
- },
- {
- name: "国际能源",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo7.png",
- },
- {
- name: "华远陆港",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo8.png",
- },
- {
- name: "水控集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo9.png",
- },
- {
- name: "文旅集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo10.png",
- },
- {
- name: "交控集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo11.png",
- },
- {
- name: "航产集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo12.png",
- },
- {
- name: "山西建投",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo13.png",
- },
- {
- name: "汾酒集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo14.png",
- },
- ],
- },
- riskData: {
- x: [
- { name: "大地控股", value: [14, 13, 6, 15, 13, 4] },
- { name: "云时代", value: [15, 12, 12, 10, 24, 6] },
- { name: "华舰体育", value: [14, 13, 6, 15, 13, 4] },
- { name: "神农科技", value: [14, 13, 6, 15, 13, 4] },
- { name: "山西焦煤", value: [14, 13, 6, 15, 13, 4] },
- { name: "晋能控股", value: [14, 13, 6, 15, 13, 4] },
- { name: "华阳新材", value: [14, 13, 6, 15, 13, 4] },
- { name: "潞安化工", value: [14, 13, 6, 15, 13, 4] },
- { name: "华新燃气", value: [14, 13, 6, 15, 13, 4] },
- { name: "太重集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "国际能源", value: [14, 13, 6, 15, 13, 4] },
- { name: "华远陆港", value: [14, 13, 6, 15, 13, 4] },
- { name: "水控集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "文旅集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "交控集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "航产集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "山西建投", value: [14, 13, 6, 15, 13, 4] },
- { name: "汾酒集团", value: [14, 13, 6, 15, 13, 4] },
- ],
- y1: [
- 120, 110, 200, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
- 20, 220, 123, 345,
- ],
- y2: [
- 120, 110, 210, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
- 20, 220, 123, 345,
- ],
- y3: [
- 120, 110, 230, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
- 20, 220, 123, 345,
- ],
- },
- inner: 0,
- innerDeg: 0,
- timer: null, // 两秒定时器
- witchs: 0,
- topIndex: 0,
- echartR1Fd1: true,
- echartR2Fd2: true,
- r3Index: 0,
- riskData1: {
- x: [
- "大地控股",
- "云时代",
- "华舰体育",
- "神农科技",
- "山西焦煤",
- "晋能控股",
- "华阳新材",
- "潞安化工",
- "华新燃气",
- "太重集团",
- "国际能源",
- "华远陆港",
- "水控集团",
- "文旅集团",
- "交控集团",
- "航产集团",
- "山西建投",
- "汾酒集团",
- ],
- y1: [
- 100, 45, 67, 110, 108, 120, 110, 45, 67, 110, 108, 34, 100, 45, 67,
- 110, 108, 34,
- ],
- y2: [
- 120, 50, 67, 130, 56, 233, 100, 78, 98, 100, 120, 78, 120, 90, 56,
- 120, 110, 78,
- ],
- y3: [
- 130, 76, 67, 120, 89, 111, 87, 123, 56, 65, 45, 98, 230, 78, 99, 130,
- 56, 98,
- ],
- y4: [
- 90, 100, 67, 90, 110, 120, 34, 231, 34, 78, 78, 100, 110, 120, 67, 89,
- 78, 110,
- ],
- y5: [
- 110, 110, 67, 110, 120, 95, 78, 45, 120, 110, 98, 233, 100, 45, 67,
- 98, 98, 34,
- ],
- },
- };
- },
- created () { },
- beforeDestroy () {
- clearInterval(this.timer);
- clearInterval(this.time1);
- clearInterval(this.time2);
- },
- mounted () {
- let that = this
- this.time4s();
- this.timeNs();
- this.filterLpData();
- this.lpRotate();
- setTimeout(() => {
- if (that.mapShow) {
- that.leftEcharts12Fun()
- that.leftEcharts14Fun()
- that.leftEcharts9Fun()
- that.leftEcharts15Fun()
- that.leftEcharts13Fun()
- that.shanxiEchartsFun()
- } else {
- that.chinaEchartsFun()
- that.leftEcharts16Fun() // 中国地图背景地球
- }
- this.leftEcharts1Fun();
- this.leftEcharts2Fun();
- this.leftEcharts3Fun();
- this.leftEcharts4Fun();
- this.leftEcharts5Fun();
- this.leftEcharts6Fun();
- this.leftEcharts7Fun();
- this.leftEcharts8Fun();
- this.leftEcharts10Fun();
- this.leftEcharts11Fun();
- this.rightEcharts1Fun();
- this.initChartR2();
- this.initChartR4();
- });
- },
- methods: {
- // 解决乘法失去精度
- numMulti (num1, num2) {
- var baseNum = 0;
- try {
- baseNum += num1.toString().split(".")[1].length;
- } catch (e) {
- }
- try {
- baseNum += num2.toString().split(".")[1].length;
- } catch (e) {
- }
- return Number(num1.toString().replace(".", "")) * Number(num2.toString().replace(".", "")) / Math.pow(10, baseNum);
- },
- // 解决减法失去精度
- numSub (num1, num2) {
- var baseNum, baseNum1, baseNum2;
- var precision;// 精度
- try {
- baseNum1 = num1.toString().split(".")[1].length;
- } catch (e) {
- baseNum1 = 0;
- }
- try {
- baseNum2 = num2.toString().split(".")[1].length;
- } catch (e) {
- baseNum2 = 0;
- }
- baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
- precision = (baseNum1 >= baseNum2) ? baseNum1 : baseNum2;
- return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
- },
- rightEcharts1Fun () {
- let that = this
- let sumA = 42
- // 所有在100范围外的全部变成0,其他值相应增加/减少sumA
- right5.forEach(item => {
- item.forEach(item2 => {
- if (Number(item2[1]) < 0) {
- item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)))
- } else if (Number(item2[1]) > 0) {
- item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA)
- }
- if (Number(item2[1]) < (-100 - sumA)) {
- item2[1] = that.$set(item2, 1, 0)
- item2[1] = that.$set(item2, 2, 0)
- } else if (Number(item2[1]) > (100 + sumA)) {
- item2[1] = that.$set(item2, 1, 0)
- item2[1] = that.$set(item2, 2, 0)
- }
- })
- })
- const itemStyle = {
- // opacity: 0.8,
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowColor: 'rgba(0,0,0,0.3)'
- };
- that.rightEcharts1 = echarts.init(this.$refs['rightEcharts1'])
- that.rightEcharts1.on('showTip', (params) => {
- // 如果是7或者15并且满足防抖则切换
- if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd) {
- that.echartR2Fd = false
- setTimeout(() => {
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
- that.rightEcharts1.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR2Fd = true
- }, 2000)
- }, 1900);
- // 如果是17表示到了最后一个,那么重新来一遍
- } else if (params.dataIndex == 17 && that.echartR2Fd) {
- that.echartR2Fd = false
- setTimeout(() => {
- option.dataZoom[0].endValue = 0
- option.dataZoom[0].startValue = 5
- that.rightEcharts1.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR2Fd = true
- }, 2000)
- }, 1900)
- }
- })
- let option = {
- color: ['#04635E', '#697143', '#4A3042'],
- dataZoom: [
- {
- // start: 9,//默认为@
- // end: 100,//黑认认为1@0
- type: "slider",
- show: false,
- // xAxisIndex: [0]
- handlesize: 0,//滑动条的 左右2个滑动条的大小
- startValue: 5,// 初始显示值
- endValue: 0,// 结束显示值
- height: 10,//组件高度
- left: "5%",
- right: "4%",//右边的距离
- bottom: "25%",//底边的距离
- borderColor: "#939",
- fillerColor: "#269cdb",
- borderRadius: 5,
- backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
- showDataShadow: false,//是否显示数据阴影
- showDetail: false,//即拖拽时候是否显示详细数值信息
- truerealtime: true,//是否实时更新
- filterMode: "filter"
- }, {
- type: 'inside',
- show: true,
- start: 1,
- end: 100,
- zoomOnMouseWheel: false, //滚轮是否触发缩放
- moveOnMouseMove: false, //鼠标滚轮触发滚动
- }
- ],
- legend: {
- selectedMode: false,
- top: 10,
- data: ['正偏差', '容差', '负偏差'],
- textStyle: {
- fontSize: 20,
- color: '#fff',
- fontFamily: 'Microsoft YaHei'
- }
- },
- textStyle: {
- color: '#fff',
- },
- tooltip: {
- show: true,
- trigger: "axis",
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- borderColor: "rgba(50,50,50,0.7)",
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- },
- formatter: data => {
- return `${data[0].value[0]}<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color}"></span> ${data[0].seriesName}:${that.numFormat(data[0].data[2])}亿<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color}"></span> ${data[1].seriesName}:${that.numFormat(data[1].data[2])}亿<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[2].color}"></span> ${data[2].seriesName}:${that.numFormat(data[2].data[2])}亿`
- },
- axisPointer: {
- // // type: 'cross',',
- },
- },
- grid: {
- top: '10%',
- right: '7%',
- left: '7%',
- bottom: '5%',
- },
- yAxis: {
- min: (-101 - sumA),
- max: (101 + sumA),
- maxInterval: 1,
- splitLine: {
- show: false,
- // interval:,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- show: true,
- // formatter: '{value}',
- formatter (data) {
- if (data == (100 + sumA)) {
- return '100%'
- } else if (data == (-100 - sumA)) {
- return '-100%'
- } else if (data == (-5 - sumA)) {
- return '-5%'
- } else if (data == (5 + sumA)) {
- return '5%'
- }
- },
- textStyle: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- xAxis: {
- data: commonCompany,
- axisLine: {
- show: false, //隐藏X轴轴线
- lineStyle: {
- color: '#005094',
- width: 1,
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- axisTick: {
- show: true, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- // rotate: 40,
- padding: [0, 0, 0, 0],
- textStyle: {
- color: '#fff', //X轴文字颜色
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- },
- series: [
- {
- name: '正偏差',
- type: 'scatter',
- itemStyle: itemStyle,
- data: right5[0],
- symbolSize: function (data) {
- if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
- return 40;
- } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
- return 70;
- } else if (data[2] > 100) {
- return 100;
- }
- },
- markLine: {
- symbol: 'none',
- data: [
- {
- name: '100%',
- yAxis: 100 + sumA,
- lineStyle: {
- // color: '#fff',
- },
- label: {
- show: false,
- formatter: '{b}',
- position: 'right',
- color: '#fff',
- fontSize: 20,
- label: {
- show: false
- }
- },
- },
- {
- name: '5%',
- yAxis: 5 + sumA,
- lineStyle: {
- // color: '#fff',
- },
- label: {
- show: false,
- formatter: '{b}',
- position: 'right',
- color: '#fff',
- fontSize: 20,
- },
- },
- {
- name: '-5%',
- yAxis: -5 - sumA,
- lineStyle: {
- // color: '#fff',
- },
- label: {
- show: false,
- formatter: '{b}',
- position: 'right',
- color: '#fff',
- fontSize: 20,
- },
- },
- {
- name: '100%',
- yAxis: -100 - sumA,
- lineStyle: {
- // color: '#fff',
- },
- label: {
- show: false,
- formatter: '{b}',
- position: 'right',
- color: '#fff',
- fontSize: 20,
- },
- },
- ],
- },
- },
- {
- name: '容差',
- type: 'scatter',
- itemStyle: itemStyle,
- data: right5[1],
- symbolSize: function (data) {
- if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
- return 40;
- } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
- return 70;
- } else if (data[2] > 100) {
- return 100;
- }
- },
- },
- {
- name: '负偏差',
- type: 'scatter',
- itemStyle: itemStyle,
- data: right5[2],
- symbolSize: function (data) {
- if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
- return 40;
- } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
- return 70;
- } else if (data[2] > 100) {
- return 100;
- }
- },
- }
- ]
- }
- that.rightEcharts1.setOption(option)
- tools.loopShowTooltip(that.rightEcharts1, option, {
- interval: 2000,
- loopSeries: true,
- })
- },
- initChartR2 () {
- let that = this;
- that.right1Chart = echarts.init(this.$refs["echartR2"]);
- that.right1Chart.on("showTip", (params) => {
- that.r3Index = params.dataIndex;
- that.initChartR3();
- // 如果是7或者15并且满足防抖则切换
- if (
- (params.dataIndex == 5 || params.dataIndex == 11) &&
- that.echartR1Fd1
- ) {
- that.echartR1Fd1 = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
- that.right1Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR1Fd1 = true;
- }, 2000);
- }, 1900);
- // 如果是17表示到了最后一个,那么重新来一遍
- } else if (params.dataIndex == 17 && that.echartR1Fd1) {
- that.echartR1Fd1 = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = 0;
- option.dataZoom[0].startValue = 5;
- that.right1Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR1Fd1 = true;
- }, 2000);
- }, 1900);
- }
- });
- let option = {
- color: [
- {
- type: "linear",
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#91231F", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#F98784", // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- {
- type: "linear",
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#9F7F00", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#FBE463", // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- {
- type: "linear",
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#07806E", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#79FFEB", // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- ],
- dataZoom: [
- {
- // start: 9,//默认为@
- // end: 100,//黑认认为1@0
- type: "slider",
- show: false,
- // xAxisIndex: [0]
- handlesize: 0, //滑动条的 左右2个滑动条的大小
- startValue: 5, // 初始显示值
- endValue: 0, // 结束显示值
- height: 10, //组件高度
- left: "5%",
- right: "4%", //右边的距离
- bottom: "25%", //底边的距离
- borderColor: "#939",
- fillerColor: "#269cdb",
- borderRadius: 5,
- backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
- showDataShadow: false, //是否显示数据阴影
- showDetail: false, //即拖拽时候是否显示详细数值信息
- truerealtime: true, //是否实时更新
- filterMode: "filter",
- },
- {
- type: "inside",
- show: true,
- start: 1,
- end: 100,
- zoomOnMouseWheel: false, //滚轮是否触发缩放
- moveOnMouseMove: false, //鼠标滚轮触发滚动
- },
- ],
- legend: {
- top: 10,
- right: 10,
- textStyle: {
- fontSize: 20,
- color: "#fff",
- fontFamily: "Microsoft YaHei",
- },
- itemStyle: {
- borderCap: "round",
- },
- },
- tooltip: {
- trigger: "item",
- show: true,
- position: "top",
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- borderColor: "rgba(50,50,50,0.7)",
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- },
- formatter: function (p) {
- return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
- },
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: [
- {
- type: "category",
- data: that.riskData.x.map((item) => item.name),
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(0, 80, 148, .8)",
- },
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#fff",
- rotate: 20,
- fontSize: 22,
- },
- },
- ],
- yAxis: [
- {
- type: "value",
- axisLabel: {
- color: "#fff",
- fontSize: 22,
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: "rgba(104, 180, 221, .2)",
- type: "dashed",
- },
- },
- },
- ],
- series: [
- {
- name: "低风险",
- type: "bar",
- stack: "Ad",
- barWidth: 14,
- emphasis: {
- focus: "series",
- },
- itemStyle: {
- barBorderRadius: [15, 15, 15, 15],
- },
- data: that.riskData.y1,
- },
- {
- name: "中风险",
- type: "bar",
- barWidth: 14,
- stack: "Ad",
- itemStyle: {
- barBorderRadius: [15, 15, 15, 15],
- },
- emphasis: {
- focus: "series",
- },
- data: that.riskData.y2,
- },
- {
- name: "高风险",
- type: "bar",
- barWidth: 14,
- stack: "Ad",
- itemStyle: {
- barBorderRadius: [15, 15, 15, 15],
- },
- emphasis: {
- focus: "series",
- },
- data: that.riskData.y3,
- },
- ],
- };
- that.right1Chart.setOption(option);
- tools.loopShowTooltip(that.right1Chart, option, {
- interval: 2000,
- loopSeries: true,
- });
- },
- initChartR3 () {
- let that = this;
- that.right3Chart = echarts.init(this.$refs["echartR3"]);
- let option = {
- radar: {
- // shape: 'circle',
- splitNumber: 3,
- splitLine: {
- lineStyle: {
- color: ["#DD5955", "#39e1d0", "#2e3d45"],
- },
- },
- splitArea: {
- areaStyle: {
- color: [
- "rgba(88,247,223,0.2)",
- "rgba(255, 224, 54, 0.2)",
- "rgba(221,89,85,0.3)",
- ],
- },
- },
- indicator: [
- { name: "安全风险", max: 25 },
- { name: "付款风险", max: 25 },
- { name: "合同风险", max: 25 },
- { name: "结算风险", max: 25 },
- { name: "进度风险", max: 25 },
- { name: "质量风险", max: 25 },
- ],
- },
- series: [
- {
- name: "风险",
- type: "radar",
- symbol: "circle",
- label: {
- show: true,
- formatter: function (params) {
- return params.value;
- },
- fontSize: 24,
- color: "#68BDFF",
- },
- data: [
- {
- value: that.riskData.x[that.r3Index].value,
- areaStyle: {
- color: "#112b75",
- },
- lineStyle: {
- width: 4,
- color: "#60C1FF",
- },
- label: {
- fontSize: 22,
- },
- },
- ],
- },
- ],
- };
- that.right3Chart.setOption(option);
- },
- initChartR4 () {
- let that = this;
- that.right4Chart = echarts.init(this.$refs["echartR4"]);
- that.right4Chart.on("showTip", (params) => {
- // 如果是7或者15并且满足防抖则切换
- if (
- (params.dataIndex == 5 || params.dataIndex == 11) &&
- that.echartR2Fd2
- ) {
- that.echartR2Fd2 = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
- that.right4Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR2Fd2 = true;
- }, 2000);
- }, 1900);
- // 如果是17表示到了最后一个,那么重新来一遍
- } else if (params.dataIndex == 17 && that.echartR2Fd2) {
- that.echartR2Fd2 = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = 0;
- option.dataZoom[0].startValue = 5;
- that.right4Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR2Fd2 = true;
- }, 2000);
- }, 1900);
- }
- });
- let option = {
- dataZoom: [
- {
- // start: 9,//默认为@
- // end: 100,//黑认认为1@0
- type: "slider",
- show: false,
- // xAxisIndex: [0]
- handlesize: 0, //滑动条的 左右2个滑动条的大小
- startValue: 5, // 初始显示值
- endValue: 0, // 结束显示值
- height: 10, //组件高度
- left: "5%",
- right: "4%", //右边的距离
- bottom: "25%", //底边的距离
- borderColor: "#939",
- fillerColor: "#269cdb",
- borderRadius: 5,
- backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
- showDataShadow: false, //是否显示数据阴影
- showDetail: false, //即拖拽时候是否显示详细数值信息
- truerealtime: true, //是否实时更新
- filterMode: "filter",
- },
- {
- type: "inside",
- show: true,
- start: 1,
- end: 100,
- zoomOnMouseWheel: false, //滚轮是否触发缩放
- moveOnMouseMove: false, //鼠标滚轮触发滚动
- },
- ],
- title: {
- text: "企业后评价执行情况",
- left: "center",
- textStyle: {
- color: "#fff",
- fontSize: 32,
- },
- },
- tooltip: {
- trigger: "item",
- show: true,
- position: "top",
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- borderColor: "rgba(50,50,50,0.7)",
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- },
- formatter: function (p) {
- return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
- },
- },
- legend: {
- show: true,
- textStyle: {
- fontSize: 24,
- color: "rgba(255, 255, 255, .6)",
- },
- inactiveColor: "#fff",
- itemHeight: 20,
- top: "15%",
- backgroundColor: "transparent",
- data: [
- {
- name: "应首评项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWdJREFUOE+N0k8og3EYB/Dvs8P8CSlTxJGD8u+yTYmNm0gJQznIQRxMoV2cXWSKCznIQdk7SkmOEomNg41y4EjURkLZFI/ed3vX+5v82nt4357n9/s8Pe/v9xCST6+fzVHGKAMDAKqT6WsCNi2ElS0Xfak5Ul+tfi77YewBqNcLpH0vTYSOAxc9kFo5wghINus2lJMPOzl8PE6EpX8qC2lmuMmp8CmABn3FVgJ4bIloLggEnwRzRg6F4wSY9fR2J1CUnYieY0DPrgDiUvASA7pF8PGnJXsp4LEC3wx4L4DAY1pLLQq7GVjM5KcJmKC2fc76fNeOtU6GmBDOzYMt04sLmQjt2sUZRyMCjAEYBKNKyxNuAGwUA8vCaBhbcSrMxviwj1JFU7Nk3NC49iqAk+FCObAu3AngfLJCDmpmjgVwNdskB5UjPgHcrvbLQXmXVwD3O1NyYGmeFkD0aF4OCmqHBPAWXhfAL4WqeuKVsFKCAAAAAElFTkSuQmCC",
- },
- {
- name: "已完成首评项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAXFJREFUOE+V0kFLAkEUB/D/G9eW3UN1sFPYNaJAu2R0Coog8mq0fQH1kEVBhz5Ah6CoLhrdE/LqKQo6VZ7SKCKChKRTBRmhbq47oabsZC22h1nem/k93jCP8P0F+E2HQ1dD4NAAGqqn+TUI8YpciCVo8LOaoeoSKOR6GTOSxOFtFLD+OSFtmpI/obqfqFqZ6Wrqr8NNyJHJK4aPtNLDAue0+1vlnzkiHqG5YvYcwGhj08MUhJyuWhgrvyBjFq3uogp0AB2NbFR2o5sctfCNVxDWc1ag/xPQR0tLXqYg6HTBBMd++RXplpZK2Qg4dtq5NAiLNM3v5a6ilALBY4s4rvKKMdLWw4EjU4E0U3s462gwXQ3DMLeJsfpgmCYgsSVTLkSF0bC24r9NcWucHPA1izZnyXpg8vRIAMfjU/ZgLH4ogDNt1h4Mb8YEcLkSsgf9y+sCuNtaswd92qoAHuMb9qBnIiiA55M9e9DpnRfAe/pAAF9gqJXUYWdYUwAAAABJRU5ErkJggg==",
- },
- {
- name: "应再评项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAV5JREFUOE+V0j8oxGEYwPHvo/wMjgyUslAWcTFhMRiEsHLKYDzFKZRBSskgR7mUG29QjpX86QaDwdlwLotiUYpB/gyHPDru9HsPP+c3vL+e530/T8/b+wipb31KrYJ8vAi9QE0qfYqy+vBEsHtKnpM5SS4bC1qW+8amQl26gP0vcPSSQ2fXiFxJsnKhi8PfDtvgsVo0yJZfhwQCP1XOzCn4ZNuvB0BjerO4HNxtn1FsB24vDRZNggRgpdPNXsjL/4wST7AXNEDiv+DxW0slFVDTCvoG8QjcXGS2NKc+hMVsLo0yLFsBzZNnDoHaP9CJWtRn9XDA8WsOHR8PZx+NQhcDqvQhVH3klTMRVu4fWTZGw97Ktl/VHrePyVfRr1myHwhP3xnAM1nkDJbGzw0wOFvpDCa8+waYCTY5g/6esAFCax5n0NI6b4DI7qgzcDeOGSAW9TuD0up+A1zHQwZ4B2JrgI9r4uMDAAAAAElFTkSuQmCC",
- },
- {
- name: "已完成再评项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE9jZICC/1e12Rh4uDIY/jNGMjAw6ECFrzAw/l/O8OXbDEbtq79AYowg4v9jS2mGv3+3MDAwGMAMQKMvMDAz+zDKHn/KCDaZm/skHsUwvRcZfr8zZ/z/0CyX4T/DJBwmowozMuQx/n9gdpyBgcECLsNpycAgXAPhvm1hYPgOkoaDEyANPxkYGNjgQjJbGRiYRSDcv28YGJ54I2v4SUDDWwaGJ17IGr5gcZIV1El/GRjetjMwfD+G5qSHpnkM/xknEufp//mM/2+rsDOwCoGCVZ+ApksMv9+ZERtxFxmYmb3BEYeaNHgyGf7/j2FgYNCEil9nYGRcwvDly3SUpIHslP8PzP4j8xkVTsENhaclZAWvLligaBAzOIFfw9ld1igajN2O4tewar49ioawxIP4NbQ0OqNoqKnfi19DXIoHioZFc3bg12Dt6YOi4ej2Lfg1yBn7o2h4dHYjigYAb0t88hVwEBYAAAAASUVORK5CYII=",
- },
- {
- name: "再评达标项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE+V0k8og2EcwPHvkzVZLLm6KItEzWlclIPbdhGKcsCJwzZFdtgOK+8OimIXTjgoSrisXByUgz8nE4mmXFwlZmuaPXr3r/eZ9sZ7eN9+v/f5/J6n3/MTFJ9wWFpTFqYFjAFdxfSthF1blo1wWHzpOaG/gppszkIM6C4VqPheW8ATCYkXoVdOW7g0WVyy8ZSdHhFYlF4E0SqV1bTEJwKaPAd6S3/aWmHEU4j2Y/D4pJgLHWQAaykd9ENDfSH6SEJkTQGZ/4LkryO1O2DYDbkcHB7DQ6LiSAua9AlQN67SAQl+4Y3KWtt7vq1Os04JuPm04/rrxcUt4M5fnHE00jXMIBgHOor5eyQ7dd+sK6NhPEpAk9IYL4VEuWh5lowLfKE3BUS1RnMwOZtQwNaqwxwMTp0p4Gizzxz0D+0p4PRg1Bw4B1YUED+ZMwctrnkFPF8tm4OmzgkFvN5tK+AHKZh4TU8krdoAAAAASUVORK5CYII=",
- },
- ],
- },
- grid: {
- top: "30%",
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: {
- data: that.riskData1.x,
- type: "category",
- splitLine: {
- show: false,
- },
- alignTicks: true,
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(0, 80, 148, .8)",
- },
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#fff",
- fontSize: 22,
- rotate: 20,
- },
- },
- yAxis: {
- type: "value",
- splitLine: {
- show: true,
- lineStyle: {
- color: "rgba(104, 180, 221, .2)",
- type: "dashed",
- },
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#fff",
- fontSize: 22,
- },
- },
- series: [
- {
- type: "bar",
- name: "应首评项目数",
- barWidth: 4,
- barGap: "600%",
- data: that.riskData1.y1,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#40A9FF",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#40A9FF", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "bar",
- name: "已完成首评项目数",
- barGap: "600%",
- barWidth: 4,
- data: that.riskData1.y2,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#58F7DF",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#58F7DF", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "bar",
- name: "应再评项目数",
- barGap: "600%",
- barWidth: 4,
- data: that.riskData1.y3,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#B78CFF",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#B78CFF", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "bar",
- name: "已完成再评项目数",
- barGap: "600%",
- barWidth: 4,
- data: that.riskData1.y4,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#FFE036",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#FFE036", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "bar",
- name: "再评达标项目数",
- barGap: "600%",
- barWidth: 4,
- data: that.riskData1.y5,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#7784FF",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#7784FF", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- ],
- };
- that.right4Chart.setOption(option);
- tools.loopShowTooltip(that.right4Chart, option, {
- interval: 2000,
- loopSeries: true,
- });
- },
- clickItem (index) {
- const angle = 360 / this.investData.investList.length;
- this.witchs = index;
- this.inner = index;
- this.innerDeg = this.witchs * angle;
- this.lpRotate();
- },
- lpRotate () {
- const angle = 360 / this.investData.investList.length;
- clearInterval(this.timer);
- this.timer = setInterval(() => {
- this.inner++;
- this.topIndex++;
- this.topIndex = this.topIndex % 8;
- this.witchs = this.inner % this.investData.investList.length;
- this.innerDeg = this.inner * angle;
- // 项目阶段分析弹窗
- if (this.projectNum < 7) {
- this.projectNum = this.projectNum + 1
- } else {
- this.projectNum = 0
- }
- }, 2000);
- },
- filterLpData () {
- const angle = 360 / this.investData.investList.length;
- for (let i in this.investData.investList) {
- this.investData.investList[i].deg = i * angle;
- this.$set(this.investData.investList, i, {
- ...this.investData.investList[i],
- deg: i * angle,
- });
- }
- },
- // 4秒定时器
- time4s () {
- let that = this;
- // 4秒定时器
- this.time1 = setInterval(() => {
- that.industryProportion == 1
- ? (that.industryProportion = 2)
- : (that.industryProportion = 1);
- that.leftEcharts1.dispose();
- that.leftEcharts2.dispose();
- that.leftEcharts3.dispose();
- that.leftEcharts4.dispose();
- that.leftEcharts1Fun();
- that.leftEcharts2Fun();
- that.leftEcharts3Fun();
- that.leftEcharts4Fun();
- }, 4000);
- },
- // 针对投前产业布局分析的定时器
- timeNs () {
- let that = this;
- this.time2 = setInterval(() => {
- if (that.industryLayout < 3) {
- that.industryLayout = that.industryLayout + 1;
- } else {
- that.industryLayout = 0;
- }
- this.time2 && clearInterval(this.time2);
- this.timeNs();
- that.leftEcharts5.dispose();
- that.leftEcharts5Fun();
- }, left1[that.industryLayout].length * 2000);
- },
- // 主辅业占比点击方法
- industryProportionChange (e) {
- let that = this;
- this.industryProportion = e;
- this.time1 && clearInterval(this.time1);
- that.leftEcharts1.dispose();
- that.leftEcharts2.dispose();
- that.leftEcharts3.dispose();
- that.leftEcharts4.dispose();
- that.leftEcharts1Fun();
- that.leftEcharts2Fun();
- that.leftEcharts3Fun();
- that.leftEcharts4Fun();
- this.time4s();
- },
- // 产业布局分析点击方法
- industryLayoutChange (e) {
- this.industryLayout = e;
- this.time2 && clearInterval(this.time2);
- this.leftEcharts5.dispose();
- this.timeNs();
- this.leftEcharts5Fun();
- },
- yuanChange (value) {
- return Number((value / 100000000).toFixed(2));
- },
- // 逢三折断
- numFormat (value) {
- if (!value) return "0";
- // var intPart = Number(value).toFixed(0) // 获取整数部分
- var intPart = parseInt(value); // 获取整数部分
- var intPartFormat = intPart
- .toString()
- .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // 将整数部分逢三一断
- var floatPart = ".00"; // 预定义小数部分
- var value2Array = value.toString().split(".");
- // =2表示数据有小数位
- if (value2Array.length === 2) {
- floatPart = value2Array[1].toString(); // 拿到小数部分
- if (floatPart.length === 1) {
- // 补0
- return intPartFormat + "." + floatPart + "0";
- } else {
- floatPart = floatPart.slice(0, 2);
- return intPartFormat + "." + floatPart;
- }
- } else {
- return intPartFormat;
- }
- },
- leftEcharts1Fun () {
- let that = this;
- this.leftEcharts1 = echarts.init(this.$refs["leftEcharts1"]);
- option = {
- title: {
- text: that.industryProportion == 1 ? "30%" : "70%",
- x: "center",
- y: "center",
- textStyle: {
- fontWeight: "normal",
- color: "#68BDFF",
- fontSize: "20",
- },
- },
- color: ["#68BDFF", "#254F7F"],
- series: [
- {
- name: "Line 1",
- type: "pie",
- clockWise: true,
- radius: ["80%", "100%"],
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- hoverAnimation: false,
- data: [
- {
- value: 80,
- name: "01",
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- },
- {
- name: "02",
- value: 20,
- },
- ],
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts1.setOption(option);
- },
- leftEcharts2Fun () {
- let that = this;
- this.leftEcharts2 = echarts.init(this.$refs["leftEcharts2"]);
- let nameList = ["a"];
- let valueList = that.industryProportion == 1 ? [30] : [70];
- let total = 100; // 数据总数
- var category = nameList.map((item, index) => {
- return {
- value: valueList[index],
- itemStyle: {
- color: new echarts.graphic.LinearGradient(
- 1,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "#40A9FF50",
- },
- {
- offset: 1,
- color: "#40A9FF",
- },
- ],
- false
- ),
- },
- };
- });
- var totalList = [];
- var totalBorderList = [];
- nameList.map((item, index) => {
- totalList.push({
- value: total,
- itemStyle: {
- color: "rgba(51, 147, 236, 0.29)",
- },
- });
- totalBorderList.push({
- value: total,
- itemStyle: {
- borderColor: "rgba(51, 147, 236, 0.29)",
- color: "transparent",
- },
- });
- });
- var datas = [];
- category.forEach((value) => {
- datas.push(value.value);
- });
- option = {
- // backgroundColor: 'rgb(231,238,249)',
- xAxis: {
- max: total,
- splitLine: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- },
- grid: {
- left: "0%",
- top: "15%", // 设置条形图的边距
- right: "15%",
- bottom: "5%",
- },
- yAxis: [
- {
- type: "category",
- inverse: false,
- data: nameList,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- },
- ],
- series: [
- {
- // 内
- type: "bar",
- barWidth: 16,
- barGap: "20%",
- silent: true,
- // label: {
- // normal: {
- // formatter: (item) => {
- // return `${item['name']}:${item['value']} `;
- // },
- // textStyle: {
- // color: 'rgba(105, 120, 136, 1)',
- // fontSize: 14,
- // },
- // position: [0, '-25px'],
- // show: true,
- // },
- // },
- data: category,
- z: 1,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 1,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(81, 193, 156, 1)",
- },
- {
- offset: 1,
- color: "rgba(234, 177, 100, 1)",
- },
- ],
- false
- ),
- },
- },
- animationEasing: "elasticOut",
- },
- {
- // 分隔
- type: "pictorialBar",
- itemStyle: {
- normal: {
- color: "#143362",
- },
- },
- symbolRepeat: "fixed",
- symbolMargin: 8,
- symbol: "rect",
- symbolClip: false,
- symbolSize: [4, 20],
- symbolPosition: "start",
- symbolOffset: [0, -2],
- symbolBoundingData: total,
- data: [total, total, total, total],
- z: 2,
- animationEasing: "elasticOut",
- },
- {
- // label
- type: "pictorialBar",
- symbolBoundingData: total,
- itemStyle: {
- normal: {
- color: "none",
- },
- },
- label: {
- normal: {
- formatter: (params) => {
- var text;
- text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
- return text;
- },
- textStyle: {
- // 图列内容样式
- fontSize: "20",
- fontWeight: 800,
- },
- position: "right",
- offset: [0, -3],
- distance: 10, // 向右偏移位置
- show: true,
- color: "#68BDFF",
- },
- },
- data: datas,
- z: 0,
- },
- {
- name: "外框",
- type: "bar",
- barGap: "-130%", // 设置外框粗细
- data: totalBorderList,
- barWidth: 26,
- itemStyle: {
- normal: {
- // barBorderRadius: [5, 5, 5, 5],
- borderWidth: 1, // 边框宽度
- borderColor: "rgb(51, 147, 236)", // 边框色
- color: "rgb(231,238,249)",
- },
- },
- z: 0,
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts2.setOption(option);
- },
- leftEcharts3Fun () {
- let that = this;
- this.leftEcharts3 = echarts.init(this.$refs["leftEcharts3"]);
- option = {
- title: {
- text: that.industryProportion == 1 ? "70%" : "30%",
- x: "center",
- y: "center",
- textStyle: {
- fontWeight: "normal",
- color: "#68BDFF",
- fontSize: "20",
- },
- },
- color: ["#5BDCC8", "#254F7F"],
- series: [
- {
- name: "Line 1",
- type: "pie",
- clockWise: true,
- radius: ["80%", "100%"],
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- hoverAnimation: false,
- data: [
- {
- value: 80,
- name: "01",
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- },
- {
- name: "02",
- value: 20,
- },
- ],
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts3.setOption(option);
- },
- leftEcharts4Fun () {
- let that = this;
- this.leftEcharts4 = echarts.init(this.$refs["leftEcharts4"]);
- let nameList = ["a"];
- let valueList = that.industryProportion == 1 ? [70] : [30];
- let total = 100; // 数据总数
- var category = nameList.map((item, index) => {
- return {
- value: valueList[index],
- itemStyle: {
- color: new echarts.graphic.LinearGradient(
- 1,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "#5BDCC850",
- },
- {
- offset: 1,
- color: "#5BDCC8",
- },
- ],
- false
- ),
- },
- };
- });
- var totalList = [];
- var totalBorderList = [];
- nameList.map((item, index) => {
- totalList.push({
- value: total,
- itemStyle: {
- color: "rgba(51, 147, 236, 0.29)",
- },
- });
- totalBorderList.push({
- value: total,
- itemStyle: {
- borderColor: "rgba(51, 147, 236, 0.29)",
- color: "transparent",
- },
- });
- });
- var datas = [];
- category.forEach((value) => {
- datas.push(value.value);
- });
- option = {
- // backgroundColor: 'rgb(231,238,249)',
- xAxis: {
- max: total,
- splitLine: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- },
- grid: {
- left: "0%",
- top: "15%", // 设置条形图的边距
- right: "15%",
- bottom: "5%",
- },
- yAxis: [
- {
- type: "category",
- inverse: false,
- data: nameList,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- },
- ],
- series: [
- {
- // 内
- type: "bar",
- barWidth: 16,
- barGap: "20%",
- silent: true,
- // label: {
- // normal: {
- // formatter: (item) => {
- // return `${item['name']}:${item['value']} `;
- // },
- // textStyle: {
- // color: 'rgba(105, 120, 136, 1)',
- // fontSize: 14,
- // },
- // position: [0, '-25px'],
- // show: true,
- // },
- // },
- data: category,
- z: 1,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 1,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(81, 193, 156, 1)",
- },
- {
- offset: 1,
- color: "rgba(234, 177, 100, 1)",
- },
- ],
- false
- ),
- },
- },
- animationEasing: "elasticOut",
- },
- {
- // 分隔
- type: "pictorialBar",
- itemStyle: {
- normal: {
- color: "#143362",
- },
- },
- symbolRepeat: "fixed",
- symbolMargin: 8,
- symbol: "rect",
- symbolClip: false,
- symbolSize: [4, 20],
- symbolPosition: "start",
- symbolOffset: [0, -2],
- symbolBoundingData: total,
- data: [total, total, total, total],
- z: 2,
- animationEasing: "elasticOut",
- },
- {
- // label
- type: "pictorialBar",
- symbolBoundingData: total,
- itemStyle: {
- normal: {
- color: "none",
- },
- },
- label: {
- normal: {
- formatter: (params) => {
- var text;
- text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
- return text;
- },
- textStyle: {
- // 图列内容样式
- fontSize: "20",
- fontWeight: 800,
- },
- position: "right",
- offset: [0, -3],
- distance: 10, // 向右偏移位置
- show: true,
- color: "#68BDFF",
- },
- },
- data: datas,
- z: 0,
- },
- {
- name: "外框",
- type: "bar",
- barGap: "-130%", // 设置外框粗细
- data: totalBorderList,
- barWidth: 26,
- itemStyle: {
- normal: {
- // barBorderRadius: [5, 5, 5, 5],
- borderWidth: 1, // 边框宽度
- borderColor: "rgb(51, 147, 236)", // 边框色
- color: "rgb(231,238,249)",
- },
- },
- z: 0,
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts4.setOption(option);
- },
- leftEcharts5Fun () {
- let that = this;
- this.leftEcharts5 = echarts.init(this.$refs["leftEcharts5"]);
- let dataList = [];
- left1[that.industryLayout].forEach((item, index) => {
- dataList[index] = {
- value: item.y,
- name: item.name,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
- {
- offset: 0,
- color: commonColor2[index], //顶部颜色
- },
- {
- offset: 1,
- color: commonColor[index], // 底部颜色
- },
- ]),
- borderColor: commonColor[index],
- borderWidth: 3,
- },
- },
- };
- });
- let option = {
- tooltip: {
- trigger: "item",
- formatter: function (e) {
- return `<span style="display:inline-block;margin-right:15px;border-radius:10px;width:20px;height:20px;background-color:${e.borderColor
- };"></span>${e.name} ${e.percent}%<br>${e.value}亿 ${left1[that.industryLayout][e.seriesIndex].num
- }个`;
- },
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- },
- },
- legend: {
- top: "center",
- orient: "vertical",
- left: "65%",
- textStyle: {
- color: "#fff",
- fontSize: 20,
- padding: [0, 20],
- },
- },
- graphic: {
- elements: [
- {
- type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
- style: {
- image: "./img/whiteCircle.png", //这里添加图片地址
- width: 80,
- height: 80,
- },
- left: "37.7%", //
- top: "middle", //配置图片居中
- },
- ],
- },
- series: [
- {
- name: "",
- type: "pie",
- radius: ["20%", "90%"],
- center: ["41%", "50%"],
- labelLine: {
- normal: {
- lineStyle: {
- width: 1,
- },
- },
- },
- label: {
- normal: {
- show: false,
- textStyle: {
- fontSize: 28,
- color: "#fff",
- },
- },
- },
- roseType: "area",
- data: dataList,
- },
- {
- tooltip: {
- show: false,
- },
- type: "pie",
- radius: ["90%", "92%"],
- center: ["41%", "50%"],
- hoverAnimation: false,
- name: "",
- data: [
- {
- name: "",
- value: 0,
- itemStyle: {
- normal: {
- color: "#345189",
- },
- },
- },
- ],
- },
- ],
- };
- //轮播
- tools.loopShowTooltip(that.leftEcharts5, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts5.setOption(option);
- },
- leftEcharts6Fun () {
- let that = this;
- this.leftEcharts6 = echarts.init(this.$refs["leftEcharts6"]);
- var dataArr = 44;
- var colorSet = {
- color: "#22B95E",
- };
- var color1 = {
- type: "linear",
- x: 0,
- y: 0,
- x2: 1,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "rgba(255,255,255,0.1)",
- },
- {
- offset: 1,
- color: "rgba(255,255,255,0.3)",
- },
- ],
- global: false,
- };
- var color2 = {
- type: "linear",
- x: 0,
- y: 0,
- x2: 1,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#30DBBA",
- },
- {
- offset: 1,
- color: "#2DE696",
- },
- ],
- global: false,
- };
- option = {
- tooltip: {
- formatter: "{a} <br/>{b} : {c}%",
- },
- series: [
- {
- name: "内部进度条",
- type: "gauge",
- // center: ['20%', '50%'],
- radius: "50%",
- splitNumber: 10,
- axisLine: {
- lineStyle: {
- color: [
- [dataArr / 100, "rgba(0,0,0,0)"],
- [1, "rgba(0,0,0,0)"],
- ],
- width: 1,
- },
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- itemStyle: {
- color: "#ffffff",
- },
- detail: {
- formatter: function (value) {
- if (value !== 0) {
- var num = Math.round(value);
- return parseInt(num).toFixed(0) + "%";
- } else {
- return 0;
- }
- },
- offsetCenter: [0, 117],
- textStyle: {
- padding: [0, 0, 0, 0],
- fontSize: 60,
- color: "#58F7DF",
- },
- },
- title: {
- //标题
- show: true,
- offsetCenter: [0, 220], // x, y,单位px
- textStyle: {
- color: "#40A9FF",
- fontSize: 34, //表盘上的标题文字大小
- fontWeight: 400,
- fontFamily: "MicrosoftYaHei",
- },
- },
- data: [
- {
- name: "总额度:1,323.85亿",
- value: dataArr,
- itemStyle: {
- fontSize: "50", //y轴上方单位的大小
- color: "#FFF666",
- fontFamily: "MicrosoftYaHei",
- },
- },
- ],
- pointer: {
- show: true,
- length: "100%",
- radius: "20%",
- width: 3, //指针粗细
- },
- animationDuration: 4000,
- },
- {
- name: "内部阴影",
- type: "gauge",
- radius: "75%",
- splitNumber: 10,
- axisLine: {
- lineStyle: {
- color: [
- [
- dataArr / 100,
- new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: "#081947",
- },
- {
- offset: 0.5,
- color: "#5DF5A9",
- },
- {
- offset: 1,
- color: "#F6F16A",
- },
- ]),
- ],
- [1, "#0E4889"],
- ],
- width: 70,
- },
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- itemStyle: {
- show: false,
- },
- },
- {
- name: "外部刻度",
- type: "gauge",
- // center: ['20%', '50%'],
- radius: "90%",
- min: 0, //最小刻度
- max: 100, //最大刻度
- splitNumber: 5, //刻度数量
- startAngle: 225,
- endAngle: -45,
- axisLine: {
- show: true,
- lineStyle: {
- width: 1,
- color: [[1, "rgba(0,0,0,0)"]],
- },
- }, //仪表盘轴线
- axisLabel: {
- show: false,
- color: "#ffffff",
- fontSize: 28,
- fontFamily: "SourceHanSansSC-Regular",
- fontWeight: "bold",
- // position: "top",
- distance: -45,
- formatter: function (v) {
- switch (v + "") {
- case "0":
- return "0";
- case "10":
- return "10";
- case "20":
- return "20";
- case "30":
- return "30";
- case "40":
- return "40";
- case "50":
- return "50";
- case "60":
- return "60";
- case "70":
- return "70";
- case "80":
- return "80";
- case "90":
- return "90";
- case "100":
- return "100";
- }
- },
- }, //刻度标签。
- axisTick: {
- show: true,
- splitNumber: 10,
- lineStyle: {
- color: "#3798D7", //用颜色渐变函数不起作用
- width: 1,
- },
- length: -6,
- }, //刻度样式
- splitLine: {
- show: true,
- length: -12,
- lineStyle: {
- color: "#3798D7", //用颜色渐变函数不起作用
- },
- }, //分隔线样式
- detail: {
- show: false,
- },
- },
- {
- //指针上的圆
- type: "pie",
- tooltip: {
- show: false,
- },
- hoverAnimation: false,
- legendHoverLink: false,
- radius: ["0%", "4%"],
- center: ["50%", "50%"],
- label: {
- normal: {
- show: false,
- },
- },
- labelLine: {
- normal: {
- show: false,
- },
- },
- data: [
- {
- value: 120,
- itemStyle: {
- normal: {
- color: "#ffffff",
- },
- },
- },
- ],
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts6.setOption(option);
- },
- leftEcharts7Fun () {
- let that = this;
- this.leftEcharts7 = echarts.init(this.$refs["leftEcharts7"]);
- let option = {
- title: {
- text: "固定资产进度分布",
- textStyle: {
- color: "#fff",
- fontSize: 28,
- fontWeight: 500,
- fontFamily: "Microsoft YaHei",
- },
- top: "20",
- left: "220",
- },
- textStyle: {
- color: "#fff",
- },
- tooltip: {
- show: false,
- trigger: "axis",
- formatter: function (params) {
- 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] +
- "亿元";
- return tip;
- },
- textStyle: {
- color: "#ffffff", // 文字的颜色
- fontSize: "20", // 文字字体大小
- fontFamily: "Microsoft YaHei",
- },
- axisPointer: {
- // lineStyle: {
- // type: 'dashed',
- // width: 2,
- // color: 'rgba(255,255,255,0.6)'
- // },
- animation: false,
- },
- },
- grid: {
- top: "0%",
- right: "5%",
- left: "15%",
- bottom: "-10%",
- },
- yAxis: {
- data: ["备案", "特别监管"],
- splitLine: {
- show: false,
- lineStyle: {
- color: "#68b4dd66",
- type: "dashed",
- },
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: true,
- formatter: "{value}",
- textStyle: {
- color: function (data) {
- if (data == "特别监管") {
- return "#40A9FF";
- } else if (data == "备案") {
- return "#5BDCC8";
- }
- },
- fontSize: 20,
- padding: [0, -10, 0, 0],
- fontFamily: "Microsoft YaHei",
- },
- },
- nameTextStyle: {
- color: "#ebf8ac",
- fontSize: 16,
- fontFamily: "Microsoft YaHei",
- },
- },
- xAxis: {
- data: ["项目储备", "项目立项", "可研论证", "投资决策"],
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: "red",
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: "#fff", //X轴文字颜色
- fontSize: 20,
- padding: [-80, 0, 0, 0],
- fontFamily: "Microsoft YaHei",
- },
- },
- },
- series: [
- {
- name: "特别监管",
- type: "scatter",
- symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolSize: function (data) {
- return Math.sqrt(data[2]) * 5;
- },
- // label: {
- // emphasis: {
- // show: true,
- // formatter: function (param) {
- // return param.data[2];
- // },
- // position: 'top'
- // }
- // },
- itemStyle: {
- normal: {
- color: "#69c0ff",
- },
- },
- // data: left13[0]
- },
- {
- name: "备案",
- type: "scatter",
- symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolSize: function (data) {
- return Math.sqrt(data[2]) * 5;
- },
- // label: {
- // emphasis: {
- // show: true,
- // formatter: function (param) {
- // return param.data[2];
- // },
- // position: 'top'
- // }
- // },
- itemStyle: {
- normal: {
- color: "#957DFF",
- },
- },
- // data: left13[1]
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts7.setOption(option);
- },
- leftEcharts8Fun () {
- let that = this;
- this.leftEcharts8 = echarts.init(this.$refs["leftEcharts8"]);
- let option = {
- title: {
- text: "固定资产进度分布",
- textStyle: {
- color: "#fff",
- fontSize: 28,
- fontWeight: 500,
- fontFamily: "Microsoft YaHei",
- },
- top: "20",
- left: "220",
- },
- textStyle: {
- color: "#fff",
- },
- tooltip: {
- show: false,
- trigger: "axis",
- formatter: function (params) {
- 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] +
- "亿元";
- return tip;
- },
- textStyle: {
- color: "#ffffff", // 文字的颜色
- fontSize: "20", // 文字字体大小
- fontFamily: "Microsoft YaHei",
- },
- axisPointer: {
- // lineStyle: {
- // type: 'dashed',
- // width: 2,
- // color: 'rgba(255,255,255,0.6)'
- // },
- animation: false,
- },
- },
- grid: {
- top: "0%",
- right: "5%",
- left: "15%",
- bottom: "-10%",
- },
- yAxis: {
- data: ["备案", "特别监管"],
- splitLine: {
- show: false,
- lineStyle: {
- color: "#68b4dd66",
- type: "dashed",
- },
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- formatter: "{value}",
- textStyle: {
- color: "#fff",
- fontSize: 20,
- padding: [0, -10, 0, 0],
- fontFamily: "Microsoft YaHei",
- },
- },
- nameTextStyle: {
- color: "#ebf8ac",
- fontSize: 16,
- fontFamily: "Microsoft YaHei",
- },
- },
- xAxis: {
- data: ["项目储备", "项目立项", "可研论证", "投资决策"],
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: "red",
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: "#fff", //X轴文字颜色
- fontSize: 20,
- padding: [-80, 0, 0, 0],
- fontFamily: "Microsoft YaHei",
- },
- },
- },
- series: [
- {
- name: "特别监管",
- type: "scatter",
- symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolSize: function (data) {
- return Math.sqrt(data[2]) * 5;
- },
- // label: {
- // emphasis: {
- // show: true,
- // formatter: function (param) {
- // return param.data[2];
- // },
- // position: 'top'
- // }
- // },
- itemStyle: {
- normal: {
- color: "#69c0ff",
- },
- },
- // data: left13[0]
- },
- {
- name: "备案",
- type: "scatter",
- symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolSize: function (data) {
- return Math.sqrt(data[2]) * 5;
- },
- // label: {
- // emphasis: {
- // show: true,
- // formatter: function (param) {
- // return param.data[2];
- // },
- // position: 'top'
- // }
- // },
- itemStyle: {
- normal: {
- color: "#957DFF",
- },
- },
- // data: left13[1]
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts8.setOption(option);
- },
- shanxiEchartsFun () {
- let that = this;
- this.geoCoordMap = [];
- /*获取地图数据*/
- this.shanxiMap = echarts.init(this.$refs["shanxi"]);
- // echarts.registerMap('china', china)
- echarts.registerMap("china", shanxi);
- // var mapFeatures = echarts.getMap('china').geoJson.features
- // mapFeatures.forEach(v => {
- // // 地区名称
- // var name = v.properties.name
- // // 地区经纬度
- // this.geoCoordMap[name] = v.properties.cp
- // data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
- // })
- var data = [
- { name: "大同市", value: 6035, value2: 28 },
- { name: "朔州市", value: 3361, value2: 13 },
- { name: "忻州市", value: 7335, value2: 25 },
- { name: "吕梁市", value: 10904, value2: 45 },
- { name: "太原市", value: 25167, value2: 113 },
- { name: "阳泉市", value: 2512, value2: 28 },
- { name: "晋中市", value: 14857, value2: 52 },
- { name: "临汾市", value: 13055, value2: 30 },
- { name: "长治市", value: 10300, value2: 23 },
- { name: "运城市", value: 4106, value2: 23 },
- { name: "晋城市", value: 4543, value2: 31 },
- ];
- var geoCoordMap = {
- 太原市: [112.53, 37.87],
- 大同市: [113.3, 40.12],
- 阳泉市: [113.57, 37.85],
- 长治市: [113.08, 36.18],
- 晋城市: [112.83, 35.52],
- 朔州市: [112.43, 39.33],
- 晋中市: [112.94, 37.4],
- 运城市: [110.97, 35.03],
- 忻州市: [112.53, 38.72],
- 临汾市: [111.5, 36.08],
- 吕梁市: [111.13, 37.52],
- };
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value, data[i].value2),
- });
- }
- }
- return res;
- };
- var convertedData = [
- convertData(data),
- convertData(
- data
- .sort(function (a, b) {
- return b.value - a.value;
- })
- .slice(0, 6)
- ),
- ];
- data.sort(function (a, b) {
- return a.value - b.value;
- });
- option = {
- backgroundColor: "#404a5900",
- animation: true,
- animationDuration: 1000,
- animationEasing: "cubicInOut",
- animationDurationUpdate: 1000,
- animationEasingUpdate: "cubicInOut",
- geo: {
- map: "china",
- center: [112.53, 37.67],
- zoom: 4.5,
- label: {
- emphasis: {
- show: false,
- },
- },
- roam: false,
- itemStyle: {
- normal: {
- borderColor: "#7fb3ff",
- borderWidth: 3,
- areaColor: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [
- {
- offset: 0,
- color: "#468ff8", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#0a2c6d", // 100% 处的颜色
- },
- ],
- globalCoord: false, // 缺省为 false
- },
- // shadowColor: 'rgba(128, 217, 248, 1)',
- shadowColor: "#468ff8",
- shadowOffsetX: -2,
- shadowOffsetY: 2,
- shadowBlur: 20,
- },
- emphasis: {
- areaColor: {
- colorStops: [
- {
- offset: 0,
- color: "#3844aa", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#7284fc", // 100% 处的颜色
- },
- ],
- },
- borderColor: "#b3baff",
- borderWidth: 5,
- },
- },
- tooltip: {
- trigger: "item",
- className: "custom-tooltip-box",
- confine: true, // 不超出当前表
- formatter: (params, ticket, callback) => {
- // 清空所有轮播
- for (var k in geoCoordMap) {
- that.shanxiMap.dispatchAction({
- // type: 'geoUnSelect',
- type: "downplay",
- name: k,
- geoIndex: 0,
- });
- that.shanxiMap.dispatchAction({
- // type: 'geoUnSelect',
- type: "downplay",
- name: k,
- seriesName: params.seriesName,
- });
- that.shanxiMap.dispatchAction({
- // type: 'geoUnSelect',
- type: "downplay",
- name: k,
- seriesName: "series\u00001",
- });
- }
- that.shanxiMap.dispatchAction({
- // type: 'geoSelect',
- type: "highlight",
- name: params.name,
- geoIndex: 0,
- });
- that.shanxiMap.dispatchAction({
- // type: 'geoSelect',
- type: "highlight",
- name: params.name,
- seriesName: params.seriesName,
- });
- that.shanxiMap.dispatchAction({
- // type: 'geoSelect',
- type: "highlight",
- name: params.name,
- seriesName: "series\u00001",
- });
- return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
- <div class="flex items-center">
- <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
- </div>
- <div class="blueIcon flex items-center">项目数量:<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
- <div class="blueIcon flex items-center">投资总额:<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
- </div>`;
- },
- },
- regions: [
- {
- name: "太原市",
- value: 2000,
- itemStyle: {
- emphasis: {
- borderColor: "#ffe036",
- borderWidth: 5,
- areaColor: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [
- {
- offset: 0,
- color: "#ffe036", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#7c732a", // 100% 处的颜色
- },
- ],
- globalCoord: false, // 缺省为 false
- },
- },
- },
- },
- {
- name: "南海诸岛",
- itemStyle: {
- // 隐藏地图
- normal: {
- opacity: 0, // 为 0 时不绘制该图形
- },
- },
- label: {
- show: false, // 隐藏文字
- },
- },
- ],
- },
- tooltip: {
- trigger: "item",
- className: "custom-tooltip-box",
- confine: true, // 不超出当前表
- formatter: (e) => {
- console.log('走了这里了', e)
- }
- },
- xAxis: {
- type: "value",
- scale: true,
- position: "top",
- boundaryGap: false,
- splitLine: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- margin: 2,
- textStyle: {
- color: "#aaa",
- },
- },
- },
- yAxis: {
- type: "category",
- nameGap: 16,
- axisLine: {
- show: false,
- lineStyle: {
- color: "#ddd",
- },
- },
- axisTick: {
- show: false,
- lineStyle: {
- color: "#ddd",
- },
- },
- axisLabel: {
- interval: 0,
- textStyle: {
- color: "#ddd",
- },
- },
- data: categoryData,
- },
- series: [
- {
- type: "effectScatter",
- colorBy: "data",
- coordinateSystem: "geo",
- data: convertedData[0],
- symbolSize: function (val) {
- return Math.max(val[2] / 500, 8);
- },
- showEffectOn: "emphasis",
- rippleEffect: {
- brushType: "stroke",
- color: "#58F7DF",
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: "{b}",
- position: "right",
- show: true,
- fontSize: "30",
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- color: "#ffc809",
- shadowBlur: 50,
- shadowColor: "#ffc809",
- },
- emphasis: {
- color: "#58F7DF",
- shadowBlur: 50,
- shadowColor: "#58F7DF",
- },
- },
- zlevel: 99,
- },
- {
- type: "effectScatter",
- colorBy: "data",
- coordinateSystem: "geo",
- data: [
- {
- name: "太原市",
- value: [112.53, 37.87, 25167, 113],
- },
- ],
- symbolSize: function (val) {
- return Math.max(val[2] / 500, 8);
- },
- showEffectOn: "emphasis",
- rippleEffect: {
- brushType: "stroke",
- color: "#DF62F2",
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: "{b}",
- position: "right",
- show: true,
- fontSize: "30",
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- color: "#ffc809",
- shadowBlur: 50,
- shadowColor: "#ffc809",
- },
- emphasis: {
- color: "#DF62F2",
- shadowBlur: 50,
- shadowColor: "#DF62F2",
- },
- },
- zlevel: 999,
- },
- ],
- };
- var categoryData = [];
- var barData = [];
- var sum = 0;
- for (var i = 0; i < data.length; i++) {
- categoryData.push(data[i].name);
- barData.push(data[i].value);
- sum += data[i].value;
- }
- // this.shanxiMap.on('click', function (params) {
- // if (params.name == '山西') {
- // that.shanxiMap.dispose()
- // that.centerShow = true
- // setTimeout(() => {
- // })
- // }
- // })
- tools.loopShowTooltip(this.shanxiMap, option, {
- interval: 2000,
- loopSeries: false,
- seriesIndex: 0,
- });
- this.shanxiMap.setOption(option);
- },
- chinaEchartsFun () {
- let that = this;
- this.geoCoordMap = [];
- /*获取地图数据*/
- this.chinaMap = echarts.init(this.$refs["china"]);
- echarts.registerMap("china", china);
- // var mapFeatures = echarts.getMap('china').geoJson.features
- // mapFeatures.forEach(v => {
- // // 地区名称
- // var name = v.properties.name
- // // 地区经纬度
- // this.geoCoordMap[name] = v.properties.cp
- // data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
- // })
- var data = [
- { "name": "新疆", value: 29780, value2: 80 },
- { "name": "西藏", value: 2186, value2: 80 },
- { "name": "内蒙古", value: 1135, value2: 80 },
- { "name": "青海", value: 29780, value2: 80 },
- { "name": "四川", value: 2568, value2: 80 },
- { "name": "黑龙江", value: 29780, value2: 80 },
- { "name": "甘肃", value: 6959, value2: 80 },
- { "name": "云南", value: 5632, value2: 80 },
- { "name": "广西", value: 6707, value2: 80 },
- { "name": "湖南", value: 29780, value2: 80 },
- { "name": "陕西", value: 1894, value2: 80 },
- { "name": "广东", value: 15769, value2: 80 },
- { "name": "吉林", value: 8259, value2: 80 },
- { "name": "河北", value: 5741, value2: 80 },
- { "name": "湖北", value: 3030, value2: 80 },
- { "name": "贵州", value: 4542, value2: 80 },
- { "name": "山东", value: 19780, value2: 80 },
- { "name": "江西", value: 3157, value2: 80 },
- { "name": "河南", value: 6690, value2: 80 },
- { "name": "辽宁", value: 8678, value2: 80 },
- { "name": "山西", value: 5303, value2: 80 },
- { "name": "安徽", value: 29780, value2: 80 },
- { "name": "福建", value: 10259, value2: 80 },
- { "name": "浙江", value: 3016, value2: 80 },
- { "name": "江苏", value: 3202, value2: 80 },
- { "name": "重庆", value: 4540, value2: 80 },
- { "name": "宁夏", value: 19780, value2: 80 },
- { "name": "海南", value: 8626, value2: 80 },
- { "name": "台湾", value: 4361, value2: 80 },
- { "name": "北京", value: 20000, value2: 80 },
- { "name": "天津", value: 4080, value2: 80 },
- { "name": "上海", value: 19780, value2: 80 },
- { "name": "香港", value: 6991, value2: 80 },
- { "name": "澳门", value: 13873, value2: 80 },
- ];
- var geoCoordMap = {
- "新疆": [86.9023, 41.148],
- "西藏": [87.8695, 31.6846],
- "内蒙古": [110.5977, 41.3408],
- "青海": [95.2402, 35.4199],
- "四川": [102.9199, 30.1904],
- "黑龙江": [128.1445, 46.7156],
- "甘肃": [102.7129, 38.166],
- "云南": [101.0652, 24.6807],
- "广西": [108.7813, 23.6426],
- "湖南": [111.5332, 27.3779],
- "陕西": [108.5996, 33.7396],
- "广东": [113.8668, 22.8076],
- "吉林": [126.1746, 43.5938],
- "河北": [115.4004, 38.1688],
- "湖北": [112.2363, 30.8572],
- "贵州": [106.6113, 26.6385],
- "山东": [118.2402, 36.2307],
- "江西": [115.7156, 27.99],
- "河南": [113.0668, 33.8818],
- "辽宁": [123.0438, 41.0889],
- "山西": [112.44, 37.73],
- "安徽": [117.2461, 31.0361],
- "福建": [118.3008, 25.9277],
- "浙江": [120.498, 29.0918],
- "江苏": [119.8586, 32.915],
- "重庆": [107.7539, 29.8904],
- "宁夏": [105.9961, 37.1096],
- "海南": [109.9512, 19.2041],
- "台湾": [120.8254, 23.5986],
- "北京": [116.4551, 40.2539],
- "天津": [117.4219, 39.4189],
- "上海": [121.4648, 31.2891],
- "香港": [114.6178, 22.3242],
- "澳门": [113.5547, 21.6484],
- '南海诸岛': [128.8254, 21.5986]
- };
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value, data[i].value2),
- });
- }
- }
- return res;
- };
- var convertedData = [
- convertData(data),
- convertData(
- data
- .sort(function (a, b) {
- return b.value - a.value;
- })
- .slice(0, 6)
- ),
- ];
- data.sort(function (a, b) {
- return a.value - b.value;
- });
- option = {
- animation: true,
- animationDuration: 1000,
- animationEasing: "cubicInOut",
- animationDurationUpdate: 1000,
- animationEasingUpdate: "cubicInOut",
- geo: {
- map: "china",
- zoom: 0.9,
- label: {
- emphasis: {
- show: false,
- },
- },
- roam: false,
- itemStyle: {
- normal: {
- borderColor: "#7fb3ff",
- borderWidth: 3,
- areaColor: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [
- {
- offset: 0,
- color: "#468ff8", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#0a2c6d", // 100% 处的颜色
- },
- ],
- globalCoord: false, // 缺省为 false
- },
- // shadowColor: 'rgba(128, 217, 248, 1)',
- shadowColor: "#468ff8",
- shadowOffsetX: -2,
- shadowOffsetY: 2,
- shadowBlur: 20,
- },
- emphasis: {
- areaColor: {
- colorStops: [
- {
- offset: 0,
- color: "#3844aa", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#7284fc", // 100% 处的颜色
- },
- ],
- },
- borderColor: "#b3baff",
- borderWidth: 5,
- },
- },
- tooltip: {
- trigger: "item",
- className: "custom-tooltip-box",
- confine: true, // 不超出当前表
- formatter: (params, ticket, callback) => {
- // console.log(params, '走了这里了')
- // 清空所有轮播
- for (var k in geoCoordMap) {
- that.chinaMap.dispatchAction({
- // type: 'geoUnSelect',
- type: "downplay",
- name: k,
- geoIndex: 0,
- });
- that.chinaMap.dispatchAction({
- // type: 'geoUnSelect',
- type: "downplay",
- name: k,
- seriesName: params.seriesName,
- });
- that.chinaMap.dispatchAction({
- // type: 'geoUnSelect',
- type: "downplay",
- name: k,
- seriesName: "series\u00001",
- });
- }
- that.chinaMap.dispatchAction({
- // type: 'geoSelect',
- type: "highlight",
- name: params.name,
- geoIndex: 0,
- });
- that.chinaMap.dispatchAction({
- // type: 'geoSelect',
- type: "highlight",
- name: params.name,
- seriesName: params.seriesName,
- });
- that.chinaMap.dispatchAction({
- // type: 'geoSelect',
- type: "highlight",
- name: params.name,
- seriesName: "series\u00001",
- });
- return `<div class="bgTooltip" style="background: rgba(50,50,50,0.7);font-size:36px">
- <div class="flex items-center">
- <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
- </div>
- <div class="blueIcon flex items-center">项目数量:<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
- <div class="blueIcon flex items-center">投资总额:<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
- </div>`;
- },
- },
- regions: [
- {
- name: "山西",
- value: 2000,
- itemStyle: {
- emphasis: {
- borderColor: "#ffe036",
- borderWidth: 5,
- areaColor: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [
- {
- offset: 0,
- color: "#ffe036", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#7c732a", // 100% 处的颜色
- },
- ],
- globalCoord: false, // 缺省为 false
- },
- },
- },
- },
- // {
- // name: "南海诸岛",
- // itemStyle: {
- // // 隐藏地图
- // normal: {
- // opacity: 0, // 为 0 时不绘制该图形
- // },
- // },
- // label: {
- // show: false, // 隐藏文字
- // },
- // },
- ],
- },
- tooltip: {
- trigger: "item",
- className: "custom-tooltip-box",
- confine: true, // 不超出当前表
- },
- xAxis: {
- type: "value",
- scale: true,
- position: "top",
- boundaryGap: false,
- splitLine: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- margin: 2,
- textStyle: {
- color: "#aaa",
- },
- },
- },
- yAxis: {
- type: "category",
- nameGap: 16,
- axisLine: {
- show: false,
- lineStyle: {
- color: "#ddd",
- },
- },
- axisTick: {
- show: false,
- lineStyle: {
- color: "#ddd",
- },
- },
- axisLabel: {
- interval: 0,
- textStyle: {
- color: "#ddd",
- },
- },
- data: categoryData,
- },
- series: [
- {
- type: "effectScatter",
- colorBy: "data",
- coordinateSystem: "geo",
- data: convertedData[0],
- symbolSize: function (val) {
- return Math.max(val[2] / 500, 8);
- },
- showEffectOn: "emphasis",
- rippleEffect: {
- brushType: "stroke",
- color: "#58F7DF",
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: "{b}",
- position: "right",
- show: true,
- fontSize: "30",
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- color: "#ffc809",
- shadowBlur: 50,
- shadowColor: "#ffc809",
- },
- emphasis: {
- color: "#58F7DF",
- shadowBlur: 50,
- shadowColor: "#58F7DF",
- },
- },
- zlevel: 99,
- },
- {
- type: "effectScatter",
- colorBy: "data",
- coordinateSystem: "geo",
- data: [
- {
- name: "山西",
- value: [112.43, 37.73, 5303, 80],
- },
- ],
- symbolSize: function (val) {
- return Math.max(val[2] / 500, 8);
- },
- showEffectOn: "emphasis",
- rippleEffect: {
- brushType: "stroke",
- color: "#DF62F2",
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: "{b}",
- position: "right",
- show: true,
- fontSize: "30",
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- color: "#ffc809",
- shadowBlur: 50,
- shadowColor: "#ffc809",
- },
- emphasis: {
- color: "#DF62F2",
- shadowBlur: 50,
- shadowColor: "#DF62F2",
- },
- },
- zlevel: 999,
- },
- ],
- };
- var categoryData = [];
- var barData = [];
- var sum = 0;
- for (var i = 0; i < data.length; i++) {
- categoryData.push(data[i].name);
- barData.push(data[i].value);
- sum += data[i].value;
- }
- this.chinaMap.on('click', function (params) {
- if (params.name == '山西') {
- that.chinaMap.dispose()
- that.leftEcharts16.dispose()
- that.mapShow = true
- setTimeout(() => {
- that.leftEcharts12Fun()
- that.leftEcharts14Fun()
- that.leftEcharts9Fun()
- that.leftEcharts15Fun()
- that.leftEcharts13Fun()
- that.shanxiEchartsFun()
- })
- }
- })
- tools.loopShowTooltip(this.chinaMap, option, {
- interval: 2000,
- loopSeries: false,
- seriesIndex: 0,
- });
- this.chinaMap.setOption(option);
- },
- leftEcharts9Fun () {
- let that = this;
- this.leftEcharts9 = echarts.init(this.$refs["leftEcharts9"]);
- // var ROOT_PATH = 'https://echarts.apache.org/examples';
- let option = {
- backgroundColor: "#00000000",
- globe: {
- globeRadius: 55,
- baseTexture: "./img/3D/world1.jpg",
- heightTexture: "./img/3D/world1.jpg",
- displacementScale: 0.04,
- shading: "realistic",
- // environment: './img/3D/world2.jpg',
- realisticMaterial: {
- roughness: 0.9,
- },
- postEffect: {
- enable: true,
- },
- light: {
- main: {
- intensity: 3,
- shadow: true,
- },
- },
- },
- };
- that.leftEcharts9.setOption(option);
- },
- leftEcharts10Fun () {
- let that = this;
- this.leftEcharts10 = echarts.init(this.$refs["leftEcharts10"]);
- option = {
- grid: {
- top: 45,
- right: 0,
- left: 80,
- bottom: 80,
- },
- tooltip: {
- show: true,
- trigger: "axis",
- formatter: (data) => {
- return `${data[0].name
- }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color
- }"></span> ${data[0].seriesName}:${that.numFormat(
- data[0].value
- )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color
- }"></span> ${data[1].seriesName}:${that.numFormat(
- data[1].value
- )}亿`;
- },
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- },
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- borderColor: "rgba(50,50,50,0.7)",
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- },
- },
- xAxis: {
- data: commonCompany,
- axisTick: {
- show: false,
- },
- // x轴的字体颜色
- axisLabel: {
- rotate: 40,
- textStyle: {
- color: "white",
- fontSize: "20",
- fontFamily: "Microsoft YaHei",
- },
- },
- //y轴线的颜色以及宽度
- axisLine: {
- show: true,
- lineStyle: {
- color: "#1E5389",
- width: 1,
- type: "solid",
- },
- },
- },
- yAxis: {
- name: "亿",
- axisTick: {
- lineStyle: {
- color: "#18416F",
- },
- },
- // y轴的字体颜色
- axisLabel: {
- textStyle: {
- color: "white",
- fontSize: "20",
- fontFamily: "Microsoft YaHei",
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: "#68b4dd66",
- width: 1,
- type: "dashed",
- },
- },
- //y轴线的颜色以及宽度
- axisLine: {
- show: true,
- lineStyle: {
- color: "#1E5389",
- width: 1,
- type: "solid",
- },
- },
- nameTextStyle: {
- color: "#fff",
- fontSize: 20,
- fontFamily: "Microsoft YaHei",
- },
- },
- series: [
- {
- name: "已用额度",
- type: "pictorialBar",
- symbol: "fixed",
- symbolSize: [20, 5],
- symbolMargin: 2,
- symbolRepeat: "repeat",
- data: [
- 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46,
- 26, 36,
- ],
- showBackground: false,
- barWidth: "15",
- itemStyle: {
- color: "#40A9FF",
- },
- zlevel: 1,
- },
- {
- name: "总额度",
- type: "pictorialBar",
- symbol: "fixed",
- symbolSize: [30, 5],
- symbolMargin: 2,
- symbolRepeat: "repeat",
- data: [
- 390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390,
- 390, 390, 200, 390, 200,
- ],
- barGap: "-130%",
- barWidth: "25",
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: "#b9b7c030",
- },
- {
- offset: 1,
- color: "#b9b7c030",
- },
- ]),
- },
- },
- ],
- };
- //轮播
- tools.loopShowTooltip(that.leftEcharts10, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts10.setOption(option);
- },
- // 重点项目两线指标轮播方法
- scrollChange (index) {
- if (index == 18) {
- this.count = -1;
- } else {
- this.count = index;
- }
- if (this.count > 12 && this.count != 18) {
- this.countType = 1;
- } else {
- this.countType = 0;
- }
- for (var i = 0; i < this.list.length; i++) {
- if (i == 2) {
- this.list[i].classList.add("light");
- } else {
- this.list[i].classList.remove("light");
- }
- }
- this.leftEcharts11 ? this.leftEcharts11.dispose() : "";
- this.leftEcharts11Fun();
- },
- leftEcharts11Fun () {
- let that = this;
- this.leftEcharts11 = echarts.init(this.$refs["leftEcharts11"]);
- option = {
- tooltip: {
- trigger: "axis",
- formatter:
- "指标:" +
- "{c0}" +
- "<br/>" +
- "发展线:" +
- "{c1}" +
- "<br/>" +
- "生存线:" +
- "{c2}", //+ '<br/>'+ '{a1}:{c1}' + '%',
- axisPointer: {
- type: "shadow",
- },
- backgroundColor: "rgba(50,50,50,0.7)",
- borderColor: "rgba(50,50,50,0.7)",
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- }
- },
- grid: {
- top: "10%",
- right: "5%",
- left: "15%",
- bottom: "20%",
- },
- xAxis: {
- data: [
- "总投资收益率",
- "销售利润率",
- "成本费用利润率",
- "总资产周转率",
- "财务内部收益率",
- ],
- // data: left15[this.countType],
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: "#005094",
- width: 1,
- },
- },
- axisTick: {
- show: true, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- rotate: 30,
- textStyle: {
- color: "#fff", //X轴文字颜色
- fontSize: 20,
- fontFamily: "Microsoft YaHei",
- },
- },
- },
- yAxis: [
- {
- type: "value",
- splitLine: {
- show: true,
- lineStyle: {
- color: "#68b4dd66",
- type: "dashed",
- },
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: true,
- formatter: "{value}%",
- textStyle: {
- color: "#fff",
- fontSize: 20,
- fontFamily: "Microsoft YaHei",
- },
- },
- nameTextStyle: {
- color: "#ebf8ac",
- fontSize: 16,
- fontFamily: "Microsoft YaHei",
- },
- },
- ],
- series: [
- {
- name: "实际值",
- type: "bar",
- barWidth: 20,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#69c0ff",
- },
- {
- offset: 1,
- color: "#082550",
- },
- ]),
- },
- },
- data: [70, 52, 33, 41, 52],
- // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][2] : left12[this.count + 1][2]
- },
- {
- name: "",
- type: "line",
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#69c0ff",
- },
- {
- offset: 1,
- color: "green",
- },
- ]),
- },
- },
- data: [20, 30, 15, 28, 36],
- // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][1] : left12[this.count + 1][1]
- },
- {
- name: "",
- type: "line",
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#69c0ff",
- },
- {
- offset: 1,
- color: "yellow",
- },
- ]),
- },
- },
- data: [15, 22, 17, 33, 14],
- // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][0] : left12[this.count + 1][0]
- },
- ],
- };
- //轮播
- tools.loopShowTooltip(that.leftEcharts11, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts11.setOption(option);
- },
- leftEcharts12Fun () {
- let that = this;
- this.leftEcharts12 = echarts.init(this.$refs["leftEcharts12"]);
- var totalData = [{
- name: '传统产业',
- value: 12,
- radio: 0.13
- }, {
- name: '公共基础产业',
- value: 52,
- radio: 0.01
- }, {
- name: '战略性新兴产业',
- value: 15,
- radio: 3.9
- }, {
- name: '特色优势产业',
- value: 56,
- radio: 10.5
- }];
- var data = [];
- for (var i = 0; i < totalData.length; i++) {
- data.push({
- value: totalData[i].value,
- name: totalData[i].name,
- itemStyle: {
- normal: {
- borderWidth: 8,
- shadowBlur: 0,
- borderColor: commonColor[i],
- shadowColor: commonColor[i]
- }
- }
- },
- {
- value: 5,
- name: '',
- itemStyle: {
- normal: {
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- color: 'rgba(0, 0, 0, 0)',
- borderColor: 'rgba(0, 0, 0, 0)',
- borderWidth: 0
- }
- }
- }
- );
- }
- var seriesOption = [
- {
- name: '',
- type: 'pie',
- clockWise: false,
- radius: [170, 160],
- center: [260, 250],
- hoverAnimation: false,
- itemStyle: {
- normal: {
- label: {
- show: false,
- }
- }
- },
- data: data
- },
- {
- type: 'pie',
- radius: [120, 120],
- center: [260, 250],
- zlevel: 3,
- silent: true,
- label: {
- normal: {
- show: false
- },
- },
- labelLine: {
- normal: {
- show: false
- }
- },
- data: _pie3()
- },
- {
- type: "liquidFill",
- radius: "40%",
- data: [left2[0]],
- center: [260, 250],
- backgroundStyle: {
- color: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.5,
- // 水球体颜色
- colorStops: [
- {
- offset: 0,
- color: "#010a11",
- },
- {
- offset: 0.75,
- // color: "#203852",
- color: "#1a2f45",
- },
- {
- offset: 1,
- // color: "#354e6d",
- color: "#2b405a",
- // color: "#314967",
- },
- ],
- globalCoord: false,
- },
- },
- outline: {
- borderDistance: 0,
- itemStyle: {
- borderWidth: 0,
- borderColor: {
- type: "linear",
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- ],
- globalCoord: false,
- },
- },
- },
- color: [
- {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0,
- color: '#237386',
- },
- {
- offset: 1,
- color: '#0078C8',
- },],
- },
- {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0,
- color: '#2F97A9',
- },
- {
- offset: 1,
- color: '#0078C8',
- },],
- },
- {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0,
- color: '#48E0ED',
- },
- {
- offset: 1,
- color: '#0078C8',
- },],
- }
- ],
- label: {
- normal: {
- textStyle: {
- fontSize: '50',
- color: "#58E6F7", // x轴文字颜色
- },
- },
- },
- },
- ];
- option = {
- color: commonColor,
- title: {
- show: false,
- text: '风险类型123',
- top: '48%',
- textAlign: "center",
- left: "49%",
- textStyle: {
- color: '#fff',
- fontSize: 18,
- fontWeight: '400'
- }
- },
- tooltip: {
- show: false
- },
- legend: {
- icon: "circle",
- orient: 'vertical',
- formatter: function (name) {
- let num
- for (let i = 0; i < totalData.length; i++) {
- if (totalData[i].name === name) {
- num = name + ':' + totalData[i].value + '(' + totalData[i].radio + '%' + ')'
- }
- }
- return num
- },
- data: ['传统产业', '公共基础产业', '战略性新兴产业', '特色优势产业'],
- right: 0,
- bottom: 0,
- align: 'left',
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- itemGap: 20
- },
- toolbox: {
- show: false
- },
- series: seriesOption
- }
- function _pie3 () {
- let dataArr = [];
- for (var i = 0; i < 100; i++) {
- if (i % 2 === 0) {
- dataArr.push({
- name: (i + 1).toString(),
- value: 25,
- itemStyle: {
- normal: {
- color: "#5A5DE0",
- borderWidth: 1,
- borderColor: "#5A5DE0"
- }
- }
- })
- } else {
- dataArr.push({
- name: (i + 1).toString(),
- value: 20,
- itemStyle: {
- normal: {
- color: "rgba(0,0,0,0)",
- borderWidth: 0,
- borderColor: "rgba(0,0,0,0)"
- }
- }
- })
- }
- }
- return dataArr
- }
- //轮播
- tools.loopShowTooltip(that.leftEcharts12, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts12.setOption(option);
- },
- leftEcharts13Fun () {
- let that = this;
- this.leftEcharts13 = echarts.init(this.$refs["leftEcharts13"]);
- var totalData = [{
- name: '新建',
- value: 12,
- radio: 0.13
- }, {
- name: '续建',
- value: 52,
- radio: 0.01
- }];
- var data = [];
- for (var i = 0; i < totalData.length; i++) {
- data.push({
- value: totalData[i].value,
- name: totalData[i].name,
- itemStyle: {
- normal: {
- borderWidth: 8,
- shadowBlur: 0,
- borderColor: commonColor[i],
- shadowColor: commonColor[i]
- }
- }
- },
- {
- value: 5,
- name: '',
- itemStyle: {
- normal: {
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- color: 'rgba(0, 0, 0, 0)',
- borderColor: 'rgba(0, 0, 0, 0)',
- borderWidth: 0
- }
- }
- }
- );
- }
- var seriesOption = [
- {
- name: '',
- type: 'pie',
- clockWise: false,
- radius: [170, 160],
- center: [350, 250],
- hoverAnimation: false,
- itemStyle: {
- normal: {
- label: {
- show: false,
- }
- }
- },
- data: data
- },
- {
- type: 'pie',
- radius: [120, 120],
- center: [350, 250],
- zlevel: 3,
- silent: true,
- label: {
- normal: {
- show: false
- },
- },
- labelLine: {
- normal: {
- show: false
- }
- },
- data: _pie3()
- }
- ];
- option = {
- color: commonColor,
- title: {
- show: true,
- text: '25%',
- top: '48%',
- textAlign: "center",
- left: "49%",
- textStyle: {
- fontWeight: '600',
- fontFamily: 'Microsoft YaHei',
- fontSize: '50',
- color: "#58E6F7", // x轴文字颜色
- }
- },
- tooltip: {
- show: false
- },
- legend: {
- icon: "circle",
- orient: 'vertical',
- formatter: function (name) {
- let num
- for (let i = 0; i < totalData.length; i++) {
- if (totalData[i].name === name) {
- num = name + ':' + totalData[i].value + '(' + totalData[i].radio + '%' + ')'
- }
- }
- return num
- },
- data: ['新建', '续建'],
- right: 0,
- bottom: 0,
- align: 'left',
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- },
- itemGap: 20
- },
- toolbox: {
- show: false
- },
- series: seriesOption
- }
- function _pie3 () {
- let dataArr = [];
- for (var i = 0; i < 1; i++) {
- if (i % 2 === 0) {
- dataArr.push({
- name: (i + 1).toString(),
- value: 25,
- itemStyle: {
- normal: {
- color: "#5A5DE0",
- borderWidth: 1,
- borderColor: "#5A5DE0"
- }
- }
- })
- } else {
- dataArr.push({
- name: (i + 1).toString(),
- value: 20,
- itemStyle: {
- normal: {
- color: "rgba(0,0,0,0)",
- borderWidth: 0,
- borderColor: "rgba(0,0,0,0)"
- }
- }
- })
- }
- }
- return dataArr
- }
- //轮播
- tools.loopShowTooltip(that.leftEcharts13, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts13.setOption(option);
- },
- leftEcharts14Fun () {
- let that = this;
- this.leftEcharts14 = echarts.init(this.$refs["leftEcharts14"]);
- option = {
- tooltip: {
- show: true,
- trigger: "axis",
- // formatter: (data) => {
- // return `${data[0].name
- // }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color
- // }"></span> ${data[0].seriesName}:${that.numFormat(
- // data[0].value
- // )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color
- // }"></span> ${data[1].seriesName}:${that.numFormat(
- // data[1].value
- // )}亿`;
- // },
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- },
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- borderColor: "rgba(50,50,50,0.7)",
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- },
- },
- legend: {
- top: "top",
- textStyle: {
- color: "#fff",
- fontSize: 20,
- padding: [0, 20],
- },
- },
- grid: {
- left: '3%',
- right: '7%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- name: '亿',
- nameTextStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- type: 'value',
- axisLabel: {
- textStyle: {
- color: "white",
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: "#68b4dd66",
- width: 1,
- type: "dashed",
- },
- },
- },
- yAxis: {
- type: 'category',
- axisTick: {
- lineStyle: {
- color: "#18416F",
- },
- },
- // y轴的字体颜色
- axisLabel: {
- textStyle: {
- color: "white",
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: "#68b4dd66",
- width: 1,
- type: "dashed",
- },
- },
- //y轴线的颜色以及宽度
- axisLine: {
- show: true,
- lineStyle: {
- color: "#1E5389",
- width: 1,
- type: "solid",
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团"]
- },
- series: [
- {
- name: '实际投资',
- type: 'bar',
- data: [18203, 23489, 29034, 104970, 131744, 630230],
- barGap: '-145%',
- barWidth: "15",
- zlevel: 10,
- itemStyle: {
- barBorderRadius: [0, 20, 20, 0],
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- {
- offset: 0,
- color: '#0F357C',
- },
- {
- offset: 1,
- color: '#B78CFF',
- },
- ]),
- },
- },
- {
- name: '计划投资',
- type: 'bar',
- data: [19325, 23438, 31000, 121594, 134141, 681807],
- barWidth: "30",
- itemStyle: {
- barBorderRadius: [0, 50, 50, 0],
- borderColor: '#B78CFF',
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- {
- offset: 0,
- color: '#0F357C00',
- },
- {
- offset: 1,
- color: '#10417F00',
- },
- ]),
- },
- }
- ]
- };
- //轮播
- tools.loopShowTooltip(that.leftEcharts14, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts14.setOption(option);
- },
- leftEcharts15Fun () {
- let that = this;
- this.leftEcharts15 = echarts.init(this.$refs["leftEcharts15"]);
- var xdata = ['煤炭和煤电', '煤电和新能源', '煤炭和化工', '煤炭和数字', '煤炭和降碳'];
- var data = [70, 60, 80, 200, 300];
- var maxArr = [100, 100, 100];
- option = {
- tooltip: {
- show: true,
- trigger: "axis",
- // formatter: (data) => {
- // return `${data[0].name
- // }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color
- // }"></span> ${data[0].seriesName}:${that.numFormat(
- // data[0].value
- // )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color
- // }"></span> ${data[1].seriesName}:${that.numFormat(
- // data[1].value
- // )}亿`;
- // },
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- },
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- borderColor: "rgba(50,50,50,0.7)",
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- },
- },
- grid: {
- left: "4%",
- right: "4%",
- bottom: "3%",
- top: "15%",
- containLabel: true
- },
- xAxis: {
- data: xdata,
- triggerEvent: true,
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- axisLabel: {
- show: true,
- rotate: 0,
- interval: 0,
- textStyle: {
- padding: [14, 0, 0, 0],
- fontSize: 14,
- color: "rgba(255,255,255,1)"
- }
- }
- },
- yAxis: {
- name: "单位:个数",
- triggerEvent: true,
- nameTextStyle: {
- color: "rgba(255,255,255,1)",
- fontSize: 16,
- padding: [0, 0, 10, -20]
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(255,255,255,.1)'
- }
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: 'rgba(255,255,255,.1)'
- }
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: "rgb(148,159,167)",
- fontSize: 16
- }
- }
- },
- series: [
- {
- name: "数量",
- type: "pictorialBar",
- barCategoryGap: "60%",
- // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
- symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
- itemStyle: {
- normal: {
- //渐变色
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: "#01EAED"
- },
- {
- offset: 0.5,
- color: "#02C4DD"
- },
- {
- offset: 1,
- color: "#029ED9"
- }
- ])
- }
- },
- label: {
- normal: {
- show: false,
- position: "top",
- textStyle: {
- color: "#fff",
- fontSize: 20
- }
- }
- },
- data: data,
- }
- ]
- }
- //轮播
- tools.loopShowTooltip(that.leftEcharts15, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts15.setOption(option);
- },
- leftEcharts16Fun () {
- let that = this;
- this.leftEcharts16 = echarts.init(this.$refs["leftEcharts16"]);
- // var ROOT_PATH = 'https://echarts.apache.org/examples';
- let option = {
- backgroundColor: "#00000000",
- globe: {
- globeRadius: 85,
- baseTexture: "./img/3D/world1.jpg",
- heightTexture: "./img/3D/world1.jpg",
- displacementScale: 0.04,
- shading: "realistic",
- // environment: './img/3D/world2.jpg',
- realisticMaterial: {
- roughness: 0.9,
- },
- postEffect: {
- enable: true,
- },
- light: {
- main: {
- intensity: 1,
- shadow: true,
- },
- },
- },
- };
- that.leftEcharts16.setOption(option);
- },
- // 回到中国地图
- backChina () {
- let that = this
- if (!this.mapShow) {
- return
- }
- this.mapShow = false
- that.leftEcharts12.dispose()
- that.leftEcharts14.dispose()
- that.leftEcharts9.dispose()
- that.leftEcharts15.dispose()
- that.leftEcharts13.dispose()
- that.shanxiMap.dispose()
- setTimeout(() => {
- that.chinaEchartsFun()
- that.leftEcharts16Fun()
- });
- },
- },
- });
|