<template> <div class="full-box ztfx ztfxLlydCss"> <div class="" style="width: 100%;height:100%;" > <div class="top-tip-box t-title">当前位置:专题分析 > 两率一度</div> <div class="ztfx-info-box"> <div class="left-search-box"> <div class="lsb-top">数据截止时间:{{latestDate}}</div> <div class="lsb-search" style="border-bottom: 0px;"> <div class="" style="width: 100%;height:100%;" id="chartPieOne"></div> <div class="lsb-search-border"> <div class="lsbb-top"></div> <div class="lsbb-role"></div> <div class="lsbb-bottom"></div> </div> </div> <div class="lsb-info"> <div class="llyd-table result-table"> <div class="table-container-style"> <el-table :data="chartTable" :height="200"> <el-table-column align="center" label="二级指标" > <template slot-scope="scope"> <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="left"> <div class="ellipsis" style="width:100%;cursor: pointer;">{{scope.row.name}}</div> </el-tooltip> </template> </el-table-column> <el-table-column prop="value" align="center" label="权重" width="80"></el-table-column> </el-table> </div> </div> </div> </div> <div class="right-info-box"> <div class="right-left-border"> <div class="rlb-top"></div> <div class="rlb-role"></div> <div class="rlb-bottom"></div> </div> <div class="ri-box"> <div class="ztfx-charts-box" style="width:100%;height:calc(100% - 10px);"> <div class="ztfx-chart-item" style="width: 100%;margin-right:0"> <div class="roles-one"></div><div class="roles-two"></div> <div class="roles-three"></div><div class="roles-four"></div> <div class="ztfx-chart-info" style="height:calc(100% - 20px)"> <div class="llyd-item"> <div class="ztfx-chart-title"><span class="dot"></span>投入产出率</div> <div class="ztfx-chart-info" id="chartOne"></div> </div> <div class="llyd-item" style="margin-right: 0px;"> <div class="des-item two"> <div class="des-info"> <div class="di-icon one"></div> <div class="di-title">每平方公里规上企业</div> <div class="di-value"><span>{{otherTarget['每平方公里规上企业']}}</span>户</div> </div> </div> <div class="des-item two"> <div class="des-info"> <div class="di-icon two"></div> <div class="di-title">全员劳动生产率</div> <div class="di-value"><span>{{otherTarget['全员劳动生产率']}}</span>万元/人</div> </div> </div> </div> </div> </div> <div class="ztfx-chart-item" style="margin-right:20px"> <div class="roles-one"></div><div class="roles-two"></div> <div class="roles-three"></div><div class="roles-four"></div> <div class="ztfx-chart-title"><span class="dot"></span>资源利用率</div> <div class="ztfx-chart-info three" id=""> <div class="des-item three "> <div class="des-info"> <div class="di-icon three"></div> <div class="di-title">单位产出能耗</div> <div class="di-value" style="line-height: 20px;margin-top: 10px;"><span>{{otherTarget['单位产出能耗']}}</span><br/>万吨标准煤</div> </div> </div> <div class="des-item three qqq"> <div class="des-info"> <div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['工业用水重复利用率']" color="#16e1ff"></el-progress></div> <div class="di-title lll">工业用水重复利用率</div> </div> </div> <div class="des-item three qqq"> <div class="des-info"> <div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['工业固体废物综合利用率']" color="#16e1ff"></el-progress></div> <div class="di-title lll">工业固体废物综合利用率</div> </div> </div> </div> </div> <div class="ztfx-chart-item" style="margin-right:0px"> <div class="roles-one"></div><div class="roles-two"></div> <div class="roles-three"></div><div class="roles-four"></div> <div class="ztfx-chart-title"><span class="dot"></span>土地开发率</div> <div class="ztfx-chart-info three"> <div class="des-item three qqq"> <div class="des-info"> <div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['批而未用土地比例']" color="#f3e755"></el-progress></div> <div class="di-title lll">批而未用土地比例</div> </div> </div> <div class="des-item three qqq"> <div class="des-info"> <div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['建筑密度']" color="#f3e755"></el-progress></div> <div class="di-title lll">建筑密度</div> </div> </div> <div class="des-item three qqq"> <div class="des-info"> <div class="di-icon"><el-progress type="circle" :width="80" :percentage="otherTarget['容积率']" color="#f3e755"></el-progress></div> <div class="di-title lll">容积率</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </template> <script> let month = new Date().getMonth()+1; let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month; export default { name: 'jjyx', data () { return { showCondition:false, year:new Date(year).format("yyyy"), latestDate:'', locations: [], data:{q1:"32.2",q2:"139.2",q3:'123',o4: ''}, chartTable:[], otherTarget: { "工业固体废物综合利用率": 0, "建筑密度":0,"批而未用土地比例":0,"全员劳动生产率":0,"容积率":0, "每平方公里规上企业": 0,"工业用水重复利用率":0,"单位产出能耗": 0 }, defaultOp:{ title: { show: false }, legend:{show:false,height:"0"}, grid:{top:30,bottom:30}, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#777' }, crossStyle: { color: 'rgba(255,255,255,.8)', } } }, xAxis: { axisLabel:{color:'rgba(255,255,255,.9)'/*,interval:0*/}, axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}, splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}} } }, } }, mounted (){ this.getTotalData(); }, watch:{}, methods:{ initChartsByType (type){ let vm = this vm.filter.type = type }, searchResult(){ let _this = this _this.showCondition = false; _this.loadTabCharts(); }, loadTabCharts(){ /*let t1 = [{name: "投入产出率", value: 122},{name: "产出率", value: 23},{name: "投入", value: 233}]; let legend1=[]; t1.forEach(function (item) { legend1.push(item.name) }) this.drawPie("chartPieOne",t1,legend1) this.drawLineOne('chartOne',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);*/ /*this.getNhData(); this.getTzData()*/ }, getTotalData(){ let vm = this; vm.$http.get('/dx-economy-api/subject/llyd/stat',{params:{year:vm.year}}).then(function (resp) { let t = resp.data.data let legend=[]; t.category.forEach(function (item) { legend.push(item.name) }) vm.drawPie("chartPieOne",t.category,legend) vm.chartTable = t.typeList; vm.drawLineOne('chartOne',t.outputRatioHist.xAxis,t.outputRatioHist.value); vm.otherTarget = t.otherTarget; vm.latestDate = vm.$Util.isEmpty(t.latestDate)?'2019-04':t.latestDate; }) }, drawLineOne(container,cate,d1,d3){ let vm = this let myChart = vm.$echarts.init(document.getElementById(container)) let op = { xAxis: { type:"category", data: cate, axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}} }, yAxis:[ { type: 'value', name:'指标值(万元)', minInterval: 10, nameTextStyle:{color:'rgba(255,255,255,.8)'}, axisLabel:{ color:'rgba(255,255,255,.8)', formatter: function (value) { let texts = []; if(value<1000){ texts.push(value) }else if(Math.ceil(value/1000)>=1&&Math.ceil(value/1000)<10){ texts.push(Math.ceil(value/1000) + "千") }else if(Math.ceil(value/10000)>=1&&Math.ceil(value/10000)<100){ texts.push(Math.ceil(value/10000) + "万") }else if(Math.ceil(value/1000000)>=1){ texts.push(Math.ceil(value/1000000) + "百万") } return value }}, axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}, splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}} } ], series: [ { name: '指标值(万元)', type: 'bar', color:"#16e1ff", barMaxWidth:'20', data: d1,//[100,200,33,56,188,123,143,23,99],//res.zcz itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#16e1ff' // 0% 处的颜色 }, { offset: 1, color: '#16e1ff' // 100% 处的颜色 }] } } } ] } myChart.setOption($.extend(true,op,vm.defaultOp)); /*if(container == "gytz") { myChart.on('click', function (param) { let _start = "",_end = ""; vm.$router.push({name: "gytz", params: {sDate: _start, eDate: _end}}) }) }*/ }, drawPie(container,data,legend){ let vm = this let myChart = vm.$echarts.init(document.getElementById(container)) let op = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, color:['rgba(22,225,255,1)','rgba(22,225,255,0.4)','rgba(22,225,255,0.2)'], legend: {/* orient: 'horizontal',*/ bottom: '5', data:legend, textStyle:{color:"rgba(255,255,255,.8)"} }, series: [ { name:'固定资产投资占比', type:'pie', radius:['40%', '70%'], // minAngle: 30, center:['50%', '38%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, formatter: '{d}'+"%", textStyle: {fontSize: '16',color:'#fff',fontWeight: 'bold'} } }, emphasis:{show:true,position:'center'}, data:data } ] } myChart.setOption(op) /*myChart.on('click', function (param) { let _start = "",_end = ""; vm.$router.push({name:"jjyx",params:{sDate:_start,eDate:_end,bk:'',industry:param.name}}) })*/ }, } } </script> <style> .des-item.three.qqq .di-icon .el-progress--circle .el-progress__text{color:#fff;} </style> <style scoped> .ztfxLlydCss .ztfx-chart-info{} .llyd-item{width: calc(50% - 10px);height:calc(100% - 0px);margin-right: 20px;position: relative;float: left; } .llyd-item .ztfx-chart-info{height: calc(100% - 60px);float: left;} .des-item{float: left;background:rgba(2,225,255,.04);text-align: center;position: relative;} .des-item.two{width:calc(50% - 30px);margin:30px 15px;height: calc(100% - 60px);} .des-item.three{width:calc((100% / 3) - 10px);margin:10px 5px;height: calc(100% - 20px);} .des-item.three.qqq > div.des-info{width: 100%;height:calc(100% - 30px);position: absolute;top:15px;} .des-item > div.des-info{width: 100%;height: 115px;position: absolute;top:calc(50% - 56px)} .des-item.three.qqq .di-icon{height:calc(100% - 60px);display: flex;align-items: center;justify-content: center;} .di-icon{width:100%;height:35px;} .di-icon.one{background: url("../../../assets/images/llyd1.png") no-repeat center;} .di-icon.two{background: url("../../../assets/images/llyd2.png") no-repeat center;} .di-icon.three{background: url("../../../assets/images/llyd3.png") no-repeat center;background-size:auto 100%; } .di-title{height: 40px;line-height:58px;} .di-value{color: #f3e755;height: 40px;line-height:40px;} .di-value span{font-size:20px;padding-right: 5px;} .three{} .di-title.lll{height: 20px;margin-top:20px;line-height:20px;} </style>