investHome2.js 116 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692
  1. let app = new Vue({
  2. el: '#app',
  3. data () {
  4. return {
  5. count: 0,
  6. countType: 0,
  7. type: true, // 切换柱状图状态
  8. showTip2: false,
  9. showTip3: false,
  10. timer2: '',
  11. echartTitle: '',
  12. year: '2022',
  13. time: '',
  14. timer: '',
  15. mapName: 'shanxi',
  16. geoCoordMap: {},
  17. config1: {
  18. number: [100],
  19. content: '{nt}个',
  20. },
  21. storageRecordConfig: {
  22. // waitTime: '30000',
  23. hoverPause: false,
  24. header: ['企业集团', '项目名 ', '投资总额'],
  25. // headerBGC: '#05507b33',
  26. // oddRowBGC: '#05507b33',
  27. // evenRowBGC: '#05507b33',
  28. headerBGC: '#05183c',
  29. headerBGC: '#05507b33',
  30. oddRowBGC: '#05183c',
  31. evenRowBGC: '#05183c',
  32. rowNum: 8,
  33. // columnWidth: [100, 550,100],
  34. align: ['center', 'center', 'center'],
  35. data: [
  36. // ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元 "],
  37. // ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"],
  38. // ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.02亿元 "],
  39. // ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元 "],
  40. // ['潞安化工', '分布式光伏发电项目', "2.01亿元 "],
  41. // ['太重集团', '设立太重(大同)新能源产业投资公司', "0.30亿元 "],
  42. // ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元 "],
  43. // ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元 "],
  44. // ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元 "],
  45. // ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元 "],
  46. // ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元 "],
  47. // ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元 "],
  48. // ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元 "],
  49. // ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元 "],
  50. // ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元 "],
  51. // ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元 "],
  52. // ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元 "],
  53. // ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元 "],
  54. // ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元 "],
  55. ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"],
  56. ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"],
  57. ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.02亿元"],
  58. ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"],
  59. ['潞安化工', '分布式光伏发电项目', "2.01亿元"],
  60. ['太重集团', '设立太重(大同)新能源产业投资公司', "0.30亿元"],
  61. ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"],
  62. ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"],
  63. ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"],
  64. ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"],
  65. ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"],
  66. ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元"],
  67. ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"],
  68. ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元"],
  69. ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"],
  70. ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"],
  71. ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"],
  72. ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"],
  73. ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"]
  74. ],
  75. },
  76. companyList: [
  77. { name: '山西焦煤' },
  78. { name: '晋能控股' },
  79. { name: '华新燃气' },
  80. { name: '山西建投' },
  81. { name: '潞安化工' },
  82. { name: '华远陆港' },
  83. { name: '航产集团' },
  84. { name: '大地控股' },
  85. { name: '国新能源' },
  86. { name: '汾酒集团' },
  87. { name: '云时代' },
  88. { name: '神农科技' },
  89. { name: '华阳新材' },
  90. { name: '华舰体育' },
  91. { name: '交控集团' },
  92. { name: '文旅集团' },
  93. { name: '水控集团' },
  94. { name: '太重集团' },
  95. ],
  96. }
  97. },
  98. created () {
  99. this.time = formatDate()
  100. this.timer = setInterval(() => {
  101. this.time = formatDate()
  102. }, 1000)
  103. },
  104. beforeDestroy () {
  105. if (this.timer) {
  106. clearInterval(this.timer);
  107. }
  108. this.timer2 && clearInterval(this.timer2);
  109. },
  110. mounted () {
  111. // 左侧图表
  112. setTimeout(() => {
  113. this.initChartL1()
  114. this.initChartL2()
  115. this.initChartL3()
  116. this.initChartL4()
  117. this.initChartL5()
  118. this.initChartL6()
  119. this.initChartL7()
  120. this.initChartR1()
  121. this.initChartR2()
  122. this.initChartR3()
  123. this.initChartR6()
  124. this.changeTopColor()
  125. },)
  126. },
  127. methods: {
  128. changeTopColor () {
  129. this.list = document.getElementsByClassName('row-item')
  130. for (var i = 0; i < this.list.length; i++) {
  131. if (i == 1) {
  132. this.list[i].classList.add('light')
  133. } else {
  134. this.list[i].classList.remove('light')
  135. }
  136. }
  137. this.initChartL3()
  138. },
  139. scrollChange (index) {
  140. if (index == 18) {
  141. this.count = -1
  142. } else {
  143. this.count = index
  144. }
  145. if (this.count > 12 && this.count != 18) {
  146. this.countType = 1
  147. } else {
  148. this.countType = 0
  149. }
  150. this.list = document.getElementsByClassName('row-item')
  151. for (var i = 0; i < this.list.length; i++) {
  152. if (i == 2) {
  153. this.list[i].classList.add('light')
  154. } else {
  155. this.list[i].classList.remove('light')
  156. }
  157. }
  158. this.initChartL3()
  159. },
  160. convertData (data) {
  161. var res = []
  162. for (var i = 0; i < data.length; i++) {
  163. var geoCoord = this.geoCoordMap[data[i].name]
  164. if (geoCoord) {
  165. res.push({
  166. name: data[i].name,
  167. value: geoCoord.concat(data[i].value),
  168. })
  169. }
  170. }
  171. return res
  172. },
  173. initChinaChart () {
  174. var data = [
  175. { name: '吕梁市', value: 150 },
  176. { name: '大同市', value: 190 },
  177. { name: '忻州市', value: 140 },
  178. { name: '朔州市', value: 160 },
  179. { name: '晋中市', value: 100 },
  180. { name: '太原市', value: 300 },
  181. { name: '临汾市', value: 190 },
  182. { name: '长治市', value: 100 },
  183. { name: '晋城市', value: 280 },
  184. { name: '运城市', value: 180 },
  185. { name: '阳泉市', value: 110 },
  186. ]
  187. var moveLine = {
  188. normal: [
  189. {
  190. fromName: '太原市',
  191. toName: '吕梁市',
  192. coords: [
  193. [112.3352, 37.9413],
  194. [111.3574, 37.7325],
  195. ],
  196. },
  197. {
  198. fromName: '太原市',
  199. toName: '忻州市',
  200. coords: [
  201. [112.3352, 37.9413],
  202. [112.4561, 38.8971],
  203. ],
  204. },
  205. {
  206. fromName: '太原市',
  207. toName: '临汾市',
  208. coords: [
  209. [112.3352, 37.9413],
  210. [111.4783, 36.1615],
  211. ],
  212. },
  213. {
  214. fromName: '太原市',
  215. toName: '阳泉市',
  216. coords: [
  217. [112.3352, 37.9413],
  218. [113.4778, 38.0951],
  219. ],
  220. },
  221. {
  222. fromName: '太原市',
  223. toName: '晋中市',
  224. coords: [
  225. [112.3352, 37.9413],
  226. [112.7747, 37.37],
  227. ],
  228. },
  229. {
  230. fromName: '太原市',
  231. toName: '运城市',
  232. coords: [
  233. [112.3352, 37.9413],
  234. [111.1487, 35.2002],
  235. ],
  236. },
  237. {
  238. fromName: '太原市',
  239. toName: '大同市',
  240. coords: [
  241. [112.3352, 37.9413],
  242. [113.7854, 39.8035],
  243. ],
  244. },
  245. {
  246. fromName: '太原市',
  247. toName: '晋城市',
  248. coords: [
  249. [112.3352, 37.9413],
  250. [112.7856, 35.6342],
  251. ],
  252. },
  253. {
  254. fromName: '太原市',
  255. toName: '长治市',
  256. coords: [
  257. [112.3352, 37.9413],
  258. [112.8625, 36.4746],
  259. ],
  260. },
  261. {
  262. fromName: '太原市',
  263. toName: '朔州市',
  264. coords: [
  265. [112.3352, 37.9413],
  266. [113.0713, 39.6991],
  267. ],
  268. },
  269. ],
  270. }
  271. /*获取地图数据*/
  272. let myChart = echarts.init(this.$refs['echarts-map'])
  273. echarts.registerMap('shanxi', {
  274. type: 'FeatureCollection',
  275. features: [
  276. {
  277. type: 'Feature',
  278. id: '1409',
  279. properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
  280. geometry: {
  281. type: 'Polygon',
  282. coordinates: [
  283. '@@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',
  284. ],
  285. encodeOffsets: [[113614, 39657]],
  286. },
  287. },
  288. {
  289. type: 'Feature',
  290. id: '1411',
  291. properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
  292. geometry: {
  293. type: 'Polygon',
  294. coordinates: [
  295. '@@@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',
  296. ],
  297. encodeOffsets: [[113614, 39657]],
  298. },
  299. },
  300. {
  301. type: 'Feature',
  302. id: '1410',
  303. properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
  304. geometry: {
  305. type: 'Polygon',
  306. coordinates: [
  307. '@@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',
  308. ],
  309. encodeOffsets: [[113063, 37784]],
  310. },
  311. },
  312. {
  313. type: 'Feature',
  314. id: '1407',
  315. properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
  316. geometry: {
  317. type: 'Polygon',
  318. coordinates: [
  319. '@@@š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@',
  320. ],
  321. encodeOffsets: [[114087, 37682]],
  322. },
  323. },
  324. {
  325. type: 'Feature',
  326. id: '1408',
  327. properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
  328. geometry: {
  329. type: 'Polygon',
  330. coordinates: [
  331. '@@„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@„',
  332. ],
  333. encodeOffsets: [[113232, 36597]],
  334. },
  335. },
  336. {
  337. type: 'Feature',
  338. id: '1402',
  339. properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
  340. geometry: {
  341. type: 'Polygon',
  342. coordinates: [
  343. '@@²£š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',
  344. ],
  345. encodeOffsets: [[115335, 41209]],
  346. },
  347. },
  348. {
  349. type: 'Feature',
  350. id: '1404',
  351. properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
  352. geometry: {
  353. type: 'Polygon',
  354. coordinates: [
  355. '@@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',
  356. ],
  357. encodeOffsets: [[116269, 37637]],
  358. },
  359. },
  360. {
  361. type: 'Feature',
  362. id: '1406',
  363. properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
  364. geometry: {
  365. type: 'Polygon',
  366. coordinates: [
  367. '@@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‚',
  368. ],
  369. encodeOffsets: [[114615, 40562]],
  370. },
  371. },
  372. {
  373. type: 'Feature',
  374. id: '1405',
  375. properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
  376. geometry: {
  377. type: 'Polygon',
  378. coordinates: [
  379. '@@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°',
  380. ],
  381. encodeOffsets: [[115223, 36895]],
  382. },
  383. },
  384. {
  385. type: 'Feature',
  386. id: '1401',
  387. properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
  388. geometry: {
  389. type: 'Polygon',
  390. coordinates: [
  391. '@@„@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š@°',
  392. ],
  393. encodeOffsets: [[114503, 39134]],
  394. },
  395. },
  396. {
  397. type: 'Feature',
  398. id: '1403',
  399. properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
  400. geometry: {
  401. type: 'Polygon',
  402. coordinates: [
  403. '@@°@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',
  404. ],
  405. encodeOffsets: [[115864, 39336]],
  406. },
  407. },
  408. ],
  409. UTF8Encoding: true,
  410. })
  411. var mapFeatures = echarts.getMap(this.mapName).geoJson.features
  412. mapFeatures.forEach(v => {
  413. // 地区名称
  414. var name = v.properties.name
  415. // 地区经纬度
  416. this.geoCoordMap[name] = v.properties.cp
  417. })
  418. myChart.setOption({
  419. tooltip: {
  420. padding: 15,
  421. enterable: true,
  422. transitionDuration: 1,
  423. formatter: (params, ticket, callback) => {
  424. let tipHtml = `
  425. <div class="tooltip-cont">
  426. <p>新开工:<span>工程建设项目</span></p>
  427. <p>总投资额:<span>${params.data.value}亿</span></p>
  428. <p>当前阶段:<span>可论证阶段</span></p>
  429. <p>时间节点:<span>2021.10-2022.10</span></p>
  430. </div>`
  431. return tipHtml
  432. },
  433. },
  434. visualMap: {
  435. min: 0,
  436. max: 300,
  437. right: 0,
  438. bottom: 0,
  439. text: ['高', '低'],
  440. textStyle: {
  441. color: '#f1f1f1'
  442. },
  443. realtime: false,
  444. calculable: true,
  445. inRange: {
  446. color: ['lightskyblue', '#2754b7']
  447. }
  448. },
  449. geo: {
  450. show: true,
  451. map: 'shanxi',
  452. layoutCenter: ['50%', '50%'], //地图位置
  453. layoutSize: '100%',
  454. label: {
  455. normal: {
  456. show: false,
  457. },
  458. emphasis: {
  459. show: false,
  460. },
  461. },
  462. roam: false,
  463. itemStyle: {
  464. normal: {
  465. areaColor: '#1946a8',
  466. shadowColor: '#1946a8',
  467. borderWidth: 1, //设置外层边框
  468. borderColor: '#1946a8',
  469. shadowOffsetX: 10,
  470. shadowOffsetY: 5,
  471. shadowBlur: 2,
  472. },
  473. emphasis: {
  474. areaColor: '#1946a8',
  475. borderColor: '#d4bc1d',
  476. borderWidth: 2, //设置外层边框
  477. },
  478. },
  479. },
  480. series: [
  481. {
  482. name: '散点',
  483. type: 'scatter',
  484. coordinateSystem: 'geo',
  485. data: this.convertData(data),
  486. symbolSize: function (val) {
  487. return 10
  488. },
  489. label: {
  490. normal: {
  491. formatter: '{b}',
  492. position: [10, 10],
  493. fontSize: 15,
  494. fontWeight: 600,
  495. fontStyle: 'italic',
  496. color: '#fff',
  497. show: true,
  498. },
  499. emphasis: {
  500. show: true,
  501. },
  502. },
  503. itemStyle: {
  504. normal: {
  505. color: '#000',
  506. borderWidth: 2,
  507. borderColor: '#fff',
  508. },
  509. },
  510. },
  511. {
  512. type: 'map',
  513. map: this.mapName,
  514. geoIndex: 0,
  515. aspectScale: 0.75, //长宽比
  516. showLegendSymbol: true, // 存在legend时显示
  517. label: {
  518. normal: {
  519. show: true,
  520. },
  521. emphasis: {
  522. show: false,
  523. textStyle: {
  524. color: '#fff',
  525. },
  526. },
  527. },
  528. roam: true,
  529. itemStyle: {
  530. normal: {
  531. areaColor: '#031525',
  532. borderColor: '#3B5077',
  533. },
  534. emphasis: {
  535. areaColor: '#2B91B7',
  536. },
  537. },
  538. animation: false,
  539. data: data,
  540. },
  541. {
  542. name: '点',
  543. type: 'scatter',
  544. coordinateSystem: 'geo',
  545. zlevel: 6,
  546. },
  547. {
  548. name: 'Top 5',
  549. type: 'effectScatter',
  550. coordinateSystem: 'geo',
  551. data: this.convertData(
  552. data
  553. .sort(function (a, b) {
  554. return b.value - a.value
  555. })
  556. .slice(0, 5)
  557. ),
  558. symbolSize: function (val) {
  559. return 15
  560. },
  561. showEffectOn: 'render',
  562. rippleEffect: {
  563. brushType: 'stroke',
  564. },
  565. hoverAnimation: true,
  566. label: {
  567. normal: {
  568. formatter: '{b}',
  569. position: 'left',
  570. show: false,
  571. },
  572. },
  573. itemStyle: {
  574. normal: {
  575. color: 'yellow',
  576. shadowBlur: 10,
  577. shadowColor: 'yellow',
  578. },
  579. },
  580. zlevel: 1000,
  581. },
  582. {
  583. name: '线路',
  584. type: 'lines',
  585. zlevel: 2,
  586. effect: {
  587. show: true,
  588. period: 4, //箭头指向速度,值越小速度越快
  589. trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
  590. symbol: 'arrow', //箭头图标
  591. symbolSize: 5, //图标大小
  592. },
  593. lineStyle: {
  594. normal: {
  595. color: '#00FFFF',
  596. width: 1,
  597. type: 'dashed',
  598. opacity: 0.5, //尾迹线条透明度
  599. curveness: -0.3, //尾迹线条曲直度
  600. },
  601. },
  602. data: moveLine.normal,
  603. },
  604. ],
  605. })
  606. },
  607. initChartL1 () {
  608. let myChart = echarts.init(document.getElementById("echartL1"));
  609. let option = {
  610. grid: {
  611. top: 35,
  612. right: 0,
  613. left: 60,
  614. bottom: 50,
  615. },
  616. tooltip: {
  617. show: true,
  618. trigger: "axis",
  619. axisPointer: {
  620. // 坐标轴指示器,坐标轴触发有效
  621. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  622. },
  623. },
  624. xAxis: {
  625. data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
  626. axisTick: {
  627. show: false,
  628. },
  629. // x轴的字体颜色
  630. axisLabel: {
  631. rotate: 40,
  632. textStyle: {
  633. color: "white",
  634. },
  635. },
  636. //y轴线的颜色以及宽度
  637. axisLine: {
  638. show: true,
  639. lineStyle: {
  640. color: "#1E5389",
  641. width: 1,
  642. type: "solid",
  643. },
  644. },
  645. },
  646. yAxis: {
  647. name: '亿元',
  648. nameTextStyle: {//y轴上方单位的颜色
  649. color: '#fff',
  650. },
  651. axisTick: {
  652. lineStyle: {
  653. color: "#18416F",
  654. },
  655. },
  656. // y轴的字体颜色
  657. axisLabel: {
  658. textStyle: {
  659. color: "white",
  660. },
  661. },
  662. splitLine: {
  663. show: true,
  664. lineStyle: {
  665. color: "#204561",
  666. width: 1,
  667. type: "dotted",
  668. },
  669. },
  670. //y轴线的颜色以及宽度
  671. axisLine: {
  672. show: true,
  673. lineStyle: {
  674. color: "#1E5389",
  675. width: 1,
  676. type: "solid",
  677. },
  678. },
  679. },
  680. series: [
  681. // {
  682. // name: "2022年额度",
  683. // type: "bar",
  684. // data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
  685. // showBackground: false,
  686. // backgroundStyle: {
  687. // color: "#18416F",
  688. // },
  689. // barWidth: "10%",
  690. // itemStyle: {
  691. // barBorderRadius: [10, 10, 0, 0],
  692. // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  693. // {
  694. // offset: 0,
  695. // color: '#082550',
  696. // },
  697. // {
  698. // offset: 1,
  699. // color: '#69c0ff',
  700. // },
  701. // ]),
  702. // },
  703. // },
  704. {
  705. name: "2023年额度",
  706. type: "bar",
  707. data: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28],
  708. showBackground: false,
  709. backgroundStyle: {
  710. color: "#18416F",
  711. },
  712. barWidth: "10%",
  713. itemStyle: {
  714. barBorderRadius: [10, 10, 0, 0],
  715. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  716. {
  717. offset: 0,
  718. color: '#082550',
  719. },
  720. {
  721. offset: 1,
  722. color: '#957DFF',
  723. },
  724. ]),
  725. },
  726. },
  727. ],
  728. legend: {
  729. // data: ["2022年额度", "2023年额度"],
  730. data: ["2023年额度"],
  731. textStyle: {
  732. // 图列内容样式
  733. color: "#fff", // 字体颜色
  734. // fontSize: "10",
  735. },
  736. right: 'center',
  737. y:5,
  738. icon: "roundRect",
  739. // 小图标的宽高
  740. itemHeight: 5,
  741. },
  742. };
  743. tools.loopShowTooltip(myChart, option, {
  744. nterval: 2000,
  745. loopSeries: true,
  746. })
  747. let that = this
  748. myChart.on('click', function (param) {
  749. if (param.name == '晋能控股') {
  750. that.showTip2 = true
  751. setTimeout(() => {
  752. // that.initChartR4()
  753. // that.initChartR5()
  754. that.initChartL2b()
  755. })
  756. }
  757. })
  758. myChart.setOption(option);
  759. },
  760. initChartL2b () {
  761. let myChart = echarts.init(this.$refs['echartL2b'])
  762. var value = 0.1149;
  763. var data = [value];
  764. let option = {
  765. backgroundColor: 'transparent',
  766. title: [
  767. {
  768. // text: '总额度285.48亿',
  769. // formatter: `<span>总额度</span>285.48亿`,
  770. x: '37%',
  771. y: '80%',
  772. textStyle: {
  773. fontSize: 24,
  774. fontWeight: 'bold',
  775. color: '#2CB7E0',
  776. lineHeight: 16,
  777. textAlign: 'center',
  778. },
  779. }
  780. ],
  781. series: [
  782. {
  783. type: 'liquidFill',
  784. radius: '70%',
  785. center: ['50%', '40%'],
  786. color: [
  787. {
  788. type: 'linear',
  789. x: 0,
  790. y: 0,
  791. x2: 0,
  792. y2: 1,
  793. colorStops: [
  794. {
  795. offset: 0,
  796. color: '#446bf5',
  797. },
  798. {
  799. offset: 1,
  800. color: '#2ca3e2',
  801. },
  802. ],
  803. globalCoord: false,
  804. },
  805. ],
  806. data: [value, value], // data个数代表波浪数
  807. backgroundStyle: {
  808. borderWidth: 1,
  809. color: 'RGBA(51, 66, 127, 0.7)',
  810. },
  811. label: {
  812. normal: {
  813. formatter: function (data) {
  814. return (data.value * 100).toFixed(2) + '%'
  815. },
  816. textStyle: {
  817. fontSize: 30,
  818. color: '#fff',
  819. },
  820. },
  821. },
  822. outline: {
  823. // show: false
  824. borderDistance: 0,
  825. itemStyle: {
  826. borderWidth: 2,
  827. borderColor: 'transparent',
  828. },
  829. },
  830. },
  831. ],
  832. }
  833. myChart.setOption(option)
  834. },
  835. initChartL2 () {
  836. let myChart = echarts.init(this.$refs['echartL2'])
  837. var value = 0.1463;
  838. var data = [value];
  839. let option = {
  840. backgroundColor: 'transparent',
  841. title: [
  842. {
  843. // text: '总额度285.48亿',
  844. // formatter: `<span>总额度</span>285.48亿`,
  845. x: '37%',
  846. y: '80%',
  847. textStyle: {
  848. fontSize: 24,
  849. fontWeight: 'bold',
  850. color: '#2CB7E0',
  851. lineHeight: 16,
  852. textAlign: 'center',
  853. },
  854. }
  855. ],
  856. series: [
  857. {
  858. type: 'liquidFill',
  859. radius: '70%',
  860. center: ['50%', '40%'],
  861. color: [
  862. {
  863. type: 'linear',
  864. x: 0,
  865. y: 0,
  866. x2: 0,
  867. y2: 1,
  868. colorStops: [
  869. {
  870. offset: 0,
  871. color: '#446bf5',
  872. },
  873. {
  874. offset: 1,
  875. color: '#2ca3e2',
  876. },
  877. ],
  878. globalCoord: false,
  879. },
  880. ],
  881. data: [value, value], // data个数代表波浪数
  882. backgroundStyle: {
  883. borderWidth: 1,
  884. color: 'RGBA(51, 66, 127, 0.7)',
  885. },
  886. label: {
  887. normal: {
  888. formatter: function (data) {
  889. return (data.value * 100).toFixed(2) + '%'
  890. },
  891. textStyle: {
  892. fontSize: 30,
  893. color: '#fff',
  894. },
  895. },
  896. },
  897. outline: {
  898. // show: false
  899. borderDistance: 0,
  900. itemStyle: {
  901. borderWidth: 2,
  902. borderColor: 'transparent',
  903. },
  904. },
  905. },
  906. ],
  907. }
  908. myChart.setOption(option)
  909. },
  910. initChartL3 () {
  911. let myChart = echarts.init(this.$refs['echartL3'])
  912. option = {
  913. tooltip: {
  914. trigger: 'axis',
  915. formatter: '指标:' + '{c0}' + '<br/>' + '发展线:' + '{c1}' + '<br/>' + '生存线:' + '{c2}', //+ '<br/>'+ '{a1}:{c1}' + '%',
  916. axisPointer: {
  917. type: 'shadow',
  918. },
  919. },
  920. grid: {
  921. top: '10%',
  922. right: '5%',
  923. left: '10%',
  924. bottom: '6%',
  925. },
  926. xAxis: {
  927. // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
  928. data: dataType[this.countType],
  929. axisLine: {
  930. show: true, //隐藏X轴轴线
  931. lineStyle: {
  932. color: '#005094',
  933. width: 1,
  934. },
  935. },
  936. axisTick: {
  937. show: true, //隐藏X轴刻度
  938. },
  939. axisLabel: {
  940. show: true,
  941. rotate: 15,
  942. textStyle: {
  943. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  944. fontSize: 12,
  945. },
  946. },
  947. },
  948. yAxis: [
  949. {
  950. type: 'value',
  951. splitLine: {
  952. show: true,
  953. lineStyle: {
  954. color: '#68b4dd66',
  955. type: 'dashed',
  956. },
  957. },
  958. axisLine: {
  959. show: false
  960. },
  961. axisLabel: {
  962. show: true,
  963. formatter: '{value}',
  964. textStyle: {
  965. color: 'rgba(250,250,250,0.6)',
  966. },
  967. },
  968. nameTextStyle: {
  969. color: '#ebf8ac',
  970. fontSize: 16,
  971. },
  972. },
  973. ],
  974. series: [
  975. {
  976. name: '实际值',
  977. type: 'bar',
  978. barWidth: 15,
  979. itemStyle: {
  980. normal: {
  981. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  982. {
  983. offset: 0,
  984. color: '#69c0ff',
  985. },
  986. {
  987. offset: 1,
  988. color: '#082550',
  989. },
  990. ]),
  991. },
  992. },
  993. // data: [70, 52, 33, 41, 52],
  994. data: dataList[this.count + 1][2]
  995. // markLine: {
  996. // symbol: ['none', 'none'],
  997. // data: [
  998. // {
  999. // name: '生存线',
  1000. // yAxis: 10,
  1001. // lineStyle: {
  1002. // color: '#FF8F0A',
  1003. // },
  1004. // label: {
  1005. // formatter: '{b}',
  1006. // position: 'middle',
  1007. // color: '#FF8F0A',
  1008. // fontSize: 12,
  1009. // },
  1010. // },
  1011. // {
  1012. // name: '发展线',
  1013. // yAxis: 15,
  1014. // lineStyle: {
  1015. // color: '#00EEA2',
  1016. // },
  1017. // label: {
  1018. // formatter: '{b}',
  1019. // position: 'middle',
  1020. // color: '#00EEA2',
  1021. // fontSize: 12,
  1022. // },
  1023. // },
  1024. // ],
  1025. // label: {
  1026. // distance: [50, 0],
  1027. // },
  1028. // },
  1029. },
  1030. {
  1031. name: '',
  1032. type: 'line',
  1033. barWidth: 15,
  1034. itemStyle: {
  1035. normal: {
  1036. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1037. {
  1038. offset: 0,
  1039. color: '#69c0ff',
  1040. },
  1041. {
  1042. offset: 1,
  1043. color: 'green',
  1044. },
  1045. ]),
  1046. },
  1047. },
  1048. // data: [20, 30, 15, 28, 36],
  1049. data: dataList[this.count + 1][1]
  1050. },
  1051. {
  1052. name: '',
  1053. type: 'line',
  1054. barWidth: 15,
  1055. itemStyle: {
  1056. normal: {
  1057. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  1058. {
  1059. offset: 0,
  1060. color: '#69c0ff',
  1061. },
  1062. {
  1063. offset: 1,
  1064. color: 'yellow',
  1065. },
  1066. ]),
  1067. },
  1068. },
  1069. // data: [15, 22, 17, 33, 14],
  1070. data: dataList[this.count + 1][0]
  1071. },
  1072. ],
  1073. }
  1074. myChart.setOption(option)
  1075. // tools.loopShowTooltip(myChart, option, {
  1076. // nterval: 2000,
  1077. // loopSeries: true,
  1078. // })
  1079. },
  1080. initChartL4 () {
  1081. // let data = [
  1082. // { value: [173.43, 129], name: '煤炭' },
  1083. // { value: [23.10, 2], name: '火电' },
  1084. // { value: [22.87, 8], name: '冶金' },
  1085. // { value: [9.71, 5], name: '焦化' },
  1086. // { value: [8.35, 6], name: '其他传统产业' }
  1087. // ]
  1088. // let count = 0
  1089. // data.forEach(item => {
  1090. // count += item.value[0]
  1091. // })
  1092. // let myChart = echarts.init(this.$refs['echartL4'])
  1093. // let option = {
  1094. // title: {
  1095. // text: '传统产业分析',
  1096. // x: 'center',
  1097. // y: '0%',
  1098. // textStyle: {
  1099. // color: 'rgba(255,255,255,0.6)',
  1100. // fontSize: 12,
  1101. // },
  1102. // },
  1103. // tooltip: {
  1104. // trigger: 'item',
  1105. // formatter: function (params) {
  1106. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  1107. // }
  1108. // },
  1109. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1110. // legend: {
  1111. // orient: 'horizontal',
  1112. // show: false,
  1113. // icon: 'circle',
  1114. // top: 'bottom',
  1115. // orient: 'vertical',
  1116. // right: '-3%',
  1117. // textStyle: {
  1118. // color: '#9DB9EB',
  1119. // fontSize: '10px'
  1120. // },
  1121. // itemWidth: 10,
  1122. // itemHeight: 10
  1123. // },
  1124. // series: [
  1125. // {
  1126. // name: '',
  1127. // type: 'pie',
  1128. // // radius: ['0%', '70%'],
  1129. // radius: ['50%', '65%'],
  1130. // center: ['50%', '55%'],
  1131. // itemStyle: {
  1132. // normal: {
  1133. // borderColor: 'rgba(1,31,64,0.7)',
  1134. // borderWidth: 6,
  1135. // label: {
  1136. // show: false
  1137. // },
  1138. // },
  1139. // },
  1140. // labelLine: {
  1141. // show: false,
  1142. // },
  1143. // data,
  1144. // },
  1145. // ],
  1146. // }
  1147. // myChart.setOption(option)
  1148. // tools.loopShowTooltip(myChart, option, {
  1149. // nterval: 2000,
  1150. // loopSeries: true,
  1151. // })
  1152. // let that = this
  1153. // myChart.on('click', function (param) {
  1154. // console.log(param)
  1155. // that.showTip3 = true
  1156. // setTimeout(() => {
  1157. // that.initChartT1(data, option)
  1158. // })
  1159. // })
  1160. // { value: [173.43, 129], name: '煤炭' },
  1161. // { value: [23.10, 2], name: '火电' },
  1162. // { value: [22.87, 8], name: '冶金' },
  1163. // { value: [9.71, 5], name: '焦化' },
  1164. // { value: [8.35, 6], name: '其他传统产业' }
  1165. var chartData = [
  1166. {
  1167. name: '煤炭',
  1168. y: 294.61,
  1169. num: 95,
  1170. sliced: false,
  1171. selected: false,
  1172. },
  1173. {
  1174. name: '火电',
  1175. y: 39.24,
  1176. num: 1,
  1177. sliced: false,
  1178. selected: false,
  1179. },
  1180. {
  1181. name: '冶金',
  1182. y: 38.85,
  1183. num: 6,
  1184. sliced: false,
  1185. selected: false,
  1186. },
  1187. {
  1188. name: '焦化',
  1189. y: 16.49,
  1190. num: 4,
  1191. sliced: false,
  1192. selected: false,
  1193. },
  1194. {
  1195. name: '其他传统产业',
  1196. y: 14.19,
  1197. num: 5,
  1198. sliced: false,
  1199. selected: false,
  1200. }
  1201. ]
  1202. var timer = null;
  1203. var i = 0;
  1204. let that = this
  1205. var option = {
  1206. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1207. chart: {
  1208. type: 'pie',
  1209. backgroundColor: 'rgba(0,0,0,0)',
  1210. options3d: {
  1211. enabled: true,
  1212. alpha: 45,
  1213. //beta: 0
  1214. },
  1215. events: {
  1216. // load,图表加载完成时触发
  1217. load: function () {
  1218. var chart = this;
  1219. var points = chart.series[0].points;
  1220. var len = points.length;
  1221. timer && clearInterval(timer);
  1222. timer = setInterval(function () {
  1223. autoTooltip(points[i]);
  1224. chartData.forEach((item, index) => {
  1225. item.sliced = false
  1226. item.selected = false
  1227. if (index == i) {
  1228. item.sliced = true
  1229. item.selected = true
  1230. }
  1231. })
  1232. chart.update({
  1233. series: [{
  1234. type: 'pie',
  1235. name: '占比',
  1236. point: {
  1237. events: {
  1238. click: function (e) {
  1239. that.showTip3 = true
  1240. that.echartTitle = '传统产业分析'
  1241. setTimeout(() => {
  1242. that.initChartT1(chartData)
  1243. })
  1244. }
  1245. }
  1246. },
  1247. data: chartData
  1248. }]
  1249. })
  1250. i++;
  1251. if (i === len) {
  1252. i = 0;
  1253. }
  1254. }, 2000);
  1255. },
  1256. legendItemClick: function (event) {
  1257. console.log(event);
  1258. return true;
  1259. }
  1260. }
  1261. },
  1262. credits: {
  1263. enabled: false //去掉hightchats水印
  1264. },
  1265. title: {
  1266. text: '传统产业分析',
  1267. style: {
  1268. color: 'rgba(255,255,255,0.6)',
  1269. fontSize: 16,
  1270. },
  1271. y: 90
  1272. },
  1273. tooltip: {
  1274. crosshairs: true,
  1275. backgroundColor: 'rgba(0,0,0,0.5)',
  1276. // positioner: function(e){
  1277. // console.log(e, this)
  1278. // },
  1279. useHTML: true, //开启html模式
  1280. style: {
  1281. color: '#fff',
  1282. },
  1283. formatter: function (e) {
  1284. //console.log(this)
  1285. let num = chartData[this.colorIndex].num
  1286. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1287. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1288. },
  1289. //pointFormat:
  1290. },
  1291. plotOptions: {
  1292. pie: {
  1293. allowPointSelect: true,
  1294. showInLegend: false, // 图例
  1295. cursor: 'pointer',
  1296. size: 220,
  1297. innerSize: 150, //环形图中间空白,0为饼图
  1298. depth: 25, //立体高度
  1299. slicedOffset: 21, //动画距离
  1300. dataLabels: {
  1301. enabled: false, // 是否展示指示线
  1302. format: '{point.name}: {point.percentage}'
  1303. }
  1304. },
  1305. },
  1306. series: [{
  1307. type: 'pie',
  1308. name: '占比',
  1309. //center: ['35%','50%'],
  1310. point: {
  1311. events: {
  1312. click: function (e) { //点击事件
  1313. that.showTip3 = true
  1314. that.echartTitle = '传统产业分析'
  1315. setTimeout(() => {
  1316. that.initChartT1(chartData)
  1317. })
  1318. },
  1319. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1320. //console.log(e)
  1321. chartData.forEach((item, index) => {
  1322. item.sliced = false
  1323. item.selected = false
  1324. })
  1325. chartData[e.target.index].sliced = true
  1326. chartData[e.target.index].selected = true
  1327. chart.update({
  1328. series: [{
  1329. type: 'pie',
  1330. name: '占比',
  1331. point: {
  1332. events: {
  1333. click: function (e) {
  1334. that.showTip3 = true
  1335. that.echartTitle = '传统产业分析'
  1336. setTimeout(() => {
  1337. that.initChartT1(chartData)
  1338. })
  1339. }
  1340. }
  1341. },
  1342. data: chartData
  1343. }]
  1344. })
  1345. timer && clearInterval(timer);
  1346. },
  1347. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  1348. var points = chart.series[0].points;
  1349. var len = points.length;
  1350. timer && clearInterval(timer);
  1351. timer = setInterval(function () {
  1352. autoTooltip(points[i]);
  1353. chartData.forEach((item, index) => {
  1354. item.sliced = false
  1355. item.selected = false
  1356. if (index == i) {
  1357. item.sliced = true
  1358. item.selected = true
  1359. }
  1360. })
  1361. chart.update({
  1362. series: [{
  1363. type: 'pie',
  1364. name: '占比',
  1365. point: {
  1366. events: {
  1367. click: function (e) {
  1368. that.showTip3 = true
  1369. that.echartTitle = '传统产业分析'
  1370. setTimeout(() => {
  1371. that.initChartT1(chartData)
  1372. })
  1373. }
  1374. }
  1375. },
  1376. data: chartData
  1377. }]
  1378. })
  1379. i++;
  1380. if (i === len) {
  1381. i = 0;
  1382. }
  1383. }, 2000);
  1384. }
  1385. }
  1386. },
  1387. data: chartData
  1388. }]
  1389. }
  1390. var chart = Highcharts.chart('echartL4', option);
  1391. function autoTooltip (point) {
  1392. chart.tooltip.refresh(point);
  1393. }
  1394. },
  1395. initChartL5 () {
  1396. // let data = [
  1397. // { value: [29.26, 102], name: '新一代信息技术' },
  1398. // { value: [59.11, 38], name: '高端装备制造' },
  1399. // { value: [3.96, 5], name: '新材料' },
  1400. // { value: [2.12, 7], name: '生物' },
  1401. // { value: [100.09, 79], name: '新能源' },
  1402. // { value: [15.48, 32], name: '节能环保' },
  1403. // { value: [3.00, 3], name: '相关服务业' },
  1404. // ]
  1405. // let count = 0
  1406. // data.forEach(item => {
  1407. // count += item.value[0]
  1408. // })
  1409. // let myChart = echarts.init(this.$refs['echartL5'])
  1410. // let option = {
  1411. // title: {
  1412. // text: '战略性新兴产业',
  1413. // x: 'center',
  1414. // y: '0%',
  1415. // textStyle: {
  1416. // color: 'rgba(255,255,255,0.6)',
  1417. // fontSize: 12,
  1418. // },
  1419. // },
  1420. // tooltip: {
  1421. // trigger: 'item',
  1422. // formatter: function (params) {
  1423. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  1424. // }
  1425. // },
  1426. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1427. // legend: {
  1428. // show: false,
  1429. // icon: 'circle',
  1430. // top: 'bottom',
  1431. // orient: 'vertical',
  1432. // right: '-3%',
  1433. // textStyle: {
  1434. // color: '#9DB9EB',
  1435. // fontSize: '10px'
  1436. // },
  1437. // itemWidth: 10,
  1438. // itemHeight: 10
  1439. // },
  1440. // series: [
  1441. // {
  1442. // name: '',
  1443. // type: 'pie',
  1444. // // radius: ['0%', '70%'],
  1445. // radius: ['50%', '65%'],
  1446. // center: ['50%', '55%'],
  1447. // itemStyle: {
  1448. // normal: {
  1449. // borderColor: 'rgba(1,31,64,0.7)',
  1450. // borderWidth: 6,
  1451. // label: {
  1452. // show: false,
  1453. // },
  1454. // },
  1455. // },
  1456. // labelLine: {
  1457. // show: false,
  1458. // },
  1459. // data
  1460. // },
  1461. // ],
  1462. // }
  1463. // myChart.setOption(option)
  1464. // tools.loopShowTooltip(myChart, option, {
  1465. // nterval: 2000,
  1466. // loopSeries: true,
  1467. // })
  1468. // let that = this
  1469. // myChart.on('click', function (param) {
  1470. // console.log(param)
  1471. // that.showTip3 = true
  1472. // setTimeout(() => {
  1473. // that.initChartT1(data, option)
  1474. // })
  1475. // })
  1476. // { value: [29.26, 102], name: '新一代信息技术' },
  1477. // { value: [59.11, 38], name: '高端装备制造' },
  1478. // { value: [3.96, 5], name: '新材料' },
  1479. // { value: [2.12, 7], name: '生物' },
  1480. // { value: [100.09, 79], name: '新能源' },
  1481. // { value: [15.48, 32], name: '节能环保' },
  1482. // { value: [3.00, 3], name: '相关服务业' },
  1483. // var chartData = [
  1484. // {
  1485. // name: '新一代信息技术',
  1486. // y: 29.26,
  1487. // x: 75,
  1488. // sliced: false,
  1489. // selected: false,
  1490. // },
  1491. // {
  1492. // name: '高端装备制造',
  1493. // y: 100.41,
  1494. // x: 28,
  1495. // sliced: false,
  1496. // selected: false,
  1497. // },
  1498. // {
  1499. // name: '新材料',
  1500. // y: 6.72,
  1501. // x: 4,
  1502. // sliced: false,
  1503. // selected: false,
  1504. // },
  1505. // {
  1506. // name: '生物',
  1507. // y: 3.60,
  1508. // x: 58,
  1509. // sliced: false,
  1510. // selected: false,
  1511. // },
  1512. // {
  1513. // name: '新能源',
  1514. // y: 170.03,
  1515. // x: 58,
  1516. // sliced: false,
  1517. // selected: false,
  1518. // }
  1519. // ]
  1520. var chartData = [
  1521. {
  1522. name: '新一代信息技术',
  1523. y: 29.26,
  1524. num: 75,
  1525. //x: 75,
  1526. sliced: false,
  1527. selected: false,
  1528. },
  1529. {
  1530. name: '高端装备制造',
  1531. y: 100.41,
  1532. num: 28,
  1533. sliced: false,
  1534. selected: false,
  1535. },
  1536. {
  1537. name: '新材料',
  1538. y: 6.72,
  1539. num: 4,
  1540. sliced: false,
  1541. selected: false,
  1542. },
  1543. {
  1544. name: '生物',
  1545. y: 3.60,
  1546. num: 58,
  1547. sliced: false,
  1548. selected: false,
  1549. },
  1550. {
  1551. name: '新能源',
  1552. y: 170.03,
  1553. num: 58,
  1554. sliced: false,
  1555. selected: false,
  1556. },
  1557. {
  1558. name: '节能环保',
  1559. y: 26.30,
  1560. num: 24,
  1561. sliced: false,
  1562. selected: false,
  1563. },
  1564. {
  1565. name: '相关服务业',
  1566. y: 5.10,
  1567. num: 2,
  1568. sliced: false,
  1569. selected: false,
  1570. }
  1571. ]
  1572. var timer = null;
  1573. var i = 0;
  1574. let that = this
  1575. var option = {
  1576. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39', '#5783ab'],
  1577. chart: {
  1578. type: 'pie',
  1579. backgroundColor: 'rgba(0,0,0,0)',
  1580. options3d: {
  1581. enabled: true,
  1582. alpha: 45,
  1583. //beta: 0
  1584. },
  1585. events: {
  1586. // load,图表加载完成时触发
  1587. load: function () {
  1588. var chart = this;
  1589. var points = chart.series[0].points;
  1590. var len = points.length;
  1591. timer && clearInterval(timer);
  1592. timer = setInterval(function () {
  1593. autoTooltip(points[i]);
  1594. chartData.forEach((item, index) => {
  1595. item.sliced = false
  1596. item.selected = false
  1597. if (index == i) {
  1598. item.sliced = true
  1599. item.selected = true
  1600. }
  1601. })
  1602. chart.update({
  1603. series: [{
  1604. type: 'pie',
  1605. name: '占比',
  1606. point: {
  1607. events: {
  1608. click: function (e) {
  1609. that.showTip3 = true
  1610. that.echartTitle = '战略性新兴产业'
  1611. setTimeout(() => {
  1612. that.initChartT1(chartData)
  1613. })
  1614. }
  1615. }
  1616. },
  1617. data: chartData
  1618. }]
  1619. })
  1620. i++;
  1621. if (i === len) {
  1622. i = 0;
  1623. }
  1624. }, 2000);
  1625. },
  1626. legendItemClick: function (event) {
  1627. console.log(event);
  1628. return true;
  1629. }
  1630. }
  1631. },
  1632. credits: {
  1633. enabled: false //去掉hightchats水印
  1634. },
  1635. title: {
  1636. text: '战略性新兴产业',
  1637. style: {
  1638. color: 'rgba(255,255,255,0.6)',
  1639. fontSize: 16,
  1640. },
  1641. y: 90
  1642. },
  1643. tooltip: {
  1644. crosshairs: true,
  1645. backgroundColor: 'rgba(0,0,0,0.5)',
  1646. // positioner: function(e){
  1647. // console.log(e, this)
  1648. // },
  1649. useHTML: true, //开启html模式
  1650. style: {
  1651. color: '#fff',
  1652. },
  1653. formatter: function (e) {
  1654. //console.log(this)
  1655. let num = chartData[this.colorIndex].num
  1656. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1657. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1658. },
  1659. //pointFormat:
  1660. },
  1661. plotOptions: {
  1662. pie: {
  1663. allowPointSelect: true,
  1664. showInLegend: false, // 图例
  1665. cursor: 'pointer',
  1666. size: 220,
  1667. innerSize: 150, //环形图中间空白,0为饼图
  1668. depth: 25, //立体高度
  1669. slicedOffset: 21, //动画距离
  1670. dataLabels: {
  1671. enabled: false, // 是否展示指示线
  1672. format: '{point.name}: {point.percentage}'
  1673. }
  1674. },
  1675. },
  1676. series: [{
  1677. type: 'pie',
  1678. name: '占比',
  1679. //center: ['35%','50%'],
  1680. point: {
  1681. events: {
  1682. click: function (e) { //点击事件
  1683. that.showTip3 = true
  1684. that.echartTitle = '战略性新兴产业'
  1685. setTimeout(() => {
  1686. that.initChartT1(chartData)
  1687. })
  1688. },
  1689. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  1690. //console.log(e)
  1691. chartData.forEach((item, index) => {
  1692. item.sliced = false
  1693. item.selected = false
  1694. })
  1695. chartData[e.target.index].sliced = true
  1696. chartData[e.target.index].selected = true
  1697. chart.update({
  1698. series: [{
  1699. type: 'pie',
  1700. name: '占比',
  1701. point: {
  1702. events: {
  1703. click: function (e) {
  1704. that.showTip3 = true
  1705. that.echartTitle = '战略性新兴产业'
  1706. setTimeout(() => {
  1707. that.initChartT1(chartData)
  1708. })
  1709. }
  1710. }
  1711. },
  1712. data: chartData
  1713. }]
  1714. })
  1715. timer && clearInterval(timer);
  1716. },
  1717. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  1718. var points = chart.series[0].points;
  1719. var len = points.length;
  1720. timer && clearInterval(timer);
  1721. timer = setInterval(function () {
  1722. autoTooltip(points[i]);
  1723. chartData.forEach((item, index) => {
  1724. item.sliced = false
  1725. item.selected = false
  1726. if (index == i) {
  1727. item.sliced = true
  1728. item.selected = true
  1729. }
  1730. })
  1731. chart.update({
  1732. series: [{
  1733. type: 'pie',
  1734. name: '占比',
  1735. point: {
  1736. events: {
  1737. click: function (e) {
  1738. that.showTip3 = true
  1739. that.echartTitle = '战略性新兴产业'
  1740. setTimeout(() => {
  1741. that.initChartT1(chartData)
  1742. })
  1743. }
  1744. }
  1745. },
  1746. data: chartData
  1747. }]
  1748. })
  1749. i++;
  1750. if (i === len) {
  1751. i = 0;
  1752. }
  1753. }, 2000);
  1754. }
  1755. }
  1756. },
  1757. data: chartData
  1758. }]
  1759. }
  1760. var chart = Highcharts.chart('echartL5', option);
  1761. function autoTooltip (point) {
  1762. chart.tooltip.refresh(point);
  1763. }
  1764. },
  1765. initChartL6 () {
  1766. // let data = [
  1767. // { value: [25.82, 43], name: '化工' },
  1768. // { value: [17.36, 21], name: '煤层气' },
  1769. // { value: [0.04, 1], name: '文旅康养' },
  1770. // { value: [1.51, 7], name: '体育' },
  1771. // { value: [9.32, 5], name: '酿造' },
  1772. // { value: [71.12, 129], name: '建筑房地产' },
  1773. // { value: [9.11, 14], name: '农业' },
  1774. // ]
  1775. // let count = 0
  1776. // data.forEach(item => {
  1777. // count += item.value[0]
  1778. // })
  1779. // let myChart = echarts.init(this.$refs['echartL6'])
  1780. // let option = {
  1781. // title: {
  1782. // text: '特色优势产业',
  1783. // x: 'center',
  1784. // y: '0%',
  1785. // textStyle: {
  1786. // color: 'rgba(255,255,255,0.6)',
  1787. // fontSize: 12,
  1788. // },
  1789. // },
  1790. // tooltip: {
  1791. // trigger: 'item',
  1792. // formatter: function (params) {
  1793. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  1794. // }
  1795. // // position: ['30%', '87%'],
  1796. // },
  1797. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1798. // legend: {
  1799. // show: false,
  1800. // icon: 'circle',
  1801. // top: 'bottom',
  1802. // orient: 'vertical',
  1803. // right: '-3%',
  1804. // textStyle: {
  1805. // color: '#9DB9EB',
  1806. // fontSize: '10px'
  1807. // },
  1808. // itemWidth: 10,
  1809. // itemHeight: 10
  1810. // },
  1811. // series: [
  1812. // {
  1813. // name: '',
  1814. // type: 'pie',
  1815. // // radius: ['0%', '70%'],
  1816. // radius: ['50%', '65%'],
  1817. // center: ['50%', '55%'],
  1818. // itemStyle: {
  1819. // normal: {
  1820. // borderColor: 'rgba(1,31,64,0.7)',
  1821. // borderWidth: 6,
  1822. // label: {
  1823. // show: false,
  1824. // },
  1825. // },
  1826. // },
  1827. // labelLine: {
  1828. // show: false,
  1829. // },
  1830. // data,
  1831. // },
  1832. // ],
  1833. // }
  1834. // myChart.setOption(option)
  1835. // tools.loopShowTooltip(myChart, option, {
  1836. // nterval: 2000,
  1837. // loopSeries: true,
  1838. // })
  1839. // let that = this
  1840. // myChart.on('click', function (param) {
  1841. // console.log(param)
  1842. // that.showTip3 = true
  1843. // setTimeout(() => {
  1844. // that.initChartT1(data, option)
  1845. // })
  1846. // })
  1847. // { value: [25.82, 43], name: '化工' },
  1848. // { value: [17.36, 21], name: '煤层气' },
  1849. // { value: [0.04, 1], name: '文旅康养' },
  1850. // { value: [1.51, 7], name: '体育' },
  1851. // { value: [9.32, 5], name: '酿造' },
  1852. // { value: [71.12, 129], name: '建筑房地产' },
  1853. // { value: [9.11, 14], name: '农业' },
  1854. var chartData = [
  1855. {
  1856. name: '化工',
  1857. y: 43.86,
  1858. num: 32,
  1859. sliced: false,
  1860. selected: false,
  1861. },
  1862. {
  1863. name: '煤层气',
  1864. y: 29.49,
  1865. num: 16,
  1866. sliced: false,
  1867. selected: false,
  1868. },
  1869. {
  1870. name: '文旅康养',
  1871. y: 0.07,
  1872. num: 1,
  1873. sliced: false,
  1874. selected: false,
  1875. },
  1876. {
  1877. name: '体育',
  1878. y: 2.57,
  1879. num: 5,
  1880. sliced: false,
  1881. selected: false,
  1882. },
  1883. {
  1884. name: '酿造',
  1885. y: 15.83,
  1886. num: 4,
  1887. sliced: false,
  1888. selected: false,
  1889. },
  1890. {
  1891. name: '建筑房地产',
  1892. y: 120.81,
  1893. num: 96,
  1894. sliced: false,
  1895. selected: false,
  1896. },
  1897. {
  1898. name: '农业',
  1899. y: 15.47,
  1900. num: 10,
  1901. sliced: false,
  1902. selected: false,
  1903. }
  1904. ]
  1905. var timer = null;
  1906. var i = 0;
  1907. let that = this
  1908. var option = {
  1909. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  1910. chart: {
  1911. type: 'pie',
  1912. backgroundColor: 'rgba(0,0,0,0)',
  1913. options3d: {
  1914. enabled: true,
  1915. alpha: 45,
  1916. //beta: 0
  1917. },
  1918. events: {
  1919. // load,图表加载完成时触发
  1920. load: function () {
  1921. var chart = this;
  1922. var points = chart.series[0].points;
  1923. var len = points.length;
  1924. timer && clearInterval(timer);
  1925. timer = setInterval(function () {
  1926. autoTooltip(points[i]);
  1927. chartData.forEach((item, index) => {
  1928. item.sliced = false
  1929. item.selected = false
  1930. if (index == i) {
  1931. item.sliced = true
  1932. item.selected = true
  1933. }
  1934. })
  1935. chart.update({
  1936. series: [{
  1937. type: 'pie',
  1938. name: '占比',
  1939. point: {
  1940. events: {
  1941. click: function (e) {
  1942. that.showTip3 = true
  1943. that.echartTitle = '特色优势产业'
  1944. setTimeout(() => {
  1945. that.initChartT1(chartData)
  1946. })
  1947. }
  1948. }
  1949. },
  1950. data: chartData
  1951. }]
  1952. })
  1953. i++;
  1954. if (i === len) {
  1955. i = 0;
  1956. }
  1957. }, 2000);
  1958. },
  1959. legendItemClick: function (event) {
  1960. console.log(event);
  1961. return true;
  1962. }
  1963. }
  1964. },
  1965. credits: {
  1966. enabled: false //去掉hightchats水印
  1967. },
  1968. title: {
  1969. text: '特色优势产业',
  1970. style: {
  1971. color: 'rgba(255,255,255,0.6)',
  1972. fontSize: 16,
  1973. },
  1974. y: 90
  1975. },
  1976. tooltip: {
  1977. crosshairs: true,
  1978. backgroundColor: 'rgba(0,0,0,0.5)',
  1979. // positioner: function(e){
  1980. // console.log(e, this)
  1981. // },
  1982. useHTML: true, //开启html模式
  1983. style: {
  1984. color: '#fff',
  1985. },
  1986. formatter: function (e) {
  1987. //console.log(this)
  1988. let num = chartData[this.colorIndex].num
  1989. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  1990. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  1991. },
  1992. //pointFormat:
  1993. },
  1994. plotOptions: {
  1995. pie: {
  1996. allowPointSelect: true,
  1997. showInLegend: false, // 图例
  1998. cursor: 'pointer',
  1999. size: 220,
  2000. innerSize: 150, //环形图中间空白,0为饼图
  2001. depth: 25, //立体高度
  2002. slicedOffset: 21, //动画距离
  2003. dataLabels: {
  2004. enabled: false, // 是否展示指示线
  2005. format: '{point.name}: {point.percentage}'
  2006. }
  2007. },
  2008. },
  2009. series: [{
  2010. type: 'pie',
  2011. name: '占比',
  2012. //center: ['35%','50%'],
  2013. point: {
  2014. events: {
  2015. click: function (e) { //点击事件
  2016. that.showTip3 = true
  2017. that.echartTitle = '特色优势产业'
  2018. setTimeout(() => {
  2019. that.initChartT1(chartData)
  2020. })
  2021. },
  2022. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2023. //console.log(e)
  2024. chartData.forEach((item, index) => {
  2025. item.sliced = false
  2026. item.selected = false
  2027. })
  2028. chartData[e.target.index].sliced = true
  2029. chartData[e.target.index].selected = true
  2030. chart.update({
  2031. series: [{
  2032. type: 'pie',
  2033. name: '占比',
  2034. point: {
  2035. events: {
  2036. click: function (e) {
  2037. that.showTip3 = true
  2038. that.echartTitle = '特色优势产业'
  2039. setTimeout(() => {
  2040. that.initChartT1(chartData)
  2041. })
  2042. }
  2043. }
  2044. },
  2045. data: chartData
  2046. }]
  2047. })
  2048. timer && clearInterval(timer);
  2049. },
  2050. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2051. var points = chart.series[0].points;
  2052. var len = points.length;
  2053. timer && clearInterval(timer);
  2054. timer = setInterval(function () {
  2055. autoTooltip(points[i]);
  2056. chartData.forEach((item, index) => {
  2057. item.sliced = false
  2058. item.selected = false
  2059. if (index == i) {
  2060. item.sliced = true
  2061. item.selected = true
  2062. }
  2063. })
  2064. chart.update({
  2065. series: [{
  2066. type: 'pie',
  2067. name: '占比',
  2068. point: {
  2069. events: {
  2070. click: function (e) {
  2071. that.showTip3 = true
  2072. that.echartTitle = '特色优势产业'
  2073. setTimeout(() => {
  2074. that.initChartT1(chartData)
  2075. })
  2076. }
  2077. }
  2078. },
  2079. data: chartData
  2080. }]
  2081. })
  2082. i++;
  2083. if (i === len) {
  2084. i = 0;
  2085. }
  2086. }, 2000);
  2087. }
  2088. }
  2089. },
  2090. data: chartData
  2091. }]
  2092. }
  2093. var chart = Highcharts.chart('echartL6', option);
  2094. function autoTooltip (point) {
  2095. chart.tooltip.refresh(point);
  2096. }
  2097. },
  2098. initChartL7 () {
  2099. // let data = [
  2100. // { value: [155.82, 51], name: '交通运输业' },
  2101. // { value: [8.47, 19], name: '煤气层管网' },
  2102. // { value: [10.64, 24], name: '物流贸易' },
  2103. // { value: [41.05, 46], name: '水务' },
  2104. // { value: [2.14, 7], name: '其他' },
  2105. // ]
  2106. // let count = 0
  2107. // data.forEach(item => {
  2108. // count += item.value[0]
  2109. // })
  2110. // let myChart = echarts.init(this.$refs['echartL7'])
  2111. // let option = {
  2112. // title: {
  2113. // text: '公共基础等产业',
  2114. // x: 'center',
  2115. // y: '0%',
  2116. // textStyle: {
  2117. // color: 'rgba(255,255,255,0.6)',
  2118. // fontSize: 12,
  2119. // },
  2120. // },
  2121. // tooltip: {
  2122. // trigger: 'item',
  2123. // formatter: function (params) {
  2124. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  2125. // }
  2126. // },
  2127. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2128. // legend: {
  2129. // show: false,
  2130. // icon: 'circle',
  2131. // top: 'bottom',
  2132. // orient: 'vertical',
  2133. // right: '-3%',
  2134. // textStyle: {
  2135. // color: '#9DB9EB',
  2136. // fontSize: '10px'
  2137. // },
  2138. // itemWidth: 10,
  2139. // itemHeight: 10
  2140. // },
  2141. // series: [
  2142. // {
  2143. // name: '',
  2144. // type: 'pie',
  2145. // // radius: ['0%', '70%'],
  2146. // radius: ['50%', '65%'],
  2147. // center: ['50%', '55%'],
  2148. // itemStyle: {
  2149. // normal: {
  2150. // borderColor: 'rgba(1,31,64,0.7)',
  2151. // borderWidth: 6,
  2152. // label: {
  2153. // show: false,
  2154. // },
  2155. // },
  2156. // },
  2157. // labelLine: {
  2158. // show: false,
  2159. // },
  2160. // data
  2161. // },
  2162. // ],
  2163. // }
  2164. // myChart.setOption(option)
  2165. // tools.loopShowTooltip(myChart, option, {
  2166. // nterval: 2000,
  2167. // loopSeries: true,
  2168. // })
  2169. // let that = this
  2170. // myChart.on('click', function (param) {
  2171. // console.log(param)
  2172. // that.showTip3 = true
  2173. // setTimeout(() => {
  2174. // that.initChartT1(data, option)
  2175. // })
  2176. // })
  2177. // { value: [155.82, 51], name: '交通运输业' },
  2178. // { value: [8.47, 19], name: '煤气层管网' },
  2179. // { value: [10.64, 24], name: '物流贸易' },
  2180. // { value: [41.05, 46], name: '水务' },
  2181. // { value: [2.14, 7], name: '其他' },
  2182. var chartData = [
  2183. {
  2184. name: '交通运输业',
  2185. y: 264.70,
  2186. num: 38,
  2187. sliced: false,
  2188. selected: false,
  2189. },
  2190. {
  2191. name: '煤气层管网',
  2192. y: 14.39,
  2193. num: 14,
  2194. sliced: false,
  2195. selected: false,
  2196. },
  2197. {
  2198. name: '物流贸易',
  2199. y: 18.07,
  2200. num: 18,
  2201. sliced: false,
  2202. selected: false,
  2203. },
  2204. {
  2205. name: '水务',
  2206. y: 69.73,
  2207. num: 34,
  2208. sliced: false,
  2209. selected: false,
  2210. },
  2211. {
  2212. name: '其他',
  2213. y: 3.64,
  2214. num: 5,
  2215. sliced: false,
  2216. selected: false,
  2217. }
  2218. ]
  2219. var timer = null;
  2220. var i = 0;
  2221. let that = this
  2222. var option = {
  2223. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2224. chart: {
  2225. type: 'pie',
  2226. backgroundColor: 'rgba(0,0,0,0)',
  2227. options3d: {
  2228. enabled: true,
  2229. alpha: 45,
  2230. //beta: 0
  2231. },
  2232. events: {
  2233. // load,图表加载完成时触发
  2234. load: function () {
  2235. var chart = this;
  2236. var points = chart.series[0].points;
  2237. var len = points.length;
  2238. timer && clearInterval(timer);
  2239. timer = setInterval(function () {
  2240. autoTooltip(points[i]);
  2241. chartData.forEach((item, index) => {
  2242. item.sliced = false
  2243. item.selected = false
  2244. if (index == i) {
  2245. item.sliced = true
  2246. item.selected = true
  2247. }
  2248. })
  2249. chart.update({
  2250. series: [{
  2251. type: 'pie',
  2252. name: '占比',
  2253. point: {
  2254. events: {
  2255. click: function (e) {
  2256. that.showTip3 = true
  2257. that.echartTitle = '公共基础等产业'
  2258. setTimeout(() => {
  2259. that.initChartT1(chartData)
  2260. })
  2261. }
  2262. }
  2263. },
  2264. data: chartData
  2265. }]
  2266. })
  2267. i++;
  2268. if (i === len) {
  2269. i = 0;
  2270. }
  2271. }, 2000);
  2272. },
  2273. legendItemClick: function (event) {
  2274. console.log(event);
  2275. return true;
  2276. }
  2277. }
  2278. },
  2279. credits: {
  2280. enabled: false //去掉hightchats水印
  2281. },
  2282. title: {
  2283. text: '公共基础等产业',
  2284. style: {
  2285. color: 'rgba(255,255,255,0.6)',
  2286. fontSize: 16,
  2287. },
  2288. y: 90
  2289. },
  2290. tooltip: {
  2291. crosshairs: true,
  2292. backgroundColor: 'rgba(0,0,0,0.5)',
  2293. // positioner: function(e){
  2294. // console.log(e, this)
  2295. // },
  2296. useHTML: true, //开启html模式
  2297. style: {
  2298. color: '#fff',
  2299. },
  2300. formatter: function (e) {
  2301. //console.log(this)
  2302. let num = chartData[this.colorIndex].num
  2303. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2304. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2305. },
  2306. //pointFormat:
  2307. },
  2308. plotOptions: {
  2309. pie: {
  2310. allowPointSelect: true,
  2311. showInLegend: false, // 图例
  2312. cursor: 'pointer',
  2313. size: 220,
  2314. innerSize: 150, //环形图中间空白,0为饼图
  2315. depth: 25, //立体高度
  2316. slicedOffset: 21, //动画距离
  2317. dataLabels: {
  2318. enabled: false, // 是否展示指示线
  2319. format: '{point.name}: {point.percentage}'
  2320. }
  2321. },
  2322. },
  2323. series: [{
  2324. type: 'pie',
  2325. name: '占比',
  2326. //center: ['35%','50%'],
  2327. point: {
  2328. events: {
  2329. click: function (e) { //点击事件
  2330. that.showTip3 = true
  2331. that.echartTitle = '公共基础等产业'
  2332. setTimeout(() => {
  2333. that.initChartT1(chartData)
  2334. })
  2335. },
  2336. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2337. //console.log(e)
  2338. chartData.forEach((item, index) => {
  2339. item.sliced = false
  2340. item.selected = false
  2341. })
  2342. chartData[e.target.index].sliced = true
  2343. chartData[e.target.index].selected = true
  2344. chart.update({
  2345. series: [{
  2346. type: 'pie',
  2347. name: '占比',
  2348. point: {
  2349. events: {
  2350. click: function (e) {
  2351. that.showTip3 = true
  2352. that.echartTitle = '公共基础等产业'
  2353. setTimeout(() => {
  2354. that.initChartT1(chartData)
  2355. })
  2356. }
  2357. }
  2358. },
  2359. data: chartData
  2360. }]
  2361. })
  2362. timer && clearInterval(timer);
  2363. },
  2364. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2365. var points = chart.series[0].points;
  2366. var len = points.length;
  2367. timer && clearInterval(timer);
  2368. timer = setInterval(function () {
  2369. autoTooltip(points[i]);
  2370. chartData.forEach((item, index) => {
  2371. item.sliced = false
  2372. item.selected = false
  2373. if (index == i) {
  2374. item.sliced = true
  2375. item.selected = true
  2376. }
  2377. })
  2378. chart.update({
  2379. series: [{
  2380. type: 'pie',
  2381. name: '占比',
  2382. point: {
  2383. events: {
  2384. click: function (e) {
  2385. that.showTip3 = true
  2386. that.echartTitle = '公共基础等产业'
  2387. setTimeout(() => {
  2388. that.initChartT1(chartData)
  2389. })
  2390. }
  2391. }
  2392. },
  2393. data: chartData
  2394. }]
  2395. })
  2396. i++;
  2397. if (i === len) {
  2398. i = 0;
  2399. }
  2400. }, 2000);
  2401. }
  2402. }
  2403. },
  2404. data: chartData
  2405. }]
  2406. }
  2407. var chart = Highcharts.chart('echartL7', option);
  2408. function autoTooltip (point) {
  2409. chart.tooltip.refresh(point);
  2410. }
  2411. },
  2412. initChartR4 () {
  2413. let myChart = echarts.init(this.$refs['echartR4'])
  2414. let option = {
  2415. title: {
  2416. text: '2022年的可投资总额',
  2417. x: 'center',
  2418. y: '87%',
  2419. textStyle: {
  2420. color: 'rgba(255,255,255,0.6)',
  2421. fontSize: 12,
  2422. },
  2423. },
  2424. tooltip: {
  2425. trigger: 'item',
  2426. },
  2427. color: ['#69C1FF', '#4B97CC',],
  2428. legend: {
  2429. icon: 'circle',
  2430. top: 'bottom',
  2431. orient: 'vertical',
  2432. right: '1%',
  2433. textStyle: {
  2434. color: '#9DB9EB',
  2435. },
  2436. },
  2437. series: [
  2438. {
  2439. name: '',
  2440. type: 'pie',
  2441. label: {
  2442. normal: {
  2443. show: true,
  2444. position: 'center',
  2445. color: '#4c4a4a',
  2446. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  2447. rich: {
  2448. total: {
  2449. fontSize: 20,
  2450. fontFamily: "微软雅黑",
  2451. color: '#fff'
  2452. },
  2453. active: {
  2454. fontFamily: "微软雅黑",
  2455. fontSize: 15,
  2456. color: '#fff'
  2457. },
  2458. }
  2459. },
  2460. emphasis: {//中间文字显示
  2461. show: true,
  2462. }
  2463. },
  2464. radius: ['40%', '60%'],
  2465. center: ['50%', '45%'],
  2466. itemStyle: {
  2467. normal: {
  2468. label: {
  2469. show: false,
  2470. },
  2471. },
  2472. },
  2473. labelLine: {
  2474. show: false,
  2475. },
  2476. data: [
  2477. { value: 1048, name: '已使用额度' },
  2478. { value: 735, name: '可使用额度' }
  2479. ],
  2480. },
  2481. ],
  2482. }
  2483. myChart.setOption(option)
  2484. tools.loopShowTooltip(myChart, option, {
  2485. nterval: 2000,
  2486. loopSeries: true,
  2487. })
  2488. },
  2489. initChartR5 () {
  2490. let myChart = echarts.init(this.$refs['echartR5'])
  2491. let option = {
  2492. title: {
  2493. text: '2023年的可投资总额',
  2494. x: 'center',
  2495. y: '87%',
  2496. textStyle: {
  2497. color: 'rgba(255,255,255,0.6)',
  2498. fontSize: 12,
  2499. },
  2500. },
  2501. tooltip: {
  2502. trigger: 'item',
  2503. },
  2504. color: ['#69C1FF', '#4B97CC',],
  2505. legend: {
  2506. icon: 'circle',
  2507. top: 'bottom',
  2508. orient: 'vertical',
  2509. right: '1%',
  2510. textStyle: {
  2511. color: '#9DB9EB',
  2512. },
  2513. },
  2514. series: [
  2515. {
  2516. name: '',
  2517. type: 'pie',
  2518. label: {
  2519. normal: {
  2520. show: true,
  2521. position: 'center',
  2522. top: '50',
  2523. color: '#4c4a4a',
  2524. formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
  2525. rich: {
  2526. total: {
  2527. fontSize: 20,
  2528. fontFamily: "微软雅黑",
  2529. color: '#fff'
  2530. },
  2531. active: {
  2532. fontFamily: "微软雅黑",
  2533. fontSize: 15,
  2534. color: '#fff'
  2535. },
  2536. }
  2537. },
  2538. emphasis: {//中间文字显示
  2539. show: true,
  2540. }
  2541. },
  2542. radius: ['40%', '60%'],
  2543. center: ['50%', '45%'],
  2544. itemStyle: {
  2545. normal: {
  2546. label: {
  2547. show: false,
  2548. },
  2549. },
  2550. },
  2551. labelLine: {
  2552. show: false,
  2553. },
  2554. data: [
  2555. { value: 1048, name: '已使用额度' },
  2556. { value: 735, name: '可使用额度' }
  2557. ],
  2558. },
  2559. ],
  2560. }
  2561. myChart.setOption(option)
  2562. tools.loopShowTooltip(myChart, option, {
  2563. nterval: 2000,
  2564. loopSeries: true,
  2565. })
  2566. },
  2567. initChartR1 () {
  2568. // let data = [
  2569. // { value: [1098.71, 713], name: '主业' },
  2570. // { value: [65.17, 84], name: '辅业' }
  2571. // ]
  2572. // let count = 0
  2573. // data.forEach(item => {
  2574. // count += item.value[0]
  2575. // })
  2576. // let myChart = echarts.init(this.$refs['echartR1'])
  2577. // let option = {
  2578. // title: {
  2579. // text: '主辅业计划占比',
  2580. // x: 'center',
  2581. // y: '87%',
  2582. // textStyle: {
  2583. // color: 'rgba(255,255,255,0.6)',
  2584. // fontSize: 12,
  2585. // },
  2586. // },
  2587. // tooltip: {
  2588. // trigger: 'item',
  2589. // // formatter: '{b}' + ':' + '{c}' + '<br/>' + '占比:' + '{d}%',
  2590. // // position: ['-5%', '95%'],
  2591. // formatter: function (params) {
  2592. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  2593. // }
  2594. // },
  2595. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2596. // legend: {
  2597. // show: false,
  2598. // icon: 'circle',
  2599. // top: 'bottom',
  2600. // orient: 'vertical',
  2601. // right: '-3%',
  2602. // textStyle: {
  2603. // color: '#9DB9EB',
  2604. // fontSize: '10px'
  2605. // },
  2606. // itemWidth: 10,
  2607. // itemHeight: 10
  2608. // },
  2609. // series: [
  2610. // {
  2611. // name: '',
  2612. // type: 'pie',
  2613. // radius: ['40%', '60%'],
  2614. // center: ['50%', '45%'],
  2615. // itemStyle: {
  2616. // normal: {
  2617. // borderColor: 'rgba(1,31,64,0.7)',
  2618. // borderWidth: 6,
  2619. // label: {
  2620. // show: false,
  2621. // },
  2622. // },
  2623. // },
  2624. // labelLine: {
  2625. // show: false,
  2626. // },
  2627. // data,
  2628. // },
  2629. // ],
  2630. // }
  2631. // myChart.setOption(option)
  2632. // tools.loopShowTooltip(myChart, option, {
  2633. // nterval: 2000,
  2634. // loopSeries: true,
  2635. // })
  2636. // let that = this
  2637. // myChart.on('click', function (param) {
  2638. // console.log(param)
  2639. // that.showTip3 = true
  2640. // setTimeout(() => {
  2641. // that.initChartT1(data, option)
  2642. // })
  2643. // })
  2644. // let data = [
  2645. // { value: [1098.71, 713], name: '主业' },
  2646. // { value: [65.17, 84], name: '辅业' }
  2647. // ]
  2648. var chartData = [
  2649. {
  2650. name: '辅业',
  2651. y: 76.38,
  2652. num: 84,
  2653. sliced: false,
  2654. selected: false,
  2655. },
  2656. {
  2657. name: '主业',
  2658. y: 1287.50,
  2659. num: 713,
  2660. sliced: false,
  2661. selected: false,
  2662. }
  2663. ]
  2664. var timer = null;
  2665. var i = 0;
  2666. let that = this
  2667. var option = {
  2668. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2669. chart: {
  2670. type: 'pie',
  2671. backgroundColor: 'rgba(0,0,0,0)',
  2672. options3d: {
  2673. enabled: true,
  2674. alpha: 45,
  2675. //beta: 0
  2676. },
  2677. events: {
  2678. // load,图表加载完成时触发
  2679. load: function () {
  2680. var chart = this;
  2681. var points = chart.series[0].points;
  2682. var len = points.length;
  2683. timer && clearInterval(timer);
  2684. timer = setInterval(function () {
  2685. autoTooltip(points[i]);
  2686. chartData.forEach((item, index) => {
  2687. item.sliced = false
  2688. item.selected = false
  2689. if (index == i) {
  2690. item.sliced = true
  2691. item.selected = true
  2692. }
  2693. })
  2694. chart.update({
  2695. series: [{
  2696. type: 'pie',
  2697. name: '占比',
  2698. point: {
  2699. events: {
  2700. click: function (e) {
  2701. that.showTip3 = true
  2702. that.echartTitle = '主辅业计划占比'
  2703. setTimeout(() => {
  2704. that.initChartT1(chartData)
  2705. })
  2706. }
  2707. }
  2708. },
  2709. data: chartData
  2710. }]
  2711. })
  2712. i++;
  2713. if (i === len) {
  2714. i = 0;
  2715. chartData.forEach((item, index) => {
  2716. item.sliced = false
  2717. item.selected = false
  2718. })
  2719. chart.update({
  2720. series: [{
  2721. type: 'pie',
  2722. name: '占比',
  2723. point: {
  2724. events: {
  2725. click: function (e) {
  2726. console.log(e)
  2727. }
  2728. }
  2729. },
  2730. data: chartData
  2731. }]
  2732. })
  2733. }
  2734. }, 2000);
  2735. },
  2736. legendItemClick: function (event) {
  2737. console.log(event);
  2738. return true;
  2739. }
  2740. }
  2741. },
  2742. credits: {
  2743. enabled: false //去掉hightchats水印
  2744. },
  2745. title: {
  2746. text: '主辅业计划占比',
  2747. style: {
  2748. color: 'rgba(255,255,255,0.6)',
  2749. fontSize: 16,
  2750. },
  2751. y: 40
  2752. },
  2753. tooltip: {
  2754. crosshairs: true,
  2755. backgroundColor: 'rgba(0,0,0,0.5)',
  2756. // positioner: function(e){
  2757. // console.log(e, this)
  2758. // },
  2759. useHTML: true, //开启html模式
  2760. style: {
  2761. color: '#fff',
  2762. },
  2763. formatter: function (e) {
  2764. //console.log(this)
  2765. let num = chartData[this.colorIndex].num
  2766. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  2767. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  2768. },
  2769. //pointFormat:
  2770. },
  2771. plotOptions: {
  2772. pie: {
  2773. allowPointSelect: true,
  2774. showInLegend: false, // 图例
  2775. cursor: 'pointer',
  2776. size: 220,
  2777. innerSize: 150, //环形图中间空白,0为饼图
  2778. depth: 25, //立体高度
  2779. slicedOffset: 21, //动画距离
  2780. dataLabels: {
  2781. enabled: false, // 是否展示指示线
  2782. format: '{point.name}: {point.percentage}'
  2783. }
  2784. },
  2785. },
  2786. series: [{
  2787. type: 'pie',
  2788. name: '占比',
  2789. center: ['50%', '50%'],
  2790. point: {
  2791. events: {
  2792. click: function (e) { //点击事件
  2793. that.showTip3 = true
  2794. that.echartTitle = '主辅业计划占比'
  2795. setTimeout(() => {
  2796. that.initChartT1(chartData)
  2797. })
  2798. },
  2799. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  2800. //console.log(e)
  2801. chartData.forEach((item, index) => {
  2802. item.sliced = false
  2803. item.selected = false
  2804. })
  2805. chartData[e.target.index].sliced = true
  2806. chartData[e.target.index].selected = true
  2807. chart.update({
  2808. series: [{
  2809. type: 'pie',
  2810. name: '占比',
  2811. point: {
  2812. events: {
  2813. click: function (e) {
  2814. that.showTip3 = true
  2815. that.echartTitle = '主辅业计划占比'
  2816. setTimeout(() => {
  2817. that.initChartT1(chartData)
  2818. })
  2819. }
  2820. }
  2821. },
  2822. data: chartData
  2823. }]
  2824. })
  2825. timer && clearInterval(timer);
  2826. },
  2827. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  2828. var points = chart.series[0].points;
  2829. var len = points.length;
  2830. timer && clearInterval(timer);
  2831. timer = setInterval(function () {
  2832. autoTooltip(points[i]);
  2833. chartData.forEach((item, index) => {
  2834. item.sliced = false
  2835. item.selected = false
  2836. if (index == i) {
  2837. item.sliced = true
  2838. item.selected = true
  2839. }
  2840. })
  2841. chart.update({
  2842. series: [{
  2843. type: 'pie',
  2844. name: '占比',
  2845. point: {
  2846. events: {
  2847. click: function (e) {
  2848. that.showTip3 = true
  2849. that.echartTitle = '主辅业计划占比'
  2850. setTimeout(() => {
  2851. that.initChartT1(chartData)
  2852. })
  2853. }
  2854. }
  2855. },
  2856. data: chartData
  2857. }]
  2858. })
  2859. i++;
  2860. if (i === len) {
  2861. i = 0;
  2862. chartData.forEach((item, index) => {
  2863. item.sliced = false
  2864. item.selected = false
  2865. })
  2866. chart.update({
  2867. series: [{
  2868. type: 'pie',
  2869. name: '占比',
  2870. point: {
  2871. events: {
  2872. click: function (e) {
  2873. that.showTip3 = true
  2874. that.echartTitle = '主辅业计划占比'
  2875. setTimeout(() => {
  2876. that.initChartT1(chartData)
  2877. })
  2878. }
  2879. }
  2880. },
  2881. data: chartData
  2882. }]
  2883. })
  2884. }
  2885. }, 2000);
  2886. }
  2887. }
  2888. },
  2889. data: chartData
  2890. }]
  2891. }
  2892. var chart = Highcharts.chart('echartR1', option);
  2893. function autoTooltip (point) {
  2894. chart.tooltip.refresh(point);
  2895. }
  2896. },
  2897. initChartR2 () {
  2898. // let data = [
  2899. // { value: [340.77, 168], name: '特别监管类' },
  2900. // { value: [390.22, 465], name: '备案类' }
  2901. // ]
  2902. // let count = 0
  2903. // data.forEach(item => {
  2904. // count += item.value[0]
  2905. // })
  2906. // let myChart = echarts.init(this.$refs['echartR2'])
  2907. // let option = {
  2908. // title: {
  2909. // text: '项目管理类型',
  2910. // x: 'center',
  2911. // y: '87%',
  2912. // textStyle: {
  2913. // color: 'rgba(255,255,255,0.6)',
  2914. // fontSize: 12,
  2915. // },
  2916. // },
  2917. // tooltip: {
  2918. // trigger: 'item',
  2919. // formatter: function (params) {
  2920. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  2921. // }
  2922. // // position: ['-5%', '95%'],
  2923. // },
  2924. // color: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2925. // legend: {
  2926. // show: false,
  2927. // icon: 'circle',
  2928. // top: 'bottom',
  2929. // orient: 'vertical',
  2930. // right: '-3%',
  2931. // textStyle: {
  2932. // color: '#9DB9EB',
  2933. // fontSize: '10px'
  2934. // },
  2935. // itemWidth: 10,
  2936. // itemHeight: 10
  2937. // },
  2938. // series: [
  2939. // {
  2940. // name: '',
  2941. // type: 'pie',
  2942. // radius: ['40%', '60%'],
  2943. // center: ['50%', '45%'],
  2944. // itemStyle: {
  2945. // normal: {
  2946. // borderColor: 'rgba(1,31,64,0.7)',
  2947. // borderWidth: 6,
  2948. // label: {
  2949. // show: false,
  2950. // },
  2951. // },
  2952. // },
  2953. // labelLine: {
  2954. // show: false,
  2955. // },
  2956. // data,
  2957. // },
  2958. // ],
  2959. // }
  2960. // myChart.setOption(option)
  2961. // tools.loopShowTooltip(myChart, option, {
  2962. // nterval: 2000,
  2963. // loopSeries: true,
  2964. // })
  2965. // let that = this
  2966. // myChart.on('click', function (param) {
  2967. // console.log(param)
  2968. // that.showTip3 = true
  2969. // setTimeout(() => {
  2970. // that.initChartT1(data, option)
  2971. // })
  2972. // })
  2973. // { value: [340.77, 168], name: '特别监管类' },
  2974. // { value: [390.22, 465], name: '备案类' }
  2975. var chartData = [
  2976. {
  2977. name: '特别监管类',
  2978. y: 635.84,
  2979. num: 168,
  2980. sliced: false,
  2981. selected: false,
  2982. },
  2983. {
  2984. name: '备案类',
  2985. y: 728.04,
  2986. num: 465,
  2987. sliced: false,
  2988. selected: false,
  2989. }
  2990. ]
  2991. var timer = null;
  2992. var i = 0;
  2993. let that = this
  2994. var chart = Highcharts.chart('echartR2', {
  2995. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  2996. chart: {
  2997. type: 'pie',
  2998. backgroundColor: 'rgba(0,0,0,0)',
  2999. options3d: {
  3000. enabled: true,
  3001. alpha: 45,
  3002. //beta: 0
  3003. },
  3004. events: {
  3005. // load,图表加载完成时触发
  3006. load: function () {
  3007. var chart = this;
  3008. var points = chart.series[0].points;
  3009. var len = points.length;
  3010. timer && clearInterval(timer);
  3011. timer = setInterval(function () {
  3012. autoTooltip(points[i]);
  3013. chartData.forEach((item, index) => {
  3014. item.sliced = false
  3015. item.selected = false
  3016. if (index == i) {
  3017. item.sliced = true
  3018. item.selected = true
  3019. }
  3020. })
  3021. chart.update({
  3022. series: [{
  3023. type: 'pie',
  3024. name: '占比',
  3025. point: {
  3026. events: {
  3027. click: function (e) {
  3028. that.showTip3 = true
  3029. that.echartTitle = '项目管理类型'
  3030. setTimeout(() => {
  3031. that.initChartT1(chartData)
  3032. })
  3033. }
  3034. }
  3035. },
  3036. data: chartData
  3037. }]
  3038. })
  3039. i++;
  3040. if (i === len) {
  3041. i = 0;
  3042. chartData.forEach((item, index) => {
  3043. item.sliced = false
  3044. item.selected = false
  3045. })
  3046. chart.update({
  3047. series: [{
  3048. type: 'pie',
  3049. name: '占比',
  3050. point: {
  3051. events: {
  3052. click: function (e) {
  3053. console.log(e)
  3054. }
  3055. }
  3056. },
  3057. data: chartData
  3058. }]
  3059. })
  3060. }
  3061. }, 2000);
  3062. },
  3063. legendItemClick: function (event) {
  3064. //console.log(event);
  3065. that.showTip3 = true
  3066. that.echartTitle = '项目管理类型'
  3067. setTimeout(() => {
  3068. that.initChartT1(chartData)
  3069. })
  3070. return true;
  3071. }
  3072. }
  3073. },
  3074. credits: {
  3075. enabled: false //去掉hightchats水印
  3076. },
  3077. title: {
  3078. text: '项目管理类型',
  3079. style: {
  3080. color: 'rgba(255,255,255,0.6)',
  3081. fontSize: 16,
  3082. },
  3083. y: 40
  3084. },
  3085. tooltip: {
  3086. crosshairs: true,
  3087. backgroundColor: 'rgba(0,0,0,0.5)',
  3088. // positioner: function(e){
  3089. // console.log(e, this)
  3090. // },
  3091. useHTML: true, //开启html模式
  3092. style: {
  3093. color: '#fff',
  3094. },
  3095. formatter: function (e) {
  3096. //console.log(this)
  3097. let num = chartData[this.colorIndex].num
  3098. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3099. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3100. },
  3101. //pointFormat:
  3102. },
  3103. plotOptions: {
  3104. pie: {
  3105. allowPointSelect: true,
  3106. showInLegend: false, // 图例
  3107. cursor: 'pointer',
  3108. size: 220,
  3109. innerSize: 150, //环形图中间空白,0为饼图
  3110. depth: 25, //立体高度
  3111. slicedOffset: 21, //动画距离
  3112. dataLabels: {
  3113. enabled: false, // 是否展示指示线
  3114. format: '{point.name}: {point.percentage}'
  3115. }
  3116. },
  3117. },
  3118. series: [{
  3119. type: 'pie',
  3120. name: '占比',
  3121. //center: ['35%','50%'],
  3122. point: {
  3123. events: {
  3124. click: function (e) { //点击事件
  3125. that.showTip3 = true
  3126. that.echartTitle = '项目管理类型'
  3127. setTimeout(() => {
  3128. that.initChartT1(chartData)
  3129. })
  3130. },
  3131. mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
  3132. //console.log(e)
  3133. chartData.forEach((item, index) => {
  3134. item.sliced = false
  3135. item.selected = false
  3136. })
  3137. chartData[e.target.index].sliced = true
  3138. chartData[e.target.index].selected = true
  3139. chart.update({
  3140. series: [{
  3141. type: 'pie',
  3142. name: '占比',
  3143. point: {
  3144. events: {
  3145. click: function (e) {
  3146. that.showTip3 = true
  3147. that.echartTitle = '项目管理类型'
  3148. setTimeout(() => {
  3149. that.initChartT1(chartData)
  3150. })
  3151. }
  3152. }
  3153. },
  3154. data: chartData
  3155. }]
  3156. })
  3157. timer && clearInterval(timer);
  3158. },
  3159. mouseOut: function () { // 鼠标移出后需要继续执行轮播
  3160. var points = chart.series[0].points;
  3161. var len = points.length;
  3162. timer && clearInterval(timer);
  3163. timer = setInterval(function () {
  3164. autoTooltip(points[i]);
  3165. chartData.forEach((item, index) => {
  3166. item.sliced = false
  3167. item.selected = false
  3168. if (index == i) {
  3169. item.sliced = true
  3170. item.selected = true
  3171. }
  3172. })
  3173. chart.update({
  3174. series: [{
  3175. type: 'pie',
  3176. name: '占比',
  3177. point: {
  3178. events: {
  3179. click: function (e) {
  3180. that.showTip3 = true
  3181. that.echartTitle = '项目管理类型'
  3182. setTimeout(() => {
  3183. that.initChartT1(chartData)
  3184. })
  3185. }
  3186. }
  3187. },
  3188. data: chartData
  3189. }]
  3190. })
  3191. i++;
  3192. if (i === len) {
  3193. i = 0;
  3194. chartData.forEach((item, index) => {
  3195. item.sliced = false
  3196. item.selected = false
  3197. })
  3198. chart.update({
  3199. series: [{
  3200. type: 'pie',
  3201. name: '占比',
  3202. point: {
  3203. events: {
  3204. click: function (e) {
  3205. console.log(e)
  3206. }
  3207. }
  3208. },
  3209. data: chartData
  3210. }]
  3211. })
  3212. }
  3213. }, 2000);
  3214. }
  3215. }
  3216. },
  3217. data: chartData
  3218. }]
  3219. });
  3220. function autoTooltip (point) {
  3221. chart.tooltip.refresh(point);
  3222. }
  3223. },
  3224. initChartR3 () {
  3225. let myChart = echarts.init(this.$refs['echartR3'])
  3226. let option = {
  3227. title: {
  3228. text: '股权类',
  3229. textStyle: {
  3230. color: '#69C0FF',
  3231. fontSize: 20,
  3232. fontWeight: 500
  3233. },
  3234. top: '20',
  3235. left: '20'
  3236. },
  3237. textStyle: {
  3238. color: '#fff',
  3239. },
  3240. tooltip: {
  3241. trigger: "axis",
  3242. formatter: function (params) {
  3243. var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿元';
  3244. return tip
  3245. },
  3246. axisPointer: {
  3247. lineStyle: {
  3248. type: 'dashed',
  3249. width: 2,
  3250. color: 'rgba(255,255,255,0.6)'
  3251. },
  3252. animation: true
  3253. }
  3254. },
  3255. grid: {
  3256. top: '10%',
  3257. right: '5%',
  3258. left: '15%',
  3259. bottom: '6%',
  3260. },
  3261. yAxis: {
  3262. data: ['备案', '特别监管'],
  3263. splitLine: {
  3264. show: true,
  3265. lineStyle: {
  3266. color: '#68b4dd66',
  3267. type: 'dashed',
  3268. },
  3269. },
  3270. axisLine: {
  3271. show: false
  3272. },
  3273. axisLabel: {
  3274. show: true,
  3275. formatter: '{value}',
  3276. textStyle: {
  3277. color: 'rgba(250,250,250,0.6)',
  3278. },
  3279. },
  3280. nameTextStyle: {
  3281. color: '#ebf8ac',
  3282. fontSize: 16,
  3283. },
  3284. },
  3285. xAxis: {
  3286. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  3287. axisLine: {
  3288. show: true, //隐藏X轴轴线
  3289. lineStyle: {
  3290. color: '#005094',
  3291. width: 1,
  3292. },
  3293. },
  3294. axisTick: {
  3295. show: false, //隐藏X轴刻度
  3296. },
  3297. axisLabel: {
  3298. show: true,
  3299. textStyle: {
  3300. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  3301. fontSize: 12,
  3302. },
  3303. },
  3304. },
  3305. series: [
  3306. {
  3307. name: '',
  3308. type: 'scatter',
  3309. symbol: 'circle',
  3310. symbolSize: function (data) {
  3311. return Math.sqrt(data[2]) * 3;
  3312. },
  3313. label: {
  3314. emphasis: {
  3315. show: true,
  3316. formatter: function (param) {
  3317. return param.data[2];
  3318. },
  3319. position: 'top'
  3320. }
  3321. },
  3322. itemStyle: {
  3323. normal: {
  3324. color: '#40A9FF'
  3325. }
  3326. },
  3327. data: [
  3328. ['项目储备', '特别监管', 9, 6.49],
  3329. ['项目立项', '特别监管', 0, 0.00],
  3330. ['可研论证', '特别监管', 2, 0.10],
  3331. ['投资决策', '特别监管', 27, 15.52],
  3332. ]
  3333. },
  3334. {
  3335. name: '',
  3336. type: 'scatter',
  3337. symbol: 'circle',
  3338. symbolSize: function (data) {
  3339. return Math.sqrt(data[2]) * 3;
  3340. },
  3341. label: {
  3342. emphasis: {
  3343. show: true,
  3344. formatter: function (param) {
  3345. return param.data[2];
  3346. },
  3347. position: 'top'
  3348. }
  3349. },
  3350. itemStyle: {
  3351. normal: {
  3352. color: '#45DAD1'
  3353. }
  3354. },
  3355. data: [
  3356. ['项目储备', '备案', 39, 8.08],
  3357. ['项目立项', '备案', 7, 1.83],
  3358. ['可研论证', '备案', 19, 1.01],
  3359. ['投资决策', '备案', 73, 17.65],
  3360. ]
  3361. },
  3362. ]
  3363. }
  3364. myChart.setOption(option)
  3365. tools.loopShowTooltip(myChart, option, {
  3366. nterval: 2000,
  3367. loopSeries: true,
  3368. })
  3369. },
  3370. initChartR6 () {
  3371. let myChart = echarts.init(this.$refs['echartR6'])
  3372. let option = {
  3373. title: {
  3374. text: '固定资产',
  3375. textStyle: {
  3376. color: '#69C0FF',
  3377. fontSize: 20,
  3378. fontWeight: 500
  3379. },
  3380. top: '20',
  3381. left: '20'
  3382. },
  3383. textStyle: {
  3384. color: '#fff',
  3385. },
  3386. tooltip: {
  3387. trigger: "axis",
  3388. formatter: function (params) {
  3389. var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿元';
  3390. return tip
  3391. },
  3392. axisPointer: {
  3393. lineStyle: {
  3394. type: 'dashed',
  3395. width: 2,
  3396. color: 'rgba(255,255,255,0.6)'
  3397. },
  3398. animation: true
  3399. }
  3400. },
  3401. grid: {
  3402. top: '10%',
  3403. right: '5%',
  3404. left: '15%',
  3405. bottom: '6%',
  3406. },
  3407. yAxis: {
  3408. data: ['备案', '特别监管'],
  3409. splitLine: {
  3410. show: true,
  3411. lineStyle: {
  3412. color: '#68b4dd66',
  3413. type: 'dashed',
  3414. },
  3415. },
  3416. axisLine: {
  3417. show: false
  3418. },
  3419. axisLabel: {
  3420. show: true,
  3421. formatter: '{value}',
  3422. textStyle: {
  3423. color: 'rgba(250,250,250,0.6)',
  3424. },
  3425. },
  3426. nameTextStyle: {
  3427. color: '#ebf8ac',
  3428. fontSize: 16,
  3429. },
  3430. },
  3431. xAxis: {
  3432. data: ['项目储备', '项目立项', '可研论证', '投资决策'],
  3433. axisLine: {
  3434. show: true, //隐藏X轴轴线
  3435. lineStyle: {
  3436. color: '#005094',
  3437. width: 1,
  3438. },
  3439. },
  3440. axisTick: {
  3441. show: false, //隐藏X轴刻度
  3442. },
  3443. axisLabel: {
  3444. show: true,
  3445. textStyle: {
  3446. color: 'rgba(255,255,255,0.6)', //X轴文字颜色
  3447. fontSize: 12,
  3448. },
  3449. },
  3450. },
  3451. series: [
  3452. {
  3453. name: '特别监管',
  3454. type: 'scatter',
  3455. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  3456. symbolSize: function (data) {
  3457. return Math.sqrt(data[2]) * 3;
  3458. },
  3459. label: {
  3460. emphasis: {
  3461. show: true,
  3462. formatter: function (param) {
  3463. return param.data[2];
  3464. },
  3465. position: 'top'
  3466. }
  3467. },
  3468. itemStyle: {
  3469. normal: {
  3470. color: '#40A9FF'
  3471. }
  3472. },
  3473. data: [
  3474. ['项目储备', '特别监管', 14, 12.05],
  3475. ['项目立项', '特别监管', 2, 1.25],
  3476. ['可研论证', '特别监管', 10, 32.69],
  3477. ['投资决策', '特别监管', 15, 28.53],
  3478. ]
  3479. },
  3480. {
  3481. name: '备案',
  3482. type: 'scatter',
  3483. symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  3484. symbolSize: function (data) {
  3485. return Math.sqrt(data[2]) * 3;
  3486. },
  3487. label: {
  3488. emphasis: {
  3489. show: true,
  3490. formatter: function (param) {
  3491. return param.data[2];
  3492. },
  3493. position: 'top'
  3494. }
  3495. },
  3496. itemStyle: {
  3497. normal: {
  3498. color: '#45DAD1'
  3499. }
  3500. },
  3501. data: [
  3502. ['项目储备', '备案', 27, 23.86],
  3503. ['项目立项', '备案', 1, 1.05],
  3504. ['可研论证', '备案', 14, 18.46],
  3505. ['投资决策', '备案', 40, 38.86],
  3506. ]
  3507. },
  3508. ]
  3509. }
  3510. myChart.setOption(option)
  3511. tools.loopShowTooltip(myChart, option, {
  3512. nterval: 2000,
  3513. loopSeries: true,
  3514. })
  3515. },
  3516. initChartT1 (list, info) {
  3517. // let count = 0
  3518. // console.log(list, info)
  3519. // this.echartTitle = info.title.text
  3520. // let data = list
  3521. // data.forEach(item => {
  3522. // count += item.value[0]
  3523. // })
  3524. // let option = JSON.parse(JSON.stringify(info))
  3525. // option.series[0].center = ['50%', '50%']
  3526. // option.series[0].radius = ['60%', '75%']
  3527. // option.legend = {
  3528. // show: false,
  3529. // icon: 'circle',
  3530. // top: 'bottom',
  3531. // orient: 'vertical',
  3532. // right: '2%',
  3533. // textStyle: {
  3534. // color: '#9DB9EB',
  3535. // fontSize: 16
  3536. // },
  3537. // itemWidth: 10,
  3538. // itemHeight: 10
  3539. // },
  3540. // option.title.text = ''
  3541. // option.tooltip = {
  3542. // trigger: 'item',
  3543. // formatter: function (params) {
  3544. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  3545. // }
  3546. // }
  3547. // option.series[0].itemStyle.normal.label = {
  3548. // show: true,
  3549. // formatter: function (params) {
  3550. // return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '\n' + params.value[1] + '个' + ',' + params.value[0] + '亿'
  3551. // }
  3552. // }
  3553. // option.series[0].labelLine.show = true
  3554. // let myChart = echarts.init(this.$refs['echartT1'])
  3555. // myChart.setOption(option)
  3556. // tools.loopShowTooltip(myChart, option, {
  3557. // nterval: 2000,
  3558. // loopSeries: true,
  3559. // })
  3560. var chartData = list
  3561. //console.log(list)
  3562. setTimeout(() => {
  3563. Highcharts.chart('echartT1', {
  3564. colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
  3565. chart: {
  3566. type: 'pie',
  3567. backgroundColor: 'rgba(0,0,0,0)',
  3568. options3d: {
  3569. enabled: true,
  3570. alpha: 45,
  3571. //beta: 0
  3572. },
  3573. },
  3574. credits: {
  3575. enabled: false //去掉hightchats水印
  3576. },
  3577. title: null,
  3578. tooltip: {
  3579. crosshairs: true,
  3580. backgroundColor: 'rgba(0,0,0,0.5)',
  3581. // positioner: function(e){
  3582. // console.log(e, this)
  3583. // },
  3584. useHTML: true, //开启html模式
  3585. style: {
  3586. color: '#fff',
  3587. },
  3588. formatter: function (e) {
  3589. //console.log(this)
  3590. let num = chartData[this.colorIndex].num
  3591. this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
  3592. return `${this.key}:<b>${this.percentage}%</b><br/><b>${this.y}</b>亿,<b>${num}个</b>`
  3593. },
  3594. //pointFormat:
  3595. },
  3596. plotOptions: {
  3597. pie: {
  3598. allowPointSelect: true,
  3599. showInLegend: false, // 图例
  3600. cursor: 'pointer',
  3601. size: 260,
  3602. innerSize: 170, //环形图中间空白,0为饼图
  3603. depth: 38, //立体高度
  3604. slicedOffset: 23, //动画距离
  3605. dataLabels: {
  3606. enabled: true, // 是否展示指示线
  3607. formatter: function (point) {
  3608. let num = chartData[this.colorIndex].num
  3609. console.log(num)
  3610. this.percentage = this.percentage.toFixed(2)
  3611. return `${this.key}:${this.percentage}%<br/>${this.y}亿,${num}个`
  3612. } //''
  3613. }
  3614. },
  3615. },
  3616. series: [{
  3617. type: 'pie',
  3618. name: '占比',
  3619. //center: ['35%','50%'],
  3620. data: chartData
  3621. }]
  3622. });
  3623. }, 50)
  3624. }
  3625. },
  3626. })