let app = new Vue({ el: '#app', data () { return { count: 0, countType: 0, type: true, // 切换柱状图状态 showTip2: false, showTip3: false, timer2: '', echartTitle: '', year: '2022', time: '', timer: '', mapName: 'shanxi', geoCoordMap: {}, config1: { number: [100], content: '{nt}个', }, storageRecordConfig: { // waitTime: '30000', hoverPause: false, header: ['企业集团', '项目名 ', '投资总额'], // headerBGC: '#05507b33', // oddRowBGC: '#05507b33', // evenRowBGC: '#05507b33', headerBGC: '#05183c', headerBGC: '#05507b33', oddRowBGC: '#05183c', evenRowBGC: '#05183c', rowNum: 8, // columnWidth: [100, 550,100], align: ['center', 'center', 'center'], data: [ ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"], ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"], ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.02亿元"], ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"], ['潞安化工', '分布式光伏发电项目', "2.01亿元"], ['太重集团', '设立太重(大同)新能源产业投资公司', "0.30亿元"], ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"], ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"], ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"], ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"], ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"], ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元"], ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"], ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元"], ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"], ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"], ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"], ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"], ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"] ], }, 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) }, 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() this.changeTopColor() },) }, methods: { changeTopColor () { this.list = document.getElementsByClassName('row-item') for (var i = 0; i < this.list.length; i++) { if (i == 1) { this.list[i].classList.add('light') } else { this.list[i].classList.remove('light') } } this.initChartL3() }, scrollChange (index) { if (index == 18) { this.count = -1 } else { this.count = index } if (this.count > 12 && this.count != 18) { this.countType = 1 } else { this.countType = 0 } this.list = document.getElementsByClassName('row-item') for (var i = 0; i < this.list.length; i++) { if (i == 2) { this.list[i].classList.add('light') } else { this.list[i].classList.remove('light') } } this.initChartL3() }, 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: 0, left: 60, bottom: 50, }, 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: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0], // 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: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28], 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年额度"], data: ["2023年额度"], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 // fontSize: "10", }, right: 'center', y:5, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (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.1149; 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: { formatter: function (data) { return (data.value * 100).toFixed(2) + '%' }, 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.1463; 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: { formatter: function (data) { return (data.value * 100).toFixed(2) + '%' }, 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: '6%', }, xAxis: { // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'], data: dataType[this.countType], 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 + 1][2] // 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][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 + 1][0] }, ], } 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: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], // 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) // }) // }) // { 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: '其他传统产业' } var chartData = [ { name: '煤炭', y: 294.61, num: 95, sliced: false, selected: false, }, { name: '火电', y: 39.24, num: 1, sliced: false, selected: false, }, { name: '冶金', y: 38.85, num: 6, sliced: false, selected: false, }, { name: '焦化', y: 16.49, num: 4, sliced: false, selected: false, }, { name: '其他传统产业', y: 14.19, num: 5, sliced: false, selected: false, } ] var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '传统产业分析' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: '传统产业分析', style: { color: 'rgba(255,255,255,0.6)', fontSize: 16, }, y: 90 }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: true, //开启html模式 style: { color: '#fff', }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: false, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], point: { events: { click: function (e) { //点击事件 that.showTip3 = true that.echartTitle = '传统产业分析' setTimeout(() => { that.initChartT1(chartData) }) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '传统产业分析' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '传统产业分析' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL4', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, 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: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], // 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) // }) // }) // { 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: '相关服务业' }, // var chartData = [ // { // name: '新一代信息技术', // y: 29.26, // x: 75, // sliced: false, // selected: false, // }, // { // name: '高端装备制造', // y: 100.41, // x: 28, // sliced: false, // selected: false, // }, // { // name: '新材料', // y: 6.72, // x: 4, // sliced: false, // selected: false, // }, // { // name: '生物', // y: 3.60, // x: 58, // sliced: false, // selected: false, // }, // { // name: '新能源', // y: 170.03, // x: 58, // sliced: false, // selected: false, // } // ] var chartData = [ { name: '新一代信息技术', y: 29.26, num: 75, //x: 75, sliced: false, selected: false, }, { name: '高端装备制造', y: 100.41, num: 28, sliced: false, selected: false, }, { name: '新材料', y: 6.72, num: 4, sliced: false, selected: false, }, { name: '生物', y: 3.60, num: 58, sliced: false, selected: false, }, { name: '新能源', y: 170.03, num: 58, sliced: false, selected: false, }, { name: '节能环保', y: 26.30, num: 24, sliced: false, selected: false, }, { name: '相关服务业', y: 5.10, num: 2, sliced: false, selected: false, } ] var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39', '#5783ab'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '战略性新兴产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: '战略性新兴产业', style: { color: 'rgba(255,255,255,0.6)', fontSize: 16, }, y: 90 }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: true, //开启html模式 style: { color: '#fff', }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: false, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], point: { events: { click: function (e) { //点击事件 that.showTip3 = true that.echartTitle = '战略性新兴产业' setTimeout(() => { that.initChartT1(chartData) }) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '战略性新兴产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '战略性新兴产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL5', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, 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: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], // 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) // }) // }) // { 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: '农业' }, var chartData = [ { name: '化工', y: 43.86, num: 32, sliced: false, selected: false, }, { name: '煤层气', y: 29.49, num: 16, sliced: false, selected: false, }, { name: '文旅康养', y: 0.07, num: 1, sliced: false, selected: false, }, { name: '体育', y: 2.57, num: 5, sliced: false, selected: false, }, { name: '酿造', y: 15.83, num: 4, sliced: false, selected: false, }, { name: '建筑房地产', y: 120.81, num: 96, sliced: false, selected: false, }, { name: '农业', y: 15.47, num: 10, sliced: false, selected: false, } ] var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '特色优势产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: '特色优势产业', style: { color: 'rgba(255,255,255,0.6)', fontSize: 16, }, y: 90 }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: true, //开启html模式 style: { color: '#fff', }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: false, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], point: { events: { click: function (e) { //点击事件 that.showTip3 = true that.echartTitle = '特色优势产业' setTimeout(() => { that.initChartT1(chartData) }) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '特色优势产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '特色优势产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL6', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, 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: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], // 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) // }) // }) // { 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: '其他' }, var chartData = [ { name: '交通运输业', y: 264.70, num: 38, sliced: false, selected: false, }, { name: '煤气层管网', y: 14.39, num: 14, sliced: false, selected: false, }, { name: '物流贸易', y: 18.07, num: 18, sliced: false, selected: false, }, { name: '水务', y: 69.73, num: 34, sliced: false, selected: false, }, { name: '其他', y: 3.64, num: 5, sliced: false, selected: false, } ] var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '公共基础等产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: '公共基础等产业', style: { color: 'rgba(255,255,255,0.6)', fontSize: 16, }, y: 90 }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: true, //开启html模式 style: { color: '#fff', }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: false, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], point: { events: { click: function (e) { //点击事件 that.showTip3 = true that.echartTitle = '公共基础等产业' setTimeout(() => { that.initChartT1(chartData) }) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '公共基础等产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '公共基础等产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL7', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, 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: [1098.71, 713], name: '主业' }, // { value: [65.17, 84], 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: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], // 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) // }) // }) // let data = [ // { value: [1098.71, 713], name: '主业' }, // { value: [65.17, 84], name: '辅业' } // ] var chartData = [ { name: '辅业', y: 76.38, num: 84, sliced: false, selected: false, }, { name: '主业', y: 1287.50, num: 713, sliced: false, selected: false, } ] var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '主辅业计划占比' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { console.log(e) } } }, data: chartData }] }) } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: '主辅业计划占比', style: { color: 'rgba(255,255,255,0.6)', fontSize: 16, }, y: 40 }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: true, //开启html模式 style: { color: '#fff', }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: false, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', center: ['50%', '50%'], point: { events: { click: function (e) { //点击事件 that.showTip3 = true that.echartTitle = '主辅业计划占比' setTimeout(() => { that.initChartT1(chartData) }) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '主辅业计划占比' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '主辅业计划占比' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '主辅业计划占比' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartR1', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, 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: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], // 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) // }) // }) // { value: [340.77, 168], name: '特别监管类' }, // { value: [390.22, 465], name: '备案类' } var chartData = [ { name: '特别监管类', y: 635.84, num: 168, sliced: false, selected: false, }, { name: '备案类', y: 728.04, num: 465, sliced: false, selected: false, } ] var timer = null; var i = 0; let that = this var chart = Highcharts.chart('echartR2', { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { console.log(e) } } }, data: chartData }] }) } }, 2000); }, legendItemClick: function (event) { //console.log(event); that.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: '项目管理类型', style: { color: 'rgba(255,255,255,0.6)', fontSize: 16, }, y: 40 }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: true, //开启html模式 style: { color: '#fff', }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: false, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], point: { events: { click: function (e) { //点击事件 that.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { console.log(e) } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] }); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initChartR3 () { let myChart = echarts.init(this.$refs['echartR3']) let option = { title: { text: '股权类', textStyle: { color: '#69C0FF', fontSize: 20, fontWeight: 500 }, top: '20', left: '20' }, 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[1].data[3] + '亿元'; return tip }, axisPointer: { lineStyle: { type: 'dashed', width: 2, color: 'rgba(255,255,255,0.6)' }, animation: true } }, grid: { top: '10%', right: '5%', left: '15%', bottom: '6%', }, 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: 20, fontWeight: 500 }, top: '20', left: '20' }, 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[1].data[3] + '亿元'; return tip }, axisPointer: { lineStyle: { type: 'dashed', width: 2, color: 'rgba(255,255,255,0.6)' }, animation: true } }, grid: { top: '10%', right: '5%', left: '15%', bottom: '6%', }, 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, // }) var chartData = list //console.log(list) setTimeout(() => { Highcharts.chart('echartT1', { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, }, credits: { enabled: false //去掉hightchats水印 }, title: null, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: true, //开启html模式 style: { color: '#fff', }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: false, // 图例 cursor: 'pointer', size: 260, innerSize: 170, //环形图中间空白,0为饼图 depth: 38, //立体高度 slicedOffset: 23, //动画距离 dataLabels: { enabled: true, // 是否展示指示线 formatter: function (point) { let num = chartData[this.colorIndex].num console.log(num) this.percentage = this.percentage.toFixed(2) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` } //'' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], data: chartData }] }); }, 50) } }, })