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: '60000', hoverPause: false, 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.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() },) setTimeout(() => { this.timer2 = setInterval(() => { if (this.count < dataList.length - 1) { this.count++ } else { this.count = 0 } if (this.count > 14) { this.countType = 1 } else { this.countType = 0 } this.initChartL3() }, 2000) }, 300) // 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¦WlnnUm°²VVVVVnUnºlz@l@J@kXWVXl@La@KULlbnKlLnKLnKÆXn°bVV@bUVl°Un@LnaVJUbW@UX²l@ČwlVVIWnkÆa°anVKn°UW¯@aVUVk@Un@aV@ValwUanmWUk@WVUUanaVwnLVl°@nk@mVU@UVK@wLVKVU@K@UUKVUV@@bnLaVaôlIXmlKX_°KVV@bVV@zV`kblIVUlL@bnV@VĊllVlIXW@kaU²blKVnIlJalbXXlWVn°JnnL@l@XlJlaX@XW²@l_VmnKUblU@mnkVK¯@U@ma@kX¥VmakkLa@a@WIUUVXWWnk@a°a@kkm@kUUmJm@WUUUIk`m@VkaWWkXKmXk¯@WKLkak@±bw@aa@aka@ma¯@LKÇÅkKWbkmġ±ÅULUKVVkm¯LUVVbUwUW¯bmULxWJ@klmkUm@@KnwVkVK@akw@@a¯bKknVUIb¯mmbk@UbmKUL@xUU@klmLUlVXIVVVUVUU`mLXVWbXnW`Ų°xmxU@mĉwU@mbU@UmbkVW¦kJ@X@`¯Im@UlUVVnb@bWJXnmbJUUUUa@UamIkax@@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@VbVVVInaWmXI@aaUmVUVkn@°J@_W@lIX¥lUnaVV@naV@xĊnV@wn¯wƱX_WmXaWUnKV_VVUUUUWJkUVnKlk¯@@kmKUaűKkU@WmI@WUIlUUmVwXw@UlUVwV@LnbW@anU@UaVkô@l»n@naJnUÈLVaÆUUVmVKV²L@mU_lK@UVWkUa@a@U¯aUaÑóÑUbKk@@ak¯mVaUwVÑkWUmK@UUKmXUWÝwUaLUU@aWJUUU@UaÝU@WL@VKVaVI@WnU@alIVK@kImIkJ@m@@@_K@x@kaW@U@Vmn@UK@mIJUXV¤XXWlkKkkK@XmJVakImJU@ó¯LWKUV@nUVLkxmKkLma@kXKmmLabLmK@V@mXVÆUxX@`nLaV@@VmLUVnLlLb@°²nx@bVUxlb@V¯bUV@zVXVĊXVx@lVn@VnnmU@LlJXVz¯VWVXbV@bmnVUVkÇþÅ@XVxmbUlVUlnW@Xl@VLXÒ@bÞJ°¦Lò@nUb@°X@XbmVUVnb@xx', ], encodeOffsets: [[113614, 39657]], }, }, { type: 'Feature', id: '1410', properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 }, geometry: { type: 'Polygon', coordinates: [ '@@nW@@UnLKabKnnWL@lnblKnLlwKVU@mVUXL°KôV@nIlJUbnI@WlLllLXkWWU£VWInJ@VL@nm@UVX@lb@@wL@`@n@V@lw@nVmVXWmwnUla@_lKwVlUn°xVKVXXWlUVVI@K@Kn°KwlVlU@kna@V_WnmUVm@kXml_@mLlKXw°m@_ôJVUV@Xl@UaV@Va°Ilk»VwUkVmwUmmVn@V¯@KUwmK@U¯wUVÝ@mJUnWK@@UnKVa_lykUmKÛnm@x@UUlwVkXW@a@U@@K@kIVnammVakUl@wX@@k¯@VVbml@°UbULmlVbnbÅK±VKVXUJWa@ULWaUU@@U@aWK@UkxUKLUUUJ±UkL@V±kk@kam@UV@l@LWl@n@VVUxLlUUx@VUVU@aIUlL@°mLUbkUUaWUUaUU@aWKLWJ@bUL@VUVVbU@m@a@kmKmnĉlUKXWUblbxmIkU@xWb@lkVxLXmzVV@bklVVUzm@bk@Vx@xlU@lUbVnl@Wxnl@n@UbVmLmb@`X@lUX@@xlnkLWaUJnnWVVn@l@bULVV@lV@XnJVX', ], encodeOffsets: [[113063, 37784]], }, }, { type: 'Feature', id: '1407', properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 }, geometry: { type: 'Polygon', coordinates: [ '@@@lInJlJ@ULkJ@bmV@XUJUbL@UXKV@ÞVbV@VVXI@bVVKVbÞxVXnWVL@VnLVlXÒUVxUb°nl@bl@LVaôÒÒVb°b@VnLnnV@lmn@lbUV@JUVVXkl@lUzmJ@xXklbUnJVUbnUlbV@nlLX@lakV`Ub°@XVJnUL²KlxnI@KV@lbUbVVKnVl@zlm@U@nI@WUaVl@@mVU@XkW@nkVKV_Vwy@knwVa@XalU@Vnml@X@VLKVaÞbnnlJImVKnVVVInVlU@m@mXK@UmyUI@mWUUakamw@wUwmLkakwVmKw@wUam£y@am_W@UU@knmmamU@WUa@knw@UUUUV@nJm@mVUkKVUUUkKmwKULKUImV@lUnnm@mbUK@°bUnmbUmkkWUb@am@UXkK@a±@V@ĉÅVUXVxUVkLWl¯@@bULUlm@@nm`XlWakIkmVUbUL@Vm@kI@@Km@VaXI@W@aU@kUVU_KbJkkÇb@nkKmLwÅW@kVUUVU@WUIJmIXmma@_kyVaUUlkUm@kUx¯Lm@L@LUJUkVWXUWUL¯wVmUkxkL@`bkmVnxXUWUnm@kxU@', ], encodeOffsets: [[114087, 37682]], }, }, { type: 'Feature', id: '1408', properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 }, geometry: { type: 'Polygon', coordinates: [ '@@VlnJwkaVaXWVLĊknmnLl@@bnV@UaVU@UVK@aXIKXL@bVVVbXVVblVaVnK@¯KVkJ@bVVU@UVwkVKVwUUm@@Xk@K@kVUn@lbl@²l@UlK²VVIVVKVLlw@VXL@b@VV@VXbVK@XbVIUWLU²ÆLmaUankVKVa¯@nkUaU°@n@@kWaUVaXUW@IXKVw@UWU@W@@UUU@mn@`m@UUULkUmJIU@@UK@U@anak_@wmKUwmakVkmKVk¯bw`kwUIÇx¯»ÇaÅmn@@mmUkV@wkKW@kxmLUkĉLÝkxÝw¯lóVUmV@ĀVVX¦W¤kz@`Vx°²ĸ@Ul@xêĸNJ°¤VVlXLWnXxmV@nUl@', ], encodeOffsets: [[113232, 36597]], }, }, { type: 'Feature', id: '1402', properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 }, geometry: { type: 'Polygon', coordinates: [ '@@²£yl@ČĖ@bĸĢbĸXaKŤnn@ŎôllÈxnVnÞÇV@bnXllL°KbVb@J@b@UxlKXLlKlXk@UlkJlkUVKXUÇVIVm@_nÇLalwVnU@UUwma@aaÝaLmUk@@W@U@@XwVWÝUUUk@@VmLKV»nwUwaUL@`mzJUIVUaUwKUaVIlJôanÑlLVUn@a@VV@@UUwVK°Vn_lJÆLéW@UUUÅ@»lm@aÞIVwXWUUkkm@U@aU@mwU£VWU_kWmXwW_°yUkkK@UÇK@kkUVymóKU@KWIbUak@mJ@bkbmLkUmkVUW¦@lnb@@V°ULml@nkVaVmLUnk`±@XWW@kbǦX¯WxI@xmbmxXlWV@bÅUz@Jb@bÞbU@Wbk@xk@WX¯VÛWÝbÝUkVUU@alI@a@akLWam@U¯UUmÇL@K@aU@¯VUkKmX@`@kJ@nVUb@lbVÆXVWULU`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: [ '@@UkLky@IJVa@mÞaWy@_W@_WXVlUVw@nw°K@mUVamVkU@mmmnLVUmKXaU@IlKVUnK@UmWkX@WV_V@akU@aKWIXyIUVmUnUa@WaXUVKVmkUWVkULU@@VbKbIUm@mbVLxWUUkn±V¯wbÅJUbmLkbmKÅKbVnUbVKUbKUbmLKmbaKkUm@UnnVnxUVlUxl¼k¯JUbU@Vbk@WU@UVóI@`¯nWxkLK@nk`Wn@lUnVnmXU`@mb@lkV@VnklVVUblz@`nbWnnJIVJ@XUVVUV@lÆXxnKlL@maÈllIaLV`UlVV@@b@XJWUb@n@L@lJn@@UVKVaUlnlJXbkWn_@mn@VkVK@a°@XklKVUUwVWUĊÆ@U²@@blLVWn@@bVaXllVnnaVma@¯VLnan@mVm@knUVJ', ], encodeOffsets: [[116269, 37637]], }, }, { type: 'Feature', id: '1406', properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 }, geometry: { type: 'Polygon', coordinates: [ '@@XXWVXVWnnlnn@èƼ@xlVnblVÈUVl@blnLÜĊmUkU@Ua@WI@aXk@WVUlKUaV_VKXWUUÅka@VaU@mlI@@_nWLVl°UV@@b@LÈKVn°V@VnXblK@b@bkJ@bVVlUÞVÞaXÜ°UXWl@wl@XaV@Ýa@aa@IVyÆ@aXUWknwna@wJXw°WÈ¥kI@W@kmKm¯IUmkXWWkabkImJUkL±aVb@lWXkJUkĉk@UmU@aKkVUkJlaU_y@UU@aUU¯LW`kLWnkJóbUbmK@aU@UVVL@VL@UVULK@xUL@VUV@nml¯@UkmKUxmbVbUV@XlXVmnVbkxUbU@bm@@VUlUVb°@VX¯m', ], encodeOffsets: [[114615, 40562]], }, }, { type: 'Feature', id: '1405', properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 }, geometry: { type: 'Polygon', coordinates: [ '@@lVLbanLnKVaLVaLUVaUmaÆLnLlanKVaÆIa°x²UlmVVXwUKna@VnJaLa@UV@@alUkKVKnkmmVwUkw@@kxWUXW@@mk@aUa@a¯aLkKmwkUm@kL@K@aWIXmVXWkUVakL@UVKw@aUK@UUKmLU@¯nKUwVUIWJUWmka@UXJk@UkmW@kLWKVx@bmI@VUaVU@a¯@UUmVKmX@±`kÝKVxUL±akL@VbLkKmV@XWVUbVXb@lm@@lW@@xklVUbnnmbUlJ@@L@@Vb@WXUlkxVV@wn@ÜmnLlVkz`UbmL@V@XLmVnIÞ@VU°x@VnLxV@LU°', ], encodeOffsets: [[115223, 36895]], }, }, { type: 'Feature', id: '1401', properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 }, geometry: { type: 'Polygon', coordinates: [ '@@@VV@wVKnLVal@na°naVJUlmL°a@b@lx@bULUlmx@Ln@lVknl@XIwKVn°aVXVxUaVU°KnUlUVLKÆV²ĢlnXalLÈÆLKUaVkUanmWUa@WwkUWU¯y¯Ñ@anIl@@aVUmIymULUUVakaU@@LmJkw±LKmVUI@W¯VaU_lkbW@kK@mUkaVmVaUIVmalkW@wnIVy@klkWUUVI@UVkam@knU@mmmK@bblVUX@VkLV`@n±KUULUnVVÅUbÇKmVImbm@k¼ó@Ulb@VmV@bXmaK@UUxkVV@xWUxVnkVVJ@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@bbb@x²al@lbKXU@mkUWkkmUUVwV@XUW@naVklKXblKnLnLVanImaXKlLaV@U@KUKWalXK@£WKXUV@VUUUVW_V@W@@K@UIWmXUmULnJkImmÝaUbLK@UWk@mnU@kVWb@Ubmx@lzUx`UULml@XWl@UV@nk@UVb@XJm@@Vknyk@zJnUV@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 = ` <div class="tooltip-cont"> <p>新开工:<span>工程建设项目</span></p> <p>总投资额:<span>${params.data.value}亿</span></p> <p>当前阶段:<span>可论证阶段</span></p> <p>时间节点:<span>2021.10-2022.10</span></p> </div>` 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: [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: [373.22, 462.83, 243.27, 214.79, 49.55, 13.23, 22.16, 32.97, 8.56, 9.28, 127.32, -1.39, 44.12, 76.90, 7.03, 12.14, -0.20, 0.37], 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', 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: `<span>总额度</span>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: `<span>总额度</span>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}' + '<br/>' + '发展线:' + '{c1}' + '<br/>' + '生存线:' + '{c2}', //+ '<br/>'+ '{a1}:{c1}' + '%', axisPointer: { type: 'shadow', }, }, grid: { top: '10%', right: '5%', left: '10%', bottom: '15%', }, 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][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) + '%' + '</br >' + 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) + '%' + '</br >' + 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) + '%' + '</br >' + 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) + '%' + '</br >' + 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}' + '<br/>' + '占比:' + '{d}%', // position: ['-5%', '95%'], formatter: function (params) { return params.name + ',' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + 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) + '%' + '</br >' + 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 + '<br/>' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿元'; 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 + '<br/>' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿元'; 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) + '%' + '</br >' + 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, // }) } }, })