investHome2.js 54 KB

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