investHome2.js 54 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789
  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, 843, 987, 126],
  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, 643, 675, 743],
  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. itemWidth: 10,
  968. itemHeight: 10
  969. },
  970. series: [
  971. {
  972. name: '',
  973. type: 'pie',
  974. // radius: ['0%', '70%'],
  975. radius: ['40%', '55%'],
  976. center: ['45%', '55%'],
  977. itemStyle: {
  978. normal: {
  979. borderColor: 'rgba(1,31,64,0.7)',
  980. borderWidth: 6,
  981. label: {
  982. show: false,
  983. },
  984. },
  985. },
  986. labelLine: {
  987. show: false,
  988. },
  989. data: [
  990. { value: 1048, name: '煤炭' },
  991. { value: 735, name: '火电' },
  992. { value: 580, name: '焦化' },
  993. { value: 484, name: '风电' },
  994. ],
  995. },
  996. ],
  997. }
  998. myChart.setOption(option)
  999. tools.loopShowTooltip(myChart, option, {
  1000. nterval: 2000,
  1001. loopSeries: true,
  1002. })
  1003. },
  1004. initChartL5 () {
  1005. let myChart = echarts.init(this.$refs['echartL5'])
  1006. let option = {
  1007. title: {
  1008. text: '传统产业',
  1009. x: 'center',
  1010. y: '0%',
  1011. textStyle: {
  1012. color: 'rgba(255,255,255,0.6)',
  1013. fontSize: 12,
  1014. },
  1015. },
  1016. tooltip: {
  1017. trigger: 'item',
  1018. formatter: '{b}' + ':' + '{c}' + '<br/>' + '占比:' + '{d}%',
  1019. // position: ['30%', '87%'],
  1020. },
  1021. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  1022. legend: {
  1023. show: true,
  1024. icon: 'circle',
  1025. top: 'bottom',
  1026. orient: 'vertical',
  1027. right: '-3%',
  1028. textStyle: {
  1029. color: '#9DB9EB',
  1030. fontSize: '10px'
  1031. },
  1032. itemWidth: 10,
  1033. itemHeight: 10
  1034. },
  1035. series: [
  1036. {
  1037. name: '',
  1038. type: 'pie',
  1039. // radius: ['0%', '70%'],
  1040. radius: ['40%', '55%'],
  1041. center: ['45%', '55%'],
  1042. itemStyle: {
  1043. normal: {
  1044. borderColor: 'rgba(1,31,64,0.7)',
  1045. borderWidth: 6,
  1046. label: {
  1047. show: false,
  1048. },
  1049. },
  1050. },
  1051. labelLine: {
  1052. show: false,
  1053. },
  1054. data: [
  1055. { value: 1048, name: '煤炭' },
  1056. { value: 735, name: '火电' },
  1057. { value: 580, name: '焦化' },
  1058. { value: 484, name: '风电' },
  1059. ],
  1060. },
  1061. ],
  1062. }
  1063. myChart.setOption(option)
  1064. tools.loopShowTooltip(myChart, option, {
  1065. nterval: 2000,
  1066. loopSeries: true,
  1067. })
  1068. }, initChartL6 () {
  1069. let myChart = echarts.init(this.$refs['echartL6'])
  1070. let option = {
  1071. title: {
  1072. text: '战略性新兴产业',
  1073. x: 'center',
  1074. y: '0%',
  1075. textStyle: {
  1076. color: 'rgba(255,255,255,0.6)',
  1077. fontSize: 12,
  1078. },
  1079. },
  1080. tooltip: {
  1081. trigger: 'item',
  1082. formatter: '{b}' + ':' + '{c}' + '<br/>' + '占比:' + '{d}%',
  1083. // position: ['30%', '87%'],
  1084. },
  1085. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  1086. legend: {
  1087. show: true,
  1088. icon: 'circle',
  1089. top: 'bottom',
  1090. orient: 'vertical',
  1091. right: '-3%',
  1092. textStyle: {
  1093. color: '#9DB9EB',
  1094. fontSize: '10px'
  1095. },
  1096. itemWidth: 10,
  1097. itemHeight: 10
  1098. },
  1099. series: [
  1100. {
  1101. name: '',
  1102. type: 'pie',
  1103. // radius: ['0%', '70%'],
  1104. radius: ['40%', '55%'],
  1105. center: ['45%', '55%'],
  1106. itemStyle: {
  1107. normal: {
  1108. borderColor: 'rgba(1,31,64,0.7)',
  1109. borderWidth: 6,
  1110. label: {
  1111. show: false,
  1112. },
  1113. },
  1114. },
  1115. labelLine: {
  1116. show: false,
  1117. },
  1118. data: [
  1119. { value: 1048, name: '煤炭' },
  1120. { value: 735, name: '火电' },
  1121. { value: 580, name: '焦化' },
  1122. { value: 484, name: '风电' },
  1123. ],
  1124. },
  1125. ],
  1126. }
  1127. myChart.setOption(option)
  1128. tools.loopShowTooltip(myChart, option, {
  1129. nterval: 2000,
  1130. loopSeries: true,
  1131. })
  1132. }, initChartL7 () {
  1133. let myChart = echarts.init(this.$refs['echartL7'])
  1134. let option = {
  1135. title: {
  1136. text: '基础产业',
  1137. x: 'center',
  1138. y: '0%',
  1139. textStyle: {
  1140. color: 'rgba(255,255,255,0.6)',
  1141. fontSize: 12,
  1142. },
  1143. },
  1144. tooltip: {
  1145. trigger: 'item',
  1146. formatter: '{b}' + ':' + '{c}' + '<br/>' + '占比:' + '{d}%',
  1147. // position: ['30%', '87%'],
  1148. },
  1149. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  1150. legend: {
  1151. show: true,
  1152. icon: 'circle',
  1153. top: 'bottom',
  1154. orient: 'vertical',
  1155. right: '-3%',
  1156. textStyle: {
  1157. color: '#9DB9EB',
  1158. fontSize: '10px'
  1159. },
  1160. itemWidth: 10,
  1161. itemHeight: 10
  1162. },
  1163. series: [
  1164. {
  1165. name: '',
  1166. type: 'pie',
  1167. // radius: ['0%', '70%'],
  1168. radius: ['40%', '55%'],
  1169. center: ['45%', '55%'],
  1170. itemStyle: {
  1171. normal: {
  1172. borderColor: 'rgba(1,31,64,0.7)',
  1173. borderWidth: 6,
  1174. label: {
  1175. show: false,
  1176. },
  1177. },
  1178. },
  1179. labelLine: {
  1180. show: false,
  1181. },
  1182. data: [
  1183. { value: 1048, name: '煤炭' },
  1184. { value: 735, name: '火电' },
  1185. { value: 580, name: '焦化' },
  1186. { value: 484, name: '风电' },
  1187. ],
  1188. },
  1189. ],
  1190. }
  1191. myChart.setOption(option)
  1192. tools.loopShowTooltip(myChart, option, {
  1193. nterval: 2000,
  1194. loopSeries: true,
  1195. })
  1196. },
  1197. initChartR4 () {
  1198. let myChart = echarts.init(this.$refs['echartR4'])
  1199. let option = {
  1200. title: {
  1201. text: '2022年的可投资总额',
  1202. x: 'center',
  1203. y: '87%',
  1204. textStyle: {
  1205. color: 'rgba(255,255,255,0.6)',
  1206. fontSize: 12,
  1207. },
  1208. },
  1209. tooltip: {
  1210. trigger: 'item',
  1211. },
  1212. color: ['#69C1FF', '#4B97CC',],
  1213. legend: {
  1214. icon: 'circle',
  1215. top: 'bottom',
  1216. orient: 'vertical',
  1217. right: '1%',
  1218. textStyle: {
  1219. color: '#9DB9EB',
  1220. },
  1221. },
  1222. series: [
  1223. {
  1224. name: '',
  1225. type: 'pie',
  1226. label: {
  1227. normal: {
  1228. show: true,
  1229. position: 'center',
  1230. color: '#4c4a4a',
  1231. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  1232. rich: {
  1233. total: {
  1234. fontSize: 20,
  1235. fontFamily: "微软雅黑",
  1236. color: '#fff'
  1237. },
  1238. active: {
  1239. fontFamily: "微软雅黑",
  1240. fontSize: 15,
  1241. color: '#fff'
  1242. },
  1243. }
  1244. },
  1245. emphasis: {//中间文字显示
  1246. show: true,
  1247. }
  1248. },
  1249. radius: ['40%', '60%'],
  1250. center: ['50%', '45%'],
  1251. itemStyle: {
  1252. normal: {
  1253. label: {
  1254. show: false,
  1255. },
  1256. },
  1257. },
  1258. labelLine: {
  1259. show: false,
  1260. },
  1261. data: [
  1262. { value: 1048, name: '已使用额度' },
  1263. { value: 735, name: '可使用额度' }
  1264. ],
  1265. },
  1266. ],
  1267. }
  1268. myChart.setOption(option)
  1269. tools.loopShowTooltip(myChart, option, {
  1270. nterval: 2000,
  1271. loopSeries: true,
  1272. })
  1273. },
  1274. initChartR5 () {
  1275. let myChart = echarts.init(this.$refs['echartR5'])
  1276. let option = {
  1277. title: {
  1278. text: '2023年的可投资总额',
  1279. x: 'center',
  1280. y: '87%',
  1281. textStyle: {
  1282. color: 'rgba(255,255,255,0.6)',
  1283. fontSize: 12,
  1284. },
  1285. },
  1286. tooltip: {
  1287. trigger: 'item',
  1288. },
  1289. color: ['#69C1FF', '#4B97CC',],
  1290. legend: {
  1291. icon: 'circle',
  1292. top: 'bottom',
  1293. orient: 'vertical',
  1294. right: '1%',
  1295. textStyle: {
  1296. color: '#9DB9EB',
  1297. },
  1298. },
  1299. series: [
  1300. {
  1301. name: '',
  1302. type: 'pie',
  1303. label: {
  1304. normal: {
  1305. show: true,
  1306. position: 'center',
  1307. top: '50',
  1308. color: '#4c4a4a',
  1309. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  1310. rich: {
  1311. total: {
  1312. fontSize: 20,
  1313. fontFamily: "微软雅黑",
  1314. color: '#fff'
  1315. },
  1316. active: {
  1317. fontFamily: "微软雅黑",
  1318. fontSize: 15,
  1319. color: '#fff'
  1320. },
  1321. }
  1322. },
  1323. emphasis: {//中间文字显示
  1324. show: true,
  1325. }
  1326. },
  1327. radius: ['40%', '60%'],
  1328. center: ['50%', '45%'],
  1329. itemStyle: {
  1330. normal: {
  1331. label: {
  1332. show: false,
  1333. },
  1334. },
  1335. },
  1336. labelLine: {
  1337. show: false,
  1338. },
  1339. data: [
  1340. { value: 1048, name: '已使用额度' },
  1341. { value: 735, name: '可使用额度' }
  1342. ],
  1343. },
  1344. ],
  1345. }
  1346. myChart.setOption(option)
  1347. tools.loopShowTooltip(myChart, option, {
  1348. nterval: 2000,
  1349. loopSeries: true,
  1350. })
  1351. },
  1352. initChartR1 () {
  1353. let myChart = echarts.init(this.$refs['echartR1'])
  1354. let option = {
  1355. title: {
  1356. text: '产业类别分析',
  1357. x: 'center',
  1358. y: '87%',
  1359. textStyle: {
  1360. color: 'rgba(255,255,255,0.6)',
  1361. fontSize: 12,
  1362. },
  1363. },
  1364. tooltip: {
  1365. trigger: 'item',
  1366. formatter: '{b}' + ':' + '{c}' + '<br/>' + '占比:' + '{d}%',
  1367. // position: ['-5%', '95%'],
  1368. },
  1369. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  1370. legend: {
  1371. show: true,
  1372. icon: 'circle',
  1373. top: 'bottom',
  1374. orient: 'vertical',
  1375. right: '-3%',
  1376. textStyle: {
  1377. color: '#9DB9EB',
  1378. fontSize: '10px'
  1379. },
  1380. itemWidth: 10,
  1381. itemHeight: 10
  1382. },
  1383. series: [
  1384. {
  1385. name: '',
  1386. type: 'pie',
  1387. radius: ['40%', '60%'],
  1388. center: ['50%', '45%'],
  1389. itemStyle: {
  1390. normal: {
  1391. borderColor: 'rgba(1,31,64,0.7)',
  1392. borderWidth: 6,
  1393. label: {
  1394. show: false,
  1395. },
  1396. },
  1397. },
  1398. labelLine: {
  1399. show: false,
  1400. },
  1401. data: [
  1402. { value: 665.81, name: '主业' },
  1403. { value: 735, name: '辅业' },
  1404. { value: 735, name: '技改' }
  1405. ],
  1406. },
  1407. ],
  1408. }
  1409. myChart.setOption(option)
  1410. tools.loopShowTooltip(myChart, option, {
  1411. nterval: 2000,
  1412. loopSeries: true,
  1413. })
  1414. },
  1415. initChartR2 () {
  1416. let myChart = echarts.init(this.$refs['echartR2'])
  1417. let option = {
  1418. title: {
  1419. text: '项目阶段分析',
  1420. x: 'center',
  1421. y: '87%',
  1422. textStyle: {
  1423. color: 'rgba(255,255,255,0.6)',
  1424. fontSize: 12,
  1425. },
  1426. },
  1427. tooltip: {
  1428. trigger: 'item',
  1429. formatter: '{b}' + ':' + '{c}' + '<br/>' + '占比:' + '{d}%',
  1430. // position: ['-5%', '95%'],
  1431. },
  1432. color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
  1433. legend: {
  1434. show: true,
  1435. icon: 'circle',
  1436. top: 'bottom',
  1437. orient: 'vertical',
  1438. right: '-3%',
  1439. textStyle: {
  1440. color: '#9DB9EB',
  1441. fontSize: '10px'
  1442. },
  1443. itemWidth: 10,
  1444. itemHeight: 10
  1445. },
  1446. series: [
  1447. {
  1448. name: '',
  1449. type: 'pie',
  1450. radius: ['40%', '60%'],
  1451. center: ['50%', '45%'],
  1452. itemStyle: {
  1453. normal: {
  1454. borderColor: 'rgba(1,31,64,0.7)',
  1455. borderWidth: 6,
  1456. label: {
  1457. show: false,
  1458. },
  1459. },
  1460. },
  1461. labelLine: {
  1462. show: false,
  1463. },
  1464. data: [
  1465. { value: 1048, name: '煤炭' },
  1466. { value: 735, name: '火电' },
  1467. { value: 580, name: '焦化' },
  1468. { value: 484, name: '风电' },
  1469. ],
  1470. },
  1471. ],
  1472. }
  1473. myChart.setOption(option)
  1474. tools.loopShowTooltip(myChart, option, {
  1475. nterval: 2000,
  1476. loopSeries: true,
  1477. })
  1478. },
  1479. initChartR3 () {
  1480. let myChart = echarts.init(this.$refs['echartR3'])
  1481. // let option = {
  1482. // title: {
  1483. // text: '固定资产项目',
  1484. // textStyle: {
  1485. // color: '#69C0FF',
  1486. // },
  1487. // top: '10',
  1488. // left: '10'
  1489. // },
  1490. // textStyle: {
  1491. // color: '#fff',
  1492. // },
  1493. // tooltip: {
  1494. // trigger: "axis",
  1495. // axisPointer: {
  1496. // lineStyle: {
  1497. // type: 'dashed',
  1498. // width: 2,
  1499. // color: 'rgba(255,255,255,0.6)'
  1500. // },
  1501. // animation: true
  1502. // }
  1503. // },
  1504. // grid: {
  1505. // top: '25%',
  1506. // right: '5%',
  1507. // left: '10%',
  1508. // bottom: '0',
  1509. // },
  1510. // visualMap: {
  1511. // type: 'piecewise',
  1512. // top: 'top',
  1513. // min: 0,
  1514. // right: 100,
  1515. // textStyle: {
  1516. // color: 'white',
  1517. // },
  1518. // // pieces: ['固定投资累类', '股权及其他类']
  1519. // pieces: [{
  1520. // label: '固定资产类',
  1521. // color: 'orange'
  1522. // }, {
  1523. // label: '股权及其他类',
  1524. // color: '#6b61a8'
  1525. // }]
  1526. // },
  1527. // yAxis: {
  1528. // data: ['批量备案', '特别监管'],
  1529. // splitLine: {
  1530. // show: true,
  1531. // lineStyle: {
  1532. // color: '#68b4dd66',
  1533. // type: 'dashed',
  1534. // },
  1535. // },
  1536. // axisLine: {
  1537. // show: false
  1538. // },
  1539. // axisLabel: {
  1540. // show: true,
  1541. // formatter: '{value}',
  1542. // textStyle: {
  1543. // color: 'rgba(250,250,250,0.6)',
  1544. // },
  1545. // },
  1546. // nameTextStyle: {
  1547. // color: '#ebf8ac',
  1548. // fontSize: 16,
  1549. // },
  1550. // },
  1551. // xAxis: {
  1552. // data: ['项目储备', '项目立项', '项目可研', '可研论证', '投资决策'],
  1553. // axisLine: {
  1554. // show: true, //隐藏X轴轴线
  1555. // lineStyle: {
  1556. // color: '#005094',
  1557. // width: 1,
  1558. // },
  1559. // },
  1560. // axisTick: {
  1561. // show: false, //隐藏X轴刻度
  1562. // },
  1563. // axisLabel: {
  1564. // show: true,
  1565. // textStyle: {
  1566. // color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  1567. // fontSize: 12,
  1568. // },
  1569. // },
  1570. // },
  1571. // series: [
  1572. // {
  1573. // name: '批量备案',
  1574. // type: 'scatter',
  1575. // symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  1576. // symbolSize: function (data) {
  1577. // return Math.sqrt(data[2]) * 0.5;
  1578. // },
  1579. // label: {
  1580. // emphasis: {
  1581. // show: true,
  1582. // formatter: function (param) {
  1583. // return param.data[2];
  1584. // },
  1585. // position: 'top'
  1586. // }
  1587. // },
  1588. // itemStyle: {
  1589. // normal: {
  1590. // color: '#45DAD1'
  1591. // }
  1592. // },
  1593. // data: [
  1594. // ['项目储备', '批量备案', 200],
  1595. // ['项目立项', '批量备案', 1500],
  1596. // ['项目可研', '批量备案', 2000],
  1597. // ['可研论证', '批量备案', 2500],
  1598. // ['投资决策', '批量备案', 3000],
  1599. // ]
  1600. // },
  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],
  1624. // ['项目立项', '特别监管', 1500],
  1625. // ['项目可研', '特别监管', 5500],
  1626. // ['可研论证', '特别监管', 500],
  1627. // ]
  1628. // }
  1629. // ]
  1630. // }
  1631. let option = {
  1632. title: {
  1633. text: '',
  1634. textStyle: {
  1635. color: '#69C0FF',
  1636. },
  1637. top: '10',
  1638. left: '10'
  1639. },
  1640. textStyle: {
  1641. color: '#fff',
  1642. },
  1643. tooltip: {
  1644. trigger: "axis",
  1645. axisPointer: {
  1646. lineStyle: {
  1647. type: 'dashed',
  1648. width: 2,
  1649. color: 'rgba(255,255,255,0.6)'
  1650. },
  1651. animation: true
  1652. }
  1653. },
  1654. grid: {
  1655. top: '22%',
  1656. right: '5%',
  1657. left: '10%',
  1658. bottom: '15%',
  1659. },
  1660. visualMap: {
  1661. type: 'piecewise',
  1662. top: 'top',
  1663. min: 0,
  1664. right: 100,
  1665. textStyle: {
  1666. color: 'white',
  1667. },
  1668. pieces: [{
  1669. label: '股权及其他类',
  1670. color: 'red'
  1671. }, {
  1672. label: '固定资产类',
  1673. }]
  1674. },
  1675. yAxis: {
  1676. data: ['批量备案', '特别监管'],
  1677. splitLine: {
  1678. show: true,
  1679. lineStyle: {
  1680. color: '#68b4dd66',
  1681. type: 'dashed',
  1682. },
  1683. },
  1684. axisLine: {
  1685. show: false
  1686. },
  1687. axisLabel: {
  1688. show: true,
  1689. formatter: '{value}',
  1690. textStyle: {
  1691. color: 'rgba(250,250,250,0.6)',
  1692. },
  1693. },
  1694. nameTextStyle: {
  1695. color: '#ebf8ac',
  1696. fontSize: 16,
  1697. },
  1698. },
  1699. xAxis: {
  1700. data: ['项目储备', '项目立项', '项目可研', '可研论证', '投资决策'],
  1701. axisLine: {
  1702. show: true, //隐藏X轴轴线
  1703. lineStyle: {
  1704. color: '#005094',
  1705. width: 1,
  1706. },
  1707. },
  1708. axisTick: {
  1709. show: false, //隐藏X轴刻度
  1710. },
  1711. axisLabel: {
  1712. show: true,
  1713. textStyle: {
  1714. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  1715. fontSize: 12,
  1716. },
  1717. },
  1718. },
  1719. series: [
  1720. {
  1721. name: '批量备案',
  1722. type: 'scatter',
  1723. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  1724. symbolSize: function (data) {
  1725. return Math.sqrt(data[2]) * 0.5;
  1726. },
  1727. label: {
  1728. emphasis: {
  1729. show: true,
  1730. formatter: function (param) {
  1731. return param.data[2];
  1732. },
  1733. position: 'top'
  1734. }
  1735. },
  1736. itemStyle: {
  1737. normal: {
  1738. color: '#45DAD1'
  1739. }
  1740. },
  1741. data: [
  1742. [1400, 123],
  1743. [1500, 532],
  1744. [5500, 435],
  1745. [500, 534],
  1746. ]
  1747. },
  1748. {
  1749. name: '特别监管',
  1750. type: 'scatter',
  1751. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  1752. symbolSize: function (data) {
  1753. return Math.sqrt(data[2]) * 0.5;
  1754. },
  1755. label: {
  1756. emphasis: {
  1757. show: true,
  1758. formatter: function (param) {
  1759. return param.data[2];
  1760. },
  1761. position: 'top'
  1762. }
  1763. },
  1764. itemStyle: {
  1765. normal: {
  1766. color: '#40A9FF'
  1767. }
  1768. },
  1769. data: [
  1770. [1400, 123],
  1771. [1500, 532],
  1772. [5500, 435],
  1773. [500, 534],
  1774. ]
  1775. }
  1776. ]
  1777. }
  1778. myChart.setOption(option)
  1779. tools.loopShowTooltip(myChart, option, {
  1780. nterval: 2000,
  1781. loopSeries: true,
  1782. })
  1783. }
  1784. },
  1785. })