ShangHai-YuAn/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-09-02 16:22:35
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-09-11 17:13:40
 */
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service';
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
import { DateAdapter } from '@angular/material/core';
declare var echarts: any;

@Component({
  selector: 'app-delete-there',
  templateUrl: './delete-there.component.html',
  styleUrls: ['./delete-there.component.scss']
})
export class DeleteThereComponent implements OnInit {

  constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { }
  zhutu//echarts实例
  option
  time:String
  buildingTypeName:String
  setTimeoutObj//延时器需要清除
  headtext:string;
  zhong:string
  ngOnDestroy():void{
    this.zhutu.clear()
    this.zhutu.dispose()
  }

  ngOnInit(): void {
    this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
    this.dateInit();
    //let headtext:string;
    let datayuex:string;
    let headName:string;
    // console.log(this.activatedRoute.queryParams.subscribe)
    //headtext=this.activatedRoute.queryParams["headtext"];
    this.activatedRoute.queryParams.subscribe(param=>{
      this.headtext=param.headtext
      datayuex=param.level
      this.zhong=param.zhong
      headName=this.headtext+''+datayuex;
      //console.log(headName)
    }); 
    window.setTimeout(()=>{
      this.zhuzhuangtu(headName)
    },0)
  }
  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)
    }
    // console.log(this.years)
  }
  
  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
    }
  }//柱状图数值顶部显示
  zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
  zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
  zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队","松江中队","金山中队","崇明中队"]
  tiaoshiPao:any
  //气泡提示数据获取
  bianli(){
    var arrshuzu='[';
    for(var i=0;i<this.zhiNumData.length;i++){
      arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
    }
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'
    this.tiaoshiPao=JSON.parse(arrshuzu)
    console.log(this.tiaoshiPao)
    //return tishiPao
  }
  date = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月']
  dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200]
  //返回
  goBack () {
    history.go(-1)
    this.echartsData.statefulInspectionToggle = true
  }

  axisLabel = {
    interval: 0,  
    formatter:function(value)  
      {    
        var ret = "";//拼接加\n返回的类目项  
        var maxLength = 2;//每项显示文字个数  
        var valLength = value.length;//X轴类目项的文字个数  
        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
        if (rowN > 1)//如果类目项的文字大于3,  
        {  
            for (var i = 0; i < rowN; i++) {  
                var temp = "";//每次截取的字符串  
                var start = i * maxLength;//开始截取的位置  
                var end = start + maxLength;//结束截取的位置  
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                temp = value.substring(start, end) + "\n";  
                ret += temp; //凭借最终的字符串  
            }  
            return ret;  
        }  
        else {  
            return value;  
        }  
      }  
  }//echarts两个字换行
  /* 柱状图 */
  zhuzhuangtu(headName:string){
    var ec = echarts as any;
    this.zhutu = ec.init(document.getElementById('zhidui'),'walden');
    this.option = {
      title: {
        text: `${headName}`+'：总数(666)',
        left: "center",
        top: "0",
        textStyle: {
          fontSize: 30
        }
      },
      /* grid: {  
        left: '5%',  
        bottom:'35%'  
        },   */
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          //axisLabel: this.axisLabel,
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :18,
              color:'#000000'
            }
            
          }
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            textStyle:{
              fontSize :18,
              color:'#000000'
            }
            
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.echartsData.biaogeTishi(params.name)
        },
        position: this.echartsData.tableTooltipNoShow2
        /* backgroundColor:'rgba(255,255,255,1)',
        borderWidth:'1',
        borderRadius :'0' */
      },
      series: [{
          data: this.zhiNumData,
          type: 'bar',
          markPoint: {
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'38',
          //label: this.topTextlabel
      }]
    };
    this.zhutu.getZr().on('click',params=>{
      // console.log(params.name)
      const pointInPixel= [params.offsetX, params.offsetY];
      if (this.zhutu.containPixel('grid',pointInPixel)) {
        let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+this.headtext}});
      }
    });
    /* this.zhutu.on('click', (params) => {
      console.log(params)
      this.echartsData.statefulInspectionName =params.name;
      this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_four`);
    }); */
    this.zhutu.setOption(this.option);
  }

   /* 鼠标悬停提示 */
  tableTooltip2(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:#FFFFFF;font-size:27px;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;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>';
        //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
        for(var i=0;i<jsonObj.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;">'+jsonObj[i].name+'</td>'
          res+='<td style="text-align:center;">'+jsonObj[i].number+'</td>'
          res+='<td style="text-align:center;">'+jsonObj[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
  }

}