investHome2.js 62 KB

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