index.js 93 KB

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