investHome2.js 127 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685
  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. ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"],
  55. ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"],
  56. ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.02亿元"],
  57. ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"],
  58. ['潞安化工', '分布式光伏发电项目', "2.01亿元"],
  59. ['太重集团', '设立太重(大同)新能源产业投资公司', "0.30亿元"],
  60. ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"],
  61. ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"],
  62. ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"],
  63. ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"],
  64. ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"],
  65. ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元"],
  66. ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"],
  67. ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元"],
  68. ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"],
  69. ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"],
  70. ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"],
  71. ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"],
  72. ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"]
  73. ],
  74. },
  75. companyList: [
  76. { name: '山西焦煤' },
  77. { name: '晋能控股' },
  78. { name: '华新燃气' },
  79. { name: '山西建投' },
  80. { name: '潞安化工' },
  81. { name: '华远陆港' },
  82. { name: '航产集团' },
  83. { name: '大地控股' },
  84. { name: '国新能源' },
  85. { name: '汾酒集团' },
  86. { name: '云时代' },
  87. { name: '神农科技' },
  88. { name: '华阳新材' },
  89. { name: '华舰体育' },
  90. { name: '交控集团' },
  91. { name: '文旅集团' },
  92. { name: '水控集团' },
  93. { name: '太重集团' },
  94. ],
  95. }
  96. },
  97. created () {
  98. this.time = formatDate()
  99. this.timer = setInterval(() => {
  100. this.time = formatDate()
  101. }, 1000)
  102. },
  103. beforeDestroy () {
  104. if (this.timer) {
  105. clearInterval(this.timer);
  106. }
  107. this.timer2 && clearInterval(this.timer2);
  108. },
  109. mounted () {
  110. // 左侧图表
  111. setTimeout(() => {
  112. this.initChartL1()
  113. this.initChartL2()
  114. this.initChartL3()
  115. this.initChartL4()
  116. this.initChartL5()
  117. this.initChartL6()
  118. this.initChartL7()
  119. this.initChartR1()
  120. this.initChartR2()
  121. this.initChartR3()
  122. this.initChartR6()
  123. this.changeTopColor()
  124. },)
  125. },
  126. methods: {
  127. changeTopColor () {
  128. this.list = document.getElementsByClassName('row-item')
  129. for (var i = 0; i < this.list.length; i++) {
  130. if (i == 1) {
  131. this.list[i].classList.add('light')
  132. } else {
  133. this.list[i].classList.remove('light')
  134. }
  135. }
  136. this.initChartL3()
  137. },
  138. scrollChange (index) {
  139. if (index == 18) {
  140. this.count = -1
  141. } else {
  142. this.count = index
  143. }
  144. if (this.count > 12 && this.count != 18) {
  145. this.countType = 1
  146. } else {
  147. this.countType = 0
  148. }
  149. this.list = document.getElementsByClassName('row-item')
  150. for (var i = 0; i < this.list.length; i++) {
  151. if (i == 2) {
  152. this.list[i].classList.add('light')
  153. } else {
  154. this.list[i].classList.remove('light')
  155. }
  156. }
  157. this.initChartL3()
  158. },
  159. convertData (data) {
  160. var res = []
  161. for (var i = 0; i < data.length; i++) {
  162. var geoCoord = this.geoCoordMap[data[i].name]
  163. if (geoCoord) {
  164. res.push({
  165. name: data[i].name,
  166. value: geoCoord.concat(data[i].value),
  167. })
  168. }
  169. }
  170. return res
  171. },
  172. initChinaChart () {
  173. var data = [
  174. { name: '吕梁市', value: 150 },
  175. { name: '大同市', value: 190 },
  176. { name: '忻州市', value: 140 },
  177. { name: '朔州市', value: 160 },
  178. { name: '晋中市', value: 100 },
  179. { name: '太原市', value: 300 },
  180. { name: '临汾市', value: 190 },
  181. { name: '长治市', value: 100 },
  182. { name: '晋城市', value: 280 },
  183. { name: '运城市', value: 180 },
  184. { name: '阳泉市', value: 110 },
  185. ]
  186. var moveLine = {
  187. normal: [
  188. {
  189. fromName: '太原市',
  190. toName: '吕梁市',
  191. coords: [
  192. [112.3352, 37.9413],
  193. [111.3574, 37.7325],
  194. ],
  195. },
  196. {
  197. fromName: '太原市',
  198. toName: '忻州市',
  199. coords: [
  200. [112.3352, 37.9413],
  201. [112.4561, 38.8971],
  202. ],
  203. },
  204. {
  205. fromName: '太原市',
  206. toName: '临汾市',
  207. coords: [
  208. [112.3352, 37.9413],
  209. [111.4783, 36.1615],
  210. ],
  211. },
  212. {
  213. fromName: '太原市',
  214. toName: '阳泉市',
  215. coords: [
  216. [112.3352, 37.9413],
  217. [113.4778, 38.0951],
  218. ],
  219. },
  220. {
  221. fromName: '太原市',
  222. toName: '晋中市',
  223. coords: [
  224. [112.3352, 37.9413],
  225. [112.7747, 37.37],
  226. ],
  227. },
  228. {
  229. fromName: '太原市',
  230. toName: '运城市',
  231. coords: [
  232. [112.3352, 37.9413],
  233. [111.1487, 35.2002],
  234. ],
  235. },
  236. {
  237. fromName: '太原市',
  238. toName: '大同市',
  239. coords: [
  240. [112.3352, 37.9413],
  241. [113.7854, 39.8035],
  242. ],
  243. },
  244. {
  245. fromName: '太原市',
  246. toName: '晋城市',
  247. coords: [
  248. [112.3352, 37.9413],
  249. [112.7856, 35.6342],
  250. ],
  251. },
  252. {
  253. fromName: '太原市',
  254. toName: '长治市',
  255. coords: [
  256. [112.3352, 37.9413],
  257. [112.8625, 36.4746],
  258. ],
  259. },
  260. {
  261. fromName: '太原市',
  262. toName: '朔州市',
  263. coords: [
  264. [112.3352, 37.9413],
  265. [113.0713, 39.6991],
  266. ],
  267. },
  268. ],
  269. }
  270. /*获取地图数据*/
  271. let myChart = echarts.init(this.$refs['echarts-map'])
  272. echarts.registerMap('shanxi', {
  273. type: 'FeatureCollection',
  274. features: [
  275. {
  276. type: 'Feature',
  277. id: '1409',
  278. properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
  279. geometry: {
  280. type: 'Polygon',
  281. coordinates: [
  282. '@@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',
  283. ],
  284. encodeOffsets: [[113614, 39657]],
  285. },
  286. },
  287. {
  288. type: 'Feature',
  289. id: '1411',
  290. properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
  291. geometry: {
  292. type: 'Polygon',
  293. coordinates: [
  294. '@@@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',
  295. ],
  296. encodeOffsets: [[113614, 39657]],
  297. },
  298. },
  299. {
  300. type: 'Feature',
  301. id: '1410',
  302. properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
  303. geometry: {
  304. type: 'Polygon',
  305. coordinates: [
  306. '@@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',
  307. ],
  308. encodeOffsets: [[113063, 37784]],
  309. },
  310. },
  311. {
  312. type: 'Feature',
  313. id: '1407',
  314. properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
  315. geometry: {
  316. type: 'Polygon',
  317. coordinates: [
  318. '@@@š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@',
  319. ],
  320. encodeOffsets: [[114087, 37682]],
  321. },
  322. },
  323. {
  324. type: 'Feature',
  325. id: '1408',
  326. properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
  327. geometry: {
  328. type: 'Polygon',
  329. coordinates: [
  330. '@@„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@„',
  331. ],
  332. encodeOffsets: [[113232, 36597]],
  333. },
  334. },
  335. {
  336. type: 'Feature',
  337. id: '1402',
  338. properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
  339. geometry: {
  340. type: 'Polygon',
  341. coordinates: [
  342. '@@²£š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',
  343. ],
  344. encodeOffsets: [[115335, 41209]],
  345. },
  346. },
  347. {
  348. type: 'Feature',
  349. id: '1404',
  350. properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
  351. geometry: {
  352. type: 'Polygon',
  353. coordinates: [
  354. '@@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',
  355. ],
  356. encodeOffsets: [[116269, 37637]],
  357. },
  358. },
  359. {
  360. type: 'Feature',
  361. id: '1406',
  362. properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
  363. geometry: {
  364. type: 'Polygon',
  365. coordinates: [
  366. '@@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‚',
  367. ],
  368. encodeOffsets: [[114615, 40562]],
  369. },
  370. },
  371. {
  372. type: 'Feature',
  373. id: '1405',
  374. properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
  375. geometry: {
  376. type: 'Polygon',
  377. coordinates: [
  378. '@@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°',
  379. ],
  380. encodeOffsets: [[115223, 36895]],
  381. },
  382. },
  383. {
  384. type: 'Feature',
  385. id: '1401',
  386. properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
  387. geometry: {
  388. type: 'Polygon',
  389. coordinates: [
  390. '@@„@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š@°',
  391. ],
  392. encodeOffsets: [[114503, 39134]],
  393. },
  394. },
  395. {
  396. type: 'Feature',
  397. id: '1403',
  398. properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
  399. geometry: {
  400. type: 'Polygon',
  401. coordinates: [
  402. '@@°@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',
  403. ],
  404. encodeOffsets: [[115864, 39336]],
  405. },
  406. },
  407. ],
  408. UTF8Encoding: true,
  409. })
  410. var mapFeatures = echarts.getMap(this.mapName).geoJson.features
  411. mapFeatures.forEach(v => {
  412. // 地区名称
  413. var name = v.properties.name
  414. // 地区经纬度
  415. this.geoCoordMap[name] = v.properties.cp
  416. })
  417. myChart.setOption({
  418. tooltip: {
  419. padding: 15,
  420. enterable: true,
  421. transitionDuration: 1,
  422. formatter: (params, ticket, callback) => {
  423. let tipHtml = `
  424. <div class="tooltip-cont">
  425. <p>新开工:<span>工程建设项目</span></p>
  426. <p>总投资额:<span>${params.data.value}亿</span></p>
  427. <p>当前阶段:<span>可论证阶段</span></p>
  428. <p>时间节点:<span>2021.10-2022.10</span></p>
  429. </div>`
  430. return tipHtml
  431. },
  432. },
  433. visualMap: {
  434. min: 0,
  435. max: 300,
  436. right: 0,
  437. bottom: 0,
  438. text: ['高', '低'],
  439. textStyle: {
  440. color: '#f1f1f1'
  441. },
  442. realtime: false,
  443. calculable: true,
  444. inRange: {
  445. color: ['lightskyblue', '#2754b7']
  446. }
  447. },
  448. geo: {
  449. show: true,
  450. map: 'shanxi',
  451. layoutCenter: ['50%', '50%'], //地图位置
  452. layoutSize: '100%',
  453. label: {
  454. normal: {
  455. show: false,
  456. },
  457. emphasis: {
  458. show: false,
  459. },
  460. },
  461. roam: false,
  462. itemStyle: {
  463. normal: {
  464. areaColor: '#1946a8',
  465. shadowColor: '#1946a8',
  466. borderWidth: 1, //设置外层边框
  467. borderColor: '#1946a8',
  468. shadowOffsetX: 10,
  469. shadowOffsetY: 5,
  470. shadowBlur: 2,
  471. },
  472. emphasis: {
  473. areaColor: '#1946a8',
  474. borderColor: '#d4bc1d',
  475. borderWidth: 2, //设置外层边框
  476. },
  477. },
  478. },
  479. series: [
  480. {
  481. name: '散点',
  482. type: 'scatter',
  483. coordinateSystem: 'geo',
  484. data: this.convertData(data),
  485. symbolSize: function (val) {
  486. return 10
  487. },
  488. label: {
  489. normal: {
  490. formatter: '{b}',
  491. position: [10, 10],
  492. fontSize: 15,
  493. fontWeight: 600,
  494. fontStyle: 'italic',
  495. color: '#fff',
  496. show: true,
  497. },
  498. emphasis: {
  499. show: true,
  500. },
  501. },
  502. itemStyle: {
  503. normal: {
  504. color: '#000',
  505. borderWidth: 2,
  506. borderColor: '#fff',
  507. },
  508. },
  509. },
  510. {
  511. type: 'map',
  512. map: this.mapName,
  513. geoIndex: 0,
  514. aspectScale: 0.75, //长宽比
  515. showLegendSymbol: true, // 存在legend时显示
  516. label: {
  517. normal: {
  518. show: true,
  519. },
  520. emphasis: {
  521. show: false,
  522. textStyle: {
  523. color: '#fff',
  524. },
  525. },
  526. },
  527. roam: true,
  528. itemStyle: {
  529. normal: {
  530. areaColor: '#031525',
  531. borderColor: '#3B5077',
  532. },
  533. emphasis: {
  534. areaColor: '#2B91B7',
  535. },
  536. },
  537. animation: false,
  538. data: data,
  539. },
  540. {
  541. name: '点',
  542. type: 'scatter',
  543. coordinateSystem: 'geo',
  544. zlevel: 6,
  545. },
  546. {
  547. name: 'Top 5',
  548. type: 'effectScatter',
  549. coordinateSystem: 'geo',
  550. data: this.convertData(
  551. data
  552. .sort(function (a, b) {
  553. return b.value - a.value
  554. })
  555. .slice(0, 5)
  556. ),
  557. symbolSize: function (val) {
  558. return 15
  559. },
  560. showEffectOn: 'render',
  561. rippleEffect: {
  562. brushType: 'stroke',
  563. },
  564. hoverAnimation: true,
  565. label: {
  566. normal: {
  567. formatter: '{b}',
  568. position: 'left',
  569. show: false,
  570. },
  571. },
  572. itemStyle: {
  573. normal: {
  574. color: 'yellow',
  575. shadowBlur: 10,
  576. shadowColor: 'yellow',
  577. },
  578. },
  579. zlevel: 1000,
  580. },
  581. {
  582. name: '线路',
  583. type: 'lines',
  584. zlevel: 2,
  585. effect: {
  586. show: true,
  587. period: 4, //箭头指向速度,值越小速度越快
  588. trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
  589. symbol: 'arrow', //箭头图标
  590. symbolSize: 5, //图标大小
  591. },
  592. lineStyle: {
  593. normal: {
  594. color: '#00FFFF',
  595. width: 1,
  596. type: 'dashed',
  597. opacity: 0.5, //尾迹线条透明度
  598. curveness: -0.3, //尾迹线条曲直度
  599. },
  600. },
  601. data: moveLine.normal,
  602. },
  603. ],
  604. })
  605. },
  606. initChartL1 () {
  607. let myChart = echarts.init(document.getElementById("echartL1"));
  608. let option = {
  609. grid: {
  610. top: 35,
  611. right: 40,
  612. left: 60,
  613. bottom: 40,
  614. },
  615. tooltip: {
  616. show: true,
  617. trigger: "axis",
  618. axisPointer: {
  619. // 坐标轴指示器,坐标轴触发有效
  620. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  621. },
  622. },
  623. xAxis: {
  624. data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
  625. axisTick: {
  626. show: false,
  627. },
  628. // x轴的字体颜色
  629. axisLabel: {
  630. rotate: 40,
  631. textStyle: {
  632. color: "white",
  633. },
  634. },
  635. //y轴线的颜色以及宽度
  636. axisLine: {
  637. show: true,
  638. lineStyle: {
  639. color: "#1E5389",
  640. width: 1,
  641. type: "solid",
  642. },
  643. },
  644. },
  645. yAxis: {
  646. name: '亿元',
  647. nameTextStyle: {//y轴上方单位的颜色
  648. color: '#fff',
  649. },
  650. axisTick: {
  651. lineStyle: {
  652. color: "#18416F",
  653. },
  654. },
  655. // y轴的字体颜色
  656. axisLabel: {
  657. textStyle: {
  658. color: "white",
  659. },
  660. },
  661. splitLine: {
  662. show: true,
  663. lineStyle: {
  664. color: "#204561",
  665. width: 1,
  666. type: "dotted",
  667. },
  668. },
  669. //y轴线的颜色以及宽度
  670. axisLine: {
  671. show: true,
  672. lineStyle: {
  673. color: "#1E5389",
  674. width: 1,
  675. type: "solid",
  676. },
  677. },
  678. },
  679. series: [
  680. // {
  681. // name: "2022年额度",
  682. // type: "bar",
  683. // 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],
  684. // showBackground: false,
  685. // backgroundStyle: {
  686. // color: "#18416F",
  687. // },
  688. // barWidth: "10%",
  689. // itemStyle: {
  690. // barBorderRadius: [10, 10, 0, 0],
  691. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  692. // {
  693. // offset: 0,
  694. // color: '#082550',
  695. // },
  696. // {
  697. // offset: 1,
  698. // color: '#69c0ff',
  699. // },
  700. // ]),
  701. // },
  702. // },
  703. {
  704. name: "2023年额度",
  705. type: "bar",
  706. 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],
  707. showBackground: false,
  708. backgroundStyle: {
  709. color: "#18416F",
  710. },
  711. barWidth: "10%",
  712. itemStyle: {
  713. barBorderRadius: [10, 10, 0, 0],
  714. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  715. {
  716. offset: 0,
  717. color: '#082550',
  718. },
  719. {
  720. offset: 1,
  721. color: '#957DFF',
  722. },
  723. ]),
  724. },
  725. },
  726. ],
  727. legend: {
  728. // data: ["2022年额度", "2023年额度"],
  729. data: ["2023年额度"],
  730. textStyle: {
  731. // 图列内容样式
  732. color: "#fff", // 字体颜色
  733. // fontSize: "10",
  734. },
  735. right: 'center',
  736. icon: "roundRect",
  737. // 小图标的宽高
  738. itemHeight: 5,
  739. },
  740. };
  741. tools.loopShowTooltip(myChart, option, {
  742. nterval: 2000,
  743. loopSeries: true,
  744. })
  745. let that = this
  746. myChart.on('click', function (param) {
  747. console.log(param)
  748. if (param.name == '晋能控股') {
  749. that.showTip2 = true
  750. setTimeout(() => {
  751. // that.initChartR4()
  752. // that.initChartR5()
  753. that.initChartL2b()
  754. })
  755. }
  756. })
  757. myChart.setOption(option);
  758. },
  759. initChartL2b () {
  760. let myChart = echarts.init(this.$refs['echartL2b'])
  761. var value = 0.1149;
  762. var data = [value];
  763. let option = {
  764. backgroundColor: 'transparent',
  765. title: [
  766. {
  767. // text: '总额度285.48亿',
  768. // formatter: `<span>总额度</span>285.48亿`,
  769. x: '37%',
  770. y: '80%',
  771. textStyle: {
  772. fontSize: 24,
  773. fontWeight: 'bold',
  774. color: '#2CB7E0',
  775. lineHeight: 16,
  776. textAlign: 'center',
  777. },
  778. }
  779. ],
  780. series: [
  781. {
  782. type: 'liquidFill',
  783. radius: '70%',
  784. center: ['50%', '40%'],
  785. color: [
  786. {
  787. type: 'linear',
  788. x: 0,
  789. y: 0,
  790. x2: 0,
  791. y2: 1,
  792. colorStops: [
  793. {
  794. offset: 0,
  795. color: '#446bf5',
  796. },
  797. {
  798. offset: 1,
  799. color: '#2ca3e2',
  800. },
  801. ],
  802. globalCoord: false,
  803. },
  804. ],
  805. data: [value, value], // data个数代表波浪数
  806. backgroundStyle: {
  807. borderWidth: 1,
  808. color: 'RGBA(51, 66, 127, 0.7)',
  809. },
  810. label: {
  811. normal: {
  812. formatter: function (data) {
  813. return (data.value * 100).toFixed(2) +'%'
  814. },
  815. textStyle: {
  816. fontSize: 30,
  817. color: '#fff',
  818. },
  819. },
  820. },
  821. outline: {
  822. // show: false
  823. borderDistance: 0,
  824. itemStyle: {
  825. borderWidth: 2,
  826. borderColor: 'transparent',
  827. },
  828. },
  829. },
  830. ],
  831. }
  832. myChart.setOption(option)
  833. },
  834. initChartL2 () {
  835. let myChart = echarts.init(this.$refs['echartL2'])
  836. var value = 0.1463;
  837. var data = [value];
  838. let option = {
  839. backgroundColor: 'transparent',
  840. title: [
  841. {
  842. // text: '总额度285.48亿',
  843. // formatter: `<span>总额度</span>285.48亿`,
  844. x: '37%',
  845. y: '80%',
  846. textStyle: {
  847. fontSize: 24,
  848. fontWeight: 'bold',
  849. color: '#2CB7E0',
  850. lineHeight: 16,
  851. textAlign: 'center',
  852. },
  853. }
  854. ],
  855. series: [
  856. {
  857. type: 'liquidFill',
  858. radius: '70%',
  859. center: ['50%', '40%'],
  860. color: [
  861. {
  862. type: 'linear',
  863. x: 0,
  864. y: 0,
  865. x2: 0,
  866. y2: 1,
  867. colorStops: [
  868. {
  869. offset: 0,
  870. color: '#446bf5',
  871. },
  872. {
  873. offset: 1,
  874. color: '#2ca3e2',
  875. },
  876. ],
  877. globalCoord: false,
  878. },
  879. ],
  880. data: [value, value], // data个数代表波浪数
  881. backgroundStyle: {
  882. borderWidth: 1,
  883. color: 'RGBA(51, 66, 127, 0.7)',
  884. },
  885. label: {
  886. normal: {
  887. formatter: function (data) {
  888. return (data.value * 100).toFixed(2) +'%'
  889. },
  890. textStyle: {
  891. fontSize: 30,
  892. color: '#fff',
  893. },
  894. },
  895. },
  896. outline: {
  897. // show: false
  898. borderDistance: 0,
  899. itemStyle: {
  900. borderWidth: 2,
  901. borderColor: 'transparent',
  902. },
  903. },
  904. },
  905. ],
  906. }
  907. myChart.setOption(option)
  908. },
  909. initChartL3 () {
  910. let myChart = echarts.init(this.$refs['echartL3'])
  911. option = {
  912. tooltip: {
  913. trigger: 'axis',
  914. formatter: '指标:' + '{c0}' + '<br/>' + '发展线:' + '{c1}' + '<br/>' + '生存线:' + '{c2}', //+ '<br/>'+ '{a1}:{c1}' + '%',
  915. axisPointer: {
  916. type: 'shadow',
  917. },
  918. },
  919. grid: {
  920. top: '10%',
  921. right: '5%',
  922. left: '10%',
  923. bottom: '15%',
  924. },
  925. xAxis: {
  926. // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
  927. data: dataType[this.countType],
  928. axisLine: {
  929. show: true, //隐藏X轴轴线
  930. lineStyle: {
  931. color: '#005094',
  932. width: 1,
  933. },
  934. },
  935. axisTick: {
  936. show: true, //隐藏X轴刻度
  937. },
  938. axisLabel: {
  939. show: true,
  940. rotate: 15,
  941. textStyle: {
  942. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  943. fontSize: 12,
  944. },
  945. },
  946. },
  947. yAxis: [
  948. {
  949. type: 'value',
  950. splitLine: {
  951. show: true,
  952. lineStyle: {
  953. color: '#68b4dd66',
  954. type: 'dashed',
  955. },
  956. },
  957. axisLine: {
  958. show: false
  959. },
  960. axisLabel: {
  961. show: true,
  962. formatter: '{value}',
  963. textStyle: {
  964. color: 'rgba(250,250,250,0.6)',
  965. },
  966. },
  967. nameTextStyle: {
  968. color: '#ebf8ac',
  969. fontSize: 16,
  970. },
  971. },
  972. ],
  973. series: [
  974. {
  975. name: '实际值',
  976. type: 'bar',
  977. barWidth: 15,
  978. itemStyle: {
  979. normal: {
  980. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  981. {
  982. offset: 0,
  983. color: '#69c0ff',
  984. },
  985. {
  986. offset: 1,
  987. color: '#082550',
  988. },
  989. ]),
  990. },
  991. },
  992. // data: [70, 52, 33, 41, 52],
  993. data: dataList[this.count + 1][2]
  994. // markLine: {
  995. // symbol: ['none', 'none'],
  996. // data: [
  997. // {
  998. // name: '生存线',
  999. // yAxis: 10,
  1000. // lineStyle: {
  1001. // color: '#FF8F0A',
  1002. // },
  1003. // label: {
  1004. // formatter: '{b}',
  1005. // position: 'middle',
  1006. // color: '#FF8F0A',
  1007. // fontSize: 12,
  1008. // },
  1009. // },
  1010. // {
  1011. // name: '发展线',
  1012. // yAxis: 15,
  1013. // lineStyle: {
  1014. // color: '#00EEA2',
  1015. // },
  1016. // label: {
  1017. // formatter: '{b}',
  1018. // position: 'middle',
  1019. // color: '#00EEA2',
  1020. // fontSize: 12,
  1021. // },
  1022. // },
  1023. // ],
  1024. // label: {
  1025. // distance: [50, 0],
  1026. // },
  1027. // },
  1028. },
  1029. {
  1030. name: '',
  1031. type: 'line',
  1032. barWidth: 15,
  1033. itemStyle: {
  1034. normal: {
  1035. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1036. {
  1037. offset: 0,
  1038. color: '#69c0ff',
  1039. },
  1040. {
  1041. offset: 1,
  1042. color: 'green',
  1043. },
  1044. ]),
  1045. },
  1046. },
  1047. // data: [20, 30, 15, 28, 36],
  1048. data: dataList[this.count + 1][1]
  1049. },
  1050. {
  1051. name: '',
  1052. type: 'line',
  1053. barWidth: 15,
  1054. itemStyle: {
  1055. normal: {
  1056. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1057. {
  1058. offset: 0,
  1059. color: '#69c0ff',
  1060. },
  1061. {
  1062. offset: 1,
  1063. color: 'yellow',
  1064. },
  1065. ]),
  1066. },
  1067. },
  1068. // data: [15, 22, 17, 33, 14],
  1069. data: dataList[this.count + 1][0]
  1070. },
  1071. ],
  1072. }
  1073. myChart.setOption(option)
  1074. // tools.loopShowTooltip(myChart, option, {
  1075. // nterval: 2000,
  1076. // loopSeries: true,
  1077. // })
  1078. },
  1079. initChartL4 () {
  1080. // let data = [
  1081. // { value: [173.43, 129], name: '煤炭' },
  1082. // { value: [23.10, 2], name: '火电' },
  1083. // { value: [22.87, 8], name: '冶金' },
  1084. // { value: [9.71, 5], name: '焦化' },
  1085. // { value: [8.35, 6], name: '其他传统产业' }
  1086. // ]
  1087. // let count = 0
  1088. // data.forEach(item => {
  1089. // count += item.value[0]
  1090. // })
  1091. // let myChart = echarts.init(this.$refs['echartL4'])
  1092. // let option = {
  1093. // title: {
  1094. // text: '传统产业分析',
  1095. // x: 'center',
  1096. // y: '0%',
  1097. // textStyle: {
  1098. // color: 'rgba(255,255,255,0.6)',
  1099. // fontSize: 12,
  1100. // },
  1101. // },
  1102. // tooltip: {
  1103. // trigger: 'item',
  1104. // formatter: function (params) {
  1105. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  1106. // }
  1107. // },
  1108. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1109. // legend: {
  1110. // orient: 'horizontal',
  1111. // show: false,
  1112. // icon: 'circle',
  1113. // top: 'bottom',
  1114. // orient: 'vertical',
  1115. // right: '-3%',
  1116. // textStyle: {
  1117. // color: '#9DB9EB',
  1118. // fontSize: '10px'
  1119. // },
  1120. // itemWidth: 10,
  1121. // itemHeight: 10
  1122. // },
  1123. // series: [
  1124. // {
  1125. // name: '',
  1126. // type: 'pie',
  1127. // // radius: ['0%', '70%'],
  1128. // radius: ['50%', '65%'],
  1129. // center: ['50%', '55%'],
  1130. // itemStyle: {
  1131. // normal: {
  1132. // borderColor: 'rgba(1,31,64,0.7)',
  1133. // borderWidth: 6,
  1134. // label: {
  1135. // show: false
  1136. // },
  1137. // },
  1138. // },
  1139. // labelLine: {
  1140. // show: false,
  1141. // },
  1142. // data,
  1143. // },
  1144. // ],
  1145. // }
  1146. // myChart.setOption(option)
  1147. // tools.loopShowTooltip(myChart, option, {
  1148. // nterval: 2000,
  1149. // loopSeries: true,
  1150. // })
  1151. // let that = this
  1152. // myChart.on('click', function (param) {
  1153. // console.log(param)
  1154. // that.showTip3 = true
  1155. // setTimeout(() => {
  1156. // that.initChartT1(data, option)
  1157. // })
  1158. // })
  1159. // { value: [173.43, 129], name: '煤炭' },
  1160. // { value: [23.10, 2], name: '火电' },
  1161. // { value: [22.87, 8], name: '冶金' },
  1162. // { value: [9.71, 5], name: '焦化' },
  1163. // { value: [8.35, 6], name: '其他传统产业' }
  1164. var chartData = [
  1165. {
  1166. name: '煤炭',
  1167. y: 294.61,
  1168. num: 95,
  1169. sliced: false,
  1170. selected: false,
  1171. },
  1172. {
  1173. name: '火电',
  1174. y: 39.24,
  1175. num: 1,
  1176. sliced: false,
  1177. selected: false,
  1178. },
  1179. {
  1180. name: '冶金',
  1181. y: 38.85,
  1182. num: 6,
  1183. sliced: false,
  1184. selected: false,
  1185. },
  1186. {
  1187. name: '焦化',
  1188. y: 16.49,
  1189. num: 4,
  1190. sliced: false,
  1191. selected: false,
  1192. },
  1193. {
  1194. name: '其他传统产业',
  1195. y: 14.19,
  1196. num: 5,
  1197. sliced: false,
  1198. selected: false,
  1199. }
  1200. ]
  1201. var timer = null;
  1202. var i = 0;
  1203. let that = this
  1204. var option = {
  1205. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1206. chart: {
  1207. type: 'pie',
  1208. backgroundColor: 'rgba(0,0,0,0)',
  1209. options3d: {
  1210. enabled: true,
  1211. alpha: 45,
  1212. //beta: 0
  1213. },
  1214. events: {
  1215. // load,图表加载完成时触发
  1216. load: function () {
  1217. var chart = this;
  1218. var points = chart.series[0].points;
  1219. var len = points.length;
  1220. timer && clearInterval(timer);
  1221. timer = setInterval(function () {
  1222. autoTooltip(points[i]);
  1223. chartData.forEach((item,index) => {
  1224. item.sliced = false
  1225. item.selected = false
  1226. if(index == i){
  1227. item.sliced = true
  1228. item.selected = true
  1229. }
  1230. })
  1231. chart.update({
  1232. series:[{
  1233. type: 'pie',
  1234. name: '占比',
  1235. point: {
  1236. events:{
  1237. click:function(e){
  1238. that.showTip3 = true
  1239. that.echartTitle = '传统产业分析'
  1240. setTimeout(() => {
  1241. that.initChartT1(chartData)
  1242. })
  1243. }
  1244. }
  1245. },
  1246. data: chartData
  1247. }]
  1248. })
  1249. i++;
  1250. if (i === len) {
  1251. i = 0;
  1252. }
  1253. }, 2000);
  1254. },
  1255. legendItemClick : function(event) {
  1256. console.log(event);
  1257. return true;
  1258. }
  1259. }
  1260. },
  1261. credits: {
  1262. enabled: false //去掉hightchats水印
  1263. },
  1264. title: {
  1265. text: '传统产业分析',
  1266. style:{
  1267. color: 'rgba(255,255,255,0.6)',
  1268. fontSize:12,
  1269. }
  1270. },
  1271. tooltip: {
  1272. crosshairs: true,
  1273. backgroundColor: 'rgba(0,0,0,0.5)',
  1274. // positioner: function(e){
  1275. // console.log(e, this)
  1276. // },
  1277. useHTML: true, //开启html模式
  1278. style: {
  1279. color:'#fff',
  1280. },
  1281. formatter: function(e){
  1282. //console.log(this)
  1283. let num = chartData[this.colorIndex].num
  1284. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1285. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1286. },
  1287. //pointFormat:
  1288. },
  1289. plotOptions: {
  1290. pie: {
  1291. allowPointSelect: true,
  1292. showInLegend: false, // 图例
  1293. cursor: 'pointer',
  1294. size: 160,
  1295. innerSize : 100, //环形图中间空白,0为饼图
  1296. depth: 25, //立体高度
  1297. slicedOffset: 21, //动画距离
  1298. dataLabels: {
  1299. enabled: false, // 是否展示指示线
  1300. format: '{point.name}: {point.percentage}'
  1301. }
  1302. },
  1303. },
  1304. series: [{
  1305. type: 'pie',
  1306. name: '占比',
  1307. //center: ['35%','50%'],
  1308. point: {
  1309. events:{
  1310. click:function(e){ //点击事件
  1311. that.showTip3 = true
  1312. that.echartTitle = '传统产业分析'
  1313. setTimeout(() => {
  1314. that.initChartT1(chartData)
  1315. })
  1316. },
  1317. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1318. //console.log(e)
  1319. chartData.forEach((item,index) => {
  1320. item.sliced = false
  1321. item.selected = false
  1322. })
  1323. chartData[e.target.index].sliced = true
  1324. chartData[e.target.index].selected = true
  1325. chart.update({
  1326. series:[{
  1327. type: 'pie',
  1328. name: '占比',
  1329. point: {
  1330. events:{
  1331. click:function(e){
  1332. that.showTip3 = true
  1333. that.echartTitle = '传统产业分析'
  1334. setTimeout(() => {
  1335. that.initChartT1(chartData)
  1336. })
  1337. }
  1338. }
  1339. },
  1340. data: chartData
  1341. }]
  1342. })
  1343. timer && clearInterval(timer);
  1344. },
  1345. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  1346. var points = chart.series[0].points;
  1347. var len = points.length;
  1348. timer && clearInterval(timer);
  1349. timer = setInterval(function () {
  1350. autoTooltip(points[i]);
  1351. chartData.forEach((item,index) => {
  1352. item.sliced = false
  1353. item.selected = false
  1354. if(index == i){
  1355. item.sliced = true
  1356. item.selected = true
  1357. }
  1358. })
  1359. chart.update({
  1360. series:[{
  1361. type: 'pie',
  1362. name: '占比',
  1363. point: {
  1364. events:{
  1365. click:function(e){
  1366. that.showTip3 = true
  1367. that.echartTitle = '传统产业分析'
  1368. setTimeout(() => {
  1369. that.initChartT1(chartData)
  1370. })
  1371. }
  1372. }
  1373. },
  1374. data: chartData
  1375. }]
  1376. })
  1377. i++;
  1378. if (i === len) {
  1379. i = 0;
  1380. }
  1381. }, 2000);
  1382. }
  1383. }
  1384. },
  1385. data: chartData
  1386. }]
  1387. }
  1388. var chart = Highcharts.chart('echartL4', option);
  1389. function autoTooltip(point) {
  1390. chart.tooltip.refresh(point);
  1391. }
  1392. },
  1393. initChartL5 () {
  1394. // let data = [
  1395. // { value: [29.26, 102], name: '新一代信息技术' },
  1396. // { value: [59.11, 38], name: '高端装备制造' },
  1397. // { value: [3.96, 5], name: '新材料' },
  1398. // { value: [2.12, 7], name: '生物' },
  1399. // { value: [100.09, 79], name: '新能源' },
  1400. // { value: [15.48, 32], name: '节能环保' },
  1401. // { value: [3.00, 3], name: '相关服务业' },
  1402. // ]
  1403. // let count = 0
  1404. // data.forEach(item => {
  1405. // count += item.value[0]
  1406. // })
  1407. // let myChart = echarts.init(this.$refs['echartL5'])
  1408. // let option = {
  1409. // title: {
  1410. // text: '战略性新兴产业',
  1411. // x: 'center',
  1412. // y: '0%',
  1413. // textStyle: {
  1414. // color: 'rgba(255,255,255,0.6)',
  1415. // fontSize: 12,
  1416. // },
  1417. // },
  1418. // tooltip: {
  1419. // trigger: 'item',
  1420. // formatter: function (params) {
  1421. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  1422. // }
  1423. // },
  1424. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1425. // legend: {
  1426. // show: false,
  1427. // icon: 'circle',
  1428. // top: 'bottom',
  1429. // orient: 'vertical',
  1430. // right: '-3%',
  1431. // textStyle: {
  1432. // color: '#9DB9EB',
  1433. // fontSize: '10px'
  1434. // },
  1435. // itemWidth: 10,
  1436. // itemHeight: 10
  1437. // },
  1438. // series: [
  1439. // {
  1440. // name: '',
  1441. // type: 'pie',
  1442. // // radius: ['0%', '70%'],
  1443. // radius: ['50%', '65%'],
  1444. // center: ['50%', '55%'],
  1445. // itemStyle: {
  1446. // normal: {
  1447. // borderColor: 'rgba(1,31,64,0.7)',
  1448. // borderWidth: 6,
  1449. // label: {
  1450. // show: false,
  1451. // },
  1452. // },
  1453. // },
  1454. // labelLine: {
  1455. // show: false,
  1456. // },
  1457. // data
  1458. // },
  1459. // ],
  1460. // }
  1461. // myChart.setOption(option)
  1462. // tools.loopShowTooltip(myChart, option, {
  1463. // nterval: 2000,
  1464. // loopSeries: true,
  1465. // })
  1466. // let that = this
  1467. // myChart.on('click', function (param) {
  1468. // console.log(param)
  1469. // that.showTip3 = true
  1470. // setTimeout(() => {
  1471. // that.initChartT1(data, option)
  1472. // })
  1473. // })
  1474. // { value: [29.26, 102], name: '新一代信息技术' },
  1475. // { value: [59.11, 38], name: '高端装备制造' },
  1476. // { value: [3.96, 5], name: '新材料' },
  1477. // { value: [2.12, 7], name: '生物' },
  1478. // { value: [100.09, 79], name: '新能源' },
  1479. // { value: [15.48, 32], name: '节能环保' },
  1480. // { value: [3.00, 3], name: '相关服务业' },
  1481. // var chartData = [
  1482. // {
  1483. // name: '新一代信息技术',
  1484. // y: 29.26,
  1485. // x: 75,
  1486. // sliced: false,
  1487. // selected: false,
  1488. // },
  1489. // {
  1490. // name: '高端装备制造',
  1491. // y: 100.41,
  1492. // x: 28,
  1493. // sliced: false,
  1494. // selected: false,
  1495. // },
  1496. // {
  1497. // name: '新材料',
  1498. // y: 6.72,
  1499. // x: 4,
  1500. // sliced: false,
  1501. // selected: false,
  1502. // },
  1503. // {
  1504. // name: '生物',
  1505. // y: 3.60,
  1506. // x: 58,
  1507. // sliced: false,
  1508. // selected: false,
  1509. // },
  1510. // {
  1511. // name: '新能源',
  1512. // y: 170.03,
  1513. // x: 58,
  1514. // sliced: false,
  1515. // selected: false,
  1516. // }
  1517. // ]
  1518. var chartData = [
  1519. {
  1520. name: '新一代信息技术',
  1521. y: 29.26,
  1522. num: 75,
  1523. //x: 75,
  1524. sliced: false,
  1525. selected: false,
  1526. },
  1527. {
  1528. name: '高端装备制造',
  1529. y: 100.41,
  1530. num: 28,
  1531. sliced: false,
  1532. selected: false,
  1533. },
  1534. {
  1535. name: '新材料',
  1536. y: 6.72,
  1537. num: 4,
  1538. sliced: false,
  1539. selected: false,
  1540. },
  1541. {
  1542. name: '生物',
  1543. y: 3.60,
  1544. num: 58,
  1545. sliced: false,
  1546. selected: false,
  1547. },
  1548. {
  1549. name: '新能源',
  1550. y: 170.03,
  1551. num: 58,
  1552. sliced: false,
  1553. selected: false,
  1554. },
  1555. {
  1556. name: '节能环保',
  1557. y: 26.30,
  1558. num: 24,
  1559. sliced: false,
  1560. selected: false,
  1561. },
  1562. {
  1563. name: '相关服务业',
  1564. y: 5.10,
  1565. num: 2,
  1566. sliced: false,
  1567. selected: false,
  1568. }
  1569. ]
  1570. var timer = null;
  1571. var i = 0;
  1572. let that = this
  1573. var option = {
  1574. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39','#5783ab'],
  1575. chart: {
  1576. type: 'pie',
  1577. backgroundColor: 'rgba(0,0,0,0)',
  1578. options3d: {
  1579. enabled: true,
  1580. alpha: 45,
  1581. //beta: 0
  1582. },
  1583. events: {
  1584. // load,图表加载完成时触发
  1585. load: function () {
  1586. var chart = this;
  1587. var points = chart.series[0].points;
  1588. var len = points.length;
  1589. timer && clearInterval(timer);
  1590. timer = setInterval(function () {
  1591. autoTooltip(points[i]);
  1592. chartData.forEach((item,index) => {
  1593. item.sliced = false
  1594. item.selected = false
  1595. if(index == i){
  1596. item.sliced = true
  1597. item.selected = true
  1598. }
  1599. })
  1600. chart.update({
  1601. series:[{
  1602. type: 'pie',
  1603. name: '占比',
  1604. point: {
  1605. events:{
  1606. click:function(e){
  1607. that.showTip3 = true
  1608. that.echartTitle = '战略性新兴产业'
  1609. setTimeout(() => {
  1610. that.initChartT1(chartData)
  1611. })
  1612. }
  1613. }
  1614. },
  1615. data: chartData
  1616. }]
  1617. })
  1618. i++;
  1619. if (i === len) {
  1620. i = 0;
  1621. }
  1622. }, 2000);
  1623. },
  1624. legendItemClick : function(event) {
  1625. console.log(event);
  1626. return true;
  1627. }
  1628. }
  1629. },
  1630. credits: {
  1631. enabled: false //去掉hightchats水印
  1632. },
  1633. title: {
  1634. text: '战略性新兴产业',
  1635. style:{
  1636. color: 'rgba(255,255,255,0.6)',
  1637. fontSize:12,
  1638. }
  1639. },
  1640. tooltip: {
  1641. crosshairs: true,
  1642. backgroundColor: 'rgba(0,0,0,0.5)',
  1643. // positioner: function(e){
  1644. // console.log(e, this)
  1645. // },
  1646. useHTML: true, //开启html模式
  1647. style: {
  1648. color:'#fff',
  1649. },
  1650. formatter: function(e){
  1651. //console.log(this)
  1652. let num = chartData[this.colorIndex].num
  1653. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1654. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1655. },
  1656. //pointFormat:
  1657. },
  1658. plotOptions: {
  1659. pie: {
  1660. allowPointSelect: true,
  1661. showInLegend: false, // 图例
  1662. cursor: 'pointer',
  1663. size: 160,
  1664. innerSize : 100, //环形图中间空白,0为饼图
  1665. depth: 25, //立体高度
  1666. slicedOffset: 21, //动画距离
  1667. dataLabels: {
  1668. enabled: false, // 是否展示指示线
  1669. format: '{point.name}: {point.percentage}'
  1670. }
  1671. },
  1672. },
  1673. series: [{
  1674. type: 'pie',
  1675. name: '占比',
  1676. //center: ['35%','50%'],
  1677. point: {
  1678. events:{
  1679. click:function(e){ //点击事件
  1680. that.showTip3 = true
  1681. that.echartTitle = '战略性新兴产业'
  1682. setTimeout(() => {
  1683. that.initChartT1(chartData)
  1684. })
  1685. },
  1686. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1687. //console.log(e)
  1688. chartData.forEach((item,index) => {
  1689. item.sliced = false
  1690. item.selected = false
  1691. })
  1692. chartData[e.target.index].sliced = true
  1693. chartData[e.target.index].selected = true
  1694. chart.update({
  1695. series:[{
  1696. type: 'pie',
  1697. name: '占比',
  1698. point: {
  1699. events:{
  1700. click:function(e){
  1701. that.showTip3 = true
  1702. that.echartTitle = '战略性新兴产业'
  1703. setTimeout(() => {
  1704. that.initChartT1(chartData)
  1705. })
  1706. }
  1707. }
  1708. },
  1709. data: chartData
  1710. }]
  1711. })
  1712. timer && clearInterval(timer);
  1713. },
  1714. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  1715. var points = chart.series[0].points;
  1716. var len = points.length;
  1717. timer && clearInterval(timer);
  1718. timer = setInterval(function () {
  1719. autoTooltip(points[i]);
  1720. chartData.forEach((item,index) => {
  1721. item.sliced = false
  1722. item.selected = false
  1723. if(index == i){
  1724. item.sliced = true
  1725. item.selected = true
  1726. }
  1727. })
  1728. chart.update({
  1729. series:[{
  1730. type: 'pie',
  1731. name: '占比',
  1732. point: {
  1733. events:{
  1734. click:function(e){
  1735. that.showTip3 = true
  1736. that.echartTitle = '战略性新兴产业'
  1737. setTimeout(() => {
  1738. that.initChartT1(chartData)
  1739. })
  1740. }
  1741. }
  1742. },
  1743. data: chartData
  1744. }]
  1745. })
  1746. i++;
  1747. if (i === len) {
  1748. i = 0;
  1749. }
  1750. }, 2000);
  1751. }
  1752. }
  1753. },
  1754. data: chartData
  1755. }]
  1756. }
  1757. var chart = Highcharts.chart('echartL5', option);
  1758. function autoTooltip(point) {
  1759. chart.tooltip.refresh(point);
  1760. }
  1761. },
  1762. initChartL6 () {
  1763. // let data = [
  1764. // { value: [25.82, 43], name: '化工' },
  1765. // { value: [17.36, 21], name: '煤层气' },
  1766. // { value: [0.04, 1], name: '文旅康养' },
  1767. // { value: [1.51, 7], name: '体育' },
  1768. // { value: [9.32, 5], name: '酿造' },
  1769. // { value: [71.12, 129], name: '建筑房地产' },
  1770. // { value: [9.11, 14], name: '农业' },
  1771. // ]
  1772. // let count = 0
  1773. // data.forEach(item => {
  1774. // count += item.value[0]
  1775. // })
  1776. // let myChart = echarts.init(this.$refs['echartL6'])
  1777. // let option = {
  1778. // title: {
  1779. // text: '特色优势产业',
  1780. // x: 'center',
  1781. // y: '0%',
  1782. // textStyle: {
  1783. // color: 'rgba(255,255,255,0.6)',
  1784. // fontSize: 12,
  1785. // },
  1786. // },
  1787. // tooltip: {
  1788. // trigger: 'item',
  1789. // formatter: function (params) {
  1790. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  1791. // }
  1792. // // position: ['30%', '87%'],
  1793. // },
  1794. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1795. // legend: {
  1796. // show: false,
  1797. // icon: 'circle',
  1798. // top: 'bottom',
  1799. // orient: 'vertical',
  1800. // right: '-3%',
  1801. // textStyle: {
  1802. // color: '#9DB9EB',
  1803. // fontSize: '10px'
  1804. // },
  1805. // itemWidth: 10,
  1806. // itemHeight: 10
  1807. // },
  1808. // series: [
  1809. // {
  1810. // name: '',
  1811. // type: 'pie',
  1812. // // radius: ['0%', '70%'],
  1813. // radius: ['50%', '65%'],
  1814. // center: ['50%', '55%'],
  1815. // itemStyle: {
  1816. // normal: {
  1817. // borderColor: 'rgba(1,31,64,0.7)',
  1818. // borderWidth: 6,
  1819. // label: {
  1820. // show: false,
  1821. // },
  1822. // },
  1823. // },
  1824. // labelLine: {
  1825. // show: false,
  1826. // },
  1827. // data,
  1828. // },
  1829. // ],
  1830. // }
  1831. // myChart.setOption(option)
  1832. // tools.loopShowTooltip(myChart, option, {
  1833. // nterval: 2000,
  1834. // loopSeries: true,
  1835. // })
  1836. // let that = this
  1837. // myChart.on('click', function (param) {
  1838. // console.log(param)
  1839. // that.showTip3 = true
  1840. // setTimeout(() => {
  1841. // that.initChartT1(data, option)
  1842. // })
  1843. // })
  1844. // { value: [25.82, 43], name: '化工' },
  1845. // { value: [17.36, 21], name: '煤层气' },
  1846. // { value: [0.04, 1], name: '文旅康养' },
  1847. // { value: [1.51, 7], name: '体育' },
  1848. // { value: [9.32, 5], name: '酿造' },
  1849. // { value: [71.12, 129], name: '建筑房地产' },
  1850. // { value: [9.11, 14], name: '农业' },
  1851. var chartData = [
  1852. {
  1853. name: '化工',
  1854. y: 43.86,
  1855. num: 32,
  1856. sliced: false,
  1857. selected: false,
  1858. },
  1859. {
  1860. name: '煤层气',
  1861. y: 29.49,
  1862. num: 16,
  1863. sliced: false,
  1864. selected: false,
  1865. },
  1866. {
  1867. name: '文旅康养',
  1868. y: 0.07,
  1869. num: 1,
  1870. sliced: false,
  1871. selected: false,
  1872. },
  1873. {
  1874. name: '体育',
  1875. y: 2.57,
  1876. num: 5,
  1877. sliced: false,
  1878. selected: false,
  1879. },
  1880. {
  1881. name: '酿造',
  1882. y: 15.83,
  1883. num: 4,
  1884. sliced: false,
  1885. selected: false,
  1886. },
  1887. {
  1888. name: '建筑房地产',
  1889. y: 120.81,
  1890. num: 96,
  1891. sliced: false,
  1892. selected: false,
  1893. },
  1894. {
  1895. name: '农业',
  1896. y: 15.47,
  1897. num: 10,
  1898. sliced: false,
  1899. selected: false,
  1900. }
  1901. ]
  1902. var timer = null;
  1903. var i = 0;
  1904. let that = this
  1905. var option = {
  1906. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1907. chart: {
  1908. type: 'pie',
  1909. backgroundColor: 'rgba(0,0,0,0)',
  1910. options3d: {
  1911. enabled: true,
  1912. alpha: 45,
  1913. //beta: 0
  1914. },
  1915. events: {
  1916. // load,图表加载完成时触发
  1917. load: function () {
  1918. var chart = this;
  1919. var points = chart.series[0].points;
  1920. var len = points.length;
  1921. timer && clearInterval(timer);
  1922. timer = setInterval(function () {
  1923. autoTooltip(points[i]);
  1924. chartData.forEach((item,index) => {
  1925. item.sliced = false
  1926. item.selected = false
  1927. if(index == i){
  1928. item.sliced = true
  1929. item.selected = true
  1930. }
  1931. })
  1932. chart.update({
  1933. series:[{
  1934. type: 'pie',
  1935. name: '占比',
  1936. point: {
  1937. events:{
  1938. click:function(e){
  1939. that.showTip3 = true
  1940. that.echartTitle = '特色优势产业'
  1941. setTimeout(() => {
  1942. that.initChartT1(chartData)
  1943. })
  1944. }
  1945. }
  1946. },
  1947. data: chartData
  1948. }]
  1949. })
  1950. i++;
  1951. if (i === len) {
  1952. i = 0;
  1953. }
  1954. }, 2000);
  1955. },
  1956. legendItemClick : function(event) {
  1957. console.log(event);
  1958. return true;
  1959. }
  1960. }
  1961. },
  1962. credits: {
  1963. enabled: false //去掉hightchats水印
  1964. },
  1965. title: {
  1966. text: '特色优势产业',
  1967. style:{
  1968. color: 'rgba(255,255,255,0.6)',
  1969. fontSize:12,
  1970. }
  1971. },
  1972. tooltip: {
  1973. crosshairs: true,
  1974. backgroundColor: 'rgba(0,0,0,0.5)',
  1975. // positioner: function(e){
  1976. // console.log(e, this)
  1977. // },
  1978. useHTML: true, //开启html模式
  1979. style: {
  1980. color:'#fff',
  1981. },
  1982. formatter: function(e){
  1983. //console.log(this)
  1984. let num = chartData[this.colorIndex].num
  1985. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1986. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1987. },
  1988. //pointFormat:
  1989. },
  1990. plotOptions: {
  1991. pie: {
  1992. allowPointSelect: true,
  1993. showInLegend: false, // 图例
  1994. cursor: 'pointer',
  1995. size: 160,
  1996. innerSize : 100, //环形图中间空白,0为饼图
  1997. depth: 25, //立体高度
  1998. slicedOffset: 21, //动画距离
  1999. dataLabels: {
  2000. enabled: false, // 是否展示指示线
  2001. format: '{point.name}: {point.percentage}'
  2002. }
  2003. },
  2004. },
  2005. series: [{
  2006. type: 'pie',
  2007. name: '占比',
  2008. //center: ['35%','50%'],
  2009. point: {
  2010. events:{
  2011. click:function(e){ //点击事件
  2012. that.showTip3 = true
  2013. that.echartTitle = '特色优势产业'
  2014. setTimeout(() => {
  2015. that.initChartT1(chartData)
  2016. })
  2017. },
  2018. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2019. //console.log(e)
  2020. chartData.forEach((item,index) => {
  2021. item.sliced = false
  2022. item.selected = false
  2023. })
  2024. chartData[e.target.index].sliced = true
  2025. chartData[e.target.index].selected = true
  2026. chart.update({
  2027. series:[{
  2028. type: 'pie',
  2029. name: '占比',
  2030. point: {
  2031. events:{
  2032. click:function(e){
  2033. that.showTip3 = true
  2034. that.echartTitle = '特色优势产业'
  2035. setTimeout(() => {
  2036. that.initChartT1(chartData)
  2037. })
  2038. }
  2039. }
  2040. },
  2041. data: chartData
  2042. }]
  2043. })
  2044. timer && clearInterval(timer);
  2045. },
  2046. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  2047. var points = chart.series[0].points;
  2048. var len = points.length;
  2049. timer && clearInterval(timer);
  2050. timer = setInterval(function () {
  2051. autoTooltip(points[i]);
  2052. chartData.forEach((item,index) => {
  2053. item.sliced = false
  2054. item.selected = false
  2055. if(index == i){
  2056. item.sliced = true
  2057. item.selected = true
  2058. }
  2059. })
  2060. chart.update({
  2061. series:[{
  2062. type: 'pie',
  2063. name: '占比',
  2064. point: {
  2065. events:{
  2066. click:function(e){
  2067. that.showTip3 = true
  2068. that.echartTitle = '特色优势产业'
  2069. setTimeout(() => {
  2070. that.initChartT1(chartData)
  2071. })
  2072. }
  2073. }
  2074. },
  2075. data: chartData
  2076. }]
  2077. })
  2078. i++;
  2079. if (i === len) {
  2080. i = 0;
  2081. }
  2082. }, 2000);
  2083. }
  2084. }
  2085. },
  2086. data: chartData
  2087. }]
  2088. }
  2089. var chart = Highcharts.chart('echartL6', option);
  2090. function autoTooltip(point) {
  2091. chart.tooltip.refresh(point);
  2092. }
  2093. },
  2094. initChartL7 () {
  2095. // let data = [
  2096. // { value: [155.82, 51], name: '交通运输业' },
  2097. // { value: [8.47, 19], name: '煤气层管网' },
  2098. // { value: [10.64, 24], name: '物流贸易' },
  2099. // { value: [41.05, 46], name: '水务' },
  2100. // { value: [2.14, 7], name: '其他' },
  2101. // ]
  2102. // let count = 0
  2103. // data.forEach(item => {
  2104. // count += item.value[0]
  2105. // })
  2106. // let myChart = echarts.init(this.$refs['echartL7'])
  2107. // let option = {
  2108. // title: {
  2109. // text: '公共基础等产业',
  2110. // x: 'center',
  2111. // y: '0%',
  2112. // textStyle: {
  2113. // color: 'rgba(255,255,255,0.6)',
  2114. // fontSize: 12,
  2115. // },
  2116. // },
  2117. // tooltip: {
  2118. // trigger: 'item',
  2119. // formatter: function (params) {
  2120. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  2121. // }
  2122. // },
  2123. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2124. // legend: {
  2125. // show: false,
  2126. // icon: 'circle',
  2127. // top: 'bottom',
  2128. // orient: 'vertical',
  2129. // right: '-3%',
  2130. // textStyle: {
  2131. // color: '#9DB9EB',
  2132. // fontSize: '10px'
  2133. // },
  2134. // itemWidth: 10,
  2135. // itemHeight: 10
  2136. // },
  2137. // series: [
  2138. // {
  2139. // name: '',
  2140. // type: 'pie',
  2141. // // radius: ['0%', '70%'],
  2142. // radius: ['50%', '65%'],
  2143. // center: ['50%', '55%'],
  2144. // itemStyle: {
  2145. // normal: {
  2146. // borderColor: 'rgba(1,31,64,0.7)',
  2147. // borderWidth: 6,
  2148. // label: {
  2149. // show: false,
  2150. // },
  2151. // },
  2152. // },
  2153. // labelLine: {
  2154. // show: false,
  2155. // },
  2156. // data
  2157. // },
  2158. // ],
  2159. // }
  2160. // myChart.setOption(option)
  2161. // tools.loopShowTooltip(myChart, option, {
  2162. // nterval: 2000,
  2163. // loopSeries: true,
  2164. // })
  2165. // let that = this
  2166. // myChart.on('click', function (param) {
  2167. // console.log(param)
  2168. // that.showTip3 = true
  2169. // setTimeout(() => {
  2170. // that.initChartT1(data, option)
  2171. // })
  2172. // })
  2173. // { value: [155.82, 51], name: '交通运输业' },
  2174. // { value: [8.47, 19], name: '煤气层管网' },
  2175. // { value: [10.64, 24], name: '物流贸易' },
  2176. // { value: [41.05, 46], name: '水务' },
  2177. // { value: [2.14, 7], name: '其他' },
  2178. var chartData = [
  2179. {
  2180. name: '交通运输业',
  2181. y: 264.70,
  2182. num: 38,
  2183. sliced: false,
  2184. selected: false,
  2185. },
  2186. {
  2187. name: '煤气层管网',
  2188. y: 14.39,
  2189. num: 14,
  2190. sliced: false,
  2191. selected: false,
  2192. },
  2193. {
  2194. name: '物流贸易',
  2195. y: 18.07,
  2196. num: 18,
  2197. sliced: false,
  2198. selected: false,
  2199. },
  2200. {
  2201. name: '水务',
  2202. y: 69.73,
  2203. num: 34,
  2204. sliced: false,
  2205. selected: false,
  2206. },
  2207. {
  2208. name: '其他',
  2209. y: 3.64,
  2210. num: 5,
  2211. sliced: false,
  2212. selected: false,
  2213. }
  2214. ]
  2215. var timer = null;
  2216. var i = 0;
  2217. let that = this
  2218. var option = {
  2219. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2220. chart: {
  2221. type: 'pie',
  2222. backgroundColor: 'rgba(0,0,0,0)',
  2223. options3d: {
  2224. enabled: true,
  2225. alpha: 45,
  2226. //beta: 0
  2227. },
  2228. events: {
  2229. // load,图表加载完成时触发
  2230. load: function () {
  2231. var chart = this;
  2232. var points = chart.series[0].points;
  2233. var len = points.length;
  2234. timer && clearInterval(timer);
  2235. timer = setInterval(function () {
  2236. autoTooltip(points[i]);
  2237. chartData.forEach((item,index) => {
  2238. item.sliced = false
  2239. item.selected = false
  2240. if(index == i){
  2241. item.sliced = true
  2242. item.selected = true
  2243. }
  2244. })
  2245. chart.update({
  2246. series:[{
  2247. type: 'pie',
  2248. name: '占比',
  2249. point: {
  2250. events:{
  2251. click:function(e){
  2252. that.showTip3 = true
  2253. that.echartTitle = '公共基础等产业'
  2254. setTimeout(() => {
  2255. that.initChartT1(chartData)
  2256. })
  2257. }
  2258. }
  2259. },
  2260. data: chartData
  2261. }]
  2262. })
  2263. i++;
  2264. if (i === len) {
  2265. i = 0;
  2266. }
  2267. }, 2000);
  2268. },
  2269. legendItemClick : function(event) {
  2270. console.log(event);
  2271. return true;
  2272. }
  2273. }
  2274. },
  2275. credits: {
  2276. enabled: false //去掉hightchats水印
  2277. },
  2278. title: {
  2279. text: '公共基础等产业',
  2280. style:{
  2281. color: 'rgba(255,255,255,0.6)',
  2282. fontSize:12,
  2283. }
  2284. },
  2285. tooltip: {
  2286. crosshairs: true,
  2287. backgroundColor: 'rgba(0,0,0,0.5)',
  2288. // positioner: function(e){
  2289. // console.log(e, this)
  2290. // },
  2291. useHTML: true, //开启html模式
  2292. style: {
  2293. color:'#fff',
  2294. },
  2295. formatter: function(e){
  2296. //console.log(this)
  2297. let num = chartData[this.colorIndex].num
  2298. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2299. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2300. },
  2301. //pointFormat:
  2302. },
  2303. plotOptions: {
  2304. pie: {
  2305. allowPointSelect: true,
  2306. showInLegend: false, // 图例
  2307. cursor: 'pointer',
  2308. size: 160,
  2309. innerSize : 100, //环形图中间空白,0为饼图
  2310. depth: 25, //立体高度
  2311. slicedOffset: 21, //动画距离
  2312. dataLabels: {
  2313. enabled: false, // 是否展示指示线
  2314. format: '{point.name}: {point.percentage}'
  2315. }
  2316. },
  2317. },
  2318. series: [{
  2319. type: 'pie',
  2320. name: '占比',
  2321. //center: ['35%','50%'],
  2322. point: {
  2323. events:{
  2324. click:function(e){ //点击事件
  2325. that.showTip3 = true
  2326. that.echartTitle = '公共基础等产业'
  2327. setTimeout(() => {
  2328. that.initChartT1(chartData)
  2329. })
  2330. },
  2331. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2332. //console.log(e)
  2333. chartData.forEach((item,index) => {
  2334. item.sliced = false
  2335. item.selected = false
  2336. })
  2337. chartData[e.target.index].sliced = true
  2338. chartData[e.target.index].selected = true
  2339. chart.update({
  2340. series:[{
  2341. type: 'pie',
  2342. name: '占比',
  2343. point: {
  2344. events:{
  2345. click:function(e){
  2346. that.showTip3 = true
  2347. that.echartTitle = '公共基础等产业'
  2348. setTimeout(() => {
  2349. that.initChartT1(chartData)
  2350. })
  2351. }
  2352. }
  2353. },
  2354. data: chartData
  2355. }]
  2356. })
  2357. timer && clearInterval(timer);
  2358. },
  2359. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  2360. var points = chart.series[0].points;
  2361. var len = points.length;
  2362. timer && clearInterval(timer);
  2363. timer = setInterval(function () {
  2364. autoTooltip(points[i]);
  2365. chartData.forEach((item,index) => {
  2366. item.sliced = false
  2367. item.selected = false
  2368. if(index == i){
  2369. item.sliced = true
  2370. item.selected = true
  2371. }
  2372. })
  2373. chart.update({
  2374. series:[{
  2375. type: 'pie',
  2376. name: '占比',
  2377. point: {
  2378. events:{
  2379. click:function(e){
  2380. that.showTip3 = true
  2381. that.echartTitle = '公共基础等产业'
  2382. setTimeout(() => {
  2383. that.initChartT1(chartData)
  2384. })
  2385. }
  2386. }
  2387. },
  2388. data: chartData
  2389. }]
  2390. })
  2391. i++;
  2392. if (i === len) {
  2393. i = 0;
  2394. }
  2395. }, 2000);
  2396. }
  2397. }
  2398. },
  2399. data: chartData
  2400. }]
  2401. }
  2402. var chart = Highcharts.chart('echartL7', option);
  2403. function autoTooltip(point) {
  2404. chart.tooltip.refresh(point);
  2405. }
  2406. },
  2407. initChartR4 () {
  2408. let myChart = echarts.init(this.$refs['echartR4'])
  2409. let option = {
  2410. title: {
  2411. text: '2022年的可投资总额',
  2412. x: 'center',
  2413. y: '87%',
  2414. textStyle: {
  2415. color: 'rgba(255,255,255,0.6)',
  2416. fontSize: 12,
  2417. },
  2418. },
  2419. tooltip: {
  2420. trigger: 'item',
  2421. },
  2422. color: ['#69C1FF', '#4B97CC',],
  2423. legend: {
  2424. icon: 'circle',
  2425. top: 'bottom',
  2426. orient: 'vertical',
  2427. right: '1%',
  2428. textStyle: {
  2429. color: '#9DB9EB',
  2430. },
  2431. },
  2432. series: [
  2433. {
  2434. name: '',
  2435. type: 'pie',
  2436. label: {
  2437. normal: {
  2438. show: true,
  2439. position: 'center',
  2440. color: '#4c4a4a',
  2441. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  2442. rich: {
  2443. total: {
  2444. fontSize: 20,
  2445. fontFamily: "微软雅黑",
  2446. color: '#fff'
  2447. },
  2448. active: {
  2449. fontFamily: "微软雅黑",
  2450. fontSize: 15,
  2451. color: '#fff'
  2452. },
  2453. }
  2454. },
  2455. emphasis: {//中间文字显示
  2456. show: true,
  2457. }
  2458. },
  2459. radius: ['40%', '60%'],
  2460. center: ['50%', '45%'],
  2461. itemStyle: {
  2462. normal: {
  2463. label: {
  2464. show: false,
  2465. },
  2466. },
  2467. },
  2468. labelLine: {
  2469. show: false,
  2470. },
  2471. data: [
  2472. { value: 1048, name: '已使用额度' },
  2473. { value: 735, name: '可使用额度' }
  2474. ],
  2475. },
  2476. ],
  2477. }
  2478. myChart.setOption(option)
  2479. tools.loopShowTooltip(myChart, option, {
  2480. nterval: 2000,
  2481. loopSeries: true,
  2482. })
  2483. },
  2484. initChartR5 () {
  2485. let myChart = echarts.init(this.$refs['echartR5'])
  2486. let option = {
  2487. title: {
  2488. text: '2023年的可投资总额',
  2489. x: 'center',
  2490. y: '87%',
  2491. textStyle: {
  2492. color: 'rgba(255,255,255,0.6)',
  2493. fontSize: 12,
  2494. },
  2495. },
  2496. tooltip: {
  2497. trigger: 'item',
  2498. },
  2499. color: ['#69C1FF', '#4B97CC',],
  2500. legend: {
  2501. icon: 'circle',
  2502. top: 'bottom',
  2503. orient: 'vertical',
  2504. right: '1%',
  2505. textStyle: {
  2506. color: '#9DB9EB',
  2507. },
  2508. },
  2509. series: [
  2510. {
  2511. name: '',
  2512. type: 'pie',
  2513. label: {
  2514. normal: {
  2515. show: true,
  2516. position: 'center',
  2517. top: '50',
  2518. color: '#4c4a4a',
  2519. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  2520. rich: {
  2521. total: {
  2522. fontSize: 20,
  2523. fontFamily: "微软雅黑",
  2524. color: '#fff'
  2525. },
  2526. active: {
  2527. fontFamily: "微软雅黑",
  2528. fontSize: 15,
  2529. color: '#fff'
  2530. },
  2531. }
  2532. },
  2533. emphasis: {//中间文字显示
  2534. show: true,
  2535. }
  2536. },
  2537. radius: ['40%', '60%'],
  2538. center: ['50%', '45%'],
  2539. itemStyle: {
  2540. normal: {
  2541. label: {
  2542. show: false,
  2543. },
  2544. },
  2545. },
  2546. labelLine: {
  2547. show: false,
  2548. },
  2549. data: [
  2550. { value: 1048, name: '已使用额度' },
  2551. { value: 735, name: '可使用额度' }
  2552. ],
  2553. },
  2554. ],
  2555. }
  2556. myChart.setOption(option)
  2557. tools.loopShowTooltip(myChart, option, {
  2558. nterval: 2000,
  2559. loopSeries: true,
  2560. })
  2561. },
  2562. initChartR1 () {
  2563. // let data = [
  2564. // { value: [1098.71, 713], name: '主业' },
  2565. // { value: [65.17, 84], name: '辅业' }
  2566. // ]
  2567. // let count = 0
  2568. // data.forEach(item => {
  2569. // count += item.value[0]
  2570. // })
  2571. // let myChart = echarts.init(this.$refs['echartR1'])
  2572. // let option = {
  2573. // title: {
  2574. // text: '主辅业计划占比',
  2575. // x: 'center',
  2576. // y: '87%',
  2577. // textStyle: {
  2578. // color: 'rgba(255,255,255,0.6)',
  2579. // fontSize: 12,
  2580. // },
  2581. // },
  2582. // tooltip: {
  2583. // trigger: 'item',
  2584. // // formatter: '{b}' + ':' + '{c}' + '<br/>' + '占比:' + '{d}%',
  2585. // // position: ['-5%', '95%'],
  2586. // formatter: function (params) {
  2587. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  2588. // }
  2589. // },
  2590. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2591. // legend: {
  2592. // show: false,
  2593. // icon: 'circle',
  2594. // top: 'bottom',
  2595. // orient: 'vertical',
  2596. // right: '-3%',
  2597. // textStyle: {
  2598. // color: '#9DB9EB',
  2599. // fontSize: '10px'
  2600. // },
  2601. // itemWidth: 10,
  2602. // itemHeight: 10
  2603. // },
  2604. // series: [
  2605. // {
  2606. // name: '',
  2607. // type: 'pie',
  2608. // radius: ['40%', '60%'],
  2609. // center: ['50%', '45%'],
  2610. // itemStyle: {
  2611. // normal: {
  2612. // borderColor: 'rgba(1,31,64,0.7)',
  2613. // borderWidth: 6,
  2614. // label: {
  2615. // show: false,
  2616. // },
  2617. // },
  2618. // },
  2619. // labelLine: {
  2620. // show: false,
  2621. // },
  2622. // data,
  2623. // },
  2624. // ],
  2625. // }
  2626. // myChart.setOption(option)
  2627. // tools.loopShowTooltip(myChart, option, {
  2628. // nterval: 2000,
  2629. // loopSeries: true,
  2630. // })
  2631. // let that = this
  2632. // myChart.on('click', function (param) {
  2633. // console.log(param)
  2634. // that.showTip3 = true
  2635. // setTimeout(() => {
  2636. // that.initChartT1(data, option)
  2637. // })
  2638. // })
  2639. // let data = [
  2640. // { value: [1098.71, 713], name: '主业' },
  2641. // { value: [65.17, 84], name: '辅业' }
  2642. // ]
  2643. var chartData = [
  2644. {
  2645. name: '辅业',
  2646. y: 76.38,
  2647. num: 84,
  2648. sliced: false,
  2649. selected: false,
  2650. },
  2651. {
  2652. name: '主业',
  2653. y: 1287.50,
  2654. num: 713,
  2655. sliced: false,
  2656. selected: false,
  2657. }
  2658. ]
  2659. var timer = null;
  2660. var i = 0;
  2661. let that = this
  2662. var option = {
  2663. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2664. chart: {
  2665. type: 'pie',
  2666. backgroundColor: 'rgba(0,0,0,0)',
  2667. options3d: {
  2668. enabled: true,
  2669. alpha: 45,
  2670. //beta: 0
  2671. },
  2672. events: {
  2673. // load,图表加载完成时触发
  2674. load: function () {
  2675. var chart = this;
  2676. var points = chart.series[0].points;
  2677. var len = points.length;
  2678. timer && clearInterval(timer);
  2679. timer = setInterval(function () {
  2680. autoTooltip(points[i]);
  2681. chartData.forEach((item,index) => {
  2682. item.sliced = false
  2683. item.selected = false
  2684. if(index == i){
  2685. item.sliced = true
  2686. item.selected = true
  2687. }
  2688. })
  2689. chart.update({
  2690. series:[{
  2691. type: 'pie',
  2692. name: '占比',
  2693. point: {
  2694. events:{
  2695. click:function(e){
  2696. that.showTip3 = true
  2697. that.echartTitle = '主辅业计划占比'
  2698. setTimeout(() => {
  2699. that.initChartT1(chartData)
  2700. })
  2701. }
  2702. }
  2703. },
  2704. data: chartData
  2705. }]
  2706. })
  2707. i++;
  2708. if (i === len) {
  2709. i = 0;
  2710. chartData.forEach((item,index) => {
  2711. item.sliced = false
  2712. item.selected = false
  2713. })
  2714. chart.update({
  2715. series:[{
  2716. type: 'pie',
  2717. name: '占比',
  2718. point: {
  2719. events:{
  2720. click:function(e){
  2721. console.log(e)
  2722. }
  2723. }
  2724. },
  2725. data: chartData
  2726. }]
  2727. })
  2728. }
  2729. }, 2000);
  2730. },
  2731. legendItemClick : function(event) {
  2732. console.log(event);
  2733. return true;
  2734. }
  2735. }
  2736. },
  2737. credits: {
  2738. enabled: false //去掉hightchats水印
  2739. },
  2740. title: {
  2741. text: '主辅业计划占比',
  2742. style:{
  2743. color: 'rgba(255,255,255,0.6)',
  2744. fontSize:12,
  2745. }
  2746. },
  2747. tooltip: {
  2748. crosshairs: true,
  2749. backgroundColor: 'rgba(0,0,0,0.5)',
  2750. // positioner: function(e){
  2751. // console.log(e, this)
  2752. // },
  2753. useHTML: true, //开启html模式
  2754. style: {
  2755. color:'#fff',
  2756. },
  2757. formatter: function(e){
  2758. //console.log(this)
  2759. let num = chartData[this.colorIndex].num
  2760. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2761. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2762. },
  2763. //pointFormat:
  2764. },
  2765. plotOptions: {
  2766. pie: {
  2767. allowPointSelect: true,
  2768. showInLegend: false, // 图例
  2769. cursor: 'pointer',
  2770. size: 160,
  2771. innerSize : 100, //环形图中间空白,0为饼图
  2772. depth: 25, //立体高度
  2773. slicedOffset: 21, //动画距离
  2774. dataLabels: {
  2775. enabled: false, // 是否展示指示线
  2776. format: '{point.name}: {point.percentage}'
  2777. }
  2778. },
  2779. },
  2780. series: [{
  2781. type: 'pie',
  2782. name: '占比',
  2783. //center: ['35%','50%'],
  2784. point: {
  2785. events:{
  2786. click:function(e){ //点击事件
  2787. that.showTip3 = true
  2788. that.echartTitle = '主辅业计划占比'
  2789. setTimeout(() => {
  2790. that.initChartT1(chartData)
  2791. })
  2792. },
  2793. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2794. //console.log(e)
  2795. chartData.forEach((item,index) => {
  2796. item.sliced = false
  2797. item.selected = false
  2798. })
  2799. chartData[e.target.index].sliced = true
  2800. chartData[e.target.index].selected = true
  2801. chart.update({
  2802. series:[{
  2803. type: 'pie',
  2804. name: '占比',
  2805. point: {
  2806. events:{
  2807. click:function(e){
  2808. that.showTip3 = true
  2809. that.echartTitle = '主辅业计划占比'
  2810. setTimeout(() => {
  2811. that.initChartT1(chartData)
  2812. })
  2813. }
  2814. }
  2815. },
  2816. data: chartData
  2817. }]
  2818. })
  2819. timer && clearInterval(timer);
  2820. },
  2821. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  2822. var points = chart.series[0].points;
  2823. var len = points.length;
  2824. timer && clearInterval(timer);
  2825. timer = setInterval(function () {
  2826. autoTooltip(points[i]);
  2827. chartData.forEach((item,index) => {
  2828. item.sliced = false
  2829. item.selected = false
  2830. if(index == i){
  2831. item.sliced = true
  2832. item.selected = true
  2833. }
  2834. })
  2835. chart.update({
  2836. series:[{
  2837. type: 'pie',
  2838. name: '占比',
  2839. point: {
  2840. events:{
  2841. click:function(e){
  2842. that.showTip3 = true
  2843. that.echartTitle = '主辅业计划占比'
  2844. setTimeout(() => {
  2845. that.initChartT1(chartData)
  2846. })
  2847. }
  2848. }
  2849. },
  2850. data: chartData
  2851. }]
  2852. })
  2853. i++;
  2854. if (i === len) {
  2855. i = 0;
  2856. chartData.forEach((item,index) => {
  2857. item.sliced = false
  2858. item.selected = false
  2859. })
  2860. chart.update({
  2861. series:[{
  2862. type: 'pie',
  2863. name: '占比',
  2864. point: {
  2865. events:{
  2866. click:function(e){
  2867. that.showTip3 = true
  2868. that.echartTitle = '主辅业计划占比'
  2869. setTimeout(() => {
  2870. that.initChartT1(chartData)
  2871. })
  2872. }
  2873. }
  2874. },
  2875. data: chartData
  2876. }]
  2877. })
  2878. }
  2879. }, 2000);
  2880. }
  2881. }
  2882. },
  2883. data: chartData
  2884. }]
  2885. }
  2886. var chart = Highcharts.chart('echartR1', option);
  2887. function autoTooltip(point) {
  2888. chart.tooltip.refresh(point);
  2889. }
  2890. },
  2891. initChartR2 () {
  2892. // let data = [
  2893. // { value: [340.77, 168], name: '特别监管类' },
  2894. // { value: [390.22, 465], name: '备案类' }
  2895. // ]
  2896. // let count = 0
  2897. // data.forEach(item => {
  2898. // count += item.value[0]
  2899. // })
  2900. // let myChart = echarts.init(this.$refs['echartR2'])
  2901. // let option = {
  2902. // title: {
  2903. // text: '项目管理类型',
  2904. // x: 'center',
  2905. // y: '87%',
  2906. // textStyle: {
  2907. // color: 'rgba(255,255,255,0.6)',
  2908. // fontSize: 12,
  2909. // },
  2910. // },
  2911. // tooltip: {
  2912. // trigger: 'item',
  2913. // formatter: function (params) {
  2914. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  2915. // }
  2916. // // position: ['-5%', '95%'],
  2917. // },
  2918. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2919. // legend: {
  2920. // show: false,
  2921. // icon: 'circle',
  2922. // top: 'bottom',
  2923. // orient: 'vertical',
  2924. // right: '-3%',
  2925. // textStyle: {
  2926. // color: '#9DB9EB',
  2927. // fontSize: '10px'
  2928. // },
  2929. // itemWidth: 10,
  2930. // itemHeight: 10
  2931. // },
  2932. // series: [
  2933. // {
  2934. // name: '',
  2935. // type: 'pie',
  2936. // radius: ['40%', '60%'],
  2937. // center: ['50%', '45%'],
  2938. // itemStyle: {
  2939. // normal: {
  2940. // borderColor: 'rgba(1,31,64,0.7)',
  2941. // borderWidth: 6,
  2942. // label: {
  2943. // show: false,
  2944. // },
  2945. // },
  2946. // },
  2947. // labelLine: {
  2948. // show: false,
  2949. // },
  2950. // data,
  2951. // },
  2952. // ],
  2953. // }
  2954. // myChart.setOption(option)
  2955. // tools.loopShowTooltip(myChart, option, {
  2956. // nterval: 2000,
  2957. // loopSeries: true,
  2958. // })
  2959. // let that = this
  2960. // myChart.on('click', function (param) {
  2961. // console.log(param)
  2962. // that.showTip3 = true
  2963. // setTimeout(() => {
  2964. // that.initChartT1(data, option)
  2965. // })
  2966. // })
  2967. // { value: [340.77, 168], name: '特别监管类' },
  2968. // { value: [390.22, 465], name: '备案类' }
  2969. var chartData = [
  2970. {
  2971. name: '特别监管类',
  2972. y: 635.84,
  2973. num: 168,
  2974. sliced: false,
  2975. selected: false,
  2976. },
  2977. {
  2978. name: '备案类',
  2979. y: 728.04,
  2980. num: 465,
  2981. sliced: false,
  2982. selected: false,
  2983. }
  2984. ]
  2985. var timer = null;
  2986. var i = 0;
  2987. let that = this
  2988. var chart = Highcharts.chart('echartR2', {
  2989. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2990. chart: {
  2991. type: 'pie',
  2992. backgroundColor: 'rgba(0,0,0,0)',
  2993. options3d: {
  2994. enabled: true,
  2995. alpha: 45,
  2996. //beta: 0
  2997. },
  2998. events: {
  2999. // load,图表加载完成时触发
  3000. load: function () {
  3001. var chart = this;
  3002. var points = chart.series[0].points;
  3003. var len = points.length;
  3004. timer && clearInterval(timer);
  3005. timer = setInterval(function () {
  3006. autoTooltip(points[i]);
  3007. chartData.forEach((item,index) => {
  3008. item.sliced = false
  3009. item.selected = false
  3010. if(index == i){
  3011. item.sliced = true
  3012. item.selected = true
  3013. }
  3014. })
  3015. chart.update({
  3016. series:[{
  3017. type: 'pie',
  3018. name: '占比',
  3019. point: {
  3020. events:{
  3021. click:function(e){
  3022. that.showTip3 = true
  3023. that.echartTitle = '项目管理类型'
  3024. setTimeout(() => {
  3025. that.initChartT1(chartData)
  3026. })
  3027. }
  3028. }
  3029. },
  3030. data: chartData
  3031. }]
  3032. })
  3033. i++;
  3034. if (i === len) {
  3035. i = 0;
  3036. chartData.forEach((item,index) => {
  3037. item.sliced = false
  3038. item.selected = false
  3039. })
  3040. chart.update({
  3041. series:[{
  3042. type: 'pie',
  3043. name: '占比',
  3044. point: {
  3045. events:{
  3046. click:function(e){
  3047. console.log(e)
  3048. }
  3049. }
  3050. },
  3051. data: chartData
  3052. }]
  3053. })
  3054. }
  3055. }, 2000);
  3056. },
  3057. legendItemClick : function(event) {
  3058. //console.log(event);
  3059. that.showTip3 = true
  3060. that.echartTitle = '项目管理类型'
  3061. setTimeout(() => {
  3062. that.initChartT1(chartData)
  3063. })
  3064. return true;
  3065. }
  3066. }
  3067. },
  3068. credits: {
  3069. enabled: false //去掉hightchats水印
  3070. },
  3071. title: {
  3072. text: '项目管理类型',
  3073. style:{
  3074. color: 'rgba(255,255,255,0.6)',
  3075. fontSize:12,
  3076. }
  3077. },
  3078. tooltip: {
  3079. crosshairs: true,
  3080. backgroundColor: 'rgba(0,0,0,0.5)',
  3081. // positioner: function(e){
  3082. // console.log(e, this)
  3083. // },
  3084. useHTML: true, //开启html模式
  3085. style: {
  3086. color:'#fff',
  3087. },
  3088. formatter: function(e){
  3089. //console.log(this)
  3090. let num = chartData[this.colorIndex].num
  3091. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3092. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3093. },
  3094. //pointFormat:
  3095. },
  3096. plotOptions: {
  3097. pie: {
  3098. allowPointSelect: true,
  3099. showInLegend: false, // 图例
  3100. cursor: 'pointer',
  3101. size: 160,
  3102. innerSize : 100, //环形图中间空白,0为饼图
  3103. depth: 25, //立体高度
  3104. slicedOffset: 21, //动画距离
  3105. dataLabels: {
  3106. enabled: false, // 是否展示指示线
  3107. format: '{point.name}: {point.percentage}'
  3108. }
  3109. },
  3110. },
  3111. series: [{
  3112. type: 'pie',
  3113. name: '占比',
  3114. //center: ['35%','50%'],
  3115. point: {
  3116. events:{
  3117. click:function(e){ //点击事件
  3118. that.showTip3 = true
  3119. that.echartTitle = '项目管理类型'
  3120. setTimeout(() => {
  3121. that.initChartT1(chartData)
  3122. })
  3123. },
  3124. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3125. //console.log(e)
  3126. chartData.forEach((item,index) => {
  3127. item.sliced = false
  3128. item.selected = false
  3129. })
  3130. chartData[e.target.index].sliced = true
  3131. chartData[e.target.index].selected = true
  3132. chart.update({
  3133. series:[{
  3134. type: 'pie',
  3135. name: '占比',
  3136. point: {
  3137. events:{
  3138. click:function(e){
  3139. that.showTip3 = true
  3140. that.echartTitle = '项目管理类型'
  3141. setTimeout(() => {
  3142. that.initChartT1(chartData)
  3143. })
  3144. }
  3145. }
  3146. },
  3147. data: chartData
  3148. }]
  3149. })
  3150. timer && clearInterval(timer);
  3151. },
  3152. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  3153. var points = chart.series[0].points;
  3154. var len = points.length;
  3155. timer && clearInterval(timer);
  3156. timer = setInterval(function () {
  3157. autoTooltip(points[i]);
  3158. chartData.forEach((item,index) => {
  3159. item.sliced = false
  3160. item.selected = false
  3161. if(index == i){
  3162. item.sliced = true
  3163. item.selected = true
  3164. }
  3165. })
  3166. chart.update({
  3167. series:[{
  3168. type: 'pie',
  3169. name: '占比',
  3170. point: {
  3171. events:{
  3172. click:function(e){
  3173. that.showTip3 = true
  3174. that.echartTitle = '项目管理类型'
  3175. setTimeout(() => {
  3176. that.initChartT1(chartData)
  3177. })
  3178. }
  3179. }
  3180. },
  3181. data: chartData
  3182. }]
  3183. })
  3184. i++;
  3185. if (i === len) {
  3186. i = 0;
  3187. chartData.forEach((item,index) => {
  3188. item.sliced = false
  3189. item.selected = false
  3190. })
  3191. chart.update({
  3192. series:[{
  3193. type: 'pie',
  3194. name: '占比',
  3195. point: {
  3196. events:{
  3197. click:function(e){
  3198. console.log(e)
  3199. }
  3200. }
  3201. },
  3202. data: chartData
  3203. }]
  3204. })
  3205. }
  3206. }, 2000);
  3207. }
  3208. }
  3209. },
  3210. data: chartData
  3211. }]
  3212. });
  3213. function autoTooltip(point) {
  3214. chart.tooltip.refresh(point);
  3215. }
  3216. },
  3217. initChartR3 () {
  3218. let myChart = echarts.init(this.$refs['echartR3'])
  3219. let option = {
  3220. title: {
  3221. text: '股权类',
  3222. textStyle: {
  3223. color: '#69C0FF',
  3224. fontSize: 16,
  3225. fontWeight: 500
  3226. },
  3227. top: '10',
  3228. left: '10'
  3229. },
  3230. textStyle: {
  3231. color: '#fff',
  3232. },
  3233. tooltip: {
  3234. trigger: "axis",
  3235. formatter: function (params) {
  3236. 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] + '亿元';
  3237. return tip
  3238. },
  3239. axisPointer: {
  3240. lineStyle: {
  3241. type: 'dashed',
  3242. width: 2,
  3243. color: 'rgba(255,255,255,0.6)'
  3244. },
  3245. animation: true
  3246. }
  3247. },
  3248. grid: {
  3249. top: '22%',
  3250. right: '5%',
  3251. left: '15%',
  3252. bottom: '15%',
  3253. },
  3254. yAxis: {
  3255. data: ['备案', '特别监管'],
  3256. splitLine: {
  3257. show: true,
  3258. lineStyle: {
  3259. color: '#68b4dd66',
  3260. type: 'dashed',
  3261. },
  3262. },
  3263. axisLine: {
  3264. show: false
  3265. },
  3266. axisLabel: {
  3267. show: true,
  3268. formatter: '{value}',
  3269. textStyle: {
  3270. color: 'rgba(250,250,250,0.6)',
  3271. },
  3272. },
  3273. nameTextStyle: {
  3274. color: '#ebf8ac',
  3275. fontSize: 16,
  3276. },
  3277. },
  3278. xAxis: {
  3279. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  3280. axisLine: {
  3281. show: true, //隐藏X轴轴线
  3282. lineStyle: {
  3283. color: '#005094',
  3284. width: 1,
  3285. },
  3286. },
  3287. axisTick: {
  3288. show: false, //隐藏X轴刻度
  3289. },
  3290. axisLabel: {
  3291. show: true,
  3292. textStyle: {
  3293. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  3294. fontSize: 12,
  3295. },
  3296. },
  3297. },
  3298. series: [
  3299. {
  3300. name: '',
  3301. type: 'scatter',
  3302. symbol: 'circle',
  3303. symbolSize: function (data) {
  3304. return Math.sqrt(data[2]) * 3;
  3305. },
  3306. label: {
  3307. emphasis: {
  3308. show: true,
  3309. formatter: function (param) {
  3310. return param.data[2];
  3311. },
  3312. position: 'top'
  3313. }
  3314. },
  3315. itemStyle: {
  3316. normal: {
  3317. color: '#40A9FF'
  3318. }
  3319. },
  3320. data: [
  3321. ['项目储备', '特别监管', 9, 6.49],
  3322. ['项目立项', '特别监管', 0, 0.00],
  3323. ['可研论证', '特别监管', 2, 0.10],
  3324. ['投资决策', '特别监管', 27, 15.52],
  3325. ]
  3326. },
  3327. {
  3328. name: '',
  3329. type: 'scatter',
  3330. symbol: 'circle',
  3331. symbolSize: function (data) {
  3332. return Math.sqrt(data[2]) * 3;
  3333. },
  3334. label: {
  3335. emphasis: {
  3336. show: true,
  3337. formatter: function (param) {
  3338. return param.data[2];
  3339. },
  3340. position: 'top'
  3341. }
  3342. },
  3343. itemStyle: {
  3344. normal: {
  3345. color: '#45DAD1'
  3346. }
  3347. },
  3348. data: [
  3349. ['项目储备', '备案', 39, 8.08],
  3350. ['项目立项', '备案', 7, 1.83],
  3351. ['可研论证', '备案', 19, 1.01],
  3352. ['投资决策', '备案', 73, 17.65],
  3353. ]
  3354. },
  3355. ]
  3356. }
  3357. myChart.setOption(option)
  3358. tools.loopShowTooltip(myChart, option, {
  3359. nterval: 2000,
  3360. loopSeries: true,
  3361. })
  3362. },
  3363. initChartR6 () {
  3364. let myChart = echarts.init(this.$refs['echartR6'])
  3365. let option = {
  3366. title: {
  3367. text: '固定资产',
  3368. textStyle: {
  3369. color: '#69C0FF',
  3370. fontSize: 16,
  3371. fontWeight: 500
  3372. },
  3373. top: '10',
  3374. left: '10'
  3375. },
  3376. textStyle: {
  3377. color: '#fff',
  3378. },
  3379. tooltip: {
  3380. trigger: "axis",
  3381. formatter: function (params) {
  3382. 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] + '亿元';
  3383. return tip
  3384. },
  3385. axisPointer: {
  3386. lineStyle: {
  3387. type: 'dashed',
  3388. width: 2,
  3389. color: 'rgba(255,255,255,0.6)'
  3390. },
  3391. animation: true
  3392. }
  3393. },
  3394. grid: {
  3395. top: '25%',
  3396. right: '5%',
  3397. left: '15%',
  3398. bottom: '15%',
  3399. },
  3400. yAxis: {
  3401. data: ['备案', '特别监管'],
  3402. splitLine: {
  3403. show: true,
  3404. lineStyle: {
  3405. color: '#68b4dd66',
  3406. type: 'dashed',
  3407. },
  3408. },
  3409. axisLine: {
  3410. show: false
  3411. },
  3412. axisLabel: {
  3413. show: true,
  3414. formatter: '{value}',
  3415. textStyle: {
  3416. color: 'rgba(250,250,250,0.6)',
  3417. },
  3418. },
  3419. nameTextStyle: {
  3420. color: '#ebf8ac',
  3421. fontSize: 16,
  3422. },
  3423. },
  3424. xAxis: {
  3425. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  3426. axisLine: {
  3427. show: true, //隐藏X轴轴线
  3428. lineStyle: {
  3429. color: '#005094',
  3430. width: 1,
  3431. },
  3432. },
  3433. axisTick: {
  3434. show: false, //隐藏X轴刻度
  3435. },
  3436. axisLabel: {
  3437. show: true,
  3438. textStyle: {
  3439. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  3440. fontSize: 12,
  3441. },
  3442. },
  3443. },
  3444. series: [
  3445. {
  3446. name: '特别监管',
  3447. type: 'scatter',
  3448. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  3449. symbolSize: function (data) {
  3450. return Math.sqrt(data[2]) * 3;
  3451. },
  3452. label: {
  3453. emphasis: {
  3454. show: true,
  3455. formatter: function (param) {
  3456. return param.data[2];
  3457. },
  3458. position: 'top'
  3459. }
  3460. },
  3461. itemStyle: {
  3462. normal: {
  3463. color: '#40A9FF'
  3464. }
  3465. },
  3466. data: [
  3467. ['项目储备', '特别监管', 14, 12.05],
  3468. ['项目立项', '特别监管', 2, 1.25],
  3469. ['可研论证', '特别监管', 10, 32.69],
  3470. ['投资决策', '特别监管', 15, 28.53],
  3471. ]
  3472. },
  3473. {
  3474. name: '备案',
  3475. type: 'scatter',
  3476. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  3477. symbolSize: function (data) {
  3478. return Math.sqrt(data[2]) * 3;
  3479. },
  3480. label: {
  3481. emphasis: {
  3482. show: true,
  3483. formatter: function (param) {
  3484. return param.data[2];
  3485. },
  3486. position: 'top'
  3487. }
  3488. },
  3489. itemStyle: {
  3490. normal: {
  3491. color: '#45DAD1'
  3492. }
  3493. },
  3494. data: [
  3495. ['项目储备', '备案', 27, 23.86],
  3496. ['项目立项', '备案', 1, 1.05],
  3497. ['可研论证', '备案', 14, 18.46],
  3498. ['投资决策', '备案', 40, 38.86],
  3499. ]
  3500. },
  3501. ]
  3502. }
  3503. myChart.setOption(option)
  3504. tools.loopShowTooltip(myChart, option, {
  3505. nterval: 2000,
  3506. loopSeries: true,
  3507. })
  3508. },
  3509. initChartT1 (list, info) {
  3510. // let count = 0
  3511. // console.log(list, info)
  3512. // this.echartTitle = info.title.text
  3513. // let data = list
  3514. // data.forEach(item => {
  3515. // count += item.value[0]
  3516. // })
  3517. // let option = JSON.parse(JSON.stringify(info))
  3518. // option.series[0].center = ['50%', '50%']
  3519. // option.series[0].radius = ['60%', '75%']
  3520. // option.legend = {
  3521. // show: false,
  3522. // icon: 'circle',
  3523. // top: 'bottom',
  3524. // orient: 'vertical',
  3525. // right: '2%',
  3526. // textStyle: {
  3527. // color: '#9DB9EB',
  3528. // fontSize: 16
  3529. // },
  3530. // itemWidth: 10,
  3531. // itemHeight: 10
  3532. // },
  3533. // option.title.text = ''
  3534. // option.tooltip = {
  3535. // trigger: 'item',
  3536. // formatter: function (params) {
  3537. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  3538. // }
  3539. // }
  3540. // option.series[0].itemStyle.normal.label = {
  3541. // show: true,
  3542. // formatter: function (params) {
  3543. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '\n' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  3544. // }
  3545. // }
  3546. // option.series[0].labelLine.show = true
  3547. // let myChart = echarts.init(this.$refs['echartT1'])
  3548. // myChart.setOption(option)
  3549. // tools.loopShowTooltip(myChart, option, {
  3550. // nterval: 2000,
  3551. // loopSeries: true,
  3552. // })
  3553. var chartData = list
  3554. //console.log(list)
  3555. setTimeout(()=>{
  3556. Highcharts.chart('echartT1', {
  3557. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  3558. chart: {
  3559. type: 'pie',
  3560. backgroundColor: 'rgba(0,0,0,0)',
  3561. options3d: {
  3562. enabled: true,
  3563. alpha: 45,
  3564. //beta: 0
  3565. },
  3566. },
  3567. credits: {
  3568. enabled: false //去掉hightchats水印
  3569. },
  3570. title: null,
  3571. tooltip: {
  3572. crosshairs: true,
  3573. backgroundColor: 'rgba(0,0,0,0.5)',
  3574. // positioner: function(e){
  3575. // console.log(e, this)
  3576. // },
  3577. useHTML: true, //开启html模式
  3578. style: {
  3579. color:'#fff',
  3580. },
  3581. formatter: function(e){
  3582. //console.log(this)
  3583. let num = chartData[this.colorIndex].num
  3584. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3585. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3586. },
  3587. //pointFormat:
  3588. },
  3589. plotOptions: {
  3590. pie: {
  3591. allowPointSelect: true,
  3592. showInLegend: false, // 图例
  3593. cursor: 'pointer',
  3594. size: 260,
  3595. innerSize : 170, //环形图中间空白,0为饼图
  3596. depth: 38, //立体高度
  3597. slicedOffset: 23, //动画距离
  3598. dataLabels: {
  3599. enabled: true, // 是否展示指示线
  3600. formatter: function(point) {
  3601. let num = chartData[this.colorIndex].num
  3602. console.log(num)
  3603. this.percentage = this.percentage.toFixed(2)
  3604. return `${this.key}:${this.percentage}%<br/>${this.y}亿,${num}个`
  3605. } //''
  3606. }
  3607. },
  3608. },
  3609. series: [{
  3610. type: 'pie',
  3611. name: '占比',
  3612. //center: ['35%','50%'],
  3613. data: chartData
  3614. }]
  3615. });
  3616. },50)
  3617. }
  3618. },
  3619. })