ShangHaiYuan-AnXin/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { Router } from '@angular/router';
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
import { FormControl } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';
import { PageTwoNameComponent } from '../page-two-name/page-two-name.component';
import {EchartsDataService} from '../../echarts-data.service'
declare var echarts: any;

@Component({
  selector: 'app-page-two-time',
  templateUrl: './page-two-time.component.html',
  styleUrls: ['./page-two-time.component.scss']
})
export class PageTwoTimeComponent implements OnInit {

  constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
  
  @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用
  @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用

  ngOnInit(): void {
    this.echartsData.statefulInspectionToggle = true
    this.dateInit()
    this.bianli()
  }

  isQuery:boolean = true; //横纵向查询

  //shao
  toggleTrue () { 
    this.isQuery = true
    this.echartsData.statefulInspectionToggle = true
  }

  //chen
  toggleFalse () { 
    this.isQuery = false
    this.echartsData.statefulInspectionToggle = true
    this.selectType = 'month'
  }

  //返回
  goBack () {
    this.echartsData.statefulInspectionToggle = true
  }

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

  changeTime (e) {
    let data = e.value
    this.appEcharts.changeTime(data)
  }

  //查询数据
  years:any = []
  selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
  tiaoshiPao:any
  datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200]
  datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']

  //气泡提示数据获取
  bianli(){
    var arrshuzu='[';
    for(var i=0;i<this.datayuey.length;i++){
      arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},'
    }
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'
    this.tiaoshiPao=JSON.parse(arrshuzu)
  }

  //日期初始化
  dateInit () {
    let date = (new Date()).getFullYear()
    for (let i=date; i>=date-10;i--) {
      this.years.unshift(i)
    }
  }

  selectOneYear:any = (new Date()).getFullYear() //开始年份
  selectTwoYear:any = (new Date()).getFullYear() //结束年份
  selectStartMonth:any = 1 //开始月份
  selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
  //按月查询
  monthSubmit (e) {
    if (e.selectTwoYear > e.selectOneYear) {
      let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
      let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
      //console.log(startTime)
      //console.log(endTime)
    } else if (e.selectTwoYear === e.selectOneYear) {
      if(e.selectEndMonth >= e.selectStartMonth) {
        let startTime = e.selectOneYear + '-' + e.selectStartMonth  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
        let endTime = e.selectTwoYear + '-' + e.selectEndMonth  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
        //console.log(startTime)
        //console.log(endTime)
      } else {
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('请选择正确时间区段','确定',config);
      }
    }else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请选择正确时间区段','确定',config);
    }
  }



  selectStartYear:any = (new Date()).getFullYear() //开始年份
  selectEndYear:any = (new Date()).getFullYear() //结束年份
  //按年查询
  yearSubmit (e) {
    if (e.selectEndYear >= e.selectStartYear) {
      let startTime = e.selectStartYear + '-' + 1  + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0
      let endTime = e.selectEndYear + '-' + 12  + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59
      //console.log(startTime)
      //console.log(endTime)
    } else {
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('请选择正确时间区段','确定',config);
    }
  }



}

@Component({
  selector: 'app-echarts',
  templateUrl: './echarts.html',
  styleUrls: ['./page-two-time.component.scss']
})
export class echartsComponent implements OnInit {

  constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }

  tiaoshiPao:any
  datayuey=[270, 253, 244, 199, 189, 173, 160, 198, 200]
  datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
  dataYearX = ['2019','2020']
  dataYearY = [1078, 936]
    //气泡提示数据获取
  bianli(){
    var arrshuzu='[';
    for(var i=0;i<this.datayuey.length;i++){
      arrshuzu+='{"value":'+this.datayuey[i]+',"coord":['+i+','+this.datayuey[i]+'],"name":'+'"'+this.datayuex[i]+'"'+'},'
    }
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'
    this.tiaoshiPao=JSON.parse(arrshuzu)
  }
  ngOnInit(): void {
    window.setTimeout(()=>{
      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
      this.oneInit()
      this.twoInit()
      this.threeInit()
      this.fourInit()
      this.fiveInit()
      this.sixInit()
    },0)
  }
  
  ngOnDestroy () {
    this.oneExample.clear()
    this.oneExample.dispose()
    this.twoExample.clear()
    this.twoExample.dispose()
    this.threeExample.clear()
    this.threeExample.dispose()
    this.fourExample.clear()
    this.fourExample.dispose()
    this.fiveExample.clear()
    this.fiveExample.dispose()
    this.sixExample.clear()
    this.sixExample.dispose()
  }

  changeTime (e) {
    this.oneExample.clear()
    this.oneExample.dispose()
    this.twoExample.clear()
    this.twoExample.dispose()
    this.threeExample.clear()
    this.threeExample.dispose()
    this.fourExample.clear()
    this.fourExample.dispose()
    this.fiveExample.clear()
    this.fiveExample.dispose()
    this.sixExample.clear()
    this.sixExample.dispose()

    if (e=='year') {
      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX)
      this.oneInit(this.dataYearX,this.dataYearY)
      this.twoInit(this.dataYearX,this.dataYearY)
      this.threeInit(this.dataYearX,this.dataYearY)
      this.fourInit(this.dataYearX,this.dataYearY)
      this.fiveInit(this.dataYearX,this.dataYearY)
      this.sixInit(this.dataYearX,this.dataYearY)
    } else {
      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
      this.oneInit()
      this.twoInit()
      this.threeInit()
      this.fourInit()
      this.fiveInit()
      this.sixInit()
    }
  }

  oneExample:any;
  oneInit (X=this.datayuex, Y=this.datayuey) {
    this.oneExample = echarts.init(document.getElementById('one'),'walden');
    var option = {
      grid: {
        top: 50,
        left:50,
        right: 20,
      },
      tooltip: {
        trigger: 'axis',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.planData,params[0].name)
        },
      },
      // 标题
      title: {
        text: '预案统计状态'+'：总数（1024）',
        top: -4,
        left: 'center',
        subtext:'今年',
    　　//副标题文本样式
    　　subtextStyle:{
          color:'#999',
          fontWeight:'bold',
        },
        textStyle:{
          //文字颜色
          color:'#000',
          fontSize: 22,
        }
      },
      // x轴
      xAxis: {
        type: 'category',
        data: X,
        boundaryGap: true,
        axisLabel: {
          color: "#000", //刻度线标签颜色
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          markPoint: {
            symbolSize:[65, 65],
            data: this.tiaoshiPao
         },
          data: Y,
        }
      ],
    };
    this.oneExample.setOption(option);
  }

  twoExample:any;
  twoInit (X=this.datayuex, Y=this.datayuey) {
    let that = this
    this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp');
    var option = {
      grid: {
        top: 50,
        left:50,
        right: 20,
        bottom: 20,
      },
      // 标题
      title: {
        text: '预案新增'+'：总数（1024）',
        top: -4,
        left: 'center',
        bottom: 100,
        textStyle:{
          //文字颜色
          color:'#000',
        }
      },
      tooltip: {
        trigger: 'axis',
        
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增')
        }
      },
      // x轴
      xAxis: {
        type: 'category',
        data: X,
        boundaryGap: true,
        axisLabel: {
          color: "#000", //刻度线标签颜色
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          markPoint: {
            
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          data: Y,
        }
      ],
    };
    this.twoExample.setOption(option);
    this.twoExample.getZr().on('click', (params) => {
      // console.log(params.name)
        /* this.echartsData.statefulInspectionName =params.name+headtext;
        this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there`); */
        const pointInPixel= [params.offsetX, params.offsetY];
      if (this.twoExample.containPixel('grid',pointInPixel)) {
        let xIndex=this.twoExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){
          this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
        }else{
          /*事件处理代码书写位置*/
          this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
        }
        
      }
      
    });
  }

  threeExample:any;
  threeInit (X=this.datayuex, Y=this.datayuey) {
    let that = this
    this.threeExample = echarts.init(document.getElementById('three'), 'skinUpp');
    var option = {
      grid: {
        top: 50,
        left:50,
        right: 20,
      },
      // 标题
      title: {
        text: '预案审核通过'+'：总数（1024）',
        top: -4,
        left: 'center',
        bottom: 100,
        textStyle:{
          //文字颜色
          color:'#000',
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核通过')
        }
      },
      // x轴
      xAxis: {
        type: 'category',
        data: X,
        boundaryGap: true,
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000", //刻度线标签颜色
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          markPoint: {
            
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          data: Y,
        }
      ],
    };
    this.threeExample.setOption(option);
    this.threeExample.getZr().on('click', (params) => {
        const pointInPixel= [params.offsetX, params.offsetY];
      if (this.threeExample.containPixel('grid',pointInPixel)) {
        let xIndex=this.threeExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){
          this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
        }else{
          /*事件处理代码书写位置*/
          this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
        }
        
      }
      
    });
  }

  fourExample:any;
  fourInit (X=this.datayuex, Y=this.datayuey) {
    let that = this
    this.fourExample = echarts.init(document.getElementById('four'), 'skinUpp');
    var option = {
      grid: {
        top: 50,
        left:50,
        right: 20,
      },
      // 标题
      title: {
        text: '预案编制'+'：总数（1024）',
        top: -4,
        left: 'center',
        bottom: 100,
        textStyle:{
          //文字颜色
          color:'#000',
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案编制')
        }
      },
      // x轴
      xAxis: {
        type: 'category',
        data: X,
        boundaryGap: true,
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000", //刻度线标签颜色
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          markPoint: {
            
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          data: Y,
        }
      ],
    };
    this.fourExample.setOption(option);
    this.fourExample.getZr().on('click', (params) => {
      const pointInPixel= [params.offsetX, params.offsetY];
    if (this.fourExample.containPixel('grid',pointInPixel)) {
      let xIndex=this.fourExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
      if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){
        this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
      }else{
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
      }
      
    }
    
  });
  }

  fiveExample:any;
  fiveInit (X=this.datayuex, Y=this.datayuey) {
    let that = this
    this.fiveExample = echarts.init(document.getElementById('five'), 'skinUpp');
    var option = {
      grid: {
        top: 50,
        left:50,
        right: 20,
        bottom: 20,
      },
      // 标题
      title: {
        text: '预案审核退回'+'：总数（1024）',
        top: -4,
        left: 'center',
        bottom: 100,
        textStyle:{
          //文字颜色
          color:'#000',
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核退回')
        }
      },
      // x轴
      xAxis: {
        type: 'category',
        data: X,
        boundaryGap: true,
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000", //刻度线标签颜色
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          markPoint: {
            
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          data: Y,
        }
      ],
    };
    this.fiveExample.setOption(option);
    this.fiveExample.getZr().on('click', (params) => {
      const pointInPixel= [params.offsetX, params.offsetY];
    if (this.fiveExample.containPixel('grid',pointInPixel)) {
      let xIndex=this.fiveExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
      if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){
        this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
      }else{
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
      }
      
    }
    
  });
  }

  sixExample:any;
  sixInit (X=this.datayuex, Y=this.datayuey) {
    let that = this
    this.sixExample = echarts.init(document.getElementById('six'), 'skinUpp');
    var option = {
      grid: {
        top: 50,
        left:50,
        right: 20,
        bottom: 20,
      },
      // 标题
      title: {
        text: '预案审核中'+'：总数（1024）',
        top: -4,
        left: 'center',
        textStyle:{
          //文字颜色
          color:'#000',
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
        
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核中')
        }
      },
      // x轴
      xAxis: {
        type: 'category',
        data: X,
        boundaryGap: true,
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000", //刻度线标签颜色
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          textStyle:{
            fontSize :15,
            color:'#000000'
          },
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          markPoint: {
            
            symbolSize:[65, 65],
            data: this.tiaoshiPao
        },
          data: Y,
        }
      ],
    };
    this.sixExample.setOption(option);
    this.sixExample.getZr().on('click', (params) => {
      const pointInPixel= [params.offsetX, params.offsetY];
    if (this.sixExample.containPixel('grid',pointInPixel)) {
      let xIndex=this.sixExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
      if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){
        this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
      }else{
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
      }
      
    }
    
  });
  }



}