index.js 114 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919
  1. let app = new Vue({
  2. el: "#app",
  3. data() {
  4. return {
  5. count: 0, //重点项目两线指标轮到哪个
  6. list: [], //重点项目两线指标数组
  7. countType: 0, //重点项目两线指标数组
  8. leftEcharts1: "",
  9. leftEcharts2: "",
  10. leftEcharts3: "",
  11. leftEcharts4: "",
  12. leftEcharts5: "",
  13. leftEcharts6: "",
  14. leftEcharts7: "",
  15. leftEcharts8: "",
  16. leftEcharts9: '',
  17. leftEcharts10: '',
  18. leftEcharts11: '',
  19. leftEcharts12: '',
  20. shanxiMap: "", // 山西地图
  21. industryProportion: 1, // 主辅业占比轮播
  22. industryLayout: 0, //产业布局分析
  23. time1: "", // 4秒定时器
  24. time2: "", // 针对投前产业布局分析的定时器
  25. storageRecordConfig: {
  26. waitTime: "2000",
  27. hoverPause: true,
  28. header: ["企业集团", "项目名 ", "投资总额"],
  29. headerHeight: 80,
  30. headerBGC: "#092853",
  31. oddRowBGC: "#001c42",
  32. evenRowBGC: "#001c42",
  33. // oddRowBGC: '#05507b33',
  34. rowNum: 6,
  35. columnWidth: [150, 450, 150],
  36. align: ["center", "center", "center"],
  37. data: [
  38. ["国际能源", "娄烦县120MW智慧光伏发电项目+10%储能", "6.78亿元"],
  39. ["国际能源", "平朔矿区150MW农光储氢一体化项目", "7.84亿元"],
  40. ["汾酒集团", "汾酒2030技改原酒产储能扩建项目(一期)", "91.02亿元"],
  41. [
  42. "大地控股",
  43. "山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目",
  44. "8.67亿元",
  45. ],
  46. ["潞安化工", "分布式光伏发电项目", "2.01亿元"],
  47. ["太重集团", "设立太重(大同)新能源产业投资公司", "0.30亿元"],
  48. [
  49. "大地控股",
  50. "山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目",
  51. "3.60亿元",
  52. ],
  53. [
  54. "大地控股",
  55. "山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目",
  56. "3.11亿元",
  57. ],
  58. ["汾酒集团", "保健酒园区新增原酒产能项目", "4.98亿元"],
  59. ["汾酒集团", "白玉酒厂改扩建项目", "4.96亿元"],
  60. ["华阳新材", "5GW高效光伏组件制造项目", "4.82亿元"],
  61. ["华新燃气", "吉县—延长输气管道项目(一期工程)", "3.54亿元"],
  62. ["太重集团", "建设液压挖掘机配套油缸项目", "2.60亿元"],
  63. [
  64. "华远陆港",
  65. "物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目",
  66. "6.60亿元",
  67. ],
  68. ["太重集团", "设立昔阳县晶能新能源有限公司", "0.50亿元"],
  69. ["山西建投", "设立山西低碳环保产业集团有限公司", "30.00亿元"],
  70. [
  71. "山西建投",
  72. "设立山西省太忻经济一体化发展投资集团有限公司",
  73. "30.00亿元",
  74. ],
  75. ["华新燃气", "设立山西华新液化天然气集团有限公司", "3.00亿元"],
  76. ["交控集团", "设立山西交控新能源发展有限公司", "3.00亿元"],
  77. ],
  78. },
  79. meansList: [
  80. {
  81. label: "初步设计",
  82. value: "106",
  83. },
  84. {
  85. label: "详细设计",
  86. value: "103",
  87. },
  88. {
  89. label: "施工",
  90. value: "62",
  91. },
  92. {
  93. label: "完工",
  94. value: "35",
  95. },
  96. {
  97. label: "验收",
  98. value: "42",
  99. },
  100. {
  101. label: "结算",
  102. value: "33",
  103. },
  104. ],
  105. stockRightList: [
  106. {
  107. label: "前期准备",
  108. value: "66",
  109. },
  110. {
  111. label: "工商变更登记",
  112. value: "77",
  113. },
  114. ],
  115. costList: [
  116. {
  117. num: 160,
  118. value: 284,
  119. status: "正偏差",
  120. },
  121. {
  122. num: 280,
  123. value: 129,
  124. status: "容差内",
  125. },
  126. {
  127. num: 103,
  128. value: 1082,
  129. status: "负偏差",
  130. },
  131. ],
  132. investData: {
  133. investList: [
  134. {
  135. name: "大地控股",
  136. yse: "26.79",
  137. yqhte: "9.64",
  138. czrde: "121.59",
  139. jse: "120.13",
  140. fke: "36.4",
  141. url: "./img/logos/logo15.png",
  142. },
  143. {
  144. name: "云时代",
  145. yse: "21.79",
  146. yqhte: "9.64",
  147. czrde: "121.59",
  148. jse: "120.13",
  149. fke: "36.4",
  150. url: "./img/logos/logo16.png",
  151. },
  152. {
  153. name: "华舰体育",
  154. yse: "26.79",
  155. yqhte: "9.64",
  156. czrde: "121.59",
  157. jse: "120.13",
  158. fke: "36.4",
  159. url: "./img/logos/logo17.png",
  160. },
  161. {
  162. name: "神农科技",
  163. yse: "26.79",
  164. yqhte: "9.64",
  165. czrde: "121.59",
  166. jse: "120.13",
  167. fke: "36.4",
  168. url: "./img/logos/logo18.png",
  169. },
  170. {
  171. name: "山西焦煤",
  172. yse: "26.79",
  173. yqhte: "9.64",
  174. czrde: "121.59",
  175. jse: "120.13",
  176. fke: "36.4",
  177. url: "./img/logos/logo1.png",
  178. },
  179. {
  180. name: "晋能控股",
  181. yse: "26.79",
  182. yqhte: "9.64",
  183. czrde: "121.59",
  184. jse: "120.13",
  185. fke: "36.4",
  186. url: "./img/logos/logo2.png",
  187. },
  188. {
  189. name: "华阳新材",
  190. yse: "26.79",
  191. yqhte: "9.64",
  192. czrde: "121.59",
  193. jse: "120.13",
  194. fke: "36.4",
  195. url: "./img/logos/logo3.png",
  196. },
  197. {
  198. name: "潞安化工",
  199. yse: "26.79",
  200. yqhte: "9.64",
  201. czrde: "121.59",
  202. jse: "120.13",
  203. fke: "36.4",
  204. url: "./img/logos/logo4.png",
  205. },
  206. {
  207. name: "华新燃气",
  208. yse: "26.79",
  209. yqhte: "9.64",
  210. czrde: "121.59",
  211. jse: "120.13",
  212. fke: "36.4",
  213. url: "./img/logos/logo5.png",
  214. },
  215. {
  216. name: "太重集团",
  217. yse: "26.79",
  218. yqhte: "9.64",
  219. czrde: "121.59",
  220. jse: "120.13",
  221. fke: "36.4",
  222. url: "./img/logos/logo6.png",
  223. },
  224. {
  225. name: "国际能源",
  226. yse: "26.79",
  227. yqhte: "9.64",
  228. czrde: "121.59",
  229. jse: "120.13",
  230. fke: "36.4",
  231. url: "./img/logos/logo7.png",
  232. },
  233. {
  234. name: "华远陆港",
  235. yse: "26.79",
  236. yqhte: "9.64",
  237. czrde: "121.59",
  238. jse: "120.13",
  239. fke: "36.4",
  240. url: "./img/logos/logo8.png",
  241. },
  242. {
  243. name: "水控集团",
  244. yse: "26.79",
  245. yqhte: "9.64",
  246. czrde: "121.59",
  247. jse: "120.13",
  248. fke: "36.4",
  249. url: "./img/logos/logo9.png",
  250. },
  251. {
  252. name: "文旅集团",
  253. yse: "26.79",
  254. yqhte: "9.64",
  255. czrde: "121.59",
  256. jse: "120.13",
  257. fke: "36.4",
  258. url: "./img/logos/logo10.png",
  259. },
  260. {
  261. name: "交控集团",
  262. yse: "26.79",
  263. yqhte: "9.64",
  264. czrde: "121.59",
  265. jse: "120.13",
  266. fke: "36.4",
  267. url: "./img/logos/logo11.png",
  268. },
  269. {
  270. name: "航产集团",
  271. yse: "26.79",
  272. yqhte: "9.64",
  273. czrde: "121.59",
  274. jse: "120.13",
  275. fke: "36.4",
  276. url: "./img/logos/logo12.png",
  277. },
  278. {
  279. name: "山西建投",
  280. yse: "26.79",
  281. yqhte: "9.64",
  282. czrde: "121.59",
  283. jse: "120.13",
  284. fke: "36.4",
  285. url: "./img/logos/logo13.png",
  286. },
  287. {
  288. name: "汾酒集团",
  289. yse: "26.79",
  290. yqhte: "9.64",
  291. czrde: "121.59",
  292. jse: "120.13",
  293. fke: "36.4",
  294. url: "./img/logos/logo14.png",
  295. },
  296. ],
  297. },
  298. riskData: {
  299. x: [
  300. { name: "大地控股", value: [14, 13, 6, 15, 13, 4] },
  301. { name: "云时代", value: [15, 12, 12, 10, 24, 6] },
  302. { name: "华舰体育", value: [14, 13, 6, 15, 13, 4] },
  303. { name: "神农科技", value: [14, 13, 6, 15, 13, 4] },
  304. { name: "山西焦煤", value: [14, 13, 6, 15, 13, 4] },
  305. { name: "晋能控股", value: [14, 13, 6, 15, 13, 4] },
  306. { name: "华阳新材", value: [14, 13, 6, 15, 13, 4] },
  307. { name: "潞安化工", value: [14, 13, 6, 15, 13, 4] },
  308. { name: "华新燃气", value: [14, 13, 6, 15, 13, 4] },
  309. { name: "太重集团", value: [14, 13, 6, 15, 13, 4] },
  310. { name: "国际能源", value: [14, 13, 6, 15, 13, 4] },
  311. { name: "华远陆港", value: [14, 13, 6, 15, 13, 4] },
  312. { name: "水控集团", value: [14, 13, 6, 15, 13, 4] },
  313. { name: "文旅集团", value: [14, 13, 6, 15, 13, 4] },
  314. { name: "交控集团", value: [14, 13, 6, 15, 13, 4] },
  315. { name: "航产集团", value: [14, 13, 6, 15, 13, 4] },
  316. { name: "山西建投", value: [14, 13, 6, 15, 13, 4] },
  317. { name: "汾酒集团", value: [14, 13, 6, 15, 13, 4] },
  318. ],
  319. y1: [
  320. 120, 110, 200, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
  321. 20, 220, 123, 345,
  322. ],
  323. y2: [
  324. 120, 110, 210, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
  325. 20, 220, 123, 345,
  326. ],
  327. y3: [
  328. 120, 110, 230, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
  329. 20, 220, 123, 345,
  330. ],
  331. },
  332. inner: 0,
  333. innerDeg: 0,
  334. timer: null,
  335. witchs: 0,
  336. topIndex: 0,
  337. echartR1Fd1: true,
  338. echartR2Fd2: true,
  339. r3Index: 0,
  340. riskData1: {
  341. x: [
  342. "大地控股",
  343. "云时代",
  344. "华舰体育",
  345. "神农科技",
  346. "山西焦煤",
  347. "晋能控股",
  348. "华阳新材",
  349. "潞安化工",
  350. "华新燃气",
  351. "太重集团",
  352. "国际能源",
  353. "华远陆港",
  354. "水控集团",
  355. "文旅集团",
  356. "交控集团",
  357. "航产集团",
  358. "山西建投",
  359. "汾酒集团",
  360. ],
  361. y1: [
  362. 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
  363. 110, 108, 34,
  364. ],
  365. y2: [
  366. 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
  367. 110, 108, 34,
  368. ],
  369. y3: [
  370. 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
  371. 110, 108, 34,
  372. ],
  373. y4: [
  374. 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
  375. 110, 108, 34,
  376. ],
  377. y5: [
  378. 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
  379. 110, 108, 34,
  380. ],
  381. },
  382. };
  383. },
  384. created() {},
  385. beforeDestroy() {
  386. clearInterval(this.timer);
  387. clearInterval(this.time1);
  388. clearInterval(this.time2);
  389. },
  390. mounted() {
  391. this.time4s();
  392. this.timeNs();
  393. this.filterLpData();
  394. this.lpRotate();
  395. setTimeout(() => {
  396. this.leftEcharts1Fun();
  397. this.leftEcharts2Fun();
  398. this.leftEcharts3Fun();
  399. this.leftEcharts4Fun();
  400. this.leftEcharts5Fun();
  401. this.leftEcharts6Fun();
  402. this.leftEcharts7Fun();
  403. this.leftEcharts8Fun();
  404. this.leftEcharts9Fun();
  405. this.leftEcharts10Fun();
  406. this.leftEcharts11Fun();
  407. this.leftEcharts12Fun();
  408. this.chinaEchartsFun();
  409. this.initChartR1();
  410. this.initChartR2();
  411. this.initChartR4();
  412. });
  413. },
  414. methods: {
  415. initChartR1() {
  416. let that = this;
  417. let sumA = 42;
  418. let right5 = [
  419. [
  420. ["山西焦煤", 43.8],
  421. ["晋能控股", 49.8],
  422. ["华阳新材", 46],
  423. ["潞安化工", 53.8],
  424. ["华新燃气", 59],
  425. ["太重集团", 57],
  426. ["国际能源", 44],
  427. ["华远陆港", 46],
  428. ["万家寨水控", 57],
  429. ["文旅集团", 62.8],
  430. ["山西交控", 55.8],
  431. ["航产集团", 44.2],
  432. ["山西建投", 49.6],
  433. ["汾酒集团", 66.65],
  434. ["大地控股", 45.6],
  435. ["云时代", 63.9],
  436. ["华舰体育", 70.6],
  437. ["神农科技", 45.6],
  438. ],
  439. [
  440. ["山西焦煤", 25.8],
  441. ["晋能控股", 25.8],
  442. ["华阳新材", 38],
  443. ["潞安化工", 37.8],
  444. ["华新燃气", 28],
  445. ["太重集团", 38],
  446. ["国际能源", 28],
  447. ["华远陆港", 38],
  448. ["万家寨水控", 35.8],
  449. ["文旅集团", 22.8],
  450. ["山西交控", 25.8],
  451. ["航产集团", 24.2],
  452. ["山西建投", 23.6],
  453. ["汾酒集团", 26.65],
  454. ["大地控股", 25.6],
  455. ["云时代", 30.9],
  456. ["华舰体育", 38.6],
  457. ["神农科技", 35.6],
  458. ],
  459. [
  460. ["山西焦煤", 15.8],
  461. ["晋能控股", 15.8],
  462. ["华阳新材", 8],
  463. ["潞安化工", 17.8],
  464. ["华新燃气", 18],
  465. ["太重集团", 18],
  466. ["国际能源", 8],
  467. ["华远陆港", 5.8],
  468. ["万家寨水控", 5.8],
  469. ["文旅集团", 2.8],
  470. ["山西交控", 5.8],
  471. ["航产集团", 12.2],
  472. ["山西建投", 13.6],
  473. ["汾酒集团", 16.65],
  474. ["大地控股", 15.6],
  475. ["云时代", 13.9],
  476. ["华舰体育", 18.6],
  477. ["神农科技", 15.6],
  478. ],
  479. ];
  480. // 所有在100范围外的全部变成0,其他值相应增加/减少sumA
  481. right5.forEach((item) => {
  482. item.forEach((item2) => {
  483. if (Number(item2[1]) < 0) {
  484. item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)));
  485. } else if (Number(item2[1]) > 0) {
  486. item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA);
  487. }
  488. if (Number(item2[1]) < -100 - sumA) {
  489. item2[1] = that.$set(item2, 1, 0);
  490. item2[1] = that.$set(item2, 2, 0);
  491. } else if (Number(item2[1]) > 100 + sumA) {
  492. item2[1] = that.$set(item2, 1, 0);
  493. item2[1] = that.$set(item2, 2, 0);
  494. }
  495. });
  496. });
  497. const itemStyle = {
  498. // opacity: 0.8,
  499. shadowBlur: 10,
  500. shadowOffsetX: 0,
  501. shadowOffsetY: 0,
  502. shadowColor: "rgba(0,0,0,0.3)",
  503. };
  504. that.right2Chart = echarts.init(this.$refs["echartR1"]);
  505. that.right2Chart.on("showTip", (params) => {
  506. console.log(params);
  507. // 如果是7或者15并且满足防抖则切换
  508. if (
  509. (params.dataIndex == 5 || params.dataIndex == 11) &&
  510. that.echartR2Fd
  511. ) {
  512. that.echartR2Fd = false;
  513. setTimeout(() => {
  514. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
  515. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
  516. that.right2Chart.setOption(option);
  517. // 防止勿刷新做的防抖
  518. setTimeout(() => {
  519. that.echartR2Fd = true;
  520. }, 2000);
  521. }, 1900);
  522. // 如果是17表示到了最后一个,那么重新来一遍
  523. } else if (params.dataIndex == 17 && that.echartR2Fd) {
  524. that.echartR2Fd = false;
  525. setTimeout(() => {
  526. option.dataZoom[0].endValue = 0;
  527. option.dataZoom[0].startValue = 5;
  528. that.right2Chart.setOption(option);
  529. // 防止勿刷新做的防抖
  530. setTimeout(() => {
  531. that.echartR2Fd = true;
  532. }, 2000);
  533. }, 1900);
  534. }
  535. });
  536. let option = {
  537. color: ["#04635E", "#697143", "#4A3042"],
  538. dataZoom: [
  539. {
  540. // start: 9,//默认为@
  541. // end: 100,//黑认认为1@0
  542. type: "slider",
  543. show: false,
  544. // xAxisIndex: [0]
  545. handlesize: 0, //滑动条的 左右2个滑动条的大小
  546. startValue: 5, // 初始显示值
  547. endValue: 0, // 结束显示值
  548. height: 10, //组件高度
  549. left: "5%",
  550. right: "4%", //右边的距离
  551. bottom: "25%", //底边的距离
  552. borderColor: "#939",
  553. fillerColor: "#269cdb",
  554. borderRadius: 5,
  555. backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
  556. showDataShadow: false, //是否显示数据阴影
  557. showDetail: false, //即拖拽时候是否显示详细数值信息
  558. truerealtime: true, //是否实时更新
  559. filterMode: "filter",
  560. },
  561. {
  562. type: "inside",
  563. show: true,
  564. start: 1,
  565. end: 100,
  566. zoomOnMouseWheel: false, //滚轮是否触发缩放
  567. moveOnMouseMove: false, //鼠标滚轮触发滚动
  568. },
  569. ],
  570. legend: {
  571. selectedMode: false,
  572. top: 10,
  573. right: "6%",
  574. data: ["正偏差", "容差", "负偏差"],
  575. textStyle: {
  576. fontSize: 20,
  577. color: "#fff",
  578. fontFamily: "Microsoft YaHei",
  579. },
  580. },
  581. textStyle: {
  582. color: "#fff",
  583. },
  584. // tooltip: {
  585. // show: true,
  586. // trigger: "axis",
  587. // textStyle: {
  588. // color: "#FFF", // 文字的颜色
  589. // fontSize: "20", // 文字字体大小
  590. // fontFamily: "Microsoft YaHei",
  591. // },
  592. // formatter: (data) => {
  593. // return `${
  594. // data[0].value[0]
  595. // }<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
  596. // data[0].color
  597. // }"></span> ${data[0].seriesName}:${that.numFormat(
  598. // data[0].data[2]
  599. // )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
  600. // data[1].color
  601. // }"></span> ${data[1].seriesName}:${that.numFormat(
  602. // data[1].data[2]
  603. // )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
  604. // data[2].color
  605. // }"></span> ${data[2].seriesName}:${that.numFormat(
  606. // data[2].data[2]
  607. // )}亿`;
  608. // },
  609. // axisPointer: {
  610. // // // type: 'cross',',
  611. // },
  612. // },
  613. grid: {
  614. top: "10%",
  615. right: "7%",
  616. left: "7%",
  617. bottom: "6%",
  618. },
  619. yAxis: {
  620. min: -101 - sumA,
  621. max: 101 + sumA,
  622. maxInterval: 1,
  623. splitLine: {
  624. show: false,
  625. // interval:,
  626. lineStyle: {
  627. color: "#68b4dd66",
  628. type: "dashed",
  629. },
  630. },
  631. axisLine: {
  632. show: false,
  633. },
  634. axisTick: {
  635. show: false,
  636. },
  637. axisLabel: {
  638. show: true,
  639. // formatter: '{value}',
  640. formatter(data) {
  641. if (data == 100 + sumA) {
  642. return "100%";
  643. } else if (data == -100 - sumA) {
  644. return "-100%";
  645. } else if (data == -5 - sumA) {
  646. return "-5%";
  647. } else if (data == 5 + sumA) {
  648. return "5%";
  649. }
  650. },
  651. textStyle: {
  652. color: "#fff",
  653. fontSize: "20",
  654. fontFamily: "Microsoft YaHei",
  655. },
  656. },
  657. nameTextStyle: {
  658. color: "#fff",
  659. fontSize: 20,
  660. fontFamily: "Microsoft YaHei",
  661. },
  662. },
  663. xAxis: {
  664. data: right5[0].map((item) => item[0]),
  665. axisLine: {
  666. show: false, //隐藏X轴轴线
  667. lineStyle: {
  668. color: "#005094",
  669. width: 1,
  670. },
  671. },
  672. splitLine: {
  673. show: true,
  674. lineStyle: {
  675. color: "#68b4dd66",
  676. type: "dashed",
  677. },
  678. },
  679. axisTick: {
  680. show: true, //隐藏X轴刻度
  681. },
  682. axisLabel: {
  683. show: true,
  684. rotate: 20,
  685. padding: [0, 0, 0, 0],
  686. textStyle: {
  687. color: "#fff", //X轴文字颜色
  688. fontSize: 22,
  689. fontFamily: "Microsoft YaHei",
  690. },
  691. },
  692. },
  693. series: [
  694. {
  695. name: "正偏差",
  696. type: "scatter",
  697. itemStyle: itemStyle,
  698. data: right5[0],
  699. symbolSize: function (data) {
  700. if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
  701. return 40;
  702. } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
  703. return 70;
  704. } else if (data[2] > 100) {
  705. return 100;
  706. }
  707. },
  708. markLine: {
  709. symbol: "none",
  710. data: [
  711. {
  712. name: "100%",
  713. yAxis: 100 + sumA,
  714. lineStyle: {
  715. // color: '#fff',
  716. },
  717. label: {
  718. show: false,
  719. formatter: "{b}",
  720. position: "right",
  721. color: "#fff",
  722. fontSize: 20,
  723. label: {
  724. show: false,
  725. },
  726. },
  727. },
  728. {
  729. name: "5%",
  730. yAxis: 5 + sumA,
  731. lineStyle: {
  732. // color: '#fff',
  733. },
  734. label: {
  735. show: false,
  736. formatter: "{b}",
  737. position: "right",
  738. color: "#fff",
  739. fontSize: 20,
  740. },
  741. },
  742. {
  743. name: "-5%",
  744. yAxis: -5 - sumA,
  745. lineStyle: {
  746. // color: '#fff',
  747. },
  748. label: {
  749. show: false,
  750. formatter: "{b}",
  751. position: "right",
  752. color: "#fff",
  753. fontSize: 20,
  754. },
  755. },
  756. {
  757. name: "100%",
  758. yAxis: -100 - sumA,
  759. lineStyle: {
  760. // color: '#fff',
  761. },
  762. label: {
  763. show: false,
  764. formatter: "{b}",
  765. position: "right",
  766. color: "#fff",
  767. fontSize: 20,
  768. },
  769. },
  770. ],
  771. },
  772. },
  773. {
  774. name: "容差",
  775. type: "scatter",
  776. itemStyle: itemStyle,
  777. data: right5[1],
  778. symbolSize: function (data) {
  779. if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
  780. return 40;
  781. } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
  782. return 70;
  783. } else if (data[2] > 100) {
  784. return 100;
  785. }
  786. },
  787. },
  788. {
  789. name: "负偏差",
  790. type: "scatter",
  791. itemStyle: itemStyle,
  792. data: right5[2],
  793. symbolSize: function (data) {
  794. if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
  795. return 40;
  796. } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
  797. return 70;
  798. } else if (data[2] > 100) {
  799. return 100;
  800. }
  801. },
  802. },
  803. ],
  804. };
  805. that.right2Chart.on("click", function (param) {
  806. if (that.versions) {
  807. that.rightAdd.modelName = 1;
  808. that.rightAdd.substraction =
  809. param.seriesName == "正偏差"
  810. ? 1
  811. : param.seriesName == "容差"
  812. ? 2
  813. : 3;
  814. that.rightAdd.projectStepCode = "";
  815. that.projectNum = 313;
  816. that.rightPenetrateTwo(
  817. 1,
  818. param.seriesName == "正偏差"
  819. ? 1
  820. : param.seriesName == "容差"
  821. ? 2
  822. : 3,
  823. that.findCode(param.name),
  824. "right"
  825. );
  826. } else {
  827. that.projectListTipShow = true;
  828. }
  829. });
  830. that.right2Chart.setOption(option);
  831. tools.loopShowTooltip(that.right2Chart, option, {
  832. interval: 2000,
  833. loopSeries: true,
  834. });
  835. },
  836. initChartR2() {
  837. let that = this;
  838. that.right1Chart = echarts.init(this.$refs["echartR2"]);
  839. that.right1Chart.on("showTip", (params) => {
  840. that.r3Index = params.dataIndex;
  841. that.initChartR3();
  842. console.log(that.r3Index);
  843. // 如果是7或者15并且满足防抖则切换
  844. if (
  845. (params.dataIndex == 5 || params.dataIndex == 11) &&
  846. that.echartR1Fd1
  847. ) {
  848. that.echartR1Fd1 = false;
  849. setTimeout(() => {
  850. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
  851. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
  852. that.right1Chart.setOption(option);
  853. // 防止勿刷新做的防抖
  854. setTimeout(() => {
  855. that.echartR1Fd1 = true;
  856. }, 2000);
  857. }, 1900);
  858. // 如果是17表示到了最后一个,那么重新来一遍
  859. } else if (params.dataIndex == 17 && that.echartR1Fd1) {
  860. that.echartR1Fd1 = false;
  861. setTimeout(() => {
  862. option.dataZoom[0].endValue = 0;
  863. option.dataZoom[0].startValue = 5;
  864. that.right1Chart.setOption(option);
  865. // 防止勿刷新做的防抖
  866. setTimeout(() => {
  867. that.echartR1Fd1 = true;
  868. }, 2000);
  869. }, 1900);
  870. }
  871. });
  872. let option = {
  873. color: [
  874. {
  875. type: "linear",
  876. x: 0,
  877. y: 0,
  878. x2: 0,
  879. y2: 1,
  880. colorStops: [
  881. {
  882. offset: 0,
  883. color: "#91231F", // 0% 处的颜色
  884. },
  885. {
  886. offset: 1,
  887. color: "#F98784", // 100% 处的颜色
  888. },
  889. ],
  890. global: false, // 缺省为 false
  891. },
  892. {
  893. type: "linear",
  894. x: 0,
  895. y: 0,
  896. x2: 0,
  897. y2: 1,
  898. colorStops: [
  899. {
  900. offset: 0,
  901. color: "#9F7F00", // 0% 处的颜色
  902. },
  903. {
  904. offset: 1,
  905. color: "#FBE463", // 100% 处的颜色
  906. },
  907. ],
  908. global: false, // 缺省为 false
  909. },
  910. {
  911. type: "linear",
  912. x: 0,
  913. y: 0,
  914. x2: 0,
  915. y2: 1,
  916. colorStops: [
  917. {
  918. offset: 0,
  919. color: "#07806E", // 0% 处的颜色
  920. },
  921. {
  922. offset: 1,
  923. color: "#79FFEB", // 100% 处的颜色
  924. },
  925. ],
  926. global: false, // 缺省为 false
  927. },
  928. ],
  929. dataZoom: [
  930. {
  931. // start: 9,//默认为@
  932. // end: 100,//黑认认为1@0
  933. type: "slider",
  934. show: false,
  935. // xAxisIndex: [0]
  936. handlesize: 0, //滑动条的 左右2个滑动条的大小
  937. startValue: 5, // 初始显示值
  938. endValue: 0, // 结束显示值
  939. height: 10, //组件高度
  940. left: "5%",
  941. right: "4%", //右边的距离
  942. bottom: "25%", //底边的距离
  943. borderColor: "#939",
  944. fillerColor: "#269cdb",
  945. borderRadius: 5,
  946. backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
  947. showDataShadow: false, //是否显示数据阴影
  948. showDetail: false, //即拖拽时候是否显示详细数值信息
  949. truerealtime: true, //是否实时更新
  950. filterMode: "filter",
  951. },
  952. {
  953. type: "inside",
  954. show: true,
  955. start: 1,
  956. end: 100,
  957. zoomOnMouseWheel: false, //滚轮是否触发缩放
  958. moveOnMouseMove: false, //鼠标滚轮触发滚动
  959. },
  960. ],
  961. legend: {
  962. top: 10,
  963. right: 10,
  964. textStyle: {
  965. fontSize: 20,
  966. color: "#fff",
  967. fontFamily: "Microsoft YaHei",
  968. },
  969. itemStyle: {
  970. borderCap: "round",
  971. },
  972. },
  973. tooltip: {
  974. trigger: "item",
  975. show: true,
  976. position: "top",
  977. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  978. textStyle: {
  979. color: "#fff",
  980. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  981. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  982. fontSize: "28", // 文字字体大小
  983. },
  984. formatter: function (p) {
  985. console.log(p);
  986. return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
  987. },
  988. },
  989. grid: {
  990. left: "3%",
  991. right: "4%",
  992. bottom: "3%",
  993. containLabel: true,
  994. },
  995. xAxis: [
  996. {
  997. type: "category",
  998. data: that.riskData.x.map((item) => item.name),
  999. axisLine: {
  1000. lineStyle: {
  1001. color: "#005094",
  1002. },
  1003. },
  1004. axisTick: {
  1005. show: false,
  1006. },
  1007. axisLabel: {
  1008. color: "#fff",
  1009. rotate: 20,
  1010. fontSize: 22,
  1011. },
  1012. },
  1013. ],
  1014. yAxis: [
  1015. {
  1016. type: "value",
  1017. axisLabel: {
  1018. color: "#fff",
  1019. fontSize: 22,
  1020. },
  1021. splitLine: {
  1022. lineStyle: {
  1023. type: "dashed",
  1024. },
  1025. },
  1026. },
  1027. ],
  1028. series: [
  1029. {
  1030. name: "低风险",
  1031. type: "bar",
  1032. stack: "Ad",
  1033. barWidth: 14,
  1034. emphasis: {
  1035. focus: "series",
  1036. },
  1037. itemStyle: {
  1038. barBorderRadius: [15, 15, 15, 15],
  1039. },
  1040. data: that.riskData.y1,
  1041. },
  1042. {
  1043. name: "中风险",
  1044. type: "bar",
  1045. barWidth: 14,
  1046. stack: "Ad",
  1047. itemStyle: {
  1048. barBorderRadius: [15, 15, 15, 15],
  1049. },
  1050. emphasis: {
  1051. focus: "series",
  1052. },
  1053. data: that.riskData.y2,
  1054. },
  1055. {
  1056. name: "高风险",
  1057. type: "bar",
  1058. barWidth: 14,
  1059. stack: "Ad",
  1060. itemStyle: {
  1061. barBorderRadius: [15, 15, 15, 15],
  1062. },
  1063. emphasis: {
  1064. focus: "series",
  1065. },
  1066. data: that.riskData.y3,
  1067. },
  1068. ],
  1069. };
  1070. that.right1Chart.setOption(option);
  1071. tools.loopShowTooltip(that.right1Chart, option, {
  1072. interval: 2000,
  1073. loopSeries: true,
  1074. });
  1075. },
  1076. initChartR3() {
  1077. let that = this;
  1078. that.right3Chart = echarts.init(this.$refs["echartR3"]);
  1079. let option = {
  1080. radar: {
  1081. // shape: 'circle',
  1082. splitNumber: 3,
  1083. splitLine: {
  1084. lineStyle: {
  1085. color: ["#DD5955", "#39e1d0", "#2e3d45"],
  1086. },
  1087. },
  1088. splitArea: {
  1089. areaStyle: {
  1090. color: [
  1091. "rgba(88,247,223,0.2)",
  1092. "rgba(255, 224, 54, 0.2)",
  1093. "rgba(221,89,85,0.3)",
  1094. ],
  1095. },
  1096. },
  1097. indicator: [
  1098. { name: "安全风险", max: 25 },
  1099. { name: "付款风险", max: 25 },
  1100. { name: "合同风险", max: 25 },
  1101. { name: "结算风险", max: 25 },
  1102. { name: "进度风险", max: 25 },
  1103. { name: "质量风险", max: 25 },
  1104. ],
  1105. },
  1106. series: [
  1107. {
  1108. name: "风险",
  1109. type: "radar",
  1110. symbol: "circle",
  1111. label: {
  1112. show: true,
  1113. formatter: function (params) {
  1114. return params.value;
  1115. },
  1116. fontSize: 24,
  1117. color: "#68BDFF",
  1118. },
  1119. data: [
  1120. {
  1121. value: that.riskData.x[that.r3Index].value,
  1122. areaStyle: {
  1123. color: "#112b75",
  1124. },
  1125. lineStyle: {
  1126. width: 4,
  1127. color: "#60C1FF",
  1128. },
  1129. label: {
  1130. fontSize: 22,
  1131. },
  1132. },
  1133. ],
  1134. },
  1135. ],
  1136. };
  1137. that.right3Chart.setOption(option);
  1138. },
  1139. initChartR4() {
  1140. let that = this;
  1141. that.right4Chart = echarts.init(this.$refs["echartR4"]);
  1142. that.right4Chart.on("showTip", (params) => {
  1143. // 如果是7或者15并且满足防抖则切换
  1144. if (
  1145. (params.dataIndex == 5 || params.dataIndex == 11) &&
  1146. that.echartR2Fd2
  1147. ) {
  1148. that.echartR2Fd2 = false;
  1149. setTimeout(() => {
  1150. option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
  1151. option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
  1152. that.right4Chart.setOption(option);
  1153. // 防止勿刷新做的防抖
  1154. setTimeout(() => {
  1155. that.echartR2Fd2 = true;
  1156. }, 2000);
  1157. }, 1900);
  1158. // 如果是17表示到了最后一个,那么重新来一遍
  1159. } else if (params.dataIndex == 17 && that.echartR2Fd2) {
  1160. that.echartR2Fd2 = false;
  1161. setTimeout(() => {
  1162. option.dataZoom[0].endValue = 0;
  1163. option.dataZoom[0].startValue = 5;
  1164. that.right4Chart.setOption(option);
  1165. // 防止勿刷新做的防抖
  1166. setTimeout(() => {
  1167. that.echartR2Fd2 = true;
  1168. }, 2000);
  1169. }, 1900);
  1170. }
  1171. });
  1172. let option = {
  1173. dataZoom: [
  1174. {
  1175. // start: 9,//默认为@
  1176. // end: 100,//黑认认为1@0
  1177. type: "slider",
  1178. show: false,
  1179. // xAxisIndex: [0]
  1180. handlesize: 0, //滑动条的 左右2个滑动条的大小
  1181. startValue: 5, // 初始显示值
  1182. endValue: 0, // 结束显示值
  1183. height: 10, //组件高度
  1184. left: "5%",
  1185. right: "4%", //右边的距离
  1186. bottom: "25%", //底边的距离
  1187. borderColor: "#939",
  1188. fillerColor: "#269cdb",
  1189. borderRadius: 5,
  1190. backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
  1191. showDataShadow: false, //是否显示数据阴影
  1192. showDetail: false, //即拖拽时候是否显示详细数值信息
  1193. truerealtime: true, //是否实时更新
  1194. filterMode: "filter",
  1195. },
  1196. {
  1197. type: "inside",
  1198. show: true,
  1199. start: 1,
  1200. end: 100,
  1201. zoomOnMouseWheel: false, //滚轮是否触发缩放
  1202. moveOnMouseMove: false, //鼠标滚轮触发滚动
  1203. },
  1204. ],
  1205. title: {
  1206. text: "企业后评价执行情况",
  1207. left: "center",
  1208. textStyle: {
  1209. color: "#fff",
  1210. fontSize: 32,
  1211. },
  1212. },
  1213. tooltip: {
  1214. trigger: "item",
  1215. show: true,
  1216. position: "top",
  1217. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  1218. textStyle: {
  1219. color: "#fff",
  1220. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  1221. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  1222. fontSize: "28", // 文字字体大小
  1223. },
  1224. formatter: function (p) {
  1225. console.log(p);
  1226. return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
  1227. },
  1228. },
  1229. legend: {
  1230. show: true,
  1231. textStyle: {
  1232. fontSize: 24,
  1233. color: "rgba(255, 255, 255, .6)",
  1234. },
  1235. inactiveColor: "#fff",
  1236. itemHeight: 20,
  1237. top: "15%",
  1238. backgroundColor: "transparent",
  1239. data: [
  1240. {
  1241. name: "应首评项目数",
  1242. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWdJREFUOE+N0k8og3EYB/Dvs8P8CSlTxJGD8u+yTYmNm0gJQznIQRxMoV2cXWSKCznIQdk7SkmOEomNg41y4EjURkLZFI/ed3vX+5v82nt4357n9/s8Pe/v9xCST6+fzVHGKAMDAKqT6WsCNi2ElS0Xfak5Ul+tfi77YewBqNcLpH0vTYSOAxc9kFo5wghINus2lJMPOzl8PE6EpX8qC2lmuMmp8CmABn3FVgJ4bIloLggEnwRzRg6F4wSY9fR2J1CUnYieY0DPrgDiUvASA7pF8PGnJXsp4LEC3wx4L4DAY1pLLQq7GVjM5KcJmKC2fc76fNeOtU6GmBDOzYMt04sLmQjt2sUZRyMCjAEYBKNKyxNuAGwUA8vCaBhbcSrMxviwj1JFU7Nk3NC49iqAk+FCObAu3AngfLJCDmpmjgVwNdskB5UjPgHcrvbLQXmXVwD3O1NyYGmeFkD0aF4OCmqHBPAWXhfAL4WqeuKVsFKCAAAAAElFTkSuQmCC",
  1243. },
  1244. {
  1245. name: "已完成首评项目数",
  1246. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAXFJREFUOE+V0kFLAkEUB/D/G9eW3UN1sFPYNaJAu2R0Coog8mq0fQH1kEVBhz5Ah6CoLhrdE/LqKQo6VZ7SKCKChKRTBRmhbq47oabsZC22h1nem/k93jCP8P0F+E2HQ1dD4NAAGqqn+TUI8YpciCVo8LOaoeoSKOR6GTOSxOFtFLD+OSFtmpI/obqfqFqZ6Wrqr8NNyJHJK4aPtNLDAue0+1vlnzkiHqG5YvYcwGhj08MUhJyuWhgrvyBjFq3uogp0AB2NbFR2o5sctfCNVxDWc1ag/xPQR0tLXqYg6HTBBMd++RXplpZK2Qg4dtq5NAiLNM3v5a6ilALBY4s4rvKKMdLWw4EjU4E0U3s462gwXQ3DMLeJsfpgmCYgsSVTLkSF0bC24r9NcWucHPA1izZnyXpg8vRIAMfjU/ZgLH4ogDNt1h4Mb8YEcLkSsgf9y+sCuNtaswd92qoAHuMb9qBnIiiA55M9e9DpnRfAe/pAAF9gqJXUYWdYUwAAAABJRU5ErkJggg==",
  1247. },
  1248. {
  1249. name: "应再评项目数",
  1250. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAV5JREFUOE+V0j8oxGEYwPHvo/wMjgyUslAWcTFhMRiEsHLKYDzFKZRBSskgR7mUG29QjpX86QaDwdlwLotiUYpB/gyHPDru9HsPP+c3vL+e530/T8/b+wipb31KrYJ8vAi9QE0qfYqy+vBEsHtKnpM5SS4bC1qW+8amQl26gP0vcPSSQ2fXiFxJsnKhi8PfDtvgsVo0yJZfhwQCP1XOzCn4ZNuvB0BjerO4HNxtn1FsB24vDRZNggRgpdPNXsjL/4wST7AXNEDiv+DxW0slFVDTCvoG8QjcXGS2NKc+hMVsLo0yLFsBzZNnDoHaP9CJWtRn9XDA8WsOHR8PZx+NQhcDqvQhVH3klTMRVu4fWTZGw97Ktl/VHrePyVfRr1myHwhP3xnAM1nkDJbGzw0wOFvpDCa8+waYCTY5g/6esAFCax5n0NI6b4DI7qgzcDeOGSAW9TuD0up+A1zHQwZ4B2JrgI9r4uMDAAAAAElFTkSuQmCC",
  1251. },
  1252. {
  1253. name: "已完成再评项目数",
  1254. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE9jZICC/1e12Rh4uDIY/jNGMjAw6ECFrzAw/l/O8OXbDEbtq79AYowg4v9jS2mGv3+3MDAwGMAMQKMvMDAz+zDKHn/KCDaZm/skHsUwvRcZfr8zZ/z/0CyX4T/DJBwmowozMuQx/n9gdpyBgcECLsNpycAgXAPhvm1hYPgOkoaDEyANPxkYGNjgQjJbGRiYRSDcv28YGJ54I2v4SUDDWwaGJ17IGr5gcZIV1El/GRjetjMwfD+G5qSHpnkM/xknEufp//mM/2+rsDOwCoGCVZ+ApksMv9+ZERtxFxmYmb3BEYeaNHgyGf7/j2FgYNCEil9nYGRcwvDly3SUpIHslP8PzP4j8xkVTsENhaclZAWvLligaBAzOIFfw9ld1igajN2O4tewar49ioawxIP4NbQ0OqNoqKnfi19DXIoHioZFc3bg12Dt6YOi4ej2Lfg1yBn7o2h4dHYjigYAb0t88hVwEBYAAAAASUVORK5CYII=",
  1255. },
  1256. {
  1257. name: "再评达标项目数",
  1258. icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE+V0k8og2EcwPHvkzVZLLm6KItEzWlclIPbdhGKcsCJwzZFdtgOK+8OimIXTjgoSrisXByUgz8nE4mmXFwlZmuaPXr3r/eZ9sZ7eN9+v/f5/J6n3/MTFJ9wWFpTFqYFjAFdxfSthF1blo1wWHzpOaG/gppszkIM6C4VqPheW8ATCYkXoVdOW7g0WVyy8ZSdHhFYlF4E0SqV1bTEJwKaPAd6S3/aWmHEU4j2Y/D4pJgLHWQAaykd9ENDfSH6SEJkTQGZ/4LkryO1O2DYDbkcHB7DQ6LiSAua9AlQN67SAQl+4Y3KWtt7vq1Os04JuPm04/rrxcUt4M5fnHE00jXMIBgHOor5eyQ7dd+sK6NhPEpAk9IYL4VEuWh5lowLfKE3BUS1RnMwOZtQwNaqwxwMTp0p4Gizzxz0D+0p4PRg1Bw4B1YUED+ZMwctrnkFPF8tm4OmzgkFvN5tK+AHKZh4TU8krdoAAAAASUVORK5CYII=",
  1259. },
  1260. ],
  1261. },
  1262. grid: {
  1263. top: "30%",
  1264. left: "3%",
  1265. right: "4%",
  1266. bottom: "3%",
  1267. containLabel: true,
  1268. },
  1269. xAxis: {
  1270. data: that.riskData1.x,
  1271. type: "category",
  1272. splitLine: {
  1273. show: false,
  1274. },
  1275. alignTicks: true,
  1276. axisLine: {
  1277. show: true,
  1278. lineStyle: {
  1279. color: "rgba(0, 80, 148, .8)",
  1280. },
  1281. },
  1282. axisTick: {
  1283. show: false,
  1284. },
  1285. axisLabel: {
  1286. color: "#fff",
  1287. fontSize: 22,
  1288. rotate: 20,
  1289. },
  1290. },
  1291. yAxis: {
  1292. type: "value",
  1293. splitLine: {
  1294. show: true,
  1295. lineStyle: {
  1296. color: "rgba(104, 180, 221, .2)",
  1297. type: "dashed",
  1298. },
  1299. },
  1300. axisLine: {
  1301. show: false,
  1302. },
  1303. axisTick: {
  1304. show: false,
  1305. },
  1306. axisLabel: {
  1307. color: "#fff",
  1308. fontSize: 22,
  1309. },
  1310. },
  1311. series: [
  1312. {
  1313. type: "bar",
  1314. name: "应首评项目数",
  1315. barWidth: 4,
  1316. barGap: "600%",
  1317. data: that.riskData1.y1,
  1318. label: {
  1319. show: true,
  1320. position: "top",
  1321. formatter: " ",
  1322. width: 6,
  1323. height: 6,
  1324. borderRadius: 50,
  1325. borderWidth: 6,
  1326. borderColor: "#40A9FF",
  1327. backgroundColor: "#fff",
  1328. },
  1329. itemStyle: {
  1330. color: {
  1331. x: 0,
  1332. y: 0,
  1333. x2: 0,
  1334. y2: 1,
  1335. colorStops: [
  1336. {
  1337. offset: 0,
  1338. color: "#40A9FF", // 0% 处的颜色
  1339. },
  1340. {
  1341. offset: 1,
  1342. color: "#092351", // 100% 处的颜色
  1343. },
  1344. ],
  1345. },
  1346. },
  1347. },
  1348. {
  1349. type: "bar",
  1350. name: "已完成首评项目数",
  1351. barGap: "600%",
  1352. barWidth: 4,
  1353. data: that.riskData1.y2,
  1354. label: {
  1355. show: true,
  1356. position: "top",
  1357. formatter: " ",
  1358. width: 6,
  1359. height: 6,
  1360. borderRadius: 50,
  1361. borderWidth: 6,
  1362. borderColor: "#58F7DF",
  1363. backgroundColor: "#fff",
  1364. },
  1365. itemStyle: {
  1366. color: {
  1367. x: 0,
  1368. y: 0,
  1369. x2: 0,
  1370. y2: 1,
  1371. colorStops: [
  1372. {
  1373. offset: 0,
  1374. color: "#58F7DF", // 0% 处的颜色
  1375. },
  1376. {
  1377. offset: 1,
  1378. color: "#092351", // 100% 处的颜色
  1379. },
  1380. ],
  1381. },
  1382. },
  1383. },
  1384. {
  1385. type: "bar",
  1386. name: "应再评项目数",
  1387. barGap: "600%",
  1388. barWidth: 4,
  1389. data: that.riskData1.y3,
  1390. label: {
  1391. show: true,
  1392. position: "top",
  1393. formatter: " ",
  1394. width: 6,
  1395. height: 6,
  1396. borderRadius: 50,
  1397. borderWidth: 6,
  1398. borderColor: "#B78CFF",
  1399. backgroundColor: "#fff",
  1400. },
  1401. itemStyle: {
  1402. color: {
  1403. x: 0,
  1404. y: 0,
  1405. x2: 0,
  1406. y2: 1,
  1407. colorStops: [
  1408. {
  1409. offset: 0,
  1410. color: "#B78CFF", // 0% 处的颜色
  1411. },
  1412. {
  1413. offset: 1,
  1414. color: "#092351", // 100% 处的颜色
  1415. },
  1416. ],
  1417. },
  1418. },
  1419. },
  1420. {
  1421. type: "bar",
  1422. name: "已完成再评项目数",
  1423. barGap: "600%",
  1424. barWidth: 4,
  1425. data: that.riskData1.y4,
  1426. label: {
  1427. show: true,
  1428. position: "top",
  1429. formatter: " ",
  1430. width: 6,
  1431. height: 6,
  1432. borderRadius: 50,
  1433. borderWidth: 6,
  1434. borderColor: "#FFE036",
  1435. backgroundColor: "#fff",
  1436. },
  1437. itemStyle: {
  1438. color: {
  1439. x: 0,
  1440. y: 0,
  1441. x2: 0,
  1442. y2: 1,
  1443. colorStops: [
  1444. {
  1445. offset: 0,
  1446. color: "#FFE036", // 0% 处的颜色
  1447. },
  1448. {
  1449. offset: 1,
  1450. color: "#092351", // 100% 处的颜色
  1451. },
  1452. ],
  1453. },
  1454. },
  1455. },
  1456. {
  1457. type: "bar",
  1458. name: "再评达标项目数",
  1459. barGap: "600%",
  1460. barWidth: 4,
  1461. data: that.riskData1.y5,
  1462. label: {
  1463. show: true,
  1464. position: "top",
  1465. formatter: " ",
  1466. width: 6,
  1467. height: 6,
  1468. borderRadius: 50,
  1469. borderWidth: 6,
  1470. borderColor: "#7784FF",
  1471. backgroundColor: "#fff",
  1472. },
  1473. itemStyle: {
  1474. color: {
  1475. x: 0,
  1476. y: 0,
  1477. x2: 0,
  1478. y2: 1,
  1479. colorStops: [
  1480. {
  1481. offset: 0,
  1482. color: "#7784FF", // 0% 处的颜色
  1483. },
  1484. {
  1485. offset: 1,
  1486. color: "#092351", // 100% 处的颜色
  1487. },
  1488. ],
  1489. },
  1490. },
  1491. },
  1492. ],
  1493. };
  1494. that.right4Chart.setOption(option);
  1495. tools.loopShowTooltip(that.right4Chart, option, {
  1496. interval: 2000,
  1497. loopSeries: true,
  1498. });
  1499. },
  1500. clickItem(index) {
  1501. const angle = 360 / this.investData.investList.length;
  1502. this.witchs = index;
  1503. this.inner = index;
  1504. this.innerDeg = this.witchs * angle;
  1505. this.lpRotate();
  1506. },
  1507. lpRotate() {
  1508. const angle = 360 / this.investData.investList.length;
  1509. clearInterval(this.timer);
  1510. this.timer = setInterval(() => {
  1511. this.inner++;
  1512. this.topIndex++;
  1513. this.topIndex = this.topIndex % this.meansList.length;
  1514. this.witchs = this.inner % this.investData.investList.length;
  1515. this.innerDeg = this.inner * angle;
  1516. }, 2000);
  1517. },
  1518. filterLpData() {
  1519. const angle = 360 / this.investData.investList.length;
  1520. for (let i in this.investData.investList) {
  1521. this.investData.investList[i].deg = i * angle;
  1522. this.$set(this.investData.investList, i, {
  1523. ...this.investData.investList[i],
  1524. deg: i * angle,
  1525. });
  1526. }
  1527. },
  1528. // 4秒定时器
  1529. time4s() {
  1530. let that = this;
  1531. // 4秒定时器
  1532. this.time1 = setInterval(() => {
  1533. that.industryProportion == 1
  1534. ? (that.industryProportion = 2)
  1535. : (that.industryProportion = 1);
  1536. that.leftEcharts1.dispose();
  1537. that.leftEcharts2.dispose();
  1538. that.leftEcharts3.dispose();
  1539. that.leftEcharts4.dispose();
  1540. that.leftEcharts1Fun();
  1541. that.leftEcharts2Fun();
  1542. that.leftEcharts3Fun();
  1543. that.leftEcharts4Fun();
  1544. }, 4000);
  1545. },
  1546. // 针对投前产业布局分析的定时器
  1547. timeNs() {
  1548. let that = this;
  1549. this.time2 = setInterval(() => {
  1550. if (that.industryLayout < 3) {
  1551. that.industryLayout = that.industryLayout + 1;
  1552. } else {
  1553. that.industryLayout = 0;
  1554. }
  1555. this.time2 && clearInterval(this.time2);
  1556. this.timeNs();
  1557. that.leftEcharts5.dispose();
  1558. that.leftEcharts5Fun();
  1559. }, left1[that.industryLayout].length * 2000);
  1560. },
  1561. // 主辅业占比点击方法
  1562. industryProportionChange(e) {
  1563. let that = this;
  1564. this.industryProportion = e;
  1565. this.time1 && clearInterval(this.time1);
  1566. that.leftEcharts1.dispose();
  1567. that.leftEcharts2.dispose();
  1568. that.leftEcharts3.dispose();
  1569. that.leftEcharts4.dispose();
  1570. that.leftEcharts1Fun();
  1571. that.leftEcharts2Fun();
  1572. that.leftEcharts3Fun();
  1573. that.leftEcharts4Fun();
  1574. this.time4s();
  1575. },
  1576. // 产业布局分析点击方法
  1577. industryLayoutChange(e) {
  1578. this.industryLayout = e;
  1579. this.time2 && clearInterval(this.time2);
  1580. this.leftEcharts5.dispose();
  1581. this.timeNs();
  1582. this.leftEcharts5Fun();
  1583. },
  1584. yuanChange(value) {
  1585. return Number((value / 100000000).toFixed(2));
  1586. },
  1587. // 逢三折断
  1588. numFormat(value) {
  1589. if (!value) return "0";
  1590. // var intPart = Number(value).toFixed(0) // 获取整数部分
  1591. var intPart = parseInt(value); // 获取整数部分
  1592. var intPartFormat = intPart
  1593. .toString()
  1594. .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // 将整数部分逢三一断
  1595. var floatPart = ".00"; // 预定义小数部分
  1596. var value2Array = value.toString().split(".");
  1597. // =2表示数据有小数位
  1598. if (value2Array.length === 2) {
  1599. floatPart = value2Array[1].toString(); // 拿到小数部分
  1600. if (floatPart.length === 1) {
  1601. // 补0
  1602. return intPartFormat + "." + floatPart + "0";
  1603. } else {
  1604. floatPart = floatPart.slice(0, 2);
  1605. return intPartFormat + "." + floatPart;
  1606. }
  1607. } else {
  1608. return intPartFormat;
  1609. }
  1610. },
  1611. leftEcharts1Fun() {
  1612. let that = this;
  1613. this.leftEcharts1 = echarts.init(this.$refs["leftEcharts1"]);
  1614. option = {
  1615. title: {
  1616. text: that.industryProportion == 1 ? "30%" : "70%",
  1617. x: "center",
  1618. y: "center",
  1619. textStyle: {
  1620. fontWeight: "normal",
  1621. color: "#68BDFF",
  1622. fontSize: "20",
  1623. },
  1624. },
  1625. color: ["#68BDFF", "#254F7F"],
  1626. series: [
  1627. {
  1628. name: "Line 1",
  1629. type: "pie",
  1630. clockWise: true,
  1631. radius: ["80%", "100%"],
  1632. itemStyle: {
  1633. normal: {
  1634. label: {
  1635. show: false,
  1636. },
  1637. labelLine: {
  1638. show: false,
  1639. },
  1640. },
  1641. },
  1642. hoverAnimation: false,
  1643. data: [
  1644. {
  1645. value: 80,
  1646. name: "01",
  1647. itemStyle: {
  1648. normal: {
  1649. label: {
  1650. show: false,
  1651. },
  1652. labelLine: {
  1653. show: false,
  1654. },
  1655. },
  1656. },
  1657. },
  1658. {
  1659. name: "02",
  1660. value: 20,
  1661. },
  1662. ],
  1663. },
  1664. ],
  1665. };
  1666. //轮播
  1667. // tools.loopShowTooltip(leftEcharts1, option, {
  1668. // interval: 2000,
  1669. // loopSeries: true,
  1670. // });
  1671. //注册
  1672. that.leftEcharts1.setOption(option);
  1673. },
  1674. leftEcharts2Fun() {
  1675. let that = this;
  1676. this.leftEcharts2 = echarts.init(this.$refs["leftEcharts2"]);
  1677. let nameList = ["a"];
  1678. let valueList = that.industryProportion == 1 ? [30] : [70];
  1679. let total = 100; // 数据总数
  1680. var category = nameList.map((item, index) => {
  1681. return {
  1682. value: valueList[index],
  1683. itemStyle: {
  1684. color: new echarts.graphic.LinearGradient(
  1685. 1,
  1686. 0,
  1687. 0,
  1688. 1,
  1689. [
  1690. {
  1691. offset: 0,
  1692. color: "#40A9FF50",
  1693. },
  1694. {
  1695. offset: 1,
  1696. color: "#40A9FF",
  1697. },
  1698. ],
  1699. false
  1700. ),
  1701. },
  1702. };
  1703. });
  1704. var totalList = [];
  1705. var totalBorderList = [];
  1706. nameList.map((item, index) => {
  1707. totalList.push({
  1708. value: total,
  1709. itemStyle: {
  1710. color: "rgba(51, 147, 236, 0.29)",
  1711. },
  1712. });
  1713. totalBorderList.push({
  1714. value: total,
  1715. itemStyle: {
  1716. borderColor: "rgba(51, 147, 236, 0.29)",
  1717. color: "transparent",
  1718. },
  1719. });
  1720. });
  1721. var datas = [];
  1722. category.forEach((value) => {
  1723. datas.push(value.value);
  1724. });
  1725. option = {
  1726. // backgroundColor: 'rgb(231,238,249)',
  1727. xAxis: {
  1728. max: total,
  1729. splitLine: {
  1730. show: false,
  1731. },
  1732. axisLine: {
  1733. show: false,
  1734. },
  1735. axisLabel: {
  1736. show: false,
  1737. },
  1738. axisTick: {
  1739. show: false,
  1740. },
  1741. },
  1742. grid: {
  1743. left: "0%",
  1744. top: "15%", // 设置条形图的边距
  1745. right: "15%",
  1746. bottom: "5%",
  1747. },
  1748. yAxis: [
  1749. {
  1750. type: "category",
  1751. inverse: false,
  1752. data: nameList,
  1753. axisLine: {
  1754. show: false,
  1755. },
  1756. axisTick: {
  1757. show: false,
  1758. },
  1759. axisLabel: {
  1760. show: false,
  1761. },
  1762. },
  1763. ],
  1764. series: [
  1765. {
  1766. // 内
  1767. type: "bar",
  1768. barWidth: 16,
  1769. barGap: "20%",
  1770. silent: true,
  1771. // label: {
  1772. // normal: {
  1773. // formatter: (item) => {
  1774. // return `${item['name']}:${item['value']} `;
  1775. // },
  1776. // textStyle: {
  1777. // color: 'rgba(105, 120, 136, 1)',
  1778. // fontSize: 14,
  1779. // },
  1780. // position: [0, '-25px'],
  1781. // show: true,
  1782. // },
  1783. // },
  1784. data: category,
  1785. z: 1,
  1786. itemStyle: {
  1787. normal: {
  1788. color: new echarts.graphic.LinearGradient(
  1789. 1,
  1790. 0,
  1791. 0,
  1792. 1,
  1793. [
  1794. {
  1795. offset: 0,
  1796. color: "rgba(81, 193, 156, 1)",
  1797. },
  1798. {
  1799. offset: 1,
  1800. color: "rgba(234, 177, 100, 1)",
  1801. },
  1802. ],
  1803. false
  1804. ),
  1805. },
  1806. },
  1807. animationEasing: "elasticOut",
  1808. },
  1809. {
  1810. // 分隔
  1811. type: "pictorialBar",
  1812. itemStyle: {
  1813. normal: {
  1814. color: "#143362",
  1815. },
  1816. },
  1817. symbolRepeat: "fixed",
  1818. symbolMargin: 8,
  1819. symbol: "rect",
  1820. symbolClip: false,
  1821. symbolSize: [4, 20],
  1822. symbolPosition: "start",
  1823. symbolOffset: [0, -2],
  1824. symbolBoundingData: total,
  1825. data: [total, total, total, total],
  1826. z: 2,
  1827. animationEasing: "elasticOut",
  1828. },
  1829. {
  1830. // label
  1831. type: "pictorialBar",
  1832. symbolBoundingData: total,
  1833. itemStyle: {
  1834. normal: {
  1835. color: "none",
  1836. },
  1837. },
  1838. label: {
  1839. normal: {
  1840. formatter: (params) => {
  1841. var text;
  1842. text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
  1843. return text;
  1844. },
  1845. textStyle: {
  1846. // 图列内容样式
  1847. fontSize: "20",
  1848. fontWeight: 800,
  1849. },
  1850. position: "right",
  1851. offset: [0, -3],
  1852. distance: 10, // 向右偏移位置
  1853. show: true,
  1854. color: "#68BDFF",
  1855. },
  1856. },
  1857. data: datas,
  1858. z: 0,
  1859. },
  1860. {
  1861. name: "外框",
  1862. type: "bar",
  1863. barGap: "-130%", // 设置外框粗细
  1864. data: totalBorderList,
  1865. barWidth: 26,
  1866. itemStyle: {
  1867. normal: {
  1868. // barBorderRadius: [5, 5, 5, 5],
  1869. borderWidth: 1, // 边框宽度
  1870. borderColor: "rgb(51, 147, 236)", // 边框色
  1871. color: "rgb(231,238,249)",
  1872. },
  1873. },
  1874. z: 0,
  1875. },
  1876. ],
  1877. };
  1878. //轮播
  1879. // tools.loopShowTooltip(leftEcharts1, option, {
  1880. // interval: 2000,
  1881. // loopSeries: true,
  1882. // });
  1883. //注册
  1884. that.leftEcharts2.setOption(option);
  1885. },
  1886. leftEcharts3Fun() {
  1887. let that = this;
  1888. this.leftEcharts3 = echarts.init(this.$refs["leftEcharts3"]);
  1889. option = {
  1890. title: {
  1891. text: that.industryProportion == 1 ? "70%" : "30%",
  1892. x: "center",
  1893. y: "center",
  1894. textStyle: {
  1895. fontWeight: "normal",
  1896. color: "#68BDFF",
  1897. fontSize: "20",
  1898. },
  1899. },
  1900. color: ["#5BDCC8", "#254F7F"],
  1901. series: [
  1902. {
  1903. name: "Line 1",
  1904. type: "pie",
  1905. clockWise: true,
  1906. radius: ["80%", "100%"],
  1907. itemStyle: {
  1908. normal: {
  1909. label: {
  1910. show: false,
  1911. },
  1912. labelLine: {
  1913. show: false,
  1914. },
  1915. },
  1916. },
  1917. hoverAnimation: false,
  1918. data: [
  1919. {
  1920. value: 80,
  1921. name: "01",
  1922. itemStyle: {
  1923. normal: {
  1924. label: {
  1925. show: false,
  1926. },
  1927. labelLine: {
  1928. show: false,
  1929. },
  1930. },
  1931. },
  1932. },
  1933. {
  1934. name: "02",
  1935. value: 20,
  1936. },
  1937. ],
  1938. },
  1939. ],
  1940. };
  1941. //轮播
  1942. // tools.loopShowTooltip(leftEcharts1, option, {
  1943. // interval: 2000,
  1944. // loopSeries: true,
  1945. // });
  1946. //注册
  1947. that.leftEcharts3.setOption(option);
  1948. },
  1949. leftEcharts4Fun() {
  1950. let that = this;
  1951. this.leftEcharts4 = echarts.init(this.$refs["leftEcharts4"]);
  1952. let nameList = ["a"];
  1953. let valueList = that.industryProportion == 1 ? [70] : [30];
  1954. let total = 100; // 数据总数
  1955. var category = nameList.map((item, index) => {
  1956. return {
  1957. value: valueList[index],
  1958. itemStyle: {
  1959. color: new echarts.graphic.LinearGradient(
  1960. 1,
  1961. 0,
  1962. 0,
  1963. 1,
  1964. [
  1965. {
  1966. offset: 0,
  1967. color: "#5BDCC850",
  1968. },
  1969. {
  1970. offset: 1,
  1971. color: "#5BDCC8",
  1972. },
  1973. ],
  1974. false
  1975. ),
  1976. },
  1977. };
  1978. });
  1979. var totalList = [];
  1980. var totalBorderList = [];
  1981. nameList.map((item, index) => {
  1982. totalList.push({
  1983. value: total,
  1984. itemStyle: {
  1985. color: "rgba(51, 147, 236, 0.29)",
  1986. },
  1987. });
  1988. totalBorderList.push({
  1989. value: total,
  1990. itemStyle: {
  1991. borderColor: "rgba(51, 147, 236, 0.29)",
  1992. color: "transparent",
  1993. },
  1994. });
  1995. });
  1996. var datas = [];
  1997. category.forEach((value) => {
  1998. datas.push(value.value);
  1999. });
  2000. option = {
  2001. // backgroundColor: 'rgb(231,238,249)',
  2002. xAxis: {
  2003. max: total,
  2004. splitLine: {
  2005. show: false,
  2006. },
  2007. axisLine: {
  2008. show: false,
  2009. },
  2010. axisLabel: {
  2011. show: false,
  2012. },
  2013. axisTick: {
  2014. show: false,
  2015. },
  2016. },
  2017. grid: {
  2018. left: "0%",
  2019. top: "15%", // 设置条形图的边距
  2020. right: "15%",
  2021. bottom: "5%",
  2022. },
  2023. yAxis: [
  2024. {
  2025. type: "category",
  2026. inverse: false,
  2027. data: nameList,
  2028. axisLine: {
  2029. show: false,
  2030. },
  2031. axisTick: {
  2032. show: false,
  2033. },
  2034. axisLabel: {
  2035. show: false,
  2036. },
  2037. },
  2038. ],
  2039. series: [
  2040. {
  2041. // 内
  2042. type: "bar",
  2043. barWidth: 16,
  2044. barGap: "20%",
  2045. silent: true,
  2046. // label: {
  2047. // normal: {
  2048. // formatter: (item) => {
  2049. // return `${item['name']}:${item['value']} `;
  2050. // },
  2051. // textStyle: {
  2052. // color: 'rgba(105, 120, 136, 1)',
  2053. // fontSize: 14,
  2054. // },
  2055. // position: [0, '-25px'],
  2056. // show: true,
  2057. // },
  2058. // },
  2059. data: category,
  2060. z: 1,
  2061. itemStyle: {
  2062. normal: {
  2063. color: new echarts.graphic.LinearGradient(
  2064. 1,
  2065. 0,
  2066. 0,
  2067. 1,
  2068. [
  2069. {
  2070. offset: 0,
  2071. color: "rgba(81, 193, 156, 1)",
  2072. },
  2073. {
  2074. offset: 1,
  2075. color: "rgba(234, 177, 100, 1)",
  2076. },
  2077. ],
  2078. false
  2079. ),
  2080. },
  2081. },
  2082. animationEasing: "elasticOut",
  2083. },
  2084. {
  2085. // 分隔
  2086. type: "pictorialBar",
  2087. itemStyle: {
  2088. normal: {
  2089. color: "#143362",
  2090. },
  2091. },
  2092. symbolRepeat: "fixed",
  2093. symbolMargin: 8,
  2094. symbol: "rect",
  2095. symbolClip: false,
  2096. symbolSize: [4, 20],
  2097. symbolPosition: "start",
  2098. symbolOffset: [0, -2],
  2099. symbolBoundingData: total,
  2100. data: [total, total, total, total],
  2101. z: 2,
  2102. animationEasing: "elasticOut",
  2103. },
  2104. {
  2105. // label
  2106. type: "pictorialBar",
  2107. symbolBoundingData: total,
  2108. itemStyle: {
  2109. normal: {
  2110. color: "none",
  2111. },
  2112. },
  2113. label: {
  2114. normal: {
  2115. formatter: (params) => {
  2116. var text;
  2117. text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
  2118. return text;
  2119. },
  2120. textStyle: {
  2121. // 图列内容样式
  2122. fontSize: "20",
  2123. fontWeight: 800,
  2124. },
  2125. position: "right",
  2126. offset: [0, -3],
  2127. distance: 10, // 向右偏移位置
  2128. show: true,
  2129. color: "#68BDFF",
  2130. },
  2131. },
  2132. data: datas,
  2133. z: 0,
  2134. },
  2135. {
  2136. name: "外框",
  2137. type: "bar",
  2138. barGap: "-130%", // 设置外框粗细
  2139. data: totalBorderList,
  2140. barWidth: 26,
  2141. itemStyle: {
  2142. normal: {
  2143. // barBorderRadius: [5, 5, 5, 5],
  2144. borderWidth: 1, // 边框宽度
  2145. borderColor: "rgb(51, 147, 236)", // 边框色
  2146. color: "rgb(231,238,249)",
  2147. },
  2148. },
  2149. z: 0,
  2150. },
  2151. ],
  2152. };
  2153. //轮播
  2154. // tools.loopShowTooltip(leftEcharts1, option, {
  2155. // interval: 2000,
  2156. // loopSeries: true,
  2157. // });
  2158. //注册
  2159. that.leftEcharts4.setOption(option);
  2160. },
  2161. leftEcharts5Fun() {
  2162. let that = this;
  2163. this.leftEcharts5 = echarts.init(this.$refs["leftEcharts5"]);
  2164. let dataList = [];
  2165. left1[that.industryLayout].forEach((item, index) => {
  2166. dataList[index] = {
  2167. value: item.y,
  2168. name: item.name,
  2169. itemStyle: {
  2170. normal: {
  2171. color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
  2172. {
  2173. offset: 0,
  2174. color: commonColor2[index], //顶部颜色
  2175. },
  2176. {
  2177. offset: 1,
  2178. color: commonColor[index], // 底部颜色
  2179. },
  2180. ]),
  2181. borderColor: commonColor[index],
  2182. borderWidth: 3,
  2183. },
  2184. },
  2185. };
  2186. });
  2187. let option = {
  2188. tooltip: {
  2189. trigger: "item",
  2190. formatter: function (e) {
  2191. return `<span style="display:inline-block;margin-right:15px;border-radius:10px;width:20px;height:20px;background-color:${
  2192. e.borderColor
  2193. };"></span>${e.name} ${e.percent}%<br>${e.value}亿 ${
  2194. left1[that.industryLayout][e.seriesIndex].num
  2195. }个`;
  2196. },
  2197. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  2198. textStyle: {
  2199. color: "#fff",
  2200. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  2201. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  2202. fontSize: "28", // 文字字体大小
  2203. },
  2204. },
  2205. legend: {
  2206. top: "center",
  2207. orient: "vertical",
  2208. left: "75%",
  2209. textStyle: {
  2210. color: "#fff",
  2211. fontSize: 28,
  2212. padding: [0, 20],
  2213. },
  2214. },
  2215. graphic: {
  2216. elements: [
  2217. {
  2218. type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
  2219. style: {
  2220. image: "./img/whiteCircle.png", //这里添加图片地址
  2221. width: 80,
  2222. height: 80,
  2223. },
  2224. left: "center", //
  2225. top: "middle", //配置图片居中
  2226. },
  2227. ],
  2228. },
  2229. series: [
  2230. {
  2231. name: "",
  2232. type: "pie",
  2233. radius: ["20%", "80%"],
  2234. labelLine: {
  2235. normal: {
  2236. lineStyle: {
  2237. width: 1,
  2238. },
  2239. },
  2240. },
  2241. label: {
  2242. normal: {
  2243. show: false,
  2244. textStyle: {
  2245. fontSize: 28,
  2246. color: "#fff",
  2247. },
  2248. },
  2249. },
  2250. roseType: "area",
  2251. data: dataList,
  2252. },
  2253. {
  2254. tooltip: {
  2255. show: false,
  2256. },
  2257. type: "pie",
  2258. radius: ["80%", "82%"],
  2259. hoverAnimation: false,
  2260. name: "",
  2261. data: [
  2262. {
  2263. name: "",
  2264. value: 0,
  2265. itemStyle: {
  2266. normal: {
  2267. color: "#345189",
  2268. },
  2269. },
  2270. },
  2271. ],
  2272. },
  2273. ],
  2274. };
  2275. //轮播
  2276. tools.loopShowTooltip(that.leftEcharts5, option, {
  2277. interval: 2000,
  2278. loopSeries: true,
  2279. });
  2280. //注册
  2281. that.leftEcharts5.setOption(option);
  2282. },
  2283. leftEcharts6Fun() {
  2284. let that = this;
  2285. this.leftEcharts6 = echarts.init(this.$refs["leftEcharts6"]);
  2286. var dataArr = 44;
  2287. var colorSet = {
  2288. color: "#22B95E",
  2289. };
  2290. var color1 = {
  2291. type: "linear",
  2292. x: 0,
  2293. y: 0,
  2294. x2: 1,
  2295. y2: 1,
  2296. colorStops: [
  2297. {
  2298. offset: 0,
  2299. color: "rgba(255,255,255,0.1)",
  2300. },
  2301. {
  2302. offset: 1,
  2303. color: "rgba(255,255,255,0.3)",
  2304. },
  2305. ],
  2306. global: false,
  2307. };
  2308. var color2 = {
  2309. type: "linear",
  2310. x: 0,
  2311. y: 0,
  2312. x2: 1,
  2313. y2: 1,
  2314. colorStops: [
  2315. {
  2316. offset: 0,
  2317. color: "#30DBBA",
  2318. },
  2319. {
  2320. offset: 1,
  2321. color: "#2DE696",
  2322. },
  2323. ],
  2324. global: false,
  2325. };
  2326. option = {
  2327. tooltip: {
  2328. formatter: "{a} <br/>{b} : {c}%",
  2329. },
  2330. series: [
  2331. {
  2332. name: "内部进度条",
  2333. type: "gauge",
  2334. // center: ['20%', '50%'],
  2335. radius: "50%",
  2336. splitNumber: 10,
  2337. axisLine: {
  2338. lineStyle: {
  2339. color: [
  2340. [dataArr / 100, "rgba(0,0,0,0)"],
  2341. [1, "rgba(0,0,0,0)"],
  2342. ],
  2343. width: 1,
  2344. },
  2345. },
  2346. axisLabel: {
  2347. show: false,
  2348. },
  2349. axisTick: {
  2350. show: false,
  2351. },
  2352. splitLine: {
  2353. show: false,
  2354. },
  2355. itemStyle: {
  2356. color: "#ffffff",
  2357. },
  2358. detail: {
  2359. formatter: function (value) {
  2360. if (value !== 0) {
  2361. var num = Math.round(value);
  2362. return parseInt(num).toFixed(0) + "%";
  2363. } else {
  2364. return 0;
  2365. }
  2366. },
  2367. offsetCenter: [0, 117],
  2368. textStyle: {
  2369. padding: [0, 0, 0, 0],
  2370. fontSize: 60,
  2371. color: "#58F7DF",
  2372. },
  2373. },
  2374. title: {
  2375. //标题
  2376. show: true,
  2377. offsetCenter: [0, 220], // x, y,单位px
  2378. textStyle: {
  2379. color: "#40A9FF",
  2380. fontSize: 34, //表盘上的标题文字大小
  2381. fontWeight: 400,
  2382. fontFamily: "MicrosoftYaHei",
  2383. },
  2384. },
  2385. data: [
  2386. {
  2387. name: "总额度:1,323.85亿",
  2388. value: dataArr,
  2389. itemStyle: {
  2390. fontSize: "50", //y轴上方单位的大小
  2391. color: "#FFF666",
  2392. fontFamily: "MicrosoftYaHei",
  2393. },
  2394. },
  2395. ],
  2396. pointer: {
  2397. show: true,
  2398. length: "100%",
  2399. radius: "20%",
  2400. width: 3, //指针粗细
  2401. },
  2402. animationDuration: 4000,
  2403. },
  2404. {
  2405. name: "内部阴影",
  2406. type: "gauge",
  2407. radius: "75%",
  2408. splitNumber: 10,
  2409. axisLine: {
  2410. lineStyle: {
  2411. color: [
  2412. [
  2413. dataArr / 100,
  2414. new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  2415. {
  2416. offset: 0,
  2417. color: "#081947",
  2418. },
  2419. {
  2420. offset: 0.5,
  2421. color: "#5DF5A9",
  2422. },
  2423. {
  2424. offset: 1,
  2425. color: "#F6F16A",
  2426. },
  2427. ]),
  2428. ],
  2429. [1, "#0E4889"],
  2430. ],
  2431. width: 70,
  2432. },
  2433. },
  2434. axisLabel: {
  2435. show: false,
  2436. },
  2437. axisTick: {
  2438. show: false,
  2439. },
  2440. splitLine: {
  2441. show: false,
  2442. },
  2443. itemStyle: {
  2444. show: false,
  2445. },
  2446. },
  2447. {
  2448. name: "外部刻度",
  2449. type: "gauge",
  2450. // center: ['20%', '50%'],
  2451. radius: "90%",
  2452. min: 0, //最小刻度
  2453. max: 100, //最大刻度
  2454. splitNumber: 5, //刻度数量
  2455. startAngle: 225,
  2456. endAngle: -45,
  2457. axisLine: {
  2458. show: true,
  2459. lineStyle: {
  2460. width: 1,
  2461. color: [[1, "rgba(0,0,0,0)"]],
  2462. },
  2463. }, //仪表盘轴线
  2464. axisLabel: {
  2465. show: false,
  2466. color: "#ffffff",
  2467. fontSize: 28,
  2468. fontFamily: "SourceHanSansSC-Regular",
  2469. fontWeight: "bold",
  2470. // position: "top",
  2471. distance: -45,
  2472. formatter: function (v) {
  2473. switch (v + "") {
  2474. case "0":
  2475. return "0";
  2476. case "10":
  2477. return "10";
  2478. case "20":
  2479. return "20";
  2480. case "30":
  2481. return "30";
  2482. case "40":
  2483. return "40";
  2484. case "50":
  2485. return "50";
  2486. case "60":
  2487. return "60";
  2488. case "70":
  2489. return "70";
  2490. case "80":
  2491. return "80";
  2492. case "90":
  2493. return "90";
  2494. case "100":
  2495. return "100";
  2496. }
  2497. },
  2498. }, //刻度标签。
  2499. axisTick: {
  2500. show: true,
  2501. splitNumber: 10,
  2502. lineStyle: {
  2503. color: "#3798D7", //用颜色渐变函数不起作用
  2504. width: 1,
  2505. },
  2506. length: -6,
  2507. }, //刻度样式
  2508. splitLine: {
  2509. show: true,
  2510. length: -12,
  2511. lineStyle: {
  2512. color: "#3798D7", //用颜色渐变函数不起作用
  2513. },
  2514. }, //分隔线样式
  2515. detail: {
  2516. show: false,
  2517. },
  2518. },
  2519. {
  2520. //指针上的圆
  2521. type: "pie",
  2522. tooltip: {
  2523. show: false,
  2524. },
  2525. hoverAnimation: false,
  2526. legendHoverLink: false,
  2527. radius: ["0%", "4%"],
  2528. center: ["50%", "50%"],
  2529. label: {
  2530. normal: {
  2531. show: false,
  2532. },
  2533. },
  2534. labelLine: {
  2535. normal: {
  2536. show: false,
  2537. },
  2538. },
  2539. data: [
  2540. {
  2541. value: 120,
  2542. itemStyle: {
  2543. normal: {
  2544. color: "#ffffff",
  2545. },
  2546. },
  2547. },
  2548. ],
  2549. },
  2550. ],
  2551. };
  2552. //轮播
  2553. // tools.loopShowTooltip(leftEcharts1, option, {
  2554. // interval: 2000,
  2555. // loopSeries: true,
  2556. // });
  2557. //注册
  2558. that.leftEcharts6.setOption(option);
  2559. },
  2560. leftEcharts7Fun() {
  2561. let that = this;
  2562. this.leftEcharts7 = echarts.init(this.$refs["leftEcharts7"]);
  2563. let option = {
  2564. title: {
  2565. text: "固定资产进度分布",
  2566. textStyle: {
  2567. color: "#fff",
  2568. fontSize: 28,
  2569. fontWeight: 500,
  2570. fontFamily: "Microsoft YaHei",
  2571. },
  2572. top: "20",
  2573. left: "220",
  2574. },
  2575. textStyle: {
  2576. color: "#fff",
  2577. },
  2578. tooltip: {
  2579. show: false,
  2580. trigger: "axis",
  2581. formatter: function (params) {
  2582. var tip =
  2583. params[0].axisValue +
  2584. "<br/>" +
  2585. params[0].marker +
  2586. params[0].data[1] +
  2587. ":" +
  2588. params[0].data[2] +
  2589. "个," +
  2590. params[0].data[3] +
  2591. "亿元" +
  2592. "<br/>" +
  2593. params[1].marker +
  2594. params[1].data[1] +
  2595. ":" +
  2596. params[1].data[2] +
  2597. "个," +
  2598. params[1].data[3] +
  2599. "亿元";
  2600. return tip;
  2601. },
  2602. textStyle: {
  2603. color: "#ffffff", // 文字的颜色
  2604. fontSize: "20", // 文字字体大小
  2605. fontFamily: "Microsoft YaHei",
  2606. },
  2607. axisPointer: {
  2608. // lineStyle: {
  2609. // type: 'dashed',
  2610. // width: 2,
  2611. // color: 'rgba(255,255,255,0.6)'
  2612. // },
  2613. animation: false,
  2614. },
  2615. },
  2616. grid: {
  2617. top: "0%",
  2618. right: "5%",
  2619. left: "15%",
  2620. bottom: "-10%",
  2621. },
  2622. yAxis: {
  2623. data: ["备案", "特别监管"],
  2624. splitLine: {
  2625. show: false,
  2626. lineStyle: {
  2627. color: "#68b4dd66",
  2628. type: "dashed",
  2629. },
  2630. },
  2631. axisLine: {
  2632. show: false,
  2633. },
  2634. axisLabel: {
  2635. show: true,
  2636. formatter: "{value}",
  2637. textStyle: {
  2638. color: function (data) {
  2639. if (data == "特别监管") {
  2640. return "#40A9FF";
  2641. } else if (data == "备案") {
  2642. return "#5BDCC8";
  2643. }
  2644. },
  2645. fontSize: 20,
  2646. padding: [0, -10, 0, 0],
  2647. fontFamily: "Microsoft YaHei",
  2648. },
  2649. },
  2650. nameTextStyle: {
  2651. color: "#ebf8ac",
  2652. fontSize: 16,
  2653. fontFamily: "Microsoft YaHei",
  2654. },
  2655. },
  2656. xAxis: {
  2657. data: ["项目储备", "项目立项", "可研论证", "投资决策"],
  2658. axisLine: {
  2659. show: true, //隐藏X轴轴线
  2660. lineStyle: {
  2661. color: "red",
  2662. width: 1,
  2663. },
  2664. },
  2665. axisTick: {
  2666. show: false, //隐藏X轴刻度
  2667. },
  2668. axisLabel: {
  2669. show: true,
  2670. textStyle: {
  2671. color: "#fff", //X轴文字颜色
  2672. fontSize: 20,
  2673. padding: [-80, 0, 0, 0],
  2674. fontFamily: "Microsoft YaHei",
  2675. },
  2676. },
  2677. },
  2678. series: [
  2679. {
  2680. name: "特别监管",
  2681. type: "scatter",
  2682. symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2683. symbolSize: function (data) {
  2684. return Math.sqrt(data[2]) * 5;
  2685. },
  2686. // label: {
  2687. // emphasis: {
  2688. // show: true,
  2689. // formatter: function (param) {
  2690. // return param.data[2];
  2691. // },
  2692. // position: 'top'
  2693. // }
  2694. // },
  2695. itemStyle: {
  2696. normal: {
  2697. color: "#69c0ff",
  2698. },
  2699. },
  2700. // data: left13[0]
  2701. },
  2702. {
  2703. name: "备案",
  2704. type: "scatter",
  2705. symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2706. symbolSize: function (data) {
  2707. return Math.sqrt(data[2]) * 5;
  2708. },
  2709. // label: {
  2710. // emphasis: {
  2711. // show: true,
  2712. // formatter: function (param) {
  2713. // return param.data[2];
  2714. // },
  2715. // position: 'top'
  2716. // }
  2717. // },
  2718. itemStyle: {
  2719. normal: {
  2720. color: "#957DFF",
  2721. },
  2722. },
  2723. // data: left13[1]
  2724. },
  2725. ],
  2726. };
  2727. //轮播
  2728. // tools.loopShowTooltip(leftEcharts1, option, {
  2729. // interval: 2000,
  2730. // loopSeries: true,
  2731. // });
  2732. //注册
  2733. that.leftEcharts7.setOption(option);
  2734. },
  2735. leftEcharts8Fun() {
  2736. let that = this;
  2737. this.leftEcharts8 = echarts.init(this.$refs["leftEcharts8"]);
  2738. let option = {
  2739. title: {
  2740. text: "固定资产进度分布",
  2741. textStyle: {
  2742. color: "#fff",
  2743. fontSize: 28,
  2744. fontWeight: 500,
  2745. fontFamily: "Microsoft YaHei",
  2746. },
  2747. top: "20",
  2748. left: "220",
  2749. },
  2750. textStyle: {
  2751. color: "#fff",
  2752. },
  2753. tooltip: {
  2754. show: false,
  2755. trigger: "axis",
  2756. formatter: function (params) {
  2757. var tip =
  2758. params[0].axisValue +
  2759. "<br/>" +
  2760. params[0].marker +
  2761. params[0].data[1] +
  2762. ":" +
  2763. params[0].data[2] +
  2764. "个," +
  2765. params[0].data[3] +
  2766. "亿元" +
  2767. "<br/>" +
  2768. params[1].marker +
  2769. params[1].data[1] +
  2770. ":" +
  2771. params[1].data[2] +
  2772. "个," +
  2773. params[1].data[3] +
  2774. "亿元";
  2775. return tip;
  2776. },
  2777. textStyle: {
  2778. color: "#ffffff", // 文字的颜色
  2779. fontSize: "20", // 文字字体大小
  2780. fontFamily: "Microsoft YaHei",
  2781. },
  2782. axisPointer: {
  2783. // lineStyle: {
  2784. // type: 'dashed',
  2785. // width: 2,
  2786. // color: 'rgba(255,255,255,0.6)'
  2787. // },
  2788. animation: false,
  2789. },
  2790. },
  2791. grid: {
  2792. top: "0%",
  2793. right: "5%",
  2794. left: "15%",
  2795. bottom: "-10%",
  2796. },
  2797. yAxis: {
  2798. data: ["备案", "特别监管"],
  2799. splitLine: {
  2800. show: false,
  2801. lineStyle: {
  2802. color: "#68b4dd66",
  2803. type: "dashed",
  2804. },
  2805. },
  2806. axisLine: {
  2807. show: false,
  2808. },
  2809. axisLabel: {
  2810. show: false,
  2811. formatter: "{value}",
  2812. textStyle: {
  2813. color: "#fff",
  2814. fontSize: 20,
  2815. padding: [0, -10, 0, 0],
  2816. fontFamily: "Microsoft YaHei",
  2817. },
  2818. },
  2819. nameTextStyle: {
  2820. color: "#ebf8ac",
  2821. fontSize: 16,
  2822. fontFamily: "Microsoft YaHei",
  2823. },
  2824. },
  2825. xAxis: {
  2826. data: ["项目储备", "项目立项", "可研论证", "投资决策"],
  2827. axisLine: {
  2828. show: true, //隐藏X轴轴线
  2829. lineStyle: {
  2830. color: "red",
  2831. width: 1,
  2832. },
  2833. },
  2834. axisTick: {
  2835. show: false, //隐藏X轴刻度
  2836. },
  2837. axisLabel: {
  2838. show: true,
  2839. textStyle: {
  2840. color: "#fff", //X轴文字颜色
  2841. fontSize: 20,
  2842. padding: [-80, 0, 0, 0],
  2843. fontFamily: "Microsoft YaHei",
  2844. },
  2845. },
  2846. },
  2847. series: [
  2848. {
  2849. name: "特别监管",
  2850. type: "scatter",
  2851. symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2852. symbolSize: function (data) {
  2853. return Math.sqrt(data[2]) * 5;
  2854. },
  2855. // label: {
  2856. // emphasis: {
  2857. // show: true,
  2858. // formatter: function (param) {
  2859. // return param.data[2];
  2860. // },
  2861. // position: 'top'
  2862. // }
  2863. // },
  2864. itemStyle: {
  2865. normal: {
  2866. color: "#69c0ff",
  2867. },
  2868. },
  2869. // data: left13[0]
  2870. },
  2871. {
  2872. name: "备案",
  2873. type: "scatter",
  2874. symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  2875. symbolSize: function (data) {
  2876. return Math.sqrt(data[2]) * 5;
  2877. },
  2878. // label: {
  2879. // emphasis: {
  2880. // show: true,
  2881. // formatter: function (param) {
  2882. // return param.data[2];
  2883. // },
  2884. // position: 'top'
  2885. // }
  2886. // },
  2887. itemStyle: {
  2888. normal: {
  2889. color: "#957DFF",
  2890. },
  2891. },
  2892. // data: left13[1]
  2893. },
  2894. ],
  2895. };
  2896. //轮播
  2897. // tools.loopShowTooltip(leftEcharts1, option, {
  2898. // interval: 2000,
  2899. // loopSeries: true,
  2900. // });
  2901. //注册
  2902. that.leftEcharts8.setOption(option);
  2903. },
  2904. chinaEchartsFun() {
  2905. let that = this;
  2906. this.geoCoordMap = [];
  2907. /*获取地图数据*/
  2908. this.shanxiMap = echarts.init(this.$refs["shanxi"]);
  2909. // echarts.registerMap('china', china)
  2910. echarts.registerMap("china", shanxi);
  2911. // var mapFeatures = echarts.getMap('china').geoJson.features
  2912. // mapFeatures.forEach(v => {
  2913. // // 地区名称
  2914. // var name = v.properties.name
  2915. // // 地区经纬度
  2916. // this.geoCoordMap[name] = v.properties.cp
  2917. // data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
  2918. // })
  2919. // var data = [
  2920. // { "name": "新疆", value: 29780 },
  2921. // { "name": "西藏", value: 2186 },
  2922. // { "name": "内蒙古", value: 1135 },
  2923. // { "name": "青海", value: 29780 },
  2924. // { "name": "四川", value: 2568 },
  2925. // { "name": "黑龙江", value: 29780 },
  2926. // { "name": "甘肃", value: 6959 },
  2927. // { "name": "云南", value: 5632 },
  2928. // { "name": "广西", value: 6707 },
  2929. // { "name": "湖南", value: 29780 },
  2930. // { "name": "陕西", value: 1894 },
  2931. // { "name": "广东", value: 15769 },
  2932. // { "name": "吉林", value: 8259 },
  2933. // { "name": "河北", value: 5741 },
  2934. // { "name": "湖北", value: 3030 },
  2935. // { "name": "贵州", value: 4542 },
  2936. // { "name": "山东", value: 19780 },
  2937. // { "name": "江西", value: 3157 },
  2938. // { "name": "河南", value: 6690 },
  2939. // { "name": "辽宁", value: 8678 },
  2940. // { "name": "山西", value: 5303 },
  2941. // { "name": "安徽", value: 29780 },
  2942. // { "name": "福建", value: 10259 },
  2943. // { "name": "浙江", value: 3016 },
  2944. // { "name": "江苏", value: 3202 },
  2945. // { "name": "重庆", value: 4540 },
  2946. // { "name": "宁夏", value: 19780 },
  2947. // { "name": "海南", value: 8626 },
  2948. // { "name": "台湾", value: 4361 },
  2949. // { "name": "北京", value: 20000 },
  2950. // { "name": "天津", value: 4080 },
  2951. // { "name": "上海", value: 19780 },
  2952. // { "name": "香港", value: 6991 },
  2953. // { "name": "澳门", value: 13873 },
  2954. // { "name": "南海诸岛", value: 0 }
  2955. // ];
  2956. // var geoCoordMap = {
  2957. // "新疆": [86.9023, 41.148],
  2958. // "西藏": [87.8695, 31.6846],
  2959. // "内蒙古": [110.5977, 41.3408],
  2960. // "青海": [95.2402, 35.4199],
  2961. // "四川": [102.9199, 30.1904],
  2962. // "黑龙江": [128.1445, 46.7156],
  2963. // "甘肃": [102.7129, 38.166],
  2964. // "云南": [101.0652, 24.6807],
  2965. // "广西": [108.7813, 23.6426],
  2966. // "湖南": [111.5332, 27.3779],
  2967. // "陕西": [108.5996, 33.7396],
  2968. // "广东": [113.8668, 22.8076],
  2969. // "吉林": [126.1746, 43.5938],
  2970. // "河北": [115.4004, 38.1688],
  2971. // "湖北": [112.2363, 30.8572],
  2972. // "贵州": [106.6113, 26.6385],
  2973. // "山东": [118.2402, 36.2307],
  2974. // "江西": [115.7156, 27.99],
  2975. // "河南": [113.0668, 33.8818],
  2976. // "辽宁": [123.0438, 41.0889],
  2977. // "山西": [112.44, 37.73],
  2978. // "安徽": [117.2461, 31.0361],
  2979. // "福建": [118.3008, 25.9277],
  2980. // "浙江": [120.498, 29.0918],
  2981. // "江苏": [119.8586, 32.915],
  2982. // "重庆": [107.7539, 29.8904],
  2983. // "宁夏": [105.9961, 37.1096],
  2984. // "海南": [109.9512, 19.2041],
  2985. // "台湾": [120.8254, 23.5986],
  2986. // "北京": [116.4551, 40.2539],
  2987. // "天津": [117.4219, 39.4189],
  2988. // "上海": [121.4648, 31.2891],
  2989. // "香港": [114.6178, 22.3242],
  2990. // "澳门": [113.5547, 21.6484],
  2991. // '南海诸岛': [128.8254, 21.5986]
  2992. // };
  2993. var data = [
  2994. { name: "大同市", value: 6035, value2: 28 },
  2995. { name: "朔州市", value: 3361, value2: 13 },
  2996. { name: "忻州市", value: 7335, value2: 25 },
  2997. { name: "吕梁市", value: 10904, value2: 45 },
  2998. { name: "太原市", value: 25167, value2: 113 },
  2999. { name: "阳泉市", value: 2512, value2: 28 },
  3000. { name: "晋中市", value: 14857, value2: 52 },
  3001. { name: "临汾市", value: 13055, value2: 30 },
  3002. { name: "长治市", value: 10300, value2: 23 },
  3003. { name: "运城市", value: 4106, value2: 23 },
  3004. { name: "晋城市", value: 4543, value2: 31 },
  3005. ];
  3006. var geoCoordMap = {
  3007. 太原市: [112.53, 37.87],
  3008. 大同市: [113.3, 40.12],
  3009. 阳泉市: [113.57, 37.85],
  3010. 长治市: [113.08, 36.18],
  3011. 晋城市: [112.83, 35.52],
  3012. 朔州市: [112.43, 39.33],
  3013. 晋中市: [112.94, 37.4],
  3014. 运城市: [110.97, 35.03],
  3015. 忻州市: [112.53, 38.72],
  3016. 临汾市: [111.5, 36.08],
  3017. 吕梁市: [111.13, 37.52],
  3018. };
  3019. var convertData = function (data) {
  3020. var res = [];
  3021. for (var i = 0; i < data.length; i++) {
  3022. var geoCoord = geoCoordMap[data[i].name];
  3023. if (geoCoord) {
  3024. res.push({
  3025. name: data[i].name,
  3026. value: geoCoord.concat(data[i].value, data[i].value2),
  3027. });
  3028. }
  3029. }
  3030. return res;
  3031. };
  3032. var convertedData = [
  3033. convertData(data),
  3034. convertData(
  3035. data
  3036. .sort(function (a, b) {
  3037. return b.value - a.value;
  3038. })
  3039. .slice(0, 6)
  3040. ),
  3041. ];
  3042. data.sort(function (a, b) {
  3043. return a.value - b.value;
  3044. });
  3045. option = {
  3046. backgroundColor: "#404a5900",
  3047. animation: true,
  3048. animationDuration: 1000,
  3049. animationEasing: "cubicInOut",
  3050. animationDurationUpdate: 1000,
  3051. animationEasingUpdate: "cubicInOut",
  3052. geo: {
  3053. map: "china",
  3054. center: [112.53, 37.67],
  3055. zoom: 4.5,
  3056. label: {
  3057. emphasis: {
  3058. show: false,
  3059. },
  3060. },
  3061. roam: false,
  3062. itemStyle: {
  3063. normal: {
  3064. borderColor: "#7fb3ff",
  3065. borderWidth: 3,
  3066. areaColor: {
  3067. type: "radial",
  3068. x: 0.5,
  3069. y: 0.5,
  3070. r: 0.8,
  3071. colorStops: [
  3072. {
  3073. offset: 0,
  3074. color: "#468ff8", // 0% 处的颜色
  3075. },
  3076. {
  3077. offset: 1,
  3078. color: "#0a2c6d", // 100% 处的颜色
  3079. },
  3080. ],
  3081. globalCoord: false, // 缺省为 false
  3082. },
  3083. // shadowColor: 'rgba(128, 217, 248, 1)',
  3084. shadowColor: "#468ff8",
  3085. shadowOffsetX: -2,
  3086. shadowOffsetY: 2,
  3087. shadowBlur: 20,
  3088. },
  3089. emphasis: {
  3090. areaColor: {
  3091. colorStops: [
  3092. {
  3093. offset: 0,
  3094. color: "#3844aa", // 0% 处的颜色
  3095. },
  3096. {
  3097. offset: 1,
  3098. color: "#7284fc", // 100% 处的颜色
  3099. },
  3100. ],
  3101. },
  3102. borderColor: "#b3baff",
  3103. borderWidth: 5,
  3104. },
  3105. },
  3106. tooltip: {
  3107. trigger: "item",
  3108. className: "custom-tooltip-box",
  3109. confine: true, // 不超出当前表
  3110. formatter: (params, ticket, callback) => {
  3111. // 清空所有轮播
  3112. for (var k in geoCoordMap) {
  3113. that.shanxiMap.dispatchAction({
  3114. // type: 'geoUnSelect',
  3115. type: "downplay",
  3116. name: k,
  3117. geoIndex: 0,
  3118. });
  3119. that.shanxiMap.dispatchAction({
  3120. // type: 'geoUnSelect',
  3121. type: "downplay",
  3122. name: k,
  3123. seriesName: params.seriesName,
  3124. });
  3125. that.shanxiMap.dispatchAction({
  3126. // type: 'geoUnSelect',
  3127. type: "downplay",
  3128. name: k,
  3129. seriesName: "series\u00001",
  3130. });
  3131. }
  3132. that.shanxiMap.dispatchAction({
  3133. // type: 'geoSelect',
  3134. type: "highlight",
  3135. name: params.name,
  3136. geoIndex: 0,
  3137. });
  3138. that.shanxiMap.dispatchAction({
  3139. // type: 'geoSelect',
  3140. type: "highlight",
  3141. name: params.name,
  3142. seriesName: params.seriesName,
  3143. });
  3144. that.shanxiMap.dispatchAction({
  3145. // type: 'geoSelect',
  3146. type: "highlight",
  3147. name: params.name,
  3148. seriesName: "series\u00001",
  3149. });
  3150. return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
  3151. <div class="flex items-center">
  3152. <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
  3153. </div>
  3154. <div class="blueIcon flex items-center">项目数量:<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
  3155. <div class="blueIcon flex items-center">投资总额:<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
  3156. </div>`;
  3157. },
  3158. },
  3159. regions: [
  3160. {
  3161. name: "太原市",
  3162. value: 2000,
  3163. itemStyle: {
  3164. emphasis: {
  3165. borderColor: "#ffe036",
  3166. borderWidth: 5,
  3167. areaColor: {
  3168. type: "radial",
  3169. x: 0.5,
  3170. y: 0.5,
  3171. r: 0.8,
  3172. colorStops: [
  3173. {
  3174. offset: 0,
  3175. color: "#ffe036", // 0% 处的颜色
  3176. },
  3177. {
  3178. offset: 1,
  3179. color: "#7c732a", // 100% 处的颜色
  3180. },
  3181. ],
  3182. globalCoord: false, // 缺省为 false
  3183. },
  3184. },
  3185. },
  3186. },
  3187. {
  3188. name: "南海诸岛",
  3189. itemStyle: {
  3190. // 隐藏地图
  3191. normal: {
  3192. opacity: 0, // 为 0 时不绘制该图形
  3193. },
  3194. },
  3195. label: {
  3196. show: false, // 隐藏文字
  3197. },
  3198. },
  3199. ],
  3200. },
  3201. tooltip: {
  3202. trigger: "item",
  3203. className: "custom-tooltip-box",
  3204. confine: true, // 不超出当前表
  3205. },
  3206. xAxis: {
  3207. type: "value",
  3208. scale: true,
  3209. position: "top",
  3210. boundaryGap: false,
  3211. splitLine: {
  3212. show: false,
  3213. },
  3214. axisLine: {
  3215. show: false,
  3216. },
  3217. axisTick: {
  3218. show: false,
  3219. },
  3220. axisLabel: {
  3221. margin: 2,
  3222. textStyle: {
  3223. color: "#aaa",
  3224. },
  3225. },
  3226. },
  3227. yAxis: {
  3228. type: "category",
  3229. nameGap: 16,
  3230. axisLine: {
  3231. show: false,
  3232. lineStyle: {
  3233. color: "#ddd",
  3234. },
  3235. },
  3236. axisTick: {
  3237. show: false,
  3238. lineStyle: {
  3239. color: "#ddd",
  3240. },
  3241. },
  3242. axisLabel: {
  3243. interval: 0,
  3244. textStyle: {
  3245. color: "#ddd",
  3246. },
  3247. },
  3248. data: categoryData,
  3249. },
  3250. series: [
  3251. {
  3252. type: "effectScatter",
  3253. colorBy: "data",
  3254. coordinateSystem: "geo",
  3255. data: convertedData[0],
  3256. symbolSize: function (val) {
  3257. return Math.max(val[2] / 500, 8);
  3258. },
  3259. showEffectOn: "emphasis",
  3260. rippleEffect: {
  3261. brushType: "stroke",
  3262. color: "#58F7DF",
  3263. },
  3264. hoverAnimation: true,
  3265. label: {
  3266. normal: {
  3267. formatter: "{b}",
  3268. position: "right",
  3269. show: true,
  3270. fontSize: "30",
  3271. color: "#fff",
  3272. },
  3273. },
  3274. itemStyle: {
  3275. normal: {
  3276. color: "#ffc809",
  3277. shadowBlur: 50,
  3278. shadowColor: "#ffc809",
  3279. },
  3280. emphasis: {
  3281. color: "#58F7DF",
  3282. shadowBlur: 50,
  3283. shadowColor: "#58F7DF",
  3284. },
  3285. },
  3286. zlevel: 99,
  3287. },
  3288. {
  3289. type: "effectScatter",
  3290. colorBy: "data",
  3291. coordinateSystem: "geo",
  3292. data: [
  3293. {
  3294. "name": "太原市",
  3295. "value": [
  3296. 112.53,
  3297. 37.87,
  3298. 25167,
  3299. 113
  3300. ]
  3301. }
  3302. ],
  3303. symbolSize: function (val) {
  3304. return Math.max(val[2] / 500, 8);
  3305. },
  3306. showEffectOn: "emphasis",
  3307. rippleEffect: {
  3308. brushType: "stroke",
  3309. color: "#DF62F2",
  3310. },
  3311. hoverAnimation: true,
  3312. label: {
  3313. normal: {
  3314. formatter: "{b}",
  3315. position: "right",
  3316. show: true,
  3317. fontSize: "30",
  3318. color: "#fff",
  3319. },
  3320. },
  3321. itemStyle: {
  3322. normal: {
  3323. color: "#ffc809",
  3324. shadowBlur: 50,
  3325. shadowColor: "#ffc809",
  3326. },
  3327. emphasis: {
  3328. color: "#DF62F2",
  3329. shadowBlur: 50,
  3330. shadowColor: "#DF62F2",
  3331. },
  3332. },
  3333. zlevel: 999,
  3334. },
  3335. ],
  3336. };
  3337. var categoryData = [];
  3338. var barData = [];
  3339. var sum = 0;
  3340. for (var i = 0; i < data.length; i++) {
  3341. categoryData.push(data[i].name);
  3342. barData.push(data[i].value);
  3343. sum += data[i].value;
  3344. }
  3345. // this.shanxiMap.on('click', function (params) {
  3346. // if (params.name == '山西') {
  3347. // that.shanxiMap.dispose()
  3348. // that.centerShow = true
  3349. // setTimeout(() => {
  3350. // })
  3351. // }
  3352. // })
  3353. tools.loopShowTooltip(this.shanxiMap, option, {
  3354. interval: 2000,
  3355. loopSeries: false,
  3356. seriesIndex: 0,
  3357. });
  3358. this.shanxiMap.setOption(option);
  3359. },
  3360. leftEcharts9Fun() {
  3361. let that = this;
  3362. this.leftEcharts9 = echarts.init(this.$refs["leftEcharts9"]);
  3363. // var ROOT_PATH = 'https://echarts.apache.org/examples';
  3364. let option = {
  3365. backgroundColor: "#00000000",
  3366. globe: {
  3367. globeRadius: 55,
  3368. baseTexture: "./img/3D/world1.jpg",
  3369. heightTexture: "./img/3D/world1.jpg",
  3370. displacementScale: 0.04,
  3371. shading: "realistic",
  3372. // environment: './img/3D/world2.jpg',
  3373. realisticMaterial: {
  3374. roughness: 0.9,
  3375. },
  3376. postEffect: {
  3377. enable: true,
  3378. },
  3379. light: {
  3380. main: {
  3381. intensity: 3,
  3382. shadow: true,
  3383. },
  3384. },
  3385. },
  3386. };
  3387. that.leftEcharts9.setOption(option);
  3388. },
  3389. leftEcharts10Fun() {
  3390. let that = this;
  3391. this.leftEcharts10 = echarts.init(this.$refs["leftEcharts10"]);
  3392. option = {
  3393. grid: {
  3394. top: 45,
  3395. right: 0,
  3396. left: 80,
  3397. bottom: 80,
  3398. },
  3399. tooltip: {
  3400. show: true,
  3401. trigger: "axis",
  3402. formatter: (data) => {
  3403. return `${
  3404. data[0].name
  3405. }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${
  3406. data[0].color
  3407. }"></span> ${data[0].seriesName}:${that.numFormat(
  3408. data[0].value
  3409. )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${
  3410. data[1].color.colorStops[0].color
  3411. }"></span> ${data[1].seriesName}:${that.numFormat(
  3412. data[1].value
  3413. )}亿`;
  3414. },
  3415. axisPointer: {
  3416. // 坐标轴指示器,坐标轴触发有效
  3417. type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
  3418. },
  3419. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  3420. borderColor: "rgba(50,50,50,0.7)",
  3421. textStyle: {
  3422. color: "#fff",
  3423. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  3424. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  3425. fontSize: "28", // 文字字体大小
  3426. },
  3427. },
  3428. xAxis: {
  3429. data: commonCompany,
  3430. axisTick: {
  3431. show: false,
  3432. },
  3433. // x轴的字体颜色
  3434. axisLabel: {
  3435. rotate: 40,
  3436. textStyle: {
  3437. color: "white",
  3438. fontSize: "20",
  3439. fontFamily: "Microsoft YaHei",
  3440. },
  3441. },
  3442. //y轴线的颜色以及宽度
  3443. axisLine: {
  3444. show: true,
  3445. lineStyle: {
  3446. color: "#1E5389",
  3447. width: 1,
  3448. type: "solid",
  3449. },
  3450. },
  3451. },
  3452. yAxis: {
  3453. name: "亿",
  3454. axisTick: {
  3455. lineStyle: {
  3456. color: "#18416F",
  3457. },
  3458. },
  3459. // y轴的字体颜色
  3460. axisLabel: {
  3461. textStyle: {
  3462. color: "white",
  3463. fontSize: "20",
  3464. fontFamily: "Microsoft YaHei",
  3465. },
  3466. },
  3467. splitLine: {
  3468. show: true,
  3469. lineStyle: {
  3470. color: "#68b4dd66",
  3471. width: 1,
  3472. type: "dashed",
  3473. },
  3474. },
  3475. //y轴线的颜色以及宽度
  3476. axisLine: {
  3477. show: true,
  3478. lineStyle: {
  3479. color: "#1E5389",
  3480. width: 1,
  3481. type: "solid",
  3482. },
  3483. },
  3484. nameTextStyle: {
  3485. color: "#fff",
  3486. fontSize: 20,
  3487. fontFamily: "Microsoft YaHei",
  3488. },
  3489. },
  3490. series: [
  3491. {
  3492. name: "已用额度",
  3493. type: "pictorialBar",
  3494. symbol: "fixed",
  3495. symbolSize: [20, 5],
  3496. symbolMargin: 2,
  3497. symbolRepeat: "repeat",
  3498. data: [
  3499. 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46,
  3500. 26, 36,
  3501. ],
  3502. showBackground: false,
  3503. barWidth: "15",
  3504. itemStyle: {
  3505. color: "#40A9FF",
  3506. },
  3507. zlevel: 1,
  3508. },
  3509. {
  3510. name: "总额度",
  3511. type: "pictorialBar",
  3512. symbol: "fixed",
  3513. symbolSize: [30, 5],
  3514. symbolMargin: 2,
  3515. symbolRepeat: "repeat",
  3516. data: [
  3517. 390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390,
  3518. 390, 390, 200, 390, 200,
  3519. ],
  3520. barGap: "-130%",
  3521. barWidth: "25",
  3522. itemStyle: {
  3523. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  3524. {
  3525. offset: 0,
  3526. color: "#b9b7c060",
  3527. },
  3528. {
  3529. offset: 1,
  3530. color: "#b9b7c060",
  3531. },
  3532. ]),
  3533. },
  3534. },
  3535. ],
  3536. };
  3537. //轮播
  3538. tools.loopShowTooltip(that.leftEcharts10, option, {
  3539. interval: 2000,
  3540. loopSeries: true,
  3541. });
  3542. //注册
  3543. that.leftEcharts10.setOption(option);
  3544. },
  3545. // 重点项目两线指标轮播方法
  3546. scrollChange(index) {
  3547. if (index == 18) {
  3548. this.count = -1;
  3549. } else {
  3550. this.count = index;
  3551. }
  3552. if (this.count > 12 && this.count != 18) {
  3553. this.countType = 1;
  3554. } else {
  3555. this.countType = 0;
  3556. }
  3557. for (var i = 0; i < this.list.length; i++) {
  3558. if (i == 2) {
  3559. this.list[i].classList.add("light");
  3560. } else {
  3561. this.list[i].classList.remove("light");
  3562. }
  3563. }
  3564. this.leftEcharts11 ? this.leftEcharts11.dispose() : "";
  3565. this.leftEcharts11Fun();
  3566. },
  3567. leftEcharts11Fun() {
  3568. let that = this;
  3569. this.leftEcharts11 = echarts.init(this.$refs["leftEcharts11"]);
  3570. option = {
  3571. tooltip: {
  3572. trigger: "axis",
  3573. formatter:
  3574. "指标:" +
  3575. "{c0}" +
  3576. "<br/>" +
  3577. "发展线:" +
  3578. "{c1}" +
  3579. "<br/>" +
  3580. "生存线:" +
  3581. "{c2}", //+ '<br/>'+ '{a1}:{c1}' + '%',
  3582. axisPointer: {
  3583. type: "shadow",
  3584. },
  3585. backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
  3586. borderColor: "rgba(50,50,50,0.7)",
  3587. textStyle: {
  3588. color: "#fff",
  3589. fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
  3590. fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
  3591. fontSize: "28", // 文字字体大小
  3592. },
  3593. },
  3594. grid: {
  3595. top: "10%",
  3596. right: "5%",
  3597. left: "15%",
  3598. bottom: "20%",
  3599. },
  3600. xAxis: {
  3601. data: [
  3602. "总投资收益率",
  3603. "销售利润率",
  3604. "成本费用利润率",
  3605. "总资产周转率",
  3606. "财务内部收益率",
  3607. ],
  3608. // data: left15[this.countType],
  3609. axisLine: {
  3610. show: true, //隐藏X轴轴线
  3611. lineStyle: {
  3612. color: "#005094",
  3613. width: 1,
  3614. },
  3615. },
  3616. axisTick: {
  3617. show: true, //隐藏X轴刻度
  3618. },
  3619. axisLabel: {
  3620. show: true,
  3621. rotate: 30,
  3622. textStyle: {
  3623. color: "#fff", //X轴文字颜色
  3624. fontSize: 20,
  3625. fontFamily: "Microsoft YaHei",
  3626. },
  3627. },
  3628. },
  3629. yAxis: [
  3630. {
  3631. type: "value",
  3632. splitLine: {
  3633. show: true,
  3634. lineStyle: {
  3635. color: "#68b4dd66",
  3636. type: "dashed",
  3637. },
  3638. },
  3639. axisLine: {
  3640. show: false,
  3641. },
  3642. axisLabel: {
  3643. show: true,
  3644. formatter: "{value}%",
  3645. textStyle: {
  3646. color: "#fff",
  3647. fontSize: 20,
  3648. fontFamily: "Microsoft YaHei",
  3649. },
  3650. },
  3651. nameTextStyle: {
  3652. color: "#ebf8ac",
  3653. fontSize: 16,
  3654. fontFamily: "Microsoft YaHei",
  3655. },
  3656. },
  3657. ],
  3658. series: [
  3659. {
  3660. name: "实际值",
  3661. type: "bar",
  3662. barWidth: 20,
  3663. itemStyle: {
  3664. normal: {
  3665. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3666. {
  3667. offset: 0,
  3668. color: "#69c0ff",
  3669. },
  3670. {
  3671. offset: 1,
  3672. color: "#082550",
  3673. },
  3674. ]),
  3675. },
  3676. },
  3677. data: [70, 52, 33, 41, 52],
  3678. // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][2] : left12[this.count + 1][2]
  3679. },
  3680. {
  3681. name: "",
  3682. type: "line",
  3683. barWidth: 15,
  3684. itemStyle: {
  3685. normal: {
  3686. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3687. {
  3688. offset: 0,
  3689. color: "#69c0ff",
  3690. },
  3691. {
  3692. offset: 1,
  3693. color: "green",
  3694. },
  3695. ]),
  3696. },
  3697. },
  3698. data: [20, 30, 15, 28, 36],
  3699. // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][1] : left12[this.count + 1][1]
  3700. },
  3701. {
  3702. name: "",
  3703. type: "line",
  3704. barWidth: 15,
  3705. itemStyle: {
  3706. normal: {
  3707. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  3708. {
  3709. offset: 0,
  3710. color: "#69c0ff",
  3711. },
  3712. {
  3713. offset: 1,
  3714. color: "yellow",
  3715. },
  3716. ]),
  3717. },
  3718. },
  3719. data: [15, 22, 17, 33, 14],
  3720. // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][0] : left12[this.count + 1][0]
  3721. },
  3722. ],
  3723. };
  3724. //轮播
  3725. tools.loopShowTooltip(that.leftEcharts11, option, {
  3726. interval: 2000,
  3727. loopSeries: true,
  3728. });
  3729. //注册
  3730. that.leftEcharts11.setOption(option);
  3731. },
  3732. leftEcharts12Fun () {
  3733. let that = this;
  3734. this.leftEcharts12 = echarts.init(this.$refs["leftEcharts12"]);
  3735. var totalData = [{
  3736. name: '传统产业',
  3737. value: 12,
  3738. radio: 0.13
  3739. }, {
  3740. name: '公共基础产业',
  3741. value: 52,
  3742. radio: 0.01
  3743. }, {
  3744. name: '战略性新兴产业',
  3745. value: 15,
  3746. radio: 3.9
  3747. }, {
  3748. name: '特色优势产业',
  3749. value: 56,
  3750. radio: 10.5
  3751. }];
  3752. var data = [];
  3753. for (var i = 0; i < totalData.length; i++) {
  3754. data.push({
  3755. value: totalData[i].value,
  3756. name: totalData[i].name,
  3757. itemStyle: {
  3758. normal: {
  3759. borderWidth: 8,
  3760. shadowBlur: 0,
  3761. borderColor: commonColor[i],
  3762. shadowColor: commonColor[i]
  3763. }
  3764. }
  3765. },
  3766. {
  3767. value: 5,
  3768. name: '',
  3769. itemStyle: {
  3770. normal: {
  3771. label: {
  3772. show: false
  3773. },
  3774. labelLine: {
  3775. show: false
  3776. },
  3777. color: 'rgba(0, 0, 0, 0)',
  3778. borderColor: 'rgba(0, 0, 0, 0)',
  3779. borderWidth: 0
  3780. }
  3781. }
  3782. }
  3783. );
  3784. }
  3785. var seriesOption = [{
  3786. name: '',
  3787. type: 'pie',
  3788. clockWise: false,
  3789. radius: [170, 160],
  3790. center: [260, 250],
  3791. hoverAnimation: false,
  3792. itemStyle: {
  3793. normal: {
  3794. label: {
  3795. show: false,
  3796. }
  3797. }
  3798. },
  3799. data: data
  3800. },
  3801. {
  3802. type: 'pie',
  3803. radius: [120, 120],
  3804. center: [260, 250],
  3805. zlevel: 3,
  3806. silent: true,
  3807. label: {
  3808. normal: {
  3809. show: false
  3810. },
  3811. },
  3812. labelLine: {
  3813. normal: {
  3814. show: false
  3815. }
  3816. },
  3817. data: _pie3()
  3818. },
  3819. ];
  3820. option = {
  3821. color: commonColor,
  3822. title: {
  3823. show: false,
  3824. text: '风险类型123',
  3825. top: '48%',
  3826. textAlign: "center",
  3827. left: "49%",
  3828. textStyle: {
  3829. color: '#fff',
  3830. fontSize: 18,
  3831. fontWeight: '400'
  3832. }
  3833. },
  3834. tooltip: {
  3835. show: false
  3836. },
  3837. legend: {
  3838. icon: "circle",
  3839. orient: 'vertical',
  3840. formatter: function (name) {
  3841. let num
  3842. for (let i = 0; i < totalData.length; i++) {
  3843. if (totalData[i].name === name) {
  3844. num = name + ':' + totalData[i].value + '(' + totalData[i].radio + '%' + ')'
  3845. }
  3846. }
  3847. return num
  3848. },
  3849. data: ['传统产业', '公共基础产业', '战略性新兴产业', '特色优势产业'],
  3850. right: 0,
  3851. bottom: 0,
  3852. align: 'left',
  3853. textStyle: {
  3854. color: '#FFF', // 文字的颜色
  3855. fontSize: '20', // 文字字体大小
  3856. fontFamily: 'Microsoft YaHei'
  3857. },
  3858. itemGap: 20
  3859. },
  3860. toolbox: {
  3861. show: false
  3862. },
  3863. series: seriesOption
  3864. }
  3865. function _pie3 () {
  3866. let dataArr = [];
  3867. for (var i = 0; i < 100; i++) {
  3868. if (i % 2 === 0) {
  3869. dataArr.push({
  3870. name: (i + 1).toString(),
  3871. value: 25,
  3872. itemStyle: {
  3873. normal: {
  3874. color: "#5A5DE0",
  3875. borderWidth: 1,
  3876. borderColor: "#5A5DE0"
  3877. }
  3878. }
  3879. })
  3880. } else {
  3881. dataArr.push({
  3882. name: (i + 1).toString(),
  3883. value: 20,
  3884. itemStyle: {
  3885. normal: {
  3886. color: "rgba(0,0,0,0)",
  3887. borderWidth: 0,
  3888. borderColor: "rgba(0,0,0,0)"
  3889. }
  3890. }
  3891. })
  3892. }
  3893. }
  3894. return dataArr
  3895. }
  3896. //轮播
  3897. tools.loopShowTooltip(that.leftEcharts12, option, {
  3898. interval: 2000,
  3899. loopSeries: true,
  3900. });
  3901. //注册
  3902. that.leftEcharts12.setOption(option);
  3903. },
  3904. },
  3905. });