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

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-09-02 16:21:18
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-09-04 16:58:01
 */
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
declare var echarts: any;

@Component({
  selector: 'app-delete-two',
  templateUrl: './delete-two.component.html',
  styleUrls: ['./delete-two.component.scss']
})
export class DeleteTwoComponent implements OnInit {
  options:any;
  datayuex=['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月'];
  datayuey=[210, 160, 150, 140, 130, 120, 110,120];
  datanianx=[2019,2020,2021];
  dataniany=[201,174]

  constructor(private router: Router,public snackBar: MatSnackBar) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      this.headZhexian('head','删除数量总统计',this.datayuex,this.datayuey)
      this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
      this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
      this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
      this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
      this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
      this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
      this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
      this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) 
    },0)
  }
  /* 按月点击事件 */
  anyue(){
    var anyue1 = document.getElementById('yue1');
    anyue1.style.display='block';
    var anyue2 = document.getElementById('yue2');
    anyue2.style.display='block';
    this.headZhexian('head','删除数量总统计',this.datayuex,this.datayuey)
      this.headZhexian('leftOne','高层',this.datayuex,this.datayuey)
      this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey)
      this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey)
      this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey)
      this.headZhexian('rightOne','地下',this.datayuex,this.datayuey)
      this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey)
      this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey)
      this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) 
  }
  /* 按年点击事件 */
  annian(){
    var anyue1 = document.getElementById('yue1');
    anyue1.style.display='none';
    var anyue2 = document.getElementById('yue2');
    anyue2.style.display='none';
    this.headZhexian('head','删除数量总统计',this.datanianx,this.dataniany)
      this.headZhexian('leftOne','高层',this.datanianx,this.dataniany)
      this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany)
      this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany)
      this.headZhexian('leftFour','古建筑',this.datanianx,this.dataniany)
      this.headZhexian('rightOne','地下',this.datanianx,this.dataniany)
      this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany)
      this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany)
      this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany) 
  }

  /* 折线图 */
  headZhexian(divid:string,headtext:string,datayuex,datayuey){
    var ec = echarts as any;
    var headZx = ec.init(document.getElementById(`${divid}`));
    var options = {
      title: {
        text: `${headtext}`,
        left:350,
        textStyle:{
          fontSize:28
        }
    },
    tooltip: {
      trigger: 'item',
      formatter:  (params)=>{
        return this.biaogeTishi(`${headtext}`)
      } ,
      backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
      borderWidth:'1',
      borderRadius :'0'
  },
      xAxis: {
          type: 'category',
          boundaryGap:false,
          data: datayuex,
          axisLabel: {
            color: "#000", //刻度线标签颜色
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {
              color: "#000",
            },
          },
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: '#999',
            }
          }
      },
      yAxis: {
          type: 'value',
          axisLabel: {
            color: "#000" //刻度线标签颜色
          },
           //设置坐标轴字体颜色和宽度
           axisLine: {
            lineStyle: {
              color: "#000",
            }
          }
      },
      series: [{
          data: datayuey,
          type: 'line',
          lineStyle:{
            color:'#1369bf'
          },
          /* markLine: {
            symbol: ['none', 'none'],
            label: {show: false},
            lineStyle:{
              color:'#9A9A9A',
              type:'solid',
            },
            data: [
                {xAxis: 1},
                {xAxis: 2},
                {xAxis: 3},
                {xAxis: 4},
                {xAxis: 5},
                {xAxis: 6},
                {xAxis: 7}
            ]
        }, */
      }]
  };
  headZx.on('click', (params) => {
    console.log(params)
    this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there/${headtext}/${params.name}`);
  });
  headZx.setOption(options);
  }
  /**
   * @name: 表格提示框封装
   * @test: test font
   * @msg: 
   * @param {string(表头)}
   * @return {type} 
   */
  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
  }
  
}