let app = new Vue({ el: '#app', data () { return { count: 1, type: true, // 切换柱状图状态 showTip2: false, showTip3: false, timer2: '', echartTitle: '', year: '2022', time: '', timer: '', mapName: 'shanxi', geoCoordMap: {}, config1: { number: [100], content: '{nt}个', }, storageRecordConfig: { // waitTime: '2000000', header: ['企业集团', '项目名 ', '投资总额'], // headerBGC: '#05507b33', // oddRowBGC: '#05507b33', // evenRowBGC: '#05507b33', headerBGC: '#05183c', headerBGC: '#05507b33', oddRowBGC: '#05183c', evenRowBGC: '#05183c', rowNum: 4, align: ['center'], data: [ ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元 "], ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"], ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.01亿元 "], ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.66亿元 "], ['潞安化工', '分布式光伏发电项目', "2.00亿元 "], ['太重集团', '设立太重(大同)新能源产业投资公司', "0.3亿元 "], ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元 "], ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元 "], ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元 "], ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元 "], ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元 "], ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元 "], ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元 "], ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元 "] ], }, companyList: [ { name: '山西焦煤' }, { name: '晋能控股' }, { name: '华新燃气' }, { name: '山西建投' }, { name: '潞安化工' }, { name: '华远陆港' }, { name: '航产集团' }, { name: '大地控股' }, { name: '国新能源' }, { name: '汾酒集团' }, { name: '云时代' }, { name: '神农科技' }, { name: '华阳新材' }, { name: '华舰体育' }, { name: '交控集团' }, { name: '文旅集团' }, { name: '水控集团' }, { name: '太重集团' }, ], } }, created () { this.time = formatDate() this.timer = setInterval(() => { this.time = formatDate() }, 1000) this.timer2 = setInterval(() => { if (this.count < dataList.length) { this.count++ } else { this.count = 1 } this.initChartL3() }, 2000) }, beforeDestroy () { if (this.timer) { clearInterval(this.timer); } this.timer2 && clearInterval(this.timer2); }, mounted () { // 左侧图表 setTimeout(() => { this.initChartL1() this.initChartL2() this.initChartL3() this.initChartL4() this.initChartL5() this.initChartL6() this.initChartL7() this.initChartR1() this.initChartR2() this.initChartR3() this.initChartR6() },) setTimeout(() => { var swiper = new Swiper(".mySwiper", { pagination: { el: ".swiper-pagination", type: "progressbar", }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); swiper.el.onmouseout = function () { swiper.autoplay.start(); } }) }, methods: { convertData (data) { var res = [] for (var i = 0; i < data.length; i++) { var geoCoord = this.geoCoordMap[data[i].name] if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value), }) } } return res }, initChinaChart () { var data = [ { name: '吕梁市', value: 150 }, { name: '大同市', value: 190 }, { name: '忻州市', value: 140 }, { name: '朔州市', value: 160 }, { name: '晋中市', value: 100 }, { name: '太原市', value: 300 }, { name: '临汾市', value: 190 }, { name: '长治市', value: 100 }, { name: '晋城市', value: 280 }, { name: '运城市', value: 180 }, { name: '阳泉市', value: 110 }, ] var moveLine = { normal: [ { fromName: '太原市', toName: '吕梁市', coords: [ [112.3352, 37.9413], [111.3574, 37.7325], ], }, { fromName: '太原市', toName: '忻州市', coords: [ [112.3352, 37.9413], [112.4561, 38.8971], ], }, { fromName: '太原市', toName: '临汾市', coords: [ [112.3352, 37.9413], [111.4783, 36.1615], ], }, { fromName: '太原市', toName: '阳泉市', coords: [ [112.3352, 37.9413], [113.4778, 38.0951], ], }, { fromName: '太原市', toName: '晋中市', coords: [ [112.3352, 37.9413], [112.7747, 37.37], ], }, { fromName: '太原市', toName: '运城市', coords: [ [112.3352, 37.9413], [111.1487, 35.2002], ], }, { fromName: '太原市', toName: '大同市', coords: [ [112.3352, 37.9413], [113.7854, 39.8035], ], }, { fromName: '太原市', toName: '晋城市', coords: [ [112.3352, 37.9413], [112.7856, 35.6342], ], }, { fromName: '太原市', toName: '长治市', coords: [ [112.3352, 37.9413], [112.8625, 36.4746], ], }, { fromName: '太原市', toName: '朔州市', coords: [ [112.3352, 37.9413], [113.0713, 39.6991], ], }, ], } /*获取地图数据*/ let myChart = echarts.init(this.$refs['echarts-map']) echarts.registerMap('shanxi', { type: 'FeatureCollection', features: [ { type: 'Feature', id: '1409', properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 }, geometry: { type: 'Polygon', coordinates: [ '@@Vx@lnbn¦WlnnUšmš°š²VšV‚VVVnUn„ºlz@l„„@Jƒ@kXWVXl@Lƒa@„ƒKUL„ŽlbnKlLnK‚LnKÆXn°šbVV@bUVl°Un@LnaVJUbW@UX²l‚@ČwlVVIšWnkÆa°„„anV‚Kn°™UW¯@™aVUVk@Un@„aV@ValwUanmWU„k@WVUUanaVwnLVl°@nk@mVU@UVK@w„LVKVU@ƒ„K@UUKVUV@@bnL„a‚V„aôšlIXmlKX_°KVV@bVV„@šzV`kblI„V„Ul‚šL@bnV@V„Ċll„„VlIXW@k„a‚U²blKšVnIlJ„albXXlWVn°JnšnL@l@XlJlaX@„X˜W²@l_VmnKšU„blU@mnkVK„¯@U@ƒma@kX¥VƒmakkƒLƒa@aƒ@WIUUVXWWnk@a°a@kkm@kUUmJm@WUUUIk`m@V—kaWWkX™KmƒXk¯ƒ@WKƒLkak@±bƒw@ƒaƒa@akaƒ@ma¯@ƒL—KÇÅkKWbkmġ™±ÅUƒLUK™VVkƒm¯LUVVbƒ„UwUW¯bm„ƒULƒxWJ—@ƒklmkUm@@KnwVkVK@akwƒ@@a¯bƒKkn›VUI™b¯mmbk@UbmKUL@xUUƒ@klmLUŽlVXI‚VVVUVUœU`mLXVWbXnW`Ų°xmŽxU@mĉƒƒwU@mbU@UƒmbkVW¦kJ™@ƒX@`¯Im@UlUVVnb@bWJXnmbƒJUU™UUaƒ@UamIkaƒxƒ@@x@b', ], encodeOffsets: [[113614, 39657]], }, }, { type: 'Feature', id: '1411', properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 }, geometry: { type: 'Polygon', coordinates: [ '@@@a@w„@„wlbnJVb„@VbšVVV„InaWmXI@a‚aUmVUVkn@°J@_„Wš@lIX¥lUnaV„V@naV@„xĊ„n‚V@‚wn¯wƱX_WmXaWUnKV_V›VUUUUWJkUVnKlk¯™@@kmKUaŁ±KkU@WmI@WUIlUUmVwXƒ‚w@ƒUlUVwœV‚@„Lnb‚W@anU@UšaVkô@l»n@na˜JnUÈLVaƃUUVm„VKVƒ²L@mU_lK@UVWkU‚a@a@U¯aUaƒÑóÑUb™„ƒKk@@aƒk¯mVaUwVƒÑkWUmK@UUKmXUWÝwUa™LUU@aWJUUU@Ua݄U@WL@VKVaVI@WnU@alIVKƒƒ@kIƒmIkJ@™m@ƒ™@@_™K@xƒ@kaW@U„@Vmn@ŽUK@mIƒJUXV¤XXWlkKƒkkK@XmJVakImJU@ó™¯LWKUV@nUVƒLkxmKkLma@kXKmmƒLƒab™LmK@V@mXVÆUxƒX@`nL„aV@@VmLUVnLlLš˜„b@„šŽ°²nx@b‚VUxlb@V¯bUV@zV‚XVĊXVx@lVn@VnnmŽUš@LlJXVƒz¯VWVXbšV@bmn™VUVk„Çþń@XVxmbUlV„Uln„W„@„Xl‚@VLXÒ@bÞJ°¦„L˜ò„@nU‚b@°„X@ŽXbmVU„V„nb@x‚x', ], encodeOffsets: [[113614, 39657]], }, }, { type: 'Feature', id: '1410', properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 }, geometry: { type: 'Polygon', coordinates: [ '@@nW‚@@UnLšK‚a„b„KnnWL@lnblKnLlw„KVU@mVUXL°KôšV@nIlJUbnI@WlL„llLXkWWU£VW„InJ‚@VL@nm@UVƒX@lb„@@wšL@`‚@„šn@V@lw„@n„VmVX„WmwnUlƒœa@_lK„wVlUn°xVKVXXWlUšVVI@K@K„n°KœwlVlU@kna@V_„Wn‚m„UVm@kXml_@m„LlKXw°m@_ôJVUV@X™l@UaV@Va°I„lk»VwUkVmwUmmVn@V¯@KƒU—wmK@U¯wUVÝ@mJƒU—nWK™@@UnKVa„_lykUmKÛnm@™x@ƒUUlwVk™ƒXW@ƒa@Uƒ@@K@ƒkIV™nammVakUlƒ@wX@@kƒ™¯@ƒVVbml@„„°UbULmlVbnbÅK±VƒKVXUJWa@ULWaUU@@U@aWK@UkxUKƒLUUUJ±UkL@V±kk@kam@UV@l@LWl@n@VVUx„LlUUx@VUV™U@aƒIUl™L@°mLU‚ƒbkUUaWUUaUU@aWK—LWJ@bUL@VUVVbU@m@a@kmKmnĉlUK™XƒWUblb—xmIkƒƒU@xWb@lkšVx™LXŽmzVV@bklVVUzm˜@bk„@Vx@xlŽU„@lUbVnl@„Wxnl@n@ŽUbV„mL‚mƒb@`X@lUX@@xlnkLWaUJnnWV™Vn@l„@bULVV@l™V@XnJVX', ], encodeOffsets: [[113063, 37784]], }, }, { type: 'Feature', id: '1407', properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 }, geometry: { type: 'Polygon', coordinates: [ '@@@šlInJ„lJ„@‚„ULkJ@bmV@XUJUb‚L@UXKV@ރVbV@VVXI@bVVšKVbÞxVXnWVL@VnLV‚lX„ÒUŽVxUb°n„l@bl@„LšƒVaô҄ÒVb°b@VnLnnV@lmn@lb„U„V@„‚JœUVV‚Xkl@lUzmJ@xšXkl‚bUn„JVšUb„nU‚lb„V@nlLX@lakšV`Ub°š@XVJnU‚L²KlxnI@KV@lbUbVV„KnVl@„zlm@Uš@nŽšI@WUaVl@@mVU„@XkW@ƒnkVKVƒ„_Vw„y@knwVa‚@XalU„@šVnml@„X@V„L‚KVaÞbnnlJšI„mVKn„VVVInVlU„@„m@™mXK@UmyUI@mWUUakamw@wUwmLkakwVƒmK™w@wUam£y@am_ƒW@™UU@knmm„amU@WUa@knw@ƒUUUUV@nƒJm@mVUkKVUUUkKmwƒKULƒKUImV@lUn™nŽm@mbUK@°™bUnmbUmkkƒWUb@am@UXkK@a±@™V™@ĉř„V‚UXVxUVkLWl¯@@bULUlm@@nm`—XƒlWakIkm›VUbUL@Vm@kIƒ@@Kšm@—VaX‚I@W@aU@kUƒVU_™KƒbƒJkkǎ™b@nkKmL™wÅW@kVUUƒVU@WUIƒJmIXmma@_kyVaUUlkUm@ƒkU›x¯Lƒm@L@LUJ™UkVWXUWUL¯wVmUkƒxkL@`›bk„mVnxƒXUWUnmƒƒ@kxU@', ], encodeOffsets: [[114087, 37682]], }, }, { type: 'Feature', id: '1408', properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 }, geometry: { type: 'Polygon', coordinates: [ '@@„Vl„nJ˜wkaVa„XšWVLĊknmnL‚l@@bn‚V@UaVU@UVK@aXI˜KXL@bVVVbXVVblV„aVnK@¯šKVk„J@bšVVU@UVwkVƒKVwUUm@@Xk@K@kVUn@lbl@²l@UlK²VVIVV„KVLlw@VXL@b@VV@VŽXbVK‚@XbVIUW„L‚U²ÆLmaUankVKVaƒ¯@ƒnkUa„U°@„š‚n@@kWa„UVaXUW@IXKVw@U™ƒ„™WU@W@@UUƒU@mn@ƒ`m@UUULkUmJ™IUƒ@@UƒK@U@›anƒ™ak_@wmKUwmakV™kmK™V™k¯b™wƒ`kwUIÇx¯»ÇaŃmn@@™mƒmUkV@wkKW@kxmL™UkĉLÝk™xÝw¯lóVU„mV@ĀVVX¦W¤kz@`Vx°„²ĸ‚š@„Ul@x„êĸNJ°¤V„VlXLWnXxmV@nUl@„', ], encodeOffsets: [[113232, 36597]], }, }, { type: 'Feature', id: '1402', properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 }, geometry: { type: 'Polygon', coordinates: [ '@@²£šyl@Ȑ˜Ė@bĸŽĢbĸ„˜X„a‚KŤnn@ŎôllÈx„nVnÞDŽV@b‚nXllL°KšbVb@J@b—„‚„@ŽU„„xlKXLlKlXk„@Ulk„JlkUƒVKXUƒÇVIVm@_nǚLšašl‚w„VnU@UUwma@aƒaÝaLmUk@@Wƒ@U@@X™wVWÝUUUk@@VmLƒKV»nwUw™aUL@`mzƒJUIVƒUaUw™KUaVIlJôanÑlLVUn@ša„@VV„@@UUwVK°Vn_lJÆLœéW@UUUÅ@»lm@aÞIVwXW˜UUkkm@U@aƒU@mwU£VWU_kWmƒXwW_°yUkkK@UÇK@kkUVymóK—U@KWIƒbUak@mJ@bkbmLkŽ™UmƒkVU„W¦@lnb@„@Vƒ°ULml@nkVƒa™VmLUnk`±@—XƒWW@kbǦXŽ¯„WxI@xmbmxXlWV„„@bŎUz@J‚b@bÞb™ŽU@Wbk@ƒxk@WX¯VۙƒWÝbÝUkVUU@alI@a@akLWa™m@U¯UUmÇL@K@aU@¯VUkƒKmX@`@œkJ@nV‚Ub@lbVÆXVW„ULU`VbkLUV@XWl@bXJ˜@VbV@Vl', ], encodeOffsets: [[115335, 41209]], }, }, { type: 'Feature', id: '1404', properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 }, geometry: { type: 'Polygon', coordinates: [ '@@Uk™Lky@I‚JVa@mÞaWšy@_W@_WƒXVlUVwš@nw°K@m„UƒVaƒmVkU@mmmnLVUmKXa™U@IlKVUnK@UmWkX@WV_Vƒ@akU@a„KWIXyƒIUVmUn™Ua@WaXUVKVmkUWVkUƒLU@@VƒbƒKbƒIUmƒ@mbVL—x›WUUkn±V¯wƒbÅJUbmLkbmKÅKƒbVnUbƒV™KUb™KUbmLKmƒb™aƒKkUm@UŽnn‚VnxUVlUxl¼ƒk¯JUbU@Vbk@WšU@UVóI@`¯nWxkLƒK@nk`Wn@lUnƒVnm‚ƒXU`@mb@lkV@„VnklVVUblz@`nbWnnJ„IVJ@XUVV„UV@lÆXšxnKlL@mšaȍll„I„ašLV`„UlVV@@b@XJWUb@˜™n@L„@lJn@@UVKVaœUlnlJXb„k˜Wn_@mn@VkVK@a°@XklKVUUwVWUšƒĊƚ@šU²@@blLVWn@@bVa„XllVnnaVmša@¯VLnan@‚šmVm@knUVJ', ], encodeOffsets: [[116269, 37637]], }, }, { type: 'Feature', id: '1406', properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 }, geometry: { type: 'Polygon', coordinates: [ '@@XXWVXVWnnlnn@èƼ@„„xlš„ŽV„nblšššVŽÈUVl‚š@„blnœL܃ĊmUkU@Ua‚—@WI@aXk@WVUlKUaV_VKXƒWUUÅka@VaU@mlI@›@_nW„LVl°UV@@b@LÈKVn°V@VšnXblK@b@bkJ@bVVlUÞVÞa„Xܚ°UXWl@„wl@XaV@šÝa@aa@IVyƍ@aƒƒXUWknwna@w‚JXw°ƒWÈ¥kI@W@kmKm™¯IUmkXWWkaƒbkImJ™UkL±aVƒb@lWXkJƒUkƒĉkƒ@UmU@a™KkƒVƒUkJlaU_™yƒ@UU@aUU¯LW`kLWnkJó™ƒbUƒbmK@aU@UVVL@VƒL@„UVULƒK@xUL@VUV@nml¯@UkmKUxmbVbUV@XƒlXVmnVbkxUbU@ƒbm@@VUlUVšb°@VX¯šm‚', ], encodeOffsets: [[114615, 40562]], }, }, { type: 'Feature', id: '1405', properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 }, geometry: { type: 'Polygon', coordinates: [ '@@lV„Lšb„an‚LnKVašLVašL„UVaUm„aÆLnLlanKVaÆI„a°x²UlmVVœX˜wUKna„@Vn„J‚a„L„a@UV@@alUkKVKnkmmVwUk„w@ƒ™@kxWUXƒW@@mƒk@aUa@a¯aƒLkKmwkUm@kL@K@aWIXmƒVƒXƒWkUVakL@UVKƒw@aUK@UUKmLU@¯n™KUwVƒUIWJUWmka™@UXƒJƒk@UkmW@kLWKVƒx@bmI@VUaVU@a¯@UUmVKmX@±`kÝKVxUL±akL@V™bƒLkKmVƒ@XWVUbƒVXb@lm@@lW@@xk„lVUbnnmbUšlJ@„@L„@@V„b@‚WXš„UlkxVV@„šwn@ÜmnLlVkzƒ`UbmL@Vš@XL˜m„VnIÞ@VU°x@VnL˜x„V@LU°', ], encodeOffsets: [[115223, 36895]], }, }, { type: 'Feature', id: '1401', properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 }, geometry: { type: 'Polygon', coordinates: [ '@@„@VV@wVKnLVal@na°nšaVJœUlm„L°a@b„@lx@bULUlmx@Ln@lVkn„l˜@XI„w‚K„Vnƒ°aVXVx„ƒUaVU°K„nUlšUVL„KÆVš²Ģ‚lnXalLÈƘL„KUaVkUanmWU™a@WwkUWU¯y¯Ñ@anIl@@aVU„m„I„ymUƒLUUVakaU@@LmJkw±LKmVUI@W¯™VaU_l™kbW@kK@mƒUkaVƒmVaU™ƒIVmalk™W@wnIVy@klkWUU›VI@ƒƒUƒVkam@knU@mmmK@bblVUX@VkLV`@n±KU„ULƒ‚UnVVńUbÇKmV—Imbm@k¼ó@Ul™b@VmV@bXmaƒK@›UUxkV‚V@„xW„UxVnkVVJ@XnJ@XlV²LƂVbnL@lš@°', ], encodeOffsets: [[114503, 39134]], }, }, { type: 'Feature', id: '1403', properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 }, geometry: { type: 'Polygon', coordinates: [ '@@°@nb„@lb@b„b„b‚@„x²al@lb„KXU@m‚kUWkkmUUƒVwV@XUW@™naVklKXblKnL‚ƒnLVanImaXKlL„ašV@U@KUKW„alƒXK@£WKXUV@VU„ƒUUVW„_V™@W@@K„@šƒUƒƒIWmXUmƒULƒn™JkImmÝaUbLƒK@UƒWk@mn™Uƒ@kVWb@Ubmx@lƒzUxƒ`U„ULml@„XWlƒ@UV@nk@U‚Vb@X™Jm™@@Vknƒyk@ƒzƒJƒnUV@bk@mJ@b°Ò°zXVlVXx‚@šbXVmnVbUlVb', ], encodeOffsets: [[115864, 39336]], }, }, ], UTF8Encoding: true, }) var mapFeatures = echarts.getMap(this.mapName).geoJson.features mapFeatures.forEach(v => { // 地区名称 var name = v.properties.name // 地区经纬度 this.geoCoordMap[name] = v.properties.cp }) myChart.setOption({ tooltip: { padding: 15, enterable: true, transitionDuration: 1, formatter: (params, ticket, callback) => { let tipHtml = `

新开工:工程建设项目

总投资额:${params.data.value}亿

当前阶段:可论证阶段

时间节点:2021.10-2022.10

` return tipHtml }, }, visualMap: { min: 0, max: 300, right: 0, bottom: 0, text: ['高', '低'], textStyle: { color: '#f1f1f1' }, realtime: false, calculable: true, inRange: { color: ['lightskyblue', '#2754b7'] } }, geo: { show: true, map: 'shanxi', layoutCenter: ['50%', '50%'], //地图位置 layoutSize: '100%', label: { normal: { show: false, }, emphasis: { show: false, }, }, roam: false, itemStyle: { normal: { areaColor: '#1946a8', shadowColor: '#1946a8', borderWidth: 1, //设置外层边框 borderColor: '#1946a8', shadowOffsetX: 10, shadowOffsetY: 5, shadowBlur: 2, }, emphasis: { areaColor: '#1946a8', borderColor: '#d4bc1d', borderWidth: 2, //设置外层边框 }, }, }, series: [ { name: '散点', type: 'scatter', coordinateSystem: 'geo', data: this.convertData(data), symbolSize: function (val) { return 10 }, label: { normal: { formatter: '{b}', position: [10, 10], fontSize: 15, fontWeight: 600, fontStyle: 'italic', color: '#fff', show: true, }, emphasis: { show: true, }, }, itemStyle: { normal: { color: '#000', borderWidth: 2, borderColor: '#fff', }, }, }, { type: 'map', map: this.mapName, geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: true, // 存在legend时显示 label: { normal: { show: true, }, emphasis: { show: false, textStyle: { color: '#fff', }, }, }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#2B91B7', }, }, animation: false, data: data, }, { name: '点', type: 'scatter', coordinateSystem: 'geo', zlevel: 6, }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: this.convertData( data .sort(function (a, b) { return b.value - a.value }) .slice(0, 5) ), symbolSize: function (val) { return 15 }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke', }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'left', show: false, }, }, itemStyle: { normal: { color: 'yellow', shadowBlur: 10, shadowColor: 'yellow', }, }, zlevel: 1000, }, { name: '线路', type: 'lines', zlevel: 2, effect: { show: true, period: 4, //箭头指向速度,值越小速度越快 trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重 symbol: 'arrow', //箭头图标 symbolSize: 5, //图标大小 }, lineStyle: { normal: { color: '#00FFFF', width: 1, type: 'dashed', opacity: 0.5, //尾迹线条透明度 curveness: -0.3, //尾迹线条曲直度 }, }, data: moveLine.normal, }, ], }) }, initChartL1 () { let myChart = echarts.init(document.getElementById("echartL1")); let option = { grid: { top: 35, right: 40, left: 60, bottom: 40, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, }, xAxis: { data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'], axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { rotate: 40, textStyle: { color: "white", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: '亿元', nameTextStyle: {//y轴上方单位的颜色 color: '#fff', }, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", }, }, splitLine: { show: true, lineStyle: { color: "#204561", width: 1, type: "dotted", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, series: [ { name: "2022年额度", type: "bar", data: [283.42, 622.16, 251.91, 163.19, 46.44, 14.87, 0.00, 32.07, 9.06, 13.88, 143.16, 0.29, 33.75, 49.99, 7.38, 10.41, 0.00, 0.00], showBackground: false, backgroundStyle: { color: "#18416F", }, barWidth: "10%", itemStyle: { barBorderRadius: [10, 10, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: '#082550', }, { offset: 1, color: '#69c0ff', }, ]), }, }, { name: "2023年额度", type: "bar", data: [285.48, 627.03, 254.41, 164.08, 46.76, 14.93, 0.00, 32.45, 9.17, 14.01, 143.52, 0.27, 34.61, 51.45, 7.53, 10.52, 0.00, 0.00], showBackground: false, backgroundStyle: { color: "#18416F", }, barWidth: "10%", itemStyle: { barBorderRadius: [10, 10, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: '#082550', }, { offset: 1, color: '#957DFF', }, ]), }, }, ], legend: { data: ["2022年额度", "2023年额度"], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 // fontSize: "10", }, right: 'center', icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { console.log(param) if (param.name == '晋能控股') { that.showTip2 = true setTimeout(() => { // that.initChartR4() // that.initChartR5() that.initChartL2b() }) } }) myChart.setOption(option); }, initChartL2b () { let myChart = echarts.init(this.$refs['echartL2b']) var value = 0.13; var data = [value]; let option = { backgroundColor: 'transparent', title: [ { // text: '总额度285.48亿', // formatter: `总额度285.48亿`, x: '37%', y: '80%', textStyle: { fontSize: 24, fontWeight: 'bold', color: '#2CB7E0', lineHeight: 16, textAlign: 'center', }, } ], series: [ { type: 'liquidFill', radius: '70%', center: ['50%', '40%'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#446bf5', }, { offset: 1, color: '#2ca3e2', }, ], globalCoord: false, }, ], data: [value, value], // data个数代表波浪数 backgroundStyle: { borderWidth: 1, color: 'RGBA(51, 66, 127, 0.7)', }, label: { normal: { textStyle: { fontSize: 30, color: '#fff', }, }, }, outline: { // show: false borderDistance: 0, itemStyle: { borderWidth: 2, borderColor: 'transparent', }, }, }, ], } myChart.setOption(option) }, initChartL2 () { let myChart = echarts.init(this.$refs['echartL2']) var value = 0.067; var data = [value]; let option = { backgroundColor: 'transparent', title: [ { // text: '总额度285.48亿', // formatter: `总额度285.48亿`, x: '37%', y: '80%', textStyle: { fontSize: 24, fontWeight: 'bold', color: '#2CB7E0', lineHeight: 16, textAlign: 'center', }, } ], series: [ { type: 'liquidFill', radius: '70%', center: ['50%', '40%'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#446bf5', }, { offset: 1, color: '#2ca3e2', }, ], globalCoord: false, }, ], data: [value, value], // data个数代表波浪数 backgroundStyle: { borderWidth: 1, color: 'RGBA(51, 66, 127, 0.7)', }, label: { normal: { textStyle: { fontSize: 30, color: '#fff', }, }, }, outline: { // show: false borderDistance: 0, itemStyle: { borderWidth: 2, borderColor: 'transparent', }, }, }, ], } myChart.setOption(option) }, initChartL3 () { let myChart = echarts.init(this.$refs['echartL3']) option = { tooltip: { trigger: 'axis', formatter: '指标:' + '{c0}' + '
' + '发展线:' + '{c1}' + '
' + '生存线:' + '{c2}', //+ '
'+ '{a1}:{c1}' + '%', axisPointer: { type: 'shadow', }, }, grid: { top: '10%', right: '5%', left: '10%', bottom: '15%', }, xAxis: { data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: true, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 15, textStyle: { color: 'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: 12, }, }, }, yAxis: [ { type: 'value', splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false }, axisLabel: { show: true, formatter: '{value}', textStyle: { color: 'rgba(250,250,250,0.6)', }, }, nameTextStyle: { color: '#ebf8ac', fontSize: 16, }, }, ], series: [ { name: '', type: 'bar', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: '#082550', }, ]), }, }, // data: [70, 52, 33, 41, 52], data: dataList[this.count][0] // markLine: { // symbol: ['none', 'none'], // data: [ // { // name: '生存线', // yAxis: 10, // lineStyle: { // color: '#FF8F0A', // }, // label: { // formatter: '{b}', // position: 'middle', // color: '#FF8F0A', // fontSize: 12, // }, // }, // { // name: '发展线', // yAxis: 15, // lineStyle: { // color: '#00EEA2', // }, // label: { // formatter: '{b}', // position: 'middle', // color: '#00EEA2', // fontSize: 12, // }, // }, // ], // label: { // distance: [50, 0], // }, // }, }, { name: '', type: 'line', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: 'green', }, ]), }, }, // data: [20, 30, 15, 28, 36], data: dataList[this.count][1] }, { name: '', type: 'line', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: 'yellow', }, ]), }, }, // data: [15, 22, 17, 33, 14], data: dataList[this.count][2] }, ], } myChart.setOption(option) // tools.loopShowTooltip(myChart, option, { // nterval: 2000, // loopSeries: true, // }) }, initChartL4 () { let data = [ { value: [173.43, 129], name: '煤炭' }, { value: [23.10, 2], name: '火电' }, { value: [22.87, 8], name: '冶金' }, { value: [9.71, 5], name: '焦化' }, { value: [8.35, 6], name: '其他传统产业' } ] let count = 0 data.forEach(item => { count += item.value[0] }) let myChart = echarts.init(this.$refs['echartL4']) let option = { title: { text: '产业类型分析', x: 'center', y: '0%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', formatter: function (params) { return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '
' + params.value[1] + '个' + ',' + params.value[0] + '亿' } }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'], legend: { orient: 'horizontal', show: false, icon: 'circle', top: 'bottom', orient: 'vertical', right: '-3%', textStyle: { color: '#9DB9EB', fontSize: '10px' }, itemWidth: 10, itemHeight: 10 }, series: [ { name: '', type: 'pie', // radius: ['0%', '70%'], radius: ['50%', '65%'], center: ['50%', '55%'], itemStyle: { normal: { borderColor: 'rgba(1,31,64,0.7)', borderWidth: 6, label: { show: false }, }, }, labelLine: { show: false, }, data, }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { console.log(param) that.showTip3 = true setTimeout(() => { that.initChartT1(data, option) }) }) }, initChartL5 () { let data = [ { value: [29.26, 102], name: '新一代信息技术' }, { value: [59.11, 38], name: '高端装备制造' }, { value: [3.96, 5], name: '新材料' }, { value: [2.12, 7], name: '生物' }, { value: [100.09, 79], name: '新能源' }, { value: [15.48, 32], name: '节能环保' }, { value: [3.00, 3], name: '相关服务业' }, ] let count = 0 data.forEach(item => { count += item.value[0] }) let myChart = echarts.init(this.$refs['echartL5']) let option = { title: { text: '战略性新兴产业', x: 'center', y: '0%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', formatter: function (params) { return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '
' + params.value[1] + '个' + ',' + params.value[0] + '亿' } }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'], legend: { show: false, icon: 'circle', top: 'bottom', orient: 'vertical', right: '-3%', textStyle: { color: '#9DB9EB', fontSize: '10px' }, itemWidth: 10, itemHeight: 10 }, series: [ { name: '', type: 'pie', // radius: ['0%', '70%'], radius: ['50%', '65%'], center: ['50%', '55%'], itemStyle: { normal: { borderColor: 'rgba(1,31,64,0.7)', borderWidth: 6, label: { show: false, }, }, }, labelLine: { show: false, }, data }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { console.log(param) that.showTip3 = true setTimeout(() => { that.initChartT1(data, option) }) }) }, initChartL6 () { let data = [ { value: [25.82, 43], name: '化工' }, { value: [17.36, 21], name: '煤层气' }, { value: [0.04, 1], name: '文旅康养' }, { value: [1.51, 7], name: '体育' }, { value: [9.32, 5], name: '酿造' }, { value: [71.12, 129], name: '建筑房地产' }, { value: [9.11, 14], name: '农业' }, ] let count = 0 data.forEach(item => { count += item.value[0] }) let myChart = echarts.init(this.$refs['echartL6']) let option = { title: { text: '特色优势产业', x: 'center', y: '0%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', formatter: function (params) { return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '
' + params.value[1] + '个' + ',' + params.value[0] + '亿' } // position: ['30%', '87%'], }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'], legend: { show: false, icon: 'circle', top: 'bottom', orient: 'vertical', right: '-3%', textStyle: { color: '#9DB9EB', fontSize: '10px' }, itemWidth: 10, itemHeight: 10 }, series: [ { name: '', type: 'pie', // radius: ['0%', '70%'], radius: ['50%', '65%'], center: ['50%', '55%'], itemStyle: { normal: { borderColor: 'rgba(1,31,64,0.7)', borderWidth: 6, label: { show: false, }, }, }, labelLine: { show: false, }, data, }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { console.log(param) that.showTip3 = true setTimeout(() => { that.initChartT1(data, option) }) }) }, initChartL7 () { let data = [ { value: [155.82, 51], name: '交通运输业' }, { value: [8.47, 19], name: '煤气层管网' }, { value: [10.64, 24], name: '物流贸易' }, { value: [41.05, 46], name: '水务' }, { value: [2.14, 7], name: '其他' }, ] let count = 0 data.forEach(item => { count += item.value[0] }) let myChart = echarts.init(this.$refs['echartL7']) let option = { title: { text: '公共基础等产业', x: 'center', y: '0%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', formatter: function (params) { return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '
' + params.value[1] + '个' + ',' + params.value[0] + '亿' } }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'], legend: { show: false, icon: 'circle', top: 'bottom', orient: 'vertical', right: '-3%', textStyle: { color: '#9DB9EB', fontSize: '10px' }, itemWidth: 10, itemHeight: 10 }, series: [ { name: '', type: 'pie', // radius: ['0%', '70%'], radius: ['50%', '65%'], center: ['50%', '55%'], itemStyle: { normal: { borderColor: 'rgba(1,31,64,0.7)', borderWidth: 6, label: { show: false, }, }, }, labelLine: { show: false, }, data }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { console.log(param) that.showTip3 = true setTimeout(() => { that.initChartT1(data, option) }) }) }, initChartR4 () { let myChart = echarts.init(this.$refs['echartR4']) let option = { title: { text: '2022年的可投资总额', x: 'center', y: '87%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', }, color: ['#69C1FF', '#4B97CC',], legend: { icon: 'circle', top: 'bottom', orient: 'vertical', right: '1%', textStyle: { color: '#9DB9EB', }, }, series: [ { name: '', type: 'pie', label: { normal: { show: true, position: 'center', color: '#4c4a4a', formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}', rich: { total: { fontSize: 20, fontFamily: "微软雅黑", color: '#fff' }, active: { fontFamily: "微软雅黑", fontSize: 15, color: '#fff' }, } }, emphasis: {//中间文字显示 show: true, } }, radius: ['40%', '60%'], center: ['50%', '45%'], itemStyle: { normal: { label: { show: false, }, }, }, labelLine: { show: false, }, data: [ { value: 1048, name: '已使用额度' }, { value: 735, name: '可使用额度' } ], }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartR5 () { let myChart = echarts.init(this.$refs['echartR5']) let option = { title: { text: '2023年的可投资总额', x: 'center', y: '87%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', }, color: ['#69C1FF', '#4B97CC',], legend: { icon: 'circle', top: 'bottom', orient: 'vertical', right: '1%', textStyle: { color: '#9DB9EB', }, }, series: [ { name: '', type: 'pie', label: { normal: { show: true, position: 'center', top: '50', color: '#4c4a4a', formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}', rich: { total: { fontSize: 20, fontFamily: "微软雅黑", color: '#fff' }, active: { fontFamily: "微软雅黑", fontSize: 15, color: '#fff' }, } }, emphasis: {//中间文字显示 show: true, } }, radius: ['40%', '60%'], center: ['50%', '45%'], itemStyle: { normal: { label: { show: false, }, }, }, labelLine: { show: false, }, data: [ { value: 1048, name: '已使用额度' }, { value: 735, name: '可使用额度' } ], }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartR1 () { let data = [ { value: [665.81, 549], name: '主业' }, { value: [65.17, 84], name: '辅业' }, { value: [423.36, 164], name: '技改' } ] let count = 0 data.forEach(item => { count += item.value[0] }) let myChart = echarts.init(this.$refs['echartR1']) let option = { title: { text: '主辅业计划占比', x: 'center', y: '87%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', // formatter: '{b}' + ':' + '{c}' + '
' + '占比:' + '{d}%', // position: ['-5%', '95%'], formatter: function (params) { return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '
' + params.value[1] + '个' + ',' + params.value[0] + '亿' } }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'], legend: { show: false, icon: 'circle', top: 'bottom', orient: 'vertical', right: '-3%', textStyle: { color: '#9DB9EB', fontSize: '10px' }, itemWidth: 10, itemHeight: 10 }, series: [ { name: '', type: 'pie', radius: ['40%', '60%'], center: ['50%', '45%'], itemStyle: { normal: { borderColor: 'rgba(1,31,64,0.7)', borderWidth: 6, label: { show: false, }, }, }, labelLine: { show: false, }, data, }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { console.log(param) that.showTip3 = true setTimeout(() => { that.initChartT1(data, option) }) }) }, initChartR2 () { let data = [ { value: [340.77, 168], name: '特别监管类' }, { value: [390.22, 465], name: '备案类' } ] let count = 0 data.forEach(item => { count += item.value[0] }) let myChart = echarts.init(this.$refs['echartR2']) let option = { title: { text: '项目管理类型', x: 'center', y: '87%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', formatter: function (params) { return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '
' + params.value[1] + '个' + ',' + params.value[0] + '亿' } // position: ['-5%', '95%'], }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3', '#897DFF', '#b6a045', '#D87AFF'], legend: { show: false, icon: 'circle', top: 'bottom', orient: 'vertical', right: '-3%', textStyle: { color: '#9DB9EB', fontSize: '10px' }, itemWidth: 10, itemHeight: 10 }, series: [ { name: '', type: 'pie', radius: ['40%', '60%'], center: ['50%', '45%'], itemStyle: { normal: { borderColor: 'rgba(1,31,64,0.7)', borderWidth: 6, label: { show: false, }, }, }, labelLine: { show: false, }, data, }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { console.log(param) that.showTip3 = true setTimeout(() => { that.initChartT1(data, option) }) }) }, initChartR3 () { let myChart = echarts.init(this.$refs['echartR3']) let option = { title: { text: '股权类', textStyle: { color: '#69C0FF', fontSize: 16, fontWeight: 500 }, top: '10', left: '10' }, textStyle: { color: '#fff', }, tooltip: { trigger: "axis", formatter: function (params) { var tip = params[0].axisValue + '
' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '
' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[0].data[3] + '亿元'; return tip }, axisPointer: { lineStyle: { type: 'dashed', width: 2, color: 'rgba(255,255,255,0.6)' }, animation: true } }, grid: { top: '22%', right: '5%', left: '15%', bottom: '15%', }, yAxis: { data: ['备案', '特别监管'], splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false }, axisLabel: { show: true, formatter: '{value}', textStyle: { color: 'rgba(250,250,250,0.6)', }, }, nameTextStyle: { color: '#ebf8ac', fontSize: 16, }, }, xAxis: { data: ['项目储备', '项目立项', '可研论证', '投资决策'], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, textStyle: { color: 'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: 12, }, }, }, series: [ { name: '', type: 'scatter', symbol: 'circle', symbolSize: function (data) { return Math.sqrt(data[2]) * 3; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#40A9FF' } }, data: [ ['项目储备', '特别监管', 9, 6.49], ['项目立项', '特别监管', 0, 0.00], ['可研论证', '特别监管', 2, 0.10], ['投资决策', '特别监管', 27, 15.52], ] }, { name: '', type: 'scatter', symbol: 'circle', symbolSize: function (data) { return Math.sqrt(data[2]) * 3; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#45DAD1' } }, data: [ ['项目储备', '备案', 39, 8.08], ['项目立项', '备案', 7, 1.83], ['可研论证', '备案', 19, 1.01], ['投资决策', '备案', 73, 17.65], ] }, ] } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartR6 () { let myChart = echarts.init(this.$refs['echartR6']) let option = { title: { text: '固定资产', textStyle: { color: '#69C0FF', fontSize: 16, fontWeight: 500 }, top: '10', left: '10' }, textStyle: { color: '#fff', }, tooltip: { trigger: "axis", formatter: function (params) { var tip = params[0].axisValue + '
' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '
' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[0].data[3] + '亿元'; return tip }, axisPointer: { lineStyle: { type: 'dashed', width: 2, color: 'rgba(255,255,255,0.6)' }, animation: true } }, grid: { top: '25%', right: '5%', left: '15%', bottom: '15%', }, yAxis: { data: ['备案', '特别监管'], splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false }, axisLabel: { show: true, formatter: '{value}', textStyle: { color: 'rgba(250,250,250,0.6)', }, }, nameTextStyle: { color: '#ebf8ac', fontSize: 16, }, }, xAxis: { data: ['项目储备', '项目立项', '可研论证', '投资决策'], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, textStyle: { color: 'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: 12, }, }, }, series: [ { name: '特别监管', type: 'scatter', symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' symbolSize: function (data) { return Math.sqrt(data[2]) * 3; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#40A9FF' } }, data: [ ['项目储备', '特别监管', 14, 12.05], ['项目立项', '特别监管', 2, 1.25], ['可研论证', '特别监管', 10, 32.69], ['投资决策', '特别监管', 15, 28.53], ] }, { name: '备案', type: 'scatter', symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' symbolSize: function (data) { return Math.sqrt(data[2]) * 3; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#45DAD1' } }, data: [ ['项目储备', '备案', 27, 23.86], ['项目立项', '备案', 1, 1.05], ['可研论证', '备案', 14, 18.46], ['投资决策', '备案', 40, 38.86], ] }, ] } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartT1 (list, info) { let count = 0 console.log(list, info) this.echartTitle = info.title.text let data = list data.forEach(item => { count += item.value[0] }) let option = JSON.parse(JSON.stringify(info)) option.series[0].center = ['50%', '50%'] option.series[0].radius = ['60%', '75%'] option.legend = { show: false, icon: 'circle', top: 'bottom', orient: 'vertical', right: '2%', textStyle: { color: '#9DB9EB', fontSize: 16 }, itemWidth: 10, itemHeight: 10 }, option.title.text = '' option.tooltip = { trigger: 'item', formatter: function (params) { return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '
' + params.value[1] + '个' + ',' + params.value[0] + '亿' } } option.series[0].itemStyle.normal.label = { show: true, formatter: function (params) { return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '\n' + params.value[1] + '个' + ',' + params.value[0] + '亿' } } option.series[0].labelLine.show = true let myChart = echarts.init(this.$refs['echartT1']) myChart.setOption(option) // tools.loopShowTooltip(myChart, option, { // nterval: 2000, // loopSeries: true, // }) } }, })