investHome2.js 62 KB

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