investHome.js 84 KB

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