copyHome.js 85 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413
  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 = setInterval(() => {
  53. this.time = formatDate()
  54. }, 1000)
  55. },
  56. beforeDestroy() {
  57. if (this.timer) {
  58. clearInterval(this.timer);
  59. }
  60. clearInterval(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. interval: 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. // nterval: 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. nterval: 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. nterval: 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. nterval: 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 = setInterval(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 && clearInterval(timer);
  1502. timer = setInterval(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. console.log(e)
  1520. }
  1521. }
  1522. },
  1523. data: chartData
  1524. }]
  1525. })
  1526. i++;
  1527. if (i === len) {
  1528. i = 0;
  1529. }
  1530. }, 2000);
  1531. },
  1532. legendItemClick : function(event) {
  1533. console.log(event);
  1534. return true;
  1535. }
  1536. }
  1537. },
  1538. credits: {
  1539. enabled: false //去掉hightchats水印
  1540. },
  1541. title: {
  1542. text: null
  1543. },
  1544. tooltip: {
  1545. crosshairs: true,
  1546. backgroundColor: 'rgba(0,0,0,0.5)',
  1547. useHTML: true, //开启html模式
  1548. style: {
  1549. color:'#fff',
  1550. },
  1551. formatter: function(e){
  1552. //console.log(this, e)
  1553. this.percentage = Math.round(this.percentage)
  1554. // e.options.backgroundColor = 'rgba(0,0,0,0.5)'
  1555. // e.options.style.color = '#fff'
  1556. return `${this.key}:<b>${this.percentage}%</b><br/>金额:<b>${this.y}</b>亿`
  1557. },
  1558. //pointFormat:
  1559. },
  1560. legend: {
  1561. layout: 'vertical',
  1562. align: 'left',
  1563. verticalAlign: 'bottom',
  1564. itemStyle:{
  1565. color: '#fff'
  1566. }
  1567. },
  1568. plotOptions: {
  1569. pie: {
  1570. allowPointSelect: true,
  1571. showInLegend: true, // 图例
  1572. cursor: 'pointer',
  1573. size: 180,
  1574. innerSize : 110, //环形图中间空白,0为饼图
  1575. depth: 28, //立体高度
  1576. slicedOffset: 23, //动画距离
  1577. dataLabels: {
  1578. enabled: false, // 是否展示指示线
  1579. format: '{point.name}: {point.percentage}'
  1580. }
  1581. },
  1582. },
  1583. series: [{
  1584. type: 'pie',
  1585. name: '占比',
  1586. center: ['35%','50%'],
  1587. point: {
  1588. events:{
  1589. click:function(e){ //点击事件
  1590. //console.log(e)
  1591. if (e.point.name == '战略新兴产业') {
  1592. that.tipTitle2 = e.point.name
  1593. that.showTip2 = true
  1594. }
  1595. },
  1596. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1597. //console.log(e)
  1598. chartData.forEach((item,index) => {
  1599. item.sliced = false
  1600. item.selected = false
  1601. })
  1602. chartData[e.target.index].sliced = true
  1603. chartData[e.target.index].selected = true
  1604. chart.update({
  1605. series:[{
  1606. type: 'pie',
  1607. name: '占比',
  1608. point: {
  1609. events:{
  1610. click:function(e){
  1611. console.log(e)
  1612. }
  1613. }
  1614. },
  1615. data: chartData
  1616. }]
  1617. })
  1618. timer && clearInterval(timer);
  1619. },
  1620. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  1621. var points = chart.series[0].points;
  1622. var len = points.length;
  1623. timer && clearInterval(timer);
  1624. timer = setInterval(function () {
  1625. autoTooltip(points[i]);
  1626. chartData.forEach((item,index) => {
  1627. item.sliced = false
  1628. item.selected = false
  1629. if(index == i){
  1630. item.sliced = true
  1631. item.selected = true
  1632. }
  1633. })
  1634. chart.update({
  1635. series:[{
  1636. type: 'pie',
  1637. name: '占比',
  1638. point: {
  1639. events:{
  1640. click:function(e){
  1641. console.log(e)
  1642. }
  1643. }
  1644. },
  1645. data: chartData
  1646. }]
  1647. })
  1648. i++;
  1649. if (i === len) {
  1650. i = 0;
  1651. }
  1652. }, 2000);
  1653. }
  1654. }
  1655. },
  1656. data: chartData
  1657. }]
  1658. });
  1659. function autoTooltip(point) {
  1660. chart.tooltip.refresh(point);
  1661. }
  1662. // let myChart = echarts.init(this.$refs['echartR1'])
  1663. // let option = {
  1664. // tooltip: {
  1665. // trigger: 'item',
  1666. // //position: ['65%', '42%'],
  1667. // position: (point,params,dom,rect,size) => {
  1668. // if(params.name == '传统产业'){
  1669. // return ['55%','25%']
  1670. // } else if (params.name == '战略新兴产业') {
  1671. // return ['55%','65%']
  1672. // } else if (params.name == '基础产业') {
  1673. // return ['18%','35%']
  1674. // }
  1675. // },
  1676. // formatter: params => {
  1677. // 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}亿`
  1678. // }, //+ '<br/>'+ '{a1}:{c1}' + '%',
  1679. // axisPointer: {
  1680. // type: 'cross',
  1681. // },
  1682. // },
  1683. // color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
  1684. // legend: {
  1685. // left: '2%',
  1686. // bottom: '2%',
  1687. // orient: 'vertical',
  1688. // //right: '2%',
  1689. // textStyle: {
  1690. // color: '#9DB9EB',
  1691. // },
  1692. // },
  1693. // series: [
  1694. // // {
  1695. // // hoverOffset: 0,
  1696. // // startAngle: 90,
  1697. // // type: "pie",
  1698. // // radius: [48, 55],
  1699. // // center: ["50%", "50%"],
  1700. // // itemStyle: {
  1701. // // normal: {
  1702. // // borderColor: 'rgba(1,31,6,0.7)',
  1703. // // borderWidth: 4
  1704. // // }
  1705. // // },
  1706. // // tooltip: {
  1707. // // show: false
  1708. // // },
  1709. // // labelLine: {
  1710. // // show: false
  1711. // // },
  1712. // // label: {
  1713. // // show: false
  1714. // // },
  1715. // // data: industryList
  1716. // // },
  1717. // {
  1718. // name: '',
  1719. // type: 'pie',
  1720. // radius: ['50%', '75%'],
  1721. // center: ["50%", "50%"],
  1722. // label:{
  1723. // show: false,
  1724. // },
  1725. // itemStyle: {
  1726. // normal: {
  1727. // borderColor: 'rgba(1,31,64,0.7)',
  1728. // borderWidth: 6
  1729. // }
  1730. // },
  1731. // labelLine: {
  1732. // show: false,
  1733. // },
  1734. // data: industryList,
  1735. // },
  1736. // ],
  1737. // }
  1738. // let that = this
  1739. // myChart.on('click', function (param) {
  1740. // if (param.name == '战略新兴产业') {
  1741. // that.tipTitle2 = param.name
  1742. // that.showTip2 = true
  1743. // }
  1744. // })
  1745. // myChart.setOption(option)
  1746. // tools.loopShowTooltip(myChart, option, {
  1747. // nterval: 2000,
  1748. // loopSeries: true,
  1749. // })
  1750. },
  1751. initChartL2() {
  1752. let myChart = echarts.init(this.$refs['echartL2'])
  1753. let option = {
  1754. tooltip: {
  1755. formatter: data => {
  1756. 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}亿`
  1757. },
  1758. trigger: 'axis',
  1759. axisPointer: {
  1760. type: 'cross',
  1761. },
  1762. },
  1763. dataZoom:[
  1764. {
  1765. // start: 9,//默认为@
  1766. // end: 100,//黑认认为1@0
  1767. type: "slider",
  1768. show: false,
  1769. // xAxisIndex: [0]
  1770. handlesize: 0,//滑动条的 左右2个滑动条的大小
  1771. startValue: 5,// 初始显示值
  1772. endValue: 0,// 结束显示值
  1773. height: 10,//组件高度
  1774. left:"5%",
  1775. right: "4%",//右边的距离
  1776. bottom: "25%",//底边的距离
  1777. borderColor:"#939",
  1778. fillerColor:"#269cdb",
  1779. borderRadius: 5,
  1780. backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
  1781. showDataShadow: false,//是否显示数据阴影
  1782. showDetail: false,//即拖拽时候是否显示详细数值信息
  1783. truerealtime: true,//是否实时更新
  1784. filterMode: "filter"
  1785. },{
  1786. type:'inside',
  1787. show: true,
  1788. start: 1,
  1789. end: 100
  1790. }
  1791. ],
  1792. grid: {
  1793. top: '16%',
  1794. right: '3%',
  1795. left: '10%',
  1796. bottom: '23%',
  1797. },
  1798. legend: {
  1799. top: '1',
  1800. right: '10',
  1801. textStyle: {
  1802. color: 'rgba(250,250,250,0.6)',
  1803. },
  1804. },
  1805. xAxis: {
  1806. data: executeList.map(item => item.name),
  1807. axisLine: {
  1808. show: true, //隐藏X轴轴线
  1809. lineStyle: {
  1810. color: '#005094',
  1811. width: 1,
  1812. },
  1813. },
  1814. axisTick: {
  1815. show: false, //隐藏X轴刻度
  1816. },
  1817. axisLabel: {
  1818. show: true,
  1819. rotate: 40,
  1820. textStyle: {
  1821. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  1822. },
  1823. },
  1824. },
  1825. yAxis: [
  1826. {
  1827. type: 'value',
  1828. name: '亿元',
  1829. nameTextStyle: {
  1830. color: 'rgba(255,255,255,0.6)',
  1831. },
  1832. splitLine: {
  1833. show: true,
  1834. lineStyle: {
  1835. color: '#68b4dd66',
  1836. type: 'dashed',
  1837. },
  1838. },
  1839. axisLine: {
  1840. show: true,
  1841. lineStyle: {
  1842. color: '#3D7495',
  1843. },
  1844. },
  1845. axisLabel: {
  1846. show: true,
  1847. textStyle: {
  1848. color: 'rgba(250,250,250,0.6)',
  1849. },
  1850. },
  1851. },
  1852. ],
  1853. series: [
  1854. {
  1855. name: '计划投资',
  1856. type: 'bar',
  1857. barWidth: 10,
  1858. itemStyle: {
  1859. normal: {
  1860. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1861. {
  1862. offset: 0,
  1863. color: '#69c0ff',
  1864. },
  1865. {
  1866. offset: 1,
  1867. color: '#082550',
  1868. },
  1869. ]),
  1870. },
  1871. },
  1872. data: executeList.map(item => item.value),
  1873. },
  1874. {
  1875. name: '实际投资',
  1876. type: 'bar',
  1877. barWidth: 10,
  1878. itemStyle: {
  1879. normal: {
  1880. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1881. {
  1882. offset: 0,
  1883. color: '#957DFF',
  1884. },
  1885. {
  1886. offset: 1,
  1887. color: '#082550',
  1888. },
  1889. ]),
  1890. },
  1891. },
  1892. data: executeList.map(item => item.value2),
  1893. },
  1894. ],
  1895. }
  1896. myChart.setOption(option)
  1897. tools.loopShowTooltip(myChart, option, {
  1898. nterval: 2000,
  1899. loopSeries: true,
  1900. })
  1901. let arr = executeList.map(item => item.value2)
  1902. this.timeOut = setInterval(function () {
  1903. let startValue = myChart.getModel().option.dataZoom[0].startValue;
  1904. let endValue = myChart.getModel().option.dataZoom[0].endValue;
  1905. let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
  1906. let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
  1907. // 每次向后滚动一个,最后一个从头开始。
  1908. // console.log(option.dataZoom[0].endValue);
  1909. if (option.dataZoom[0].endValue >= 12) {
  1910. option.dataZoom[0].endValue = 5
  1911. option.dataZoom[0].startValue = 0
  1912. } else {
  1913. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
  1914. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
  1915. }
  1916. // myChart.dispatchAction({
  1917. // type: 'showTip',
  1918. // seriesIndex: 0,
  1919. // dataIndex: startValue +1,
  1920. // });
  1921. myChart.setOption(option);
  1922. }, 12000);
  1923. },
  1924. initChartR1() {
  1925. let myChart = echarts.init(this.$refs['echartL1'])
  1926. let option = {
  1927. tooltip: {
  1928. trigger: 'axis',
  1929. formatter: '{a0}:{c0}' + '亿元', //+ '<br/>'+ '{a1}:{c1}' + '%',
  1930. axisPointer: {
  1931. type: 'cross',
  1932. },
  1933. },
  1934. grid: {
  1935. top: '16%',
  1936. right: '10%',
  1937. left: '10%',
  1938. bottom: '22%',
  1939. },
  1940. // legend: {
  1941. // top: '1',
  1942. // textStyle: {
  1943. // color: 'rgba(250,250,250,0.6)',
  1944. // },
  1945. // },
  1946. xAxis: {
  1947. data: statusList.map(item => item.name),
  1948. axisLine: {
  1949. show: true, //隐藏X轴轴线
  1950. lineStyle: {
  1951. color: '#005094',
  1952. width: 1,
  1953. },
  1954. },
  1955. axisTick: {
  1956. show: false, //隐藏X轴刻度
  1957. },
  1958. axisLabel: {
  1959. show: true,
  1960. rotate: 20,
  1961. textStyle: {
  1962. color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
  1963. },
  1964. },
  1965. },
  1966. yAxis: [
  1967. {
  1968. type: 'value',
  1969. name: '亿元',
  1970. nameTextStyle: {
  1971. color: 'rgba(255,255,255,0.6)',
  1972. },
  1973. splitLine: {
  1974. show: true,
  1975. lineStyle: {
  1976. color: '#68b4dd66',
  1977. type: 'dashed',
  1978. },
  1979. },
  1980. axisLine: {
  1981. show: true,
  1982. lineStyle: {
  1983. color: '#3D7495',
  1984. },
  1985. },
  1986. axisLabel: {
  1987. show: true,
  1988. textStyle: {
  1989. color: 'rgba(250,250,250,0.6)',
  1990. },
  1991. },
  1992. },
  1993. {
  1994. type: 'value',
  1995. axisLine: {
  1996. show: false,
  1997. },
  1998. splitLine: {
  1999. show: false,
  2000. },
  2001. axisLabel: {
  2002. show: true,
  2003. formatter: '{value} %',
  2004. textStyle: {
  2005. color: 'rgba(250,250,250,0.6)',
  2006. },
  2007. },
  2008. },
  2009. ],
  2010. series: [
  2011. {
  2012. type: 'bar',
  2013. name: '投资金额',
  2014. barWidth: 15,
  2015. itemStyle: {
  2016. normal: {
  2017. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  2018. {
  2019. offset: 0,
  2020. color: '#69c0ff',
  2021. },
  2022. {
  2023. offset: 1,
  2024. color: '#082550',
  2025. },
  2026. ]),
  2027. },
  2028. },
  2029. data: statusList.map(item => item.value),
  2030. },
  2031. ],
  2032. }
  2033. myChart.setOption(option)
  2034. tools.loopShowTooltip(myChart, option, {
  2035. nterval: 2000,
  2036. loopSeries: true,
  2037. })
  2038. },
  2039. initChartR2() {
  2040. var chartData = []
  2041. var timer = null;
  2042. var timer2 = null;
  2043. var i = 0;
  2044. chartDateR2.forEach((item,index) => {
  2045. let obj = {
  2046. name: item.name,
  2047. y: item.value2,
  2048. x: item.value,
  2049. sliced: false,
  2050. selected: false,
  2051. color: index == 0 ? '#43ede3' : '#8ba2ff'
  2052. }
  2053. chartData.push(obj)
  2054. })
  2055. let that = this
  2056. var chart = Highcharts.chart('echartR2', {
  2057. chart: {
  2058. type: 'pie',
  2059. backgroundColor: 'rgba(0,0,0,0)',
  2060. options3d: {
  2061. enabled: true,
  2062. alpha: 45,
  2063. //beta: 0
  2064. },
  2065. events: {
  2066. // load,图表加载完成时触发
  2067. load: function () {
  2068. var chart = this;
  2069. var points = chart.series[0].points;
  2070. var len = points.length;
  2071. timer && clearInterval(timer);
  2072. timer = setInterval(function () {
  2073. autoTooltip(points[i]);
  2074. chartData.forEach((item,index) => {
  2075. item.sliced = false
  2076. item.selected = false
  2077. if(index == i){
  2078. item.sliced = true
  2079. item.selected = true
  2080. }
  2081. })
  2082. chart.update({
  2083. series:[{
  2084. type: 'pie',
  2085. name: '占比',
  2086. point: {
  2087. events:{
  2088. click:function(e){
  2089. console.log(e)
  2090. }
  2091. }
  2092. },
  2093. data: chartData
  2094. }]
  2095. })
  2096. i++;
  2097. if (i === len) {
  2098. i = 0;
  2099. chartData.forEach((item,index) => {
  2100. item.sliced = false
  2101. item.selected = false
  2102. })
  2103. chart.update({
  2104. series:[{
  2105. type: 'pie',
  2106. name: '占比',
  2107. point: {
  2108. events:{
  2109. click:function(e){
  2110. console.log(e)
  2111. }
  2112. }
  2113. },
  2114. data: chartData
  2115. }]
  2116. })
  2117. }
  2118. }, 2000);
  2119. },
  2120. legendItemClick : function(event) {
  2121. console.log(event);
  2122. return true;
  2123. }
  2124. }
  2125. },
  2126. credits: {
  2127. enabled: false //去掉hightchats水印
  2128. },
  2129. title: {
  2130. text: null
  2131. },
  2132. tooltip: {
  2133. crosshairs: true,
  2134. backgroundColor: 'rgba(0,0,0,0.5)',
  2135. // positioner: function(e){
  2136. // console.log(e, this)
  2137. // },
  2138. useHTML: true, //开启html模式
  2139. style: {
  2140. color:'#fff',
  2141. },
  2142. formatter: function(e){
  2143. //console.log(this)
  2144. let num = chartData[this.colorIndex].x
  2145. this.percentage = Math.round(this.percentage)
  2146. return `${this.key}:<b>${this.percentage}%</b><br/>投资完成额:<b>${this.y}</b>亿<br/>投资数量:<b>${num}个</b>`
  2147. },
  2148. //pointFormat:
  2149. },
  2150. legend: {
  2151. layout: 'vertical',
  2152. align: 'left',
  2153. verticalAlign: 'bottom',
  2154. itemStyle:{
  2155. color: '#fff'
  2156. }
  2157. },
  2158. plotOptions: {
  2159. pie: {
  2160. allowPointSelect: true,
  2161. showInLegend: true, // 图例
  2162. cursor: 'pointer',
  2163. size: 180,
  2164. innerSize : 110, //环形图中间空白,0为饼图
  2165. depth: 28, //立体高度
  2166. slicedOffset: 23, //动画距离
  2167. dataLabels: {
  2168. enabled: false, // 是否展示指示线
  2169. format: '{point.name}: {point.percentage}'
  2170. }
  2171. },
  2172. },
  2173. series: [{
  2174. type: 'pie',
  2175. name: '占比',
  2176. center: ['35%','50%'],
  2177. point: {
  2178. events:{
  2179. click:function(e){ //点击事件
  2180. },
  2181. mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2182. //console.log(e)
  2183. chartData.forEach((item,index) => {
  2184. item.sliced = false
  2185. item.selected = false
  2186. })
  2187. chartData[e.target.index].sliced = true
  2188. chartData[e.target.index].selected = true
  2189. chart.update({
  2190. series:[{
  2191. type: 'pie',
  2192. name: '占比',
  2193. point: {
  2194. events:{
  2195. click:function(e){
  2196. console.log(e)
  2197. }
  2198. }
  2199. },
  2200. data: chartData
  2201. }]
  2202. })
  2203. timer && clearInterval(timer);
  2204. },
  2205. mouseOut: function(){ // 鼠标移出后需要继续执行轮播
  2206. var points = chart.series[0].points;
  2207. var len = points.length;
  2208. timer && clearInterval(timer);
  2209. timer = setInterval(function () {
  2210. autoTooltip(points[i]);
  2211. chartData.forEach((item,index) => {
  2212. item.sliced = false
  2213. item.selected = false
  2214. if(index == i){
  2215. item.sliced = true
  2216. item.selected = true
  2217. }
  2218. })
  2219. chart.update({
  2220. series:[{
  2221. type: 'pie',
  2222. name: '占比',
  2223. point: {
  2224. events:{
  2225. click:function(e){
  2226. console.log(e)
  2227. }
  2228. }
  2229. },
  2230. data: chartData
  2231. }]
  2232. })
  2233. i++;
  2234. if (i === len) {
  2235. i = 0;
  2236. chartData.forEach((item,index) => {
  2237. item.sliced = false
  2238. item.selected = false
  2239. })
  2240. chart.update({
  2241. series:[{
  2242. type: 'pie',
  2243. name: '占比',
  2244. point: {
  2245. events:{
  2246. click:function(e){
  2247. console.log(e)
  2248. }
  2249. }
  2250. },
  2251. data: chartData
  2252. }]
  2253. })
  2254. }
  2255. }, 2000);
  2256. }
  2257. }
  2258. },
  2259. data: chartData
  2260. }]
  2261. });
  2262. function autoTooltip(point) {
  2263. chart.tooltip.refresh(point);
  2264. }
  2265. // let myChart = echarts.init(this.$refs['echartR2'])
  2266. // let option = {
  2267. // tooltip: {
  2268. // trigger: 'item',
  2269. // position: (point,params,dom,rect,size) => {
  2270. // if(params.name == '新建'){
  2271. // return ['55%','45%']
  2272. // } else {
  2273. // return ['15%','40%']
  2274. // }
  2275. // },
  2276. // formatter: params => {
  2277. // 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}亿`
  2278. // }, //+ '<br/>'+ '{a1}:{c1}' + '%',
  2279. // axisPointer: {
  2280. // type: 'cross',
  2281. // },
  2282. // },
  2283. // color: [ '#43ede3', '#8ba2ff'],
  2284. // legend: {
  2285. // left: '5%',
  2286. // bottom: '2%',
  2287. // orient: 'vertical',
  2288. // //right: '2%',
  2289. // textStyle: {
  2290. // color: '#9DB9EB',
  2291. // },
  2292. // },
  2293. // series: [
  2294. // {
  2295. // name: '',
  2296. // type: 'pie',
  2297. // radius: ['50%', '75%'],
  2298. // center: ["50%", "50%"],
  2299. // label:{
  2300. // show: false,
  2301. // },
  2302. // itemStyle: {
  2303. // normal: {
  2304. // borderColor: 'rgba(1,31,64,0.7)',
  2305. // borderWidth: 6
  2306. // }
  2307. // },
  2308. // labelLine: {
  2309. // show: false,
  2310. // },
  2311. // data: chartDateR2,
  2312. // },
  2313. // ],
  2314. // }
  2315. // myChart.setOption(option)
  2316. // tools.loopShowTooltip(myChart, option, {
  2317. // nterval: 10000,
  2318. // loopSeries: true,
  2319. // })
  2320. },
  2321. initProjectList() {
  2322. let dataList = []
  2323. projectList.map(item => {
  2324. dataList.push([item.office,item.name, item.value + '亿'])
  2325. })
  2326. this.storageRecordConfig = {
  2327. header: ['企业集团', '项目名称', '投资金额'],
  2328. headerBGC: '#05507b33',
  2329. oddRowBGC: '#05507b33',
  2330. evenRowBGC: '',
  2331. headerHeight: '40',
  2332. rowNum: 5,
  2333. columnWidth: [100, 350],
  2334. align: ['center', 'center', 'center'],
  2335. data: dataList,
  2336. }
  2337. }
  2338. },
  2339. })