|
|
@@ -0,0 +1,3672 @@
|
|
|
+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¦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: 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: `<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: {
|
|
|
+ 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: `<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: {
|
|
|
+ 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}' + '<br/>' + '发展线：' + '{c1}' + '<br/>' + '生存线：' + '{c2}', //+ '<br/>'+ '{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) + '%' + '</br >' + 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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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) + '%' + '</br >' + 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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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) + '%' + '</br >' + 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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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) + '%' + '</br >' + 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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}' + '<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: ['#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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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) + '%' + '</br >' + 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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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 + '<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: '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 + '<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: '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) + '%' + '</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,
|
|
|
+ // })
|
|
|
+
|
|
|
+ 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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}%<br/>${this.y}亿，${num}个`
|
|
|
+ } //''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '占比',
|
|
|
+ //center: ['35%','50%'],
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ }, 50)
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+})
|
zhbyyy
