let app = new Vue({ el: '#app', data () { return { year: '2022', time: '', timer: '', mapName: 'shanxi', geoCoordMap: {}, config1: { number: [100], content: '{nt}个', }, storageRecordConfig: { header: [], headerBGC: '#05507b33', oddRowBGC: '#05507b33', evenRowBGC: '', headerHeight: '40', rowNum: 4, align: ['center'], data: [ ['工程建设项目'], ['施工图设计'], ['工程建设项目'], ['施工图设计'], ['工程建设项目'], ], }, 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); } }, mounted () { // 左侧图表 setTimeout(() => { this.initChartL1() this.initChartL2() this.initChartL3() this.initChartL4() this.initChartR1() this.initChartR2() this.initChartR3() this.initChartR4() this.initChartR5() }, 0) }, 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(this.$refs['echartL1']) let option = { title: { text: '储备项目产业分布', x: 'center', y: '87%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'], legend: { icon: 'circle', top: 'bottom', orient: 'vertical', right: '1%', textStyle: { color: '#9DB9EB', }, }, series: [ { name: '', type: 'pie', radius: ['50%', '70%',], center: ['50%', '45%'], itemStyle: { normal: { label: { show: false, }, }, }, labelLine: { show: false, emphasis: { show: true } }, data: [ { value: 1048, name: '煤炭' }, { value: 735, name: '火电' }, { value: 580, name: '焦化' }, { value: 484, name: '风电' }, ], }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartL2 () { let myChart = echarts.init(this.$refs['echartL2']) var value = 0.45; var data = [value]; let option = { backgroundColor: 'transparent', title: [ { text: '450.12亿', x: '38%', 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']) let option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, }, grid: { top: '22%', right: '5%', left: '10%', bottom: '25%', }, xAxis: { data: ['总投资收益率', '销售利润率'], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: true, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 15, textStyle: { color: 'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: 12, }, }, }, yAxis: [ { type: 'value', splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false }, axisLabel: { show: true, formatter: '{value}', textStyle: { color: 'rgba(250,250,250,0.6)', }, }, nameTextStyle: { color: '#ebf8ac', fontSize: 16, }, }, ], series: [ { name: '', type: 'bar', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: '#082550', }, ]), }, }, data: [10, 20], 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], }, }, }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartL4 () { let myChart = echarts.init(this.$refs['echartL4']) let option = { title: { text: '储备项目产业分布', x: 'center', y: '87%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'], legend: { icon: 'circle', top: 'bottom', orient: 'vertical', right: '1%', textStyle: { color: '#9DB9EB', }, }, series: [ { name: '', type: 'pie', radius: ['50%', '70%'], center: ['50%', '45%'], itemStyle: { normal: { label: { show: false, }, }, }, labelLine: { show: false, }, data: [ { value: 1048, name: '煤炭' }, { value: 735, name: '火电' }, { value: 580, name: '焦化' }, { value: 484, name: '风电' }, ], }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartR1 () { let myChart = echarts.init(this.$refs['echartR1']) let option = { title: { text: '储备项目产业分布', x: '15%', y: '87%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'], legend: { icon: 'circle', top: 'bottom', orient: 'vertical', right: '1%', textStyle: { color: '#9DB9EB', }, }, series: [ { name: '', type: 'pie', radius: ['40%', '60%'], center: ['40%', '45%'], itemStyle: { normal: { label: { show: false, }, }, }, labelLine: { show: false, }, data: [ { value: 1048, name: '煤炭' }, { value: 735, name: '火电' }, { value: 580, name: '焦化' }, { value: 484, name: '风电' }, ], }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartR2 () { let myChart = echarts.init(this.$refs['echartR2']) let option = { title: { text: '储备项目产业分布', x: '15%', y: '87%', textStyle: { color: 'rgba(255,255,255,0.6)', fontSize: 12, }, }, tooltip: { trigger: 'item', }, color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'], legend: { icon: 'circle', top: 'bottom', orient: 'vertical', right: '1%', textStyle: { color: '#9DB9EB', }, }, series: [ { name: '', type: 'pie', radius: ['40%', '60%'], center: ['40%', '45%'], itemStyle: { normal: { label: { show: false, }, }, }, labelLine: { show: false, }, data: [ { value: 1048, name: '煤炭' }, { value: 735, name: '火电' }, { value: 580, name: '焦化' }, { value: 484, name: '风电' }, ], }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartR3 () { let myChart = echarts.init(this.$refs['echartR3']) let option = { title: { text: '固定资产项目', textStyle: { color: '#69C0FF', }, top: '10', left: '10' }, textStyle: { color: '#fff', }, tooltip: { trigger: "axis", axisPointer: { lineStyle: { type: 'dashed', width: 2, color: 'rgba(255,255,255,0.6)' }, animation: true } }, grid: { top: '22%', right: '5%', left: '10%', 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]) * 0.5; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#45DAD1' } }, data: [ ['项目储备', '批量备案', 200], ['项目立项', '批量备案', 1500], ['项目可研', '批量备案', 2000], ['可研论证', '批量备案', 2500], ['投资决策', '批量备案', 3000], ] }, { name: '特别监管', type: 'scatter', symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' symbolSize: function (data) { return Math.sqrt(data[2]) * 0.5; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#40A9FF' } }, data: [ ['项目储备', '特别监管', 1400], ['项目立项', '特别监管', 1500], ['项目可研', '特别监管', 5500], ['可研论证', '特别监管', 500], ] } ] } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartR4 () { let myChart = echarts.init(this.$refs['echartR4']) let option = { title: { text: '当居企后评价项目数后', x: 'center', y: '3%', textStyle: { color: '#69C0FF', fontSize: 14, }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, }, grid: { top: '22%', right: '5%', left: '10%', bottom: '15%', }, legend: { data: '', top: '12%', right: '5%', textStyle: { color: 'rgba(250,250,250,0.6)', fontSize: 16, }, }, xAxis: { data: ['一级', '二级'], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 15, textStyle: { color: 'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: 16, }, }, }, yAxis: [ { type: 'value', nameTextStyle: { color: '#ebf8ac', fontSize: 16, }, splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false, }, axisLabel: { show: true, textStyle: { color: 'rgba(250,250,250,0.6)', 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: [10, 20], }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartR5 () { let myChart = echarts.init(this.$refs['echartR5']) let option = { title: { text: '当属企业评分情况', x: 'center', y: '3%', textStyle: { color: '#69C0FF', fontSize: 14, }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, }, grid: { top: '22%', right: '5%', left: '10%', bottom: '15%', }, legend: { data: ['过程管控企业层得分', '发展线指标情况企业层得分'], top: '12%', right: '5%', textStyle: { color: 'rgba(250,250,250,0.6)', fontSize: 12, }, }, xAxis: { data: ['一级', '二级'], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 15, textStyle: { color: 'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: 16, }, }, }, yAxis: [ { type: 'value', nameTextStyle: { color: '#ebf8ac', fontSize: 16, }, splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false, }, axisLabel: { show: true, textStyle: { color: 'rgba(250,250,250,0.6)', fontSize: 16, }, }, }, ], series: [ { name: '过程管控企业层得分', type: 'bar', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#5e7ae9', }, { offset: 1, color: '#082550', }, ]), }, }, data: [10, 20], }, { 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: [10, 20], }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) } }, })