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

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-09-02 16:22:58
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-09-07 08:50:58
 */
import { Component, OnInit } from '@angular/core';
import { 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-four',
  templateUrl: './delete-four.component.html',
  styleUrls: ['./delete-four.component.scss']
})
export class DeleteFourComponent implements OnInit {

  constructor(public route: ActivatedRoute,public data: EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { }
  zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
  zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
  level:string;
  ngOnInit(): void {
    
    this.route.queryParams.subscribe(param=>{
     this.level=param.level
      console.log(this.level)
    }); 
    window.setTimeout(()=>{
      this.detailEcharts(this.level)
    })
  }
  //返回
  goBack () {
    history.go(-1)
    this.data.statefulInspectionToggle = true
  }

  detailEcharts(level){
    var detailPlanEchart = echarts.init(document.getElementById('detailBox'));  
    var option = {
      title: {
        text: level,
        left: "center",
        textStyle: {
          fontSize: 28
        }
      },
      xAxis: {
          type: 'category',
          data: this.zhongNameData,
          // axisLabel: this.axisLabel
      },
      yAxis: {
          type: 'value'
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          console.log(666,params)
          return this.tableTooltip(params)
        },
        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
        borderWidth:'1',
        borderRadius :'0'
      },
      series: [{
          data: this.zhongNumData,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          }
      }]
    };
    detailPlanEchart.setOption(option);
  }

 
  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:#000000;font-size:30px;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; 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<data.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+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
  }

}