investHome2.js 121 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751
  1. let app = new Vue({
  2. el: '#app',
  3. data () {
  4. return {
  5. count: 0,
  6. countType: 0,
  7. type: true, // 切换柱状图状态
  8. showTip2: false,
  9. showTip3: false,
  10. timer2: '',
  11. echartTitle: '',
  12. year: '2022',
  13. time: '',
  14. timer: '',
  15. mapName: 'shanxi',
  16. geoCoordMap: {},
  17. config1: {
  18. number: [100],
  19. content: '{nt}个',
  20. },
  21. storageRecordConfig: {
  22. // waitTime: '30000',
  23. hoverPause: false,
  24. header: ['企业集团', '项目名 ', '投资总额'],
  25. // headerBGC: '#05507b33',
  26. // oddRowBGC: '#05507b33',
  27. // evenRowBGC: '#05507b33',
  28. headerBGC: '#05183c',
  29. headerBGC: '#05507b33',
  30. oddRowBGC: '#05183c',
  31. evenRowBGC: '#05183c',
  32. rowNum: 4,
  33. align: ['center'],
  34. data: [
  35. // ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元 "],
  36. // ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"],
  37. // ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.02亿元 "],
  38. // ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元 "],
  39. // ['潞安化工', '分布式光伏发电项目', "2.01亿元 "],
  40. // ['太重集团', '设立太重(大同)新能源产业投资公司', "0.30亿元 "],
  41. // ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元 "],
  42. // ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元 "],
  43. // ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元 "],
  44. // ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元 "],
  45. // ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元 "],
  46. // ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元 "],
  47. // ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元 "],
  48. // ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元 "],
  49. // ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元 "],
  50. // ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元 "],
  51. // ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元 "],
  52. // ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元 "],
  53. // ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元 "],
  54. ['华阳新材', '华钠铜(碳)年产万吨级钠离子电池正负极材料项目', '11.42'],
  55. ['太重集团', '太重退城入园智能高端装备生产线升级改造项目', '18.11'],
  56. ['太重集团', '太重智能高端液压挖掘机项目', '17.82'],
  57. ['太重集团', '太重(大同)高端起重机产业基地二期项目', '1.62'],
  58. ['太重集团', '太重液压挖掘机四轮一带项目', '4.00'],
  59. ['太重集团', '太重中大型工程起重机智能制造项目', '8.30'],
  60. ['太重集团', '太重高端工程机械齿轮箱智能制造项目', '3.55'],
  61. ['云时代', '侯马北铜年处理铜精矿150万吨综合回收项目', '27.70'],
  62. ['交控集团', '山西固废资源化利用交通科技园项目', '2.00'],
  63. ['云时代', '北方铜业铜矿峪矿园子沟尾矿库项目', '16.73'],
  64. ['山西建投', '山西综改示范区潇河产业园区建筑垃圾资源化处理项目', '3.90'],
  65. ['云时代', '山西北铜高性能压延铜带箔和覆铜板项目', '23.96'],
  66. ['大地控股', '大地控股忻州新店年产800万吨精品砂石骨料项目', '8.70'],
  67. ['山西建投', '山西建投晋西北建筑产业园区项目', '6.71'],
  68. ['山西建投', '山西建投长治建筑产业园区一期项目', '4.98'],
  69. ['汾酒集团', '汾青基地2万吨原酒酿造一期项目', '14.80'],
  70. ['文旅集团', '忻州清凉湾温泉康养项目', '9.34'],
  71. ['交控集团', '山西路桥数字化交通产业园(南区)项目', '32.10'],
  72. ['山西建投', '山西农谷智慧冷链物流园项目', '5.49'],
  73. ['华新燃气', '大同液化调峰储备集散中心二期项目', '1.50'],
  74. ['神农科技', '天镇万头奶牛智慧牧场项目', '5.67'],
  75. ['晋能控股', '阳泉郊区西上庄煤矿项目', '52.56'],
  76. ['华阳新材', '和顺泊里矿井及选煤厂项目', '67.00'],
  77. ['华阳新材', '寿阳七元煤矿项目', '50.77'],
  78. ['山西焦煤', '沁源中峪煤矿项目', '87.69'],
  79. ['晋能控股', '晋城兴唐车寨煤矿及选煤厂项目', '27.52'],
  80. ['晋能控股', '阳城龙湾矿井及选煤厂项目', '69.28'],
  81. ['晋能控股', '沁水东大矿井及选煤厂项目', '62.46'],
  82. ['晋能控股', '沁水郑庄矿井及选煤厂项目', '83.06'],
  83. ['山西焦煤', '乡宁谭坪煤矿一期项目', '56.62'],
  84. ['山西焦煤', '灵石灵北煤矿及选煤厂项目', '66.27'],
  85. ['晋能控股', '晋控电力同热三期2x100万千瓦“上大压小”煤电项目', '72.67'],
  86. ['山西焦煤', '山煤集团河曲2x35万千万低热值煤发电项目', '33.30'],
  87. ['华阳新材', '西上庄低热值煤发电项目', '53.85'],
  88. ['华新燃气', '阳城煤层气集输中心(町店配气站二期扩容改造)项目', '2.50'],
  89. ['交控集团', '高速公路充电桩建设项目', '3.10'],
  90. ['交控集团', '三个一号旅游公路和“四好农村路”沿线充电桩建设项目', '7.10'],
  91. ['山西建投', '山西省静态交通大数据平台项目', '1.00'],
  92. ['华远陆港', '集宁经大同至原平铁路项目', '248.21'],
  93. ['华远陆港', '雄安新区至忻州高速铁路山西段项目', '192.06'],
  94. ['华远陆港', '阳涉铁路开通客运服务项目', '6.60'],
  95. ['交控集团', '昔阳(晋冀界)至榆次高速公路项目', '209.86'],
  96. ['交控集团', '青银二广高速公路太原联络线项目', '72.88'],
  97. ['交控集团', '晋阳高速公路改扩建工程', '62.02'],
  98. ['交控集团', '青兰国家高速公路长治至延安联络线(G2211)山西境黎城至霍州段项目', '231.10'],
  99. ['交控集团', '汾阳至石楼高速公路项目', '117.14'],
  100. ['交控集团', '呼北国家高速公路离石至隰县段项目', '104.90'],
  101. ['交控集团', '临汾至沁水高速公路临汾至浮山段项目', '19.70'],
  102. ['交控集团', 'G108线重点路段新建改建工程(含2个子项目)', '130.19'],
  103. ['交控集团', '国道241、省道岚马线汾河水库段改线工程', '41.71'],
  104. ['交控集团', 'G241阳方口至朔州段和G336朔州至平鲁段公路改扩建工程PPP项目', '16.38'],
  105. ['交控集团', 'G336线应县罗庄至朔城区东榆林改扩建工程', '23.17'],
  106. ['航产集团', '太原武宿(国际)机场三期改扩建项目', '239.28'],
  107. ['航产集团', '太原武宿(国际)机场三期改扩建综合交通中心配套项目', '7.62'],
  108. ['山西建投', '大盂产业新城标准化厂房基础设施一期项目', '11.63'],
  109. ['水控集团', '滹沱河供水工程', '12.80'],
  110. ['水控集团', '全省县域水网及城乡供水一体化首批项目', '240.00'],
  111. ['水控集团', '小浪底引黄(灌区、工业及城镇生活供水)工程', '27.30'],
  112. ['水控集团', '阳泉龙华口调水工程', '20.30'],
  113. ['水控集团', '万家寨引黄北干支线工程', '15.63'],
  114. ['水控集团', '万家寨引黄入晋总干线南干线泵站二期扩机项目', '15.00'],
  115. ['交控集团', '智慧交通山西省实验室项目', '1.20'],
  116. ['交控集团', '山西隧道与地下工程研究中心项目', '1.50'],
  117. ['华舰体育', '山西体育职业学院新校区项目', '12.76'],
  118. ['华舰体育', '屯留沙家庄航空产教融合实训基地项目', '2.08'],
  119. ['太重集团', '太重智能高端装备产业园区基础设施及厂房配套项目', '55.87'],
  120. ['交控集团', '山西综改示范区中小企业产业园一期项目', '13.70'],
  121. ['山西焦煤', '临县三交一号煤矿项目', '80.53'],
  122. ['山西焦煤', '中阳吴家峁矿井及选煤厂项目', '60.21'],
  123. ['华阳新材', '华阳云冈千吨级高性能碳纤维一期示范项目', '6.40']
  124. ],
  125. },
  126. companyList: [
  127. { name: '山西焦煤' },
  128. { name: '晋能控股' },
  129. { name: '华新燃气' },
  130. { name: '山西建投' },
  131. { name: '潞安化工' },
  132. { name: '华远陆港' },
  133. { name: '航产集团' },
  134. { name: '大地控股' },
  135. { name: '国新能源' },
  136. { name: '汾酒集团' },
  137. { name: '云时代' },
  138. { name: '神农科技' },
  139. { name: '华阳新材' },
  140. { name: '华舰体育' },
  141. { name: '交控集团' },
  142. { name: '文旅集团' },
  143. { name: '水控集团' },
  144. { name: '太重集团' },
  145. ],
  146. }
  147. },
  148. created () {
  149. this.time = formatDate()
  150. this.timer = setInterval(() => {
  151. this.time = formatDate()
  152. }, 1000)
  153. },
  154. beforeDestroy () {
  155. if (this.timer) {
  156. clearInterval(this.timer);
  157. }
  158. this.timer2 && clearInterval(this.timer2);
  159. },
  160. mounted () {
  161. // 左侧图表
  162. setTimeout(() => {
  163. this.initChartL1()
  164. this.initChartL2()
  165. this.initChartL3()
  166. this.initChartL4()
  167. this.initChartL5()
  168. this.initChartL6()
  169. this.initChartL7()
  170. this.initChartR1()
  171. this.initChartR2()
  172. this.initChartR3()
  173. this.initChartR6()
  174. this.changeTopColor()
  175. },)
  176. },
  177. methods: {
  178. changeTopColor () {
  179. this.list = document.getElementsByClassName('row-item')
  180. for (var i = 0; i < this.list.length; i++) {
  181. if (i == 1) {
  182. this.list[i].classList.add('light')
  183. } else {
  184. this.list[i].classList.remove('light')
  185. }
  186. }
  187. this.initChartL3()
  188. },
  189. scrollChange (index) {
  190. if (index == 18) {
  191. this.count = -1
  192. } else {
  193. this.count = index
  194. }
  195. if (this.count > 12 && this.count != 18) {
  196. this.countType = 1
  197. } else {
  198. this.countType = 0
  199. }
  200. this.list = document.getElementsByClassName('row-item')
  201. for (var i = 0; i < this.list.length; i++) {
  202. if (i == 2) {
  203. this.list[i].classList.add('light')
  204. } else {
  205. this.list[i].classList.remove('light')
  206. }
  207. }
  208. this.initChartL3()
  209. },
  210. convertData (data) {
  211. var res = []
  212. for (var i = 0; i < data.length; i++) {
  213. var geoCoord = this.geoCoordMap[data[i].name]
  214. if (geoCoord) {
  215. res.push({
  216. name: data[i].name,
  217. value: geoCoord.concat(data[i].value),
  218. })
  219. }
  220. }
  221. return res
  222. },
  223. initChinaChart () {
  224. var data = [
  225. { name: '吕梁市', value: 150 },
  226. { name: '大同市', value: 190 },
  227. { name: '忻州市', value: 140 },
  228. { name: '朔州市', value: 160 },
  229. { name: '晋中市', value: 100 },
  230. { name: '太原市', value: 300 },
  231. { name: '临汾市', value: 190 },
  232. { name: '长治市', value: 100 },
  233. { name: '晋城市', value: 280 },
  234. { name: '运城市', value: 180 },
  235. { name: '阳泉市', value: 110 },
  236. ]
  237. var moveLine = {
  238. normal: [
  239. {
  240. fromName: '太原市',
  241. toName: '吕梁市',
  242. coords: [
  243. [112.3352, 37.9413],
  244. [111.3574, 37.7325],
  245. ],
  246. },
  247. {
  248. fromName: '太原市',
  249. toName: '忻州市',
  250. coords: [
  251. [112.3352, 37.9413],
  252. [112.4561, 38.8971],
  253. ],
  254. },
  255. {
  256. fromName: '太原市',
  257. toName: '临汾市',
  258. coords: [
  259. [112.3352, 37.9413],
  260. [111.4783, 36.1615],
  261. ],
  262. },
  263. {
  264. fromName: '太原市',
  265. toName: '阳泉市',
  266. coords: [
  267. [112.3352, 37.9413],
  268. [113.4778, 38.0951],
  269. ],
  270. },
  271. {
  272. fromName: '太原市',
  273. toName: '晋中市',
  274. coords: [
  275. [112.3352, 37.9413],
  276. [112.7747, 37.37],
  277. ],
  278. },
  279. {
  280. fromName: '太原市',
  281. toName: '运城市',
  282. coords: [
  283. [112.3352, 37.9413],
  284. [111.1487, 35.2002],
  285. ],
  286. },
  287. {
  288. fromName: '太原市',
  289. toName: '大同市',
  290. coords: [
  291. [112.3352, 37.9413],
  292. [113.7854, 39.8035],
  293. ],
  294. },
  295. {
  296. fromName: '太原市',
  297. toName: '晋城市',
  298. coords: [
  299. [112.3352, 37.9413],
  300. [112.7856, 35.6342],
  301. ],
  302. },
  303. {
  304. fromName: '太原市',
  305. toName: '长治市',
  306. coords: [
  307. [112.3352, 37.9413],
  308. [112.8625, 36.4746],
  309. ],
  310. },
  311. {
  312. fromName: '太原市',
  313. toName: '朔州市',
  314. coords: [
  315. [112.3352, 37.9413],
  316. [113.0713, 39.6991],
  317. ],
  318. },
  319. ],
  320. }
  321. /*获取地图数据*/
  322. let myChart = echarts.init(this.$refs['echarts-map'])
  323. echarts.registerMap('shanxi', {
  324. type: 'FeatureCollection',
  325. features: [
  326. {
  327. type: 'Feature',
  328. id: '1409',
  329. properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
  330. geometry: {
  331. type: 'Polygon',
  332. coordinates: [
  333. '@@Vx@lnbn¦WlnnUšmš°š²VšV‚VVVnUn„ºlz@l„„@Jƒ@kXWVXl@Lƒa@„ƒKUL„ŽlbnKlLnK‚LnKÆXn°šbVV@bUVl°Un@LnaVJUbW@UX²l‚@ČwlVVIšWnkÆa°„„anV‚Kn°™UW¯@™aVUVk@Un@„aV@ValwUanmWU„k@WVUUanaVwnLVl°@nk@mVU@UVK@w„LVKVU@ƒ„K@UUKVUV@@bnL„a‚V„aôšlIXmlKX_°KVV@bVV„@šzV`kblI„V„Ul‚šL@bnV@V„Ċll„„VlIXW@k„a‚U²blKšVnIlJ„albXXlWVn°JnšnL@l@XlJlaX@„X˜W²@l_VmnKšU„blU@mnkVK„¯@U@ƒma@kX¥VƒmakkƒLƒa@aƒ@WIUUVXWWnk@a°a@kkm@kUUmJm@WUUUIk`m@V—kaWWkX™KmƒXk¯ƒ@WKƒLkak@±bƒw@ƒaƒa@akaƒ@ma¯@ƒL—KÇÅkKWbkmġ™±ÅUƒLUK™VVkƒm¯LUVVbƒ„UwUW¯bm„ƒULƒxWJ—@ƒklmkUm@@KnwVkVK@akwƒ@@a¯bƒKkn›VUI™b¯mmbk@UbmKUL@xUUƒ@klmLUŽlVXI‚VVVUVUœU`mLXVWbXnW`Ų°xmŽxU@mĉƒƒwU@mbU@UƒmbkVW¦kJ™@ƒX@`¯Im@UlUVVnb@bWJXnmbƒJUU™UUaƒ@UamIkaƒxƒ@@x@b',
  334. ],
  335. encodeOffsets: [[113614, 39657]],
  336. },
  337. },
  338. {
  339. type: 'Feature',
  340. id: '1411',
  341. properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
  342. geometry: {
  343. type: 'Polygon',
  344. coordinates: [
  345. '@@@a@w„@„wlbnJVb„@VbšVVV„InaWmXI@a‚aUmVUVkn@°J@_„Wš@lIX¥lUnaV„V@naV@„xĊ„n‚V@‚wn¯wƱX_WmXaWUnKV_V›VUUUUWJkUVnKlk¯™@@kmKUaŁ±KkU@WmI@WUIlUUmVwXƒ‚w@ƒUlUVwœV‚@„Lnb‚W@anU@UšaVkô@l»n@na˜JnUÈLVaƃUUVm„VKVƒ²L@mU_lK@UVWkU‚a@a@U¯aUaƒÑóÑUb™„ƒKk@@aƒk¯mVaUwVƒÑkWUmK@UUKmXUWÝwUa™LUU@aWJUUU@Ua݄U@WL@VKVaVI@WnU@alIVKƒƒ@kIƒmIkJ@™m@ƒ™@@_™K@xƒ@kaW@U„@Vmn@ŽUK@mIƒJUXV¤XXWlkKƒkkK@XmJVakImJU@ó™¯LWKUV@nUVƒLkxmKkLma@kXKmmƒLƒab™LmK@V@mXVÆUxƒX@`nL„aV@@VmLUVnLlLš˜„b@„šŽ°²nx@b‚VUxlb@V¯bUV@zV‚XVĊXVx@lVn@VnnmŽUš@LlJXVƒz¯VWVXbšV@bmn™VUVk„Çþń@XVxmbUlV„Uln„W„@„Xl‚@VLXÒ@bÞJ°¦„L˜ò„@nU‚b@°„X@ŽXbmVU„V„nb@x‚x',
  346. ],
  347. encodeOffsets: [[113614, 39657]],
  348. },
  349. },
  350. {
  351. type: 'Feature',
  352. id: '1410',
  353. properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
  354. geometry: {
  355. type: 'Polygon',
  356. coordinates: [
  357. '@@nW‚@@UnLšK‚a„b„KnnWL@lnblKnLlw„KVU@mVUXL°KôšV@nIlJUbnI@WlL„llLXkWWU£VW„InJ‚@VL@nm@UVƒX@lb„@@wšL@`‚@„šn@V@lw„@n„VmVX„WmwnUlƒœa@_lK„wVlUn°xVKVXXWlUšVVI@K@K„n°KœwlVlU@kna@V_„Wn‚m„UVm@kXml_@m„LlKXw°m@_ôJVUV@X™l@UaV@Va°I„lk»VwUkVmwUmmVn@V¯@KƒU—wmK@U¯wUVÝ@mJƒU—nWK™@@UnKVa„_lykUmKÛnm@™x@ƒUUlwVk™ƒXW@ƒa@Uƒ@@K@ƒkIV™nammVakUlƒ@wX@@kƒ™¯@ƒVVbml@„„°UbULmlVbnbÅK±VƒKVXUJWa@ULWaUU@@U@aWK@UkxUKƒLUUUJ±UkL@V±kk@kam@UV@l@LWl@n@VVUx„LlUUx@VUV™U@aƒIUl™L@°mLU‚ƒbkUUaWUUaUU@aWK—LWJ@bUL@VUVVbU@m@a@kmKmnĉlUK™XƒWUblb—xmIkƒƒU@xWb@lkšVx™LXŽmzVV@bklVVUzm˜@bk„@Vx@xlŽU„@lUbVnl@„Wxnl@n@ŽUbV„mL‚mƒb@`X@lUX@@xlnkLWaUJnnWV™Vn@l„@bULVV@l™V@XnJVX',
  358. ],
  359. encodeOffsets: [[113063, 37784]],
  360. },
  361. },
  362. {
  363. type: 'Feature',
  364. id: '1407',
  365. properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
  366. geometry: {
  367. type: 'Polygon',
  368. coordinates: [
  369. '@@@šlInJ„lJ„@‚„ULkJ@bmV@XUJUb‚L@UXKV@ރVbV@VVXI@bVVšKVbÞxVXnWVL@VnLV‚lX„ÒUŽVxUb°n„l@bl@„LšƒVaô҄ÒVb°b@VnLnnV@lmn@lb„U„V@„‚JœUVV‚Xkl@lUzmJ@xšXkl‚bUn„JVšUb„nU‚lb„V@nlLX@lakšV`Ub°š@XVJnU‚L²KlxnI@KV@lbUbVV„KnVl@„zlm@Uš@nŽšI@WUaVl@@mVU„@XkW@ƒnkVKVƒ„_Vw„y@knwVa‚@XalU„@šVnml@„X@V„L‚KVaÞbnnlJšI„mVKn„VVVInVlU„@„m@™mXK@UmyUI@mWUUakamw@wUwmLkakwVƒmK™w@wUam£y@am_ƒW@™UU@knmm„amU@WUa@knw@ƒUUUUV@nƒJm@mVUkKVUUUkKmwƒKULƒKUImV@lUn™nŽm@mbUK@°™bUnmbUmkkƒWUb@am@UXkK@a±@™V™@ĉř„V‚UXVxUVkLWl¯@@bULUlm@@nm`—XƒlWakIkm›VUbUL@Vm@kIƒ@@Kšm@—VaX‚I@W@aU@kUƒVU_™KƒbƒJkkǎ™b@nkKmL™wÅW@kVUUƒVU@WUIƒJmIXmma@_kyVaUUlkUm@ƒkU›x¯Lƒm@L@LUJ™UkVWXUWUL¯wVmUkƒxkL@`›bk„mVnxƒXUWUnmƒƒ@kxU@',
  370. ],
  371. encodeOffsets: [[114087, 37682]],
  372. },
  373. },
  374. {
  375. type: 'Feature',
  376. id: '1408',
  377. properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
  378. geometry: {
  379. type: 'Polygon',
  380. coordinates: [
  381. '@@„Vl„nJ˜wkaVa„XšWVLĊknmnL‚l@@bn‚V@UaVU@UVK@aXI˜KXL@bVVVbXVVblV„aVnK@¯šKVk„J@bšVVU@UVwkVƒKVwUUm@@Xk@K@kVUn@lbl@²l@UlK²VVIVV„KVLlw@VXL@b@VV@VŽXbVK‚@XbVIUW„L‚U²ÆLmaUankVKVaƒ¯@ƒnkUa„U°@„š‚n@@kWa„UVaXUW@IXKVw@U™ƒ„™WU@W@@UUƒU@mn@ƒ`m@UUULkUmJ™IUƒ@@UƒK@U@›anƒ™ak_@wmKUwmakV™kmK™V™k¯b™wƒ`kwUIÇx¯»ÇaŃmn@@™mƒmUkV@wkKW@kxmL™UkĉLÝk™xÝw¯lóVU„mV@ĀVVX¦W¤kz@`Vx°„²ĸ‚š@„Ul@x„êĸNJ°¤V„VlXLWnXxmV@nUl@„',
  382. ],
  383. encodeOffsets: [[113232, 36597]],
  384. },
  385. },
  386. {
  387. type: 'Feature',
  388. id: '1402',
  389. properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
  390. geometry: {
  391. type: 'Polygon',
  392. coordinates: [
  393. '@@²£šyl@Ȑ˜Ė@bĸŽĢbĸ„˜X„a‚KŤnn@ŎôllÈx„nVnÞDŽV@b‚nXllL°KšbVb@J@b—„‚„@ŽU„„xlKXLlKlXk„@Ulk„JlkUƒVKXUƒÇVIVm@_nǚLšašl‚w„VnU@UUwma@aƒaÝaLmUk@@Wƒ@U@@X™wVWÝUUUk@@VmLƒKV»nwUw™aUL@`mzƒJUIVƒUaUw™KUaVIlJôanÑlLVUn@ša„@VV„@@UUwVK°Vn_lJÆLœéW@UUUÅ@»lm@aÞIVwXW˜UUkkm@U@aƒU@mwU£VWU_kWmƒXwW_°yUkkK@UÇK@kkUVymóK—U@KWIƒbUak@mJ@bkbmLkŽ™UmƒkVU„W¦@lnb@„@Vƒ°ULml@nkVƒa™VmLUnk`±@—XƒWW@kbǦXŽ¯„WxI@xmbmxXlWV„„@bŎUz@J‚b@bÞb™ŽU@Wbk@ƒxk@WX¯VۙƒWÝbÝUkVUU@alI@a@akLWa™m@U¯UUmÇL@K@aU@¯VUkƒKmX@`@œkJ@nV‚Ub@lbVÆXVW„ULU`VbkLUV@XWl@bXJ˜@VbV@Vl',
  394. ],
  395. encodeOffsets: [[115335, 41209]],
  396. },
  397. },
  398. {
  399. type: 'Feature',
  400. id: '1404',
  401. properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
  402. geometry: {
  403. type: 'Polygon',
  404. coordinates: [
  405. '@@Uk™Lky@I‚JVa@mÞaWšy@_W@_WƒXVlUVwš@nw°K@m„UƒVaƒmVkU@mmmnLVUmKXa™U@IlKVUnK@UmWkX@WV_Vƒ@akU@a„KWIXyƒIUVmUn™Ua@WaXUVKVmkUWVkUƒLU@@VƒbƒKbƒIUmƒ@mbVL—x›WUUkn±V¯wƒbÅJUbmLkbmKÅKƒbVnUbƒV™KUb™KUbmLKmƒb™aƒKkUm@UŽnn‚VnxUVlUxl¼ƒk¯JUbU@Vbk@WšU@UVóI@`¯nWxkLƒK@nk`Wn@lUnƒVnm‚ƒXU`@mb@lkV@„VnklVVUblz@`nbWnnJ„IVJ@XUVV„UV@lÆXšxnKlL@mšaȍll„I„ašLV`„UlVV@@b@XJWUb@˜™n@L„@lJn@@UVKVaœUlnlJXb„k˜Wn_@mn@VkVK@a°@XklKVUUwVWUšƒĊƚ@šU²@@blLVWn@@bVa„XllVnnaVmša@¯VLnan@‚šmVm@knUVJ',
  406. ],
  407. encodeOffsets: [[116269, 37637]],
  408. },
  409. },
  410. {
  411. type: 'Feature',
  412. id: '1406',
  413. properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
  414. geometry: {
  415. type: 'Polygon',
  416. coordinates: [
  417. '@@XXWVXVWnnlnn@èƼ@„„xlš„ŽV„nblšššVŽÈUVl‚š@„blnœL܃ĊmUkU@Ua‚—@WI@aXk@WVUlKUaV_VKXƒWUUÅka@VaU@mlI@›@_nW„LVl°UV@@b@LÈKVn°V@VšnXblK@b@bkJ@bVVlUÞVÞa„Xܚ°UXWl@„wl@XaV@šÝa@aa@IVyƍ@aƒƒXUWknwna@w‚JXw°ƒWÈ¥kI@W@kmKm™¯IUmkXWWkaƒbkImJ™UkL±aVƒb@lWXkJƒUkƒĉkƒ@UmU@a™KkƒVƒUkJlaU_™yƒ@UU@aUU¯LW`kLWnkJó™ƒbUƒbmK@aU@UVVL@VƒL@„UVULƒK@xUL@VUV@nml¯@UkmKUxmbVbUV@XƒlXVmnVbkxUbU@ƒbm@@VUlUVšb°@VX¯šm‚',
  418. ],
  419. encodeOffsets: [[114615, 40562]],
  420. },
  421. },
  422. {
  423. type: 'Feature',
  424. id: '1405',
  425. properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
  426. geometry: {
  427. type: 'Polygon',
  428. coordinates: [
  429. '@@lV„Lšb„an‚LnKVašLVašL„UVaUm„aÆLnLlanKVaÆI„a°x²UlmVVœX˜wUKna„@Vn„J‚a„L„a@UV@@alUkKVKnkmmVwUk„w@ƒ™@kxWUXƒW@@mƒk@aUa@a¯aƒLkKmwkUm@kL@K@aWIXmƒVƒXƒWkUVakL@UVKƒw@aUK@UUKmLU@¯n™KUwVƒUIWJUWmka™@UXƒJƒk@UkmW@kLWKVƒx@bmI@VUaVU@a¯@UUmVKmX@±`kÝKVxUL±akL@V™bƒLkKmVƒ@XWVUbƒVXb@lm@@lW@@xk„lVUbnnmbUšlJ@„@L„@@V„b@‚WXš„UlkxVV@„šwn@ÜmnLlVkzƒ`UbmL@Vš@XL˜m„VnIÞ@VU°x@VnL˜x„V@LU°',
  430. ],
  431. encodeOffsets: [[115223, 36895]],
  432. },
  433. },
  434. {
  435. type: 'Feature',
  436. id: '1401',
  437. properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
  438. geometry: {
  439. type: 'Polygon',
  440. coordinates: [
  441. '@@„@VV@wVKnLVal@na°nšaVJœUlm„L°a@b„@lx@bULUlmx@Ln@lVkn„l˜@XI„w‚K„Vnƒ°aVXVx„ƒUaVU°K„nUlšUVL„KÆVš²Ģ‚lnXalLÈƘL„KUaVkUanmWU™a@WwkUWU¯y¯Ñ@anIl@@aVU„m„I„ymUƒLUUVakaU@@LmJkw±LKmVUI@W¯™VaU_l™kbW@kK@mƒUkaVƒmVaU™ƒIVmalk™W@wnIVy@klkWUU›VI@ƒƒUƒVkam@knU@mmmK@bblVUX@VkLV`@n±KU„ULƒ‚UnVVńUbÇKmV—Imbm@k¼ó@Ul™b@VmV@bXmaƒK@›UUxkV‚V@„xW„UxVnkVVJ@XnJ@XlV²LƂVbnL@lš@°',
  442. ],
  443. encodeOffsets: [[114503, 39134]],
  444. },
  445. },
  446. {
  447. type: 'Feature',
  448. id: '1403',
  449. properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
  450. geometry: {
  451. type: 'Polygon',
  452. coordinates: [
  453. '@@°@nb„@lb@b„b„b‚@„x²al@lb„KXU@m‚kUWkkmUUƒVwV@XUW@™naVklKXblKnL‚ƒnLVanImaXKlL„ašV@U@KUKW„alƒXK@£WKXUV@VU„ƒUUVW„_V™@W@@K„@šƒUƒƒIWmXUmƒULƒn™JkImmÝaUbLƒK@UƒWk@mn™Uƒ@kVWb@Ubmx@lƒzUxƒ`U„ULml@„XWlƒ@UV@nk@U‚Vb@X™Jm™@@Vknƒyk@ƒzƒJƒnUV@bk@mJ@b°Ò°zXVlVXx‚@šbXVmnVbUlVb',
  454. ],
  455. encodeOffsets: [[115864, 39336]],
  456. },
  457. },
  458. ],
  459. UTF8Encoding: true,
  460. })
  461. var mapFeatures = echarts.getMap(this.mapName).geoJson.features
  462. mapFeatures.forEach(v => {
  463. // 地区名称
  464. var name = v.properties.name
  465. // 地区经纬度
  466. this.geoCoordMap[name] = v.properties.cp
  467. })
  468. myChart.setOption({
  469. tooltip: {
  470. padding: 15,
  471. enterable: true,
  472. transitionDuration: 1,
  473. formatter: (params, ticket, callback) => {
  474. let tipHtml = `
  475. <div class="tooltip-cont">
  476. <p>新开工:<span>工程建设项目</span></p>
  477. <p>总投资额:<span>${params.data.value}亿</span></p>
  478. <p>当前阶段:<span>可论证阶段</span></p>
  479. <p>时间节点:<span>2021.10-2022.10</span></p>
  480. </div>`
  481. return tipHtml
  482. },
  483. },
  484. visualMap: {
  485. min: 0,
  486. max: 300,
  487. right: 0,
  488. bottom: 0,
  489. text: ['高', '低'],
  490. textStyle: {
  491. color: '#f1f1f1'
  492. },
  493. realtime: false,
  494. calculable: true,
  495. inRange: {
  496. color: ['lightskyblue', '#2754b7']
  497. }
  498. },
  499. geo: {
  500. show: true,
  501. map: 'shanxi',
  502. layoutCenter: ['50%', '50%'], //地图位置
  503. layoutSize: '100%',
  504. label: {
  505. normal: {
  506. show: false,
  507. },
  508. emphasis: {
  509. show: false,
  510. },
  511. },
  512. roam: false,
  513. itemStyle: {
  514. normal: {
  515. areaColor: '#1946a8',
  516. shadowColor: '#1946a8',
  517. borderWidth: 1, //设置外层边框
  518. borderColor: '#1946a8',
  519. shadowOffsetX: 10,
  520. shadowOffsetY: 5,
  521. shadowBlur: 2,
  522. },
  523. emphasis: {
  524. areaColor: '#1946a8',
  525. borderColor: '#d4bc1d',
  526. borderWidth: 2, //设置外层边框
  527. },
  528. },
  529. },
  530. series: [
  531. {
  532. name: '散点',
  533. type: 'scatter',
  534. coordinateSystem: 'geo',
  535. data: this.convertData(data),
  536. symbolSize: function (val) {
  537. return 10
  538. },
  539. label: {
  540. normal: {
  541. formatter: '{b}',
  542. position: [10, 10],
  543. fontSize: 15,
  544. fontWeight: 600,
  545. fontStyle: 'italic',
  546. color: '#fff',
  547. show: true,
  548. },
  549. emphasis: {
  550. show: true,
  551. },
  552. },
  553. itemStyle: {
  554. normal: {
  555. color: '#000',
  556. borderWidth: 2,
  557. borderColor: '#fff',
  558. },
  559. },
  560. },
  561. {
  562. type: 'map',
  563. map: this.mapName,
  564. geoIndex: 0,
  565. aspectScale: 0.75, //长宽比
  566. showLegendSymbol: true, // 存在legend时显示
  567. label: {
  568. normal: {
  569. show: true,
  570. },
  571. emphasis: {
  572. show: false,
  573. textStyle: {
  574. color: '#fff',
  575. },
  576. },
  577. },
  578. roam: true,
  579. itemStyle: {
  580. normal: {
  581. areaColor: '#031525',
  582. borderColor: '#3B5077',
  583. },
  584. emphasis: {
  585. areaColor: '#2B91B7',
  586. },
  587. },
  588. animation: false,
  589. data: data,
  590. },
  591. {
  592. name: '点',
  593. type: 'scatter',
  594. coordinateSystem: 'geo',
  595. zlevel: 6,
  596. },
  597. {
  598. name: 'Top 5',
  599. type: 'effectScatter',
  600. coordinateSystem: 'geo',
  601. data: this.convertData(
  602. data
  603. .sort(function (a, b) {
  604. return b.value - a.value
  605. })
  606. .slice(0, 5)
  607. ),
  608. symbolSize: function (val) {
  609. return 15
  610. },
  611. showEffectOn: 'render',
  612. rippleEffect: {
  613. brushType: 'stroke',
  614. },
  615. hoverAnimation: true,
  616. label: {
  617. normal: {
  618. formatter: '{b}',
  619. position: 'left',
  620. show: false,
  621. },
  622. },
  623. itemStyle: {
  624. normal: {
  625. color: 'yellow',
  626. shadowBlur: 10,
  627. shadowColor: 'yellow',
  628. },
  629. },
  630. zlevel: 1000,
  631. },
  632. {
  633. name: '线路',
  634. type: 'lines',
  635. zlevel: 2,
  636. effect: {
  637. show: true,
  638. period: 4, //箭头指向速度,值越小速度越快
  639. trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
  640. symbol: 'arrow', //箭头图标
  641. symbolSize: 5, //图标大小
  642. },
  643. lineStyle: {
  644. normal: {
  645. color: '#00FFFF',
  646. width: 1,
  647. type: 'dashed',
  648. opacity: 0.5, //尾迹线条透明度
  649. curveness: -0.3, //尾迹线条曲直度
  650. },
  651. },
  652. data: moveLine.normal,
  653. },
  654. ],
  655. })
  656. },
  657. initChartL1 () {
  658. let myChart = echarts.init(document.getElementById("echartL1"));
  659. let option = {
  660. grid: {
  661. top: 35,
  662. right: 40,
  663. left: 60,
  664. bottom: 40,
  665. },
  666. tooltip: {
  667. show: true,
  668. trigger: "axis",
  669. axisPointer: {
  670. // 坐标轴指示器,坐标轴触发有效
  671. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  672. },
  673. },
  674. xAxis: {
  675. data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
  676. axisTick: {
  677. show: false,
  678. },
  679. // x轴的字体颜色
  680. axisLabel: {
  681. rotate: 40,
  682. textStyle: {
  683. color: "white",
  684. },
  685. },
  686. //y轴线的颜色以及宽度
  687. axisLine: {
  688. show: true,
  689. lineStyle: {
  690. color: "#1E5389",
  691. width: 1,
  692. type: "solid",
  693. },
  694. },
  695. },
  696. yAxis: {
  697. name: '亿元',
  698. nameTextStyle: {//y轴上方单位的颜色
  699. color: '#fff',
  700. },
  701. axisTick: {
  702. lineStyle: {
  703. color: "#18416F",
  704. },
  705. },
  706. // y轴的字体颜色
  707. axisLabel: {
  708. textStyle: {
  709. color: "white",
  710. },
  711. },
  712. splitLine: {
  713. show: true,
  714. lineStyle: {
  715. color: "#204561",
  716. width: 1,
  717. type: "dotted",
  718. },
  719. },
  720. //y轴线的颜色以及宽度
  721. axisLine: {
  722. show: true,
  723. lineStyle: {
  724. color: "#1E5389",
  725. width: 1,
  726. type: "solid",
  727. },
  728. },
  729. },
  730. series: [
  731. // {
  732. // name: "2022年额度",
  733. // type: "bar",
  734. // 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],
  735. // showBackground: false,
  736. // backgroundStyle: {
  737. // color: "#18416F",
  738. // },
  739. // barWidth: "10%",
  740. // itemStyle: {
  741. // barBorderRadius: [10, 10, 0, 0],
  742. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  743. // {
  744. // offset: 0,
  745. // color: '#082550',
  746. // },
  747. // {
  748. // offset: 1,
  749. // color: '#69c0ff',
  750. // },
  751. // ]),
  752. // },
  753. // },
  754. {
  755. name: "2023年额度",
  756. type: "bar",
  757. // data: [ 359.91,400.49,117.65,148.96,34.84,17.79,26.15,26.18,16.83,0.00,43.49,0.00,43.39,76.53,5.05,8.59,0.00,0.28],
  758. data: [457.46,613.02,152.27,267.02,30.85,0.00,24.00,18.02,24.98,0.00,87.01,18.62,59.09,82.17,0.00,0.00,0.00,0.00],
  759. showBackground: false,
  760. backgroundStyle: {
  761. color: "#18416F",
  762. },
  763. barWidth: "10%",
  764. itemStyle: {
  765. barBorderRadius: [10, 10, 0, 0],
  766. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  767. {
  768. offset: 0,
  769. color: '#082550',
  770. },
  771. {
  772. offset: 1,
  773. color: '#957DFF',
  774. },
  775. ]),
  776. },
  777. },
  778. ],
  779. legend: {
  780. // data: ["2022年额度", "2023年额度"],
  781. data: ["2023年额度"],
  782. textStyle: {
  783. // 图列内容样式
  784. color: "#fff", // 字体颜色
  785. // fontSize: "10",
  786. },
  787. right: 'center',
  788. icon: "roundRect",
  789. // 小图标的宽高
  790. itemHeight: 5,
  791. },
  792. };
  793. tools.loopShowTooltip(myChart, option, {
  794. nterval: 2000,
  795. loopSeries: true,
  796. })
  797. let that = this
  798. myChart.on('click', function (param) {
  799. console.log(param)
  800. if (param.name == '晋能控股') {
  801. that.showTip2 = true
  802. setTimeout(() => {
  803. // that.initChartR4()
  804. // that.initChartR5()
  805. that.initChartL2b()
  806. })
  807. }
  808. })
  809. myChart.setOption(option);
  810. },
  811. initChartL2b () {
  812. let myChart = echarts.init(this.$refs['echartL2b'])
  813. var value = 0.3602;
  814. var data = [value];
  815. let option = {
  816. backgroundColor: 'transparent',
  817. title: [
  818. {
  819. // text: '总额度285.48亿',
  820. // formatter: `<span>总额度</span>285.48亿`,
  821. x: '37%',
  822. y: '80%',
  823. textStyle: {
  824. fontSize: 24,
  825. fontWeight: 'bold',
  826. color: '#2CB7E0',
  827. lineHeight: 16,
  828. textAlign: 'center',
  829. },
  830. }
  831. ],
  832. series: [
  833. {
  834. type: 'liquidFill',
  835. radius: '70%',
  836. center: ['50%', '40%'],
  837. color: [
  838. {
  839. type: 'linear',
  840. x: 0,
  841. y: 0,
  842. x2: 0,
  843. y2: 1,
  844. colorStops: [
  845. {
  846. offset: 0,
  847. color: '#446bf5',
  848. },
  849. {
  850. offset: 1,
  851. color: '#2ca3e2',
  852. },
  853. ],
  854. globalCoord: false,
  855. },
  856. ],
  857. data: [value, value], // data个数代表波浪数
  858. backgroundStyle: {
  859. borderWidth: 1,
  860. color: 'RGBA(51, 66, 127, 0.7)',
  861. },
  862. label: {
  863. normal: {
  864. formatter: function (data) {
  865. return (data.value * 100).toFixed(2) + '%'
  866. },
  867. textStyle: {
  868. fontSize: 30,
  869. color: '#fff',
  870. },
  871. },
  872. },
  873. outline: {
  874. // show: false
  875. borderDistance: 0,
  876. itemStyle: {
  877. borderWidth: 2,
  878. borderColor: 'transparent',
  879. },
  880. },
  881. },
  882. ],
  883. }
  884. myChart.setOption(option)
  885. },
  886. initChartL2 () {
  887. let myChart = echarts.init(this.$refs['echartL2'])
  888. var value = 0.7908;
  889. var data = [value];
  890. let option = {
  891. backgroundColor: 'transparent',
  892. title: [
  893. {
  894. // text: '总额度285.48亿',
  895. // formatter: `<span>总额度</span>285.48亿`,
  896. x: '37%',
  897. y: '80%',
  898. textStyle: {
  899. fontSize: 24,
  900. fontWeight: 'bold',
  901. color: '#2CB7E0',
  902. lineHeight: 16,
  903. textAlign: 'center',
  904. },
  905. }
  906. ],
  907. series: [
  908. {
  909. type: 'liquidFill',
  910. radius: '70%',
  911. center: ['50%', '40%'],
  912. color: [
  913. {
  914. type: 'linear',
  915. x: 0,
  916. y: 0,
  917. x2: 0,
  918. y2: 1,
  919. colorStops: [
  920. {
  921. offset: 0,
  922. color: '#446bf5',
  923. },
  924. {
  925. offset: 1,
  926. color: '#2ca3e2',
  927. },
  928. ],
  929. globalCoord: false,
  930. },
  931. ],
  932. data: [value, value], // data个数代表波浪数
  933. backgroundStyle: {
  934. borderWidth: 1,
  935. color: 'RGBA(51, 66, 127, 0.7)',
  936. },
  937. label: {
  938. normal: {
  939. formatter: function (data) {
  940. return (data.value * 100).toFixed(2) + '%'
  941. },
  942. textStyle: {
  943. fontSize: 30,
  944. color: '#fff',
  945. },
  946. },
  947. },
  948. outline: {
  949. // show: false
  950. borderDistance: 0,
  951. itemStyle: {
  952. borderWidth: 2,
  953. borderColor: 'transparent',
  954. },
  955. },
  956. },
  957. ],
  958. }
  959. myChart.setOption(option)
  960. },
  961. initChartL3 () {
  962. let myChart = echarts.init(this.$refs['echartL3'])
  963. option = {
  964. tooltip: {
  965. trigger: 'axis',
  966. formatter: '指标:' + '{c0}' + '<br/>' + '发展线:' + '{c1}' + '<br/>' + '生存线:' + '{c2}', //+ '<br/>'+ '{a1}:{c1}' + '%',
  967. axisPointer: {
  968. type: 'shadow',
  969. },
  970. },
  971. grid: {
  972. top: '10%',
  973. right: '5%',
  974. left: '10%',
  975. bottom: '15%',
  976. },
  977. xAxis: {
  978. // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
  979. data: dataType[this.countType],
  980. axisLine: {
  981. show: true, //隐藏X轴轴线
  982. lineStyle: {
  983. color: '#005094',
  984. width: 1,
  985. },
  986. },
  987. axisTick: {
  988. show: true, //隐藏X轴刻度
  989. },
  990. axisLabel: {
  991. show: true,
  992. rotate: 15,
  993. textStyle: {
  994. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  995. fontSize: 12,
  996. },
  997. },
  998. },
  999. yAxis: [
  1000. {
  1001. type: 'value',
  1002. splitLine: {
  1003. show: true,
  1004. lineStyle: {
  1005. color: '#68b4dd66',
  1006. type: 'dashed',
  1007. },
  1008. },
  1009. axisLine: {
  1010. show: false
  1011. },
  1012. axisLabel: {
  1013. show: true,
  1014. formatter: '{value}',
  1015. textStyle: {
  1016. color: 'rgba(250,250,250,0.6)',
  1017. },
  1018. },
  1019. nameTextStyle: {
  1020. color: '#ebf8ac',
  1021. fontSize: 16,
  1022. },
  1023. },
  1024. ],
  1025. series: [
  1026. {
  1027. name: '实际值',
  1028. type: 'bar',
  1029. barWidth: 15,
  1030. itemStyle: {
  1031. normal: {
  1032. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1033. {
  1034. offset: 0,
  1035. color: '#69c0ff',
  1036. },
  1037. {
  1038. offset: 1,
  1039. color: '#082550',
  1040. },
  1041. ]),
  1042. },
  1043. },
  1044. // data: [70, 52, 33, 41, 52],
  1045. data: dataList[this.count + 1][2]
  1046. // markLine: {
  1047. // symbol: ['none', 'none'],
  1048. // data: [
  1049. // {
  1050. // name: '生存线',
  1051. // yAxis: 10,
  1052. // lineStyle: {
  1053. // color: '#FF8F0A',
  1054. // },
  1055. // label: {
  1056. // formatter: '{b}',
  1057. // position: 'middle',
  1058. // color: '#FF8F0A',
  1059. // fontSize: 12,
  1060. // },
  1061. // },
  1062. // {
  1063. // name: '发展线',
  1064. // yAxis: 15,
  1065. // lineStyle: {
  1066. // color: '#00EEA2',
  1067. // },
  1068. // label: {
  1069. // formatter: '{b}',
  1070. // position: 'middle',
  1071. // color: '#00EEA2',
  1072. // fontSize: 12,
  1073. // },
  1074. // },
  1075. // ],
  1076. // label: {
  1077. // distance: [50, 0],
  1078. // },
  1079. // },
  1080. },
  1081. {
  1082. name: '',
  1083. type: 'line',
  1084. barWidth: 15,
  1085. itemStyle: {
  1086. normal: {
  1087. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1088. {
  1089. offset: 0,
  1090. color: '#69c0ff',
  1091. },
  1092. {
  1093. offset: 1,
  1094. color: 'green',
  1095. },
  1096. ]),
  1097. },
  1098. },
  1099. // data: [20, 30, 15, 28, 36],
  1100. data: dataList[this.count + 1][1]
  1101. },
  1102. {
  1103. name: '',
  1104. type: 'line',
  1105. barWidth: 15,
  1106. itemStyle: {
  1107. normal: {
  1108. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1109. {
  1110. offset: 0,
  1111. color: '#69c0ff',
  1112. },
  1113. {
  1114. offset: 1,
  1115. color: 'yellow',
  1116. },
  1117. ]),
  1118. },
  1119. },
  1120. // data: [15, 22, 17, 33, 14],
  1121. data: dataList[this.count + 1][0]
  1122. },
  1123. ],
  1124. }
  1125. myChart.setOption(option)
  1126. // tools.loopShowTooltip(myChart, option, {
  1127. // nterval: 2000,
  1128. // loopSeries: true,
  1129. // })
  1130. },
  1131. initChartL4 () {
  1132. // let data = [
  1133. // { value: [173.43, 129], name: '煤炭' },
  1134. // { value: [23.10, 2], name: '火电' },
  1135. // { value: [22.87, 8], name: '冶金' },
  1136. // { value: [9.71, 5], name: '焦化' },
  1137. // { value: [8.35, 6], name: '其他传统产业' }
  1138. // ]
  1139. // let count = 0
  1140. // data.forEach(item => {
  1141. // count += item.value[0]
  1142. // })
  1143. // let myChart = echarts.init(this.$refs['echartL4'])
  1144. // let option = {
  1145. // title: {
  1146. // text: '传统产业分析',
  1147. // x: 'center',
  1148. // y: '0%',
  1149. // textStyle: {
  1150. // color: 'rgba(255,255,255,0.6)',
  1151. // fontSize: 12,
  1152. // },
  1153. // },
  1154. // tooltip: {
  1155. // trigger: 'item',
  1156. // formatter: function (params) {
  1157. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  1158. // }
  1159. // },
  1160. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1161. // legend: {
  1162. // orient: 'horizontal',
  1163. // show: false,
  1164. // icon: 'circle',
  1165. // top: 'bottom',
  1166. // orient: 'vertical',
  1167. // right: '-3%',
  1168. // textStyle: {
  1169. // color: '#9DB9EB',
  1170. // fontSize: '10px'
  1171. // },
  1172. // itemWidth: 10,
  1173. // itemHeight: 10
  1174. // },
  1175. // series: [
  1176. // {
  1177. // name: '',
  1178. // type: 'pie',
  1179. // // radius: ['0%', '70%'],
  1180. // radius: ['50%', '65%'],
  1181. // center: ['50%', '55%'],
  1182. // itemStyle: {
  1183. // normal: {
  1184. // borderColor: 'rgba(1,31,64,0.7)',
  1185. // borderWidth: 6,
  1186. // label: {
  1187. // show: false
  1188. // },
  1189. // },
  1190. // },
  1191. // labelLine: {
  1192. // show: false,
  1193. // },
  1194. // data,
  1195. // },
  1196. // ],
  1197. // }
  1198. // myChart.setOption(option)
  1199. // tools.loopShowTooltip(myChart, option, {
  1200. // nterval: 2000,
  1201. // loopSeries: true,
  1202. // })
  1203. // let that = this
  1204. // myChart.on('click', function (param) {
  1205. // console.log(param)
  1206. // that.showTip3 = true
  1207. // setTimeout(() => {
  1208. // that.initChartT1(data, option)
  1209. // })
  1210. // })
  1211. // { value: [173.43, 129], name: '煤炭' },
  1212. // { value: [23.10, 2], name: '火电' },
  1213. // { value: [22.87, 8], name: '冶金' },
  1214. // { value: [9.71, 5], name: '焦化' },
  1215. // { value: [8.35, 6], name: '其他传统产业' }
  1216. var chartData = [
  1217. {
  1218. name: '煤炭',
  1219. y: 504.41,
  1220. num: 51,
  1221. sliced: false,
  1222. selected: false,
  1223. },
  1224. {
  1225. name: '火电',
  1226. y: 37.7,
  1227. num: 3,
  1228. sliced: false,
  1229. selected: false,
  1230. },
  1231. {
  1232. name: '冶金',
  1233. y: 38.64,
  1234. num: 8,
  1235. sliced: false,
  1236. selected: false,
  1237. },
  1238. {
  1239. name: '焦化',
  1240. y: 16.11,
  1241. num: 1,
  1242. sliced: false,
  1243. selected: false,
  1244. },
  1245. {
  1246. name: '其他传统产业',
  1247. y: 18.6,
  1248. num: 5,
  1249. sliced: false,
  1250. selected: false,
  1251. }
  1252. ]
  1253. var timer = null;
  1254. var i = 0;
  1255. let that = this
  1256. var option = {
  1257. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1258. chart: {
  1259. type: 'pie',
  1260. backgroundColor: 'rgba(0,0,0,0)',
  1261. options3d: {
  1262. enabled: true,
  1263. alpha: 45,
  1264. //beta: 0
  1265. },
  1266. events: {
  1267. // load,图表加载完成时触发
  1268. load: function () {
  1269. var chart = this;
  1270. var points = chart.series[0].points;
  1271. var len = points.length;
  1272. timer && clearInterval(timer);
  1273. timer = setInterval(function () {
  1274. autoTooltip(points[i]);
  1275. chartData.forEach((item, index) => {
  1276. item.sliced = false
  1277. item.selected = false
  1278. if (index == i) {
  1279. item.sliced = true
  1280. item.selected = true
  1281. }
  1282. })
  1283. chart.update({
  1284. series: [{
  1285. type: 'pie',
  1286. name: '占比',
  1287. point: {
  1288. events: {
  1289. click: function (e) {
  1290. that.showTip3 = true
  1291. that.echartTitle = '传统产业分析'
  1292. setTimeout(() => {
  1293. that.initChartT1(chartData)
  1294. })
  1295. }
  1296. }
  1297. },
  1298. data: chartData
  1299. }]
  1300. })
  1301. i++;
  1302. if (i === len) {
  1303. i = 0;
  1304. }
  1305. }, 2000);
  1306. },
  1307. legendItemClick: function (event) {
  1308. console.log(event);
  1309. return true;
  1310. }
  1311. }
  1312. },
  1313. credits: {
  1314. enabled: false //去掉hightchats水印
  1315. },
  1316. title: {
  1317. text: '传统产业分析',
  1318. style: {
  1319. color: 'rgba(255,255,255,0.6)',
  1320. fontSize: 12,
  1321. }
  1322. },
  1323. tooltip: {
  1324. crosshairs: true,
  1325. backgroundColor: 'rgba(0,0,0,0.5)',
  1326. // positioner: function(e){
  1327. // console.log(e, this)
  1328. // },
  1329. useHTML: true, //开启html模式
  1330. style: {
  1331. color: '#fff',
  1332. },
  1333. formatter: function (e) {
  1334. //console.log(this)
  1335. let num = chartData[this.colorIndex].num
  1336. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1337. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1338. },
  1339. //pointFormat:
  1340. },
  1341. plotOptions: {
  1342. pie: {
  1343. allowPointSelect: true,
  1344. showInLegend: false, // 图例
  1345. cursor: 'pointer',
  1346. size: 160,
  1347. innerSize: 100, //环形图中间空白,0为饼图
  1348. depth: 25, //立体高度
  1349. slicedOffset: 21, //动画距离
  1350. dataLabels: {
  1351. enabled: false, // 是否展示指示线
  1352. format: '{point.name}: {point.percentage}'
  1353. }
  1354. },
  1355. },
  1356. series: [{
  1357. type: 'pie',
  1358. name: '占比',
  1359. //center: ['35%','50%'],
  1360. point: {
  1361. events: {
  1362. click: function (e) { //点击事件
  1363. that.showTip3 = true
  1364. that.echartTitle = '传统产业分析'
  1365. setTimeout(() => {
  1366. that.initChartT1(chartData)
  1367. })
  1368. },
  1369. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1370. //console.log(e)
  1371. chartData.forEach((item, index) => {
  1372. item.sliced = false
  1373. item.selected = false
  1374. })
  1375. chartData[e.target.index].sliced = true
  1376. chartData[e.target.index].selected = true
  1377. chart.update({
  1378. series: [{
  1379. type: 'pie',
  1380. name: '占比',
  1381. point: {
  1382. events: {
  1383. click: function (e) {
  1384. that.showTip3 = true
  1385. that.echartTitle = '传统产业分析'
  1386. setTimeout(() => {
  1387. that.initChartT1(chartData)
  1388. })
  1389. }
  1390. }
  1391. },
  1392. data: chartData
  1393. }]
  1394. })
  1395. timer && clearInterval(timer);
  1396. },
  1397. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  1398. var points = chart.series[0].points;
  1399. var len = points.length;
  1400. timer && clearInterval(timer);
  1401. timer = setInterval(function () {
  1402. autoTooltip(points[i]);
  1403. chartData.forEach((item, index) => {
  1404. item.sliced = false
  1405. item.selected = false
  1406. if (index == i) {
  1407. item.sliced = true
  1408. item.selected = true
  1409. }
  1410. })
  1411. chart.update({
  1412. series: [{
  1413. type: 'pie',
  1414. name: '占比',
  1415. point: {
  1416. events: {
  1417. click: function (e) {
  1418. that.showTip3 = true
  1419. that.echartTitle = '传统产业分析'
  1420. setTimeout(() => {
  1421. that.initChartT1(chartData)
  1422. })
  1423. }
  1424. }
  1425. },
  1426. data: chartData
  1427. }]
  1428. })
  1429. i++;
  1430. if (i === len) {
  1431. i = 0;
  1432. }
  1433. }, 2000);
  1434. }
  1435. }
  1436. },
  1437. data: chartData
  1438. }]
  1439. }
  1440. var chart = Highcharts.chart('echartL4', option);
  1441. function autoTooltip (point) {
  1442. chart.tooltip.refresh(point);
  1443. }
  1444. },
  1445. initChartL5 () {
  1446. // let data = [
  1447. // { value: [29.26, 102], name: '新一代信息技术' },
  1448. // { value: [59.11, 38], name: '高端装备制造' },
  1449. // { value: [3.96, 5], name: '新材料' },
  1450. // { value: [2.12, 7], name: '生物' },
  1451. // { value: [100.09, 79], name: '新能源' },
  1452. // { value: [15.48, 32], name: '节能环保' },
  1453. // { value: [3.00, 3], name: '相关服务业' },
  1454. // ]
  1455. // let count = 0
  1456. // data.forEach(item => {
  1457. // count += item.value[0]
  1458. // })
  1459. // let myChart = echarts.init(this.$refs['echartL5'])
  1460. // let option = {
  1461. // title: {
  1462. // text: '战略性新兴产业',
  1463. // x: 'center',
  1464. // y: '0%',
  1465. // textStyle: {
  1466. // color: 'rgba(255,255,255,0.6)',
  1467. // fontSize: 12,
  1468. // },
  1469. // },
  1470. // tooltip: {
  1471. // trigger: 'item',
  1472. // formatter: function (params) {
  1473. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  1474. // }
  1475. // },
  1476. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1477. // legend: {
  1478. // show: false,
  1479. // icon: 'circle',
  1480. // top: 'bottom',
  1481. // orient: 'vertical',
  1482. // right: '-3%',
  1483. // textStyle: {
  1484. // color: '#9DB9EB',
  1485. // fontSize: '10px'
  1486. // },
  1487. // itemWidth: 10,
  1488. // itemHeight: 10
  1489. // },
  1490. // series: [
  1491. // {
  1492. // name: '',
  1493. // type: 'pie',
  1494. // // radius: ['0%', '70%'],
  1495. // radius: ['50%', '65%'],
  1496. // center: ['50%', '55%'],
  1497. // itemStyle: {
  1498. // normal: {
  1499. // borderColor: 'rgba(1,31,64,0.7)',
  1500. // borderWidth: 6,
  1501. // label: {
  1502. // show: false,
  1503. // },
  1504. // },
  1505. // },
  1506. // labelLine: {
  1507. // show: false,
  1508. // },
  1509. // data
  1510. // },
  1511. // ],
  1512. // }
  1513. // myChart.setOption(option)
  1514. // tools.loopShowTooltip(myChart, option, {
  1515. // nterval: 2000,
  1516. // loopSeries: true,
  1517. // })
  1518. // let that = this
  1519. // myChart.on('click', function (param) {
  1520. // console.log(param)
  1521. // that.showTip3 = true
  1522. // setTimeout(() => {
  1523. // that.initChartT1(data, option)
  1524. // })
  1525. // })
  1526. // { value: [29.26, 102], name: '新一代信息技术' },
  1527. // { value: [59.11, 38], name: '高端装备制造' },
  1528. // { value: [3.96, 5], name: '新材料' },
  1529. // { value: [2.12, 7], name: '生物' },
  1530. // { value: [100.09, 79], name: '新能源' },
  1531. // { value: [15.48, 32], name: '节能环保' },
  1532. // { value: [3.00, 3], name: '相关服务业' },
  1533. // var chartData = [
  1534. // {
  1535. // name: '新一代信息技术',
  1536. // y: 29.26,
  1537. // x: 75,
  1538. // sliced: false,
  1539. // selected: false,
  1540. // },
  1541. // {
  1542. // name: '高端装备制造',
  1543. // y: 100.41,
  1544. // x: 28,
  1545. // sliced: false,
  1546. // selected: false,
  1547. // },
  1548. // {
  1549. // name: '新材料',
  1550. // y: 6.72,
  1551. // x: 4,
  1552. // sliced: false,
  1553. // selected: false,
  1554. // },
  1555. // {
  1556. // name: '生物',
  1557. // y: 3.60,
  1558. // x: 58,
  1559. // sliced: false,
  1560. // selected: false,
  1561. // },
  1562. // {
  1563. // name: '新能源',
  1564. // y: 170.03,
  1565. // x: 58,
  1566. // sliced: false,
  1567. // selected: false,
  1568. // }
  1569. // ]
  1570. var chartData = [
  1571. {
  1572. name: '新一代信息技术',
  1573. y: 39.96,
  1574. num: 101,
  1575. //x: 75,
  1576. sliced: false,
  1577. selected: false,
  1578. },
  1579. {
  1580. name: '高端装备制造',
  1581. y: 62.08,
  1582. num: 24,
  1583. sliced: false,
  1584. selected: false,
  1585. },
  1586. {
  1587. name: '新材料',
  1588. y: 10.02,
  1589. num: 3,
  1590. sliced: false,
  1591. selected: false,
  1592. },
  1593. {
  1594. name: '生物',
  1595. y: 2.17,
  1596. num: 4,
  1597. sliced: false,
  1598. selected: false,
  1599. },
  1600. {
  1601. name: '新能源',
  1602. y: 105.20,
  1603. num: 81,
  1604. sliced: false,
  1605. selected: false,
  1606. },
  1607. {
  1608. name: '节能环保',
  1609. y: 31.42,
  1610. num: 23,
  1611. sliced: false,
  1612. selected: false,
  1613. },
  1614. {
  1615. name: '相关服务业',
  1616. y: 0.08,
  1617. num: 3,
  1618. sliced: false,
  1619. selected: false,
  1620. }
  1621. ]
  1622. var timer = null;
  1623. var i = 0;
  1624. let that = this
  1625. var option = {
  1626. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39', '#5783ab'],
  1627. chart: {
  1628. type: 'pie',
  1629. backgroundColor: 'rgba(0,0,0,0)',
  1630. options3d: {
  1631. enabled: true,
  1632. alpha: 45,
  1633. //beta: 0
  1634. },
  1635. events: {
  1636. // load,图表加载完成时触发
  1637. load: function () {
  1638. var chart = this;
  1639. var points = chart.series[0].points;
  1640. var len = points.length;
  1641. timer && clearInterval(timer);
  1642. timer = setInterval(function () {
  1643. autoTooltip(points[i]);
  1644. chartData.forEach((item, index) => {
  1645. item.sliced = false
  1646. item.selected = false
  1647. if (index == i) {
  1648. item.sliced = true
  1649. item.selected = true
  1650. }
  1651. })
  1652. chart.update({
  1653. series: [{
  1654. type: 'pie',
  1655. name: '占比',
  1656. point: {
  1657. events: {
  1658. click: function (e) {
  1659. that.showTip3 = true
  1660. that.echartTitle = '战略性新兴产业'
  1661. setTimeout(() => {
  1662. that.initChartT1(chartData)
  1663. })
  1664. }
  1665. }
  1666. },
  1667. data: chartData
  1668. }]
  1669. })
  1670. i++;
  1671. if (i === len) {
  1672. i = 0;
  1673. }
  1674. }, 2000);
  1675. },
  1676. legendItemClick: function (event) {
  1677. console.log(event);
  1678. return true;
  1679. }
  1680. }
  1681. },
  1682. credits: {
  1683. enabled: false //去掉hightchats水印
  1684. },
  1685. title: {
  1686. text: '战略性新兴产业',
  1687. style: {
  1688. color: 'rgba(255,255,255,0.6)',
  1689. fontSize: 12,
  1690. }
  1691. },
  1692. tooltip: {
  1693. crosshairs: true,
  1694. backgroundColor: 'rgba(0,0,0,0.5)',
  1695. // positioner: function(e){
  1696. // console.log(e, this)
  1697. // },
  1698. useHTML: true, //开启html模式
  1699. style: {
  1700. color: '#fff',
  1701. },
  1702. formatter: function (e) {
  1703. //console.log(this)
  1704. let num = chartData[this.colorIndex].num
  1705. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1706. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1707. },
  1708. //pointFormat:
  1709. },
  1710. plotOptions: {
  1711. pie: {
  1712. allowPointSelect: true,
  1713. showInLegend: false, // 图例
  1714. cursor: 'pointer',
  1715. size: 160,
  1716. innerSize: 100, //环形图中间空白,0为饼图
  1717. depth: 25, //立体高度
  1718. slicedOffset: 21, //动画距离
  1719. dataLabels: {
  1720. enabled: false, // 是否展示指示线
  1721. format: '{point.name}: {point.percentage}'
  1722. }
  1723. },
  1724. },
  1725. series: [{
  1726. type: 'pie',
  1727. name: '占比',
  1728. //center: ['35%','50%'],
  1729. point: {
  1730. events: {
  1731. click: function (e) { //点击事件
  1732. that.showTip3 = true
  1733. that.echartTitle = '战略性新兴产业'
  1734. setTimeout(() => {
  1735. that.initChartT1(chartData)
  1736. })
  1737. },
  1738. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1739. //console.log(e)
  1740. chartData.forEach((item, index) => {
  1741. item.sliced = false
  1742. item.selected = false
  1743. })
  1744. chartData[e.target.index].sliced = true
  1745. chartData[e.target.index].selected = true
  1746. chart.update({
  1747. series: [{
  1748. type: 'pie',
  1749. name: '占比',
  1750. point: {
  1751. events: {
  1752. click: function (e) {
  1753. that.showTip3 = true
  1754. that.echartTitle = '战略性新兴产业'
  1755. setTimeout(() => {
  1756. that.initChartT1(chartData)
  1757. })
  1758. }
  1759. }
  1760. },
  1761. data: chartData
  1762. }]
  1763. })
  1764. timer && clearInterval(timer);
  1765. },
  1766. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  1767. var points = chart.series[0].points;
  1768. var len = points.length;
  1769. timer && clearInterval(timer);
  1770. timer = setInterval(function () {
  1771. autoTooltip(points[i]);
  1772. chartData.forEach((item, index) => {
  1773. item.sliced = false
  1774. item.selected = false
  1775. if (index == i) {
  1776. item.sliced = true
  1777. item.selected = true
  1778. }
  1779. })
  1780. chart.update({
  1781. series: [{
  1782. type: 'pie',
  1783. name: '占比',
  1784. point: {
  1785. events: {
  1786. click: function (e) {
  1787. that.showTip3 = true
  1788. that.echartTitle = '战略性新兴产业'
  1789. setTimeout(() => {
  1790. that.initChartT1(chartData)
  1791. })
  1792. }
  1793. }
  1794. },
  1795. data: chartData
  1796. }]
  1797. })
  1798. i++;
  1799. if (i === len) {
  1800. i = 0;
  1801. }
  1802. }, 2000);
  1803. }
  1804. }
  1805. },
  1806. data: chartData
  1807. }]
  1808. }
  1809. var chart = Highcharts.chart('echartL5', option);
  1810. function autoTooltip (point) {
  1811. chart.tooltip.refresh(point);
  1812. }
  1813. },
  1814. initChartL6 () {
  1815. // let data = [
  1816. // { value: [25.82, 43], name: '化工' },
  1817. // { value: [17.36, 21], name: '煤层气' },
  1818. // { value: [0.04, 1], name: '文旅康养' },
  1819. // { value: [1.51, 7], name: '体育' },
  1820. // { value: [9.32, 5], name: '酿造' },
  1821. // { value: [71.12, 129], name: '建筑房地产' },
  1822. // { value: [9.11, 14], name: '农业' },
  1823. // ]
  1824. // let count = 0
  1825. // data.forEach(item => {
  1826. // count += item.value[0]
  1827. // })
  1828. // let myChart = echarts.init(this.$refs['echartL6'])
  1829. // let option = {
  1830. // title: {
  1831. // text: '特色优势产业',
  1832. // x: 'center',
  1833. // y: '0%',
  1834. // textStyle: {
  1835. // color: 'rgba(255,255,255,0.6)',
  1836. // fontSize: 12,
  1837. // },
  1838. // },
  1839. // tooltip: {
  1840. // trigger: 'item',
  1841. // formatter: function (params) {
  1842. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  1843. // }
  1844. // // position: ['30%', '87%'],
  1845. // },
  1846. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1847. // legend: {
  1848. // show: false,
  1849. // icon: 'circle',
  1850. // top: 'bottom',
  1851. // orient: 'vertical',
  1852. // right: '-3%',
  1853. // textStyle: {
  1854. // color: '#9DB9EB',
  1855. // fontSize: '10px'
  1856. // },
  1857. // itemWidth: 10,
  1858. // itemHeight: 10
  1859. // },
  1860. // series: [
  1861. // {
  1862. // name: '',
  1863. // type: 'pie',
  1864. // // radius: ['0%', '70%'],
  1865. // radius: ['50%', '65%'],
  1866. // center: ['50%', '55%'],
  1867. // itemStyle: {
  1868. // normal: {
  1869. // borderColor: 'rgba(1,31,64,0.7)',
  1870. // borderWidth: 6,
  1871. // label: {
  1872. // show: false,
  1873. // },
  1874. // },
  1875. // },
  1876. // labelLine: {
  1877. // show: false,
  1878. // },
  1879. // data,
  1880. // },
  1881. // ],
  1882. // }
  1883. // myChart.setOption(option)
  1884. // tools.loopShowTooltip(myChart, option, {
  1885. // nterval: 2000,
  1886. // loopSeries: true,
  1887. // })
  1888. // let that = this
  1889. // myChart.on('click', function (param) {
  1890. // console.log(param)
  1891. // that.showTip3 = true
  1892. // setTimeout(() => {
  1893. // that.initChartT1(data, option)
  1894. // })
  1895. // })
  1896. // { value: [25.82, 43], name: '化工' },
  1897. // { value: [17.36, 21], name: '煤层气' },
  1898. // { value: [0.04, 1], name: '文旅康养' },
  1899. // { value: [1.51, 7], name: '体育' },
  1900. // { value: [9.32, 5], name: '酿造' },
  1901. // { value: [71.12, 129], name: '建筑房地产' },
  1902. // { value: [9.11, 14], name: '农业' },
  1903. var chartData = [
  1904. {
  1905. name: '化工',
  1906. y: 25.82,
  1907. num: 4,
  1908. sliced: false,
  1909. selected: false,
  1910. },
  1911. {
  1912. name: '煤层气',
  1913. y: 17.22,
  1914. num: 21,
  1915. sliced: false,
  1916. selected: false,
  1917. },
  1918. {
  1919. name: '文旅康养',
  1920. y: 16.22,
  1921. num: 6,
  1922. sliced: false,
  1923. selected: false,
  1924. },
  1925. {
  1926. name: '体育',
  1927. y: 2.02,
  1928. num: 8,
  1929. sliced: false,
  1930. selected: false,
  1931. },
  1932. {
  1933. name: '酿造',
  1934. y: 27.68,
  1935. num: 5,
  1936. sliced: false,
  1937. selected: false,
  1938. },
  1939. {
  1940. name: '其他',
  1941. y: 6.18,
  1942. num: 2,
  1943. sliced: false,
  1944. selected: false,
  1945. },
  1946. {
  1947. name: '建筑房地产',
  1948. y: 251.83,
  1949. num: 114,
  1950. sliced: false,
  1951. selected: false,
  1952. },
  1953. {
  1954. name: '农业',
  1955. y: 18.54,
  1956. num: 12,
  1957. sliced: false,
  1958. selected: false,
  1959. },
  1960. ]
  1961. var timer = null;
  1962. var i = 0;
  1963. let that = this
  1964. var option = {
  1965. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39', '#497dad'],
  1966. chart: {
  1967. type: 'pie',
  1968. backgroundColor: 'rgba(0,0,0,0)',
  1969. options3d: {
  1970. enabled: true,
  1971. alpha: 45,
  1972. //beta: 0
  1973. },
  1974. events: {
  1975. // load,图表加载完成时触发
  1976. load: function () {
  1977. var chart = this;
  1978. var points = chart.series[0].points;
  1979. var len = points.length;
  1980. timer && clearInterval(timer);
  1981. timer = setInterval(function () {
  1982. autoTooltip(points[i]);
  1983. chartData.forEach((item, index) => {
  1984. item.sliced = false
  1985. item.selected = false
  1986. if (index == i) {
  1987. item.sliced = true
  1988. item.selected = true
  1989. }
  1990. })
  1991. chart.update({
  1992. series: [{
  1993. type: 'pie',
  1994. name: '占比',
  1995. point: {
  1996. events: {
  1997. click: function (e) {
  1998. that.showTip3 = true
  1999. that.echartTitle = '特色优势产业'
  2000. setTimeout(() => {
  2001. that.initChartT1(chartData)
  2002. })
  2003. }
  2004. }
  2005. },
  2006. data: chartData
  2007. }]
  2008. })
  2009. i++;
  2010. if (i === len) {
  2011. i = 0;
  2012. }
  2013. }, 2000);
  2014. },
  2015. legendItemClick: function (event) {
  2016. console.log(event);
  2017. return true;
  2018. }
  2019. }
  2020. },
  2021. credits: {
  2022. enabled: false //去掉hightchats水印
  2023. },
  2024. title: {
  2025. text: '特色优势产业',
  2026. style: {
  2027. color: 'rgba(255,255,255,0.6)',
  2028. fontSize: 12,
  2029. }
  2030. },
  2031. tooltip: {
  2032. crosshairs: true,
  2033. backgroundColor: 'rgba(0,0,0,0.5)',
  2034. // positioner: function(e){
  2035. // console.log(e, this)
  2036. // },
  2037. useHTML: true, //开启html模式
  2038. style: {
  2039. color: '#fff',
  2040. },
  2041. formatter: function (e) {
  2042. //console.log(this)
  2043. let num = chartData[this.colorIndex].num
  2044. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2045. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2046. },
  2047. //pointFormat:
  2048. },
  2049. plotOptions: {
  2050. pie: {
  2051. allowPointSelect: true,
  2052. showInLegend: false, // 图例
  2053. cursor: 'pointer',
  2054. size: 160,
  2055. innerSize: 100, //环形图中间空白,0为饼图
  2056. depth: 25, //立体高度
  2057. slicedOffset: 21, //动画距离
  2058. dataLabels: {
  2059. enabled: false, // 是否展示指示线
  2060. format: '{point.name}: {point.percentage}'
  2061. }
  2062. },
  2063. },
  2064. series: [{
  2065. type: 'pie',
  2066. name: '占比',
  2067. //center: ['35%','50%'],
  2068. point: {
  2069. events: {
  2070. click: function (e) { //点击事件
  2071. that.showTip3 = true
  2072. that.echartTitle = '特色优势产业'
  2073. setTimeout(() => {
  2074. that.initChartT1(chartData)
  2075. })
  2076. },
  2077. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2078. //console.log(e)
  2079. chartData.forEach((item, index) => {
  2080. item.sliced = false
  2081. item.selected = false
  2082. })
  2083. chartData[e.target.index].sliced = true
  2084. chartData[e.target.index].selected = true
  2085. chart.update({
  2086. series: [{
  2087. type: 'pie',
  2088. name: '占比',
  2089. point: {
  2090. events: {
  2091. click: function (e) {
  2092. that.showTip3 = true
  2093. that.echartTitle = '特色优势产业'
  2094. setTimeout(() => {
  2095. that.initChartT1(chartData)
  2096. })
  2097. }
  2098. }
  2099. },
  2100. data: chartData
  2101. }]
  2102. })
  2103. timer && clearInterval(timer);
  2104. },
  2105. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2106. var points = chart.series[0].points;
  2107. var len = points.length;
  2108. timer && clearInterval(timer);
  2109. timer = setInterval(function () {
  2110. autoTooltip(points[i]);
  2111. chartData.forEach((item, index) => {
  2112. item.sliced = false
  2113. item.selected = false
  2114. if (index == i) {
  2115. item.sliced = true
  2116. item.selected = true
  2117. }
  2118. })
  2119. chart.update({
  2120. series: [{
  2121. type: 'pie',
  2122. name: '占比',
  2123. point: {
  2124. events: {
  2125. click: function (e) {
  2126. that.showTip3 = true
  2127. that.echartTitle = '特色优势产业'
  2128. setTimeout(() => {
  2129. that.initChartT1(chartData)
  2130. })
  2131. }
  2132. }
  2133. },
  2134. data: chartData
  2135. }]
  2136. })
  2137. i++;
  2138. if (i === len) {
  2139. i = 0;
  2140. }
  2141. }, 2000);
  2142. }
  2143. }
  2144. },
  2145. data: chartData
  2146. }]
  2147. }
  2148. var chart = Highcharts.chart('echartL6', option);
  2149. function autoTooltip (point) {
  2150. chart.tooltip.refresh(point);
  2151. }
  2152. },
  2153. initChartL7 () {
  2154. // let data = [
  2155. // { value: [155.82, 51], name: '交通运输业' },
  2156. // { value: [8.47, 19], name: '煤气层管网' },
  2157. // { value: [10.64, 24], name: '物流贸易' },
  2158. // { value: [41.05, 46], name: '水务' },
  2159. // { value: [2.14, 7], name: '其他' },
  2160. // ]
  2161. // let count = 0
  2162. // data.forEach(item => {
  2163. // count += item.value[0]
  2164. // })
  2165. // let myChart = echarts.init(this.$refs['echartL7'])
  2166. // let option = {
  2167. // title: {
  2168. // text: '公共基础等产业',
  2169. // x: 'center',
  2170. // y: '0%',
  2171. // textStyle: {
  2172. // color: 'rgba(255,255,255,0.6)',
  2173. // fontSize: 12,
  2174. // },
  2175. // },
  2176. // tooltip: {
  2177. // trigger: 'item',
  2178. // formatter: function (params) {
  2179. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  2180. // }
  2181. // },
  2182. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2183. // legend: {
  2184. // show: false,
  2185. // icon: 'circle',
  2186. // top: 'bottom',
  2187. // orient: 'vertical',
  2188. // right: '-3%',
  2189. // textStyle: {
  2190. // color: '#9DB9EB',
  2191. // fontSize: '10px'
  2192. // },
  2193. // itemWidth: 10,
  2194. // itemHeight: 10
  2195. // },
  2196. // series: [
  2197. // {
  2198. // name: '',
  2199. // type: 'pie',
  2200. // // radius: ['0%', '70%'],
  2201. // radius: ['50%', '65%'],
  2202. // center: ['50%', '55%'],
  2203. // itemStyle: {
  2204. // normal: {
  2205. // borderColor: 'rgba(1,31,64,0.7)',
  2206. // borderWidth: 6,
  2207. // label: {
  2208. // show: false,
  2209. // },
  2210. // },
  2211. // },
  2212. // labelLine: {
  2213. // show: false,
  2214. // },
  2215. // data
  2216. // },
  2217. // ],
  2218. // }
  2219. // myChart.setOption(option)
  2220. // tools.loopShowTooltip(myChart, option, {
  2221. // nterval: 2000,
  2222. // loopSeries: true,
  2223. // })
  2224. // let that = this
  2225. // myChart.on('click', function (param) {
  2226. // console.log(param)
  2227. // that.showTip3 = true
  2228. // setTimeout(() => {
  2229. // that.initChartT1(data, option)
  2230. // })
  2231. // })
  2232. // { value: [155.82, 51], name: '交通运输业' },
  2233. // { value: [8.47, 19], name: '煤气层管网' },
  2234. // { value: [10.64, 24], name: '物流贸易' },
  2235. // { value: [41.05, 46], name: '水务' },
  2236. // { value: [2.14, 7], name: '其他' },
  2237. var chartData = [
  2238. {
  2239. name: '交通运输业',
  2240. y: 393.89,
  2241. num: 40,
  2242. sliced: false,
  2243. selected: false,
  2244. },
  2245. {
  2246. name: '市政设施',
  2247. y: 10.09,
  2248. num: 1,
  2249. sliced: false,
  2250. selected: false,
  2251. },
  2252. {
  2253. name: '煤气层管网',
  2254. y: 10.37,
  2255. num: 16,
  2256. sliced: false,
  2257. selected: false,
  2258. },
  2259. {
  2260. name: '物流贸易',
  2261. y: 27.22,
  2262. num: 20,
  2263. sliced: false,
  2264. selected: false,
  2265. },
  2266. {
  2267. name: '水务',
  2268. y: 87.21,
  2269. num: 35,
  2270. sliced: false,
  2271. selected: false,
  2272. },
  2273. {
  2274. name: '其他',
  2275. y: 7.60,
  2276. num: 11,
  2277. sliced: false,
  2278. selected: false,
  2279. }
  2280. ]
  2281. var timer = null;
  2282. var i = 0;
  2283. let that = this
  2284. var option = {
  2285. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2286. chart: {
  2287. type: 'pie',
  2288. backgroundColor: 'rgba(0,0,0,0)',
  2289. options3d: {
  2290. enabled: true,
  2291. alpha: 45,
  2292. //beta: 0
  2293. },
  2294. events: {
  2295. // load,图表加载完成时触发
  2296. load: function () {
  2297. var chart = this;
  2298. var points = chart.series[0].points;
  2299. var len = points.length;
  2300. timer && clearInterval(timer);
  2301. timer = setInterval(function () {
  2302. autoTooltip(points[i]);
  2303. chartData.forEach((item, index) => {
  2304. item.sliced = false
  2305. item.selected = false
  2306. if (index == i) {
  2307. item.sliced = true
  2308. item.selected = true
  2309. }
  2310. })
  2311. chart.update({
  2312. series: [{
  2313. type: 'pie',
  2314. name: '占比',
  2315. point: {
  2316. events: {
  2317. click: function (e) {
  2318. that.showTip3 = true
  2319. that.echartTitle = '公共基础等产业'
  2320. setTimeout(() => {
  2321. that.initChartT1(chartData)
  2322. })
  2323. }
  2324. }
  2325. },
  2326. data: chartData
  2327. }]
  2328. })
  2329. i++;
  2330. if (i === len) {
  2331. i = 0;
  2332. }
  2333. }, 2000);
  2334. },
  2335. legendItemClick: function (event) {
  2336. console.log(event);
  2337. return true;
  2338. }
  2339. }
  2340. },
  2341. credits: {
  2342. enabled: false //去掉hightchats水印
  2343. },
  2344. title: {
  2345. text: '公共基础等产业',
  2346. style: {
  2347. color: 'rgba(255,255,255,0.6)',
  2348. fontSize: 12,
  2349. }
  2350. },
  2351. tooltip: {
  2352. crosshairs: true,
  2353. backgroundColor: 'rgba(0,0,0,0.5)',
  2354. // positioner: function(e){
  2355. // console.log(e, this)
  2356. // },
  2357. useHTML: true, //开启html模式
  2358. style: {
  2359. color: '#fff',
  2360. },
  2361. formatter: function (e) {
  2362. //console.log(this)
  2363. let num = chartData[this.colorIndex].num
  2364. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2365. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2366. },
  2367. //pointFormat:
  2368. },
  2369. plotOptions: {
  2370. pie: {
  2371. allowPointSelect: true,
  2372. showInLegend: false, // 图例
  2373. cursor: 'pointer',
  2374. size: 160,
  2375. innerSize: 100, //环形图中间空白,0为饼图
  2376. depth: 25, //立体高度
  2377. slicedOffset: 21, //动画距离
  2378. dataLabels: {
  2379. enabled: false, // 是否展示指示线
  2380. format: '{point.name}: {point.percentage}'
  2381. }
  2382. },
  2383. },
  2384. series: [{
  2385. type: 'pie',
  2386. name: '占比',
  2387. //center: ['35%','50%'],
  2388. point: {
  2389. events: {
  2390. click: function (e) { //点击事件
  2391. that.showTip3 = true
  2392. that.echartTitle = '公共基础等产业'
  2393. setTimeout(() => {
  2394. that.initChartT1(chartData)
  2395. })
  2396. },
  2397. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2398. //console.log(e)
  2399. chartData.forEach((item, index) => {
  2400. item.sliced = false
  2401. item.selected = false
  2402. })
  2403. chartData[e.target.index].sliced = true
  2404. chartData[e.target.index].selected = true
  2405. chart.update({
  2406. series: [{
  2407. type: 'pie',
  2408. name: '占比',
  2409. point: {
  2410. events: {
  2411. click: function (e) {
  2412. that.showTip3 = true
  2413. that.echartTitle = '公共基础等产业'
  2414. setTimeout(() => {
  2415. that.initChartT1(chartData)
  2416. })
  2417. }
  2418. }
  2419. },
  2420. data: chartData
  2421. }]
  2422. })
  2423. timer && clearInterval(timer);
  2424. },
  2425. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2426. var points = chart.series[0].points;
  2427. var len = points.length;
  2428. timer && clearInterval(timer);
  2429. timer = setInterval(function () {
  2430. autoTooltip(points[i]);
  2431. chartData.forEach((item, index) => {
  2432. item.sliced = false
  2433. item.selected = false
  2434. if (index == i) {
  2435. item.sliced = true
  2436. item.selected = true
  2437. }
  2438. })
  2439. chart.update({
  2440. series: [{
  2441. type: 'pie',
  2442. name: '占比',
  2443. point: {
  2444. events: {
  2445. click: function (e) {
  2446. that.showTip3 = true
  2447. that.echartTitle = '公共基础等产业'
  2448. setTimeout(() => {
  2449. that.initChartT1(chartData)
  2450. })
  2451. }
  2452. }
  2453. },
  2454. data: chartData
  2455. }]
  2456. })
  2457. i++;
  2458. if (i === len) {
  2459. i = 0;
  2460. }
  2461. }, 2000);
  2462. }
  2463. }
  2464. },
  2465. data: chartData
  2466. }]
  2467. }
  2468. var chart = Highcharts.chart('echartL7', option);
  2469. function autoTooltip (point) {
  2470. chart.tooltip.refresh(point);
  2471. }
  2472. },
  2473. initChartR4 () {
  2474. let myChart = echarts.init(this.$refs['echartR4'])
  2475. let option = {
  2476. title: {
  2477. text: '2022年的可投资总额',
  2478. x: 'center',
  2479. y: '87%',
  2480. textStyle: {
  2481. color: 'rgba(255,255,255,0.6)',
  2482. fontSize: 12,
  2483. },
  2484. },
  2485. tooltip: {
  2486. trigger: 'item',
  2487. },
  2488. color: ['#69C1FF', '#4B97CC',],
  2489. legend: {
  2490. icon: 'circle',
  2491. top: 'bottom',
  2492. orient: 'vertical',
  2493. right: '1%',
  2494. textStyle: {
  2495. color: '#9DB9EB',
  2496. },
  2497. },
  2498. series: [
  2499. {
  2500. name: '',
  2501. type: 'pie',
  2502. label: {
  2503. normal: {
  2504. show: true,
  2505. position: 'center',
  2506. color: '#4c4a4a',
  2507. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  2508. rich: {
  2509. total: {
  2510. fontSize: 20,
  2511. fontFamily: "微软雅黑",
  2512. color: '#fff'
  2513. },
  2514. active: {
  2515. fontFamily: "微软雅黑",
  2516. fontSize: 15,
  2517. color: '#fff'
  2518. },
  2519. }
  2520. },
  2521. emphasis: {//中间文字显示
  2522. show: true,
  2523. }
  2524. },
  2525. radius: ['40%', '60%'],
  2526. center: ['50%', '45%'],
  2527. itemStyle: {
  2528. normal: {
  2529. label: {
  2530. show: false,
  2531. },
  2532. },
  2533. },
  2534. labelLine: {
  2535. show: false,
  2536. },
  2537. data: [
  2538. { value: 1048, name: '已使用额度' },
  2539. { value: 735, name: '可使用额度' }
  2540. ],
  2541. },
  2542. ],
  2543. }
  2544. myChart.setOption(option)
  2545. tools.loopShowTooltip(myChart, option, {
  2546. nterval: 2000,
  2547. loopSeries: true,
  2548. })
  2549. },
  2550. initChartR5 () {
  2551. let myChart = echarts.init(this.$refs['echartR5'])
  2552. let option = {
  2553. title: {
  2554. text: '2023年的可投资总额',
  2555. x: 'center',
  2556. y: '87%',
  2557. textStyle: {
  2558. color: 'rgba(255,255,255,0.6)',
  2559. fontSize: 12,
  2560. },
  2561. },
  2562. tooltip: {
  2563. trigger: 'item',
  2564. },
  2565. color: ['#69C1FF', '#4B97CC',],
  2566. legend: {
  2567. icon: 'circle',
  2568. top: 'bottom',
  2569. orient: 'vertical',
  2570. right: '1%',
  2571. textStyle: {
  2572. color: '#9DB9EB',
  2573. },
  2574. },
  2575. series: [
  2576. {
  2577. name: '',
  2578. type: 'pie',
  2579. label: {
  2580. normal: {
  2581. show: true,
  2582. position: 'center',
  2583. top: '50',
  2584. color: '#4c4a4a',
  2585. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  2586. rich: {
  2587. total: {
  2588. fontSize: 20,
  2589. fontFamily: "微软雅黑",
  2590. color: '#fff'
  2591. },
  2592. active: {
  2593. fontFamily: "微软雅黑",
  2594. fontSize: 15,
  2595. color: '#fff'
  2596. },
  2597. }
  2598. },
  2599. emphasis: {//中间文字显示
  2600. show: true,
  2601. }
  2602. },
  2603. radius: ['40%', '60%'],
  2604. center: ['50%', '45%'],
  2605. itemStyle: {
  2606. normal: {
  2607. label: {
  2608. show: false,
  2609. },
  2610. },
  2611. },
  2612. labelLine: {
  2613. show: false,
  2614. },
  2615. data: [
  2616. { value: 1048, name: '已使用额度' },
  2617. { value: 735, name: '可使用额度' }
  2618. ],
  2619. },
  2620. ],
  2621. }
  2622. myChart.setOption(option)
  2623. tools.loopShowTooltip(myChart, option, {
  2624. nterval: 2000,
  2625. loopSeries: true,
  2626. })
  2627. },
  2628. initChartR1 () {
  2629. // let data = [
  2630. // { value: [1098.71, 713], name: '主业' },
  2631. // { value: [65.17, 84], name: '辅业' }
  2632. // ]
  2633. // let count = 0
  2634. // data.forEach(item => {
  2635. // count += item.value[0]
  2636. // })
  2637. // let myChart = echarts.init(this.$refs['echartR1'])
  2638. // let option = {
  2639. // title: {
  2640. // text: '主辅业计划占比',
  2641. // x: 'center',
  2642. // y: '87%',
  2643. // textStyle: {
  2644. // color: 'rgba(255,255,255,0.6)',
  2645. // fontSize: 12,
  2646. // },
  2647. // },
  2648. // tooltip: {
  2649. // trigger: 'item',
  2650. // // formatter: '{b}' + ':' + '{c}' + '<br/>' + '占比:' + '{d}%',
  2651. // // position: ['-5%', '95%'],
  2652. // formatter: function (params) {
  2653. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  2654. // }
  2655. // },
  2656. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2657. // legend: {
  2658. // show: false,
  2659. // icon: 'circle',
  2660. // top: 'bottom',
  2661. // orient: 'vertical',
  2662. // right: '-3%',
  2663. // textStyle: {
  2664. // color: '#9DB9EB',
  2665. // fontSize: '10px'
  2666. // },
  2667. // itemWidth: 10,
  2668. // itemHeight: 10
  2669. // },
  2670. // series: [
  2671. // {
  2672. // name: '',
  2673. // type: 'pie',
  2674. // radius: ['40%', '60%'],
  2675. // center: ['50%', '45%'],
  2676. // itemStyle: {
  2677. // normal: {
  2678. // borderColor: 'rgba(1,31,64,0.7)',
  2679. // borderWidth: 6,
  2680. // label: {
  2681. // show: false,
  2682. // },
  2683. // },
  2684. // },
  2685. // labelLine: {
  2686. // show: false,
  2687. // },
  2688. // data,
  2689. // },
  2690. // ],
  2691. // }
  2692. // myChart.setOption(option)
  2693. // tools.loopShowTooltip(myChart, option, {
  2694. // nterval: 2000,
  2695. // loopSeries: true,
  2696. // })
  2697. // let that = this
  2698. // myChart.on('click', function (param) {
  2699. // console.log(param)
  2700. // that.showTip3 = true
  2701. // setTimeout(() => {
  2702. // that.initChartT1(data, option)
  2703. // })
  2704. // })
  2705. // let data = [
  2706. // { value: [1098.71, 713], name: '主业' },
  2707. // { value: [65.17, 84], name: '辅业' }
  2708. // ]
  2709. var chartData = [
  2710. {
  2711. name: '辅业',
  2712. y: 117.87,
  2713. num: 92,
  2714. sliced: false,
  2715. selected: false,
  2716. },
  2717. {
  2718. name: '主业',
  2719. y: 1650.36,
  2720. num: 508,
  2721. sliced: false,
  2722. selected: false,
  2723. }
  2724. ]
  2725. var timer = null;
  2726. var i = 0;
  2727. let that = this
  2728. var option = {
  2729. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2730. chart: {
  2731. type: 'pie',
  2732. backgroundColor: 'rgba(0,0,0,0)',
  2733. options3d: {
  2734. enabled: true,
  2735. alpha: 45,
  2736. //beta: 0
  2737. },
  2738. events: {
  2739. // load,图表加载完成时触发
  2740. load: function () {
  2741. var chart = this;
  2742. var points = chart.series[0].points;
  2743. var len = points.length;
  2744. timer && clearInterval(timer);
  2745. timer = setInterval(function () {
  2746. autoTooltip(points[i]);
  2747. chartData.forEach((item, index) => {
  2748. item.sliced = false
  2749. item.selected = false
  2750. if (index == i) {
  2751. item.sliced = true
  2752. item.selected = true
  2753. }
  2754. })
  2755. chart.update({
  2756. series: [{
  2757. type: 'pie',
  2758. name: '占比',
  2759. point: {
  2760. events: {
  2761. click: function (e) {
  2762. that.showTip3 = true
  2763. that.echartTitle = '主辅业计划占比'
  2764. setTimeout(() => {
  2765. that.initChartT1(chartData)
  2766. })
  2767. }
  2768. }
  2769. },
  2770. data: chartData
  2771. }]
  2772. })
  2773. i++;
  2774. if (i === len) {
  2775. i = 0;
  2776. chartData.forEach((item, index) => {
  2777. item.sliced = false
  2778. item.selected = false
  2779. })
  2780. chart.update({
  2781. series: [{
  2782. type: 'pie',
  2783. name: '占比',
  2784. point: {
  2785. events: {
  2786. click: function (e) {
  2787. console.log(e)
  2788. }
  2789. }
  2790. },
  2791. data: chartData
  2792. }]
  2793. })
  2794. }
  2795. }, 2000);
  2796. },
  2797. legendItemClick: function (event) {
  2798. console.log(event);
  2799. return true;
  2800. }
  2801. }
  2802. },
  2803. credits: {
  2804. enabled: false //去掉hightchats水印
  2805. },
  2806. title: {
  2807. text: '主辅业计划占比',
  2808. style: {
  2809. color: 'rgba(255,255,255,0.6)',
  2810. fontSize: 12,
  2811. }
  2812. },
  2813. tooltip: {
  2814. crosshairs: true,
  2815. backgroundColor: 'rgba(0,0,0,0.5)',
  2816. // positioner: function(e){
  2817. // console.log(e, this)
  2818. // },
  2819. useHTML: true, //开启html模式
  2820. style: {
  2821. color: '#fff',
  2822. },
  2823. formatter: function (e) {
  2824. //console.log(this)
  2825. let num = chartData[this.colorIndex].num
  2826. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2827. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2828. },
  2829. //pointFormat:
  2830. },
  2831. plotOptions: {
  2832. pie: {
  2833. allowPointSelect: true,
  2834. showInLegend: false, // 图例
  2835. cursor: 'pointer',
  2836. size: 160,
  2837. innerSize: 100, //环形图中间空白,0为饼图
  2838. depth: 25, //立体高度
  2839. slicedOffset: 21, //动画距离
  2840. dataLabels: {
  2841. enabled: false, // 是否展示指示线
  2842. format: '{point.name}: {point.percentage}'
  2843. }
  2844. },
  2845. },
  2846. series: [{
  2847. type: 'pie',
  2848. name: '占比',
  2849. //center: ['35%','50%'],
  2850. point: {
  2851. events: {
  2852. click: function (e) { //点击事件
  2853. that.showTip3 = true
  2854. that.echartTitle = '主辅业计划占比'
  2855. setTimeout(() => {
  2856. that.initChartT1(chartData)
  2857. })
  2858. },
  2859. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2860. //console.log(e)
  2861. chartData.forEach((item, index) => {
  2862. item.sliced = false
  2863. item.selected = false
  2864. })
  2865. chartData[e.target.index].sliced = true
  2866. chartData[e.target.index].selected = true
  2867. chart.update({
  2868. series: [{
  2869. type: 'pie',
  2870. name: '占比',
  2871. point: {
  2872. events: {
  2873. click: function (e) {
  2874. that.showTip3 = true
  2875. that.echartTitle = '主辅业计划占比'
  2876. setTimeout(() => {
  2877. that.initChartT1(chartData)
  2878. })
  2879. }
  2880. }
  2881. },
  2882. data: chartData
  2883. }]
  2884. })
  2885. timer && clearInterval(timer);
  2886. },
  2887. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2888. var points = chart.series[0].points;
  2889. var len = points.length;
  2890. timer && clearInterval(timer);
  2891. timer = setInterval(function () {
  2892. autoTooltip(points[i]);
  2893. chartData.forEach((item, index) => {
  2894. item.sliced = false
  2895. item.selected = false
  2896. if (index == i) {
  2897. item.sliced = true
  2898. item.selected = true
  2899. }
  2900. })
  2901. chart.update({
  2902. series: [{
  2903. type: 'pie',
  2904. name: '占比',
  2905. point: {
  2906. events: {
  2907. click: function (e) {
  2908. that.showTip3 = true
  2909. that.echartTitle = '主辅业计划占比'
  2910. setTimeout(() => {
  2911. that.initChartT1(chartData)
  2912. })
  2913. }
  2914. }
  2915. },
  2916. data: chartData
  2917. }]
  2918. })
  2919. i++;
  2920. if (i === len) {
  2921. i = 0;
  2922. chartData.forEach((item, index) => {
  2923. item.sliced = false
  2924. item.selected = false
  2925. })
  2926. chart.update({
  2927. series: [{
  2928. type: 'pie',
  2929. name: '占比',
  2930. point: {
  2931. events: {
  2932. click: function (e) {
  2933. that.showTip3 = true
  2934. that.echartTitle = '主辅业计划占比'
  2935. setTimeout(() => {
  2936. that.initChartT1(chartData)
  2937. })
  2938. }
  2939. }
  2940. },
  2941. data: chartData
  2942. }]
  2943. })
  2944. }
  2945. }, 2000);
  2946. }
  2947. }
  2948. },
  2949. data: chartData
  2950. }]
  2951. }
  2952. var chart = Highcharts.chart('echartR1', option);
  2953. function autoTooltip (point) {
  2954. chart.tooltip.refresh(point);
  2955. }
  2956. },
  2957. initChartR2 () {
  2958. // let data = [
  2959. // { value: [340.77, 168], name: '特别监管类' },
  2960. // { value: [390.22, 465], name: '备案类' }
  2961. // ]
  2962. // let count = 0
  2963. // data.forEach(item => {
  2964. // count += item.value[0]
  2965. // })
  2966. // let myChart = echarts.init(this.$refs['echartR2'])
  2967. // let option = {
  2968. // title: {
  2969. // text: '项目管理类型',
  2970. // x: 'center',
  2971. // y: '87%',
  2972. // textStyle: {
  2973. // color: 'rgba(255,255,255,0.6)',
  2974. // fontSize: 12,
  2975. // },
  2976. // },
  2977. // tooltip: {
  2978. // trigger: 'item',
  2979. // formatter: function (params) {
  2980. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  2981. // }
  2982. // // position: ['-5%', '95%'],
  2983. // },
  2984. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2985. // legend: {
  2986. // show: false,
  2987. // icon: 'circle',
  2988. // top: 'bottom',
  2989. // orient: 'vertical',
  2990. // right: '-3%',
  2991. // textStyle: {
  2992. // color: '#9DB9EB',
  2993. // fontSize: '10px'
  2994. // },
  2995. // itemWidth: 10,
  2996. // itemHeight: 10
  2997. // },
  2998. // series: [
  2999. // {
  3000. // name: '',
  3001. // type: 'pie',
  3002. // radius: ['40%', '60%'],
  3003. // center: ['50%', '45%'],
  3004. // itemStyle: {
  3005. // normal: {
  3006. // borderColor: 'rgba(1,31,64,0.7)',
  3007. // borderWidth: 6,
  3008. // label: {
  3009. // show: false,
  3010. // },
  3011. // },
  3012. // },
  3013. // labelLine: {
  3014. // show: false,
  3015. // },
  3016. // data,
  3017. // },
  3018. // ],
  3019. // }
  3020. // myChart.setOption(option)
  3021. // tools.loopShowTooltip(myChart, option, {
  3022. // nterval: 2000,
  3023. // loopSeries: true,
  3024. // })
  3025. // let that = this
  3026. // myChart.on('click', function (param) {
  3027. // console.log(param)
  3028. // that.showTip3 = true
  3029. // setTimeout(() => {
  3030. // that.initChartT1(data, option)
  3031. // })
  3032. // })
  3033. // { value: [340.77, 168], name: '特别监管类' },
  3034. // { value: [390.22, 465], name: '备案类' }
  3035. var chartData = [
  3036. {
  3037. name: '特别监管类',
  3038. y: 428.46,
  3039. num: 221,
  3040. sliced: false,
  3041. selected: false,
  3042. },
  3043. {
  3044. name: '备案类',
  3045. y: 1339.79,
  3046. num: 379,
  3047. sliced: false,
  3048. selected: false,
  3049. }
  3050. ]
  3051. var timer = null;
  3052. var i = 0;
  3053. let that = this
  3054. var chart = Highcharts.chart('echartR2', {
  3055. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  3056. chart: {
  3057. type: 'pie',
  3058. backgroundColor: 'rgba(0,0,0,0)',
  3059. options3d: {
  3060. enabled: true,
  3061. alpha: 45,
  3062. //beta: 0
  3063. },
  3064. events: {
  3065. // load,图表加载完成时触发
  3066. load: function () {
  3067. var chart = this;
  3068. var points = chart.series[0].points;
  3069. var len = points.length;
  3070. timer && clearInterval(timer);
  3071. timer = setInterval(function () {
  3072. autoTooltip(points[i]);
  3073. chartData.forEach((item, index) => {
  3074. item.sliced = false
  3075. item.selected = false
  3076. if (index == i) {
  3077. item.sliced = true
  3078. item.selected = true
  3079. }
  3080. })
  3081. chart.update({
  3082. series: [{
  3083. type: 'pie',
  3084. name: '占比',
  3085. point: {
  3086. events: {
  3087. click: function (e) {
  3088. that.showTip3 = true
  3089. that.echartTitle = '项目管理类型'
  3090. setTimeout(() => {
  3091. that.initChartT1(chartData)
  3092. })
  3093. }
  3094. }
  3095. },
  3096. data: chartData
  3097. }]
  3098. })
  3099. i++;
  3100. if (i === len) {
  3101. i = 0;
  3102. chartData.forEach((item, index) => {
  3103. item.sliced = false
  3104. item.selected = false
  3105. })
  3106. chart.update({
  3107. series: [{
  3108. type: 'pie',
  3109. name: '占比',
  3110. point: {
  3111. events: {
  3112. click: function (e) {
  3113. console.log(e)
  3114. }
  3115. }
  3116. },
  3117. data: chartData
  3118. }]
  3119. })
  3120. }
  3121. }, 2000);
  3122. },
  3123. legendItemClick: function (event) {
  3124. //console.log(event);
  3125. that.showTip3 = true
  3126. that.echartTitle = '项目管理类型'
  3127. setTimeout(() => {
  3128. that.initChartT1(chartData)
  3129. })
  3130. return true;
  3131. }
  3132. }
  3133. },
  3134. credits: {
  3135. enabled: false //去掉hightchats水印
  3136. },
  3137. title: {
  3138. text: '项目管理类型',
  3139. style: {
  3140. color: 'rgba(255,255,255,0.6)',
  3141. fontSize: 12,
  3142. }
  3143. },
  3144. tooltip: {
  3145. crosshairs: true,
  3146. backgroundColor: 'rgba(0,0,0,0.5)',
  3147. // positioner: function(e){
  3148. // console.log(e, this)
  3149. // },
  3150. useHTML: true, //开启html模式
  3151. style: {
  3152. color: '#fff',
  3153. },
  3154. formatter: function (e) {
  3155. //console.log(this)
  3156. let num = chartData[this.colorIndex].num
  3157. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3158. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3159. },
  3160. //pointFormat:
  3161. },
  3162. plotOptions: {
  3163. pie: {
  3164. allowPointSelect: true,
  3165. showInLegend: false, // 图例
  3166. cursor: 'pointer',
  3167. size: 160,
  3168. innerSize: 100, //环形图中间空白,0为饼图
  3169. depth: 25, //立体高度
  3170. slicedOffset: 21, //动画距离
  3171. dataLabels: {
  3172. enabled: false, // 是否展示指示线
  3173. format: '{point.name}: {point.percentage}'
  3174. }
  3175. },
  3176. },
  3177. series: [{
  3178. type: 'pie',
  3179. name: '占比',
  3180. //center: ['35%','50%'],
  3181. point: {
  3182. events: {
  3183. click: function (e) { //点击事件
  3184. that.showTip3 = true
  3185. that.echartTitle = '项目管理类型'
  3186. setTimeout(() => {
  3187. that.initChartT1(chartData)
  3188. })
  3189. },
  3190. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3191. //console.log(e)
  3192. chartData.forEach((item, index) => {
  3193. item.sliced = false
  3194. item.selected = false
  3195. })
  3196. chartData[e.target.index].sliced = true
  3197. chartData[e.target.index].selected = true
  3198. chart.update({
  3199. series: [{
  3200. type: 'pie',
  3201. name: '占比',
  3202. point: {
  3203. events: {
  3204. click: function (e) {
  3205. that.showTip3 = true
  3206. that.echartTitle = '项目管理类型'
  3207. setTimeout(() => {
  3208. that.initChartT1(chartData)
  3209. })
  3210. }
  3211. }
  3212. },
  3213. data: chartData
  3214. }]
  3215. })
  3216. timer && clearInterval(timer);
  3217. },
  3218. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3219. var points = chart.series[0].points;
  3220. var len = points.length;
  3221. timer && clearInterval(timer);
  3222. timer = setInterval(function () {
  3223. autoTooltip(points[i]);
  3224. chartData.forEach((item, index) => {
  3225. item.sliced = false
  3226. item.selected = false
  3227. if (index == i) {
  3228. item.sliced = true
  3229. item.selected = true
  3230. }
  3231. })
  3232. chart.update({
  3233. series: [{
  3234. type: 'pie',
  3235. name: '占比',
  3236. point: {
  3237. events: {
  3238. click: function (e) {
  3239. that.showTip3 = true
  3240. that.echartTitle = '项目管理类型'
  3241. setTimeout(() => {
  3242. that.initChartT1(chartData)
  3243. })
  3244. }
  3245. }
  3246. },
  3247. data: chartData
  3248. }]
  3249. })
  3250. i++;
  3251. if (i === len) {
  3252. i = 0;
  3253. chartData.forEach((item, index) => {
  3254. item.sliced = false
  3255. item.selected = false
  3256. })
  3257. chart.update({
  3258. series: [{
  3259. type: 'pie',
  3260. name: '占比',
  3261. point: {
  3262. events: {
  3263. click: function (e) {
  3264. console.log(e)
  3265. }
  3266. }
  3267. },
  3268. data: chartData
  3269. }]
  3270. })
  3271. }
  3272. }, 2000);
  3273. }
  3274. }
  3275. },
  3276. data: chartData
  3277. }]
  3278. });
  3279. function autoTooltip (point) {
  3280. chart.tooltip.refresh(point);
  3281. }
  3282. },
  3283. initChartR3 () {
  3284. let myChart = echarts.init(this.$refs['echartR3'])
  3285. let option = {
  3286. title: {
  3287. text: '股权类',
  3288. textStyle: {
  3289. color: '#69C0FF',
  3290. fontSize: 16,
  3291. fontWeight: 500
  3292. },
  3293. top: '10',
  3294. left: '10'
  3295. },
  3296. textStyle: {
  3297. color: '#fff',
  3298. },
  3299. tooltip: {
  3300. trigger: "axis",
  3301. formatter: function (params) {
  3302. 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] + '亿元';
  3303. return tip
  3304. },
  3305. axisPointer: {
  3306. lineStyle: {
  3307. type: 'dashed',
  3308. width: 2,
  3309. color: 'rgba(255,255,255,0.6)'
  3310. },
  3311. animation: true
  3312. }
  3313. },
  3314. grid: {
  3315. top: '22%',
  3316. right: '5%',
  3317. left: '15%',
  3318. bottom: '15%',
  3319. },
  3320. yAxis: {
  3321. data: ['备案', '特别监管'],
  3322. splitLine: {
  3323. show: true,
  3324. lineStyle: {
  3325. color: '#68b4dd66',
  3326. type: 'dashed',
  3327. },
  3328. },
  3329. axisLine: {
  3330. show: false
  3331. },
  3332. axisLabel: {
  3333. show: true,
  3334. formatter: '{value}',
  3335. textStyle: {
  3336. color: 'rgba(250,250,250,0.6)',
  3337. },
  3338. },
  3339. nameTextStyle: {
  3340. color: '#ebf8ac',
  3341. fontSize: 16,
  3342. },
  3343. },
  3344. xAxis: {
  3345. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  3346. axisLine: {
  3347. show: true, //隐藏X轴轴线
  3348. lineStyle: {
  3349. color: '#005094',
  3350. width: 1,
  3351. },
  3352. },
  3353. axisTick: {
  3354. show: false, //隐藏X轴刻度
  3355. },
  3356. axisLabel: {
  3357. show: true,
  3358. textStyle: {
  3359. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  3360. fontSize: 12,
  3361. },
  3362. },
  3363. },
  3364. series: [
  3365. {
  3366. name: '',
  3367. type: 'scatter',
  3368. symbol: 'circle',
  3369. symbolSize: function (data) {
  3370. return Math.sqrt(data[2]) * 3;
  3371. },
  3372. label: {
  3373. emphasis: {
  3374. show: true,
  3375. formatter: function (param) {
  3376. return param.data[2];
  3377. },
  3378. position: 'top'
  3379. }
  3380. },
  3381. itemStyle: {
  3382. normal: {
  3383. color: '#40A9FF'
  3384. }
  3385. },
  3386. data: [
  3387. ['项目储备', '特别监管', 9, 6.49],
  3388. ['项目立项', '特别监管', 0, 0.00],
  3389. ['可研论证', '特别监管', 2, 0.10],
  3390. ['投资决策', '特别监管', 27, 15.52],
  3391. ]
  3392. },
  3393. {
  3394. name: '',
  3395. type: 'scatter',
  3396. symbol: 'circle',
  3397. symbolSize: function (data) {
  3398. return Math.sqrt(data[2]) * 3;
  3399. },
  3400. label: {
  3401. emphasis: {
  3402. show: true,
  3403. formatter: function (param) {
  3404. return param.data[2];
  3405. },
  3406. position: 'top'
  3407. }
  3408. },
  3409. itemStyle: {
  3410. normal: {
  3411. color: '#45DAD1'
  3412. }
  3413. },
  3414. data: [
  3415. ['项目储备', '备案', 39, 8.08],
  3416. ['项目立项', '备案', 7, 1.83],
  3417. ['可研论证', '备案', 19, 1.01],
  3418. ['投资决策', '备案', 73, 17.65],
  3419. ]
  3420. },
  3421. ]
  3422. }
  3423. myChart.setOption(option)
  3424. tools.loopShowTooltip(myChart, option, {
  3425. nterval: 2000,
  3426. loopSeries: true,
  3427. })
  3428. },
  3429. initChartR6 () {
  3430. let myChart = echarts.init(this.$refs['echartR6'])
  3431. let option = {
  3432. title: {
  3433. text: '固定资产',
  3434. textStyle: {
  3435. color: '#69C0FF',
  3436. fontSize: 16,
  3437. fontWeight: 500
  3438. },
  3439. top: '10',
  3440. left: '10'
  3441. },
  3442. textStyle: {
  3443. color: '#fff',
  3444. },
  3445. tooltip: {
  3446. trigger: "axis",
  3447. formatter: function (params) {
  3448. 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] + '亿元';
  3449. return tip
  3450. },
  3451. axisPointer: {
  3452. lineStyle: {
  3453. type: 'dashed',
  3454. width: 2,
  3455. color: 'rgba(255,255,255,0.6)'
  3456. },
  3457. animation: true
  3458. }
  3459. },
  3460. grid: {
  3461. top: '25%',
  3462. right: '5%',
  3463. left: '15%',
  3464. bottom: '15%',
  3465. },
  3466. yAxis: {
  3467. data: ['备案', '特别监管'],
  3468. splitLine: {
  3469. show: true,
  3470. lineStyle: {
  3471. color: '#68b4dd66',
  3472. type: 'dashed',
  3473. },
  3474. },
  3475. axisLine: {
  3476. show: false
  3477. },
  3478. axisLabel: {
  3479. show: true,
  3480. formatter: '{value}',
  3481. textStyle: {
  3482. color: 'rgba(250,250,250,0.6)',
  3483. },
  3484. },
  3485. nameTextStyle: {
  3486. color: '#ebf8ac',
  3487. fontSize: 16,
  3488. },
  3489. },
  3490. xAxis: {
  3491. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  3492. axisLine: {
  3493. show: true, //隐藏X轴轴线
  3494. lineStyle: {
  3495. color: '#005094',
  3496. width: 1,
  3497. },
  3498. },
  3499. axisTick: {
  3500. show: false, //隐藏X轴刻度
  3501. },
  3502. axisLabel: {
  3503. show: true,
  3504. textStyle: {
  3505. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  3506. fontSize: 12,
  3507. },
  3508. },
  3509. },
  3510. series: [
  3511. {
  3512. name: '特别监管',
  3513. type: 'scatter',
  3514. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  3515. symbolSize: function (data) {
  3516. return Math.sqrt(data[2]) * 3;
  3517. },
  3518. label: {
  3519. emphasis: {
  3520. show: true,
  3521. formatter: function (param) {
  3522. return param.data[2];
  3523. },
  3524. position: 'top'
  3525. }
  3526. },
  3527. itemStyle: {
  3528. normal: {
  3529. color: '#40A9FF'
  3530. }
  3531. },
  3532. data: [
  3533. ['项目储备', '特别监管', 14, 12.05],
  3534. ['项目立项', '特别监管', 2, 1.25],
  3535. ['可研论证', '特别监管', 10, 32.69],
  3536. ['投资决策', '特别监管', 15, 28.53],
  3537. ]
  3538. },
  3539. {
  3540. name: '备案',
  3541. type: 'scatter',
  3542. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  3543. symbolSize: function (data) {
  3544. return Math.sqrt(data[2]) * 3;
  3545. },
  3546. label: {
  3547. emphasis: {
  3548. show: true,
  3549. formatter: function (param) {
  3550. return param.data[2];
  3551. },
  3552. position: 'top'
  3553. }
  3554. },
  3555. itemStyle: {
  3556. normal: {
  3557. color: '#45DAD1'
  3558. }
  3559. },
  3560. data: [
  3561. ['项目储备', '备案', 27, 23.86],
  3562. ['项目立项', '备案', 1, 1.05],
  3563. ['可研论证', '备案', 14, 18.46],
  3564. ['投资决策', '备案', 40, 38.86],
  3565. ]
  3566. },
  3567. ]
  3568. }
  3569. myChart.setOption(option)
  3570. tools.loopShowTooltip(myChart, option, {
  3571. nterval: 2000,
  3572. loopSeries: true,
  3573. })
  3574. },
  3575. initChartT1 (list, info) {
  3576. // let count = 0
  3577. // console.log(list, info)
  3578. // this.echartTitle = info.title.text
  3579. // let data = list
  3580. // data.forEach(item => {
  3581. // count += item.value[0]
  3582. // })
  3583. // let option = JSON.parse(JSON.stringify(info))
  3584. // option.series[0].center = ['50%', '50%']
  3585. // option.series[0].radius = ['60%', '75%']
  3586. // option.legend = {
  3587. // show: false,
  3588. // icon: 'circle',
  3589. // top: 'bottom',
  3590. // orient: 'vertical',
  3591. // right: '2%',
  3592. // textStyle: {
  3593. // color: '#9DB9EB',
  3594. // fontSize: 16
  3595. // },
  3596. // itemWidth: 10,
  3597. // itemHeight: 10
  3598. // },
  3599. // option.title.text = ''
  3600. // option.tooltip = {
  3601. // trigger: 'item',
  3602. // formatter: function (params) {
  3603. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  3604. // }
  3605. // }
  3606. // option.series[0].itemStyle.normal.label = {
  3607. // show: true,
  3608. // formatter: function (params) {
  3609. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '\n' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  3610. // }
  3611. // }
  3612. // option.series[0].labelLine.show = true
  3613. // let myChart = echarts.init(this.$refs['echartT1'])
  3614. // myChart.setOption(option)
  3615. // tools.loopShowTooltip(myChart, option, {
  3616. // nterval: 2000,
  3617. // loopSeries: true,
  3618. // })
  3619. var chartData = list
  3620. //console.log(list)
  3621. setTimeout(() => {
  3622. Highcharts.chart('echartT1', {
  3623. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  3624. chart: {
  3625. type: 'pie',
  3626. backgroundColor: 'rgba(0,0,0,0)',
  3627. options3d: {
  3628. enabled: true,
  3629. alpha: 45,
  3630. //beta: 0
  3631. },
  3632. },
  3633. credits: {
  3634. enabled: false //去掉hightchats水印
  3635. },
  3636. title: null,
  3637. tooltip: {
  3638. crosshairs: true,
  3639. backgroundColor: 'rgba(0,0,0,0.5)',
  3640. // positioner: function(e){
  3641. // console.log(e, this)
  3642. // },
  3643. useHTML: true, //开启html模式
  3644. style: {
  3645. color: '#fff',
  3646. },
  3647. formatter: function (e) {
  3648. //console.log(this)
  3649. let num = chartData[this.colorIndex].num
  3650. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3651. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3652. },
  3653. //pointFormat:
  3654. },
  3655. plotOptions: {
  3656. pie: {
  3657. allowPointSelect: true,
  3658. showInLegend: false, // 图例
  3659. cursor: 'pointer',
  3660. size: 260,
  3661. innerSize: 170, //环形图中间空白,0为饼图
  3662. depth: 38, //立体高度
  3663. slicedOffset: 23, //动画距离
  3664. dataLabels: {
  3665. enabled: true, // 是否展示指示线
  3666. formatter: function (point) {
  3667. let num = chartData[this.colorIndex].num
  3668. console.log(num)
  3669. this.percentage = this.percentage.toFixed(2)
  3670. return `${this.key}:${this.percentage}%<br/>${this.y}亿,${num}个`
  3671. } //''
  3672. }
  3673. },
  3674. },
  3675. series: [{
  3676. type: 'pie',
  3677. name: '占比',
  3678. //center: ['35%','50%'],
  3679. data: chartData
  3680. }]
  3681. });
  3682. }, 50)
  3683. }
  3684. },
  3685. })