investHome2.js 63 KB

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