ShangHaiYuan-AnXin/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
import { EchartsDataService } from '../../echarts-data.service';
declare var echarts: any;
@Component({
  selector: 'app-add-unit-three-bar-details',
  templateUrl: './add-unit-three-bar-details.component.html',
  styleUrls: ['./add-unit-three-bar-details.component.scss']
})
export class AddUnitThreeBarDetailsComponent implements OnInit {

  constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { }
  time:String
  buildingTypeName:String
  level:String

  setTimeoutObj//延时器需要清除

  ngOnInit(): void {
    this.dateInit ()
    
    this.route.queryParams.subscribe(params => {
      this.time = params['time'];
      this.buildingTypeName = params['buildingTpye'];
      this.level = params['level'];
      this.bianli()
    });
    this.setTimeoutObj = window.setTimeout(()=>{
      this.detailEcharts()
    },0)
  }
  ngOnDestroy(){
    window.clearTimeout(this.setTimeoutObj);
    this.detailPlanEchart.clear()
    this.detailPlanEchart.dispose()
  }

  selectType:string = 'month'; //选择当前的 查询类型 按月/年

  //查询数据
  years:any = []
  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]

  //日期初始化
  dateInit () {
    let date = (new Date()).getFullYear()
    for (let i=date; i>=date-10;i--) {
      this.years.unshift(i)
    }
  }
  selectOneYear:any = (new Date()).getFullYear() //开始年份
  selectStartMonth:any = 1 //开始月份
  Submit (e) {
    
  }
  selectStartYear:any = (new Date()).getFullYear() //开始年份


  topTextlabel = {
    show: true, // 开启显示
    position: 'top', // 在上方显示
    distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    verticalAlign: 'middle',
    textStyle: { // 数值样式
      color: 'black',
      fontSize: 12
    }
  }//柱状图数值顶部显示
  zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
  zhongNumData = [300,290,280,270,260,250,240,230,220,210,200]

  zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"]
  zhiNumData = [300,290,280,270,260,250,240,230,220,210,200]
  tiaoshiPao:any
  //气泡提示数据获取
  bianli(){
    this.tiaoshiPao=null
    var arrshuzu='[';
    if(this.level == 'zhidui'){
      for(var i=0;i<this.zhiNumData.length;i++){
        arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
      }
    }
    else{
      for(var i=0;i<this.zhongNumData.length;i++){
        arrshuzu+='{"value":'+this.zhongNumData[i]+',"coord":['+i+','+this.zhongNumData[i]+'],"name":'+'"'+this.zhongNameData[i]+'"'+'},'
      }
    }
    
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'
    this.tiaoshiPao=JSON.parse(arrshuzu)
    console.log(this.tiaoshiPao)
    //return tishiPao
  }

  detailPlanEchart
  option
  detailEcharts(){
    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'),'walden');  
    this.option = {
      title: {
        text: this.time + '(' +this.buildingTypeName + ')'+'：总数(666)',
        left: "center",
        textStyle: {
          fontSize: 30
        }
      },
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :18,
              color:'#000000'
            }
            
          }
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :18,
              color:'#000000'
            }
            
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.tableTooltip(params)
        },
        position:this.serviceData.tableTooltipNoShowq
      },
      series: [{
          data: this.zhiNumData,
          type: 'bar',
          markPoint: {
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          barWidth :'58',
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          //label: this.topTextlabel
      }]

    };
    this.detailPlanEchart.setOption(this.option);
    this.detailPlanEchart.on("click",(params)=>{
      if(this.level == "zhidui"){//如果是支队则跳转
        // this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhongdui','time':params.name,'buildingTpye':this.buildingTypeName}});
        this.level = "zhongdui"
        this.option.title.text = params.name + '(' +this.buildingTypeName + ')'
        this.option.xAxis.data = this.zhongNameData
        this.option.series[0].data = this.zhongNumData
        this.detailPlanEchart.setOption(this.option)
      }else{
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('已到达最底层','确定',config);
      }
    })
  }
  //返回按钮
  backBtn(){
    if(this.level == "zhongdui"){
      this.level = "zhidui"
      this.option.title.text = this.time + '(' +this.buildingTypeName + ')'
      this.option.xAxis.data = this.zhiNameData
      this.option.series[0].data = this.zhiNumData
      this.detailPlanEchart.setOption(this.option)
    }else{
      window.history.go(-1)
    }
  } 
  
  tableTooltip(params:any){
    var data
    if(this.level == "zhidui"){
      data = this.serviceData.tableDataZhong
    }else{
      data = [
        {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
      ]
    }
    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:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>'
        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
        res+='<thead style="font-size:18px;"><tr>';
        res+='<td style="text-align:center;width:30%;">名称</td>';
        res+='<td style="text-align:center;width:30%;">数量</td>'
        res+='<td style="text-align:center;width:30%;">总占比</td>'
        res+='</tr></thead>'
        res+='<tbody>';
        for(var i=0;i<data.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;">'+data[i].name+'</td>'
          res+='<td style="text-align:center;">'+data[i].number+'</td>'
          res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
        }
        
        res+='</tbody>'
        res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>'
        res+='</table></div></div>'
        return res
  }
 
}