jjyx.vue 96 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409
  1. <template>
  2. <div>
  3. <!-- 阴影背景
  4. <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
  5. <div class="bj_right"><img src="@/assets/images/sprhbj-right.png"/></div>-->
  6. <div class="bj_bottom"><img src="@/assets/images/sprhbj-bottom.png"/></div>
  7. <!--头部开始-->
  8. <div class="header">
  9. <h1>城市运行一网统管指挥中心</h1>
  10. </div>
  11. <!--头部结束-->
  12. <!-- 小头部 开始 -->
  13. <div class="nav_min">
  14. <div class="top_txt">
  15. <b>汽开区</b>
  16. <!-- <span>小雨</span>-->
  17. <!-- <span>9~16℃</span>-->
  18. </div>
  19. <div class="top_txt top_txt2">
  20. <span>{{ currentTime }}</span>
  21. <!-- <span>星期六</span>
  22. <b>11:16:58</b> -->
  23. </div>
  24. </div>
  25. <!-- 小头部 结束 -->
  26. <!-- 中间内容 开始 -->
  27. <div class="qkq_con qkq_con2">
  28. <!--左侧开始-->
  29. <div class="con_left_e">
  30. <div class="con_div">
  31. <div class="qkq_tit txt_t">规模以上工业增加值</div>
  32. <div class="qkq_jjyx_div">
  33. <div id="qkq_zjz1_1"></div>
  34. <div id="qkq_zjz2_1"></div>
  35. </div>
  36. </div>
  37. <div class="con_div">
  38. <div class="qkq_tit txt_t">固定资产投资额</div>
  39. <div class="qkq_jjyx_div">
  40. <div id="qkq_zjz1_2"></div>
  41. <div id="qkq_zjz2_2"></div>
  42. </div>
  43. </div>
  44. <div class="con_div">
  45. <div class="qkq_tit txt_t">民间投资额</div>
  46. <div class="qkq_jjyx_div">
  47. <div id="qkq_zjz1_3"></div>
  48. <div id="qkq_zjz2_3"></div>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="con_left_f">
  53. <div class="con_div clearfix">
  54. <div class="con_left_l fl">
  55. <div class="qkq_tit ">政策法规</div>
  56. <div class="qkq_zcfg">
  57. <p>地方政府专项债券用途调整操作指引<span>2024-07-08</span></p>
  58. <p>地方政府专项债券项目资金绩效管理<span>2024-07-06</span></p>
  59. <p>地方政府债券信息公开平台管理办法<span>2024-06-30</span></p>
  60. <p>加快地方政府专项债券发行使用有关<span>2024-06-24</span></p>
  61. <p>土地储备项目预算管理办法(试行)<span>2024-06-15</span></p>
  62. <p>地方政府债务信息公开办法(试行)<span>2024-06-01</span></p>
  63. <p>严格防范外债风险和地方债务风险<span>2024-05-31</span></p>
  64. <p>进一步加强城市轨道交通规划建设<span>2024-05-24</span></p>
  65. <p>增强企业债券服务实体经济能力<span>2024-05-13</span></p>
  66. <p>严格防范地方债务风险的通知<span>2024-04-12</span></p>
  67. </div>
  68. </div>
  69. <div class="con_left_r fr">
  70. <div class="qkq_tit ">主要经济指标</div>
  71. <div class="qkq_zcfg" id="scrollContent">
  72. <p>地区生产总值<i class="up">12.0%</i></p>
  73. <p>工业增加值<i class="up">3.0%</i></p>
  74. <p>固定资产投资<i class="down">2.0%</i></p>
  75. <p>地方财政一般预算收入<i class="down">15.0%</i></p>
  76. <p>对外贸易(海关进出口总额)<i class="up">13.0%</i></p>
  77. <p>社会消费品零售总额<i class="down">11.0%</i></p>
  78. <p>消费物价指数(CPI)<i class="up">6.0%</i></p>
  79. <p>城镇居民人均可支配收入<i class="up">9.0%</i></p>
  80. </div>
  81. </div>
  82. </div>
  83. <div class="con_div">
  84. <div class="qkq_tit txt_t">本年度主要经济指标增长额</div>
  85. <div id="qkq_jdt"></div>
  86. </div>
  87. <div class="con_div">
  88. <div class="qkq_tit txt_t">全省进出口总值对比</div>
  89. <div id="qkq_kxt"></div>
  90. </div>
  91. </div>
  92. <div class="con_left_g">
  93. <div class="con_div">
  94. <div class="qkq_tit txt_t">限额以上社会消费品零售总额</div>
  95. <div class="qkq_jjyx_div">
  96. <div id="qkq_zjz1_4"></div>
  97. <div id="qkq_zjz2_4"></div>
  98. </div>
  99. </div>
  100. <div class="con_div">
  101. <div class="qkq_tit txt_t">进出口总值</div>
  102. <div class="qkq_jjyx_div">
  103. <div id="qkq_zjz1_5"></div>
  104. <div id="qkq_zjz2_5"></div>
  105. </div>
  106. </div>
  107. <div class="con_div">
  108. <div class="qkq_tit txt_t">一般公共预算收入</div>
  109. <div class="qkq_jjyx_div">
  110. <div id="qkq_zjz1_6"></div>
  111. <div id="qkq_zjz2_6"></div>
  112. </div>
  113. </div>
  114. </div>
  115. <!--左侧结束-->
  116. </div>
  117. <!-- 中间内容 结束 -->
  118. <!--底部开始-->
  119. <div class="footer">
  120. <div class="nav-bottom">
  121. <div class="nav-bottom-left">
  122. <div class="nav-li-left on" @click="handleNavigation('jjyx')">
  123. <span>经济运行</span>
  124. </div>
  125. <div class="nav-li-left" @click="handleNavigation('csgl')">
  126. <span>城市管理</span>
  127. </div>
  128. <div class="nav-li-left" @click="handleNavigation('jtzl')">
  129. <span>交通治理</span>
  130. </div>
  131. <div class="nav-li-left" @click="handleNavigation('jczl')">
  132. <span>基层治理</span>
  133. </div>
  134. </div>
  135. <div class="nav-home-middle" @click="homePage('weather')">
  136. <img src="@/assets/images/home-btn.png"/>
  137. <a>返回首页</a>
  138. </div>
  139. <div class="nav-bottom-right">
  140. <div class="nav-li-right" @click="handleNavigation('yshj_new')">
  141. <span>营商环境</span>
  142. </div>
  143. <div class="nav-li-right" @click="handleNavigation('bjzshz')">
  144. <span>政务运行</span>
  145. </div>
  146. <div class="nav-li-right" @click="handleNavigation('aqyj')">
  147. <span>安全应急</span>
  148. </div>
  149. <div class="nav-li-right" @click="handleNavigation('fwyq')">
  150. <span>服务一汽</span>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <!--底部开始-->
  156. </div>
  157. </template>
  158. <script>
  159. import * as echarts from 'echarts'
  160. import $ from 'jquery'
  161. import jQuery from 'jquery'
  162. import "@/assets/images/qkq_body.css";
  163. import "@/assets/images/qkq_index.css";
  164. import "@/assets/images/qkq_sprh.css";
  165. import {
  166. getCameraList
  167. } from "@/api/system/camera";
  168. import supermap from "@/views/supermap/supermap";
  169. export default {
  170. name: "jjyx",
  171. components: {
  172. supermap
  173. },
  174. data() {
  175. return {
  176. dropdownVisible: false,
  177. cameras: [],
  178. sltProps: null,
  179. currentTime: '',
  180. btnOne: true,
  181. btnTwo: false
  182. };
  183. // 可根据实际情况添加更多设备列表
  184. },
  185. created() {
  186. },
  187. mounted() {
  188. this.qkq_zjz1_1();
  189. this.qkq_zjz2_1();
  190. this.qkq_zjz1_2();
  191. this.qkq_zjz2_2();
  192. this.qkq_zjz1_3();
  193. this.qkq_zjz2_3();
  194. this.qkq_zjz1_4();
  195. this.qkq_zjz2_4();
  196. this.qkq_zjz1_5();
  197. this.qkq_zjz2_5();
  198. this.qkq_zjz1_6();
  199. this.qkq_zjz2_6();
  200. this.getCurrentTime();
  201. this.qkq_jdt();
  202. this.qkq_kxt();
  203. // 每秒刷新时间
  204. setInterval(() => {
  205. this.getCurrentTime();
  206. }, 1000);
  207. },
  208. methods: {
  209. sltHandle() {
  210. this.btnOne = true
  211. this.btnTwo = false
  212. this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
  213. },
  214. yxtHandle() {
  215. this.btnTwo = true
  216. this.btnOne = false
  217. this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
  218. },
  219. handleNavigation(route) {
  220. this.$router.push({
  221. path: route
  222. });
  223. },
  224. homePage(route) {
  225. this.$router.push({
  226. path: route
  227. });
  228. },
  229. cameraList() {
  230. getCameraList().then(response => {
  231. this.cameras = response.data;
  232. })
  233. },
  234. toggleDropdown(event) {
  235. this.dropdownVisible = !this.dropdownVisible;
  236. },
  237. qkq_zjz1_1() {
  238. //一汽红旗项目服务局
  239. var myChart = echarts.init(document.getElementById('qkq_zjz1_1'));
  240. let angle = 0; //角度,用来做简单的动画效果的
  241. var data = [{
  242. value: "10",
  243. itemStyle: {
  244. color: "#ffbf00"
  245. }
  246. },
  247. {
  248. value: "100",
  249. itemStyle: {
  250. color: "#fc465"
  251. }
  252. }
  253. ];
  254. var dataTotal = Number(data[1].value) + Number(data[0].value)
  255. var dataArr = [{
  256. value: Number(data[0].value),
  257. name: '增加值',
  258. itemStyle: {
  259. normal: {
  260. color: "#5a98ed"
  261. }
  262. }
  263. }, {
  264. value: Number(data[1].value),
  265. name: '总数',
  266. itemStyle: {
  267. normal: {
  268. color: "#1a3b72"
  269. }
  270. }
  271. }]
  272. var option = {
  273. title: [
  274. {
  275. text: '工业增加值',
  276. left: '49%',
  277. top: '40%',
  278. textAlign: 'center',
  279. textBaseline: 'middle',
  280. textStyle: {
  281. color: '#66b1ff',
  282. fontWeight: 'normal',
  283. fontSize: 16
  284. }
  285. }, {
  286. text: Math.floor((data[1].value / dataTotal) * 100) + '%',
  287. left: '49%',
  288. top: '55%',
  289. textAlign: 'center',
  290. textBaseline: 'middle',
  291. textStyle: {
  292. color: '#ffff00',
  293. fontWeight: 'normal',
  294. fontSize: 18
  295. }
  296. }],
  297. series: [
  298. {
  299. name: 'ring5',
  300. type: 'custom',
  301. coordinateSystem: 'none',
  302. renderItem: function (params, api) {
  303. return {
  304. type: 'arc',
  305. shape: {
  306. cx: api.getWidth() / 2,
  307. cy: api.getHeight() / 2,
  308. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  309. startAngle: ((0 + angle) * Math.PI) / 180,
  310. endAngle: ((90 + angle) * Math.PI) / 180,
  311. },
  312. style: {
  313. stroke: '#fddb00',
  314. fill: 'transparent',
  315. lineWidth: 1.5,
  316. },
  317. silent: true,
  318. };
  319. },
  320. data: [0],
  321. },
  322. {
  323. name: 'ring5',
  324. type: 'custom',
  325. coordinateSystem: 'none',
  326. renderItem: function (params, api) {
  327. return {
  328. type: 'arc',
  329. shape: {
  330. cx: api.getWidth() / 2,
  331. cy: api.getHeight() / 2,
  332. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  333. startAngle: ((180 + angle) * Math.PI) / 180,
  334. endAngle: ((270 + angle) * Math.PI) / 180,
  335. },
  336. style: {
  337. stroke: '#fddb00',
  338. fill: 'transparent',
  339. lineWidth: 1.5,
  340. },
  341. silent: true,
  342. };
  343. },
  344. data: [0],
  345. },
  346. {
  347. name: 'ring5',
  348. type: 'custom',
  349. coordinateSystem: 'none',
  350. renderItem: function (params, api) {
  351. return {
  352. type: 'arc',
  353. shape: {
  354. cx: api.getWidth() / 2,
  355. cy: api.getHeight() / 2,
  356. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  357. startAngle: ((270 + -angle) * Math.PI) / 180,
  358. endAngle: ((40 + -angle) * Math.PI) / 180,
  359. },
  360. style: {
  361. stroke: '#0CD3DB',
  362. fill: 'transparent',
  363. lineWidth: 1.5,
  364. },
  365. silent: true,
  366. };
  367. },
  368. data: [0],
  369. },
  370. {
  371. name: 'ring5',
  372. type: 'custom',
  373. coordinateSystem: 'none',
  374. renderItem: function (params, api) {
  375. return {
  376. type: 'arc',
  377. shape: {
  378. cx: api.getWidth() / 2,
  379. cy: api.getHeight() / 2,
  380. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  381. startAngle: ((90 + -angle) * Math.PI) / 180,
  382. endAngle: ((220 + -angle) * Math.PI) / 180,
  383. },
  384. style: {
  385. stroke: '#0CD3DB',
  386. fill: 'transparent',
  387. lineWidth: 1.5,
  388. },
  389. silent: true,
  390. };
  391. },
  392. data: [0],
  393. },
  394. {
  395. name: 'ring5',
  396. type: 'custom',
  397. coordinateSystem: 'none',
  398. renderItem: function (params, api) {
  399. let x0 = api.getWidth() / 2;
  400. let y0 = api.getHeight() / 2;
  401. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  402. let point = getCirlPoint(x0, y0, r, 90 + -angle);
  403. return {
  404. type: 'circle',
  405. shape: {
  406. cx: point.x,
  407. cy: point.y,
  408. r: 4,
  409. },
  410. style: {
  411. stroke: '#0CD3DB', //粉
  412. fill: '#0CD3DB',
  413. },
  414. silent: true,
  415. };
  416. },
  417. data: [0],
  418. },
  419. {
  420. name: 'ring5', //绿点
  421. type: 'custom',
  422. coordinateSystem: 'none',
  423. renderItem: function (params, api) {
  424. let x0 = api.getWidth() / 2;
  425. let y0 = api.getHeight() / 2;
  426. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  427. let point = getCirlPoint(x0, y0, r, 270 + -angle);
  428. return {
  429. type: 'circle',
  430. shape: {
  431. cx: point.x,
  432. cy: point.y,
  433. r: 4,
  434. },
  435. style: {
  436. stroke: '#0CD3DB', //绿
  437. fill: '#0CD3DB',
  438. },
  439. silent: true,
  440. };
  441. },
  442. data: [0],
  443. },
  444. {
  445. radius: ['45%', '60%'],
  446. name: '',
  447. type: 'pie',
  448. selectedOffset: 16,
  449. startAngle: 90,
  450. z: 3,
  451. labelLine: {
  452. normal: {
  453. length: 15,
  454. length2: 22,
  455. lineStyle: {
  456. width: 2
  457. }
  458. }
  459. },
  460. label: {
  461. normal: {
  462. textStyle: {
  463. fontSize: 14
  464. },
  465. formatter: function (params) {
  466. return params.name + '\n' + params.value
  467. }
  468. }
  469. },
  470. data: dataArr
  471. }]
  472. };
  473. myChart.setOption(option, true);
  474. if (option) {
  475. myChart.setOption(option);
  476. }
  477. //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度)
  478. function getCirlPoint(x0, y0, r, angle) {
  479. let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  480. let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  481. return {
  482. x: x1,
  483. y: y1,
  484. };
  485. }
  486. function draw() {
  487. angle = angle + 3;
  488. myChart.setOption(option, true);
  489. //window.requestAnimationFrame(draw);
  490. }
  491. setInterval(function () {
  492. //用setInterval做动画感觉有问题
  493. draw();
  494. }, 100);
  495. },
  496. qkq_zjz2_1() {
  497. var myChart = echarts.init(document.getElementById('qkq_zjz2_1'));
  498. let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  499. let yData = [25, 100, 50, 45, 75, 25, 100, 50, 45, 75, 25, 100, 50, 45, 75]
  500. let barData = [25, 60, 50, 45, 75, 25, 60, 50, 45, 75, 25, 60, 50, 45, 75]
  501. function calMax(arr) {
  502. let max = 0;
  503. arr.forEach((el) => {
  504. el.forEach((el1) => {
  505. if (!(el1 === undefined || el1 === '')) {
  506. if (Number(max) < Number(el1)) {
  507. max = Number(el1);
  508. }
  509. }
  510. })
  511. })
  512. let maxint = Math.ceil(max / 9.5);
  513. //不让最高的值超过最上面的刻度
  514. let maxval = maxint * 10;
  515. //让显示的刻度是整数
  516. return maxval;
  517. }
  518. var max = Math.ceil(calMax([yData]) / 50) * 50;
  519. var max1 = Math.ceil(calMax([barData]) / 50) * 50;
  520. var option = {
  521. legend: {
  522. left: '1%',
  523. textStyle: {
  524. color: "#fff",
  525. fontSize: 12
  526. },
  527. },
  528. grid: {
  529. left: '1%',
  530. top: 60,
  531. right: 0,
  532. bottom: 0,
  533. containLabel: true
  534. },
  535. tooltip: {
  536. trigger: 'axis'
  537. },
  538. xAxis: {
  539. data: xData,
  540. axisTick: {
  541. show: false
  542. },
  543. axisLabel: {
  544. color: 'rgba(204, 234, 255, 1)'
  545. },
  546. axisLine: {
  547. lineStyle: {
  548. color: 'rgba(18, 255, 255, 0.5)'
  549. }
  550. }
  551. },
  552. yAxis: [{
  553. max: max1,
  554. name: '2024年',
  555. nameTextStyle: {
  556. align: 'left',
  557. color: 'rgba(204, 234, 255, 1)'
  558. },
  559. axisLabel: {
  560. color: 'rgba(204, 234, 255, 1)'
  561. },
  562. axisTick: {
  563. show: false
  564. },
  565. axisLine: {
  566. show: false
  567. },
  568. splitLine: {
  569. lineStyle: {
  570. type: 'dashed',
  571. color: 'rgba(18, 255, 255, 0.5)'
  572. }
  573. }
  574. }, {
  575. max: max,
  576. name: '2023年',
  577. position: 'right',
  578. nameTextStyle: {
  579. align: 'right',
  580. color: 'rgba(204, 234, 255, 1)'
  581. },
  582. axisLabel: {
  583. color: 'rgba(204, 234, 255, 1)'
  584. },
  585. axisTick: {
  586. show: false
  587. },
  588. axisLine: {
  589. show: false
  590. },
  591. splitLine: {
  592. lineStyle: {
  593. type: 'dashed',
  594. color: 'rgba(18, 255, 255, 0.5)'
  595. }
  596. }
  597. }],
  598. series: [
  599. {
  600. name: '2024年',
  601. type: 'bar',
  602. data: barData,
  603. barWidth: 10,
  604. yAxisIndex: 0,
  605. itemStyle: {
  606. normal: {
  607. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  608. offset: 0,
  609. color: '#1D82FF'
  610. }, {
  611. offset: 1,
  612. color: '#00FFF6'
  613. }]),
  614. barBorderRadius: [4, 4, 0, 0]
  615. }
  616. }
  617. },
  618. {
  619. name: '2023年',
  620. type: 'line',
  621. data: yData,
  622. yAxisIndex: 1,
  623. smooth: true,
  624. symbol: 'none',
  625. itemStyle: {
  626. normal: {
  627. lineStyle: {
  628. color: {
  629. // 两端添加透明度,模拟两端线收缩
  630. colorStops: [{
  631. offset: 0,
  632. color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
  633. }, {
  634. offset: 0.2,
  635. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  636. }, {
  637. offset: 0.8,
  638. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  639. }, {
  640. offset: 1,
  641. color: 'rgba(255, 227, 168, 0)'
  642. }]
  643. },
  644. shadowColor: 'rgba(255, 120, 0, 1)',
  645. shadowBlur: 8
  646. },
  647. areaStyle: {
  648. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  649. offset: 0,
  650. color: 'rgba(197, 106, 255, 0.6)'
  651. }, {
  652. offset: 0.6,
  653. color: 'rgba(255, 120, 0, 0)'
  654. }]),
  655. }
  656. }
  657. }
  658. },
  659. {
  660. type: 'lines',
  661. coordinateSystem: 'cartesian2d',
  662. data: barData.map((item, index) => {
  663. return {
  664. coords: [
  665. [index, 0],
  666. [index, item - 4]
  667. ]
  668. };
  669. }),
  670. effect: {
  671. show: true,
  672. period: 2.5,
  673. trailLength: 0.5, //控制拖尾长度
  674. symbolSize: [15, 2],
  675. symbol: this.$store.state.common.echarts_baseStreamer,
  676. loop: true,
  677. color: '#fff' //流光颜色
  678. },
  679. lineStyle: {
  680. width: 0,
  681. opacity: 0.6,
  682. curveness: 0
  683. },
  684. z: 999
  685. },
  686. ]
  687. };
  688. if (option) {
  689. myChart.setOption(option);
  690. }
  691. },
  692. qkq_zjz1_2() {
  693. //一汽红旗项目服务局
  694. var myChart = echarts.init(document.getElementById('qkq_zjz1_2'));
  695. let angle = 0; //角度,用来做简单的动画效果的
  696. var data = [{
  697. value: "32",
  698. itemStyle: {
  699. color: "#ffbf00"
  700. }
  701. },
  702. {
  703. value: "100",
  704. itemStyle: {
  705. color: "#fc465"
  706. }
  707. }
  708. ];
  709. var dataTotal = Number(data[1].value) + Number(data[0].value)
  710. var dataArr = [{
  711. value: Number(data[0].value),
  712. name: '增加值',
  713. itemStyle: {
  714. normal: {
  715. color: "#5a98ed"
  716. }
  717. }
  718. }, {
  719. value: Number(data[1].value),
  720. name: '总数',
  721. itemStyle: {
  722. normal: {
  723. color: "#1a3b72"
  724. }
  725. }
  726. }]
  727. var option = {
  728. title: [{
  729. text: '工业增加值',
  730. left: '49%',
  731. top: '40%',
  732. textAlign: 'center',
  733. textBaseline: 'middle',
  734. textStyle: {
  735. color: '#66b1ff',
  736. fontWeight: 'normal',
  737. fontSize: 16
  738. }
  739. }, {
  740. text: Math.floor((data[1].value / dataTotal) * 100) + '%',
  741. left: '49%',
  742. top: '55%',
  743. textAlign: 'center',
  744. textBaseline: 'middle',
  745. textStyle: {
  746. color: '#ffff00',
  747. fontWeight: 'normal',
  748. fontSize: 18
  749. }
  750. }],
  751. series: [
  752. {
  753. name: 'ring5',
  754. type: 'custom',
  755. coordinateSystem: 'none',
  756. renderItem: function (params, api) {
  757. return {
  758. type: 'arc',
  759. shape: {
  760. cx: api.getWidth() / 2,
  761. cy: api.getHeight() / 2,
  762. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  763. startAngle: ((0 + angle) * Math.PI) / 180,
  764. endAngle: ((90 + angle) * Math.PI) / 180,
  765. },
  766. style: {
  767. stroke: '#fddb00',
  768. fill: 'transparent',
  769. lineWidth: 1.5,
  770. },
  771. silent: true,
  772. };
  773. },
  774. data: [0],
  775. },
  776. {
  777. name: 'ring5',
  778. type: 'custom',
  779. coordinateSystem: 'none',
  780. renderItem: function (params, api) {
  781. return {
  782. type: 'arc',
  783. shape: {
  784. cx: api.getWidth() / 2,
  785. cy: api.getHeight() / 2,
  786. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  787. startAngle: ((180 + angle) * Math.PI) / 180,
  788. endAngle: ((270 + angle) * Math.PI) / 180,
  789. },
  790. style: {
  791. stroke: '#fddb00',
  792. fill: 'transparent',
  793. lineWidth: 1.5,
  794. },
  795. silent: true,
  796. };
  797. },
  798. data: [0],
  799. },
  800. {
  801. name: 'ring5',
  802. type: 'custom',
  803. coordinateSystem: 'none',
  804. renderItem: function (params, api) {
  805. return {
  806. type: 'arc',
  807. shape: {
  808. cx: api.getWidth() / 2,
  809. cy: api.getHeight() / 2,
  810. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  811. startAngle: ((270 + -angle) * Math.PI) / 180,
  812. endAngle: ((40 + -angle) * Math.PI) / 180,
  813. },
  814. style: {
  815. stroke: '#0CD3DB',
  816. fill: 'transparent',
  817. lineWidth: 1.5,
  818. },
  819. silent: true,
  820. };
  821. },
  822. data: [0],
  823. },
  824. {
  825. name: 'ring5',
  826. type: 'custom',
  827. coordinateSystem: 'none',
  828. renderItem: function (params, api) {
  829. return {
  830. type: 'arc',
  831. shape: {
  832. cx: api.getWidth() / 2,
  833. cy: api.getHeight() / 2,
  834. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  835. startAngle: ((90 + -angle) * Math.PI) / 180,
  836. endAngle: ((220 + -angle) * Math.PI) / 180,
  837. },
  838. style: {
  839. stroke: '#0CD3DB',
  840. fill: 'transparent',
  841. lineWidth: 1.5,
  842. },
  843. silent: true,
  844. };
  845. },
  846. data: [0],
  847. },
  848. {
  849. name: 'ring5',
  850. type: 'custom',
  851. coordinateSystem: 'none',
  852. renderItem: function (params, api) {
  853. let x0 = api.getWidth() / 2;
  854. let y0 = api.getHeight() / 2;
  855. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  856. let point = getCirlPoint(x0, y0, r, 90 + -angle);
  857. return {
  858. type: 'circle',
  859. shape: {
  860. cx: point.x,
  861. cy: point.y,
  862. r: 4,
  863. },
  864. style: {
  865. stroke: '#0CD3DB', //粉
  866. fill: '#0CD3DB',
  867. },
  868. silent: true,
  869. };
  870. },
  871. data: [0],
  872. },
  873. {
  874. name: 'ring5', //绿点
  875. type: 'custom',
  876. coordinateSystem: 'none',
  877. renderItem: function (params, api) {
  878. let x0 = api.getWidth() / 2;
  879. let y0 = api.getHeight() / 2;
  880. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  881. let point = getCirlPoint(x0, y0, r, 270 + -angle);
  882. return {
  883. type: 'circle',
  884. shape: {
  885. cx: point.x,
  886. cy: point.y,
  887. r: 4,
  888. },
  889. style: {
  890. stroke: '#0CD3DB', //绿
  891. fill: '#0CD3DB',
  892. },
  893. silent: true,
  894. };
  895. },
  896. data: [0],
  897. },
  898. {
  899. radius: ['50%', '65%'],
  900. name: '',
  901. type: 'pie',
  902. selectedOffset: 16,
  903. startAngle: 90,
  904. z: 3,
  905. labelLine: {
  906. normal: {
  907. length: 15,
  908. length2: 22,
  909. lineStyle: {
  910. width: 2
  911. }
  912. }
  913. },
  914. label: {
  915. normal: {
  916. textStyle: {
  917. fontSize: 14
  918. },
  919. formatter: function (params) {
  920. return params.name + '\n' + params.value
  921. }
  922. }
  923. },
  924. data: dataArr
  925. }]
  926. };
  927. myChart.setOption(option, true);
  928. if (option) {
  929. myChart.setOption(option);
  930. }
  931. //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度)
  932. function getCirlPoint(x0, y0, r, angle) {
  933. let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  934. let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  935. return {
  936. x: x1,
  937. y: y1,
  938. };
  939. }
  940. function draw() {
  941. angle = angle + 3;
  942. myChart.setOption(option, true);
  943. //window.requestAnimationFrame(draw);
  944. }
  945. setInterval(function () {
  946. //用setInterval做动画感觉有问题
  947. draw();
  948. }, 100);
  949. },
  950. qkq_zjz2_2() {
  951. var myChart = echarts.init(document.getElementById('qkq_zjz2_2'));
  952. let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  953. let yData = [6, 79, 82, 33, 22, 89, 94, 18, 49, 92, 20, 31]
  954. let barData = [58, 22, 30, 26, 90, 74, 48, 13, 28, 1, 39, 61]
  955. function calMax(arr) {
  956. let max = 0;
  957. arr.forEach((el) => {
  958. el.forEach((el1) => {
  959. if (!(el1 === undefined || el1 === '')) {
  960. if (Number(max) < Number(el1)) {
  961. max = Number(el1);
  962. }
  963. }
  964. })
  965. })
  966. let maxint = Math.ceil(max / 9.5);
  967. //不让最高的值超过最上面的刻度
  968. let maxval = maxint * 10;
  969. //让显示的刻度是整数
  970. return maxval;
  971. }
  972. var max = Math.ceil(calMax([yData]) / 50) * 50;
  973. var max1 = Math.ceil(calMax([barData]) / 50) * 50;
  974. var option = {
  975. legend: {
  976. left: '1%',
  977. textStyle: {
  978. color: "#fff",
  979. fontSize: 12
  980. },
  981. },
  982. grid: {
  983. left: '1%',
  984. top: 60,
  985. right: 0,
  986. bottom: 0,
  987. containLabel: true
  988. },
  989. tooltip: {
  990. trigger: 'axis'
  991. },
  992. xAxis: {
  993. data: xData,
  994. axisTick: {
  995. show: false
  996. },
  997. axisLabel: {
  998. color: 'rgba(204, 234, 255, 1)'
  999. },
  1000. axisLine: {
  1001. lineStyle: {
  1002. color: 'rgba(18, 255, 255, 0.5)'
  1003. }
  1004. }
  1005. },
  1006. yAxis: [{
  1007. max: max1,
  1008. name: '2024年',
  1009. nameTextStyle: {
  1010. align: 'left',
  1011. color: 'rgba(204, 234, 255, 1)'
  1012. },
  1013. axisLabel: {
  1014. color: 'rgba(204, 234, 255, 1)'
  1015. },
  1016. axisTick: {
  1017. show: false
  1018. },
  1019. axisLine: {
  1020. show: false
  1021. },
  1022. splitLine: {
  1023. lineStyle: {
  1024. type: 'dashed',
  1025. color: 'rgba(18, 255, 255, 0.5)'
  1026. }
  1027. }
  1028. }, {
  1029. max: max,
  1030. name: '2023年',
  1031. position: 'right',
  1032. nameTextStyle: {
  1033. align: 'right',
  1034. color: 'rgba(204, 234, 255, 1)'
  1035. },
  1036. axisLabel: {
  1037. color: 'rgba(204, 234, 255, 1)'
  1038. },
  1039. axisTick: {
  1040. show: false
  1041. },
  1042. axisLine: {
  1043. show: false
  1044. },
  1045. splitLine: {
  1046. lineStyle: {
  1047. type: 'dashed',
  1048. color: 'rgba(18, 255, 255, 0.5)'
  1049. }
  1050. }
  1051. }],
  1052. series: [{
  1053. name: '2024年',
  1054. type: 'bar',
  1055. data: barData,
  1056. barWidth: 10,
  1057. yAxisIndex: 0,
  1058. itemStyle: {
  1059. normal: {
  1060. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1061. offset: 0,
  1062. color: '#1D82FF'
  1063. }, {
  1064. offset: 1,
  1065. color: '#00FFF6'
  1066. }]),
  1067. barBorderRadius: [4, 4, 0, 0]
  1068. }
  1069. }
  1070. }, {
  1071. name: '2023年',
  1072. type: 'line',
  1073. data: yData,
  1074. yAxisIndex: 1,
  1075. smooth: true,
  1076. symbol: 'none',
  1077. itemStyle: {
  1078. normal: {
  1079. lineStyle: {
  1080. color: {
  1081. // 两端添加透明度,模拟两端线收缩
  1082. colorStops: [{
  1083. offset: 0,
  1084. color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
  1085. }, {
  1086. offset: 0.2,
  1087. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  1088. }, {
  1089. offset: 0.8,
  1090. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  1091. }, {
  1092. offset: 1,
  1093. color: 'rgba(255, 227, 168, 0)'
  1094. }]
  1095. },
  1096. shadowColor: 'rgba(255, 120, 0, 1)',
  1097. shadowBlur: 8
  1098. },
  1099. areaStyle: {
  1100. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1101. offset: 0,
  1102. color: 'rgba(197, 106, 255, 0.6)'
  1103. }, {
  1104. offset: 0.6,
  1105. color: 'rgba(255, 120, 0, 0)'
  1106. }]),
  1107. }
  1108. }
  1109. }
  1110. },
  1111. {
  1112. type: 'lines',
  1113. coordinateSystem: 'cartesian2d',
  1114. data: barData.map((item, index) => {
  1115. return {
  1116. coords: [
  1117. [index, 0],
  1118. [index, item - 4]
  1119. ]
  1120. };
  1121. }),
  1122. effect: {
  1123. show: true,
  1124. period: 2.5,
  1125. trailLength: 0.5, //控制拖尾长度
  1126. symbolSize: [15, 2],
  1127. symbol: this.$store.state.common.echarts_baseStreamer,
  1128. loop: true,
  1129. color: '#fff' //流光颜色
  1130. },
  1131. lineStyle: {
  1132. width: 0,
  1133. opacity: 0.6,
  1134. curveness: 0
  1135. },
  1136. z: 999
  1137. },]
  1138. };
  1139. if (option) {
  1140. myChart.setOption(option);
  1141. }
  1142. },
  1143. qkq_zjz1_3() {
  1144. //一汽红旗项目服务局
  1145. var myChart = echarts.init(document.getElementById('qkq_zjz1_3'));
  1146. let angle = 0; //角度,用来做简单的动画效果的
  1147. var data = [{
  1148. value: "16",
  1149. itemStyle: {
  1150. color: "#ffbf00"
  1151. }
  1152. },
  1153. {
  1154. value: "100",
  1155. itemStyle: {
  1156. color: "#fc465"
  1157. }
  1158. }
  1159. ];
  1160. var dataTotal = Number(data[1].value) + Number(data[0].value)
  1161. var dataArr = [{
  1162. value: Number(data[0].value),
  1163. name: '增加值',
  1164. itemStyle: {
  1165. normal: {
  1166. color: "#5a98ed"
  1167. }
  1168. }
  1169. }, {
  1170. value: Number(data[1].value),
  1171. name: '总数',
  1172. itemStyle: {
  1173. normal: {
  1174. color: "#1a3b72"
  1175. }
  1176. }
  1177. }]
  1178. var option = {
  1179. title: [{
  1180. text: '工业增加值',
  1181. left: '49%',
  1182. top: '40%',
  1183. textAlign: 'center',
  1184. textBaseline: 'middle',
  1185. textStyle: {
  1186. color: '#66b1ff',
  1187. fontWeight: 'normal',
  1188. fontSize: 16
  1189. }
  1190. }, {
  1191. text: Math.floor((data[1].value / dataTotal) * 100) + '%',
  1192. left: '49%',
  1193. top: '55%',
  1194. textAlign: 'center',
  1195. textBaseline: 'middle',
  1196. textStyle: {
  1197. color: '#ffff00',
  1198. fontWeight: 'normal',
  1199. fontSize: 18
  1200. }
  1201. }],
  1202. series: [
  1203. {
  1204. name: 'ring5',
  1205. type: 'custom',
  1206. coordinateSystem: 'none',
  1207. renderItem: function (params, api) {
  1208. return {
  1209. type: 'arc',
  1210. shape: {
  1211. cx: api.getWidth() / 2,
  1212. cy: api.getHeight() / 2,
  1213. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  1214. startAngle: ((0 + angle) * Math.PI) / 180,
  1215. endAngle: ((90 + angle) * Math.PI) / 180,
  1216. },
  1217. style: {
  1218. stroke: '#fddb00',
  1219. fill: 'transparent',
  1220. lineWidth: 1.5,
  1221. },
  1222. silent: true,
  1223. };
  1224. },
  1225. data: [0],
  1226. },
  1227. {
  1228. name: 'ring5',
  1229. type: 'custom',
  1230. coordinateSystem: 'none',
  1231. renderItem: function (params, api) {
  1232. return {
  1233. type: 'arc',
  1234. shape: {
  1235. cx: api.getWidth() / 2,
  1236. cy: api.getHeight() / 2,
  1237. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  1238. startAngle: ((180 + angle) * Math.PI) / 180,
  1239. endAngle: ((270 + angle) * Math.PI) / 180,
  1240. },
  1241. style: {
  1242. stroke: '#fddb00',
  1243. fill: 'transparent',
  1244. lineWidth: 1.5,
  1245. },
  1246. silent: true,
  1247. };
  1248. },
  1249. data: [0],
  1250. },
  1251. {
  1252. name: 'ring5',
  1253. type: 'custom',
  1254. coordinateSystem: 'none',
  1255. renderItem: function (params, api) {
  1256. return {
  1257. type: 'arc',
  1258. shape: {
  1259. cx: api.getWidth() / 2,
  1260. cy: api.getHeight() / 2,
  1261. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  1262. startAngle: ((270 + -angle) * Math.PI) / 180,
  1263. endAngle: ((40 + -angle) * Math.PI) / 180,
  1264. },
  1265. style: {
  1266. stroke: '#0CD3DB',
  1267. fill: 'transparent',
  1268. lineWidth: 1.5,
  1269. },
  1270. silent: true,
  1271. };
  1272. },
  1273. data: [0],
  1274. },
  1275. {
  1276. name: 'ring5',
  1277. type: 'custom',
  1278. coordinateSystem: 'none',
  1279. renderItem: function (params, api) {
  1280. return {
  1281. type: 'arc',
  1282. shape: {
  1283. cx: api.getWidth() / 2,
  1284. cy: api.getHeight() / 2,
  1285. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  1286. startAngle: ((90 + -angle) * Math.PI) / 180,
  1287. endAngle: ((220 + -angle) * Math.PI) / 180,
  1288. },
  1289. style: {
  1290. stroke: '#0CD3DB',
  1291. fill: 'transparent',
  1292. lineWidth: 1.5,
  1293. },
  1294. silent: true,
  1295. };
  1296. },
  1297. data: [0],
  1298. },
  1299. {
  1300. name: 'ring5',
  1301. type: 'custom',
  1302. coordinateSystem: 'none',
  1303. renderItem: function (params, api) {
  1304. let x0 = api.getWidth() / 2;
  1305. let y0 = api.getHeight() / 2;
  1306. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  1307. let point = getCirlPoint(x0, y0, r, 90 + -angle);
  1308. return {
  1309. type: 'circle',
  1310. shape: {
  1311. cx: point.x,
  1312. cy: point.y,
  1313. r: 4,
  1314. },
  1315. style: {
  1316. stroke: '#0CD3DB', //粉
  1317. fill: '#0CD3DB',
  1318. },
  1319. silent: true,
  1320. };
  1321. },
  1322. data: [0],
  1323. },
  1324. {
  1325. name: 'ring5', //绿点
  1326. type: 'custom',
  1327. coordinateSystem: 'none',
  1328. renderItem: function (params, api) {
  1329. let x0 = api.getWidth() / 2;
  1330. let y0 = api.getHeight() / 2;
  1331. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  1332. let point = getCirlPoint(x0, y0, r, 270 + -angle);
  1333. return {
  1334. type: 'circle',
  1335. shape: {
  1336. cx: point.x,
  1337. cy: point.y,
  1338. r: 4,
  1339. },
  1340. style: {
  1341. stroke: '#0CD3DB', //绿
  1342. fill: '#0CD3DB',
  1343. },
  1344. silent: true,
  1345. };
  1346. },
  1347. data: [0],
  1348. },
  1349. {
  1350. radius: ['50%', '65%'],
  1351. name: '',
  1352. type: 'pie',
  1353. selectedOffset: 16,
  1354. startAngle: 90,
  1355. z: 3,
  1356. labelLine: {
  1357. normal: {
  1358. length: 15,
  1359. length2: 22,
  1360. lineStyle: {
  1361. width: 2
  1362. }
  1363. }
  1364. },
  1365. label: {
  1366. normal: {
  1367. textStyle: {
  1368. fontSize: 14
  1369. },
  1370. formatter: function (params) {
  1371. return params.name + '\n' + params.value
  1372. }
  1373. }
  1374. },
  1375. data: dataArr
  1376. }]
  1377. };
  1378. myChart.setOption(option, true);
  1379. if (option) {
  1380. myChart.setOption(option);
  1381. }
  1382. //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度)
  1383. function getCirlPoint(x0, y0, r, angle) {
  1384. let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  1385. let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  1386. return {
  1387. x: x1,
  1388. y: y1,
  1389. };
  1390. }
  1391. function draw() {
  1392. angle = angle + 3;
  1393. myChart.setOption(option, true);
  1394. //window.requestAnimationFrame(draw);
  1395. }
  1396. setInterval(function () {
  1397. //用setInterval做动画感觉有问题
  1398. draw();
  1399. }, 100);
  1400. },
  1401. qkq_zjz2_3() {
  1402. var myChart = echarts.init(document.getElementById('qkq_zjz2_3'));
  1403. let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  1404. let yData = [21, 56, 40, 30, 90, 86, 45, 66, 79, 68, 89, 99]
  1405. let barData = [65, 69, 61, 14, 52, 7, 74, 76, 72, 16, 77, 62]
  1406. function calMax(arr) {
  1407. let max = 0;
  1408. arr.forEach((el) => {
  1409. el.forEach((el1) => {
  1410. if (!(el1 === undefined || el1 === '')) {
  1411. if (Number(max) < Number(el1)) {
  1412. max = Number(el1);
  1413. }
  1414. }
  1415. })
  1416. })
  1417. let maxint = Math.ceil(max / 9.5);
  1418. //不让最高的值超过最上面的刻度
  1419. let maxval = maxint * 10;
  1420. //让显示的刻度是整数
  1421. return maxval;
  1422. }
  1423. var max = Math.ceil(calMax([yData]) / 50) * 50;
  1424. var max1 = Math.ceil(calMax([barData]) / 50) * 50;
  1425. var option = {
  1426. legend: {
  1427. left: '1%',
  1428. textStyle: {
  1429. color: "#fff",
  1430. fontSize: 12
  1431. },
  1432. },
  1433. grid: {
  1434. left: '1%',
  1435. top: 60,
  1436. right: 0,
  1437. bottom: 0,
  1438. containLabel: true
  1439. },
  1440. tooltip: {
  1441. trigger: 'axis'
  1442. },
  1443. xAxis: {
  1444. data: xData,
  1445. axisTick: {
  1446. show: false
  1447. },
  1448. axisLabel: {
  1449. color: 'rgba(204, 234, 255, 1)'
  1450. },
  1451. axisLine: {
  1452. lineStyle: {
  1453. color: 'rgba(18, 255, 255, 0.5)'
  1454. }
  1455. }
  1456. },
  1457. yAxis: [{
  1458. max: max1,
  1459. name: '2024年',
  1460. nameTextStyle: {
  1461. align: 'left',
  1462. color: 'rgba(204, 234, 255, 1)'
  1463. },
  1464. axisLabel: {
  1465. color: 'rgba(204, 234, 255, 1)'
  1466. },
  1467. axisTick: {
  1468. show: false
  1469. },
  1470. axisLine: {
  1471. show: false
  1472. },
  1473. splitLine: {
  1474. lineStyle: {
  1475. type: 'dashed',
  1476. color: 'rgba(18, 255, 255, 0.5)'
  1477. }
  1478. }
  1479. }, {
  1480. max: max,
  1481. name: '2023年',
  1482. position: 'right',
  1483. nameTextStyle: {
  1484. align: 'right',
  1485. color: 'rgba(204, 234, 255, 1)'
  1486. },
  1487. axisLabel: {
  1488. color: 'rgba(204, 234, 255, 1)'
  1489. },
  1490. axisTick: {
  1491. show: false
  1492. },
  1493. axisLine: {
  1494. show: false
  1495. },
  1496. splitLine: {
  1497. lineStyle: {
  1498. type: 'dashed',
  1499. color: 'rgba(18, 255, 255, 0.5)'
  1500. }
  1501. }
  1502. }],
  1503. series: [{
  1504. name: '2024年',
  1505. type: 'bar',
  1506. data: barData,
  1507. barWidth: 10,
  1508. yAxisIndex: 0,
  1509. itemStyle: {
  1510. normal: {
  1511. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1512. offset: 0,
  1513. color: '#1D82FF'
  1514. }, {
  1515. offset: 1,
  1516. color: '#00FFF6'
  1517. }]),
  1518. barBorderRadius: [4, 4, 0, 0]
  1519. }
  1520. }
  1521. }, {
  1522. name: '2023年',
  1523. type: 'line',
  1524. data: yData,
  1525. yAxisIndex: 1,
  1526. smooth: true,
  1527. symbol: 'none',
  1528. itemStyle: {
  1529. normal: {
  1530. lineStyle: {
  1531. color: {
  1532. // 两端添加透明度,模拟两端线收缩
  1533. colorStops: [{
  1534. offset: 0,
  1535. color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
  1536. }, {
  1537. offset: 0.2,
  1538. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  1539. }, {
  1540. offset: 0.8,
  1541. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  1542. }, {
  1543. offset: 1,
  1544. color: 'rgba(255, 227, 168, 0)'
  1545. }]
  1546. },
  1547. shadowColor: 'rgba(255, 120, 0, 1)',
  1548. shadowBlur: 8
  1549. },
  1550. areaStyle: {
  1551. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1552. offset: 0,
  1553. color: 'rgba(197, 106, 255, 0.6)'
  1554. }, {
  1555. offset: 0.6,
  1556. color: 'rgba(255, 120, 0, 0)'
  1557. }]),
  1558. }
  1559. }
  1560. }
  1561. },
  1562. {
  1563. type: 'lines',
  1564. coordinateSystem: 'cartesian2d',
  1565. data: barData.map((item, index) => {
  1566. return {
  1567. coords: [
  1568. [index, 0],
  1569. [index, item - 4]
  1570. ]
  1571. };
  1572. }),
  1573. effect: {
  1574. show: true,
  1575. period: 2.5,
  1576. trailLength: 0.5, //控制拖尾长度
  1577. symbolSize: [15, 2],
  1578. symbol: this.$store.state.common.echarts_baseStreamer,
  1579. loop: true,
  1580. color: '#fff' //流光颜色
  1581. },
  1582. lineStyle: {
  1583. width: 0,
  1584. opacity: 0.6,
  1585. curveness: 0
  1586. },
  1587. z: 999
  1588. },]
  1589. };
  1590. if (option) {
  1591. myChart.setOption(option);
  1592. }
  1593. },
  1594. qkq_zjz1_4() {
  1595. //一汽红旗项目服务局
  1596. var myChart = echarts.init(document.getElementById('qkq_zjz1_4'));
  1597. let angle = 0; //角度,用来做简单的动画效果的
  1598. var data = [{
  1599. value: "26",
  1600. itemStyle: {
  1601. color: "#ffbf00"
  1602. }
  1603. },
  1604. {
  1605. value: "100",
  1606. itemStyle: {
  1607. color: "#fc465"
  1608. }
  1609. }
  1610. ];
  1611. var dataTotal = Number(data[1].value) + Number(data[0].value)
  1612. var dataArr = [{
  1613. value: Number(data[0].value),
  1614. name: '增加值',
  1615. itemStyle: {
  1616. normal: {
  1617. color: "#5a98ed"
  1618. }
  1619. }
  1620. }, {
  1621. value: Number(data[1].value),
  1622. name: '总数',
  1623. itemStyle: {
  1624. normal: {
  1625. color: "#1a3b72"
  1626. }
  1627. }
  1628. }]
  1629. var option = {
  1630. title: [{
  1631. text: '工业增加值',
  1632. left: '49%',
  1633. top: '40%',
  1634. textAlign: 'center',
  1635. textBaseline: 'middle',
  1636. textStyle: {
  1637. color: '#66b1ff',
  1638. fontWeight: 'normal',
  1639. fontSize: 16
  1640. }
  1641. }, {
  1642. text: Math.floor((data[1].value / dataTotal) * 100) + '%',
  1643. left: '49%',
  1644. top: '55%',
  1645. textAlign: 'center',
  1646. textBaseline: 'middle',
  1647. textStyle: {
  1648. color: '#ffff00',
  1649. fontWeight: 'normal',
  1650. fontSize: 18
  1651. }
  1652. }],
  1653. series: [
  1654. {
  1655. name: 'ring5',
  1656. type: 'custom',
  1657. coordinateSystem: 'none',
  1658. renderItem: function (params, api) {
  1659. return {
  1660. type: 'arc',
  1661. shape: {
  1662. cx: api.getWidth() / 2,
  1663. cy: api.getHeight() / 2,
  1664. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  1665. startAngle: ((0 + angle) * Math.PI) / 180,
  1666. endAngle: ((90 + angle) * Math.PI) / 180,
  1667. },
  1668. style: {
  1669. stroke: '#fddb00',
  1670. fill: 'transparent',
  1671. lineWidth: 1.5,
  1672. },
  1673. silent: true,
  1674. };
  1675. },
  1676. data: [0],
  1677. },
  1678. {
  1679. name: 'ring5',
  1680. type: 'custom',
  1681. coordinateSystem: 'none',
  1682. renderItem: function (params, api) {
  1683. return {
  1684. type: 'arc',
  1685. shape: {
  1686. cx: api.getWidth() / 2,
  1687. cy: api.getHeight() / 2,
  1688. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  1689. startAngle: ((180 + angle) * Math.PI) / 180,
  1690. endAngle: ((270 + angle) * Math.PI) / 180,
  1691. },
  1692. style: {
  1693. stroke: '#fddb00',
  1694. fill: 'transparent',
  1695. lineWidth: 1.5,
  1696. },
  1697. silent: true,
  1698. };
  1699. },
  1700. data: [0],
  1701. },
  1702. {
  1703. name: 'ring5',
  1704. type: 'custom',
  1705. coordinateSystem: 'none',
  1706. renderItem: function (params, api) {
  1707. return {
  1708. type: 'arc',
  1709. shape: {
  1710. cx: api.getWidth() / 2,
  1711. cy: api.getHeight() / 2,
  1712. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  1713. startAngle: ((270 + -angle) * Math.PI) / 180,
  1714. endAngle: ((40 + -angle) * Math.PI) / 180,
  1715. },
  1716. style: {
  1717. stroke: '#0CD3DB',
  1718. fill: 'transparent',
  1719. lineWidth: 1.5,
  1720. },
  1721. silent: true,
  1722. };
  1723. },
  1724. data: [0],
  1725. },
  1726. {
  1727. name: 'ring5',
  1728. type: 'custom',
  1729. coordinateSystem: 'none',
  1730. renderItem: function (params, api) {
  1731. return {
  1732. type: 'arc',
  1733. shape: {
  1734. cx: api.getWidth() / 2,
  1735. cy: api.getHeight() / 2,
  1736. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  1737. startAngle: ((90 + -angle) * Math.PI) / 180,
  1738. endAngle: ((220 + -angle) * Math.PI) / 180,
  1739. },
  1740. style: {
  1741. stroke: '#0CD3DB',
  1742. fill: 'transparent',
  1743. lineWidth: 1.5,
  1744. },
  1745. silent: true,
  1746. };
  1747. },
  1748. data: [0],
  1749. },
  1750. {
  1751. name: 'ring5',
  1752. type: 'custom',
  1753. coordinateSystem: 'none',
  1754. renderItem: function (params, api) {
  1755. let x0 = api.getWidth() / 2;
  1756. let y0 = api.getHeight() / 2;
  1757. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  1758. let point = getCirlPoint(x0, y0, r, 90 + -angle);
  1759. return {
  1760. type: 'circle',
  1761. shape: {
  1762. cx: point.x,
  1763. cy: point.y,
  1764. r: 4,
  1765. },
  1766. style: {
  1767. stroke: '#0CD3DB', //粉
  1768. fill: '#0CD3DB',
  1769. },
  1770. silent: true,
  1771. };
  1772. },
  1773. data: [0],
  1774. },
  1775. {
  1776. name: 'ring5', //绿点
  1777. type: 'custom',
  1778. coordinateSystem: 'none',
  1779. renderItem: function (params, api) {
  1780. let x0 = api.getWidth() / 2;
  1781. let y0 = api.getHeight() / 2;
  1782. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  1783. let point = getCirlPoint(x0, y0, r, 270 + -angle);
  1784. return {
  1785. type: 'circle',
  1786. shape: {
  1787. cx: point.x,
  1788. cy: point.y,
  1789. r: 4,
  1790. },
  1791. style: {
  1792. stroke: '#0CD3DB', //绿
  1793. fill: '#0CD3DB',
  1794. },
  1795. silent: true,
  1796. };
  1797. },
  1798. data: [0],
  1799. },
  1800. {
  1801. radius: ['50%', '65%'],
  1802. name: '',
  1803. type: 'pie',
  1804. selectedOffset: 16,
  1805. startAngle: 90,
  1806. z: 3,
  1807. labelLine: {
  1808. normal: {
  1809. length: 15,
  1810. length2: 22,
  1811. lineStyle: {
  1812. width: 2
  1813. }
  1814. }
  1815. },
  1816. label: {
  1817. normal: {
  1818. textStyle: {
  1819. fontSize: 14
  1820. },
  1821. formatter: function (params) {
  1822. return params.name + '\n' + params.value
  1823. }
  1824. }
  1825. },
  1826. data: dataArr
  1827. }]
  1828. };
  1829. myChart.setOption(option, true);
  1830. if (option) {
  1831. myChart.setOption(option);
  1832. }
  1833. //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度)
  1834. function getCirlPoint(x0, y0, r, angle) {
  1835. let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  1836. let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  1837. return {
  1838. x: x1,
  1839. y: y1,
  1840. };
  1841. }
  1842. function draw() {
  1843. angle = angle + 3;
  1844. myChart.setOption(option, true);
  1845. //window.requestAnimationFrame(draw);
  1846. }
  1847. setInterval(function () {
  1848. //用setInterval做动画感觉有问题
  1849. draw();
  1850. }, 100);
  1851. },
  1852. qkq_zjz2_4() {
  1853. var myChart = echarts.init(document.getElementById('qkq_zjz2_4'));
  1854. let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  1855. let yData = [71, 59, 57, 12, 1, 25, 48, 85, 96, 79, 60, 21]
  1856. let barData = [50, 13, 87, 51, 91, 32, 77, 81, 11, 45, 93, 62]
  1857. function calMax(arr) {
  1858. let max = 0;
  1859. arr.forEach((el) => {
  1860. el.forEach((el1) => {
  1861. if (!(el1 === undefined || el1 === '')) {
  1862. if (Number(max) < Number(el1)) {
  1863. max = Number(el1);
  1864. }
  1865. }
  1866. })
  1867. })
  1868. let maxint = Math.ceil(max / 9.5);
  1869. //不让最高的值超过最上面的刻度
  1870. let maxval = maxint * 10;
  1871. //让显示的刻度是整数
  1872. return maxval;
  1873. }
  1874. var max = Math.ceil(calMax([yData]) / 50) * 50;
  1875. var max1 = Math.ceil(calMax([barData]) / 50) * 50;
  1876. var option = {
  1877. legend: {
  1878. left: '1%',
  1879. textStyle: {
  1880. color: "#fff",
  1881. fontSize: 12
  1882. },
  1883. },
  1884. grid: {
  1885. left: '1%',
  1886. top: 60,
  1887. right: 0,
  1888. bottom: 0,
  1889. containLabel: true
  1890. },
  1891. tooltip: {
  1892. trigger: 'axis'
  1893. },
  1894. xAxis: {
  1895. data: xData,
  1896. axisTick: {
  1897. show: false
  1898. },
  1899. axisLabel: {
  1900. color: 'rgba(204, 234, 255, 1)'
  1901. },
  1902. axisLine: {
  1903. lineStyle: {
  1904. color: 'rgba(18, 255, 255, 0.5)'
  1905. }
  1906. }
  1907. },
  1908. yAxis: [{
  1909. max: max1,
  1910. name: '2024年',
  1911. nameTextStyle: {
  1912. align: 'left',
  1913. color: 'rgba(204, 234, 255, 1)'
  1914. },
  1915. axisLabel: {
  1916. color: 'rgba(204, 234, 255, 1)'
  1917. },
  1918. axisTick: {
  1919. show: false
  1920. },
  1921. axisLine: {
  1922. show: false
  1923. },
  1924. splitLine: {
  1925. lineStyle: {
  1926. type: 'dashed',
  1927. color: 'rgba(18, 255, 255, 0.5)'
  1928. }
  1929. }
  1930. }, {
  1931. max: max,
  1932. name: '2023年',
  1933. position: 'right',
  1934. nameTextStyle: {
  1935. align: 'right',
  1936. color: 'rgba(204, 234, 255, 1)'
  1937. },
  1938. axisLabel: {
  1939. color: 'rgba(204, 234, 255, 1)'
  1940. },
  1941. axisTick: {
  1942. show: false
  1943. },
  1944. axisLine: {
  1945. show: false
  1946. },
  1947. splitLine: {
  1948. lineStyle: {
  1949. type: 'dashed',
  1950. color: 'rgba(18, 255, 255, 0.5)'
  1951. }
  1952. }
  1953. }],
  1954. series: [{
  1955. name: '2024年',
  1956. type: 'bar',
  1957. data: barData,
  1958. barWidth: 10,
  1959. yAxisIndex: 0,
  1960. itemStyle: {
  1961. normal: {
  1962. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1963. offset: 0,
  1964. color: '#1D82FF'
  1965. }, {
  1966. offset: 1,
  1967. color: '#00FFF6'
  1968. }]),
  1969. barBorderRadius: [4, 4, 0, 0]
  1970. }
  1971. }
  1972. }, {
  1973. name: '2023年',
  1974. type: 'line',
  1975. data: yData,
  1976. yAxisIndex: 1,
  1977. smooth: true,
  1978. symbol: 'none',
  1979. itemStyle: {
  1980. normal: {
  1981. lineStyle: {
  1982. color: {
  1983. // 两端添加透明度,模拟两端线收缩
  1984. colorStops: [{
  1985. offset: 0,
  1986. color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
  1987. }, {
  1988. offset: 0.2,
  1989. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  1990. }, {
  1991. offset: 0.8,
  1992. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  1993. }, {
  1994. offset: 1,
  1995. color: 'rgba(255, 227, 168, 0)'
  1996. }]
  1997. },
  1998. shadowColor: 'rgba(255, 120, 0, 1)',
  1999. shadowBlur: 8
  2000. },
  2001. areaStyle: {
  2002. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2003. offset: 0,
  2004. color: 'rgba(197, 106, 255, 0.6)'
  2005. }, {
  2006. offset: 0.6,
  2007. color: 'rgba(255, 120, 0, 0)'
  2008. }]),
  2009. }
  2010. }
  2011. }
  2012. },
  2013. {
  2014. type: 'lines',
  2015. coordinateSystem: 'cartesian2d',
  2016. data: barData.map((item, index) => {
  2017. return {
  2018. coords: [
  2019. [index, 0],
  2020. [index, item - 4]
  2021. ]
  2022. };
  2023. }),
  2024. effect: {
  2025. show: true,
  2026. period: 2.5,
  2027. trailLength: 0.5, //控制拖尾长度
  2028. symbolSize: [15, 2],
  2029. symbol: this.$store.state.common.echarts_baseStreamer,
  2030. loop: true,
  2031. color: '#fff' //流光颜色
  2032. },
  2033. lineStyle: {
  2034. width: 0,
  2035. opacity: 0.6,
  2036. curveness: 0
  2037. },
  2038. z: 999
  2039. },]
  2040. };
  2041. if (option) {
  2042. myChart.setOption(option);
  2043. }
  2044. },
  2045. qkq_zjz1_5() {
  2046. //一汽红旗项目服务局
  2047. var myChart = echarts.init(document.getElementById('qkq_zjz1_5'));
  2048. let angle = 0; //角度,用来做简单的动画效果的
  2049. var data = [{
  2050. value: "18",
  2051. itemStyle: {
  2052. color: "#ffbf00"
  2053. }
  2054. },
  2055. {
  2056. value: "100",
  2057. itemStyle: {
  2058. color: "#fc465"
  2059. }
  2060. }
  2061. ];
  2062. var dataTotal = Number(data[1].value) + Number(data[0].value)
  2063. var dataArr = [{
  2064. value: Number(data[0].value),
  2065. name: '增加值',
  2066. itemStyle: {
  2067. normal: {
  2068. color: "#5a98ed"
  2069. }
  2070. }
  2071. }, {
  2072. value: Number(data[1].value),
  2073. name: '总数',
  2074. itemStyle: {
  2075. normal: {
  2076. color: "#1a3b72"
  2077. }
  2078. }
  2079. }]
  2080. var option = {
  2081. title: [{
  2082. text: '工业增加值',
  2083. left: '49%',
  2084. top: '40%',
  2085. textAlign: 'center',
  2086. textBaseline: 'middle',
  2087. textStyle: {
  2088. color: '#66b1ff',
  2089. fontWeight: 'normal',
  2090. fontSize: 16
  2091. }
  2092. }, {
  2093. text: Math.floor((data[1].value / dataTotal) * 100) + '%',
  2094. left: '49%',
  2095. top: '55%',
  2096. textAlign: 'center',
  2097. textBaseline: 'middle',
  2098. textStyle: {
  2099. color: '#ffff00',
  2100. fontWeight: 'normal',
  2101. fontSize: 18
  2102. }
  2103. }],
  2104. series: [
  2105. {
  2106. name: 'ring5',
  2107. type: 'custom',
  2108. coordinateSystem: 'none',
  2109. renderItem: function (params, api) {
  2110. return {
  2111. type: 'arc',
  2112. shape: {
  2113. cx: api.getWidth() / 2,
  2114. cy: api.getHeight() / 2,
  2115. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  2116. startAngle: ((0 + angle) * Math.PI) / 180,
  2117. endAngle: ((90 + angle) * Math.PI) / 180,
  2118. },
  2119. style: {
  2120. stroke: '#fddb00',
  2121. fill: 'transparent',
  2122. lineWidth: 1.5,
  2123. },
  2124. silent: true,
  2125. };
  2126. },
  2127. data: [0],
  2128. },
  2129. {
  2130. name: 'ring5',
  2131. type: 'custom',
  2132. coordinateSystem: 'none',
  2133. renderItem: function (params, api) {
  2134. return {
  2135. type: 'arc',
  2136. shape: {
  2137. cx: api.getWidth() / 2,
  2138. cy: api.getHeight() / 2,
  2139. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  2140. startAngle: ((180 + angle) * Math.PI) / 180,
  2141. endAngle: ((270 + angle) * Math.PI) / 180,
  2142. },
  2143. style: {
  2144. stroke: '#fddb00',
  2145. fill: 'transparent',
  2146. lineWidth: 1.5,
  2147. },
  2148. silent: true,
  2149. };
  2150. },
  2151. data: [0],
  2152. },
  2153. {
  2154. name: 'ring5',
  2155. type: 'custom',
  2156. coordinateSystem: 'none',
  2157. renderItem: function (params, api) {
  2158. return {
  2159. type: 'arc',
  2160. shape: {
  2161. cx: api.getWidth() / 2,
  2162. cy: api.getHeight() / 2,
  2163. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  2164. startAngle: ((270 + -angle) * Math.PI) / 180,
  2165. endAngle: ((40 + -angle) * Math.PI) / 180,
  2166. },
  2167. style: {
  2168. stroke: '#0CD3DB',
  2169. fill: 'transparent',
  2170. lineWidth: 1.5,
  2171. },
  2172. silent: true,
  2173. };
  2174. },
  2175. data: [0],
  2176. },
  2177. {
  2178. name: 'ring5',
  2179. type: 'custom',
  2180. coordinateSystem: 'none',
  2181. renderItem: function (params, api) {
  2182. return {
  2183. type: 'arc',
  2184. shape: {
  2185. cx: api.getWidth() / 2,
  2186. cy: api.getHeight() / 2,
  2187. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  2188. startAngle: ((90 + -angle) * Math.PI) / 180,
  2189. endAngle: ((220 + -angle) * Math.PI) / 180,
  2190. },
  2191. style: {
  2192. stroke: '#0CD3DB',
  2193. fill: 'transparent',
  2194. lineWidth: 1.5,
  2195. },
  2196. silent: true,
  2197. };
  2198. },
  2199. data: [0],
  2200. },
  2201. {
  2202. name: 'ring5',
  2203. type: 'custom',
  2204. coordinateSystem: 'none',
  2205. renderItem: function (params, api) {
  2206. let x0 = api.getWidth() / 2;
  2207. let y0 = api.getHeight() / 2;
  2208. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  2209. let point = getCirlPoint(x0, y0, r, 90 + -angle);
  2210. return {
  2211. type: 'circle',
  2212. shape: {
  2213. cx: point.x,
  2214. cy: point.y,
  2215. r: 4,
  2216. },
  2217. style: {
  2218. stroke: '#0CD3DB', //粉
  2219. fill: '#0CD3DB',
  2220. },
  2221. silent: true,
  2222. };
  2223. },
  2224. data: [0],
  2225. },
  2226. {
  2227. name: 'ring5', //绿点
  2228. type: 'custom',
  2229. coordinateSystem: 'none',
  2230. renderItem: function (params, api) {
  2231. let x0 = api.getWidth() / 2;
  2232. let y0 = api.getHeight() / 2;
  2233. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  2234. let point = getCirlPoint(x0, y0, r, 270 + -angle);
  2235. return {
  2236. type: 'circle',
  2237. shape: {
  2238. cx: point.x,
  2239. cy: point.y,
  2240. r: 4,
  2241. },
  2242. style: {
  2243. stroke: '#0CD3DB', //绿
  2244. fill: '#0CD3DB',
  2245. },
  2246. silent: true,
  2247. };
  2248. },
  2249. data: [0],
  2250. },
  2251. {
  2252. radius: ['50%', '65%'],
  2253. name: '',
  2254. type: 'pie',
  2255. selectedOffset: 16,
  2256. startAngle: 90,
  2257. z: 3,
  2258. labelLine: {
  2259. normal: {
  2260. length: 15,
  2261. length2: 22,
  2262. lineStyle: {
  2263. width: 2
  2264. }
  2265. }
  2266. },
  2267. label: {
  2268. normal: {
  2269. textStyle: {
  2270. fontSize: 14
  2271. },
  2272. formatter: function (params) {
  2273. return params.name + '\n' + params.value
  2274. }
  2275. }
  2276. },
  2277. data: dataArr
  2278. }]
  2279. };
  2280. myChart.setOption(option, true);
  2281. if (option) {
  2282. myChart.setOption(option);
  2283. }
  2284. //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度)
  2285. function getCirlPoint(x0, y0, r, angle) {
  2286. let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  2287. let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  2288. return {
  2289. x: x1,
  2290. y: y1,
  2291. };
  2292. }
  2293. function draw() {
  2294. angle = angle + 3;
  2295. myChart.setOption(option, true);
  2296. //window.requestAnimationFrame(draw);
  2297. }
  2298. setInterval(function () {
  2299. //用setInterval做动画感觉有问题
  2300. draw();
  2301. }, 100);
  2302. },
  2303. qkq_zjz2_5() {
  2304. var myChart = echarts.init(document.getElementById('qkq_zjz2_5'));
  2305. let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  2306. let yData = [52, 56, 10, 9, 55, 0, 38, 76, 5, 100, 87, 54]
  2307. let barData = [7, 50, 26, 9, 66, 24, 46, 93, 41, 64, 4, 68]
  2308. function calMax(arr) {
  2309. let max = 0;
  2310. arr.forEach((el) => {
  2311. el.forEach((el1) => {
  2312. if (!(el1 === undefined || el1 === '')) {
  2313. if (Number(max) < Number(el1)) {
  2314. max = Number(el1);
  2315. }
  2316. }
  2317. })
  2318. })
  2319. let maxint = Math.ceil(max / 9.5);
  2320. //不让最高的值超过最上面的刻度
  2321. let maxval = maxint * 10;
  2322. //让显示的刻度是整数
  2323. return maxval;
  2324. }
  2325. var max = Math.ceil(calMax([yData]) / 50) * 50;
  2326. var max1 = Math.ceil(calMax([barData]) / 50) * 50;
  2327. var option = {
  2328. legend: {
  2329. left: '1%',
  2330. textStyle: {
  2331. color: "#fff",
  2332. fontSize: 12
  2333. },
  2334. },
  2335. grid: {
  2336. left: '1%',
  2337. top: 60,
  2338. right: 0,
  2339. bottom: 0,
  2340. containLabel: true
  2341. },
  2342. tooltip: {
  2343. trigger: 'axis'
  2344. },
  2345. xAxis: {
  2346. data: xData,
  2347. axisTick: {
  2348. show: false
  2349. },
  2350. axisLabel: {
  2351. color: 'rgba(204, 234, 255, 1)'
  2352. },
  2353. axisLine: {
  2354. lineStyle: {
  2355. color: 'rgba(18, 255, 255, 0.5)'
  2356. }
  2357. }
  2358. },
  2359. yAxis: [{
  2360. max: max1,
  2361. name: '2024年',
  2362. nameTextStyle: {
  2363. align: 'left',
  2364. color: 'rgba(204, 234, 255, 1)'
  2365. },
  2366. axisLabel: {
  2367. color: 'rgba(204, 234, 255, 1)'
  2368. },
  2369. axisTick: {
  2370. show: false
  2371. },
  2372. axisLine: {
  2373. show: false
  2374. },
  2375. splitLine: {
  2376. lineStyle: {
  2377. type: 'dashed',
  2378. color: 'rgba(18, 255, 255, 0.5)'
  2379. }
  2380. }
  2381. }, {
  2382. max: max,
  2383. name: '2023年',
  2384. position: 'right',
  2385. nameTextStyle: {
  2386. align: 'right',
  2387. color: 'rgba(204, 234, 255, 1)'
  2388. },
  2389. axisLabel: {
  2390. color: 'rgba(204, 234, 255, 1)'
  2391. },
  2392. axisTick: {
  2393. show: false
  2394. },
  2395. axisLine: {
  2396. show: false
  2397. },
  2398. splitLine: {
  2399. lineStyle: {
  2400. type: 'dashed',
  2401. color: 'rgba(18, 255, 255, 0.5)'
  2402. }
  2403. }
  2404. }],
  2405. series: [{
  2406. name: '2024年',
  2407. type: 'bar',
  2408. data: barData,
  2409. barWidth: 10,
  2410. yAxisIndex: 0,
  2411. itemStyle: {
  2412. normal: {
  2413. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2414. offset: 0,
  2415. color: '#1D82FF'
  2416. }, {
  2417. offset: 1,
  2418. color: '#00FFF6'
  2419. }]),
  2420. barBorderRadius: [4, 4, 0, 0]
  2421. }
  2422. }
  2423. }, {
  2424. name: '2023年',
  2425. type: 'line',
  2426. data: yData,
  2427. yAxisIndex: 1,
  2428. smooth: true,
  2429. symbol: 'none',
  2430. itemStyle: {
  2431. normal: {
  2432. lineStyle: {
  2433. color: {
  2434. // 两端添加透明度,模拟两端线收缩
  2435. colorStops: [{
  2436. offset: 0,
  2437. color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
  2438. }, {
  2439. offset: 0.2,
  2440. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  2441. }, {
  2442. offset: 0.8,
  2443. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  2444. }, {
  2445. offset: 1,
  2446. color: 'rgba(255, 227, 168, 0)'
  2447. }]
  2448. },
  2449. shadowColor: 'rgba(255, 120, 0, 1)',
  2450. shadowBlur: 8
  2451. },
  2452. areaStyle: {
  2453. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2454. offset: 0,
  2455. color: 'rgba(197, 106, 255, 0.6)'
  2456. }, {
  2457. offset: 0.6,
  2458. color: 'rgba(255, 120, 0, 0)'
  2459. }]),
  2460. }
  2461. }
  2462. }
  2463. },
  2464. {
  2465. type: 'lines',
  2466. coordinateSystem: 'cartesian2d',
  2467. data: barData.map((item, index) => {
  2468. return {
  2469. coords: [
  2470. [index, 0],
  2471. [index, item - 4]
  2472. ]
  2473. };
  2474. }),
  2475. effect: {
  2476. show: true,
  2477. period: 2.5,
  2478. trailLength: 0.5, //控制拖尾长度
  2479. symbolSize: [15, 2],
  2480. symbol: this.$store.state.common.echarts_baseStreamer,
  2481. loop: true,
  2482. color: '#fff' //流光颜色
  2483. },
  2484. lineStyle: {
  2485. width: 0,
  2486. opacity: 0.6,
  2487. curveness: 0
  2488. },
  2489. z: 999
  2490. },]
  2491. };
  2492. if (option) {
  2493. myChart.setOption(option);
  2494. }
  2495. },
  2496. qkq_zjz1_6() {
  2497. //一汽红旗项目服务局
  2498. var myChart = echarts.init(document.getElementById('qkq_zjz1_6'));
  2499. let angle = 0; //角度,用来做简单的动画效果的
  2500. var data = [{
  2501. value: "9",
  2502. itemStyle: {
  2503. color: "#ffbf00"
  2504. }
  2505. },
  2506. {
  2507. value: "100",
  2508. itemStyle: {
  2509. color: "#fc465"
  2510. }
  2511. }
  2512. ];
  2513. var dataTotal = Number(data[1].value) + Number(data[0].value)
  2514. var dataArr = [{
  2515. value: Number(data[0].value),
  2516. name: '增加值',
  2517. itemStyle: {
  2518. normal: {
  2519. color: "#5a98ed"
  2520. }
  2521. }
  2522. }, {
  2523. value: Number(data[1].value),
  2524. name: '总数',
  2525. itemStyle: {
  2526. normal: {
  2527. color: "#1a3b72"
  2528. }
  2529. }
  2530. }]
  2531. var option = {
  2532. title: [{
  2533. text: '工业增加值',
  2534. left: '49%',
  2535. top: '40%',
  2536. textAlign: 'center',
  2537. textBaseline: 'middle',
  2538. textStyle: {
  2539. color: '#66b1ff',
  2540. fontWeight: 'normal',
  2541. fontSize: 16
  2542. }
  2543. }, {
  2544. text: Math.floor((data[1].value / dataTotal) * 100) + '%',
  2545. left: '49%',
  2546. top: '55%',
  2547. textAlign: 'center',
  2548. textBaseline: 'middle',
  2549. textStyle: {
  2550. color: '#ffff00',
  2551. fontWeight: 'normal',
  2552. fontSize: 18
  2553. }
  2554. }],
  2555. series: [
  2556. {
  2557. name: 'ring5',
  2558. type: 'custom',
  2559. coordinateSystem: 'none',
  2560. renderItem: function (params, api) {
  2561. return {
  2562. type: 'arc',
  2563. shape: {
  2564. cx: api.getWidth() / 2,
  2565. cy: api.getHeight() / 2,
  2566. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  2567. startAngle: ((0 + angle) * Math.PI) / 180,
  2568. endAngle: ((90 + angle) * Math.PI) / 180,
  2569. },
  2570. style: {
  2571. stroke: '#fddb00',
  2572. fill: 'transparent',
  2573. lineWidth: 1.5,
  2574. },
  2575. silent: true,
  2576. };
  2577. },
  2578. data: [0],
  2579. },
  2580. {
  2581. name: 'ring5',
  2582. type: 'custom',
  2583. coordinateSystem: 'none',
  2584. renderItem: function (params, api) {
  2585. return {
  2586. type: 'arc',
  2587. shape: {
  2588. cx: api.getWidth() / 2,
  2589. cy: api.getHeight() / 2,
  2590. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
  2591. startAngle: ((180 + angle) * Math.PI) / 180,
  2592. endAngle: ((270 + angle) * Math.PI) / 180,
  2593. },
  2594. style: {
  2595. stroke: '#fddb00',
  2596. fill: 'transparent',
  2597. lineWidth: 1.5,
  2598. },
  2599. silent: true,
  2600. };
  2601. },
  2602. data: [0],
  2603. },
  2604. {
  2605. name: 'ring5',
  2606. type: 'custom',
  2607. coordinateSystem: 'none',
  2608. renderItem: function (params, api) {
  2609. return {
  2610. type: 'arc',
  2611. shape: {
  2612. cx: api.getWidth() / 2,
  2613. cy: api.getHeight() / 2,
  2614. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  2615. startAngle: ((270 + -angle) * Math.PI) / 180,
  2616. endAngle: ((40 + -angle) * Math.PI) / 180,
  2617. },
  2618. style: {
  2619. stroke: '#0CD3DB',
  2620. fill: 'transparent',
  2621. lineWidth: 1.5,
  2622. },
  2623. silent: true,
  2624. };
  2625. },
  2626. data: [0],
  2627. },
  2628. {
  2629. name: 'ring5',
  2630. type: 'custom',
  2631. coordinateSystem: 'none',
  2632. renderItem: function (params, api) {
  2633. return {
  2634. type: 'arc',
  2635. shape: {
  2636. cx: api.getWidth() / 2,
  2637. cy: api.getHeight() / 2,
  2638. r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
  2639. startAngle: ((90 + -angle) * Math.PI) / 180,
  2640. endAngle: ((220 + -angle) * Math.PI) / 180,
  2641. },
  2642. style: {
  2643. stroke: '#0CD3DB',
  2644. fill: 'transparent',
  2645. lineWidth: 1.5,
  2646. },
  2647. silent: true,
  2648. };
  2649. },
  2650. data: [0],
  2651. },
  2652. {
  2653. name: 'ring5',
  2654. type: 'custom',
  2655. coordinateSystem: 'none',
  2656. renderItem: function (params, api) {
  2657. let x0 = api.getWidth() / 2;
  2658. let y0 = api.getHeight() / 2;
  2659. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  2660. let point = getCirlPoint(x0, y0, r, 90 + -angle);
  2661. return {
  2662. type: 'circle',
  2663. shape: {
  2664. cx: point.x,
  2665. cy: point.y,
  2666. r: 4,
  2667. },
  2668. style: {
  2669. stroke: '#0CD3DB', //粉
  2670. fill: '#0CD3DB',
  2671. },
  2672. silent: true,
  2673. };
  2674. },
  2675. data: [0],
  2676. },
  2677. {
  2678. name: 'ring5', //绿点
  2679. type: 'custom',
  2680. coordinateSystem: 'none',
  2681. renderItem: function (params, api) {
  2682. let x0 = api.getWidth() / 2;
  2683. let y0 = api.getHeight() / 2;
  2684. let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
  2685. let point = getCirlPoint(x0, y0, r, 270 + -angle);
  2686. return {
  2687. type: 'circle',
  2688. shape: {
  2689. cx: point.x,
  2690. cy: point.y,
  2691. r: 4,
  2692. },
  2693. style: {
  2694. stroke: '#0CD3DB', //绿
  2695. fill: '#0CD3DB',
  2696. },
  2697. silent: true,
  2698. };
  2699. },
  2700. data: [0],
  2701. },
  2702. {
  2703. radius: ['50%', '65%'],
  2704. name: '',
  2705. type: 'pie',
  2706. selectedOffset: 16,
  2707. startAngle: 90,
  2708. z: 3,
  2709. labelLine: {
  2710. normal: {
  2711. length: 15,
  2712. length2: 22,
  2713. lineStyle: {
  2714. width: 2
  2715. }
  2716. }
  2717. },
  2718. label: {
  2719. normal: {
  2720. textStyle: {
  2721. fontSize: 14
  2722. },
  2723. formatter: function (params) {
  2724. return params.name + '\n' + params.value
  2725. }
  2726. }
  2727. },
  2728. data: dataArr
  2729. }]
  2730. };
  2731. myChart.setOption(option, true);
  2732. if (option) {
  2733. myChart.setOption(option);
  2734. }
  2735. //获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度)
  2736. function getCirlPoint(x0, y0, r, angle) {
  2737. let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  2738. let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  2739. return {
  2740. x: x1,
  2741. y: y1,
  2742. };
  2743. }
  2744. function draw() {
  2745. angle = angle + 3;
  2746. myChart.setOption(option, true);
  2747. //window.requestAnimationFrame(draw);
  2748. }
  2749. setInterval(function () {
  2750. //用setInterval做动画感觉有问题
  2751. draw();
  2752. }, 100);
  2753. },
  2754. qkq_zjz2_6() {
  2755. var myChart = echarts.init(document.getElementById('qkq_zjz2_6'));
  2756. let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  2757. let yData = [85, 82, 11, 45, 30, 98, 30, 9, 27, 67, 18, 71]
  2758. let barData = [12, 75, 81, 96, 8, 24, 71, 43, 54, 51, 52, 92]
  2759. function calMax(arr) {
  2760. let max = 0;
  2761. arr.forEach((el) => {
  2762. el.forEach((el1) => {
  2763. if (!(el1 === undefined || el1 === '')) {
  2764. if (Number(max) < Number(el1)) {
  2765. max = Number(el1);
  2766. }
  2767. }
  2768. })
  2769. })
  2770. let maxint = Math.ceil(max / 9.5);
  2771. //不让最高的值超过最上面的刻度
  2772. let maxval = maxint * 10;
  2773. //让显示的刻度是整数
  2774. return maxval;
  2775. }
  2776. var max = Math.ceil(calMax([yData]) / 50) * 50;
  2777. var max1 = Math.ceil(calMax([barData]) / 50) * 50;
  2778. var option = {
  2779. legend: {
  2780. left: '1%',
  2781. textStyle: {
  2782. color: "#fff",
  2783. fontSize: 12
  2784. },
  2785. },
  2786. grid: {
  2787. left: '1%',
  2788. top: 60,
  2789. right: 0,
  2790. bottom: 0,
  2791. containLabel: true
  2792. },
  2793. tooltip: {
  2794. trigger: 'axis'
  2795. },
  2796. xAxis: {
  2797. data: xData,
  2798. axisTick: {
  2799. show: false
  2800. },
  2801. axisLabel: {
  2802. color: 'rgba(204, 234, 255, 1)'
  2803. },
  2804. axisLine: {
  2805. lineStyle: {
  2806. color: 'rgba(18, 255, 255, 0.5)'
  2807. }
  2808. }
  2809. },
  2810. yAxis: [{
  2811. max: max1,
  2812. name: '2024年',
  2813. nameTextStyle: {
  2814. align: 'left',
  2815. color: 'rgba(204, 234, 255, 1)'
  2816. },
  2817. axisLabel: {
  2818. color: 'rgba(204, 234, 255, 1)'
  2819. },
  2820. axisTick: {
  2821. show: false
  2822. },
  2823. axisLine: {
  2824. show: false
  2825. },
  2826. splitLine: {
  2827. lineStyle: {
  2828. type: 'dashed',
  2829. color: 'rgba(18, 255, 255, 0.5)'
  2830. }
  2831. }
  2832. }, {
  2833. max: max,
  2834. name: '2023年',
  2835. position: 'right',
  2836. nameTextStyle: {
  2837. align: 'right',
  2838. color: 'rgba(204, 234, 255, 1)'
  2839. },
  2840. axisLabel: {
  2841. color: 'rgba(204, 234, 255, 1)'
  2842. },
  2843. axisTick: {
  2844. show: false
  2845. },
  2846. axisLine: {
  2847. show: false
  2848. },
  2849. splitLine: {
  2850. lineStyle: {
  2851. type: 'dashed',
  2852. color: 'rgba(18, 255, 255, 0.5)'
  2853. }
  2854. }
  2855. }],
  2856. series: [{
  2857. name: '2024年',
  2858. type: 'bar',
  2859. data: barData,
  2860. barWidth: 10,
  2861. yAxisIndex: 0,
  2862. itemStyle: {
  2863. normal: {
  2864. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2865. offset: 0,
  2866. color: '#1D82FF'
  2867. }, {
  2868. offset: 1,
  2869. color: '#00FFF6'
  2870. }]),
  2871. barBorderRadius: [4, 4, 0, 0]
  2872. }
  2873. }
  2874. }, {
  2875. name: '2023年',
  2876. type: 'line',
  2877. data: yData,
  2878. yAxisIndex: 1,
  2879. smooth: true,
  2880. symbol: 'none',
  2881. itemStyle: {
  2882. normal: {
  2883. lineStyle: {
  2884. color: {
  2885. // 两端添加透明度,模拟两端线收缩
  2886. colorStops: [{
  2887. offset: 0,
  2888. color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
  2889. }, {
  2890. offset: 0.2,
  2891. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  2892. }, {
  2893. offset: 0.8,
  2894. color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
  2895. }, {
  2896. offset: 1,
  2897. color: 'rgba(255, 227, 168, 0)'
  2898. }]
  2899. },
  2900. shadowColor: 'rgba(255, 120, 0, 1)',
  2901. shadowBlur: 8
  2902. },
  2903. areaStyle: {
  2904. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2905. offset: 0,
  2906. color: 'rgba(197, 106, 255, 0.6)'
  2907. }, {
  2908. offset: 0.6,
  2909. color: 'rgba(255, 120, 0, 0)'
  2910. }]),
  2911. }
  2912. }
  2913. }
  2914. },
  2915. {
  2916. type: 'lines',
  2917. coordinateSystem: 'cartesian2d',
  2918. data: barData.map((item, index) => {
  2919. return {
  2920. coords: [
  2921. [index, 0],
  2922. [index, item - 4]
  2923. ]
  2924. };
  2925. }),
  2926. effect: {
  2927. show: true,
  2928. period: 2.5,
  2929. trailLength: 0.5, //控制拖尾长度
  2930. symbolSize: [15, 2],
  2931. symbol: this.$store.state.common.echarts_baseStreamer,
  2932. loop: true,
  2933. color: '#fff' //流光颜色
  2934. },
  2935. lineStyle: {
  2936. width: 0,
  2937. opacity: 0.6,
  2938. curveness: 0
  2939. },
  2940. z: 999
  2941. },]
  2942. };
  2943. if (option) {
  2944. myChart.setOption(option);
  2945. }
  2946. },
  2947. qkq_jdt() {
  2948. var myChart = echarts.init(document.getElementById('qkq_jdt'));
  2949. //亮色图片
  2950. var uploadedDataURL1 = "/asset/get/s/4CJ7_TCzJkXXblRL.png";
  2951. var uploadedDataURL2 = "/asset/get/s/QekC70YLG_BZZXae.png";
  2952. var baifenbi = [0.456, 0.544, 0.655, 0.277, 0.788, 0.222];
  2953. var grayBar = [1, 1, 1, 1, 1, 1];
  2954. var paiming = [6, 5, 4, 3, 2, 1];
  2955. var zongjine = [3000, 4000, 5000, 7000, 12000, 8000];
  2956. var xingm = ['地区生产值', '工业增加值', '进出口总值', '民间投资额', '固定资产投资额', '一般公共预算收入'];
  2957. var option = {
  2958. color: ['#61A8FF'], //进度条颜色
  2959. grid: {
  2960. left: '2%', //如果离左边太远就用这个......
  2961. right: '0%',
  2962. bottom: '-15%',
  2963. top: '5%',
  2964. containLabel: true
  2965. },
  2966. xAxis: [
  2967. {
  2968. show: false,
  2969. },
  2970. //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
  2971. {
  2972. show: false,
  2973. }
  2974. ],
  2975. yAxis: {
  2976. type: 'category',
  2977. axisLabel: {
  2978. show: false, //让Y轴数据不显示
  2979. },
  2980. itemStyle: {},
  2981. axisTick: {
  2982. show: false, //隐藏Y轴刻度
  2983. },
  2984. axisLine: {
  2985. show: false, //隐藏Y轴线段
  2986. },
  2987. data: xingm,
  2988. },
  2989. series: [
  2990. //背景色--------------------我是分割线君------------------------------//
  2991. {
  2992. show: true,
  2993. type: 'bar',
  2994. barGap: '-100%',
  2995. barWidth: '40%', //统计条宽度
  2996. itemStyle: {
  2997. normal: {
  2998. color: 'rgba(56,112,252,0.17)'
  2999. },
  3000. },
  3001. z: 1,
  3002. data: grayBar,
  3003. },
  3004. //蓝条--------------------我是分割线君------------------------------//
  3005. {
  3006. show: true,
  3007. type: 'bar',
  3008. barGap: '-100%',
  3009. barWidth: '40%', //统计条宽度
  3010. itemStyle: {
  3011. normal: {
  3012. color: {
  3013. type: 'bar',
  3014. colorStops: [{
  3015. offset: 0,
  3016. color: '#39A7FC' // 0% 处的颜色
  3017. }, {
  3018. offset: 1,
  3019. color: '#00FBFF' // 100% 处的颜色
  3020. }],
  3021. globalCoord: false, // 缺省为 false
  3022. }
  3023. },
  3024. },
  3025. max: 1,
  3026. label: {
  3027. normal: {
  3028. show: true,
  3029. textStyle: {
  3030. color: '#b73838', //百分比颜色
  3031. },
  3032. position: 'inside',
  3033. //百分比格式
  3034. formatter: function (data) {
  3035. return (baifenbi[data.dataIndex] * 100).toFixed(1) + '%';
  3036. },
  3037. }
  3038. },
  3039. labelLine: {
  3040. show: false,
  3041. },
  3042. z: 2,
  3043. data: baifenbi,
  3044. },
  3045. //数据条--------------------我是分割线君------------------------------//
  3046. {
  3047. show: true,
  3048. type: 'bar',
  3049. xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
  3050. barGap: '-100%',
  3051. barWidth: '35%', //统计条宽度
  3052. itemStyle: {
  3053. normal: {
  3054. barBorderRadius: 200,
  3055. color: 'rgba(22,203,115,0.05)'
  3056. },
  3057. },
  3058. label: {
  3059. normal: {
  3060. show: true,
  3061. //label 的position位置可以是top bottom left,right,也可以是固定值
  3062. //在这里需要上下统一对齐,所以用固定值
  3063. position: ['0', '-130%'],
  3064. rich: { //富文本
  3065. white: { //自定义颜色
  3066. color: '#ffffff',
  3067. },
  3068. start1: {
  3069. backgroundColor: {
  3070. image: uploadedDataURL1,
  3071. }
  3072. },
  3073. start2: {
  3074. backgroundColor: { //这里可以添加你想自定义的图片
  3075. image: uploadedDataURL2,
  3076. },
  3077. },
  3078. green: {
  3079. color: '#70DDA7',
  3080. },
  3081. yellow: {
  3082. color: '#CCB877',
  3083. },
  3084. red: {
  3085. color: '#BC3C47',
  3086. },
  3087. gray: {
  3088. color: '#727CBA'
  3089. }
  3090. },
  3091. formatter: function (data) {
  3092. //富文本固定格式{colorName|这里填你想要写的内容}
  3093. if (paiming[data.dataIndex] == 1) {
  3094. return '{start1|}{red|' + paiming[data.dataIndex] + ' ' + xingm[data.dataIndex] + '}' + ' ' + '{white| 经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
  3095. } else if (paiming[data.dataIndex] == 2) {
  3096. return '{start1|}{yellow|' + paiming[data.dataIndex] + ' ' + xingm[data.dataIndex] + '}' + ' ' + '{white| 经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
  3097. } else if (paiming[data.dataIndex] == 3) {
  3098. return '{start1|}{green|' + paiming[data.dataIndex] + ' ' + xingm[data.dataIndex] + '}' + ' ' + '{white| 经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
  3099. } else {
  3100. return '{start2|}{white|' + paiming[data.dataIndex] + ' ' + xingm[data.dataIndex] + '}' + ' ' + '{white| 经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
  3101. }
  3102. },
  3103. }
  3104. },
  3105. data: zongjine
  3106. },
  3107. {
  3108. type: 'lines',
  3109. coordinateSystem: 'cartesian2d',
  3110. data: baifenbi.map((item, index) => {
  3111. return {
  3112. coords: [
  3113. [0, index],
  3114. [item, index],
  3115. ]
  3116. };
  3117. }),
  3118. effect: {
  3119. show: true,
  3120. period: 5,
  3121. trailLength: 0.5, //控制拖尾长度
  3122. symbolSize: [15, 2],
  3123. symbol: this.$store.state.common.echarts_baseStreamer,
  3124. loop: true,
  3125. color: '#fff' //流光颜色
  3126. },
  3127. lineStyle: {
  3128. width: 0,
  3129. opacity: 0.6,
  3130. curveness: 0
  3131. },
  3132. z: 99
  3133. },
  3134. ]
  3135. };
  3136. if (option) {
  3137. myChart.setOption(option);
  3138. }
  3139. },
  3140. qkq_kxt() {
  3141. var myChart = echarts.init(document.getElementById('qkq_kxt'));
  3142. var option = {
  3143. legend: {
  3144. // right: '30',
  3145. data: ['今年', '去年'],
  3146. textStyle: {
  3147. color: "#fff",
  3148. fontSize: 16
  3149. },
  3150. },
  3151. grid: {
  3152. top: '14%',
  3153. bottom: '10%',
  3154. right: '30',
  3155. left: '30'
  3156. },
  3157. tooltip: {
  3158. trigger: 'axis',
  3159. formatter: function (p) {
  3160. if (p.seriesType === 'line') return '';
  3161. return `${p[0].name}<br/>${p[0].marker}计划:${p[0].value[1] + "-" + p[0].value[2]}万元<br/>${p[0].marker}实际:${p[0].value[3] + "-" + p[0].value[4]}万元`
  3162. }
  3163. },
  3164. xAxis: {
  3165. axisLabel: {
  3166. color: 'rgba(204, 234, 255, 1)'
  3167. },
  3168. axisLine: {
  3169. lineStyle: {
  3170. color: 'rgba(4, 38, 65, 0.5)'
  3171. }
  3172. },
  3173. data: [
  3174. '一月',
  3175. '二月',
  3176. '三月',
  3177. '四月',
  3178. '五月',
  3179. '六月',
  3180. '七月',
  3181. '八月',
  3182. '九月',
  3183. '十月',
  3184. '十一月',
  3185. '十二月'
  3186. ]
  3187. },
  3188. yAxis: {
  3189. type: 'value',
  3190. scale: true,
  3191. max: 12,
  3192. min: 0,
  3193. interval: 4,
  3194. axisLabel: {
  3195. color: 'rgba(204, 234, 255, 1)'
  3196. },
  3197. axisLine: {
  3198. lineStyle: {
  3199. color: 'rgba(4, 38, 65, 0.5)'
  3200. }
  3201. },
  3202. },
  3203. series: [
  3204. {
  3205. name: "今年",
  3206. type: 'candlestick',
  3207. itemStyle: {
  3208. color: '#1D82FF',
  3209. color0: '#1D82FF',
  3210. borderColor: '#1D82FF',
  3211. borderColor0: '#1D82FF'
  3212. },
  3213. data: [
  3214. [0, 0, 0, 0],
  3215. [0, 0, 0, 0],
  3216. [3, 4, 2, 5],
  3217. [4, 6, 3, 7],
  3218. [7, 9, 5, 10],
  3219. [5, 8, 4, 9],
  3220. [6, 6.5, 5, 7.5],
  3221. [0, 0, 0, 0],
  3222. [6, 9, 5, 10],
  3223. [4, 6, 3, 7],
  3224. [5, 7, 4, 8],
  3225. [6, 9, 5, 10],
  3226. [6.5, 9, 5.5, 10],
  3227. ]
  3228. },
  3229. {
  3230. name: '去年',
  3231. type: 'line',
  3232. smooth: true,
  3233. data: [0, 0, 3, 6, 7, 5, 6, 0, 6, 4, 7, 9, 6.5],
  3234. itemStyle: {
  3235. color: '#ff0000'
  3236. },
  3237. lineStyle: {
  3238. color: '#ff0000'
  3239. },
  3240. z: 10
  3241. }
  3242. ]
  3243. };
  3244. if (option) {
  3245. myChart.setOption(option);
  3246. }
  3247. },
  3248. getCurrentTime() {
  3249. const now = new Date();
  3250. const year = now.getFullYear();
  3251. const month = now.getMonth() + 1;
  3252. const date = now.getDate();
  3253. const day = now.getDay();
  3254. const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  3255. const hour = now.getHours();
  3256. const minute = now.getMinutes();
  3257. const second = now.getSeconds();
  3258. const formattedMonth = month < 10 ? `0${month}` : month;
  3259. const formattedDate = date < 10 ? `0${date}` : date;
  3260. const formattedHour = hour < 10 ? `0${hour}` : hour;
  3261. const formattedMinute = minute < 10 ? `0${minute}` : minute;
  3262. const formattedSecond = second < 10 ? `0${second}` : second;
  3263. this.currentTime =
  3264. `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
  3265. },
  3266. }
  3267. };
  3268. // import '@/assets/images/leftnav.js';
  3269. $(function () {
  3270. var Accordion = function (el, multiple) {
  3271. this.el = el || {};
  3272. this.multiple = multiple || false;
  3273. // Variables privadas
  3274. var links = this.el.find('.link');
  3275. // Evento
  3276. links.on('click', {
  3277. el: this.el,
  3278. multiple: this.multiple
  3279. }, this.dropdown)
  3280. };
  3281. Accordion.prototype.dropdown = function (e) {
  3282. var $el = e.data.el;
  3283. let $this = $(this);
  3284. let $next = $this.next();
  3285. $next.slideToggle();
  3286. $this.parent().toggleClass('open');
  3287. if (!e.data.multiple) {
  3288. $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
  3289. }
  3290. };
  3291. var accordion = new Accordion($('#accordion'), false);
  3292. $('.submenu li').click(function () {
  3293. $(this).addClass('current').siblings('li').removeClass('current');
  3294. });
  3295. });
  3296. </script>
  3297. <style>
  3298. /* 添加你的CSS样式 */
  3299. </style>