Newer
Older
smart-economy / src / components / economic / yztInfo / qyfz.vue
StephanieGitHub on 26 Jan 2021 28 KB first commit
<template>
  <div class="full-box jjyxyzt">
    <div class="" style="width: 100%;height:100%;" >
      <div class="map-box">
        <div class="top-tip-box t-title">当前位置:经济运行一张图  >  企业发展一张图</div>
        <div class="maps qu-map" v-show="!companyMap">
          <div class="map-item"  v-for="item in mapList" :class="[item.className]" @click="goCompanyMap(item)" @mouseenter="showQuTotal(item)"  @mouseleave="showQuDeatil=false">
            <div class="name-dot" v-if="false"></div><div class="name-text" v-if="false">{{item.name}}</div>
          </div>
        </div>
        <div class="map-detail-box qu-detail-box" style="background: rgba(4,30,90,0.5)" v-if="showQuDeatil">
          <div class="map-border-top">
            <div class="mb-left"></div>
            <div class="mb-right"></div>
          </div>
          <div class="map-border-left">
            <div class="mb-top"></div>
            <div class="mb-center"></div>
            <div class="mb-bottom"></div>
          </div>
          <div class="map-info-box">
            <div class="map-title-box">
              <div class="map-title"><span class="dot"></span><div>{{quDetail.name}}</div></div>
              <div class="more-mapmb-right" style="position: absolute;top: -10px;right:10px;color: #fff;font-size: 20px;"></div>
            </div>
            <div class="" style="width: 100%;text-align: left;margin-top: -10px;margin-bottom: 5px;">(数据时间:{{filter.startDate}} 至 {{filter.endDate}})</div>
            <div class="map-detail-row"><div class="mdr-label">板块企业数:</div><div class="mdr-data">{{quDetail.qyNum}}</div></div>
            <div class="map-detail-row"><div class="mdr-label">板块工业总产值:</div><div class="mdr-data">{{quDetail.gyzcz}}</div></div>
            <div class="map-detail-row"><div class="mdr-label">板块规上企业数:</div><div class="mdr-data"> {{quDetail.gsqyNum}}</div></div>
            <div class="map-detail-row"><div class="mdr-label">板块规上企业总产值:</div><div class="mdr-data">{{quDetail.gsqycz}}</div></div>
          </div>
        </div>
        <div class="map-search-boxs" style="height: 34px;width: 100%;">
          <div class="back-index" v-show="companyMap"  @click="back" style="margin-top:3px;float: right"  >返回</div>
          <div class="map-search-box" style="" v-show="companyMap" >
            <div class="sl-row-label" style="width: 100px;line-height:34px;">企业名称:</div>
            <el-input v-model="searchCommpanyName" placeholder="支持企业名称查询" style="width:200px;float: left;"></el-input>
            <el-button class="search-btn" type="primary" @click="searchresult">查询</el-button>
          </div>
        </div>
        <div  class="all-maps aaa qyResultList" v-show="companyMap"  style="position: relative">
          <div class="map-box" id="mapDiv" style="width: 100%;height: 100%;position:relative"></div>
          <div class="search-by-company" v-if="companyListBox">
            <div class="close-btn" @click="companyListBox=false"><i class="el-icon-close"></i></div>
            <div class="list-title" v-if="false">查询结果列表</div>
            <div class="list-body">
              <div class="list-li" v-for="(item,index) in resultList" :key="index" @click="goMapAddress(item)">{{index+1}}. {{item.companyName}}-{{item.plat}}</div>
              <div class="list-title" v-if="$Util.isEmpty(resultList)">暂无企业数据!</div>
            </div>
          </div>
        </div>
        <div class="map-detail-box" style="" v-if="showMapBk">
          <div class="map-border-top">
            <div class="mb-left"></div>
            <div class="mb-right"></div>
          </div>
          <div class="map-border-left">
            <div class="mb-top"></div>
            <div class="mb-center"></div>
            <div class="mb-bottom"></div>
          </div>
          <div class="map-info-box">
            <div class="map-title-box">
              <div class="map-title"><span class="dot"></span><div>{{companyDetail.companyName}}</div></div>
              <div class="map-qy" v-if="false">区域:{{companyDetail.companyName}}</div>
              <div class="more-mapdetail" style="position: absolute;top: -10px;right:10px;color: #fff;font-size: 20px;" @click="showMapBk=false" ><i class="el-icon-close"></i> </div>
            </div>
            <div class="map-detail-row"><div class="">地  址:</div><div class="">{{companyDetail.address}}</div></div>
            <div class="map-detail-row"><div class="">行  业:</div><div class="">{{companyDetail.industry}}</div></div>
            <div class="map-detail-row"><div class="">是否规上企业:</div><div class="">{{companyDetail.isGs}}</div></div>
            <div class="map-detail-row"><div class="">负责人(法人):</div><div class="">{{companyDetail.legalPerson}}</div></div>
            <div class="map-detail-row"><div class="">工业税收:</div><div class="">{{companyDetail.gyss}}</div></div>
            <div class="map-detail-row"><div class="">主营业务收入:</div><div class="">{{companyDetail.zyywsr}}</div></div>
            <div class="more-mapdetail" @click="goCompantDetail(companyDetail.id)">更多>></div>
          </div>
        </div>
      </div>
      <div class="charts-box" style="position:relative">
        <div class="hasSearch-box" style="height: 100%;">
          <div class="chart-item-box charts-one-box">
            <div class="charts-line-top">
              <div class="line-left-icon"></div>
              <div class="line-left"></div>
            </div>
            <div class="charts-line-bottom">
              <div class="lb-one"></div>
              <div class="lb-icon"></div>
              <div class="lb-two"></div>
            </div>
            <div class="chart-con-box">
              <div class="map-title"><span class="dot"></span>企业数量发展分布图</div>
              <div class="chart-li-box" id="chartsOne"></div>
            </div>
          </div>
          <div class="chart-item-box charts-two-box">
            <div class="charts-line-bottom" style="top:0;">
              <div class="lb-one"></div>
              <div class="lb-icon"></div>
              <div class="lb-two"></div>
            </div>
            <div class="charts-line-left">
              <div class="cl-line"></div>
              <div class="cl-icon"></div>
            </div>
            <div class="charts-line-bottom">
              <div class="lb-one"></div>
              <div class="lb-icon"></div>
              <div class="lb-two"></div>
            </div>
            <div class="chart-con-box">
              <div class="select-types" style="top:-7px">
                <div class="more-data more-detail" @click="forecastShow('qy')" v-if="false">预测</div>
              </div>
              <div class="map-title"><span class="dot"></span>企业规模分布图</div>
              <div class="chart-li-box" id="chartsTwo"></div>
            </div>
          </div>
          <div class="chart-item-box charts-three-box">
            <div class="charts-line-bottom" style="top:0;">
              <div class="lb-one"></div>
              <div class="lb-icon"></div>
              <div class="lb-two"></div>
            </div>
            <div class="charts-line-top" style="">
              <div class="line-left-icon" style="transform: rotate(180deg)"></div>
              <div class="line-left"></div>
            </div>
            <div class="chart-con-box">
              <div class="select-types">
                <el-select v-model="qyType" placeholder="请选择"  class="more-data more-select" style="right:50px;top:5px;" @change="changeQyType">
                  <el-option label="全部" value=""></el-option>
                  <el-option v-for="item,index in typeList" :key="item.index" :label="item.name" :value="item.value"> </el-option>
                </el-select>
                <div class="more-data more-detail" @click="moreDataClick()">更多>></div>
              </div>
              <div class="map-title"><span class="dot"></span>企业工业总产值排名</div>
              <div class="chart-li-box1 bgss table-container-style" style="width:100%;height: calc(100% - 20px);margin:40px 0 0;">
                <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;" @click="jumpToDetail(scope.row)">{{scope.row.name}}</div>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" align="center" label="产值(亿元)"></el-table-column>
                  <el-table-column prop="valueTb" align="center" label="同比"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="企业发展数量" :visible.sync="showForecast" width="600px" @opened="qyfzNumByTime" :close-on-click-modal=false>
      <div class="jjyx-tab-box">
        <div class="tab-item" @click="qyfzNumByTime('month')">按月预测</div>
        <div class="tab-item" @click="qyfzNumByTime('year')">按年预测</div>
      </div>
      <div class="pop-chart-box" id="popQyfzChart"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showForecast = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" :close-on-click-modal=false top="40px">
      <el-table :data="moreData.list" highlight-current-row style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
        <el-table-column property="name"  label="企业名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column property="value"  label='产值(亿元)'  align="center"></el-table-column>
        <el-table-column property="valueTb"  label="同比" align="center" width="150"></el-table-column>
      </el-table>
      <el-pagination @current-change="morePageChange" background layout="prev, pager, next" :page-size="moreData.pageSize" :current-page="moreData.pageNum" :total="moreData.total" style="text-align: right;"></el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let month = new Date().getMonth()==0?0:new Date().getMonth();
  let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
  let years =new Date().getFullYear()-1 ;
  export default {
    name: 'qyfz',
    data () {
      return {
        showCondition:false,
        filter:{
          startDate:years+"-01",
          endDate:new Date().format("yyyy-MM")
        },
        qyType:'',
        MapData:null,
        typeList:[
          {id:'',name:'全部'},
          {id:'ssgs',name:'上市公司'},
          {id:'gxqy',name:'高新技术企业'},
        ],
        chartTable:[],
        defaultOp:{
          title: { show: false },
          legend:{show:false,height:"0"},
          grid:{top:10,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)'}}
          }
        },
        chartsTitle:{ left:'',right:''},
        /**/
        showForecast:false,
        timeType:'month',
        title:'企业工业总产值排名',
        ndUnit:'能耗(标准煤)',
        dialogVisible:false,
        moreData:{list:[{cid: 2, name: "江西科伦 ", nh: 125391.1, cz: 12.45},], pageNum:1, pageSize:10, total:0},
        /*map*/
        mapList:[
          {name:'科技孵化园',className:'kjfhy',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0},
          {name:'大富工业园',className:'df',lat:'460128.551330566',lon:'3119428.95727539',companyName:'江西科诺生物科技有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0},
          {name:'浅水湾工业园',className:'qsw',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0},
          {name:'东山工业园',className:'ds',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0},
          {name:'渊山岗工业园',className:'ysg',lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司',qyNum:0,gyzcz:0,gsqyNum:0,gsqycz:0}
        ],
        showMapBk:false,
        map:null,
        companyMap:false,showQuDeatil:false,initCompanyData:null,
        companyDetail:{companyName:'',street:'',industryName:'',socialCreditCode:'',qyzczb:'',qyclrq:''},
        quDetail:{name:'',street:'',industryName:'',socialCreditCode:'',qyzczb:'',qyclrq:''},
        searchCommpanyName:'',companyListBox:false,
        zoomVal:9329.174820613116,maxZommVal:146.3339856490493,
        resultList:[{lat:'460129.790283203',lon:'3127423.86047363',companyName:'江西美尔丝瓜络有限公司'}]
      }
    },
    mounted (){
      this.GLOBAL.app.getDictList(resp => {
        this.typeList = resp["企业标签"];
      })
      this.getQuData();
      this.loadTabCharts();
    },
    methods:{
      /*map start*/
      getQuData(){
        let vm = this;
        vm.$http.get('/dx-economy-api/map/plat',{params:vm.filter}).then(function (resp) {
          let _data = resp.data;
          if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            vm.mapList = _data.data;
          }
        })
      },
      showQuTotal(item){
        this.showQuDeatil = true;
        this.quDetail = item;
      },
      goCompantDetail(id){
        this.$router.push({name:"qyDataManage",params:{id:id}})
      },
      goCompanyMap(data){
        this.companyMap = true;
        this.initCompanyData = data;
        this.createMap();
      },
      back(){
        this.companyMap = false;
        this.showMapBk = false;
        this.companyListBox = false;
        this.searchCommpanyName=''
      },
      searchresult(){
        let vm = this;
        vm.$http.get('/dx-economy-api/company', {params: {companyName:vm.searchCommpanyName}}).then(function (resp) {
          let _data = resp.data;
          if(_data.code === 200){
            let companyList =  _data.data;
            if (companyList.length == 1){
              vm.goMapAddress(companyList[0]);
            }else{
              vm.resultList = companyList;
              vm.companyListBox = true;
            }
          } else {
            vm.$message.error(_data.message);
          }
        })

      },
      goMapAddress(item){
        let vm = this;
        vm.showMapBk = true;
        vm.companyDetail = item;
        var pt = new esri.geometry.Point(item.lat,item.lon,vm.wgs);
        if (vm.zoomVal > vm.maxZommVal) {
          var zoomNum = vm.maxZommVal / vm.zoomVal;
          vm.map.centerAndZoom(pt, zoomNum);
        } else {
          vm.map.centerAt(pt);
        }
      },
      createMap(){
        let vm = this;
        var djConfig = { parseOnLoad: true };
        dojo.require("esri.map");
        dojo.require("esri.graphic");
        dojo.require("esri.layers.ArcGISTiledMapServiceLayer");
        dojo.require("esri.symbols.PictureMarkerSymbol");
        dojo.require("esri.layers.GraphicsLayer");
        dojo.require("esri.geometry.Point");
        dojo.require("esri.geometry.Multipoint");
        dojo.require("esri.SpatialReference");
        vm.wgs = new esri.SpatialReference({"wkid": 2384});
        if(vm.$Util.isEmpty(vm.map)) {
          var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://223.84.218.79:18093/arcgis/rest/services/dongxaingjkqmap0128/MapServer");
          vm.map = new esri.Map("mapDiv", {logo: false});
          vm.map.addLayer(layer);
          /*加载图层*/
          vm.$http.get('/dx-economy-api/company', {}).then(function (resp) {
            let _data = resp.data;
            _data.data.forEach(function (item) {
              addPointSymbol(item, item)
            });
          });
        }else{
          /*detail*/
          var pt = new esri.geometry.Point(vm.initCompanyData.lat,vm.initCompanyData.lon,vm.wgs);
          if (vm.zoomVal > vm.maxZommVal) {
            var zoomNum = vm.maxZommVal / vm.zoomVal;
            vm.map.centerAndZoom(pt, zoomNum);
          } else {
            vm.map.centerAt(pt);
          }
        }
        function addPointSymbol(point, attributes) {
          point = new esri.geometry.Point(point.lat, point.lon);
          var symbol = new esri.symbols.PictureMarkerSymbol("./static/building.png", 30, 44).setOffset(0, 15);
          var graphicsLayer = new esri.layers.GraphicsLayer();
          var graphic = new esri.Graphic(point, symbol, attributes);
          vm.map.graphics.add(graphic);
          vm.map.addLayer(graphicsLayer);
        };
        vm.map.on('load',function () {
          $("#mapDiv").height("100%").width("100%");
          vm.map.resize();
          vm.map.on("extent-change", function (event) {
            var extentVal = event.extent;
            vm.zoomVal = extentVal.ymax - extentVal.ymin;
          });
          /*click事件*/
          vm.map.graphics.on('click',function (event) {
            vm.showMapBk = true;
            vm.companyDetail = event.graphic.attributes;
            var pt = new  esri.geometry.Point(vm.companyDetail.lat,vm.companyDetail.lon,vm.wgs);
            if (vm.zoomVal > vm.maxZommVal) {
              var zoomNum = vm.maxZommVal/vm.zoomVal;
              vm.map.centerAndZoom(pt,zoomNum);
            }else{
              vm.map.centerAt(pt);
            }
          })
          /*初次 定位到detail*/
          var pt = new esri.geometry.Point(vm.initCompanyData.lat, vm.initCompanyData.lon, vm.wgs);
          if (vm.zoomVal > vm.maxZommVal) {
            var zoomNum = vm.maxZommVal / vm.zoomVal;
            vm.map.centerAndZoom(pt,zoomNum);
          } else {
            vm.map.centerAt(pt);
          }
        })
        var resizeTimer;
        dojo.connect(vm.map, 'onLoad', function(theMap) {
          dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
              vm.map.resize();
              vm.map.reposition();
            }, 500);
          });
        });
      },
      /*map end*/
      searchByCondition(){
        let _this = this
        _this.showCondition = true;
      },
      searchResult(){
        let _this = this
        _this.showCondition = false;
        _this.loadTabCharts();
      },
      loadTabCharts(){
        /*this.chartsTitle.left='吨标准煤';this.chartsTitle.right='同比';
        this.drawLine('chartsOne',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);
        let t = [{name: "企业产值100亿以上企业", value: 122},{name: "企业产值50-100亿以上企业", value: 233},{name: "企业产值10-50亿以上企业", value: 453},{name: "企业产值5-10亿以上企业", value: 453},{name: "企业产值1-5亿以上企业", value: 453}];
        let legend=[];
        t.forEach(function (item) {
          legend.push(item.name)
        })
        this.drawPie("chartsTwo",t,legend)*/
        this.getOneData();
        this.getTwoData();
        this.getChartsTableData();
      },
      changeQyType(data){
        let vm = this
        vm.qyType = data;
        vm.getChartsTableData();
      },
      getOneData(){
        let vm = this;
        vm.$http.get('/dx-economy-api/qyfzCharts/qyfz',{params:{}}).then(function (resp) {
          let t = resp.data.data
          vm.chartsTitle.left='';vm.chartsTitle.right='';
          vm.drawLine('chartsOne',t.xAxis,t.value,null,null);
        })
      },
      getTwoData(){
        let vm = this;
        vm.$http.get('/dx-economy-api/qyfzCharts/qygm',{params:{}}).then(function (resp) {
          let t = resp.data.data;
          /*let t = [{name: "企业产值100亿以上企业", value: 122},{name: "企业产值50-100亿以上企业", value: 233},{name: "企业产值10-50亿以上企业", value: 453},{name: "企业产值5-10亿以上企业", value: 453},{name: "企业产值1-5亿以上企业", value: 453}];*/
          let legend=[];
          t.forEach(function (item) {
            legend.push(item.name)
          })
          vm.drawPie("chartsTwo",t,legend)
        })
      },
      getChartsTableData(){
        let vm = this;
        vm.$http.get('/dx-economy-api/qyfzCharts/qysort',{params:{pageNum:1,pageSize:5,type:vm.qyType}}).then(function (resp) {
          let t = resp.data.data;
          t.list.forEach(function (i,k) {
            i.valueTb = i.valueTb +'%';
          });
          vm.chartTable= t.list
        })
      },
      /*预测*/
      qyfzNumByTime(type){
        let vm = this
        vm.chartsTitle.left='吨标准煤';vm.chartsTitle.right='同比';
        vm.drawLine('popQyfzChart',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);
      },
      /*pop-table*/
      morePageChange(currentPage){
        this.getMoreTableData(currentPage)
      },
      moreDataClick(){
        this.getMoreTableData(1)
        this.dialogVisible = true
      },
      getMoreTableData(pageNum){
        let vm = this;
        let pageNums = vm.$Util.isEmpty(pageNum) ?vm.moreData.pageNum:pageNum;
        vm.$http.get('/dx-economy-api/qyfzCharts/qysort',{params:{pageNum:pageNums,pageSize:10,type:vm.qyType}}).then(function (resp) {
          let temp = resp.data.data;
          temp.list.forEach(function (i,k) {
            i.valueTb = i.valueTb +'%';
          });
          vm.moreData.list = temp.list;
          vm.moreData.pageNum = temp.pageNum;
          vm.moreData.total = temp.total;
        })
      },
      /**/
      drawLine(container,cate,d1,d2,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: vm.chartsTitle.left,
              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 texts
                }},
              axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
              splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
            },
            {
              type: 'value',
              name: vm.chartsTitle.right,
              show:vm.chartsTitle.right ==''?false:true,
              minInterval: 100,
              nameTextStyle:{color:'rgba(255,255,255,.8)'},
              axisLabel:{color:'rgba(255,255,255,.8)'},
              axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
              splitLine:{show:false}
            }
          ],
          series: [
            {
            name: vm.chartsTitle.left,
            type: 'bar',
            color:"#6ee988",
            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: '#6ee988' // 0% 处的颜色
                }, {
                  offset: 1, color: '#6ee988' // 100% 处的颜色
                }]
              }
            }
          },
            {
              name: vm.chartsTitle.left,
              type: 'bar',
              color:"#16e1ff",
              data: d2,//[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% 处的颜色
                  }]
                }
              }
            },
            {
            name: vm.chartsTitle.right,
            type: 'line',
            yAxisIndex: 1,
            color:"#e0e63d",
              show:vm.chartsTitle.right ==''?false:true,
            data: d3,//[10,20,30,44,77,55,66,22,100],//res.tb
            areaStyle: {
              color: {
                type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{
                  offset: 0, color: '#e0e63d' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }]
              }
            }
          }]
        }
        myChart.setOption($.extend(true,op,vm.defaultOp));
      },
      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:['#efca5a','#7dbbea','#dd798f','#6e89ed','#a8de74','#f69914','#f61474'],
          legend: {
            type: 'scroll',
            orient: 'vertical',
            x:"left",
            data:legend,
            textStyle:{color:"rgba(255,255,255,.8)"}
          },
          series: [
            {
              name:'固定资产投资占比',
              type:'pie',
              radius:['50%', '88%'],
              minAngle: 30,
              center:['65%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show:false,
                  formatter: '{b|{b}}{abg|}\n{hr|}\n {c}  {per|{d}%}  ',
                  /*backgroundColor: '#eee',
                  borderColor: '#aaa',*/
                  /*borderWidth: 1,
                  borderRadius: 4,*/
                  rich: {
                    hr: {borderColor: 'rgba(255,255,255,.3)',width: '100%',borderWidth: 0.5,height: 0},
                    b: {lineHeight: 22,align: 'center',fontSize:10},
                    per: {backgroundColor: '#334455',padding: [2, 4],borderRadius: 2}
                  }
                },
              },
              data:data
            }
          ]
        }
        myChart.setOption(op)
      },
    }
  }
</script>
<style>
  .search-row-condition .el-date-editor .el-range-input{width:35%!important;}
  .jjyxyzt .more-data.more-select{right:50px;width:100px;position:absolute;background:rgba(22,225,255,.25);font-size: 10px;}
  .jjyxyzt .more-data.more-select .el-input--suffix .el-input__inner{border: none;background: rgba(7,182,255,0);padding: 0 13px 0 0;height: 20px;line-height: 20px;}
  .jjyxyzt .more-data.more-select .el-input__suffix{right:0px}
  .jjyxyzt .more-data.more-select.el-select .el-input .el-select__caret{width:13px!important;}
  .jjyxyzt .yzt-table{width:100%;height:calc(100% - 10px);text-align: left;margin: 10px auto 0;color: rgba(255,255,255,.8);}
  .jjyxyzt .yzt-table thead {background:rgba(22,225,255,.25);}
  .jjyxyzt .yzt-table thead tr th{padding: 3px;}
  .jjyxyzt .yzt-table tr td{border-bottom: 1px dotted rgba(255,255,255,.9);padding:5px 0px;}


</style>
<style scoped>

</style>