ShangHaiYuan-AnXin/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {EchartsDataService,} from '../../echarts-data.service';
declare var echarts: any;
@Component({
  selector: 'app-add-unit-one',
  templateUrl: './add-unit-one.component.html',
  styleUrls: ['./add-unit-one.component.scss']
})
export class AddUnitOneComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  setTimeoutObj//延时器需要清除
  tabledata

  ngOnInit(): void {
    /* this.buildData.push(this.echartsData.getData(null,`/api/StatisticsAnalysis/BuildingTypes`))
    this.orData=this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`) */
    this.echartsData.getData(null,`/api/StatisticsAnalysis/Companies`)
    this.setTimeoutObj = window.setTimeout(()=>{
      this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate))
      console.log(this.tabledata)
      this.initCharts("pieone")
      this.initCharts("pietwo")
    },1000)
    this.echartsData.eventEmit.subscribe((value: any) => {
      if (value == 'echarts') {
        setTimeout(() => {
          this.indexBzt.resize()
        }, 500);
      
      }
    });
  }
  //更新echarts视图
  updateEcharts(){
    this.indexBzt.resize()
  }
  //组件销毁时
  ngOnDestroy(){
    window.clearTimeout(this.setTimeoutObj);
    this.indexBzt.clear()
    this.indexBzt.dispose()
  }
  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
  buildingData=["高层","地下","轨道交通","化工生产","储罐类","厂房","古建筑","商市场","医院","学校","宾馆","娱乐场所","餐饮业","影剧院","展览建筑","隧道"]
  indexBzt//首页饼状图实例
  /* 首页饼状图 */
  lengthBuildData=[]
  lengthOrData=[]
  buildData=[]
  orData=[]
  initCharts(tid){
    for(var i=0;i<this.tabledata[0].buildingTypeStatistics.buildingTypes.length;i++){
      this.buildData.push(this.tabledata[0].buildingTypeStatistics.buildingTypes[i])
      this.lengthBuildData.push(this.tabledata[0].buildingTypeStatistics.buildingTypes[i].buildingTypeName)
    }
    for(var i=0;i<this.tabledata[0].organizationStatistics.organizations.length;i++){
      this.orData.push(this.tabledata[0].organizationStatistics.organizations[i])
      this.lengthOrData.push(this.tabledata[0].organizationStatistics.organizations[i].organizationName)
    }
    console.log(this.buildData)
    this.buildData=this.buildData.map(v=>{return {name: v.buildingTypeName,value:v.count,id:v.buildingTypeId}})
    this.orData=this.orData.map(v=>{return {name: v.organizationName,value:v.count,id:v.organizationId}})
    console.log(this.buildData)
    this.indexBzt = echarts.init(document.getElementById(tid),'walden');
    let options={
      title: {
        text:tid=="pieone"? `组织机构统计（${this.tabledata[0].organizationStatistics.totalCount}家）`:`建筑类型统计（${this.tabledata[0].buildingTypeStatistics.totalCount}家）`,
        left: 'center',
        top: "5%",
        textStyle: {
          fontSize:31
        }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          console.log(params)
          return this.echartsData.tableTooltip(tid=="pieone"?this.echartsData.buildingType:this.echartsData.tableDataZhi,params.name)
        },
        position:this.echartsData.tableTooltipNoShow2
      },
      legend: {
        orient: 'vertical',
        right: 0,
        top:80,
        textStyle:{
          fontSize:14,
          color:"#000000"
           },
        data: tid=="pieone"?this.lengthOrData:this.lengthBuildData
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '60%',
          center: ['45%', '53%'],
          label:{
            show:true,
            fontSize:14,
            formatter:'{b}{c}家\n{d|({d}%)}',
            rich: {
              d: {
                align: 'center',
                fontSize:18
              }
            },
          },
          data:tid=="pieone"?this.orData:this.buildData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    this.indexBzt.on('click', (params) => {
      if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){
        //总队,支队，大队跳转
        this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type'],{queryParams:{'level':params.name,'id':params.data.id}});
      }else{
        //中队跳转
        this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}});
      }
      
      tid=="pieone"?this.echartsData.zuzhiorBuilding="zhi":this.echartsData.zuzhiorBuilding="building"
    });
    this.indexBzt.setOption(options);
  }
  biaogeTishi(biaotou:string){
    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄浦支队","number":"144","zhanbi":"2.8%"},'
    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
    var jsonObj =  JSON.parse(shuju);
    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
        res+='<thead><tr>';
        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
        res+='</tr></thead>'
        res+='<tbody>';
        for(var i=0;i<jsonObj.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
        }
        
        res+='</tbody>'
        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
        res+='</table></div></div>'
        return res
  }

  
}