investHome2.js 50 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670
  1. let app = new Vue({
  2. el: '#app',
  3. data () {
  4. return {
  5. showTip2: false,
  6. year: '2022',
  7. time: '',
  8. timer: '',
  9. mapName: 'shanxi',
  10. geoCoordMap: {},
  11. config1: {
  12. number: [100],
  13. content: '{nt}个',
  14. },
  15. storageRecordConfig: {
  16. header: ['项目名称', '所属企业', '总投资额'],
  17. headerBGC: '#05507b33',
  18. oddRowBGC: '#05507b33',
  19. evenRowBGC: '',
  20. rowNum: 4,
  21. align: ['center'],
  22. data: [
  23. ['建设工程项目', '山西建投', "60.32亿"],
  24. ['建设工程项目', '山西建投', "60.32亿"],
  25. ['建设工程项目', '山西建投', "60.32亿"],
  26. ['建设工程项目', '山西建投', "60.32亿"],
  27. ['建设工程项目', '山西建投', "60.32亿"],
  28. ['建设工程项目', '山西建投', "60.32亿"],
  29. ['建设工程项目', '山西建投', "60.32亿"],
  30. ['建设工程项目', '山西建投', "60.32亿"],
  31. ['建设工程项目', '山西建投', "60.32亿"]
  32. ],
  33. },
  34. companyList: [
  35. { name: '山西焦煤' },
  36. { name: '晋能控股' },
  37. { name: '华新燃气' },
  38. { name: '山西建投' },
  39. { name: '潞安化工' },
  40. { name: '华远陆港' },
  41. { name: '航产集团' },
  42. { name: '大地控股' },
  43. { name: '国新能源' },
  44. { name: '汾酒集团' },
  45. { name: '云时代' },
  46. { name: '神农科技' },
  47. { name: '华阳新材' },
  48. { name: '华舰体育' },
  49. { name: '交控集团' },
  50. { name: '文旅集团' },
  51. { name: '水控集团' },
  52. { name: '太重集团' },
  53. ],
  54. }
  55. },
  56. created () {
  57. this.time = formatDate()
  58. this.timer = setInterval(() => {
  59. this.time = formatDate()
  60. }, 1000)
  61. },
  62. beforeDestroy () {
  63. if (this.timer) {
  64. clearInterval(this.timer);
  65. }
  66. },
  67. mounted () {
  68. // 左侧图表
  69. setTimeout(() => {
  70. this.initChartL1()
  71. this.initChartL2()
  72. this.initChartL3()
  73. this.initChartL4()
  74. this.initChartL5()
  75. this.initChartL6()
  76. this.initChartL7()
  77. this.initChartR1()
  78. this.initChartR2()
  79. this.initChartR3()
  80. this.initChartR6()
  81. },)
  82. },
  83. methods: {
  84. convertData (data) {
  85. var res = []
  86. for (var i = 0; i < data.length; i++) {
  87. var geoCoord = this.geoCoordMap[data[i].name]
  88. if (geoCoord) {
  89. res.push({
  90. name: data[i].name,
  91. value: geoCoord.concat(data[i].value),
  92. })
  93. }
  94. }
  95. return res
  96. },
  97. initChinaChart () {
  98. var data = [
  99. { name: '吕梁市', value: 150 },
  100. { name: '大同市', value: 190 },
  101. { name: '忻州市', value: 140 },
  102. { name: '朔州市', value: 160 },
  103. { name: '晋中市', value: 100 },
  104. { name: '太原市', value: 300 },
  105. { name: '临汾市', value: 190 },
  106. { name: '长治市', value: 100 },
  107. { name: '晋城市', value: 280 },
  108. { name: '运城市', value: 180 },
  109. { name: '阳泉市', value: 110 },
  110. ]
  111. var moveLine = {
  112. normal: [
  113. {
  114. fromName: '太原市',
  115. toName: '吕梁市',
  116. coords: [
  117. [112.3352, 37.9413],
  118. [111.3574, 37.7325],
  119. ],
  120. },
  121. {
  122. fromName: '太原市',
  123. toName: '忻州市',
  124. coords: [
  125. [112.3352, 37.9413],
  126. [112.4561, 38.8971],
  127. ],
  128. },
  129. {
  130. fromName: '太原市',
  131. toName: '临汾市',
  132. coords: [
  133. [112.3352, 37.9413],
  134. [111.4783, 36.1615],
  135. ],
  136. },
  137. {
  138. fromName: '太原市',
  139. toName: '阳泉市',
  140. coords: [
  141. [112.3352, 37.9413],
  142. [113.4778, 38.0951],
  143. ],
  144. },
  145. {
  146. fromName: '太原市',
  147. toName: '晋中市',
  148. coords: [
  149. [112.3352, 37.9413],
  150. [112.7747, 37.37],
  151. ],
  152. },
  153. {
  154. fromName: '太原市',
  155. toName: '运城市',
  156. coords: [
  157. [112.3352, 37.9413],
  158. [111.1487, 35.2002],
  159. ],
  160. },
  161. {
  162. fromName: '太原市',
  163. toName: '大同市',
  164. coords: [
  165. [112.3352, 37.9413],
  166. [113.7854, 39.8035],
  167. ],
  168. },
  169. {
  170. fromName: '太原市',
  171. toName: '晋城市',
  172. coords: [
  173. [112.3352, 37.9413],
  174. [112.7856, 35.6342],
  175. ],
  176. },
  177. {
  178. fromName: '太原市',
  179. toName: '长治市',
  180. coords: [
  181. [112.3352, 37.9413],
  182. [112.8625, 36.4746],
  183. ],
  184. },
  185. {
  186. fromName: '太原市',
  187. toName: '朔州市',
  188. coords: [
  189. [112.3352, 37.9413],
  190. [113.0713, 39.6991],
  191. ],
  192. },
  193. ],
  194. }
  195. /*获取地图数据*/
  196. let myChart = echarts.init(this.$refs['echarts-map'])
  197. echarts.registerMap('shanxi', {
  198. type: 'FeatureCollection',
  199. features: [
  200. {
  201. type: 'Feature',
  202. id: '1409',
  203. properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
  204. geometry: {
  205. type: 'Polygon',
  206. coordinates: [
  207. '@@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',
  208. ],
  209. encodeOffsets: [[113614, 39657]],
  210. },
  211. },
  212. {
  213. type: 'Feature',
  214. id: '1411',
  215. properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
  216. geometry: {
  217. type: 'Polygon',
  218. coordinates: [
  219. '@@@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',
  220. ],
  221. encodeOffsets: [[113614, 39657]],
  222. },
  223. },
  224. {
  225. type: 'Feature',
  226. id: '1410',
  227. properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
  228. geometry: {
  229. type: 'Polygon',
  230. coordinates: [
  231. '@@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',
  232. ],
  233. encodeOffsets: [[113063, 37784]],
  234. },
  235. },
  236. {
  237. type: 'Feature',
  238. id: '1407',
  239. properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
  240. geometry: {
  241. type: 'Polygon',
  242. coordinates: [
  243. '@@@š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@',
  244. ],
  245. encodeOffsets: [[114087, 37682]],
  246. },
  247. },
  248. {
  249. type: 'Feature',
  250. id: '1408',
  251. properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
  252. geometry: {
  253. type: 'Polygon',
  254. coordinates: [
  255. '@@„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@„',
  256. ],
  257. encodeOffsets: [[113232, 36597]],
  258. },
  259. },
  260. {
  261. type: 'Feature',
  262. id: '1402',
  263. properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
  264. geometry: {
  265. type: 'Polygon',
  266. coordinates: [
  267. '@@²£š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',
  268. ],
  269. encodeOffsets: [[115335, 41209]],
  270. },
  271. },
  272. {
  273. type: 'Feature',
  274. id: '1404',
  275. properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
  276. geometry: {
  277. type: 'Polygon',
  278. coordinates: [
  279. '@@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',
  280. ],
  281. encodeOffsets: [[116269, 37637]],
  282. },
  283. },
  284. {
  285. type: 'Feature',
  286. id: '1406',
  287. properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
  288. geometry: {
  289. type: 'Polygon',
  290. coordinates: [
  291. '@@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‚',
  292. ],
  293. encodeOffsets: [[114615, 40562]],
  294. },
  295. },
  296. {
  297. type: 'Feature',
  298. id: '1405',
  299. properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
  300. geometry: {
  301. type: 'Polygon',
  302. coordinates: [
  303. '@@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°',
  304. ],
  305. encodeOffsets: [[115223, 36895]],
  306. },
  307. },
  308. {
  309. type: 'Feature',
  310. id: '1401',
  311. properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
  312. geometry: {
  313. type: 'Polygon',
  314. coordinates: [
  315. '@@„@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š@°',
  316. ],
  317. encodeOffsets: [[114503, 39134]],
  318. },
  319. },
  320. {
  321. type: 'Feature',
  322. id: '1403',
  323. properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
  324. geometry: {
  325. type: 'Polygon',
  326. coordinates: [
  327. '@@°@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',
  328. ],
  329. encodeOffsets: [[115864, 39336]],
  330. },
  331. },
  332. ],
  333. UTF8Encoding: true,
  334. })
  335. var mapFeatures = echarts.getMap(this.mapName).geoJson.features
  336. mapFeatures.forEach(v => {
  337. // 地区名称
  338. var name = v.properties.name
  339. // 地区经纬度
  340. this.geoCoordMap[name] = v.properties.cp
  341. })
  342. myChart.setOption({
  343. tooltip: {
  344. padding: 15,
  345. enterable: true,
  346. transitionDuration: 1,
  347. formatter: (params, ticket, callback) => {
  348. let tipHtml = `
  349. <div class="tooltip-cont">
  350. <p>新开工:<span>工程建设项目</span></p>
  351. <p>总投资额:<span>${params.data.value}亿</span></p>
  352. <p>当前阶段:<span>可论证阶段</span></p>
  353. <p>时间节点:<span>2021.10-2022.10</span></p>
  354. </div>`
  355. return tipHtml
  356. },
  357. },
  358. visualMap: {
  359. min: 0,
  360. max: 300,
  361. right: 0,
  362. bottom: 0,
  363. text: ['高', '低'],
  364. textStyle: {
  365. color: '#f1f1f1'
  366. },
  367. realtime: false,
  368. calculable: true,
  369. inRange: {
  370. color: ['lightskyblue', '#2754b7']
  371. }
  372. },
  373. geo: {
  374. show: true,
  375. map: 'shanxi',
  376. layoutCenter: ['50%', '50%'], //地图位置
  377. layoutSize: '100%',
  378. label: {
  379. normal: {
  380. show: false,
  381. },
  382. emphasis: {
  383. show: false,
  384. },
  385. },
  386. roam: false,
  387. itemStyle: {
  388. normal: {
  389. areaColor: '#1946a8',
  390. shadowColor: '#1946a8',
  391. borderWidth: 1, //设置外层边框
  392. borderColor: '#1946a8',
  393. shadowOffsetX: 10,
  394. shadowOffsetY: 5,
  395. shadowBlur: 2,
  396. },
  397. emphasis: {
  398. areaColor: '#1946a8',
  399. borderColor: '#d4bc1d',
  400. borderWidth: 2, //设置外层边框
  401. },
  402. },
  403. },
  404. series: [
  405. {
  406. name: '散点',
  407. type: 'scatter',
  408. coordinateSystem: 'geo',
  409. data: this.convertData(data),
  410. symbolSize: function (val) {
  411. return 10
  412. },
  413. label: {
  414. normal: {
  415. formatter: '{b}',
  416. position: [10, 10],
  417. fontSize: 15,
  418. fontWeight: 600,
  419. fontStyle: 'italic',
  420. color: '#fff',
  421. show: true,
  422. },
  423. emphasis: {
  424. show: true,
  425. },
  426. },
  427. itemStyle: {
  428. normal: {
  429. color: '#000',
  430. borderWidth: 2,
  431. borderColor: '#fff',
  432. },
  433. },
  434. },
  435. {
  436. type: 'map',
  437. map: this.mapName,
  438. geoIndex: 0,
  439. aspectScale: 0.75, //长宽比
  440. showLegendSymbol: true, // 存在legend时显示
  441. label: {
  442. normal: {
  443. show: true,
  444. },
  445. emphasis: {
  446. show: false,
  447. textStyle: {
  448. color: '#fff',
  449. },
  450. },
  451. },
  452. roam: true,
  453. itemStyle: {
  454. normal: {
  455. areaColor: '#031525',
  456. borderColor: '#3B5077',
  457. },
  458. emphasis: {
  459. areaColor: '#2B91B7',
  460. },
  461. },
  462. animation: false,
  463. data: data,
  464. },
  465. {
  466. name: '点',
  467. type: 'scatter',
  468. coordinateSystem: 'geo',
  469. zlevel: 6,
  470. },
  471. {
  472. name: 'Top 5',
  473. type: 'effectScatter',
  474. coordinateSystem: 'geo',
  475. data: this.convertData(
  476. data
  477. .sort(function (a, b) {
  478. return b.value - a.value
  479. })
  480. .slice(0, 5)
  481. ),
  482. symbolSize: function (val) {
  483. return 15
  484. },
  485. showEffectOn: 'render',
  486. rippleEffect: {
  487. brushType: 'stroke',
  488. },
  489. hoverAnimation: true,
  490. label: {
  491. normal: {
  492. formatter: '{b}',
  493. position: 'left',
  494. show: false,
  495. },
  496. },
  497. itemStyle: {
  498. normal: {
  499. color: 'yellow',
  500. shadowBlur: 10,
  501. shadowColor: 'yellow',
  502. },
  503. },
  504. zlevel: 1000,
  505. },
  506. {
  507. name: '线路',
  508. type: 'lines',
  509. zlevel: 2,
  510. effect: {
  511. show: true,
  512. period: 4, //箭头指向速度,值越小速度越快
  513. trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
  514. symbol: 'arrow', //箭头图标
  515. symbolSize: 5, //图标大小
  516. },
  517. lineStyle: {
  518. normal: {
  519. color: '#00FFFF',
  520. width: 1,
  521. type: 'dashed',
  522. opacity: 0.5, //尾迹线条透明度
  523. curveness: -0.3, //尾迹线条曲直度
  524. },
  525. },
  526. data: moveLine.normal,
  527. },
  528. ],
  529. })
  530. },
  531. initChartL1 () {
  532. let myChart = echarts.init(document.getElementById("echartL1"));
  533. let option = {
  534. grid: {
  535. top: 35,
  536. right: 40,
  537. left: 60,
  538. bottom: 40,
  539. },
  540. tooltip: {
  541. show: true,
  542. trigger: "axis",
  543. axisPointer: {
  544. // 坐标轴指示器,坐标轴触发有效
  545. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  546. },
  547. },
  548. xAxis: {
  549. data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建设', '汾酒集团', '大地控股'],
  550. axisTick: {
  551. show: false,
  552. },
  553. // x轴的字体颜色
  554. axisLabel: {
  555. rotate: 40,
  556. textStyle: {
  557. color: "white",
  558. },
  559. },
  560. //y轴线的颜色以及宽度
  561. axisLine: {
  562. show: true,
  563. lineStyle: {
  564. color: "#1E5389",
  565. width: 1,
  566. type: "solid",
  567. },
  568. },
  569. },
  570. yAxis: {
  571. // name: '亿元',
  572. nameTextStyle: {//y轴上方单位的颜色
  573. color: '#fff',
  574. },
  575. axisTick: {
  576. lineStyle: {
  577. color: "#18416F",
  578. },
  579. },
  580. // y轴的字体颜色
  581. axisLabel: {
  582. textStyle: {
  583. color: "white",
  584. },
  585. },
  586. splitLine: {
  587. show: false,
  588. lineStyle: {
  589. color: "#204561",
  590. width: 1,
  591. type: "dotted",
  592. },
  593. },
  594. //y轴线的颜色以及宽度
  595. axisLine: {
  596. show: true,
  597. lineStyle: {
  598. color: "#1E5389",
  599. width: 1,
  600. type: "solid",
  601. },
  602. },
  603. },
  604. series: [
  605. {
  606. name: "2022年额度",
  607. type: "bar",
  608. data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569, 534, 753, 864, , 834, 764, 978],
  609. showBackground: false,
  610. backgroundStyle: {
  611. color: "#18416F",
  612. },
  613. barWidth: "10%",
  614. itemStyle: {
  615. barBorderRadius: [10, 10, 0, 0],
  616. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  617. {
  618. offset: 0,
  619. color: "#132543",
  620. }, //柱图渐变色
  621. {
  622. offset: 1,
  623. color: "#897DFF",
  624. },
  625. ]),
  626. },
  627. },
  628. {
  629. name: "2023年额度",
  630. type: "bar",
  631. data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725, 652, 865, 749, 359, 241],
  632. showBackground: false,
  633. backgroundStyle: {
  634. color: "#18416F",
  635. },
  636. barWidth: "10%",
  637. itemStyle: {
  638. barBorderRadius: [10, 10, 0, 0],
  639. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  640. {
  641. offset: 0,
  642. color: "#132543",
  643. }, //柱图渐变色
  644. {
  645. offset: 1,
  646. color: "#FED95B",
  647. },
  648. ]),
  649. },
  650. },
  651. ],
  652. legend: {
  653. data: ["2022年额度", "2023年额度"],
  654. textStyle: {
  655. // 图列内容样式
  656. color: "#fff", // 字体颜色
  657. // fontSize: "10",
  658. },
  659. right: 'center',
  660. icon: "roundRect",
  661. // 小图标的宽高
  662. itemHeight: 5,
  663. },
  664. };
  665. tools.loopShowTooltip(myChart, option, {
  666. nterval: 2000,
  667. loopSeries: true,
  668. })
  669. let that = this
  670. myChart.on('click', function (param) {
  671. console.log(param)
  672. if (param.name == '晋能控股') {
  673. that.showTip2 = true
  674. setTimeout(() => {
  675. that.initChartR4()
  676. that.initChartR5()
  677. })
  678. }
  679. })
  680. myChart.setOption(option);
  681. },
  682. initChartL2 () {
  683. let myChart = echarts.init(this.$refs['echartL2'])
  684. var value = 0.45;
  685. var data = [value];
  686. let option = {
  687. backgroundColor: 'transparent',
  688. title: [
  689. {
  690. text: '450.12亿',
  691. x: '38%',
  692. y: '80%',
  693. textStyle: {
  694. fontSize: 24,
  695. fontWeight: 'bold',
  696. color: '#2CB7E0',
  697. lineHeight: 16,
  698. textAlign: 'center',
  699. },
  700. }
  701. ],
  702. series: [
  703. {
  704. type: 'liquidFill',
  705. radius: '70%',
  706. center: ['50%', '40%'],
  707. color: [
  708. {
  709. type: 'linear',
  710. x: 0,
  711. y: 0,
  712. x2: 0,
  713. y2: 1,
  714. colorStops: [
  715. {
  716. offset: 0,
  717. color: '#446bf5',
  718. },
  719. {
  720. offset: 1,
  721. color: '#2ca3e2',
  722. },
  723. ],
  724. globalCoord: false,
  725. },
  726. ],
  727. data: [value, value], // data个数代表波浪数
  728. backgroundStyle: {
  729. borderWidth: 1,
  730. color: 'RGBA(51, 66, 127, 0.7)',
  731. },
  732. label: {
  733. normal: {
  734. textStyle: {
  735. fontSize: 30,
  736. color: '#fff',
  737. },
  738. },
  739. },
  740. outline: {
  741. // show: false
  742. borderDistance: 0,
  743. itemStyle: {
  744. borderWidth: 2,
  745. borderColor: 'transparent',
  746. },
  747. },
  748. },
  749. ],
  750. }
  751. myChart.setOption(option)
  752. },
  753. initChartL3 () {
  754. let myChart = echarts.init(this.$refs['echartL3'])
  755. let option = {
  756. tooltip: {
  757. trigger: 'axis',
  758. axisPointer: {
  759. type: 'shadow',
  760. },
  761. },
  762. grid: {
  763. top: '22%',
  764. right: '5%',
  765. left: '10%',
  766. bottom: '25%',
  767. },
  768. xAxis: {
  769. data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
  770. axisLine: {
  771. show: true, //隐藏X轴轴线
  772. lineStyle: {
  773. color: '#005094',
  774. width: 1,
  775. },
  776. },
  777. axisTick: {
  778. show: true, //隐藏X轴刻度
  779. },
  780. axisLabel: {
  781. show: true,
  782. rotate: 15,
  783. textStyle: {
  784. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  785. fontSize: 12,
  786. },
  787. },
  788. },
  789. yAxis: [
  790. {
  791. type: 'value',
  792. splitLine: {
  793. show: true,
  794. lineStyle: {
  795. color: '#68b4dd66',
  796. type: 'dashed',
  797. },
  798. },
  799. axisLine: {
  800. show: false
  801. },
  802. axisLabel: {
  803. show: true,
  804. formatter: '{value}',
  805. textStyle: {
  806. color: 'rgba(250,250,250,0.6)',
  807. },
  808. },
  809. nameTextStyle: {
  810. color: '#ebf8ac',
  811. fontSize: 16,
  812. },
  813. },
  814. ],
  815. series: [
  816. {
  817. name: '',
  818. type: 'bar',
  819. barWidth: 15,
  820. itemStyle: {
  821. normal: {
  822. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  823. {
  824. offset: 0,
  825. color: '#69c0ff',
  826. },
  827. {
  828. offset: 1,
  829. color: '#082550',
  830. },
  831. ]),
  832. },
  833. },
  834. data: [10, 20, 30, 40, 50],
  835. markLine: {
  836. symbol: ['none', 'none'],
  837. data: [
  838. {
  839. name: '生存线',
  840. yAxis: 10,
  841. lineStyle: {
  842. color: '#FF8F0A',
  843. },
  844. label: {
  845. formatter: '{b}',
  846. position: 'middle',
  847. color: '#FF8F0A',
  848. fontSize: 12,
  849. },
  850. },
  851. {
  852. name: '发展线',
  853. yAxis: 15,
  854. lineStyle: {
  855. color: '#00EEA2',
  856. },
  857. label: {
  858. formatter: '{b}',
  859. position: 'middle',
  860. color: '#00EEA2',
  861. fontSize: 12,
  862. },
  863. },
  864. ],
  865. label: {
  866. distance: [50, 0],
  867. },
  868. },
  869. },
  870. ],
  871. }
  872. myChart.setOption(option)
  873. tools.loopShowTooltip(myChart, option, {
  874. nterval: 2000,
  875. loopSeries: true,
  876. })
  877. },
  878. initChartL4 () {
  879. let myChart = echarts.init(this.$refs['echartL4'])
  880. let option = {
  881. title: {
  882. text: '产业类型分析',
  883. x: 'center',
  884. y: '0%',
  885. textStyle: {
  886. color: 'rgba(255,255,255,0.6)',
  887. fontSize: 12,
  888. },
  889. },
  890. tooltip: {
  891. trigger: 'item',
  892. },
  893. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  894. legend: {
  895. show: false,
  896. icon: 'circle',
  897. top: 'bottom',
  898. orient: 'vertical',
  899. right: '1%',
  900. textStyle: {
  901. color: '#9DB9EB',
  902. },
  903. },
  904. series: [
  905. {
  906. name: '',
  907. type: 'pie',
  908. radius: ['0%', '70%'],
  909. center: ['50%', '60%'],
  910. itemStyle: {
  911. normal: {
  912. label: {
  913. show: false,
  914. },
  915. },
  916. },
  917. labelLine: {
  918. show: false,
  919. },
  920. data: [
  921. { value: 1048, name: '煤炭' },
  922. { value: 735, name: '火电' },
  923. { value: 580, name: '焦化' },
  924. { value: 484, name: '风电' },
  925. ],
  926. },
  927. ],
  928. }
  929. myChart.setOption(option)
  930. tools.loopShowTooltip(myChart, option, {
  931. nterval: 2000,
  932. loopSeries: true,
  933. })
  934. },
  935. initChartL5 () {
  936. let myChart = echarts.init(this.$refs['echartL5'])
  937. let option = {
  938. title: {
  939. text: '传统产业',
  940. x: 'center',
  941. y: '0%',
  942. textStyle: {
  943. color: 'rgba(255,255,255,0.6)',
  944. fontSize: 12,
  945. },
  946. },
  947. tooltip: {
  948. trigger: 'item',
  949. },
  950. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  951. legend: {
  952. show: false,
  953. icon: 'circle',
  954. top: 'bottom',
  955. orient: 'vertical',
  956. right: '1%',
  957. textStyle: {
  958. color: '#9DB9EB',
  959. },
  960. },
  961. series: [
  962. {
  963. name: '',
  964. type: 'pie',
  965. radius: ['0%', '70%'],
  966. center: ['50%', '60%'],
  967. itemStyle: {
  968. normal: {
  969. label: {
  970. show: false,
  971. },
  972. },
  973. },
  974. labelLine: {
  975. show: false,
  976. },
  977. data: [
  978. { value: 1048, name: '煤炭' },
  979. { value: 735, name: '火电' },
  980. { value: 580, name: '焦化' },
  981. { value: 484, name: '风电' },
  982. ],
  983. },
  984. ],
  985. }
  986. myChart.setOption(option)
  987. tools.loopShowTooltip(myChart, option, {
  988. nterval: 2000,
  989. loopSeries: true,
  990. })
  991. }, initChartL6 () {
  992. let myChart = echarts.init(this.$refs['echartL6'])
  993. let option = {
  994. title: {
  995. text: '战略性新兴产业',
  996. x: 'center',
  997. y: '0%',
  998. textStyle: {
  999. color: 'rgba(255,255,255,0.6)',
  1000. fontSize: 12,
  1001. },
  1002. },
  1003. tooltip: {
  1004. trigger: 'item',
  1005. },
  1006. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  1007. legend: {
  1008. show: false,
  1009. icon: 'circle',
  1010. top: 'bottom',
  1011. orient: 'vertical',
  1012. right: '1%',
  1013. textStyle: {
  1014. color: '#9DB9EB',
  1015. },
  1016. },
  1017. series: [
  1018. {
  1019. name: '',
  1020. type: 'pie',
  1021. radius: ['0%', '70%'],
  1022. center: ['50%', '60%'],
  1023. itemStyle: {
  1024. normal: {
  1025. label: {
  1026. show: false,
  1027. },
  1028. },
  1029. },
  1030. labelLine: {
  1031. show: false,
  1032. },
  1033. data: [
  1034. { value: 1048, name: '煤炭' },
  1035. { value: 735, name: '火电' },
  1036. { value: 580, name: '焦化' },
  1037. { value: 484, name: '风电' },
  1038. ],
  1039. },
  1040. ],
  1041. }
  1042. myChart.setOption(option)
  1043. tools.loopShowTooltip(myChart, option, {
  1044. nterval: 2000,
  1045. loopSeries: true,
  1046. })
  1047. }, initChartL7 () {
  1048. let myChart = echarts.init(this.$refs['echartL7'])
  1049. let option = {
  1050. title: {
  1051. text: '基础产业',
  1052. x: 'center',
  1053. y: '0%',
  1054. textStyle: {
  1055. color: 'rgba(255,255,255,0.6)',
  1056. fontSize: 12,
  1057. },
  1058. },
  1059. tooltip: {
  1060. trigger: 'item',
  1061. },
  1062. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  1063. legend: {
  1064. show: false,
  1065. icon: 'circle',
  1066. top: 'bottom',
  1067. orient: 'vertical',
  1068. right: '1%',
  1069. textStyle: {
  1070. color: '#9DB9EB',
  1071. },
  1072. },
  1073. series: [
  1074. {
  1075. name: '',
  1076. type: 'pie',
  1077. radius: ['0%', '70%'],
  1078. center: ['50%', '60%'],
  1079. itemStyle: {
  1080. normal: {
  1081. label: {
  1082. show: false,
  1083. },
  1084. },
  1085. },
  1086. labelLine: {
  1087. show: false,
  1088. },
  1089. data: [
  1090. { value: 1048, name: '煤炭' },
  1091. { value: 735, name: '火电' },
  1092. { value: 580, name: '焦化' },
  1093. { value: 484, name: '风电' },
  1094. ],
  1095. },
  1096. ],
  1097. }
  1098. myChart.setOption(option)
  1099. tools.loopShowTooltip(myChart, option, {
  1100. nterval: 2000,
  1101. loopSeries: true,
  1102. })
  1103. },
  1104. initChartR4 () {
  1105. let myChart = echarts.init(this.$refs['echartR4'])
  1106. let option = {
  1107. title: {
  1108. text: '2022年的可投资总额',
  1109. x: 'center',
  1110. y: '87%',
  1111. textStyle: {
  1112. color: 'rgba(255,255,255,0.6)',
  1113. fontSize: 12,
  1114. },
  1115. },
  1116. tooltip: {
  1117. trigger: 'item',
  1118. },
  1119. color: ['#69C1FF', '#4B97CC',],
  1120. legend: {
  1121. icon: 'circle',
  1122. top: 'bottom',
  1123. orient: 'vertical',
  1124. right: '1%',
  1125. textStyle: {
  1126. color: '#9DB9EB',
  1127. },
  1128. },
  1129. series: [
  1130. {
  1131. name: '',
  1132. type: 'pie',
  1133. label: {
  1134. normal: {
  1135. show: true,
  1136. position: 'center',
  1137. color: '#4c4a4a',
  1138. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  1139. rich: {
  1140. total: {
  1141. fontSize: 20,
  1142. fontFamily: "微软雅黑",
  1143. color: '#fff'
  1144. },
  1145. active: {
  1146. fontFamily: "微软雅黑",
  1147. fontSize: 15,
  1148. color: '#fff'
  1149. },
  1150. }
  1151. },
  1152. emphasis: {//中间文字显示
  1153. show: true,
  1154. }
  1155. },
  1156. radius: ['40%', '60%'],
  1157. center: ['50%', '45%'],
  1158. itemStyle: {
  1159. normal: {
  1160. label: {
  1161. show: false,
  1162. },
  1163. },
  1164. },
  1165. labelLine: {
  1166. show: false,
  1167. },
  1168. data: [
  1169. { value: 1048, name: '已使用额度' },
  1170. { value: 735, name: '可使用额度' }
  1171. ],
  1172. },
  1173. ],
  1174. }
  1175. myChart.setOption(option)
  1176. tools.loopShowTooltip(myChart, option, {
  1177. nterval: 2000,
  1178. loopSeries: true,
  1179. })
  1180. },
  1181. initChartR5 () {
  1182. let myChart = echarts.init(this.$refs['echartR5'])
  1183. let option = {
  1184. title: {
  1185. text: '2023年的可投资总额',
  1186. x: 'center',
  1187. y: '87%',
  1188. textStyle: {
  1189. color: 'rgba(255,255,255,0.6)',
  1190. fontSize: 12,
  1191. },
  1192. },
  1193. tooltip: {
  1194. trigger: 'item',
  1195. },
  1196. color: ['#69C1FF', '#4B97CC',],
  1197. legend: {
  1198. icon: 'circle',
  1199. top: 'bottom',
  1200. orient: 'vertical',
  1201. right: '1%',
  1202. textStyle: {
  1203. color: '#9DB9EB',
  1204. },
  1205. },
  1206. series: [
  1207. {
  1208. name: '',
  1209. type: 'pie',
  1210. label: {
  1211. normal: {
  1212. show: true,
  1213. position: 'center',
  1214. top: '50',
  1215. color: '#4c4a4a',
  1216. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  1217. rich: {
  1218. total: {
  1219. fontSize: 20,
  1220. fontFamily: "微软雅黑",
  1221. color: '#fff'
  1222. },
  1223. active: {
  1224. fontFamily: "微软雅黑",
  1225. fontSize: 15,
  1226. color: '#fff'
  1227. },
  1228. }
  1229. },
  1230. emphasis: {//中间文字显示
  1231. show: true,
  1232. }
  1233. },
  1234. radius: ['40%', '60%'],
  1235. center: ['50%', '45%'],
  1236. itemStyle: {
  1237. normal: {
  1238. label: {
  1239. show: false,
  1240. },
  1241. },
  1242. },
  1243. labelLine: {
  1244. show: false,
  1245. },
  1246. data: [
  1247. { value: 1048, name: '已使用额度' },
  1248. { value: 735, name: '可使用额度' }
  1249. ],
  1250. },
  1251. ],
  1252. }
  1253. myChart.setOption(option)
  1254. tools.loopShowTooltip(myChart, option, {
  1255. nterval: 2000,
  1256. loopSeries: true,
  1257. })
  1258. },
  1259. initChartR1 () {
  1260. let myChart = echarts.init(this.$refs['echartR1'])
  1261. let option = {
  1262. title: {
  1263. text: '储备项目产业分布',
  1264. x: 'center',
  1265. y: '87%',
  1266. textStyle: {
  1267. color: 'rgba(255,255,255,0.6)',
  1268. fontSize: 12,
  1269. },
  1270. },
  1271. tooltip: {
  1272. trigger: 'item',
  1273. },
  1274. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  1275. legend: {
  1276. show: false,
  1277. icon: 'circle',
  1278. top: 'bottom',
  1279. orient: 'vertical',
  1280. right: '1%',
  1281. textStyle: {
  1282. color: '#9DB9EB',
  1283. },
  1284. },
  1285. series: [
  1286. {
  1287. name: '',
  1288. type: 'pie',
  1289. radius: ['40%', '60%'],
  1290. center: ['50%', '45%'],
  1291. itemStyle: {
  1292. normal: {
  1293. label: {
  1294. show: false,
  1295. },
  1296. },
  1297. },
  1298. labelLine: {
  1299. show: false,
  1300. },
  1301. data: [
  1302. { value: 1048, name: '煤炭' },
  1303. { value: 735, name: '火电' },
  1304. { value: 580, name: '焦化' },
  1305. { value: 484, name: '风电' },
  1306. ],
  1307. },
  1308. ],
  1309. }
  1310. myChart.setOption(option)
  1311. tools.loopShowTooltip(myChart, option, {
  1312. nterval: 2000,
  1313. loopSeries: true,
  1314. })
  1315. },
  1316. initChartR2 () {
  1317. let myChart = echarts.init(this.$refs['echartR2'])
  1318. let option = {
  1319. title: {
  1320. text: '储备项目产业分布',
  1321. x: 'center',
  1322. y: '87%',
  1323. textStyle: {
  1324. color: 'rgba(255,255,255,0.6)',
  1325. fontSize: 12,
  1326. },
  1327. },
  1328. tooltip: {
  1329. trigger: 'item',
  1330. },
  1331. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  1332. legend: {
  1333. show: false,
  1334. icon: 'circle',
  1335. top: 'bottom',
  1336. orient: 'vertical',
  1337. right: '1%',
  1338. textStyle: {
  1339. color: '#9DB9EB',
  1340. },
  1341. },
  1342. series: [
  1343. {
  1344. name: '',
  1345. type: 'pie',
  1346. radius: ['40%', '60%'],
  1347. center: ['50%', '45%'],
  1348. itemStyle: {
  1349. normal: {
  1350. label: {
  1351. show: false,
  1352. },
  1353. },
  1354. },
  1355. labelLine: {
  1356. show: false,
  1357. },
  1358. data: [
  1359. { value: 1048, name: '煤炭' },
  1360. { value: 735, name: '火电' },
  1361. { value: 580, name: '焦化' },
  1362. { value: 484, name: '风电' },
  1363. ],
  1364. },
  1365. ],
  1366. }
  1367. myChart.setOption(option)
  1368. tools.loopShowTooltip(myChart, option, {
  1369. nterval: 2000,
  1370. loopSeries: true,
  1371. })
  1372. },
  1373. initChartR3 () {
  1374. let myChart = echarts.init(this.$refs['echartR3'])
  1375. let option = {
  1376. title: {
  1377. text: '股权类',
  1378. textStyle: {
  1379. color: '#69C0FF',
  1380. fontSize: 16,
  1381. fontWeight: 500
  1382. },
  1383. top: '10',
  1384. left: '10'
  1385. },
  1386. textStyle: {
  1387. color: '#fff',
  1388. },
  1389. tooltip: {
  1390. trigger: "axis",
  1391. formatter: function(params) {
  1392. 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[0].data[3] + '亿元';
  1393. return tip
  1394. },
  1395. axisPointer: {
  1396. lineStyle: {
  1397. type: 'dashed',
  1398. width: 2,
  1399. color: 'rgba(255,255,255,0.6)'
  1400. },
  1401. animation: true
  1402. }
  1403. },
  1404. grid: {
  1405. top: '25%',
  1406. right: '5%',
  1407. left: '15%',
  1408. bottom: '15%',
  1409. },
  1410. yAxis: {
  1411. data: ['备案', '特别监管'],
  1412. splitLine: {
  1413. show: true,
  1414. lineStyle: {
  1415. color: '#68b4dd66',
  1416. type: 'dashed',
  1417. },
  1418. },
  1419. axisLine: {
  1420. show: false
  1421. },
  1422. axisLabel: {
  1423. show: true,
  1424. formatter: '{value}',
  1425. textStyle: {
  1426. color: 'rgba(250,250,250,0.6)',
  1427. },
  1428. },
  1429. nameTextStyle: {
  1430. color: '#ebf8ac',
  1431. fontSize: 16,
  1432. },
  1433. },
  1434. xAxis: {
  1435. data: ['项目储备', '项目立项','可研论证', '投资决策'],
  1436. axisLine: {
  1437. show: true, //隐藏X轴轴线
  1438. lineStyle: {
  1439. color: '#005094',
  1440. width: 1,
  1441. },
  1442. },
  1443. axisTick: {
  1444. show: false, //隐藏X轴刻度
  1445. },
  1446. axisLabel: {
  1447. show: true,
  1448. textStyle: {
  1449. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  1450. fontSize: 12,
  1451. },
  1452. },
  1453. },
  1454. series: [
  1455. {
  1456. name: '',
  1457. type: 'scatter',
  1458. symbol: 'circle',
  1459. symbolSize: function (data) {
  1460. return Math.sqrt(data[2]) * 0.5;
  1461. },
  1462. label: {
  1463. emphasis: {
  1464. show: true,
  1465. formatter: function (param) {
  1466. return param.data[2];
  1467. },
  1468. position: 'top'
  1469. }
  1470. },
  1471. itemStyle: {
  1472. normal: {
  1473. color: '#40A9FF'
  1474. }
  1475. },
  1476. data: [
  1477. ['项目储备', '特别监管', 1400, 100],
  1478. ['项目立项', '特别监管', 1500, 90],
  1479. ['可研论证', '特别监管', 500, 80],
  1480. ['投资决策', '特别监管', 3000, 70],
  1481. ]
  1482. },
  1483. {
  1484. name: '',
  1485. type: 'scatter',
  1486. symbol: 'circle',
  1487. symbolSize: function (data) {
  1488. return Math.sqrt(data[2]) * 0.5;
  1489. },
  1490. label: {
  1491. emphasis: {
  1492. show: true,
  1493. formatter: function (param) {
  1494. return param.data[2];
  1495. },
  1496. position: 'top'
  1497. }
  1498. },
  1499. itemStyle: {
  1500. normal: {
  1501. color: '#45DAD1'
  1502. }
  1503. },
  1504. data: [
  1505. ['项目储备', '备案', 200, 100],
  1506. ['项目立项', '备案', 1500, 90],
  1507. ['可研论证', '备案', 2500, 80],
  1508. ['投资决策', '备案', 3000, 70],
  1509. ]
  1510. },
  1511. ]
  1512. }
  1513. myChart.setOption(option)
  1514. tools.loopShowTooltip(myChart, option, {
  1515. nterval: 2000,
  1516. loopSeries: true,
  1517. })
  1518. },
  1519. initChartR6 () {
  1520. let myChart = echarts.init(this.$refs['echartR6'])
  1521. let option = {
  1522. title: {
  1523. text: '固定资产',
  1524. textStyle: {
  1525. color: '#69C0FF',
  1526. fontSize: 16,
  1527. fontWeight: 500
  1528. },
  1529. top: '10',
  1530. left: '10'
  1531. },
  1532. textStyle: {
  1533. color: '#fff',
  1534. },
  1535. tooltip: {
  1536. trigger: "axis",
  1537. formatter: function(params) {
  1538. 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[0].data[3] + '亿元';
  1539. return tip
  1540. },
  1541. axisPointer: {
  1542. lineStyle: {
  1543. type: 'dashed',
  1544. width: 2,
  1545. color: 'rgba(255,255,255,0.6)'
  1546. },
  1547. animation: true
  1548. }
  1549. },
  1550. grid: {
  1551. top: '25%',
  1552. right: '5%',
  1553. left: '15%',
  1554. bottom: '15%',
  1555. },
  1556. yAxis: {
  1557. data: ['备案', '特别监管'],
  1558. splitLine: {
  1559. show: true,
  1560. lineStyle: {
  1561. color: '#68b4dd66',
  1562. type: 'dashed',
  1563. },
  1564. },
  1565. axisLine: {
  1566. show: false
  1567. },
  1568. axisLabel: {
  1569. show: true,
  1570. formatter: '{value}',
  1571. textStyle: {
  1572. color: 'rgba(250,250,250,0.6)',
  1573. },
  1574. },
  1575. nameTextStyle: {
  1576. color: '#ebf8ac',
  1577. fontSize: 16,
  1578. },
  1579. },
  1580. xAxis: {
  1581. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  1582. axisLine: {
  1583. show: true, //隐藏X轴轴线
  1584. lineStyle: {
  1585. color: '#005094',
  1586. width: 1,
  1587. },
  1588. },
  1589. axisTick: {
  1590. show: false, //隐藏X轴刻度
  1591. },
  1592. axisLabel: {
  1593. show: true,
  1594. textStyle: {
  1595. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  1596. fontSize: 12,
  1597. },
  1598. },
  1599. },
  1600. series: [
  1601. {
  1602. name: '特别监管',
  1603. type: 'scatter',
  1604. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  1605. symbolSize: function (data) {
  1606. return Math.sqrt(data[2]) * 0.5;
  1607. },
  1608. label: {
  1609. emphasis: {
  1610. show: true,
  1611. formatter: function (param) {
  1612. return param.data[2];
  1613. },
  1614. position: 'top'
  1615. }
  1616. },
  1617. itemStyle: {
  1618. normal: {
  1619. color: '#40A9FF'
  1620. }
  1621. },
  1622. data: [
  1623. ['项目储备', '特别监管', 1400, 100],
  1624. ['项目立项', '特别监管', 1500, 90],
  1625. ['可研论证', '特别监管', 500, 80],
  1626. ['投资决策', '特别监管', 3000, 70],
  1627. ]
  1628. },
  1629. {
  1630. name: '备案',
  1631. type: 'scatter',
  1632. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  1633. symbolSize: function (data) {
  1634. return Math.sqrt(data[2]) * 0.5;
  1635. },
  1636. label: {
  1637. emphasis: {
  1638. show: true,
  1639. formatter: function (param) {
  1640. return param.data[2];
  1641. },
  1642. position: 'top'
  1643. }
  1644. },
  1645. itemStyle: {
  1646. normal: {
  1647. color: '#45DAD1'
  1648. }
  1649. },
  1650. data: [
  1651. ['项目储备', '备案', 200, 100],
  1652. ['项目立项', '备案', 1500, 90],
  1653. ['可研论证', '备案', 2500, 80],
  1654. ['投资决策', '备案', 3000, 70],
  1655. ]
  1656. },
  1657. ]
  1658. }
  1659. myChart.setOption(option)
  1660. tools.loopShowTooltip(myChart, option, {
  1661. nterval: 2000,
  1662. loopSeries: true,
  1663. })
  1664. }
  1665. },
  1666. })