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//延时器需要清除

  ngOnInit(): void {
    this.setTimeoutObj = window.setTimeout(()=>{
      this.initCharts("pieone")
      this.initCharts("pietwo")
    },0)
    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//首页饼状图实例
  /* 首页饼状图 */
  initCharts(id){
    this.indexBzt = echarts.init(document.getElementById(id),'walden');
    let options={
      title: {
        text:id=="pieone"? '组织机构统计（8900家）':'建筑类型统计（8900家）',
        left: 'center',
        top: "5%",
        textStyle: {
          fontSize:31
        }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(id=="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: id=="pieone"?this.zhiNameData:this.buildingData
      },
      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:id=="pieone"?[
              {value: 500, name: this.zhiNameData[0]},
              {value: 800, name: this.zhiNameData[1]},
              {value: 900, name: this.zhiNameData[2]},
              {value: 800, name: this.zhiNameData[3]},
              {value: 1200, name: this.zhiNameData[4]},
              {value: 1500, name: this.zhiNameData[5]},
              {value: 1400, name: this.zhiNameData[6]},
              {value: 600, name: this.zhiNameData[7]},
              {value: 568, name: this.zhiNameData[8]},
              {value: 888, name: this.zhiNameData[9]},
              {value: 485, name: this.zhiNameData[10]},
              {value: 966, name: this.zhiNameData[11]},
              {value: 789, name: this.zhiNameData[12]},
              {value: 500, name: this.zhiNameData[13]},
              
          ]:[
              {value: 500, name: '高层'},
              {value: 800, name: '地下'},
              {value: 900, name: '轨道交通'},
              {value: 800, name: '化工生产'},
              {value: 1200, name: '储罐类'},
              {value: 1500, name: '厂房'},
              {value: 1400, name: '古建筑'},
              {value: 600, name: '商市场'},
              {value: 568, name: '医院'},
              {value: 888, name: '学校'},
              {value: 485, name: '宾馆'},
              {value: 966, name: '娱乐场所'},
              {value: 789, name: '餐饮业'},
              {value: 500, name: '影剧院'},
              {value: 1025, name: '展览建筑'},
              {value: 600, name: '隧道'}],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    this.indexBzt.on('click', (params) => {
      this.router.navigateByUrl('/statisticanalysis/addUnit_one/addUnit_two_type');
      id=="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
  }

  
}