investHome2.js 57 KB

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