investHomeGroup.js 115 KB

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