investHome2.js 114 KB

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