Newer
Older
smart-economy / src / components / economic / subject / llyd.vue
StephanieGitHub on 29 Jan 2021 14 KB MOD: 去掉饼图minAngle的限制
<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>