ShangHai-YuAn/src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-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-delete-there-line-details',
  templateUrl: './delete-there-line-details.component.html',
  styleUrls: ['./delete-there-line-details.component.scss']
})
export class DeleteThereLineDetailsComponent implements OnInit {

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

  year:String
  buildingTypeName:String
  level:String
  setTimeoutObj//延时器需要清除
  ngOnInit(): void {
    this.dateInit ()
    this.bianli()
    this.route.queryParams.subscribe(params => {
      this.year = params['level'];
      this.buildingTypeName = params['headtext'];
    });
    this.setTimeoutObj = window.setTimeout(()=>{
      this.detailEcharts()
    })
  }

  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 = [200,190,180,170,160,150,140,130,120,110,100]

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

  detailPlanEchart
  option
  date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
  dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200]

  detailEcharts(){
    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');  
    this.option = {
      grid: {
        top: 50,
        left:40,
        right: 20,
        //bottom: 20,
      },
      // 标题
      title: {
        text: this.buildingTypeName + '(' + this.year + ')',
        top: -4,
        left: 'center',
        textStyle:{
          //文字颜色
          color:'#000',
          fontSize: 30
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        formatter:  (params)=>{
          if(params[0].seriesName == "year"){
            return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
          }else{
            return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
          }
        },
        position:this.serviceData.tableTooltipNoShow2
      },
      // x轴
      xAxis: {
        type: 'category',
        data: this.date,
        axisLabel: {
          color: "#000", //刻度线标签颜色
          textStyle:{
            fontSize :18,
            color:'#000000'
          }
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          //color: "#000", //刻度线标签颜色
          textStyle:{
            fontSize :18,
            color:'#000000'
          }
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: 'xxx',
          type: 'line',
          markPoint: {
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          data: this.dateNum,
        }
      ],
    };
    this.detailPlanEchart.setOption(this.option);
    this.detailPlanEchart.getZr().on('click',params=>{
      const pointInPixel= [params.offsetX, params.offsetY];
      if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
        let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName}});
      }
    });
  }
  //返回按钮
  backBtn(){
      window.history.go(-1)
  } 
  
  tableTooltip(params:any){
    var 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><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
  }

}