investHome.js 81 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420
  1. let app = new Vue({
  2. el: '#app',
  3. data() {
  4. return {
  5. showTip: false,
  6. showTip2: false,
  7. timeOut: '',
  8. tipTitle: '',
  9. tipTitle2: '',
  10. year: '2022',
  11. time: '',
  12. timer: '',
  13. mapName: 'shanxi',
  14. geoCoordMap: {},
  15. config1: {
  16. number: [100],
  17. content: '{nt}个',
  18. },
  19. storageRecordConfig: null,
  20. companyList: [
  21. { name: '山西焦煤' },
  22. { name: '晋能控股' },
  23. { name: '华新燃气' },
  24. { name: '山西建投' },
  25. { name: '潞安化工' },
  26. { name: '华远陆港' },
  27. { name: '航产集团' },
  28. { name: '大地控股' },
  29. { name: '国新能源' },
  30. { name: '汾酒集团' },
  31. { name: '云时代' },
  32. { name: '神农科技' },
  33. { name: '华阳新材' },
  34. { name: '华舰体育' },
  35. { name: '交控集团' },
  36. { name: '文旅集团' },
  37. { name: '水控集团' },
  38. { name: '太重集团' },
  39. ],
  40. amountList: amountList,
  41. amountTotal: 0,
  42. classOption: {
  43. step: 0.5
  44. }
  45. }
  46. },
  47. created() {
  48. this.amountList.map(item => {
  49. this.amountTotal += Number(item.value)
  50. })
  51. this.time = formatDate()
  52. this.timer = setIinterval(() => {
  53. this.time = formatDate()
  54. }, 1000)
  55. },
  56. beforeDestroy() {
  57. if (this.timer) {
  58. clearIinterval(this.timer);
  59. }
  60. clearIinterval(this.timeOut)
  61. },
  62. mounted() {
  63. setTimeout(() => {
  64. // 左侧图表
  65. //this.initChartTip()
  66. this.initChartTip2()
  67. this.initChartTip3()
  68. this.initChartTip4()
  69. this.initChartL1()
  70. this.initChartL2()
  71. this.initChartR1()
  72. this.initChartR2()
  73. this.initChinaChart()
  74. this.initProjectList()
  75. }, 0)
  76. },
  77. methods: {
  78. numFormat(value) {
  79. if (!value) return '0'
  80. var intPart = Number(value).toFixed(0) // 获取整数部分
  81. var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  82. var floatPart = '.00' // 预定义小数部分
  83. var value2Array = value.toString().split('.')
  84. // =2表示数据有小数位
  85. if (value2Array.length === 2) {
  86. floatPart = value2Array[1].toString() // 拿到小数部分
  87. if (floatPart.length === 1) {
  88. // 补0
  89. return intPartFormat + '.' + floatPart + '0'
  90. } else {
  91. return intPartFormat + '.' + floatPart
  92. }
  93. } else {
  94. return intPartFormat
  95. }
  96. },
  97. convertData(data) {
  98. var res = []
  99. for (var i = 0; i < data.length; i++) {
  100. var geoCoord = this.geoCoordMap[data[i].name]
  101. if (geoCoord) {
  102. res.push({
  103. name: data[i].name,
  104. value: geoCoord.concat(data[i].value),
  105. })
  106. }
  107. }
  108. return res
  109. },
  110. initChinaChart() {
  111. var data = [
  112. { name: '大同市', value: 60.35, value2: 28 },
  113. { name: '朔州市', value: 33.61, value2: 13 },
  114. { name: '忻州市', value: 73.35, value2: 25 },
  115. { name: '吕梁市', value: 109.04, value2: 45 },
  116. { name: '太原市', value: 251.67, value2: 113 },
  117. { name: '阳泉市', value: 25.12, value2: 28 },
  118. { name: '晋中市', value: 148.57, value2: 52 },
  119. { name: '临汾市', value: 130.55, value2: 30 },
  120. { name: '长治市', value: 103.00, value2: 23 },
  121. { name: '运城市', value: 41.06, value2: 23 },
  122. { name: '晋城市', value: 45.43, value2: 31 }
  123. ]
  124. var moveLine = {
  125. normal: [
  126. {
  127. fromName: '太原市',
  128. toName: '吕梁市',
  129. coords: [
  130. [112.3352, 37.9413],
  131. [111.3574, 37.7325],
  132. ],
  133. },
  134. {
  135. fromName: '太原市',
  136. toName: '忻州市',
  137. coords: [
  138. [112.3352, 37.9413],
  139. [112.4561, 38.8971],
  140. ],
  141. },
  142. {
  143. fromName: '太原市',
  144. toName: '临汾市',
  145. coords: [
  146. [112.3352, 37.9413],
  147. [111.4783, 36.1615],
  148. ],
  149. },
  150. {
  151. fromName: '太原市',
  152. toName: '阳泉市',
  153. coords: [
  154. [112.3352, 37.9413],
  155. [113.4778, 38.0951],
  156. ],
  157. },
  158. {
  159. fromName: '太原市',
  160. toName: '晋中市',
  161. coords: [
  162. [112.3352, 37.9413],
  163. [112.7747, 37.37],
  164. ],
  165. },
  166. {
  167. fromName: '太原市',
  168. toName: '运城市',
  169. coords: [
  170. [112.3352, 37.9413],
  171. [111.1487, 35.2002],
  172. ],
  173. },
  174. {
  175. fromName: '太原市',
  176. toName: '大同市',
  177. coords: [
  178. [112.3352, 37.9413],
  179. [113.7854, 39.8035],
  180. ],
  181. },
  182. {
  183. fromName: '太原市',
  184. toName: '晋城市',
  185. coords: [
  186. [112.3352, 37.9413],
  187. [112.7856, 35.6342],
  188. ],
  189. },
  190. {
  191. fromName: '太原市',
  192. toName: '长治市',
  193. coords: [
  194. [112.3352, 37.9413],
  195. [112.8625, 36.4746],
  196. ],
  197. },
  198. {
  199. fromName: '太原市',
  200. toName: '朔州市',
  201. coords: [
  202. [112.3352, 37.9413],
  203. [113.0713, 39.6991],
  204. ],
  205. },
  206. ],
  207. }
  208. /*获取地图数据*/
  209. let myChart = echarts.init(this.$refs['echarts-map'])
  210. echarts.registerMap('shanxi', {
  211. type: 'FeatureCollection',
  212. features: [
  213. {
  214. type: 'Feature',
  215. id: '1409',
  216. properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
  217. geometry: {
  218. type: 'Polygon',
  219. coordinates: [
  220. '@@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',
  221. ],
  222. encodeOffsets: [[113614, 39657]],
  223. },
  224. },
  225. {
  226. type: 'Feature',
  227. id: '1411',
  228. properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
  229. geometry: {
  230. type: 'Polygon',
  231. coordinates: [
  232. '@@@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',
  233. ],
  234. encodeOffsets: [[113614, 39657]],
  235. },
  236. },
  237. {
  238. type: 'Feature',
  239. id: '1410',
  240. properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
  241. geometry: {
  242. type: 'Polygon',
  243. coordinates: [
  244. '@@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',
  245. ],
  246. encodeOffsets: [[113063, 37784]],
  247. },
  248. },
  249. {
  250. type: 'Feature',
  251. id: '1407',
  252. properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
  253. geometry: {
  254. type: 'Polygon',
  255. coordinates: [
  256. '@@@š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@',
  257. ],
  258. encodeOffsets: [[114087, 37682]],
  259. },
  260. },
  261. {
  262. type: 'Feature',
  263. id: '1408',
  264. properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
  265. geometry: {
  266. type: 'Polygon',
  267. coordinates: [
  268. '@@„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@„',
  269. ],
  270. encodeOffsets: [[113232, 36597]],
  271. },
  272. },
  273. {
  274. type: 'Feature',
  275. id: '1402',
  276. properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
  277. geometry: {
  278. type: 'Polygon',
  279. coordinates: [
  280. '@@²£š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',
  281. ],
  282. encodeOffsets: [[115335, 41209]],
  283. },
  284. },
  285. {
  286. type: 'Feature',
  287. id: '1404',
  288. properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
  289. geometry: {
  290. type: 'Polygon',
  291. coordinates: [
  292. '@@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',
  293. ],
  294. encodeOffsets: [[116269, 37637]],
  295. },
  296. },
  297. {
  298. type: 'Feature',
  299. id: '1406',
  300. properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
  301. geometry: {
  302. type: 'Polygon',
  303. coordinates: [
  304. '@@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‚',
  305. ],
  306. encodeOffsets: [[114615, 40562]],
  307. },
  308. },
  309. {
  310. type: 'Feature',
  311. id: '1405',
  312. properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
  313. geometry: {
  314. type: 'Polygon',
  315. coordinates: [
  316. '@@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°',
  317. ],
  318. encodeOffsets: [[115223, 36895]],
  319. },
  320. },
  321. {
  322. type: 'Feature',
  323. id: '1401',
  324. properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
  325. geometry: {
  326. type: 'Polygon',
  327. coordinates: [
  328. '@@„@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š@°',
  329. ],
  330. encodeOffsets: [[114503, 39134]],
  331. },
  332. },
  333. {
  334. type: 'Feature',
  335. id: '1403',
  336. properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
  337. geometry: {
  338. type: 'Polygon',
  339. coordinates: [
  340. '@@°@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',
  341. ],
  342. encodeOffsets: [[115864, 39336]],
  343. },
  344. },
  345. ],
  346. UTF8Encoding: true,
  347. })
  348. var mapFeatures = echarts.getMap(this.mapName).geoJson.features
  349. mapFeatures.forEach(v => {
  350. // 地区名称
  351. var name = v.properties.name
  352. // 地区经纬度
  353. this.geoCoordMap[name] = v.properties.cp
  354. })
  355. // <p>当前阶段:<span>可论证阶段</span></p>
  356. // <p>时间节点:<span>2021.10-2022.10</span></p>
  357. let option = {
  358. tooltip: {
  359. padding: 15,
  360. enterable: true,
  361. transitionDuration: 1,
  362. formatter: (params, ticket, callback) => {
  363. // 清空所有轮播
  364. for (var k in this.geoCoordMap) {
  365. myChart.dispatchAction({
  366. // type: 'geoUnSelect',
  367. type: 'downplay',
  368. name: k,
  369. })
  370. }
  371. // 如果鼠标滑动到线线上面,则返回空
  372. myChart.dispatchAction({
  373. // type: 'geoSelect',
  374. type: 'highlight',
  375. name: params.name,
  376. })
  377. if (params.componentSubType == 'lines') {
  378. return
  379. }
  380. if (params.componentSubType == 'scatter') {
  381. let tipHtml = `
  382. <div class="tooltip-cont">
  383. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  384. <p>总投资额:<span>${params.data.value[2]}亿</span></p>
  385. </div>`
  386. callback(ticket, tipHtml)
  387. return tipHtml
  388. }
  389. if (params.componentSubType == 'map') {
  390. let tipHtml = `
  391. <div class="tooltip-cont">
  392. <p>项目数量:<span>${data[params.dataIndex].value2}个</span></p>
  393. <p>总投资额:<span>${params.data.value}亿</span></p>
  394. </div>`
  395. callback(ticket, tipHtml)
  396. return tipHtml
  397. }
  398. },
  399. },
  400. visualMap: {
  401. show: false,
  402. min: 0,
  403. max: 300,
  404. right: 0,
  405. bottom: 0,
  406. text: ['高', '低'],
  407. textStyle: {
  408. color: '#f1f1f1'
  409. },
  410. realtime: false,
  411. calculable: false,
  412. inRange: {
  413. color: ['lightskyblue', '#2754b7']
  414. }
  415. },
  416. geo: {
  417. show: true,
  418. map: 'shanxi',
  419. layoutCenter: ['50%', '50%'], //地图位置
  420. layoutSize: '100%',
  421. label: {
  422. normal: {
  423. show: false,
  424. },
  425. emphasis: {
  426. show: false,
  427. },
  428. },
  429. roam: false,
  430. itemStyle: {
  431. normal: {
  432. areaColor: '#1946a8',
  433. shadowColor: '#1946a8',
  434. borderWidth: 1, //设置外层边框
  435. borderColor: '#1946a8',
  436. shadowOffsetX: 10,
  437. shadowOffsetY: 5,
  438. shadowBlur: 2,
  439. },
  440. emphasis: {
  441. areaColor: '#1946a8',
  442. borderColor: '#d4bc1d',
  443. borderWidth: 2, //设置外层边框
  444. },
  445. },
  446. },
  447. series: [
  448. {
  449. name: '散点',
  450. type: 'scatter',
  451. coordinateSystem: 'geo',
  452. data: this.convertData(data),
  453. symbolSize: function (val) {
  454. return 10
  455. },
  456. label: {
  457. normal: {
  458. formatter: '{b}',
  459. position: [10, 10],
  460. fontSize: 15,
  461. fontWeight: 600,
  462. fontStyle: 'italic',
  463. color: '#fff',
  464. show: true,
  465. },
  466. emphasis: {
  467. show: true,
  468. },
  469. },
  470. itemStyle: {
  471. normal: {
  472. color: '#000',
  473. borderWidth: 2,
  474. borderColor: '#fff',
  475. },
  476. },
  477. },
  478. {
  479. type: 'map',
  480. map: this.mapName,
  481. geoIndex: 0,
  482. aspectScale: 1.5, //长宽比
  483. showLegendSymbol: true, // 存在legend时显示
  484. label: {
  485. normal: {
  486. show: true,
  487. },
  488. emphasis: {
  489. show: false,
  490. textStyle: {
  491. color: '#fff',
  492. },
  493. },
  494. },
  495. roam: true,
  496. itemStyle: {
  497. normal: {
  498. areaColor: '#031525',
  499. borderColor: '#3B5077',
  500. },
  501. emphasis: {
  502. areaColor: '#2B91B7',
  503. },
  504. },
  505. animation: false,
  506. data: data,
  507. },
  508. {
  509. name: '点',
  510. type: 'scatter',
  511. coordinateSystem: 'geo',
  512. zlevel: 6,
  513. },
  514. {
  515. name: 'Top 5',
  516. type: 'effectScatter',
  517. coordinateSystem: 'geo',
  518. data: this.convertData(
  519. data
  520. .sort(function (a, b) {
  521. return b.value - a.value
  522. })
  523. .slice(0, 5)
  524. ),
  525. symbolSize: function (val) {
  526. return 15
  527. },
  528. showEffectOn: 'render',
  529. rippleEffect: {
  530. brushType: 'stroke',
  531. },
  532. hoverAnimation: true,
  533. label: {
  534. normal: {
  535. formatter: '{b}',
  536. position: 'left',
  537. show: false,
  538. },
  539. },
  540. itemStyle: {
  541. normal: {
  542. color: 'yellow',
  543. shadowBlur: 10,
  544. shadowColor: 'yellow',
  545. },
  546. },
  547. zlevel: 1000,
  548. },
  549. {
  550. name: '线路',
  551. type: 'lines',
  552. zlevel: 2,
  553. effect: {
  554. show: true,
  555. period: 4, //箭头指向速度,值越小速度越快
  556. trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
  557. symbol: 'arrow', //箭头图标
  558. symbolSize: 5, //图标大小
  559. },
  560. lineStyle: {
  561. normal: {
  562. color: '#00FFFF',
  563. width: 1,
  564. type: 'dashed',
  565. opacity: 0.5, //尾迹线条透明度
  566. curveness: -0.3, //尾迹线条曲直度
  567. },
  568. },
  569. data: moveLine.normal,
  570. },
  571. ],
  572. }
  573. let that = this
  574. myChart.on('click', function (params) {
  575. if (params.name == '太原市') {
  576. that.showTip = true
  577. }
  578. // window.open('https://www.baidu.com')
  579. })
  580. tools.loopShowTooltip(myChart, option, {
  581. iinterval: 2000,
  582. loopSeries: false,
  583. });
  584. myChart.setOption(option)
  585. },
  586. // initChartTip(){
  587. // let myChart = echarts.init(this.$refs['echartTip'])
  588. // let option = {
  589. // tooltip: {
  590. // trigger: 'item',
  591. // },
  592. // color: ['#6682f5', '#69c0ff', '#43ede3','#8ba2ff'],
  593. // legend: {
  594. // top: '0',
  595. // orient: 'vertical',
  596. // left: '2%',
  597. // textStyle: {
  598. // color: '#9DB9EB',
  599. // },
  600. // },
  601. // series: [
  602. // {
  603. // name: '',
  604. // type: 'pie',
  605. // center: ['45%','40%'],
  606. // radius: ['35%', '50%'],
  607. // labelLine: {
  608. // normal: {
  609. // lineStyle: {
  610. // width: 1,
  611. // },
  612. // },
  613. // },
  614. // data: statusList,
  615. // },
  616. // ],
  617. // }
  618. // myChart.setOption(option)
  619. // tools.loopShowTooltip(myChart, option, {
  620. // interval: 2000,
  621. // loopSeries: true,
  622. // })
  623. // myChart.on('click', function(param) {
  624. // console.log(param)
  625. // window.open('https://www.baidu.com')
  626. // })
  627. // },
  628. initChartTip2() {
  629. let myChart = echarts.init(this.$refs['echartTip2'])
  630. let option = {
  631. tooltip: {
  632. trigger: 'axis',
  633. axisPointer: {
  634. type: 'cross',
  635. },
  636. },
  637. // dataZoom:[
  638. // {
  639. // // start: 9,//默认为@
  640. // // end: 100,//黑认认为1@0
  641. // type: "slider",
  642. // show: true,
  643. // // xAxisIndex: [0]
  644. // handlesize: 0,//滑动条的 左右2个滑动条的大小
  645. // startValue: 9,// 初始显示值
  646. // endValue: 6,// 结束显示值
  647. // height: 10,//组件高度
  648. // left:"5%",
  649. // right: "4%",//右边的距离
  650. // bottom: "25%",//底边的距离
  651. // borderColor:"#939",
  652. // fillerColor:"#269cdb",
  653. // borderRadius: 5,
  654. // backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  655. // showDataShadow: false,//是否显示数据阴影
  656. // showDetail: false,//即拖拽时候是否显示详细数值信息
  657. // truerealtime: false,//是否实时更新
  658. // filterMode: "filter"
  659. // },{
  660. // type:'inside',
  661. // show: true,
  662. // start: 1,
  663. // end: 100
  664. // }
  665. // ],
  666. grid: {
  667. top: '10%',
  668. right: '3%',
  669. left: '10%',
  670. bottom: '30%',
  671. },
  672. legend: {
  673. top: '1',
  674. right: '20',
  675. textStyle: {
  676. color: 'rgba(250,250,250,0.6)',
  677. },
  678. },
  679. xAxis: {
  680. data: tipData.map(item => item.name),
  681. axisLine: {
  682. show: true, //隐藏X轴轴线
  683. lineStyle: {
  684. color: '#005094',
  685. width: 1,
  686. },
  687. },
  688. axisTick: {
  689. show: false, //隐藏X轴刻度
  690. },
  691. axisLabel: {
  692. show: true,
  693. rotate: 40,
  694. textStyle: {
  695. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  696. },
  697. },
  698. },
  699. yAxis: [
  700. {
  701. type: 'value',
  702. nameTextStyle: {
  703. color: '#ebf8ac',
  704. },
  705. splitLine: {
  706. show: true,
  707. lineStyle: {
  708. color: '#68b4dd66',
  709. type: 'dashed',
  710. },
  711. },
  712. axisLine: {
  713. show: true,
  714. lineStyle: {
  715. color: '#3D7495',
  716. },
  717. },
  718. axisLabel: {
  719. show: true,
  720. formatter: '{value} 亿',
  721. textStyle: {
  722. color: 'rgba(250,250,250,0.6)',
  723. },
  724. },
  725. },
  726. ],
  727. series: [
  728. {
  729. name: '投资金额',
  730. type: 'bar',
  731. barWidth: 15,
  732. itemStyle: {
  733. normal: {
  734. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  735. {
  736. offset: 0,
  737. color: '#69c0ff',
  738. },
  739. {
  740. offset: 1,
  741. color: '#082550',
  742. },
  743. ]),
  744. },
  745. },
  746. data: tipData.map(item => item.value),
  747. },
  748. // {
  749. // name: '实际投资',
  750. // type: 'bar',
  751. // barWidth: 10,
  752. // itemStyle: {
  753. // normal: {
  754. // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  755. // {
  756. // offset: 0,
  757. // color: '#957DFF',
  758. // },
  759. // {
  760. // offset: 1,
  761. // color: '#082550',
  762. // },
  763. // ]),
  764. // },
  765. // },
  766. // data: executeList.map(item=>item.value2),
  767. // },
  768. ],
  769. }
  770. myChart.on('click', function (data) {
  771. if (data.name == '交控集团') {
  772. window.location.href = './investHomeChild.html?type=1'
  773. }
  774. })
  775. tools.loopShowTooltip(myChart, option, {
  776. iinterval: 2000,
  777. loopSeries: true,
  778. })
  779. myChart.setOption(option)
  780. },
  781. initChartTip3() {
  782. let myChart = echarts.init(this.$refs['echartTip3'])
  783. let option = {
  784. title: {
  785. //text : '产业类别',
  786. x: 'center',
  787. textStyle: {
  788. color: '#fff'
  789. }
  790. },
  791. tooltip: {
  792. trigger: 'axis',
  793. axisPointer: {
  794. type: 'cross',
  795. },
  796. },
  797. grid: {
  798. top: '15%',
  799. right: '3%',
  800. left: '10%',
  801. bottom: '30%',
  802. },
  803. legend: {
  804. top: '1',
  805. right: '15',
  806. textStyle: {
  807. color: 'rgba(250,250,250,0.6)',
  808. },
  809. },
  810. xAxis: {
  811. data: tipTopData.map(item => item.name),
  812. axisLine: {
  813. show: true, //隐藏X轴轴线
  814. lineStyle: {
  815. color: '#005094',
  816. width: 1,
  817. },
  818. },
  819. axisTick: {
  820. show: false, //隐藏X轴刻度
  821. },
  822. axisLabel: {
  823. show: true,
  824. rotate: 30,
  825. textStyle: {
  826. color: '#fff'//color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  827. },
  828. },
  829. },
  830. yAxis: [
  831. {
  832. type: 'value',
  833. nameTextStyle: {
  834. color: '#ebf8ac',
  835. },
  836. splitLine: {
  837. show: true,
  838. lineStyle: {
  839. color: '#68b4dd66',
  840. type: 'dashed',
  841. },
  842. },
  843. axisLine: {
  844. show: true,
  845. lineStyle: {
  846. color: '#3D7495',
  847. },
  848. },
  849. axisLabel: {
  850. show: true,
  851. formatter: '{value} 亿',
  852. textStyle: {
  853. color: 'rgba(250,250,250,0.6)',
  854. },
  855. },
  856. },
  857. ],
  858. series: [
  859. {
  860. name: '2022年投资完成额',
  861. type: 'line',
  862. barWidth: 15,
  863. itemStyle: {
  864. normal: {
  865. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  866. {
  867. offset: 0,
  868. color: '#69c0ff',
  869. },
  870. {
  871. offset: 1,
  872. color: '#69c0ff',
  873. },
  874. ]),
  875. },
  876. },
  877. data: tipTopData.map(item => item.value),
  878. },
  879. // {
  880. // name: '实际投资',
  881. // type: 'bar',
  882. // barWidth: 10,
  883. // itemStyle: {
  884. // normal: {
  885. // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  886. // {
  887. // offset: 0,
  888. // color: '#957DFF',
  889. // },
  890. // {
  891. // offset: 1,
  892. // color: '#082550',
  893. // },
  894. // ]),
  895. // },
  896. // },
  897. // data: executeList.map(item=>item.value2),
  898. // },
  899. ],
  900. }
  901. myChart.setOption(option)
  902. tools.loopShowTooltip(myChart, option, {
  903. iinterval: 2000,
  904. loopSeries: true,
  905. })
  906. },
  907. initChartTip4() {
  908. let myChart = echarts.init(this.$refs['echartTip4'])
  909. let option = {
  910. title: {
  911. //text : '投资项目列表',
  912. x: 'center',
  913. textStyle: {
  914. color: '#fff'
  915. }
  916. },
  917. tooltip: {
  918. trigger: 'axis',
  919. axisPointer: {
  920. type: 'cross',
  921. },
  922. },
  923. // dataZoom:[
  924. // {
  925. // // start: 9,//默认为@
  926. // // end: 100,//黑认认为1@0
  927. // type: "slider",
  928. // show: true,
  929. // // xAxisIndex: [0]
  930. // handlesize: 0,//滑动条的 左右2个滑动条的大小
  931. // startValue: 9,// 初始显示值
  932. // endValue: 6,// 结束显示值
  933. // height: 10,//组件高度
  934. // left:"5%",
  935. // right: "4%",//右边的距离
  936. // bottom: "25%",//底边的距离
  937. // borderColor:"#939",
  938. // fillerColor:"#269cdb",
  939. // borderRadius: 5,
  940. // backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  941. // showDataShadow: false,//是否显示数据阴影
  942. // showDetail: false,//即拖拽时候是否显示详细数值信息
  943. // truerealtime: false,//是否实时更新
  944. // filterMode: "filter"
  945. // },{
  946. // type:'inside',
  947. // show: true,
  948. // start: 1,
  949. // end: 100
  950. // }
  951. // ],
  952. grid: {
  953. top: '15%',
  954. right: '3%',
  955. left: '10%',
  956. bottom: '20%',
  957. },
  958. legend: {
  959. top: '0',
  960. right: '20',
  961. textStyle: {
  962. color: 'rgba(250,250,250,0.6)',
  963. },
  964. },
  965. xAxis: {
  966. data: tipBottomData.map(item => item.name),
  967. axisLine: {
  968. show: true, //隐藏X轴轴线
  969. lineStyle: {
  970. color: '#005094',
  971. width: 1,
  972. },
  973. },
  974. axisTick: {
  975. show: false, //隐藏X轴刻度
  976. },
  977. axisLabel: {
  978. show: true,
  979. rotate: 30,
  980. textStyle: {
  981. color: '#fff'//color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  982. },
  983. },
  984. },
  985. yAxis: [
  986. {
  987. type: 'value',
  988. nameTextStyle: {
  989. color: '#ebf8ac',
  990. },
  991. splitLine: {
  992. show: true,
  993. lineStyle: {
  994. color: '#68b4dd66',
  995. type: 'dashed',
  996. },
  997. },
  998. axisLine: {
  999. show: true,
  1000. lineStyle: {
  1001. color: '#3D7495',
  1002. },
  1003. },
  1004. axisLabel: {
  1005. show: true,
  1006. formatter: '{value} 亿',
  1007. textStyle: {
  1008. color: 'rgba(250,250,250,0.6)',
  1009. },
  1010. },
  1011. },
  1012. ],
  1013. series: [
  1014. {
  1015. name: '2022年投资完成额',
  1016. type: 'bar',
  1017. barWidth: 15,
  1018. itemStyle: {
  1019. normal: {
  1020. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1021. {
  1022. offset: 0,
  1023. color: '#69c0ff',
  1024. },
  1025. {
  1026. offset: 1,
  1027. color: '#082550',
  1028. },
  1029. ]),
  1030. },
  1031. },
  1032. data: tipBottomData.map(item => item.value),
  1033. },
  1034. ],
  1035. }
  1036. myChart.on('click', function (data) {
  1037. if (data.name == '华阳新材') {
  1038. window.location.href = './investHomeChild.html?type=2'
  1039. }
  1040. })
  1041. myChart.setOption(option)
  1042. tools.loopShowTooltip(myChart, option, {
  1043. interval: 2000,
  1044. loopSeries: true,
  1045. })
  1046. },
  1047. //这个是3D环图
  1048. // initChartL1() {
  1049. // let myChart = echarts.init(this.$refs['echartR1'])
  1050. // // 生成扇形的曲面参数方程,用于 series-surface.parametricEquation
  1051. // function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
  1052. // // 计算
  1053. // let midRatio = (startRatio + endRatio) / 2;
  1054. // let startRadian = startRatio * Math.PI * 2;
  1055. // let endRadian = endRatio * Math.PI * 2;
  1056. // let midRadian = midRatio * Math.PI * 2;
  1057. // // 如果只有一个扇形,则不实现选中效果。
  1058. // if (startRatio === 0 && endRatio === 1) {
  1059. // isSelected = false;
  1060. // }
  1061. // // 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)
  1062. // k = typeof k !== 'undefined' ? k : 1 / 3;
  1063. // // 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0)
  1064. // let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  1065. // let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  1066. // // 计算高亮效果的放大比例(未高亮,则比例为 1)
  1067. // let hoverRate = isHovered ? 1.17 : 1;
  1068. // // 返回曲面参数方程
  1069. // return {
  1070. // u: {
  1071. // min: -Math.PI,
  1072. // max: Math.PI * 3,
  1073. // step: Math.PI / 32,
  1074. // },
  1075. // v: {
  1076. // min: 0,
  1077. // max: Math.PI * 2,
  1078. // step: Math.PI / 20,
  1079. // },
  1080. // x: function (u, v) {
  1081. // if (u < startRadian) {
  1082. // return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  1083. // }
  1084. // if (u > endRadian) {
  1085. // return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  1086. // }
  1087. // return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  1088. // },
  1089. // y: function (u, v) {
  1090. // if (u < startRadian) {
  1091. // return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  1092. // }
  1093. // if (u > endRadian) {
  1094. // return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  1095. // }
  1096. // return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  1097. // },
  1098. // z: function (u, v) {
  1099. // if (u < -Math.PI * 0.5) {
  1100. // return Math.sin(u);
  1101. // }
  1102. // if (u > Math.PI * 2.5) {
  1103. // return Math.sin(u);
  1104. // }
  1105. // return Math.sin(v) > 0 ? 1 : -1;
  1106. // },
  1107. // };
  1108. // }
  1109. // // 生成模拟 3D 饼图的配置项
  1110. // function getPie3D(pieData, internalDiameterRatio) {
  1111. // let series = [];
  1112. // let sumValue = 0;
  1113. // let startValue = 0;
  1114. // let endValue = 0;
  1115. // let legendData = [];
  1116. // let k =
  1117. // typeof internalDiameterRatio !== 'undefined'
  1118. // ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
  1119. // : 1 / 5;
  1120. // // 新增标签 series @20210613
  1121. // let labelSeries = {
  1122. // id: 'labelSeries',
  1123. // type: 'bar3D',
  1124. // //zlevel:-9,
  1125. // barSize: [0.1, 0.1],
  1126. // data: [],
  1127. // label: {
  1128. // show: true,
  1129. // formatter: function (params) {
  1130. // return `${params.name}\n${params.value[3]}`;
  1131. // },
  1132. // backgroundColor: '#fff',
  1133. // },
  1134. // };
  1135. // // 为每一个饼图数据,生成一个 series-surface 配置
  1136. // for (let i = 0; i < pieData.length; i++) {
  1137. // sumValue += pieData[i].value;
  1138. // let seriesItem = {
  1139. // name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
  1140. // type: 'surface',
  1141. // parametric: true,
  1142. // wireframe: {
  1143. // show: false,
  1144. // },
  1145. // pieData: pieData[i],
  1146. // pieStatus: {
  1147. // selected: false,
  1148. // hovered: false,
  1149. // k: k,
  1150. // },
  1151. // };
  1152. // if (typeof pieData[i].itemStyle != 'undefined') {
  1153. // let itemStyle = {};
  1154. // typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
  1155. // typeof pieData[i].itemStyle.opacity != 'undefined'
  1156. // ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
  1157. // : null;
  1158. // seriesItem.itemStyle = itemStyle;
  1159. // }
  1160. // series.push(seriesItem);
  1161. // }
  1162. // // 使用上一次遍历时,计算出的数据和 sumValue,调用 getParametricEquation 函数,
  1163. // // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。
  1164. // for (let i = 0; i < series.length; i++) {
  1165. // endValue = startValue + series[i].pieData.value;
  1166. // series[i].pieData.startRatio = startValue / sumValue;
  1167. // series[i].pieData.endRatio = endValue / sumValue;
  1168. // series[i].parametricEquation = getParametricEquation(
  1169. // series[i].pieData.startRatio,
  1170. // series[i].pieData.endRatio,
  1171. // false,
  1172. // false,
  1173. // k
  1174. // );
  1175. // startValue = endValue;
  1176. // legendData.push(series[i].name);
  1177. // // 判断增加 label 效果 @20210613
  1178. // if (pieData[i].label && pieData[i].label.show) {
  1179. // labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
  1180. // labelSeries.data.push({
  1181. // name: series[i].name,
  1182. // value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
  1183. // itemStyle: {
  1184. // opacity: 1,
  1185. // },
  1186. // });
  1187. // }
  1188. // }
  1189. // // 补充一个透明的圆环,用于支撑高亮功能的近似实现。
  1190. // series.push({
  1191. // name: 'mouseoutSeries',
  1192. // type: 'surface',
  1193. // parametric: true,
  1194. // wireframe: {
  1195. // show: false,
  1196. // },
  1197. // itemStyle: {
  1198. // opacity: 0,
  1199. // },
  1200. // parametricEquation: {
  1201. // u: {
  1202. // min: 0,
  1203. // max: Math.PI * 2,
  1204. // step: Math.PI / 20,
  1205. // },
  1206. // v: {
  1207. // min: 0,
  1208. // max: Math.PI,
  1209. // step: Math.PI / 20,
  1210. // },
  1211. // x: function (u, v) {
  1212. // return Math.sin(v) * Math.sin(u) + Math.sin(u);
  1213. // },
  1214. // y: function (u, v) {
  1215. // return Math.sin(v) * Math.cos(u) + Math.cos(u);
  1216. // },
  1217. // z: function (u, v) {
  1218. // return Math.cos(v) > 0 ? 0.1 : -0.1;
  1219. // },
  1220. // },
  1221. // });
  1222. // // 将 labelSeries 添加进去 @20210613
  1223. // series.push(labelSeries);
  1224. // // 准备待返回的配置项,把准备好的 legendData、series 传入。
  1225. // let option = {
  1226. // //animation: false,
  1227. // legend: {
  1228. // data: legendData,
  1229. // op: '5%',
  1230. // //orient: 'vertical',
  1231. // textStyle: {
  1232. // color: '#fff',
  1233. // },
  1234. // },
  1235. // tooltip: {
  1236. // formatter: (params) => {
  1237. // if (params.seriesName !== 'mouseoutSeries') {
  1238. // return `${
  1239. // params.seriesName
  1240. // }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
  1241. // params.color
  1242. // };"></span>${option.series[params.seriesIndex].pieData.value}`;
  1243. // }
  1244. // },
  1245. // },
  1246. // // 增加渐变色尝试(手动通过 seriesIndex 指定系列) @20211228
  1247. // xAxis3D: {
  1248. // min: -1,
  1249. // max: 1,
  1250. // },
  1251. // yAxis3D: {
  1252. // min: -1,
  1253. // max: 1,
  1254. // },
  1255. // zAxis3D: {
  1256. // min: -1,
  1257. // max: 1,
  1258. // },
  1259. // grid3D: {
  1260. // show: false,
  1261. // boxHeight: 10,
  1262. // //top: '30%',
  1263. // bottom: '50%',
  1264. // viewControl: {
  1265. // //3d效果可以放大、旋转等,请自己去查看官方配置
  1266. // alpha: 30, //角度
  1267. // distance: 150, //调整视角到主体的距离,类似调整zoom
  1268. // rotateSensitivity: 0, //设置为0无法旋转
  1269. // zoomSensitivity: 0, //设置为0无法缩放
  1270. // panSensitivity: 0, //设置为0无法平移
  1271. // autoRotate: false, //自动旋转
  1272. // },
  1273. // },
  1274. // series: series,
  1275. // };
  1276. // return option;
  1277. // }
  1278. // // 传入数据生成 option
  1279. // option = getPie3D([
  1280. // {
  1281. // name: '传统产业投资',
  1282. // value: 405.29,
  1283. // itemStyle: {
  1284. // color: 'rgb(243,178,119)'
  1285. // }
  1286. // }, {
  1287. // name: '战略新兴产业投资',
  1288. // value: 196.44,
  1289. // itemStyle: {
  1290. // color: 'rgb(110,222,191)'
  1291. // }
  1292. // }, {
  1293. // name: '基础产业投资',
  1294. // value: 722.34,
  1295. // itemStyle: {
  1296. // color: 'rgb(82,161,229)'
  1297. // }
  1298. // }
  1299. // ]);
  1300. // myChart.setOption(option);
  1301. // // 监听鼠标事件,实现饼图选中效果(单选),近似实现高亮(放大)效果。
  1302. // let selectedIndex = '';
  1303. // let hoveredIndex = '';
  1304. // let that = this
  1305. // // 监听点击事件,实现选中效果(单选)
  1306. // myChart.on('click', function (param) {
  1307. // console.log(param)
  1308. // if (param.seriesName == '战略新兴产业投资') {
  1309. // that.tipTitle2 = param.seriesName
  1310. // that.showTip2 = true
  1311. // }
  1312. // // 从 option.series 中读取重新渲染扇形所需的参数,将是否选中取反。
  1313. // // let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
  1314. // // let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
  1315. // // let k = option.series[params.seriesIndex].pieStatus.k;
  1316. // // let startRatio = option.series[params.seriesIndex].pieData.startRatio;
  1317. // // let endRatio = option.series[params.seriesIndex].pieData.endRatio;
  1318. // // // 如果之前选中过其他扇形,将其取消选中(对 option 更新)
  1319. // // if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
  1320. // // option.series[selectedIndex].parametricEquation = getParametricEquation(
  1321. // // option.series[selectedIndex].pieData.startRatio,
  1322. // // option.series[selectedIndex].pieData.endRatio,
  1323. // // false,
  1324. // // false,
  1325. // // k
  1326. // // );
  1327. // // option.series[selectedIndex].pieStatus.selected = false;
  1328. // // }
  1329. // // // 对当前点击的扇形,执行选中/取消选中操作(对 option 更新)
  1330. // // option.series[params.seriesIndex].parametricEquation = getParametricEquation(
  1331. // // startRatio,
  1332. // // endRatio,
  1333. // // isSelected,
  1334. // // isHovered,
  1335. // // k
  1336. // // );
  1337. // // option.series[params.seriesIndex].pieStatus.selected = isSelected;
  1338. // // // 如果本次是选中操作,记录上次选中的扇形对应的系列号 seriesIndex
  1339. // // isSelected ? (selectedIndex = params.seriesIndex) : null;
  1340. // // // 使用更新后的 option,渲染图表
  1341. // // myChart.setOption(option);
  1342. // });
  1343. // //这里是动画
  1344. // let i = 0
  1345. // this.timeOut = setIinterval(function() {
  1346. // console.log(i)
  1347. // let startRatio = option.series[i].pieData.startRatio;
  1348. // let endRatio = option.series[i].pieData.endRatio;
  1349. // let isSelected = option.series[i].pieStatus.selected;
  1350. // let k = option.series[i].pieStatus.k;
  1351. // if(i == 0){
  1352. // let startRatio2 = option.series[2].pieData.startRatio;
  1353. // let endRatio2 = option.series[2].pieData.endRatio;
  1354. // let isSelected2 = option.series[2].pieStatus.selected;
  1355. // let k2 = option.series[2].pieStatus.k;
  1356. // option.series[2].parametricEquation = getParametricEquation(startRatio2, endRatio2, isSelected2, false, k2)
  1357. // } else {
  1358. // let startRatio3 = option.series[i-1].pieData.startRatio;
  1359. // let endRatio3 = option.series[i-1].pieData.endRatio;
  1360. // let isSelected3 = option.series[i-1].pieStatus.selected;
  1361. // let k3 = option.series[i-1].pieStatus.k;
  1362. // option.series[i-1].parametricEquation = getParametricEquation(startRatio3, endRatio3, isSelected3, false, k3)
  1363. // }
  1364. // option.series[i].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, true, k)
  1365. // myChart.setOption(option);
  1366. // i ++
  1367. // if(i == 3) {
  1368. // i = 0
  1369. // }
  1370. // }, 3000);
  1371. // // 监听 mouseover,近似实现高亮(放大)效果
  1372. // myChart.on('mouseover', function (params) {
  1373. // // 准备重新渲染扇形所需的参数
  1374. // let isSelected;
  1375. // let isHovered;
  1376. // let startRatio;
  1377. // let endRatio;
  1378. // let k;
  1379. // // 如果触发 mouseover 的扇形当前已高亮,则不做操作
  1380. // if (hoveredIndex === params.seriesIndex) {
  1381. // return;
  1382. // // 否则进行高亮及必要的取消高亮操作
  1383. // } else {
  1384. // // 如果当前有高亮的扇形,取消其高亮状态(对 option 更新)
  1385. // if (hoveredIndex !== '') {
  1386. // // 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 false。
  1387. // isSelected = option.series[hoveredIndex].pieStatus.selected;
  1388. // isHovered = false;
  1389. // startRatio = option.series[hoveredIndex].pieData.startRatio;
  1390. // endRatio = option.series[hoveredIndex].pieData.endRatio;
  1391. // k = option.series[hoveredIndex].pieStatus.k;
  1392. // // 对当前点击的扇形,执行取消高亮操作(对 option 更新)
  1393. // option.series[hoveredIndex].parametricEquation = getParametricEquation(
  1394. // startRatio,
  1395. // endRatio,
  1396. // isSelected,
  1397. // isHovered,
  1398. // k
  1399. // );
  1400. // option.series[hoveredIndex].pieStatus.hovered = isHovered;
  1401. // // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  1402. // hoveredIndex = '';
  1403. // }
  1404. // // 如果触发 mouseover 的扇形不是透明圆环,将其高亮(对 option 更新)
  1405. // if (params.seriesName !== 'mouseoutSeries') {
  1406. // // 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 true。
  1407. // isSelected = option.series[params.seriesIndex].pieStatus.selected;
  1408. // isHovered = true;
  1409. // startRatio = option.series[params.seriesIndex].pieData.startRatio;
  1410. // endRatio = option.series[params.seriesIndex].pieData.endRatio;
  1411. // k = option.series[params.seriesIndex].pieStatus.k;
  1412. // // 对当前点击的扇形,执行高亮操作(对 option 更新)
  1413. // option.series[params.seriesIndex].parametricEquation = getParametricEquation(
  1414. // startRatio,
  1415. // endRatio,
  1416. // isSelected,
  1417. // isHovered,
  1418. // k
  1419. // );
  1420. // option.series[params.seriesIndex].pieStatus.hovered = isHovered;
  1421. // // 记录上次高亮的扇形对应的系列号 seriesIndex
  1422. // hoveredIndex = params.seriesIndex;
  1423. // }
  1424. // // 使用更新后的 option,渲染图表
  1425. // myChart.setOption(option);
  1426. // }
  1427. // });
  1428. // // 修正取消高亮失败的 bug
  1429. // myChart.on('globalout', function () {
  1430. // if (hoveredIndex !== '') {
  1431. // // 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 true。
  1432. // isSelected = option.series[hoveredIndex].pieStatus.selected;
  1433. // isHovered = false;
  1434. // k = option.series[hoveredIndex].pieStatus.k;
  1435. // startRatio = option.series[hoveredIndex].pieData.startRatio;
  1436. // endRatio = option.series[hoveredIndex].pieData.endRatio;
  1437. // // 对当前点击的扇形,执行取消高亮操作(对 option 更新)
  1438. // option.series[hoveredIndex].parametricEquation = getParametricEquation(
  1439. // startRatio,
  1440. // endRatio,
  1441. // isSelected,
  1442. // isHovered,
  1443. // k
  1444. // );
  1445. // option.series[hoveredIndex].pieStatus.hovered = isHovered;
  1446. // // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
  1447. // hoveredIndex = '';
  1448. // }
  1449. // // 使用更新后的 option,渲染图表
  1450. // myChart.setOption(option);
  1451. // });
  1452. // // 新增监听图例事件,同步显示隐藏对应 label @20210613
  1453. // myChart.on('legendselectchanged', function (params) {
  1454. // let seriesLength = option.series.length;
  1455. // console.log(option.series[seriesLength - 1].data);
  1456. // for (let i = 0; i < option.series[seriesLength - 1].data.length; i++) {
  1457. // console.log(option.series[seriesLength - 1].data[i]);
  1458. // if (option.series[seriesLength - 1].data[i].name == params.name) {
  1459. // console.log(option.series[seriesLength - 1].data[i]);
  1460. // params.selected[params.name]
  1461. // ? (option.series[seriesLength - 1].data[i].itemStyle.opacity = 1)
  1462. // : (option.series[seriesLength - 1].data[i].itemStyle.opacity = 0);
  1463. // }
  1464. // }
  1465. // myChart.setOption(option);
  1466. // });
  1467. // console.log('66', myChart);
  1468. // },
  1469. //这个是2d环图
  1470. initChartL1 () {
  1471. var chartData = []
  1472. var timer = null;
  1473. var timer2 = null;
  1474. var i = 0;
  1475. industryList.forEach((item,index) => {
  1476. let obj = {
  1477. name: item.name,
  1478. y: item.value,
  1479. sliced: false,
  1480. selected: false,
  1481. color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
  1482. }
  1483. chartData.push(obj)
  1484. })
  1485. let that = this
  1486. var chart = Highcharts.chart('echartR1', {
  1487. chart: {
  1488. type: 'pie',
  1489. backgroundColor: 'rgba(0,0,0,0)',
  1490. options3d: {
  1491. enabled: true,
  1492. alpha: 45,
  1493. //beta: 0
  1494. },
  1495. events: {
  1496. // load,图表加载完成时触发
  1497. load: function () {
  1498. var chart = this;
  1499. var points = chart.series[0].points;
  1500. var len = points.length;
  1501. timer && clearIinterval(timer);
  1502. timer = setIinterval(function () {
  1503. autoTooltip(points[i]);
  1504. chartData.forEach((item,index) => {
  1505. item.sliced = false
  1506. item.selected = false
  1507. if(index == i){
  1508. item.sliced = true
  1509. item.selected = true
  1510. }
  1511. })
  1512. chart.update({
  1513. series:[{
  1514. type: 'pie',
  1515. name: '占比',
  1516. point: {
  1517. events:{
  1518. click:function(e){
  1519. if (e.point.name == '战略新兴产业') {
  1520. that.tipTitle2 = e.point.name
  1521. that.showTip2 = true
  1522. }
  1523. }
  1524. }
  1525. },
  1526. data: chartData
  1527. }]
  1528. })
  1529. i++;
  1530. if (i === len) {
  1531. i = 0;
  1532. }
  1533. }, 2000);
  1534. },
  1535. legendItemClick : function(event) {
  1536. console.log(event);
  1537. return true;
  1538. }
  1539. }
  1540. },
  1541. credits: {
  1542. enabled: false //去掉hightchats水印
  1543. },
  1544. title: {
  1545. text: null
  1546. },
  1547. tooltip: {
  1548. crosshairs: true,
  1549. backgroundColor: 'rgba(0,0,0,0.5)',
  1550. useHTML: true, //开启html模式
  1551. style: {
  1552. color:'#fff',
  1553. },
  1554. formatter: function(e){
  1555. //console.log(this, e)
  1556. this.percentage = Math.round(this.percentage)
  1557. // e.options.backgroundColor = 'rgba(0,0,0,0.5)'
  1558. // e.options.style.color = '#fff'
  1559. return `${this.key}:<b>${this.percentage}%</b><br/>金额:<b>${this.y}</b>亿`
  1560. },
  1561. //pointFormat:
  1562. },
  1563. legend: {
  1564. layout: 'vertical',
  1565. align: 'left',
  1566. verticalAlign: 'bottom',
  1567. itemStyle:{
  1568. color: '#fff'
  1569. }
  1570. },
  1571. plotOptions: {
  1572. pie: {
  1573. allowPointSelect: true,
  1574. showInLegend: true, // 图例
  1575. cursor: 'pointer',
  1576. size: 400,
  1577. innerSize : 250, //环形图中间空白,0为饼图
  1578. depth: 28, //立体高度
  1579. slicedOffset: 23, //动画距离
  1580. dataLabels: {
  1581. enabled: false, // 是否展示指示线
  1582. format: '{point.name}: {point.percentage}'
  1583. }
  1584. },
  1585. },
  1586. series: [{
  1587. type: 'pie',
  1588. name: '占比',
  1589. center: ['35%','50%'],
  1590. point: {
  1591. events:{
  1592. click:function(e){ //点击事件
  1593. //console.log(e)
  1594. if (e.point.name == '战略新兴产业') {
  1595. that.tipTitle2 = e.point.name
  1596. that.showTip2 = true
  1597. }
  1598. },
  1599. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1600. //console.log(e)
  1601. chartData.forEach((item,index) => {
  1602. item.sliced = false
  1603. item.selected = false
  1604. })
  1605. chartData[e.target.index].sliced = true
  1606. chartData[e.target.index].selected = true
  1607. chart.update({
  1608. series:[{
  1609. type: 'pie',
  1610. name: '占比',
  1611. point: {
  1612. events:{
  1613. click:function(e){
  1614. if (e.point.name == '战略新兴产业') {
  1615. that.tipTitle2 = e.point.name
  1616. that.showTip2 = true
  1617. }
  1618. }
  1619. }
  1620. },
  1621. data: chartData
  1622. }]
  1623. })
  1624. timer && clearIinterval(timer);
  1625. },
  1626. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  1627. var points = chart.series[0].points;
  1628. var len = points.length;
  1629. timer && clearIinterval(timer);
  1630. timer = setIinterval(function () {
  1631. autoTooltip(points[i]);
  1632. chartData.forEach((item,index) => {
  1633. item.sliced = false
  1634. item.selected = false
  1635. if(index == i){
  1636. item.sliced = true
  1637. item.selected = true
  1638. }
  1639. })
  1640. chart.update({
  1641. series:[{
  1642. type: 'pie',
  1643. name: '占比',
  1644. point: {
  1645. events:{
  1646. click:function(e){
  1647. if (e.point.name == '战略新兴产业') {
  1648. that.tipTitle2 = e.point.name
  1649. that.showTip2 = true
  1650. }
  1651. }
  1652. }
  1653. },
  1654. data: chartData
  1655. }]
  1656. })
  1657. i++;
  1658. if (i === len) {
  1659. i = 0;
  1660. }
  1661. }, 2000);
  1662. }
  1663. }
  1664. },
  1665. data: chartData
  1666. }]
  1667. });
  1668. function autoTooltip(point) {
  1669. chart.tooltip.refresh(point);
  1670. }
  1671. // let myChart = echarts.init(this.$refs['echartR1'])
  1672. // let option = {
  1673. // tooltip: {
  1674. // trigger: 'item',
  1675. // //position: ['65%', '42%'],
  1676. // position: (point,params,dom,rect,size) => {
  1677. // if(params.name == '传统产业'){
  1678. // return ['55%','25%']
  1679. // } else if (params.name == '战略新兴产业') {
  1680. // return ['55%','65%']
  1681. // } else if (params.name == '基础产业') {
  1682. // return ['18%','35%']
  1683. // }
  1684. // },
  1685. // formatter: params => {
  1686. // return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}:${params.percent}% <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 金额:${params.value}亿`
  1687. // }, //+ '<br/>'+ '{a1}:{c1}' + '%',
  1688. // axisPointer: {
  1689. // type: 'cross',
  1690. // },
  1691. // },
  1692. // color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
  1693. // legend: {
  1694. // left: '2%',
  1695. // bottom: '2%',
  1696. // orient: 'vertical',
  1697. // //right: '2%',
  1698. // textStyle: {
  1699. // color: '#9DB9EB',
  1700. // },
  1701. // },
  1702. // series: [
  1703. // // {
  1704. // // hoverOffset: 0,
  1705. // // startAngle: 90,
  1706. // // type: "pie",
  1707. // // radius: [48, 55],
  1708. // // center: ["50%", "50%"],
  1709. // // itemStyle: {
  1710. // // normal: {
  1711. // // borderColor: 'rgba(1,31,6,0.7)',
  1712. // // borderWidth: 4
  1713. // // }
  1714. // // },
  1715. // // tooltip: {
  1716. // // show: false
  1717. // // },
  1718. // // labelLine: {
  1719. // // show: false
  1720. // // },
  1721. // // label: {
  1722. // // show: false
  1723. // // },
  1724. // // data: industryList
  1725. // // },
  1726. // {
  1727. // name: '',
  1728. // type: 'pie',
  1729. // radius: ['50%', '75%'],
  1730. // center: ["50%", "50%"],
  1731. // label:{
  1732. // show: false,
  1733. // },
  1734. // itemStyle: {
  1735. // normal: {
  1736. // borderColor: 'rgba(1,31,64,0.7)',
  1737. // borderWidth: 6
  1738. // }
  1739. // },
  1740. // labelLine: {
  1741. // show: false,
  1742. // },
  1743. // data: industryList,
  1744. // },
  1745. // ],
  1746. // }
  1747. // let that = this
  1748. // myChart.on('click', function (param) {
  1749. // if (param.name == '战略新兴产业') {
  1750. // that.tipTitle2 = param.name
  1751. // that.showTip2 = true
  1752. // }
  1753. // })
  1754. // myChart.setOption(option)
  1755. // tools.loopShowTooltip(myChart, option, {
  1756. // interval: 2000,
  1757. // loopSeries: true,
  1758. // })
  1759. },
  1760. initChartL2() {
  1761. let myChart = echarts.init(this.$refs['echartL2'])
  1762. let option = {
  1763. tooltip: {
  1764. formatter: data => {
  1765. return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}:${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${data[1].value}亿`
  1766. },
  1767. trigger: 'axis',
  1768. axisPointer: {
  1769. type: 'cross',
  1770. },
  1771. },
  1772. dataZoom:[
  1773. {
  1774. // start: 9,//默认为@
  1775. // end: 100,//黑认认为1@0
  1776. type: "slider",
  1777. show: false,
  1778. // xAxisIndex: [0]
  1779. handlesize: 0,//滑动条的 左右2个滑动条的大小
  1780. startValue: 5,// 初始显示值
  1781. endValue: 0,// 结束显示值
  1782. height: 10,//组件高度
  1783. left:"5%",
  1784. right: "4%",//右边的距离
  1785. bottom: "25%",//底边的距离
  1786. borderColor:"#939",
  1787. fillerColor:"#269cdb",
  1788. borderRadius: 5,
  1789. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  1790. showDataShadow: false,//是否显示数据阴影
  1791. showDetail: false,//即拖拽时候是否显示详细数值信息
  1792. truerealtime: true,//是否实时更新
  1793. filterMode: "filter"
  1794. },{
  1795. type:'inside',
  1796. show: true,
  1797. start: 1,
  1798. end: 100
  1799. }
  1800. ],
  1801. grid: {
  1802. top: '10%',
  1803. right: '3%',
  1804. left: '7%',
  1805. bottom: '7%',
  1806. },
  1807. legend: {
  1808. top: '1',
  1809. right: '10',
  1810. textStyle: {
  1811. color: 'rgba(250,250,250,0.6)',
  1812. },
  1813. },
  1814. xAxis: {
  1815. data: executeList.map(item => item.name),
  1816. axisLine: {
  1817. show: true, //隐藏X轴轴线
  1818. lineStyle: {
  1819. color: '#005094',
  1820. width: 1,
  1821. },
  1822. },
  1823. axisTick: {
  1824. show: false, //隐藏X轴刻度
  1825. },
  1826. axisLabel: {
  1827. show: true,
  1828. rotate: 40,
  1829. textStyle: {
  1830. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  1831. },
  1832. },
  1833. },
  1834. yAxis: [
  1835. {
  1836. type: 'value',
  1837. name: '亿元',
  1838. nameTextStyle: {
  1839. color: 'rgba(255,255,255,0.6)',
  1840. },
  1841. splitLine: {
  1842. show: true,
  1843. lineStyle: {
  1844. color: '#68b4dd66',
  1845. type: 'dashed',
  1846. },
  1847. },
  1848. axisLine: {
  1849. show: true,
  1850. lineStyle: {
  1851. color: '#3D7495',
  1852. },
  1853. },
  1854. axisLabel: {
  1855. show: true,
  1856. textStyle: {
  1857. color: 'rgba(250,250,250,0.6)',
  1858. },
  1859. },
  1860. },
  1861. ],
  1862. series: [
  1863. {
  1864. name: '计划投资',
  1865. type: 'bar',
  1866. barWidth: 10,
  1867. itemStyle: {
  1868. normal: {
  1869. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1870. {
  1871. offset: 0,
  1872. color: '#69c0ff',
  1873. },
  1874. {
  1875. offset: 1,
  1876. color: '#082550',
  1877. },
  1878. ]),
  1879. },
  1880. },
  1881. data: executeList.map(item => item.value),
  1882. },
  1883. {
  1884. name: '实际投资',
  1885. type: 'bar',
  1886. barWidth: 10,
  1887. itemStyle: {
  1888. normal: {
  1889. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1890. {
  1891. offset: 0,
  1892. color: '#957DFF',
  1893. },
  1894. {
  1895. offset: 1,
  1896. color: '#082550',
  1897. },
  1898. ]),
  1899. },
  1900. },
  1901. data: executeList.map(item => item.value2),
  1902. },
  1903. ],
  1904. }
  1905. myChart.setOption(option)
  1906. tools.loopShowTooltip(myChart, option, {
  1907. interval: 2000,
  1908. loopSeries: true,
  1909. })
  1910. let arr = executeList.map(item => item.value2)
  1911. this.timeOut = setIinterval(function () {
  1912. let startValue = myChart.getModel().option.dataZoom[0].startValue;
  1913. let endValue = myChart.getModel().option.dataZoom[0].endValue;
  1914. let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
  1915. let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
  1916. // 每次向后滚动一个,最后一个从头开始。
  1917. // console.log(option.dataZoom[0].endValue);
  1918. if (option.dataZoom[0].endValue >= 12) {
  1919. option.dataZoom[0].endValue = 5
  1920. option.dataZoom[0].startValue = 0
  1921. } else {
  1922. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  1923. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  1924. }
  1925. // myChart.dispatchAction({
  1926. // type: 'showTip',
  1927. // seriesIndex: 0,
  1928. // dataIndex: startValue +1,
  1929. // });
  1930. myChart.setOption(option);
  1931. }, 12000);
  1932. },
  1933. initChartR1() {
  1934. let myChart = echarts.init(this.$refs['echartL1'])
  1935. let option = {
  1936. tooltip: {
  1937. trigger: 'axis',
  1938. formatter: '{a0}:{c0}' + '亿元', //+ '<br/>'+ '{a1}:{c1}' + '%',
  1939. axisPointer: {
  1940. type: 'cross',
  1941. },
  1942. },
  1943. grid: {
  1944. top: '5%',
  1945. right: '4%',
  1946. left: '7%',
  1947. bottom: '17%',
  1948. },
  1949. // legend: {
  1950. // top: '1',
  1951. // textStyle: {
  1952. // color: 'rgba(250,250,250,0.6)',
  1953. // },
  1954. // },
  1955. xAxis: {
  1956. data: statusList.map(item => item.name),
  1957. axisLine: {
  1958. show: true, //隐藏X轴轴线
  1959. lineStyle: {
  1960. color: '#005094',
  1961. width: 1,
  1962. },
  1963. },
  1964. axisTick: {
  1965. show: false, //隐藏X轴刻度
  1966. },
  1967. axisLabel: {
  1968. show: true,
  1969. rotate: 20,
  1970. textStyle: {
  1971. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  1972. },
  1973. },
  1974. },
  1975. yAxis: [
  1976. {
  1977. type: 'value',
  1978. name: '亿元',
  1979. nameTextStyle: {
  1980. color: 'rgba(255,255,255,0.6)',
  1981. },
  1982. splitLine: {
  1983. show: true,
  1984. lineStyle: {
  1985. color: '#68b4dd66',
  1986. type: 'dashed',
  1987. },
  1988. },
  1989. axisLine: {
  1990. show: true,
  1991. lineStyle: {
  1992. color: '#3D7495',
  1993. },
  1994. },
  1995. axisLabel: {
  1996. show: true,
  1997. textStyle: {
  1998. color: 'rgba(250,250,250,0.6)',
  1999. },
  2000. },
  2001. },
  2002. {
  2003. type: 'value',
  2004. axisLine: {
  2005. show: false,
  2006. },
  2007. splitLine: {
  2008. show: false,
  2009. },
  2010. axisLabel: {
  2011. show: true,
  2012. formatter: '{value} %',
  2013. textStyle: {
  2014. color: 'rgba(250,250,250,0.6)',
  2015. },
  2016. },
  2017. },
  2018. ],
  2019. series: [
  2020. {
  2021. type: 'bar',
  2022. name: '投资金额',
  2023. barWidth: 15,
  2024. itemStyle: {
  2025. normal: {
  2026. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  2027. {
  2028. offset: 0,
  2029. color: '#69c0ff',
  2030. },
  2031. {
  2032. offset: 1,
  2033. color: '#082550',
  2034. },
  2035. ]),
  2036. },
  2037. },
  2038. data: statusList.map(item => item.value),
  2039. },
  2040. ],
  2041. }
  2042. myChart.setOption(option)
  2043. tools.loopShowTooltip(myChart, option, {
  2044. interval: 2000,
  2045. loopSeries: true,
  2046. })
  2047. },
  2048. initChartR2() {
  2049. var chartData = []
  2050. var timer = null;
  2051. var timer2 = null;
  2052. var i = 0;
  2053. chartDateR2.forEach((item,index) => {
  2054. let obj = {
  2055. name: item.name,
  2056. y: item.value2,
  2057. num: item.value,
  2058. sliced: false,
  2059. selected: false,
  2060. color: index == 0 ? '#43ede3' : '#8ba2ff'
  2061. }
  2062. chartData.push(obj)
  2063. })
  2064. let that = this
  2065. var chart = Highcharts.chart('echartR2', {
  2066. chart: {
  2067. type: 'pie',
  2068. backgroundColor: 'rgba(0,0,0,0)',
  2069. options3d: {
  2070. enabled: true,
  2071. alpha: 45,
  2072. //beta: 0
  2073. },
  2074. events: {
  2075. // load,图表加载完成时触发
  2076. load: function () {
  2077. var chart = this;
  2078. var points = chart.series[0].points;
  2079. var len = points.length;
  2080. timer && clearIinterval(timer);
  2081. timer = setIinterval(function () {
  2082. autoTooltip(points[i]);
  2083. chartData.forEach((item,index) => {
  2084. item.sliced = false
  2085. item.selected = false
  2086. if(index == i){
  2087. item.sliced = true
  2088. item.selected = true
  2089. }
  2090. })
  2091. chart.update({
  2092. series:[{
  2093. type: 'pie',
  2094. name: '占比',
  2095. point: {
  2096. events:{
  2097. click:function(e){
  2098. console.log(e)
  2099. }
  2100. }
  2101. },
  2102. data: chartData
  2103. }]
  2104. })
  2105. i++;
  2106. if (i === len) {
  2107. i = 0;
  2108. chartData.forEach((item,index) => {
  2109. item.sliced = false
  2110. item.selected = false
  2111. })
  2112. chart.update({
  2113. series:[{
  2114. type: 'pie',
  2115. name: '占比',
  2116. point: {
  2117. events:{
  2118. click:function(e){
  2119. console.log(e)
  2120. }
  2121. }
  2122. },
  2123. data: chartData
  2124. }]
  2125. })
  2126. }
  2127. }, 2000);
  2128. },
  2129. legendItemClick : function(event) {
  2130. console.log(event);
  2131. return true;
  2132. }
  2133. }
  2134. },
  2135. credits: {
  2136. enabled: false //去掉hightchats水印
  2137. },
  2138. title: {
  2139. text: null
  2140. },
  2141. tooltip: {
  2142. crosshairs: true,
  2143. backgroundColor: 'rgba(0,0,0,0.5)',
  2144. // positioner: function(e){
  2145. // console.log(e, this)
  2146. // },
  2147. useHTML: true, //开启html模式
  2148. style: {
  2149. color:'#fff',
  2150. },
  2151. formatter: function(e){
  2152. //console.log(this)
  2153. let num = chartData[this.colorIndex].num
  2154. this.percentage = Math.round(this.percentage)
  2155. return `${this.key}:<b>${this.percentage}%</b><br/>投资完成额:<b>${this.y}</b>亿<br/>投资数量:<b>${num}个</b>`
  2156. },
  2157. //pointFormat:
  2158. },
  2159. legend: {
  2160. layout: 'vertical',
  2161. align: 'left',
  2162. verticalAlign: 'bottom',
  2163. itemStyle:{
  2164. color: '#fff'
  2165. }
  2166. },
  2167. plotOptions: {
  2168. pie: {
  2169. allowPointSelect: true,
  2170. showInLegend: true, // 图例
  2171. cursor: 'pointer',
  2172. size: 400,
  2173. innerSize : 250, //环形图中间空白,0为饼图
  2174. depth: 28, //立体高度
  2175. slicedOffset: 23, //动画距离
  2176. dataLabels: {
  2177. enabled: false, // 是否展示指示线
  2178. format: '{point.name}: {point.percentage}'
  2179. }
  2180. },
  2181. },
  2182. series: [{
  2183. type: 'pie',
  2184. name: '占比',
  2185. center: ['45%','50%'],
  2186. point: {
  2187. events:{
  2188. click:function(e){ //点击事件
  2189. },
  2190. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2191. //console.log(e)
  2192. chartData.forEach((item,index) => {
  2193. item.sliced = false
  2194. item.selected = false
  2195. })
  2196. chartData[e.target.index].sliced = true
  2197. chartData[e.target.index].selected = true
  2198. chart.update({
  2199. series:[{
  2200. type: 'pie',
  2201. name: '占比',
  2202. point: {
  2203. events:{
  2204. click:function(e){
  2205. console.log(e)
  2206. }
  2207. }
  2208. },
  2209. data: chartData
  2210. }]
  2211. })
  2212. timer && clearIinterval(timer);
  2213. },
  2214. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  2215. var points = chart.series[0].points;
  2216. var len = points.length;
  2217. timer && clearIinterval(timer);
  2218. timer = setIinterval(function () {
  2219. autoTooltip(points[i]);
  2220. chartData.forEach((item,index) => {
  2221. item.sliced = false
  2222. item.selected = false
  2223. if(index == i){
  2224. item.sliced = true
  2225. item.selected = true
  2226. }
  2227. })
  2228. chart.update({
  2229. series:[{
  2230. type: 'pie',
  2231. name: '占比',
  2232. point: {
  2233. events:{
  2234. click:function(e){
  2235. console.log(e)
  2236. }
  2237. }
  2238. },
  2239. data: chartData
  2240. }]
  2241. })
  2242. i++;
  2243. if (i === len) {
  2244. i = 0;
  2245. chartData.forEach((item,index) => {
  2246. item.sliced = false
  2247. item.selected = false
  2248. })
  2249. chart.update({
  2250. series:[{
  2251. type: 'pie',
  2252. name: '占比',
  2253. point: {
  2254. events:{
  2255. click:function(e){
  2256. console.log(e)
  2257. }
  2258. }
  2259. },
  2260. data: chartData
  2261. }]
  2262. })
  2263. }
  2264. }, 2000);
  2265. }
  2266. }
  2267. },
  2268. data: chartData
  2269. }]
  2270. });
  2271. function autoTooltip(point) {
  2272. chart.tooltip.refresh(point);
  2273. }
  2274. // let myChart = echarts.init(this.$refs['echartR2'])
  2275. // let option = {
  2276. // tooltip: {
  2277. // trigger: 'item',
  2278. // position: (point,params,dom,rect,size) => {
  2279. // if(params.name == '新建'){
  2280. // return ['55%','45%']
  2281. // } else {
  2282. // return ['15%','40%']
  2283. // }
  2284. // },
  2285. // formatter: params => {
  2286. // return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}:${params.value}个 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资完成额:${params.data.value2}亿`
  2287. // }, //+ '<br/>'+ '{a1}:{c1}' + '%',
  2288. // axisPointer: {
  2289. // type: 'cross',
  2290. // },
  2291. // },
  2292. // color: [ '#43ede3', '#8ba2ff'],
  2293. // legend: {
  2294. // left: '5%',
  2295. // bottom: '2%',
  2296. // orient: 'vertical',
  2297. // //right: '2%',
  2298. // textStyle: {
  2299. // color: '#9DB9EB',
  2300. // },
  2301. // },
  2302. // series: [
  2303. // {
  2304. // name: '',
  2305. // type: 'pie',
  2306. // radius: ['50%', '75%'],
  2307. // center: ["50%", "50%"],
  2308. // label:{
  2309. // show: false,
  2310. // },
  2311. // itemStyle: {
  2312. // normal: {
  2313. // borderColor: 'rgba(1,31,64,0.7)',
  2314. // borderWidth: 6
  2315. // }
  2316. // },
  2317. // labelLine: {
  2318. // show: false,
  2319. // },
  2320. // data: chartDateR2,
  2321. // },
  2322. // ],
  2323. // }
  2324. // myChart.setOption(option)
  2325. // tools.loopShowTooltip(myChart, option, {
  2326. // interval: 10000,
  2327. // loopSeries: true,
  2328. // })
  2329. },
  2330. initProjectList() {
  2331. let dataList2 = []
  2332. projectList.map(item => {
  2333. dataList2.push([item.office,item.name, item.value + '亿'])
  2334. })
  2335. this.storageRecordConfig = {
  2336. header: ['企业集团', '项目名称', '投资金额'],
  2337. headerBGC: '#05507b33',
  2338. oddRowBGC: '#05507b33',
  2339. evenRowBGC: '',
  2340. headerHeight: '40',
  2341. rowNum: 8,
  2342. columnWidth: [100, 550,100],
  2343. align: ['center', 'center', 'center'],
  2344. data: dataList2,
  2345. }
  2346. }
  2347. },
  2348. })