investHome2.js 54 KB

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