| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893589458955896589758985899590059015902590359045905590659075908590959105911591259135914591559165917591859195920592159225923592459255926592759285929593059315932593359345935593659375938593959405941594259435944594559465947594859495950595159525953595459555956595759585959596059615962596359645965596659675968596959705971 |
- let app = new Vue({
- el: '#app',
- data () {
- return {
- boardType:'', // 哪边的项目看板
- pullShow: false, // 选择年份弹窗
- pollList: [2021, 2022, 2023, 2024],
- mockData: true,// 是否使用修改的数据
- year: 2023, // 选择的年份
- boardUrl: '', // 跳转路径
- boardTipShow: false, // 项目看板弹窗专用
- lineCommonCompany: [], //双柱状图弹窗上面的折线图x轴
- commonCompanyAll: [], // 公司包括编码
- changeLine: true,
- versions: true,
- app_token: '',
- centerShow: false, // 中间内容显示
- echartR4Chart: '',// 倒数第二个专用
- echartR5Chart: '', // 倒是第一个专用
- myChartTip1: '', // 弹窗单个柱状图专用
- myChartTip2: '', // 弹窗两个柱状图专用
- myChartTip3: '', // 弹窗两个柱状图专用
- echartEnterpriseShow: false, // 企业额度分析控制
- mapChart: '',//地图专用echarts
- chartCarousel: '',//做大屏轮播专用echarts
- mapTipShow: false,
- echartSingleTipShow: false,
- echartDoubleTipShow: false,
- projectListTipShow: false, //项目列表专属弹窗
- titleUrl: '',
- titleName: '',
- yellowCount: 0, // 黄圈轮播参数
- yellowPosition: 40,// 黄圈悬浮窗位置参数
- yellowType: true, // 黄圈悬浮停止轮播
- echartR1Fd: true,
- echartR2Fd: true,
- echartC2Fd: true,
- echartR3Fd: true,
- echarts1Time: 16000,
- time: '',
- timer: '',
- timer2: '',
- center1: center1,
- showTip2: false,
- showTip3: false,
- list: [],
- count: 0,
- countType: 0,
- geoCoordMap: {},
- storageRecordConfig2: center9,
- titleList: right1,
- centerLeftList: right3,
- storageRecordConfig: left11,
- config5: {
- rowNum: 9,
- waitTime: 2000,
- headerHeight: '40',
- header: ["项目名称", "所属组织", '实施主体', '建设性质(新建/续建)', '产业类别', '建设地点', '2022年投资完成额(万元)'],
- data: [
- ["青银二广高速公路太原联络线建设PPP项目", "交控集团", "山西路桥建设集团有限公司", "新建", "交通运输业", "山西省太原市、晋中市", "148,086.00"],
- ["国道241、省道岚马线汾河水库段改线工程", "交控集团", "太原国省道汾河水库段建设管理有限公司", "续建", "交通运输业", "山西省 太原市、吕梁市", "165,314.33"],
- ["路桥科技中心", "交控集团", "山西路桥集团多经营有限公司", "续建", "建筑房地产", "山西省太原市", "8,098.26"],
- ["路桥科研基地", "交控集团", "山西路桥集团多经有限公司", "续建", "建筑房地产", "山西省太原市", "6,596.56"],
- ["武宿高速充电站建设", "交控集团", "山西交通运输投融资集团有限责任公司", "新建", "新能源", "山西省太原市", "100.00"],
- ["山西交通研创商务基地项目", "交控集团", "山西交通物流集团有限公司", "续建", "建筑房地产", "山西省太原市", "4,097.00"],
- ["山西省交通科学研究院产业化基地", "交控集团", "山西省交通科技研发有限公司", "续建", "建筑房地产", "山西省太原市武洛街27号", "3,242.00"],
- ["太长高速公路太原南收费站(二期工程暨龙城服务区)项目", "交控集团", "山西省交通开发投资集团有限公司龙城服务区发展分公司", "续建", "建筑房地产", "山西省太原市", "3,580.00"],
- ["山西转型综改示范区中小企业产业园项目", "交控集团", "山西交投综改园区开发有限公司", "续建", "建筑房地产", "山西省太原市", "14,432.00"]
- ],
- align: ["center", "center", "center", "center", "center", "center", "center"],
- headerBGC: "#153A62",
- oddRowBGC: "#061F42",
- evenRowBGC: "#0C284A",
- },
- originalConfig6: [],
- config6: listPop
- }
- },
- created () {
- this.time = formatDate()
- this.timer = setInterval(() => {
- this.time = formatDate()
- }, 1000)
- this.timer2 = setInterval(() => {
- this.yellowType && this.changeYellow()
- }, 2000)
- },
- beforeDestroy () {
- if (this.timer) {
- clearInterval(this.timer);
- }
- if (this.timer2) {
- clearInterval(this.timer2);
- }
- },
- mounted () {
- this.comeIn()
- },
- methods: {
- comeIn () {
- if (this.versions) {
- // 接口版
- this.getAppToken()
- setTimeout(() => {
- this.changeTopColor()
- // 大屏二
- this.initChinaChart()
- // 大屏三
- this.initChartR5()
- this.changeYellow()
- })
- } else {
- // 假数据版
- setTimeout(() => {
- this.initChartL1()
- this.initChartL2()
- this.initChartL3()
- this.initChartL4()
- this.initChartL5()
- this.initChartL6()
- this.initChartL7()
- this.initChartL8()
- this.initChartL10()
- this.initChartL11()
- this.changeTopColor()
- // 大屏二
- this.initChinaChart()
- // 大屏三
- this.initChartR1()
- this.initChartR2()
- this.initChartR3()
- this.changeYellow()
- })
- }
- },
- chooseTime (value) {
- let that = this
- this.year = value
- that.destroyCharts()
- this.pullShow = false
- setTimeout(item => {
- that.comeIn()
- })
- },
- destroyCharts () {
- this.left10Chart ? this.left10Chart.dispose() : ''
- this.left1Chart ? this.left1Chart.destroy() : ''
- this.left2Chart ? this.left2Chart.destroy() : ''
- this.left3Chart ? this.left3Chart.destroy() : ''
- this.left4Chart ? this.left4Chart.destroy() : ''
- this.left5Chart ? this.left5Chart.destroy() : ''
- this.left6Chart ? this.left6Chart.destroy() : ''
- this.left7Chart ? this.left7Chart.dispose() : ''
- this.left8Chart ? this.left8Chart.dispose() : ''
- this.left9Chart ? this.left9Chart.dispose() : ''
- this.chartCarousel ? this.chartCarousel.dispose() : ''
- this.myChartTip1 ? this.myChartTip1.dispose() : ''
- this.myChartTip2 ? this.myChartTip2.dispose() : ''
- this.myChartTip3 ? this.myChartTip3.dispose() : ''
- this.left11Chart ? this.left11Chart.dispose() : ''
- this.right1Chart ? this.right1Chart.dispose() : ''
- this.right2Chart ? this.right2Chart.dispose() : ''
- this.right3Chart ? this.right3Chart.dispose() : ''
- this.echartR4Chart ? this.echartR4Chart.dispose() : ''
- this.echartR5Chart ? this.echartR5Chart.dispose() : ''
- this.center1Chart ? this.center1Chart.destroy() : ''
- this.center2Chart ? this.center2Chart.dispose() : ''
- this.center3Chart ? this.center3Chart.dispose() : ''
- this.center4Chart ? this.center4Chart.destroy() : ''
- this.mapChart ? this.mapChart.dispose() : ''
- },
- // 获取token
- getAppToken () {
- // dev环境
- // let value = {
- // "appId": "xilan1014", //系统编码
- // "appSecret": "12345678910Aa@Bb@Cc", //AccessToken加密认证密钥
- // "tenantid": "", //租户id
- // "accountId": "", //数据中心id
- // "language": "zh_CN"
- // }
- // SIT环境
- let value = {
- "appId": "68dp",
- "appSecret": "9ErhY^O{n?@Pc#eb7HYX",
- "tenantid": "",
- "accountId": "1635498801198269440",
- "language": "zh_CN"
- }
- post('/ierp/api/getAppToken.do', value).then(res => {
- this.app_token = res.data.app_token
- this.getAccessToken()
- })
- },
- // 获取AccessToken
- getAccessToken () {
- let value = {
- "user": "19900000001", //登录用户手机号
- "apptoken": this.app_token, //应用令牌
- "tenantid": "", //租户id
- "accountId": "1635498801198269440",//数据中心id
- "usertype": "Mobile"
- }
- post('/ierp/api/login.do', value).then(res => {
- this.access_token = res.data.access_token
- this.getOrg()
- })
- },
- // 获取组织架构列表
- getOrg () {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- }
- get('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getOrgName', value).then(res => {
- this.commonCompanyAll = res.data
- commonCompany = res.data.map(item => item.simplename)
- // 左边
- this.getDate1()
- this.getDate2()
- this.getDate3()
- this.getDate4()
- this.getDate5()
- this.getDate6()
- // 右边
- this.getDate7()
- this.getDate8()
- this.getDate9()
- this.getDate10()
- // this.getDate11() // 右下A
- this.getDate12() // 右下B
- // 中间
- this.getDate14()
- resolve(1);
- })
- });
- },
- // 获取左边企业额度分析
- getDate1 () {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "data": {
- "mdnb_combofield": "A",
- "mdnb_datefield": "2023-01-01",
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqqyedfx', value).then(res => {
- let dataList = res.data.rows[0].entryentity
- left3[0] = []
- dataList.forEach(item => {
- left3[0].push(item.mdnb_amountfield25)
- })
- this.initChartL4(dataList)
- resolve(1);
- })
- });
- },
- // 获取左边投资计划分析
- getDate2 () {
- let that = this
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "data": {
- "mdnb_combofield": "A",
- "mdnb_datefield": "2023-01-01",
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqtzjhfx', value).then(res => {
- let dataList = res.data.rows[0]
- left4 = []
- left4[0] = dataList.mdnb_amountfield7
- left4[1] = dataList.mdnb_amountfield13
- left4[2] = dataList.mdnb_amountfield23
- left4[3] = dataList.mdnb_amountfield43
- left4[4] = dataList.mdnb_integerfield14
- left5[0].y = dataList.mdnb_amountfield9
- left5[0].num = dataList.mdnb_integerfield15
- left5[1].y = dataList.mdnb_amountfield43
- left5[1].num = dataList.mdnb_integerfield14
- left6[0].y = dataList.mdnb_amountfield15
- left6[0].num = dataList.mdnb_integerfield16
- left6[1].y = dataList.mdnb_amountfield16
- left6[1].num = dataList.mdnb_integerfield17
- that.initChartL2()
- that.initChartL3()
- resolve(1);
- })
- });
- },
- // 获取左边产业布局分析
- getDate3 () {
- let that = this
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "data": {
- "mdnb_combofield": "A",
- "mdnb_datefield": "2023-01-01",
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqcebjfx', value).then(res => {
- let dataList = this.classify(res.data.rows[0].mdnb_entryentity, 'mdnb_textfield1')
- // console.log('看看分组情况', dataList, res.data.rows[0].mdnb_entryentity)
- // 传统产业分析
- dataList[0].data.forEach((item, index) => {
- left7[index].num = item.mdnb_integerfield13
- left7[index].y = item.mdnb_amountfield8
- })
- this.initChartL5()
- // 战略性新兴产业
- dataList[1].data.forEach((item, index) => {
- left8[index].num = item.mdnb_integerfield13
- left8[index].y = item.mdnb_amountfield8
- })
- this.initChartL6()
- // 特色优势产业
- dataList[2].data.forEach((item, index) => {
- left9[index].num = item.mdnb_integerfield13
- left9[index].y = item.mdnb_amountfield8
- })
- this.initChartL7()
- // 公共基础等产业
- dataList[3].data.forEach((item, index) => {
- left10[index].num = item.mdnb_integerfield13
- left10[index].y = item.mdnb_amountfield8
- })
- this.initChartL8()
- resolve(1);
- })
- });
- },
- // 获取左边项目阶段分析
- getDate4 () {
- let that = this
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "data": {
- "mdnb_combofield": "A",
- "mdnb_datefield": "2023-01-01",
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqxmjdfx', value).then(res => {
- let dataList = res.data.rows[0]
- // 固定资产进度分布
- // 特别监管
- left13[0][0][2] = dataList.mdnb_integerfield1
- left13[0][0][3] = dataList.mdnb_amountfield241
- left13[0][1][2] = dataList.mdnb_integerfield3
- left13[0][1][3] = dataList.mdnb_amountfield5
- left13[0][2][2] = dataList.mdnb_integerfield5
- left13[0][2][3] = dataList.mdnb_amountfield21
- left13[0][3][2] = dataList.mdnb_integerfield7
- left13[0][3][3] = dataList.mdnb_amountfield29
- // 备案
- left13[1][0][2] = dataList.mdnb_integerfield2
- left13[1][0][3] = dataList.mdnb_amountfield341
- left13[1][1][2] = dataList.mdnb_integerfield4
- left13[1][1][3] = dataList.mdnb_amountfield11
- left13[1][2][2] = dataList.mdnb_integerfield6
- left13[1][2][3] = dataList.mdnb_amountfield28
- left13[1][3][2] = dataList.mdnb_integerfield8
- left13[1][3][3] = dataList.mdnb_amountfield30
- // 股权类进度分布
- // 特别监管
- left14[0][0][2] = dataList.mdnb_integerfield11
- left14[0][0][3] = dataList.mdnb_amountfield2411
- left14[0][1][2] = dataList.mdnb_integerfield31
- left14[0][1][3] = dataList.mdnb_amountfield51
- left14[0][2][2] = dataList.mdnb_integerfield51
- left14[0][2][3] = dataList.mdnb_amountfield211
- left14[0][3][2] = dataList.mdnb_integerfield71
- left14[0][3][3] = dataList.mdnb_amountfield291
- // 备案
- left14[1][0][2] = dataList.mdnb_integerfield21
- left14[1][0][3] = dataList.mdnb_amountfield3411
- left14[1][1][2] = dataList.mdnb_integerfield41
- left14[1][1][3] = dataList.mdnb_amountfield111
- left14[1][2][2] = dataList.mdnb_integerfield61
- left14[1][2][3] = dataList.mdnb_amountfield281
- left14[1][3][2] = dataList.mdnb_integerfield81
- left14[1][3][3] = dataList.mdnb_amountfield301
- this.initChartL10()
- this.initChartL11()
- resolve(1);
- })
- });
- },
- // 获取左边投资额度分析
- getDate5 () {
- let that = this
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "data": {
- "mdnb_combofield": "A",
- "mdnb_datefield": "2023-01-01",
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqtzedfx', value).then(res => {
- let dataList = res.data.rows[0]
- left1[0] = dataList.mdnb_amountfield
- left1[1] = dataList.mdnb_amountfield1
- left1[2] = dataList.mdnb_amountfield2
- left2[0] = dataList.mdnb_decimalfield
- left2[1] = dataList.mdnb_amountfield3
- this.initChartL1()
- resolve(1);
- })
- });
- },
- // 获取左边重点项目两线指标
- getDate6 () {
- let that = this
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "data": {
- "mdnb_combofield": "A",
- "mdnb_datefield": "2023-01-01",
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqzdlxzb', value).then(res => {
- let dataList2 = this.classify(res.data.rows[0].mdnb_entryentity1, 'mdnb_textfield3')
- left12 = []
- dataList2.forEach((item, index) => {
- left12[index] = [[], [], []]
- for (let i = 0; i < 5; i++) {
- left12[index][0] = item.data[i].mdnb_integerfield10
- left12[index][1] = item.data[i].mdnb_integerfield12
- left12[index][2] = item.data[i].mdnb_integerfield9
- }
- })
- let dataList = []
- dataList2.forEach((item, index) => {
- dataList[index] = []
- dataList[index][0] = item.data[0].mdnb_textfield18
- dataList[index][1] = item.data[0].mdnb_textfield3
- dataList[index][2] = item.data[0].mdnb_amountfield24
- })
- this.storageRecordConfig.data = dataList
- this.storageRecordConfig = { ...this.storageRecordConfig }
- center8 = dataList
- resolve(1);
- })
- });
- },
- // 获取右边顶部条数据
- getDate7 () {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "request": {
- isInsert: this.mockData ? '1' : '0',
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getTabpageap', value).then(res => {
- right1[0].number = res.data.mdnb_one_step
- right1[2].number = res.data.mdnb_two_step
- right1[4].number = res.data.mdnb_three_step
- right1[6].number = res.data.mdnb_four_step
- right1[8].number = res.data.mdnb_five_step
- right1[10].number = res.data.mdnb_six_step
- right1[12].number = res.data.mdnb_seven_step
- right1[14].number = res.data.mdnb_eight_step
- resolve(1);
- })
- });
- },
- // 获取右边中间左边的(正偏差/容差内/负偏差)
- getDate8 () {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "request": {
- isInsert: this.mockData ? '1' : '0',
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getInvestSunstraction', value).then(res => {
- right3[0].value = res.data.mdnb_projectnum_z
- right3[0].value2 = res.data.mdnb_amountall_z
- right3[1].value = res.data.mdnb_projectnum_r
- right3[1].value2 = res.data.mdnb_amountall_r
- right3[2].value = res.data.mdnb_projectnum_f
- right3[2].value2 = res.data.mdnb_amountall_f
- resolve(1);
- })
- });
- },
- // 获取右边中间右边的(预算额/已签合同额。。。)
- getDate9 () {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "request": {
- isInsert: this.mockData ? '1' : '0',
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getUnitBudgetExecuteDate', value).then(res => {
- res.data.forEach((item, index) => {
- right4[index].value = this.yuanChange(item.mdnb_aheadmoney)
- right4[index].value2 = this.yuanChange(item.mdnb_edmoney)
- right4[index].value3 = this.yuanChange(item.mdnb_smoney)
- right4[index].value4 = this.yuanChange(item.mdnb_jmoney)
- right4[index].value5 = this.yuanChange(item.mdnb_fkmoney)
- })
- this.initChartR1()
- resolve(1);
- })
- });
- },
- // 进度成本偏差
- getDate10 () {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "request": {
- isInsert: this.mockData ? '1' : '0',
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getInvestSunstractionGas', value).then(res => {
- res.data.forEach((item, index) => {
- right5[0][index][1] = item.mdnb_amount_zb
- right5[0][index][2] = item.mdnb_amount_z
- right5[1][index][1] = item.mdnb_amount_nb
- right5[1][index][2] = item.mdnb_amount_n
- right5[2][index][1] = item.mdnb_amount_fb
- right5[2][index][2] = item.mdnb_amount_f
- })
- console.log(right5,'?????????????')
- this.initChartR2()
- resolve(1);
- })
- });
- },
- // 项目风险分析A
- getDate11 () {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "request": {
- isInsert: this.mockData ? '1' : '0',
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getUnitNoSolveDangerDate', value).then(res => {
- res.data.forEach((item, index) => {
- right6[index].value = item.mdnb_height
- right6[index].value2 = item.mdnb_midle
- right6[index].value3 = item.mdnb_bottom
- })
- this.initChartR3()
- resolve(1);
- })
- });
- },
- // 项目风险分析B(雷达图)
- getDate12 () {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "request": {
- isInsert: this.mockData ? '1' : '0',
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getUnitDangerPoraitDate', value).then(res => {
- res.data.forEach((item, index) => {
- right7[index][0] = item.mdnb_anquan
- right7[index][1] = item.mdnb_fukuan
- right7[index][2] = item.mdnb_hetong
- right7[index][3] = item.mdnb_jiesuan
- right7[index][4] = item.mdnb_jindu
- right7[index][5] = item.mdnb_securty
- })
- this.getDate11()
- resolve(1);
- })
- });
- },
- // 中间大屏数据
- getDate14 () {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- mock: true,
- presetYear: 2023
- }
- get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/getKeyData', value).then(res => {
- // 头部指标
- center4[0] = res.data.transformations.estateAmount
- center4[1] = res.data.transformations.estateNum
- center4[2] = res.data.transformations.figureAmount
- center4[3] = res.data.transformations.figureNum
- // 左投部指标
- center1[0] = res.data.keyIndicators.totalSum
- center1[1] = res.data.keyIndicators.total
- center1[2] = res.data.keyIndicators.property
- center1[3] = res.data.keyIndicators.invest
- // 投资产业分布
- for(let i = 0;i<center2.length;i++){
- center2[i].y = res.data.distribution[i].amount
- center2[i].num = res.data.distribution[i].count
- center2[i].typeno = res.data.distribution[i].typeno
- }
- // 投资执行情况
- res.data.implementationStatus.forEach((item, index) => {
- center3[index].value = item.plan
- center3[index].value2 = item.reality
- })
- // 五个一体化
- res.data.five.forEach((item, index) => {
- center6[index] = { name: item.type, value: item.amount, typeno: item.typeno }
- })
- // 投资阶段分析
- res.data.investmentStage.forEach((item, index) => {
- center7[index] = { name: item.type, value: Number(item.num), value2: Number(item.amount), typeno: item.typeno, sliced: false, selected: false }
- })
- // 重点项目监控
- center8 = []
- res.data.projectMonitoring.forEach((item, index) => {
- center8.push({ value: item.amount, name: item.name, office: item.group, typeno: item.typeno })
- })
- // 中国地图
- // center5 = []
- // res.data.investmentMap.forEach((item, index) => {
- // center5.push({ name: item.address, value: item.amount, value2: item.value2 })
- // })
- // 山西地图
- // center5 = []
- // res.data.investmentMap.forEach((item, index) => {
- // center5.push({ name: item.address, value: item.amount, value2: item.value2 })
- // })
- // 项目状态
- proState.projectStatus1 = res.data.projectStatus.projectStatus1
- proState.projectStatus2 = res.data.projectStatus.projectStatus2
- proState.projectStatus3 = res.data.projectStatus.projectStatus3
- resolve(1);
- })
- });
- },
- // 右边穿透一级
- rightPenetrateOne () {
- this.boardType = 'right'
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "request": {
- isInsert: this.mockData ? '1' : '0'
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getOneLevelData', value).then(res => {
- res.data.forEach((item, index) => {
- common4[index] = item.mdnb_projects
- common5[index] = item.mdnb_amount_sl
- })
- setTimeout(() => {
- this.initChartLTip2('right')
- this.initChartLTip3('right')
- })
- resolve(1);
- })
- });
- },
- // 右边穿透二级
- rightPenetrateTwo (modelName, substraction, orgName) {
- this.boardType = 'right'
- let that = this
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "request": {
- isInsert: this.mockData ? '1' : '0',
- modelName,
- substraction,
- orgName
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getTwoLevelData', value).then(res => {
- that.config6.data = []
- that.originalConfig6 = res.data
- res.data.forEach((item, index) => {
- that.config6.data[index] = []
- that.config6.data[index][0] = item.mdnb_project_name
- that.config6.data[index][1] = item.mdnb_org
- that.config6.data[index][2] = item.mdnb_implement_org
- that.config6.data[index][3] = item.mdnb_insdrutytype1
- that.config6.data[index][4] = item.mdnb_insdrutytype2
- that.config6.data[index][5] = item.mdnb_investment_money
- })
- that.config6 = { ...that.config6 }
- that.projectListTipShow = true
- resolve(1);
- })
- });
- },
- // 左边穿透一级
- leftPenetrateOne (mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeNum, type, param, paramCTwo) {
- this.boardType = 'left'
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "data": {
- mdnb_combofield: this.mockData ? 'B' : 'A',
- mdnb_textfield11,
- mdnb_textfield13,
- mdnb_textfield16,
- mdnb_textfield23,
- mdnb_datefield: this.year + '-01-01'
- },
- pageSize: 1000
- }
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/yjct', value).then(res => {
- if (typeNum == 2) {
- common4 = []
- common5 = []
- res.data.rows[0].mdnb_entryentity12.forEach((item, index) => {
- common4.push(item.mdnb_integerfield18)
- common5.push(item.mdnb_amountfield12)
- })
- setTimeout(() => {
- this.initChartLTip2('left', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo)
- this.initChartLTip3('left', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo)
- })
- } else if (typeNum == 1) {
- this.initChartLTip('left', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo)
- }
- resolve(1);
- })
- });
- },
- // 左边穿透二级
- leftPenetrateTwo (mdnb_textfield12, mdnb_textfield19, mdnb_textfield15, mdnb_textfield17, mdnb_textfield20) {
- this.boardType = 'left'
- let that = this
- console.log(mdnb_textfield12, mdnb_textfield19, mdnb_textfield15, mdnb_textfield17, mdnb_textfield20)
- if (that.versions) {
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- "data": {
- mdnb_combofield: this.mockData ? 'B' : 'A',
- mdnb_datefield: this.year + '-03-03',
- mdnb_textfield12,
- mdnb_textfield19,
- mdnb_textfield15,
- mdnb_textfield17,
- mdnb_textfield20
- },
- pageSize: 1000
- }
- if (mdnb_textfield20) {
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/ejct', value).then(res => {
- // res.data.forEach((item, index) => {
- // that.config6.data[index] = []
- // that.config6.data[index][0] = item.mdnb_project_name
- // that.config6.data[index][2] = item.mdnb_implement_org
- // that.config6.data[index][3] = item.mdnb_insdrutytype1
- // that.config6.data[index][4] = item.mdnb_insdrutytype2
- // })
- // that.config6 = { ...that.config6 }
- that.projectListTipShow = true
- resolve(1);
- })
- } else {
- post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tzedfxzed', value).then(res => {
- // res.data.forEach((item, index) => {
- // that.config6.data[index] = []
- // that.config6.data[index][0] = item.mdnb_project_name
- // that.config6.data[index][2] = item.mdnb_implement_org
- // that.config6.data[index][3] = item.mdnb_insdrutytype1
- // that.config6.data[index][4] = item.mdnb_insdrutytype2
- // })
- // that.config6 = { ...that.config6 }
- that.projectListTipShow = true
- resolve(1);
- })
- }
- });
- } else {
- that.projectListTipShow = true
- }
- },
- // 中间穿透一级 一个柱状图还是两个
- centerPenetrateOne (type, param, typeNum, typeCTwo, paramCTwo,portType) {
- this.boardType = 'center'
- let that = this
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- mock: this.mockData,
- presetYear: this.year,
- type,
- param
- }
- get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/getPenetrationLevel1', value).then(res => {
- if (typeNum == 1) {
- common3 = []
- res.data.keyIndicators.forEach((item, index) => {
- if (param == 'cyplanamount') {
- common3.push(item.cyplanamount)
- }
- if (param == 'cyplancount') {
- common3.push(item.cyplanamount)
- }
- if (param == 'szplanamount') {
- common3.push(item.cyplanamount)
- }
- if (param == 'szplancount') {
- common3.push(item.szplancount)
- }
- if (param == 'investamount') {
- common3.push(item.investamount)
- }
- if (param == 'projectcount') {
- common3.push(item.projectcount)
- }
- if (param == 'gdzcamount') {
- common3.push(item.projectcount)
- }
- if (param == 'gqtzamount') {
- common3.push(item.projectcount)
- }
- if (param == 'ceiamount') {
- common3.push(item.ceiamount)
- }
- if (param == 'cpneiamount') {
- common3.push(item.cpneiamount)
- }
- if (param == 'ccheiamount') {
- common3.push(item.ccheiamount)
- }
- if (param == 'cdiamount') {
- common3.push(item.cdiamount)
- }
- if (param == 'cciamount') {
- common3.push(item.cciamount)
- }
- })
- setTimeout(() => {
- this.initChartLTip('center', '', '', '', '', typeCTwo, paramCTwo,portType)
- })
- } else if (typeNum == 2) {
- common4 = []
- common5 = []
- if (type == 'distribution') {
- that.changeLine = false
- that.lineCommonCompany = res.data.topData.map(item => item.type)
- common4 = res.data.topData.map(item => item.amount)
- common5 = res.data.bottomData.map(item => item.amount)
- } else {
- if (param == '新建') {
- res.data.keyIndicators.forEach((item, index) => {
- common4.push(item.newamount)
- common5.push(item.newcount)
- })
- } else if (param == '续建') {
- res.data.keyIndicators.forEach((item, index) => {
- common4.push(item.renewamount)
- common5.push(item.renewcount)
- })
- }
- }
- setTimeout(() => {
- this.initChartLTip2('center', '', '', '', '', type, param, typeCTwo, paramCTwo,portType)
- this.initChartLTip3('center', '', '', '', '', type, param, typeCTwo, paramCTwo,portType)
- })
- } else if (typeNum == 3) {
- that.initProvinceChart()
- }
- resolve(1);
- })
- });
- },
- // 中间穿透二级
- centerPenetrateTwo (type, param, orgNum, portType) {
- console.log('走了这里了',type, param, orgNum, portType)
- this.boardType = 'center'
- let that = this
- return new Promise((resolve, err) => {
- let value = {
- access_token: this.access_token,
- mock: this.mockData,
- presetYear: this.year,
- type,
- param,
- orgNum
- }
- if (portType == 1) {
- get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/MainPageMonthReportProject', value).then(res => {
- console.log('看看二级穿透', res)
- that.config6.data = []
- that.originalConfig6 = res.data
- res.data.forEach((item, index) => {
- that.config6.data[index] = []
- that.config6.data[index][0] = item.projectname
- that.config6.data[index][2] = item.orgName
- that.config6.data[index][5] = item.amount
- })
- that.config6 = { ...that.config6 }
- that.projectListTipShow = true
- resolve(1);
- })
- } else if (portType == 2) {
- get('/ierp/kapi/v2/mdnb/mdnb_xmkb_ext/presetdata/MainPagePlanProject', value).then(res => {
- console.log('看看二级穿透', res)
- that.config6.data = []
- that.originalConfig6 = res.data
- res.data.forEach((item, index) => {
- that.config6.data[index] = []
- that.config6.data[index][0] = item.projectname
- that.config6.data[index][2] = item.orgName
- that.config6.data[index][5] = item.amount
- })
- that.config6 = { ...that.config6 }
- that.projectListTipShow = true
- resolve(1);
- })
- }
- });
- },
- yellowMouse (index) {
- if (index % 2 == 0) {
- this.yellowCount = index
- this.yellowPosition = (index / 2 - 1) * 315 + 40
- this.yellowType = false
- this.changeYellow()
- }
- },
- // 回到中国地图
- backChina () {
- this.centerShow = false
- this.mapChart.dispose()
- setTimeout(() => {
- this.initChinaChart()
- });
- },
- // 找公司编码
- findCode (code) {
- let a = this.commonCompanyAll.find((item, index) => {
- return item.simplename == code
- })
- return a ? a.number.slice(0, 4) : ''
- },
- // 找项目编码
- findProjectCode (a, b,type) {
- if(type == 'center'){
- let c = this.originalConfig6.find(item => {
- return item.projectname == a && item.orgName == b
- })
- return c.projectno
- }else if(type == 'right'){
- let c = this.originalConfig6.find(item => {
- return item.mdnb_project_name == a && item.mdnb_org == b
- })
- return c.mdnb_projectnumber
- }
- },
- // 去项目看板
- goLookBoard (e) {
- // this.findProjectCode(e.row[0],e.row[2])
- // 当前页面打开
- // window.location.href = `http://192.168.2.111:8080/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://192.168.2.111:8080/ierp/index.html?formId=mdnb_threetoproject&prj=PL_ZZGY_0_2023_000036`
- // 新页面打开
- // window.open('http://192.168.2.111:8080/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://192.168.2.111:8080/ierp/index.html?formId=mdnb_threetoproject&prj=PL_ZZGY_0_2023_000036')
- this.boardUrl = `http://172.21.3.68:8081/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://172.21.3.68:8081/ierp/index.html?formId=mdnb_threetoproject&prj=${this.findProjectCode(e.row[0], e.row[2],this.boardType)}`
- this.boardTipShow = true
- console.log(this.boardUrl,'跳转去的项目看板地址')
- },
- // 根据key分组
- classify (arr, k) {
- let map = {};
- let myArr = [];
- for (let i = 0; i < arr.length; i++) {
- if (!map[arr[i][k]]) {
- let a = {}
- a[k] = arr[i][k]
- a.data = [arr[i]]
- myArr.push(a)
- map[arr[i][k]] = arr[i]
- } else {
- for (let j = 0; j < myArr.length; j++) {
- if (arr[i][k] === myArr[j][k]) {
- myArr[j].data.push(arr[i]);
- break
- }
- }
- }
- }
- return myArr
- },
- // 两个柱状图的弹窗
- showChartLTipDouble (e, location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo, portType) {
- this.titleName = e
- this.closeTap()
- this.echartDoubleTipShow = true
- if (this.versions) {
- if (location == 'right') {
- this.rightPenetrateOne()
- }
- if (location == 'left') {
- this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, 2)
- }
- if (location == 'center') {
- this.centerPenetrateOne(type, param, 2, typeCTwo, paramCTwo, portType)
- }
- } else {
- setTimeout(() => {
- this.initChartLTip2()
- this.initChartLTip3()
- })
- }
- },
- // 单个柱状图的弹窗
- showChartLTipSingle (e, location, type, param, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo, portType) {
- this.closeTap()
- this.titleName = e
- this.echartSingleTipShow = true
- if (this.versions) {
- if (location == 'center') {
- this.centerPenetrateOne(type, param, 1, typeCTwo, paramCTwo, portType)
- }
- if (location == 'left') {
- this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, 1, type, param)
- }
- } else {
- setTimeout(() => {
- this.initChartLTip(location)
- })
- }
- },
- initChartLTip (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo,portType) {
- this.myChartTip1 = echarts.init(document.getElementById("echartSingleTip"));
- let option = {
- grid: {
- top: 40,
- right: 0,
- left: 60,
- bottom: 70,
- },
- tooltip: {
- show: true,
- trigger: "axis",
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- },
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- },
- 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: '亿',
- nameTextStyle: {//y轴上方单位的颜色
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- axisTick: {
- lineStyle: {
- color: "#18416F",
- },
- },
- // y轴的字体颜色
- axisLabel: {
- textStyle: {
- color: "white",
- fontSize: '20'
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- //y轴线的颜色以及宽度
- axisLine: {
- show: true,
- lineStyle: {
- color: "#1E5389",
- width: 1,
- type: "solid",
- },
- },
- },
- series: [
- // {
- // name: "2022年额度",
- // type: "bar",
- // data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
- // showBackground: false,
- // backgroundStyle: {
- // color: "#18416F",
- // },
- // barWidth: "10%",
- // itemStyle: {
- // barBorderRadius: [10, 10, 0, 0],
- // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- // {
- // offset: 0,
- // color: '#082550',
- // },
- // {
- // offset: 1,
- // color: '#69c0ff',
- // },
- // ]),
- // },
- // },
- {
- name: "2023年额度",
- type: "bar",
- data: common3,
- showBackground: false,
- backgroundStyle: {
- color: "#18416F",
- },
- barWidth: "30%",
- itemStyle: {
- // barBorderRadius: [10, 10, 0, 0],
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: '#082550',
- },
- {
- offset: 1,
- color: '#957DFF',
- },
- ]),
- },
- },
- ],
- legend: {
- // data: ["2022年额度", "2023年额度"],
- data: ["2023年额度"],
- textStyle: {
- // 图列内容样式
- color: "#fff", // 字体颜色
- fontSize: "20",
- fontFamily: 'Microsoft YaHei'
- },
- right: 'center',
- y: 5,
- // 小图标的宽高
- },
- };
- tools.loopShowTooltip(this.myChartTip1, option, {
- nterval: 2000,
- loopSeries: true,
- })
- let that = this
- that.myChartTip1.on('click', function (param) {
- if (that.versions) {
- if (location == 'right') {
- that.rightPenetrateTwo('', '', that.findCode(param.name))
- } else if (location == 'left') {
- that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name)
- } else if (location == 'center') {
- that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name),portType)
- }
- } else {
- that.projectListTipShow = true
- }
- })
- that.myChartTip1.setOption(option);
- },
- initChartLTip2 (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo,portType) {
- this.myChartTip2 = echarts.init(document.getElementById("echartSingleTip2"));
- let option = {
- grid: {
- top: 40,
- right: 0,
- left: 60,
- bottom: '15%',
- },
- tooltip: {
- show: true,
- trigger: "axis",
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- },
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- },
- xAxis: {
- data: this.changeLine ? commonCompany : this.lineCommonCompany,
- 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: '个',
- nameTextStyle: {//y轴上方单位的颜色
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- axisTick: {
- lineStyle: {
- color: "#18416F",
- },
- },
- // y轴的字体颜色
- axisLabel: {
- textStyle: {
- color: "#fff",
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- //y轴线的颜色以及宽度
- axisLine: {
- show: true,
- lineStyle: {
- color: "#1E5389",
- width: 1,
- type: "solid",
- },
- },
- },
- series: [
- {
- name: "2023年额度",
- type: this.changeLine ? "bar" : 'line',
- data: common4,
- showBackground: false,
- backgroundStyle: {
- color: "#18416F",
- },
- barWidth: "30%",
- itemStyle: {
- // barBorderRadius: [10, 10, 0, 0],
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: '#082550',
- },
- {
- offset: 1,
- color: '#957DFF',
- },
- ]),
- },
- },
- ],
- legend: {
- // data: ["2022年额度", "2023年额度"],
- data: ["2023年额度"],
- textStyle: {
- // 图列内容样式
- color: "#fff", // 字体颜色
- fontSize: "20",
- fontFamily: 'Microsoft YaHei'
- },
- right: 'center',
- y: 0,
- // 小图标的宽高
- },
- };
- tools.loopShowTooltip(this.myChartTip2, option, {
- nterval: 2000,
- loopSeries: true,
- })
- let that = this
- that.myChartTip2.on('click', function (param) {
- if (that.versions) {
- if (location == 'right') {
- that.rightPenetrateTwo('', '', that.findCode(param.name))
- } else if (location == 'left') {
- that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name)
- } else if (location == 'center') {
- that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name),portType)
- }
- } else {
- that.projectListTipShow = true
- }
- })
- that.myChartTip2.setOption(option);
- },
- initChartLTip3 (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo) {
- this.myChartTip3 = echarts.init(document.getElementById("echartSingleTip3"));
- let option = {
- grid: {
- top: 40,
- right: 0,
- left: 60,
- bottom: '15%',
- },
- tooltip: {
- show: true,
- trigger: "axis",
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- },
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- },
- xAxis: {
- data: commonCompany,
- axisTick: {
- show: false,
- },
- // x轴的字体颜色
- axisLabel: {
- rotate: 40,
- textStyle: {
- color: "#fff",
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- //y轴线的颜色以及宽度
- axisLine: {
- show: true,
- lineStyle: {
- color: "#1E5389",
- width: 1,
- type: "solid",
- },
- },
- },
- yAxis: {
- name: '亿',
- nameTextStyle: {//y轴上方单位的颜色
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- axisTick: {
- lineStyle: {
- color: "#18416F",
- },
- },
- // y轴的字体颜色
- axisLabel: {
- textStyle: {
- color: "#fff",
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- //y轴线的颜色以及宽度
- axisLine: {
- show: true,
- lineStyle: {
- color: "#1E5389",
- width: 1,
- type: "solid",
- },
- },
- },
- series: [,
- {
- name: "2023年额度",
- type: "bar",
- data: common5,
- showBackground: false,
- backgroundStyle: {
- color: "#18416F",
- },
- barWidth: "30%",
- itemStyle: {
- // barBorderRadius: [10, 10, 0, 0],
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: '#082550',
- },
- {
- offset: 1,
- color: '#69c0ff',
- },
- ]),
- },
- },
- ],
- legend: {
- data: ["2023年额度"],
- textStyle: {
- // 图列内容样式
- color: "#fff", // 字体颜色
- fontSize: "20",
- fontFamily: 'Microsoft YaHei'
- },
- right: 'center',
- y: 5,
- },
- };
- tools.loopShowTooltip(this.myChartTip3, option, {
- nterval: 2000,
- loopSeries: true,
- })
- let that = this
- that.myChartTip3.on('click', function (param) {
- if (that.versions) {
- if (location == 'right') {
- that.rightPenetrateTwo('', '', that.findCode(param.name))
- } else if (location == 'left') {
- that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name)
- } else if (location == 'center') {
- that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name))
- }
- } else {
- that.projectListTipShow = true
- }
- })
- that.myChartTip3.setOption(option);
- },
- closeTap () {
- this.changeLine = true
- this.echartEnterpriseShow = false
- this.mapTipShow = false
- this.echartSingleTipShow = false
- this.echartDoubleTipShow = false
- this.projectListTipShow = false
- this.myChartTip1 ? this.myChartTip1.dispose() : ''
- this.myChartTip2 ? this.myChartTip2.dispose() : ''
- this.myChartTip3 ? this.myChartTip3.dispose() : ''
- },
- //点击弹窗左半部分
- popLeftClick () {
- if (this.titleUrl == '2.png') {
- this.titleUrl = '3.png'
- } else if (this.titleUrl == '7.png') {
- this.titleUrl = '8.png'
- } else if (this.titleUrl == '3.png') {
- this.titleUrl = '2.png'
- } else if (this.titleUrl == '8.png') {
- this.titleUrl = '7.png'
- } else if (this.titleUrl == '5.png') {
- this.titleUrl = '2.png'
- } else if (this.titleUrl == '10.png') {
- this.titleUrl = '7.png'
- }
- },
- //点击弹窗右半部分
- poprightClick () {
- if (this.titleUrl == '2.png') {
- this.titleUrl = '5.png'
- } else if (this.titleUrl == '7.png') {
- this.titleUrl = '10.png'
- } else if (this.titleUrl == '5.png') {
- this.titleUrl = '2.png'
- } else if (this.titleUrl == '10.png') {
- this.titleUrl = '7.png'
- } else if (this.titleUrl == '3.png') {
- this.titleUrl = '2.png'
- } else if (this.titleUrl == '8.png') {
- this.titleUrl = '7.png'
- }
- },
- // 标题弹窗
- showTitlePop (e, name) {
- this.closeTap()
- this.titleUrl = e
- this.titleName = name
- this.$nextTick(() => {
- this.mapTipShow = true
- })
- },
- changeYellow () {
- this.titleList.forEach((item, index) => {
- this.$set(this.titleList[index], 'type', 1)
- })
- this.$set(this.titleList[this.yellowCount], 'type', 2)
- if (this.yellowCount == 14) {
- this.yellowCount = 0
- this.yellowPosition += 315
- } else {
- if (this.yellowCount != 0) {
- this.yellowPosition += 315
- } else {
- this.yellowPosition = 40
- }
- this.yellowCount += 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 {
- return intPartFormat + '.' + floatPart
- }
- } else {
- return intPartFormat
- }
- },
- changeTopColor () {
- this.list = document.getElementsByClassName('row-item')
- for (var i = 0; i < this.list.length; i++) {
- if (i == 1) {
- this.list[i].classList.add('light')
- } else {
- this.list[i].classList.remove('light')
- }
- }
- this.initChartL9()
- },
- 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.chartCarousel.dispose()
- this.initChartL9()
- },
- initChartBall () {
- this.left11Chart = echarts.init(this.$refs['echartBall'])
- option = {
- series: [
- {
- type: "liquidFill",
- radius: "80%",
- data: [left2[0], left2[0] + 0.02, left2[0] - 0.02],
- amplitude: '4%',
- waveLength: '20%', //波浪长度
- // data: [
- // {}
- // ],
- backgroundStyle: {
- color: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.5,
- // 水球体颜色
- colorStops: [
- {
- offset: 0,
- color: "#010a11",
- },
- {
- offset: 0.9,
- color: "#1a2f45",
- },
- {
- offset: 1,
- color: "#2b405a",
- },
- ],
- 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: {
- color: "#fff", // x轴文字颜色
- fontSize: '70'
- },
- },
- },
- },
- ],
- };
- this.left11Chart.setOption(option)
- },
- initChartL1 () {
- this.left9Chart = echarts.init(this.$refs['echartL1'])
- option = {
- series: [
- {
- type: "liquidFill",
- radius: "80%",
- data: [left2[0], left2[0] + 0.02, left2[0] - 0.02],
- amplitude: '4%',
- // period:'1500',
- waveLength: '20%', //波浪长度
- // data: [
- // {}
- // ],
- backgroundStyle: {
- color: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.5,
- // 水球体颜色
- colorStops: [
- {
- offset: 0,
- color: "#010a11",
- },
- {
- offset: 0.9,
- // 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: {
- color: "#fff", // x轴文字颜色
- },
- },
- },
- },
- ],
- };
- this.left9Chart.setOption(option)
- },
- initChartL2 () {
- var chartData = left5
- var timer = null;
- var i = 0;
- let that = this
- var option = {
- colors: ['#064F78', '#623726', '#955773', , '#B57C63', '#BDB35D', '#73A88E', '#09736D', '#13400B', '#0D3265'],
- chart: {
- type: 'pie',
- backgroundColor: 'rgba(0,0,0,0)',
- options3d: {
- enabled: true,
- alpha: 45,
- //beta: 0
- },
- events: {
- // load,图表加载完成时触发
- load: function () {
- var chart = this;
- var points = chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- // item.sliced = true
- // item.selected = true
- }
- })
- that.left1Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- chartData.forEach((item, index) => {
- // item.sliced = false
- // item.selected = false
- })
- that.left1Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- }
- }
- },
- data: chartData
- }]
- })
- }
- }, 2000);
- },
- legendItemClick: function (event) {
- return true;
- }
- }
- },
- credits: {
- enabled: false //去掉hightchats水印
- },
- legend: {
- // labelFormatter: function() {
- // return 123;
- // },
- align: 'right',//横向位置
- verticalAlign: 'middle', // 纵向位置
- layout: "vertical",//横排还是竖排
- x: -110,
- y: 90,
- symbolWidth: 50,
- itemStyle: {
- fontSize: '20px',
- color: '#fff',
- x: 20,
- fontWeight: 0,
- fontFamily: 'Microsoft YaHei'
- },
- },
- title: {
- text: '主辅业计划占比',
- style: {
- color: '#fff',
- fontSize: 24,
- fontFamily: 'Microsoft YaHei',
- },
- align: 'center',
- verticalAlign: "bottom",
- x: -120
- },
- tooltip: {
- crosshairs: false,
- backgroundColor: 'rgba(0,0,0,0.5)',
- // positioner: function(e){
- // console.log(e, this)
- // },
- // useHTML: false, //开启html模式
- style: {
- color: '#fff',
- fontSize: '20',
- fontWeight: 0,
- fontFamily: 'Microsoft YaHei'
- },
- formatter: function (e) {
- let num = chartData[this.colorIndex].num
- this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
- return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
- },
- //pointFormat:
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- showInLegend: true, // 图例
- cursor: 'pointer',
- size: 220,
- innerSize: 150, //环形图中间空白,0为饼图
- depth: 25, //立体高度
- slicedOffset: 21, //动画距离
- dataLabels: {
- enabled: false, // 是否展示指示线
- format: '{point.name}: {point.percentage}'
- }
- },
- },
- series: [{
- type: 'pie',
- name: '占比',
- center: ['50%', '50%'],
- point: {
- events: {
- click: function (e) { //点击事件
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- },
- mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
- chartData.forEach((item, index) => {
- // item.sliced = false
- // item.selected = false
- })
- // chartData[e.target.index].sliced = true
- // chartData[e.target.index].selected = true
- that.left1Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- }
- }
- },
- data: chartData
- }]
- })
- timer && clearInterval(timer);
- },
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
- var points = that.left1Chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- // item.sliced = false
- // item.selected = false
- if (index == i) {
- // item.sliced = true
- // item.selected = true
- }
- })
- that.left1Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- that.left1Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- }
- }
- },
- data: chartData
- }]
- })
- }
- }, 2000);
- }
- }
- },
- data: chartData
- }]
- }
- that.left1Chart = Highcharts.chart('echartL2', option);
- function autoTooltip (point) {
- that.left1Chart.tooltip.refresh(point);
- }
- },
- initChartL3 () {
- var chartData = left6
- var timer = null;
- var i = 0;
- let that = this
- that.left2Chart = Highcharts.chart('echartL3', {
- colors: ['#064F78', '#623726', '#955773', , '#B57C63', '#BDB35D', '#73A88E', '#09736D', '#13400B', '#0D3265'],
- chart: {
- type: 'pie',
- backgroundColor: 'rgba(0,0,0,0)',
- options3d: {
- enabled: true,
- alpha: 45,
- //beta: 0
- },
- events: {
- // load,图表加载完成时触发
- load: function () {
- var chart = this;
- var points = chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- // item.sliced = true
- // item.selected = true
- }
- })
- that.left2Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- chartData.forEach((item, index) => {
- // item.sliced = false
- // item.selected = false
- })
- that.left2Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- }
- }
- },
- data: chartData
- }]
- })
- }
- }, 2000);
- },
- legendItemClick: function (event) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- return true;
- }
- }
- },
- credits: {
- enabled: false //去掉hightchats水印
- },
- legend: {
- // labelFormatter: function() {
- // return 123;
- // },
- align: 'right',//横向位置
- verticalAlign: 'middle', // 纵向位置
- layout: "vertical",//横排还是竖排
- x: -70,
- y: 90,
- symbolWidth: 50,
- itemStyle: {
- fontSize: '20px',
- color: '#fff',
- x: 20,
- fontWeight: 0,
- fontFamily: 'Microsoft YaHei'
- },
- },
- title: {
- text: '项目管理类型',
- style: {
- color: '#fff',
- fontSize: 24,
- fontFamily: 'Microsoft YaHei'
- },
- align: 'center',
- verticalAlign: "bottom",
- x: -120
- },
- tooltip: {
- crosshairs: true,
- backgroundColor: 'rgba(0,0,0,0.5)',
- // positioner: function(e){
- // console.log(e, this)
- // },
- useHTML: false, //开启html模式
- style: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- formatter: function (e) {
- //console.log(this)
- let num = chartData[this.colorIndex].num
- this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
- return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
- },
- //pointFormat:
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- showInLegend: true, // 图例
- cursor: 'pointer',
- size: 220,
- innerSize: 150, //环形图中间空白,0为饼图
- depth: 25, //立体高度
- slicedOffset: 21, //动画距离
- dataLabels: {
- enabled: false, // 是否展示指示线
- format: '{point.name}: {point.percentage}'
- }
- },
- },
- series: [{
- type: 'pie',
- name: '占比',
- // center: ['70%', '50%'],
- point: {
- events: {
- click: function (e) { //点击事件
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- },
- mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
- //console.log(e)
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- // chartData[e.target.index].sliced = true
- // chartData[e.target.index].selected = true
- that.left2Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- }
- }
- },
- data: chartData
- }]
- })
- timer && clearInterval(timer);
- },
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
- var points = that.left2Chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- // item.sliced = true
- // item.selected = true
- }
- })
- that.left2Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- that.left2Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- console.log(e)
- }
- }
- },
- data: chartData
- }]
- })
- }
- }, 2000);
- }
- }
- },
- data: chartData
- }]
- });
- function autoTooltip (point) {
- that.left2Chart.tooltip.refresh(point);
- }
- },
- initChartL4 (dataList) {
- this.left10Chart = echarts.init(document.getElementById("echartL4"));
- let option = {
- grid: {
- top: 45,
- right: 0,
- left: 60,
- bottom: 80,
- },
- tooltip: {
- show: true,
- trigger: "axis",
- formatter: data => {
- return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿`
- },
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- },
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- },
- 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: "2023年额度",
- type: "bar",
- data: left3[0],
- stack: 'Ad',
- showBackground: false,
- backgroundStyle: {
- color: "#18416F",
- },
- barWidth: "20",
- itemStyle: {
- // barBorderRadius: [10, 10, 0, 0],
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: '#082550',
- },
- {
- offset: 1,
- color: '#3986F8',
- },
- ]),
- },
- },
- {
- name: "总额度",
- type: "bar",
- data: left3[0],
- stack: 'Ad',
- showBackground: false,
- backgroundStyle: {
- color: "#18416F",
- },
- barWidth: "20",
- itemStyle: {
- // barBorderRadius: [10, 10, 0, 0],
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: '#b9b7c060',
- },
- {
- offset: 1,
- color: '#b9b7c060',
- },
- ]),
- },
- },
- ],
- legend: {
- // data: ["2022年额度", "2023年额度"],
- data: ["2023年额度"],
- textStyle: {
- // 图列内容样式
- color: "#fff", // 字体颜色
- fontSize: "20",
- fontFamily: 'Microsoft YaHei'
- },
- right: 'center',
- y: 5,
- // icon: "roundRect",
- // 小图标的宽高
- },
- };
- let that = this
- tools.loopShowTooltip(that.left10Chart, option, {
- nterval: 2000,
- loopSeries: true,
- })
- that.left10Chart.on('click', function (param) {
- that.titleName = param.name
- that.echartEnterpriseShow = true
- // 如果是接口版数据版
- if (that.versions) {
- let findData = dataList.find(item => {
- return item.mdnb_textfield == param.name
- })
- common1[0] = findData.mdnb_amountfield18
- common1[1] = findData.mdnb_amountfield20
- common1[2] = findData.mdnb_amountfield19
- common1[3] = findData.mdnb_amountfield26
- common1[4] = findData.mdnb_amountfield27
- common1[5] = findData.mdnb_amountfield25
- common2[0] = findData.mdnb_decimalfield6
- }
- setTimeout(() => {
- that.initChartBall()
- });
- })
- that.left10Chart.setOption(option);
- },
- initChartL5 () {
- var chartData = left7
- var timer = null;
- var i = 0;
- let that = this
- var option = {
- colors: ['#064F78', '#623726', '#955773', , '#B57C63', '#BDB35D', '#73A88E', '#09736D', '#13400B', '#0D3265'],
- chart: {
- type: 'pie',
- backgroundColor: 'rgba(0,0,0,0)',
- options3d: {
- enabled: true,
- alpha: 45,
- //beta: 0
- },
- events: {
- // load,图表加载完成时触发
- load: function () {
- var chart = this;
- var points = chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.left3Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- },
- legendItemClick: function (event) {
- console.log(event);
- return true;
- }
- }
- },
- credits: {
- enabled: false //去掉hightchats水印
- },
- legend: {
- // labelFormatter: function() {
- // return 123;
- // },
- align: 'right',//横向位置
- verticalAlign: 'middle', // 纵向位置
- layout: "vertical",//横排还是竖排
- x: -110,
- y: 50,
- symbolWidth: 50,
- itemDistance: 50,
- itemStyle: {
- fontSize: '20px',
- color: '#fff',
- x: 20,
- fontWeight: 0,
- fontFamily: 'Microsoft YaHei'
- },
- },
- title: {
- text: '传统产业分析',
- style: {
- color: '#fff',
- fontSize: 24,
- fontFamily: 'Microsoft YaHei'
- },
- align: 'center',
- verticalAlign: "bottom",
- x: -120
- },
- tooltip: {
- crosshairs: true,
- backgroundColor: 'rgba(0,0,0,0.5)',
- // positioner: function(e){
- // console.log(e, this)
- // },
- useHTML: false, //开启html模式
- style: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- formatter: function (e) {
- //console.log(this)
- let num = chartData[this.colorIndex].num
- this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
- return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
- },
- //pointFormat:
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- showInLegend: true, // 图例
- cursor: 'pointer',
- size: 220,
- innerSize: 150, //环形图中间空白,0为饼图
- depth: 25, //立体高度
- slicedOffset: 21, //动画距离
- dataLabels: {
- enabled: false, // 是否展示指示线
- format: '{point.name}: {point.percentage}'
- }
- },
- },
- series: [{
- type: 'pie',
- name: '占比',
- //center: ['35%','50%'],
- point: {
- events: {
- click: function (e) { //点击事件
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '')
- },
- mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
- //console.log(e)
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- chartData[e.target.index].sliced = true
- chartData[e.target.index].selected = true
- that.left3Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- timer && clearInterval(timer);
- },
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
- var points = that.left3Chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.left3Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- }
- }
- },
- data: chartData
- }]
- }
- that.left3Chart = Highcharts.chart('echartL5', option);
- function autoTooltip (point) {
- that.left3Chart.tooltip.refresh(point);
- }
- },
- initChartL6 () {
- var chartData = left8
- var timer = null;
- var i = 0;
- let that = this
- var option = {
- colors: ['#064F78', '#623726', '#955773', , '#B57C63', '#BDB35D', '#73A88E', '#09736D', '#13400B', '#0D3265'],
- chart: {
- type: 'pie',
- backgroundColor: 'rgba(0,0,0,0)',
- options3d: {
- enabled: true,
- alpha: 45,
- //beta: 0
- },
- events: {
- // load,图表加载完成时触发
- load: function () {
- var chart = this;
- var points = chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.left4Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- },
- legendItemClick: function (event) {
- console.log(event);
- return true;
- }
- }
- },
- credits: {
- enabled: false //去掉hightchats水印
- },
- legend: {
- // labelFormatter: function() {
- // return 123;
- // },
- align: 'right',//横向位置
- verticalAlign: 'middle', // 纵向位置
- layout: "vertical",//横排还是竖排
- x: -30,
- y: 30,
- symbolWidth: 50,
- itemDistance: 50,
- itemStyle: {
- fontSize: '20px',
- color: '#fff',
- x: 20,
- fontWeight: 0,
- fontFamily: 'Microsoft YaHei'
- },
- },
- title: {
- text: '战略性新兴产业',
- style: {
- color: '#fff',
- fontSize: 24,
- fontFamily: 'Microsoft YaHei'
- },
- align: 'center',
- verticalAlign: "bottom",
- x: -120
- },
- tooltip: {
- crosshairs: true,
- backgroundColor: 'rgba(0,0,0,0.5)',
- // positioner: function(e){
- // console.log(e, this)
- // },
- useHTML: false, //开启html模式
- style: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- formatter: function (e) {
- //console.log(this)
- let num = chartData[this.colorIndex].num
- this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
- return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
- },
- //pointFormat:
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- showInLegend: true, // 图例
- cursor: 'pointer',
- size: 220,
- innerSize: 150, //环形图中间空白,0为饼图
- depth: 25, //立体高度
- slicedOffset: 21, //动画距离
- dataLabels: {
- enabled: false, // 是否展示指示线
- format: '{point.name}: {point.percentage}'
- }
- },
- },
- series: [{
- type: 'pie',
- name: '占比',
- //center: ['35%','50%'],
- point: {
- events: {
- click: function (e) { //点击事件
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '')
- },
- mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
- //console.log(e)
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- chartData[e.target.index].sliced = true
- chartData[e.target.index].selected = true
- that.left4Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- timer && clearInterval(timer);
- },
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
- var points = that.left4Chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.left4Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- }
- }
- },
- data: chartData
- }]
- }
- that.left4Chart = Highcharts.chart('echartL6', option);
- function autoTooltip (point) {
- that.left4Chart.tooltip.refresh(point);
- }
- },
- initChartL7 () {
- var chartData = left9
- var timer = null;
- var i = 0;
- let that = this
- var option = {
- colors: ['#064F78', '#623726', '#955773', , '#B57C63', '#BDB35D', '#73A88E', '#09736D', '#13400B', '#0D3265'],
- chart: {
- type: 'pie',
- backgroundColor: 'rgba(0,0,0,0)',
- options3d: {
- enabled: true,
- alpha: 45,
- //beta: 0
- },
- events: {
- // load,图表加载完成时触发
- load: function () {
- var chart = this;
- var points = chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.left5Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- },
- legendItemClick: function (event) {
- console.log(event);
- return true;
- }
- }
- },
- credits: {
- enabled: false //去掉hightchats水印
- },
- title: {
- text: '特色优势产业',
- style: {
- color: '#fff',
- fontSize: 24,
- fontFamily: 'Microsoft YaHei'
- },
- align: 'center',
- verticalAlign: "bottom",
- x: -120
- },
- legend: {
- // labelFormatter: function() {
- // return 123;
- // },
- align: 'right',//横向位置
- verticalAlign: 'middle', // 纵向位置
- layout: "vertical",//横排还是竖排
- x: -50,
- y: 30,
- symbolWidth: 50,
- itemDistance: 50,
- itemStyle: {
- fontSize: '20px',
- color: '#fff',
- x: 20,
- fontWeight: 0,
- fontFamily: 'Microsoft YaHei'
- },
- },
- tooltip: {
- crosshairs: true,
- backgroundColor: 'rgba(0,0,0,0.5)',
- // positioner: function(e){
- // console.log(e, this)
- // },
- useHTML: false, //开启html模式
- style: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- formatter: function (e) {
- //console.log(this)
- let num = chartData[this.colorIndex].num
- this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
- return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
- },
- //pointFormat:
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- showInLegend: true, // 图例
- cursor: 'pointer',
- size: 220,
- innerSize: 150, //环形图中间空白,0为饼图
- depth: 25, //立体高度
- slicedOffset: 21, //动画距离
- dataLabels: {
- enabled: false, // 是否展示指示线
- format: '{point.name}: {point.percentage}'
- }
- },
- },
- series: [{
- type: 'pie',
- name: '占比',
- //center: ['35%','50%'],
- point: {
- events: {
- click: function (e) { //点击事件
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '')
- },
- mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
- //console.log(e)
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- chartData[e.target.index].sliced = true
- chartData[e.target.index].selected = true
- that.left5Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- timer && clearInterval(timer);
- },
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
- var points = that.left5Chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.left5Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- }
- }
- },
- data: chartData
- }]
- }
- that.left5Chart = Highcharts.chart('echartL7', option);
- function autoTooltip (point) {
- that.left5Chart.tooltip.refresh(point);
- }
- },
- initChartL8 () {
- var chartData = left10
- var timer = null;
- var i = 0;
- let that = this
- var option = {
- colors: ['#064F78', '#623726', '#955773', , '#B57C63', '#BDB35D', '#73A88E', '#09736D', '#13400B', '#0D3265'],
- chart: {
- type: 'pie',
- backgroundColor: 'rgba(0,0,0,0)',
- options3d: {
- enabled: true,
- alpha: 45,
- //beta: 0
- },
- events: {
- // load,图表加载完成时触发
- load: function () {
- var chart = this;
- var points = chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.left6Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- },
- legendItemClick: function (event) {
- console.log(event);
- return true;
- }
- }
- },
- credits: {
- enabled: false //去掉hightchats水印
- },
- title: {
- text: '公共基础等产业',
- style: {
- color: '#fff',
- fontSize: 24,
- fontFamily: 'Microsoft YaHei'
- },
- align: 'center',
- verticalAlign: "bottom",
- x: -120
- },
- legend: {
- // labelFormatter: function() {
- // return 123;
- // },
- align: 'right',//横向位置
- verticalAlign: 'middle', // 纵向位置
- layout: "vertical",//横排还是竖排
- x: -70,
- y: 50,
- symbolWidth: 50,
- itemDistance: 50,
- itemStyle: {
- fontSize: '20px',
- color: '#fff',
- x: 20,
- fontWeight: 0,
- fontFamily: 'Microsoft YaHei'
- },
- },
- tooltip: {
- crosshairs: true,
- backgroundColor: 'rgba(0,0,0,0.5)',
- // positioner: function(e){
- // console.log(e, this)
- // },
- useHTML: false, //开启html模式
- style: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- formatter: function (e) {
- //console.log(this)
- let num = chartData[this.colorIndex].num
- this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
- return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
- },
- //pointFormat:
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- showInLegend: true, // 图例
- cursor: 'pointer',
- size: 220,
- innerSize: 150, //环形图中间空白,0为饼图
- depth: 25, //立体高度
- slicedOffset: 21, //动画距离
- dataLabels: {
- enabled: false, // 是否展示指示线
- format: '{point.name}: {point.percentage}'
- }
- },
- },
- series: [{
- type: 'pie',
- name: '占比',
- //center: ['35%','50%'],
- point: {
- events: {
- click: function (e) { //点击事件
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '')
- },
- mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
- //console.log(e)
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- chartData[e.target.index].sliced = true
- chartData[e.target.index].selected = true
- that.left6Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- timer && clearInterval(timer);
- },
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
- var points = that.left6Chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.left6Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '')
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- }
- }
- },
- data: chartData
- }]
- }
- that.left6Chart = Highcharts.chart('echartL8', option);
- function autoTooltip (point) {
- that.left6Chart.tooltip.refresh(point);
- }
- },
- initChartL9 () {
- this.chartCarousel = echarts.init(document.getElementById("echartL9"));
- option = {
- tooltip: {
- trigger: 'axis',
- formatter: '指标:' + '{c0}' + '<br/>' + '发展线:' + '{c1}' + '<br/>' + '生存线:' + '{c2}', //+ '<br/>'+ '{a1}:{c1}' + '%',
- axisPointer: {
- type: 'shadow',
- },
- },
- grid: {
- top: '10%',
- right: '5%',
- left: '12%',
- bottom: '15%',
- },
- 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: 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: 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: left12[this.count + 1][0]
- },
- ],
- }
- let that = this
- // this.chartCarousel.on('click', function (param) {
- // that.titleName = param.name
- // that.echartSingleTipShow = true
- // setTimeout(() => {
- // that.initChartLTip()
- // });
- // })
- this.chartCarousel.on('mouseover', (params) => {
- that.$refs.indicator.handleHover(true, 1, 2, 3, 4)
- })
- this.chartCarousel.on('mouseout', (params) => {
- that.$refs.indicator.handleHover(false, 1, 2, 3, 4)
- })
- this.chartCarousel.setOption(option)
- // tools.loopShowTooltip(myChart, option, {
- // nterval: 2000,
- // loopSeries: true,
- // })
- },
- initChartL10 () {
- this.left7Chart = echarts.init(document.getElementById("echartL10"));
- let option = {
- title: {
- text: '固定资产进度分布',
- textStyle: {
- color: '#69C0FF',
- fontSize: 30,
- fontWeight: 500,
- fontFamily: 'Microsoft YaHei'
- },
- top: '20',
- left: '20'
- },
- textStyle: {
- color: '#fff',
- },
- tooltip: {
- 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: '#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: '#005094',
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff', //X轴文字颜色
- fontSize: 20,
- padding: [-320, 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]
- },
- ]
- }
- let that = this
- that.left7Chart.on('click', function (param) {
- that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '固定资产进度分布', param.name, param.seriesName)
- })
- that.left7Chart.setOption(option)
- tools.loopShowTooltip(that.left7Chart, option, {
- nterval: 2000,
- loopSeries: true,
- })
- },
- initChartL11 () {
- this.left8Chart = echarts.init(document.getElementById("echartL11"));
- let option = {
- title: {
- text: '股权类进度分布',
- textStyle: {
- color: '#69C0FF',
- fontSize: 30,
- fontWeight: 500,
- fontFamily: 'Microsoft YaHei'
- },
- top: '20',
- left: '20'
- },
- textStyle: {
- color: '#fff',
- },
- tooltip: {
- 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: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- axisPointer: {
- // lineStyle: {
- // type: 'dashed',
- // width: 2,
- // color: 'rgba(255,255,255,0.6)'
- // },
- animation: true
- }
- },
- 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: {
- 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: '#005094',
- width: 1,
- },
- },
- axisTick: {
- show: true, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff', //X轴文字颜色
- fontSize: 20,
- padding: [-320, 0, 0, 0],
- fontFamily: 'Microsoft YaHei'
- },
- },
- },
- series: [
- {
- name: '',
- type: 'scatter',
- symbol: 'circle',
- 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: '#40A9FF'
- }
- },
- data: left14[0]
- },
- {
- name: '',
- type: 'scatter',
- symbol: 'circle',
- 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: left14[1]
- },
- ]
- }
- let that = this
- that.left8Chart.on('click', function (param) {
- that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '股权类进度分布', param.name, param.seriesName)
- })
- that.left8Chart.setOption(option)
- tools.loopShowTooltip(that.left8Chart, option, {
- nterval: 2000,
- loopSeries: true,
- })
- },
- // 大屏二
- initChartC1 () {
- var chartData = center2
- var timer = null;
- var i = 0;
- let that = this
- var option = {
- colors: ['#064F78', '#623726', '#955773', , '#B57C63', '#BDB35D', '#73A88E', '#09736D', '#13400B', '#0D3265'],
- chart: {
- type: 'pie',
- backgroundColor: 'rgba(0,0,0,0)',
- options3d: {
- enabled: true,
- alpha: 60,
- //beta: 0
- },
- events: {
- // load,图表加载完成时触发
- load: function () {
- var chart = this;
- var points = chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.center1Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- },
- legendItemClick: function (event) {
- console.log(event);
- return true;
- }
- }
- },
- credits: {
- enabled: false //去掉hightchats水印
- },
- legend: {
- layout: 'vertical',
- align: 'right',
- y: -10,
- verticalAlign: 'bottom',
- itemStyle: {
- fontSize: '20px',
- color: '#fff',
- fontWeight: 0,
- fontFamily: 'Microsoft YaHei'
- }
- },
- tooltip: {
- crosshairs: true,
- backgroundColor: 'rgba(0,0,0,0.5)',
- useHTML: false, //开启html模式
- style: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- formatter: function (e) {
- let num = chartData[this.colorIndex].num
- this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
- return `${this.key}:<b>${this.percentage}%</b><br/>投资完成额:<b>${this.y}</b>亿<br/>投资数量:<b>${num}个</b>`
- },
- //pointFormat:
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- showInLegend: true, // 图例
- cursor: 'pointer',
- size: 500,
- // innerSize: 330, //环形图中间空白,0为饼图
- innerSize: 0, //环形图中间空白,0为饼图
- depth: 75, //立体高度
- slicedOffset: 40, //动画距离
- dataLabels: {
- enabled: false, // 是否展示指示线
- format: '{point.name}: {point.percentage}'
- }
- },
- },
- title: {
- text: '',
- style: {
- color: '#fff',
- fontSize: 24,
- fontFamily: 'Microsoft YaHei'
- },
- align: 'center',
- verticalAlign: "bottom",
- x: -120
- },
- series: [{
- type: 'pie',
- name: '占比',
- center: ['74%', '50%'],
- point: {
- events: {
- click: function (e) { //点击事件
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
- },
- mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
- //console.log(e)
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- chartData[e.target.index].sliced = true
- chartData[e.target.index].selected = true
- that.center1Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1)
- }
- }
- },
- data: chartData
- }]
- })
- timer && clearInterval(timer);
- },
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
- var points = that.center1Chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.center1Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, industry, e.point.options.typeno, 1)
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- }
- }, 2000);
- }
- }
- },
- data: chartData
- }]
- }
- that.center1Chart = Highcharts.chart('echartC1', option);
- function autoTooltip (point) {
- that.center1Chart.tooltip.refresh(point);
- }
- },
- initChartC2 () {
- let that = this
- that.center2Chart = echarts.init(this.$refs['echartC2'])
- that.center2Chart.on('showTip', (params) => {
- // 如果是7或者15并且满足防抖则切换
- if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartC2Fd) {
- that.echartC2Fd = false
- setTimeout(() => {
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
- that.center2Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartC2Fd = true
- }, 2000)
- }, 1900);
- // 如果是17表示到了最后一个,那么重新来一遍
- } else if (params.dataIndex == 17 && that.echartC2Fd) {
- that.echartC2Fd = false
- setTimeout(() => {
- option.dataZoom[0].endValue = 0
- option.dataZoom[0].startValue = 5
- that.center2Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartC2Fd = true
- }, 2000)
- }, 1900)
- }
- })
- let option = {
- tooltip: {
- formatter: data => {
- return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿`
- },
- trigger: 'axis',
- axisPointer: {
- // type: 'cross',',
- },
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- },
- 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, //鼠标滚轮触发滚动
- }
- ],
- grid: {
- top: '10%',
- right: '3%',
- left: '7%',
- bottom: '15%',
- },
- legend: {
- top: '1',
- right: 'center',
- textStyle: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- xAxis: {
- data: commonCompany,
- // data: center3.map(item => item.name),
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: '#005094',
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- rotate: 40,
- textStyle: {
- color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- },
- yAxis: [
- {
- type: 'value',
- name: '亿',
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#3D7495',
- },
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- ],
- series: [
- {
- name: '计划投资',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#69c0ff',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: center3.map(item => item.value),
- },
- {
- name: '实际投资',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#957DFF',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: center3.map(item => item.value2),
- },
- ],
- }
- that.center2Chart.on('click', function (param) {
- that.projectListTipShow = true
- that.centerPenetrateTwo('', '', that.findCode(param.name), param.seriesName == '计划投资' ? 2 : 1)
- })
- that.center2Chart.setOption(option)
- tools.loopShowTooltip(that.center2Chart, option, {
- nterval: 2000,
- loopSeries: true,
- })
- // let arr = center3.map(item => item.value2)
- // this.timeOut = setInterval(function () {
- // let startValue = myChart.getModel().option.dataZoom[0].startValue;
- // let endValue = myChart.getModel().option.dataZoom[0].endValue;
- // let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
- // let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
- // // 每次向后滚动一个,最后一个从头开始。
- // // console.log(option.dataZoom[0].endValue);
- // if (option.dataZoom[0].endValue >= 12) {
- // option.dataZoom[0].endValue = 5
- // option.dataZoom[0].startValue = 0
- // } else {
- // option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
- // option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
- // }
- // // myChart.dispatchAction({
- // // type: 'showTip',
- // // seriesIndex: 0,
- // // dataIndex: startValue +1,
- // // });
- // myChart.setOption(option);
- // }, 12000);
- },
- convertData (data) {
- var res = []
- for (var i = 0; i < data.length; i++) {
- var geoCoord = this.geoCoordMap[data[i].name]
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value),
- })
- }
- }
- return res
- },
- yuanChange (value) {
- return (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 {
- return intPartFormat + '.' + floatPart
- }
- } else {
- return intPartFormat
- }
- },
- initProvinceChart () {
- var data = center5
- this.geoCoordMap = []
- /*获取地图数据*/
- this.mapChart = echarts.init(this.$refs['echarts-map'])
- echarts.registerMap('shanxi', shanxi)
- var mapFeatures = echarts.getMap('shanxi').geoJson.features
- mapFeatures.forEach(v => {
- // 地区名称
- var name = v.properties.name
- // 地区经纬度
- this.geoCoordMap[name] = v.properties.centroid
- // 按照地图乱序
- // data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
- })
- let option = {
- tooltip: {
- padding: 15,
- enterable: true,
- transitionDuration: 1,
- formatter: (params, ticket, callback) => {
- // 清空所有轮播
- for (var k in this.geoCoordMap) {
- this.mapChart.dispatchAction({
- // type: 'geoUnSelect',
- type: 'downplay',
- name: k,
- })
- }
- // 如果鼠标滑动到线线上面,则返回空
- this.mapChart.dispatchAction({
- // type: 'geoSelect',
- type: 'highlight',
- name: params.name,
- })
- if (params.componentSubType == 'lines') {
- return
- }
- if (params.componentSubType == 'scatter') {
- let tipHtml = `
- <div class="tooltip-cont">
- <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
- <p>总投资额:<span>${params.data.value[2]}亿</span></p>
- </div>`
- callback(ticket, tipHtml)
- return tipHtml
- }
- if (params.componentSubType == 'map') {
- let tipHtml = `
- <div class="tooltip-cont">
- <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
- <p>总投资额:<span>${params.data.value}亿</span></p>
- </div>`
- callback(ticket, tipHtml)
- return tipHtml
- }
- },
- },
- visualMap: {
- show: false,
- min: 0,
- max: 300,
- right: 0,
- bottom: 0,
- text: ['高', '低'],
- textStyle: {
- color: '#f1f1f1'
- },
- realtime: false,
- calculable: false,
- inRange: {
- color: ['lightskyblue', '#2754b7']
- }
- },
- geo: {
- show: true,
- map: 'shanxi',
- layoutCenter: ['50%', '50%'], //地图位置
- layoutSize: '140%',
- label: {
- normal: {
- position: [100, 100],
- fontSize: 25,
- fontFamily: 'Microsoft YaHei',
- fontWeight: 600,
- color: '#fff',
- show: true,
- },
- emphasis: {
- show: true,
- color: '#e7e1a0',
- fontSize: 30,
- },
- },
- roam: false,
- itemStyle: {
- normal: {
- areaColor: '#1946a8',
- shadowColor: '#1946a8',
- borderWidth: 2, //设置外层边框
- borderColor: '#1946a8',
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 0,
- },
- emphasis: {
- areaColor: '#013d95',
- borderColor: '#e7e1a0',
- borderWidth: 4, //设置外层边框
- },
- },
- },
- series: [
- {
- type: 'map',
- map: 'shanxi',
- geoIndex: 0,
- aspectScale: 1.5, //长宽比
- data: data,
- },
- ],
- }
- let that = this
- this.mapChart.on('click', function (params) {
- if (params.name == '太原市') {
- that.showChartLTipDouble(params.name, 'center', '', '', '', '', '', 'investmentMap', '山西省')
- }
- })
- tools.loopShowTooltip(this.mapChart, option, {
- interval: 2000,
- loopSeries: false,
- });
- this.mapChart.setOption(option)
- },
- initChinaChart () {
- var data = [{ name: '河北', value: 60.35, value2: 28 },
- { name: '山西', value: 4060.35, value2: 29 },
- { name: '辽宁', value: 260.35, value2: 30 },
- { name: '吉林', value: 360.35, value2: 30 },
- { name: '黑龙江', value: 460.35, value2: 30 },
- { name: '江苏', value: 560.35, value2: 30 },
- { name: '浙江', value: 60.35, value2: 28 },
- { name: '安徽', value: 160.35, value2: 29 },
- { name: '福建', value: 260.35, value2: 30 },
- { name: '江西', value: 360.35, value2: 30 },
- { name: '山东', value: 460.35, value2: 30 },
- { name: '河南', value: 560.35, value2: 30 },
- { name: '湖北', value: 60.35, value2: 28 },
- { name: '湖南', value: 160.35, value2: 29 },
- { name: '广东', value: 260.35, value2: 30 },
- { name: '海南', value: 360.35, value2: 30 },
- { name: '四川', value: 6.35, value2: 30 },
- { name: '贵州', value: 560.35, value2: 30 },
- { name: '云南', value: 60.35, value2: 28 },
- { name: '陕西', value: 160.35, value2: 29 },
- { name: '甘肃', value: 260.35, value2: 30 },
- { name: '青海', value: 360.35, value2: 30 },
- { name: '台湾', value: 460.35, value2: 30 },
- { name: '内蒙古', value: 560.35, value2: 30 },
- { name: '广西', value: 60.35, value2: 28 },
- { name: '西藏', value: 160.35, value2: 29 },
- { name: '宁夏', value: 260.35, value2: 30 },
- { name: '新疆', value: 360.35, value2: 30 },
- { name: '北京', value: 460.35, value2: 30 },
- { name: '天津', value: 560.35, value2: 30 },
- { name: '上海', value: 260.35, value2: 30 },
- { name: '重庆', value: 360.35, value2: 30 },
- { name: '香港', value: 460.35, value2: 30 },
- { name: '澳门', value: 560.35, value2: 30 },]
- this.geoCoordMap = []
- /*获取地图数据*/
- this.mapChart = echarts.init(this.$refs['chinaMap'])
- 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] })
- })
- let option = {
- tooltip: {
- padding: 15,
- enterable: true,
- transitionDuration: 1,
- formatter: (params, ticket, callback) => {
- // 清空所有轮播
- this.mapChart.dispatchAction({
- // type: 'geoUnSelect',
- type: 'downplay',
- name: '南海诸岛',
- })
- for (var k in this.geoCoordMap) {
- this.mapChart.dispatchAction({
- // type: 'geoUnSelect',
- type: 'downplay',
- name: k,
- })
- }
- // 如果鼠标滑动到线线上面,则返回空
- this.mapChart.dispatchAction({
- // type: 'geoSelect',
- type: 'highlight',
- name: params.name,
- })
- if (params.componentSubType == 'lines') {
- return
- }
- if (params.componentSubType == 'scatter') {
- let tipHtml = `
- <div class="tooltip-cont">
- <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
- <p>总投资额:<span>${params.data.value[2]}亿</span></p>
- </div>`
- callback(ticket, tipHtml)
- return tipHtml
- }
- if (params.componentSubType == 'map') {
- let tipHtml = `
- <div class="tooltip-cont">
- <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
- <p>总投资额:<span>${params.data.value}亿</span></p>
- </div>`
- callback(ticket, tipHtml)
- return tipHtml
- }
- },
- },
- visualMap: {
- show: false,
- min: 0,
- max: 1000,
- left: '100',
- bottom: 100,
- text: ['高', '低'],
- textStyle: {
- color: '#f1f1f1'
- },
- realtime: true, //拖拽时,是否实时更新
- calculable: false,
- inRange: {
- color: ['lightskyblue', '#2754b7']
- },
- itemWidth: 50, //图形的宽度,即长条的宽度。
- itemHeight: 400, //图形的高度,即长条的高度。
- textStyle: {
- fontSize: 30,
- color: '#fff'
- }
- },
- geo: {
- show: true,
- map: 'china',
- layoutCenter: ['50%', '50%'], //地图位置
- layoutSize: '110%',
- label: {
- normal: {
- position: [100, 100],
- fontSize: 25,
- fontFamily: 'Microsoft YaHei',
- fontWeight: 600,
- color: '#fff',
- show: true,
- },
- emphasis: {
- show: true,
- color: '#e7e1a0',
- fontSize: 30,
- },
- },
- // 滑轮缩放
- roam: false,
- itemStyle: {
- normal: {
- areaColor: '#1946a8',
- shadowColor: '#1946a8',
- borderWidth: 2, //设置外层边框
- borderColor: '#0b245b',
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 0,
- },
- emphasis: {
- areaColor: '#013d95',
- borderColor: '#e7e1a0',
- borderWidth: 4, //设置外层边框
- },
- },
- },
- series: [
- {
- type: 'map',
- map: 'china',
- geoIndex: 0,
- data: data,
- },
- ],
- }
- let that = this
- this.mapChart.on('click', function (params) {
- if (params.name == '山西') {
- // that.showChartLTipDouble(params.name, 'center', '', '', '', '', '', 'investmentMap', '山西省')
- that.mapChart.dispose()
- that.centerShow = true
- setTimeout(() => {
- that.initChartC1()
- that.initChartC2()
- that.initChartC3()
- that.initChartC4()
- if (that.versions) {
- that.centerPenetrateOne('investmentMap', params.name, 3, '', '')
- } else {
- that.initProvinceChart()
- }
- that.initProjectList()
- })
- }
- })
- tools.loopShowTooltip(this.mapChart, option, {
- interval: 2000,
- loopSeries: false,
- });
- this.mapChart.setOption(option)
- },
- initChartC3 () {
- this.center3Chart = echarts.init(this.$refs['echartC3'])
- let option = {
- tooltip: {
- trigger: 'axis',
- formatter: '{a0}:{c0}' + '亿', //+ '<br/>'+ '{a1}:{c1}' + '%',
- axisPointer: {
- // type: 'cross',',
- },
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- },
- grid: {
- top: '8%',
- right: '3%',
- left: '7%',
- bottom: '10%',
- },
- // legend: {
- // top: '1',
- // textStyle: {
- // color: 'rgba(250,250,250,0.6)',
- // },
- // },
- xAxis: {
- data: commonCompany,
- // data: center6.map(item => item.name),
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: '#005094',
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- rotate: 20,
- textStyle: {
- color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- },
- yAxis: [
- {
- type: 'value',
- name: '亿',
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#3D7495',
- },
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- {
- type: 'value',
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisLabel: {
- show: true,
- formatter: '{value} %',
- textStyle: {
- color: 'rgba(250,250,250,0.6)',
- },
- },
- },
- ],
- series: [
- {
- type: 'bar',
- name: '投资金额',
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#69c0ff',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: center6.map(item => item.value),
- },
- ],
- }
- let that = this
- that.center3Chart.on('click', function (param) {
- if (param.name == '煤炭和煤电') {
- that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ceiamount', '', '', '', '', 'five', '1', 2)
- } else if (param.name == '煤电和新能源') {
- that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cpneiamount', '', '', '', '', 'five', '2', 2)
- } else if (param.name == '煤炭和化工') {
- that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ccheiamount', '', '', '', '', 'five', '3', 2)
- } else if (param.name == '煤炭和数字') {
- that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cdiamount', '', '', '', '', 'five', '4', 2)
- } else if (param.name == '煤炭和降碳') {
- that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cciamount', '', '', '', '', 'five', '5', 2)
- }
- })
- that.center3Chart.setOption(option)
- tools.loopShowTooltip(that.center3Chart, option, {
- nterval: 2000,
- loopSeries: true,
- })
- },
- initChartC4 () {
- var chartData = []
- var timer = null;
- var timer2 = null;
- var i = 0;
- center7.forEach((item, index) => {
- let obj = {
- name: item.name,
- y: item.value2,
- num: item.value,
- typeno: item.typeno,
- sliced: false,
- selected: false,
- color: index == 0 ? '#064F78' : '#623726'
- }
- chartData.push(obj)
- })
- let that = this
- that.center4Chart = Highcharts.chart('echartC4', {
- chart: {
- type: 'pie',
- backgroundColor: 'rgba(0,0,0,0)',
- options3d: {
- enabled: true,
- alpha: 60,
- //beta: 0
- },
- events: {
- // load,图表加载完成时触发
- load: function () {
- var chart = this;
- var points = chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.center4Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- that.center4Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
- }
- }
- },
- data: chartData
- }]
- })
- }
- }, 2000);
- },
- legendItemClick: function (event) {
- console.log(event);
- return true;
- }
- }
- },
- credits: {
- enabled: false //去掉hightchats水印
- },
- title: {
- text: null
- },
- tooltip: {
- crosshairs: true,
- backgroundColor: 'rgba(0,0,0,0.5)',
- // positioner: function(e){
- // console.log(e, this)
- // },
- useHTML: false, //开启html模式
- style: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- formatter: function (e) {
- //console.log(this)
- let num = chartData[this.colorIndex].num
- this.percentage = Math.round(this.percentage)
- return `${this.key}:<b>${this.percentage}%</b><br/>投资完成额:<b>${this.y}</b>亿<br/>投资数量:<b>${num}个</b>`
- },
- //pointFormat:
- },
- legend: {
- layout: 'vertical',
- align: 'right',
- y: -10,
- verticalAlign: 'bottom',
- itemStyle: {
- fontSize: '20px',
- color: '#fff',
- fontWeight: 0,
- fontFamily: 'Microsoft YaHei'
- }
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- showInLegend: true, // 图例
- cursor: 'pointer',
- size: 500,
- // innerSize: 330, //环形图中间空白,0为饼图
- innerSize: 0, //环形图中间空白,0为饼图
- depth: 75, //立体高度
- slicedOffset: 40, //动画距离
- dataLabels: {
- enabled: false, // 是否展示指示线
- format: '{point.name}: {point.percentage}'
- }
- },
- },
- series: [{
- type: 'pie',
- name: '占比',
- center: ['60%', '50%'],
- y: -10,
- point: {
- events: {
- click: function (e) { //点击事件
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
- },
- mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
- //console.log(e)
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- chartData[e.target.index].sliced = true
- chartData[e.target.index].selected = true
- that.center4Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
- }
- }
- },
- data: chartData
- }]
- })
- timer && clearInterval(timer);
- },
- mouseOut: function () { // 鼠标移出后需要继续执行轮播
- var points = that.center4Chart.series[0].points;
- var len = points.length;
- timer && clearInterval(timer);
- timer = setInterval(function () {
- autoTooltip(points[i]);
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- if (index == i) {
- item.sliced = true
- item.selected = true
- }
- })
- that.center4Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
- }
- }
- },
- data: chartData
- }]
- })
- i++;
- if (i === len) {
- i = 0;
- chartData.forEach((item, index) => {
- item.sliced = false
- item.selected = false
- })
- that.center4Chart.update({
- series: [{
- type: 'pie',
- name: '占比',
- point: {
- events: {
- click: function (e) {
- that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1)
- }
- }
- },
- data: chartData
- }]
- })
- }
- }, 2000);
- }
- }
- },
- data: chartData
- }]
- });
- function autoTooltip (point) {
- that.center4Chart.tooltip.refresh(point);
- }
- },
- initProjectList () {
- let dataList = []
- center8.map(item => {
- if (this.versions) {
- dataList.push([item[0], item[1], item[2] + '亿'])
- } else {
- dataList.push([item.office, item.name, item.value + '亿'])
- }
- })
- this.storageRecordConfig2.data = dataList
- this.storageRecordConfig2 = { ...this.storageRecordConfig2 }
- },
- // 大屏三
- initChartR1 () {
- let that = this
- that.right1Chart = echarts.init(this.$refs['echartR1'])
- that.right1Chart.on('showTip', (params) => {
- // 如果是7或者15并且满足防抖则切换
- if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd) {
- that.echartR1Fd = 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.echartR1Fd = true
- }, 2000)
- }, 1900);
- // 如果是17表示到了最后一个,那么重新来一遍
- } else if (params.dataIndex == 17 && that.echartR1Fd) {
- that.echartR1Fd = false
- setTimeout(() => {
- option.dataZoom[0].endValue = 0
- option.dataZoom[0].startValue = 5
- that.right1Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR1Fd = true
- }, 2000)
- }, 1900)
- }
- })
- let option = {
- tooltip: {
- formatter: data => {
- return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}:${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${data[3].seriesName}:${data[3].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[4].color.colorStops[0].color}"></span> ${data[4].seriesName}:${data[4].value}亿`
- },
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- trigger: 'axis',
- axisPointer: {
- // type: 'cross',',
- },
- },
- 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, //鼠标滚轮触发滚动
- }
- ],
- grid: {
- top: '10%',
- right: '3%',
- left: '5%',
- bottom: '5%',
- },
- legend: {
- data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
- x: 'center',
- y: '0px',
- textStyle: {
- color: '#fff',
- fontSize: "20",
- fontFamily: 'Microsoft YaHei'
- },
- },
- xAxis: {
- data: commonCompany,
- // data: right4.map(item => item.name),
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: '#005094',
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- // rotate: 40,
- textStyle: {
- color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
- fontSize: "20",
- fontFamily: 'Microsoft YaHei'
- },
- },
- },
- yAxis: [
- {
- type: 'value',
- name: '亿',
- nameTextStyle: {
- color: 'rgba(255,255,255,0.6)',
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#3D7495',
- },
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- fontSize: "20",
- fontFamily: 'Microsoft YaHei'
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- ],
- series: [
- {
- name: '预算额',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#064F78',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: right4.map(item => item.value),
- },
- {
- name: '已签合同额',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#623726',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: right4.map(item => item.value2),
- },
- {
- name: '产值认定额',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#955773',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: right4.map(item => item.value3),
- },
- {
- name: '结算额',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#B57C63',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: right4.map(item => item.value4),
- },
- {
- name: '付款额',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#BDB35D',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: right4.map(item => item.value5),
- },
- ],
- }
- that.right1Chart.on('click', function (param) {
- if (that.versions) {
- that.rightPenetrateTwo(2, '', that.findCode(param.name), 'right')
- } else {
- that.projectListTipShow = true
- }
- })
- that.right1Chart.setOption(option)
- tools.loopShowTooltip(that.right1Chart, option, {
- interval: 2000,
- loopSeries: true,
- })
- },
- initChartR2 () {
- let that = this
- const itemStyle = {
- // opacity: 0.8,
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowColor: 'rgba(0,0,0,0.3)'
- };
- that.right2Chart = echarts.init(this.$refs['echartR2'])
- that.right2Chart.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.right2Chart.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.right2Chart.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: {
- top: 10,
- data: ['正偏差', '容差', '负偏差'],
- textStyle: {
- fontSize: 20,
- color: '#fff',
- fontFamily: 'Microsoft YaHei'
- }
- },
- textStyle: {
- color: '#fff',
- },
- tooltip: {
- show: true,
- trigger: "axis",
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- formatter: data => {
- return `${data[0].value[0]}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color}"></span> ${data[0].seriesName}:${data[0].data[2]}%<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color}"></span> ${data[1].seriesName}:${data[1].data[2]}%<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color}"></span> ${data[2].seriesName}:${data[2].data[2]}%`
- },
- axisPointer: {
- // // type: 'cross',',
- },
- },
- grid: {
- top: '10%',
- right: '4%',
- left: '5%',
- bottom: '5%',
- },
- yAxis: {
- name: '',
- 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: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- xAxis: {
- data: commonCompany,
- // data: right5[0].map(item => item[0]),
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: '#005094',
- width: 1,
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- axisTick: {
- show: false, //隐藏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) {
- return Math.sqrt(Math.abs(data[2])) * 9;
- },
- },
- {
- name: '容差',
- type: 'scatter',
- itemStyle: itemStyle,
- data: right5[1],
- symbolSize: function (data) {
- return Math.sqrt(Math.abs(data[2])) * 9;
- },
- },
- {
- name: '负偏差',
- type: 'scatter',
- itemStyle: itemStyle,
- data: right5[2],
- symbolSize: function (data) {
- return Math.sqrt(Math.abs(data[2])) * 9;
- },
- }
- ]
- }
- that.right2Chart.on('click', function (param) {
- if (that.versions) {
- that.rightPenetrateTwo(1, param.seriesName == '正偏差' ? 1 : param.seriesName == '容差' ? 2 : 3, that.findCode(param.name), 'right')
- } else {
- that.projectListTipShow = true
- }
- })
- that.right2Chart.setOption(option)
- tools.loopShowTooltip(that.right2Chart, option, {
- interval: 2000,
- loopSeries: true,
- })
- },
- initChartR3 () {
- let that = this
- that.right3Chart = echarts.init(this.$refs['echartR3'])
- that.right3Chart.on('showTip', (params) => {
- this.echartR4Chart ? this.echartR4Chart.dispose() : ''
- this.echartR5Chart ? this.echartR5Chart.dispose() : ''
- that.initChartR4(params.dataIndex)
- that.initChartR5(params.dataIndex)
- // 如果是7或者15并且满足防抖则切换
- if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR3Fd) {
- that.echartR3Fd = false
- setTimeout(() => {
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
- that.right3Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR3Fd = true
- }, 2000)
- }, 7900);
- // 如果是17表示到了最后一个,那么重新来一遍
- } else if (params.dataIndex == 17 && that.echartR3Fd) {
- that.echartR3Fd = false
- setTimeout(() => {
- option.dataZoom[0].endValue = 0
- option.dataZoom[0].startValue = 5
- that.right3Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR3Fd = true
- }, 2000)
- }, 7900)
- }
- })
- let option = {
- tooltip: {
- formatter: data => {
- return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}:${data[2].value}亿`
- },
- trigger: 'axis',
- axisPointer: {
- // type: 'cross',',
- },
- position: (params) => {
- return [params[0] + 10, 60]
- },
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- confine: true
- },
- 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, //鼠标滚轮触发滚动
- }
- ],
- grid: {
- top: '25%',
- right: '3%',
- left: '10%',
- bottom: '20%',
- },
- legend: {
- data: ["低风险", "中风险", '高风险'],
- x: 'center',
- y: '15px',
- textStyle: {
- // color: 'rgba(250,250,250,0.6)',
- color: '#fff',
- fontSize: "20",
- fontFamily: 'Microsoft YaHei'
- },
- },
- xAxis: {
- data: commonCompany,
- // data: right4.map(item => item.name),
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: '#005094',
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- rotate: 40,
- textStyle: {
- color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- },
- yAxis: [
- {
- type: 'value',
- name: '亿',
- nameTextStyle: {
- color: 'rgba(255,255,255,0.6)',
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#3D7495',
- },
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- ],
- series: [
- {
- name: '高风险',
- type: 'bar',
- stack: 'Ad',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#4A3042',
- },
- {
- offset: 1,
- color: '#4A3042',
- },
- ]),
- },
- },
- data: right6.map(item => item.value),
- },
- {
- name: '中风险',
- type: 'bar',
- stack: 'Ad',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#697143',
- },
- {
- offset: 1,
- color: '#697143',
- },
- ]),
- },
- },
- data: right6.map(item => item.value2),
- },
- {
- name: '低风险',
- type: 'bar',
- stack: 'Ad',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#04635E',
- },
- {
- offset: 1,
- color: '#04635E',
- },
- ]),
- },
- },
- data: right6.map(item => item.value3),
- },
- ],
- }
- that.right3Chart.on('click', function (param) {
- if (that.versions) {
- that.rightPenetrateTwo('', '', that.findCode(param.name), 'right')
- } else {
- that.projectListTipShow = true
- }
- })
- that.right3Chart.setOption(option)
- tools.loopShowTooltip(that.right3Chart, option, {
- interval: 8000,
- loopSeries: true,
- })
- },
- initChartR4 (indexValue) {
- this.echartR4Chart = echarts.init(this.$refs['echartR4'])
- option = {
- title: {
- text: ''
- },
- radar: {
- center: ['50%', '50%'],
- radius: 135,
- indicator: [
- { name: '安全风险', max: 100000 },
- { name: '付款风险', max: 100000 },
- { name: '合同风险', max: 100000 },
- { name: '结算风险', max: 100000 },
- { name: '进度风险', max: 100000 },
- { name: '质量风险', max: 100000 },
- ],
- axisLine: { // 设置雷达图中间射线的颜色
- lineStyle: {
- color: '#887d33',
- },
- },
- splitLine: { //网格颜色设置
- show: true,
- lineStyle: {
- width: 1,
- color: ['#871b1a', '#638f41', '#d29e35', '#b6802b']
- },
- },
- name: { //修改indicator文字的颜色
- textStyle: {
- color: "#fff",
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- }
- },
- splitNumber: 4, //有几个圈
- splitArea: { //设置图表颜色,show的值为true
- show: true,
- areaStyle: {
- // color:"#c1ddf8", //一般设置方式
- //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
- //a ,b,c,d值可为0,1 a:1表示arr中的颜色右到左;c:1 arr中的颜色左到右
- //b:1表示arr中的颜色下到上;d:1表示arr中的颜色上到下
- // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- // { offset: 0, color: '#887D33' }, // 0% 处的颜色
- // { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色
- // { offset: 1, color: '#430705' }// 100% 处的颜色
- // ], false)
- color: ['#638f41', '#887d33', '#7d4216', '#430705'],
- }
- }
- },
- series: [
- {
- name: '',
- type: 'radar',
- symbol: 'circle', // 单个数值点的样式,还可以取值'rect','angle'等
- symbolSize: 0, // 数值点的大小
- data: [
- {
- value: right7[indexValue],
- name: '安全风险',
- itemStyle: { //该数值区域样式设置
- normal: {
- color: 'rgb(44,198,255,0.8)', //背景颜色,还需设置areaStyle
- lineStyle: {
- color: 'rgb(44,198,255,0.8)', //边框颜色
- },
- },
- },
- label: { //显示value中具体的数值
- normal: {
- show: false,
- textStyle: { //更改数值样式
- color: '#43EDE3'
- }
- },
- },
- areaStyle: { //设置区域背景颜色透明度
- normal: {
- width: 1,
- opacity: 0.8,
- },
- },
- }
- ]
- }
- ]
- };
- // tools.loopShowTooltip(myChart, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- this.echartR4Chart.setOption(option)
- },
- initChartR5 () {
- this.echartR5Chart = echarts.init(this.$refs['echartR5'])
- let option = {
- tooltip: {
- formatter: data => {
- return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}:${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${data[3].seriesName}:${data[3].value}亿`
- },
- trigger: 'axis',
- axisPointer: {
- // type: 'cross',',
- },
- textStyle: {
- color: '#FFF', // 文字的颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- },
- grid: {
- top: '15%',
- right: '3%',
- left: '5%',
- bottom: '35',
- },
- legend: {
- data: ["预算额", "合同额", "结算额", "支付额"],
- x: 'center',
- y: '10px',
- textStyle: {
- // color: 'rgba(250,250,250,0.6)',
- color: '#fff',
- fontSize: "20",
- fontFamily: 'Microsoft YaHei'
- },
- },
- xAxis: {
- data: ['设备费', '设计费', '施工费', '材料费'],
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: '#005094',
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- // rotate: 40,
- textStyle: {
- color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- },
- },
- yAxis: [
- {
- type: 'value',
- name: '亿',
- nameTextStyle: {
- color: 'rgba(255,255,255,0.6)',
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#3D7495',
- },
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- fontSize: '20', // 文字字体大小
- fontFamily: 'Microsoft YaHei'
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- ],
- series: [
- {
- name: '预算额',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#a79c57',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: right8.map(item => item.value),
- },
- {
- name: '合同额',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#cc8c29',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: right8.map(item => item.value2),
- },
- {
- name: '结算额',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#034a39',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: right8.map(item => item.value3),
- },
- {
- name: '支付额',
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#383062',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: right8.map(item => item.value4),
- },
- ],
- }
- this.echartR5Chart.setOption(option)
- tools.loopShowTooltip(this.echartR5Chart, option, {
- interval: 2000,
- loopSeries: true,
- })
- },
- },
- })
|