ShangHai-YuAn/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {EchartsDataService} from '../echarts-data.service'
import { MatDialog } from '@angular/material/dialog';
declare var echarts: any;

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

  constructor(private router: Router) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      this.initCharts()
    })
  }

   /* 首页饼状图 */
   initCharts(){
    var indexBzt = echarts.init(document.getElementById('center'));
    var options={
      title: {
        text: '计划更新统计（7100家）',
        padding:[80,100],
        left: 'center',
        textStyle:{
          fontSize:34
        }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          // return this.biaogeTishi(params.name)
        } ,
        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
        borderWidth:'1',
        borderRadius :'0'
      },
      legend: {
        orient: 'vertical',
        right: 150,
        top:80,
        itemWidth:60,
        itemHeight:25,
        textStyle:{
          fontSize:28
        },
        data: ['已核查无需修改', '已核查修改中', '已核查提交审核', '未核查']
      },
      series: [{ 
        name: '访问来源',
        type: 'pie',
        radius: '65%',
        center: ['50%', '60%'],
        label:{
          normal:{
          show:true,
          position: 'inner',
          fontSize:18,
          formatter:'{d}% ({c}家)'
        }},
        data: [
          {value: 2000, name: '已核查无需修改'},
          {value: 2500, name: '已核查修改中',itemStyle:{color:'#02A7F0'}},
          {value: 1900, name: '已核查提交审核',itemStyle:{color:'#87cebb'}},
          {value: 700, name: '未核查'},],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }

      }]
    };
    indexBzt.setOption(options);
    indexBzt.on('click', (params) => {
      this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts');
    });
  }



}

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

  constructor(private router: Router,public echartsData:EchartsDataService,public dialog: MatDialog,) { }

  ngOnInit(): void {

  }

  isToggle:boolean = true; // 已核查/未核查

  //已核查
  verified () {
    this.isToggle = true
    this.echartsData.scheduledUpdatesToggle = true
  }

  //未核查
  notVerified () {
    this.isToggle = false
    this.echartsData.scheduledUpdatesToggle = true
  }

  //更多 窗口
  moreOpen () {
    let dialogRef = this.dialog.open(moreTableComponent);
  }



}



//已核查组件
@Component({
  selector: 'app-verified',
  templateUrl: './verified.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class verifiedComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      this.oneInit()
      this.twoInit()
    },0)
  }

  ngOnDestroy () {
    this.oneEcharts.clear()
    this.items.forEach((element,index) => {
      element.echart.clear()
    });
  }

  oneEcharts:any;
  oneInit () {
    this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp');
    var option = {
      grid: {
        top: 50,
        left:40,
        right: 20,
        bottom: 20,
      },
      // 标题
      title: {
        text: '已核查',
        top: -4,
        left: 'center',
        textStyle:{
          //文字颜色
          color:'#000',
          fontSize: 22,
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
      },
      // x轴
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'],
        boundaryGap: false,
        axisLabel: {
          color: "#000", //刻度线标签颜色
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          data: [1170, 953, 1144, 799, 789, 773, 660, 998, 790, 1004, 1345, 1245],
        }
      ],
    };
    this.oneEcharts.setOption(option);
  }

  months:any = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
  echartIds:any = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve']
  items:any = [{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null}]

  twoInit () {
    this.months.forEach((element,index) => {
      this.items[index].echart = echarts.init(document.getElementById(this.echartIds[index]), 'skinUpp');
      var option = {
        title: {
          text: element,
          top: -4,
          left: 'center',
          textStyle:{
            color:'#000',
            fontSize: 18,
          }
        },
        //提示框
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['平均值','平均值2倍','平均值3倍', '已核查无需修改', '已核查修改中', '已核查提交审核'],
          textStyle: { color: '#000' }
        },
        xAxis: [{
          axisLabel: {
            color: "#000", //刻度线标签颜色
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
          type: 'category',
          data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
          axisPointer: {type: 'shadow'}
        }],
        yAxis: [
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle: {color: "#000"},
            },
            type: 'value',
            name: '个',
            axisLabel: {
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          },
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle: {color: "#000"},
            },
            type: 'value',
            name: '个',
            axisLabel: {
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '已核查无需修改',
            type: 'bar',
            data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
          },
          {
            name: '已核查修改中',
            type: 'bar',
            data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54],
            itemStyle:{color: '#DC143C'}
          },
          {
            name: '已核查提交审核',
            type: 'bar',
            data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14],
            itemStyle:{color:'#00BB00'}
          },
          {
            name: '平均值',
            type: 'line',
            yAxisIndex: 1,
            data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37],
            itemStyle:{color: '#FFDC35'}
          },
          {
            name: '平均值2倍',
            type: 'line',
            yAxisIndex: 1,
            data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
            itemStyle:{color: '#FF00FF'}
          },
          {
            name: '平均值3倍',
            type: 'line',
            yAxisIndex: 1,
            data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111],
            itemStyle:{color: '#999'}
          },
        ]
      };
      this.items[index].echart.setOption(option);
      this.items[index].echart.on('click', (params) => {
        this.echartsData.scheduledUpdatesType = 0
        this.echartsData.scheduledUpdatesName = this.months[index]
        this.echartsData.scheduledUpdatesToggle = false
      });
    });
  }



}



//未核查组件
@Component({
  selector: 'app-notVerified',
  templateUrl: './notVerified.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class notVerifiedComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      this.oneInit()
      this.twoInit()
    },0)
  }

  ngOnDestroy () {
    this.oneEcharts.clear()
    this.items.forEach((element,index) => {
      element.echart.clear()
    });
  }

  oneEcharts:any;
  oneInit () {
    this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp');
    var option = {
      grid: {
        top: 50,
        left:40,
        right: 20,
        bottom: 20,
      },
      // 标题
      title: {
        text: '未核查',
        top: -4,
        left: 'center',
        textStyle:{
          //文字颜色
          color:'#000',
          fontSize: 22,
        }
      },
      //提示框
      tooltip: {
        trigger: 'axis',
      },
      // x轴
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'],
        boundaryGap: false,
        axisLabel: {
          color: "#000", //刻度线标签颜色
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {
            color: "#000",
          },
        },
        splitLine: {//分割线配置
          show:true,
          lineStyle: {
            color: '#999',
          }
        }
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个',
        axisLabel: {
          color: "#000" //刻度线标签颜色
        },
         //设置坐标轴字体颜色和宽度
         axisLine: {
          lineStyle: {
            color: "#000",
          }
        }
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          data: [1245, 1345, 1004, 790, 998, 660, 773, 789, 799, 1144, 953, 1170,],
        }
      ],
    };
    this.oneEcharts.setOption(option);
  }

  months:any = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
  echartIds:any = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve']
  items:any = [{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null},{echart:null}]

  twoInit () {
    this.months.forEach((element,index) => {
      this.items[index].echart = echarts.init(document.getElementById(this.echartIds[index]), 'skinUpp');
      var option = {
        title: {
          text: element,
          top: -4,
          left: 'center',
          textStyle:{
            color:'#000',
            fontSize: 18,
          }
        },
        //提示框
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['未核查'],
          textStyle: { color: '#000' }
        },
        xAxis: [{
          axisLabel: {
            color: "#000", //刻度线标签颜色
            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;
              }
            } //function
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
          type: 'category',
          data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
          axisPointer: {type: 'shadow'}
        }],
        yAxis: [
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle: {color: "#000"},
            },
            type: 'value',
            name: '个',
            axisLabel: {
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '未核查',
            type: 'bar',
            data: [48, 36, 49, 37, 33, 59, 58, 46, 39, 34, 39, 68, 45],
          },
        ]
      };
      this.items[index].echart.setOption(option);
      this.items[index].echart.on('click', (params) => {
        this.echartsData.scheduledUpdatesType = 1
        this.echartsData.scheduledUpdatesName = this.months[index]
        this.echartsData.scheduledUpdatesToggle = false
      });
    });
  }



}



//echarts详情组件
@Component({
  selector: 'app-detailedInformation',
  templateUrl: './detailedInformation.html',
  styleUrls: ['../state/page-two-time/page-two-time.component.scss']
})
export class detailedInformationComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  ngOnInit(): void {
    window.setTimeout(()=>{
      this.oneInit()
    },0)
  }

  oneInit () {
    let echart = echarts.init(document.getElementById('center'), 'skinUpp');
    if (this.echartsData.scheduledUpdatesType ===0) { //已核查
      var option = {
        title: {
          text: this.echartsData.scheduledUpdatesName,
          top: -4,
          left: 'center',
          textStyle:{
            color:'#000',
            fontSize: 18,
          }
        },
        //提示框
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['平均值','平均值2倍','平均值3倍', '已核查无需修改', '已核查修改中', '已核查提交审核'],
          textStyle: { color: '#000' }
        },
        xAxis: [{
          axisLabel: {
            color: "#000", //刻度线标签颜色
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
          type: 'category',
          data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
          axisPointer: {type: 'shadow'}
        }],
        yAxis: [
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle: {color: "#000"},
            },
            type: 'value',
            name: '个',
            axisLabel: {
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          },
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle: {color: "#000"},
            },
            type: 'value',
            name: '个',
            axisLabel: {
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '已核查无需修改',
            type: 'bar',
            data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
          },
          {
            name: '已核查修改中',
            type: 'bar',
            data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54],
            itemStyle:{color: '#DC143C'}
          },
          {
            name: '已核查提交审核',
            type: 'bar',
            data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14],
            itemStyle:{color:'#00BB00'}
          },
          {
            name: '平均值',
            type: 'line',
            yAxisIndex: 1,
            data: [49, 45, 53, 47, 49, 43, 48, 41, 38, 39, 41, 43, 37],
            itemStyle:{color: '#FFDC35'}
          },
          {
            name: '平均值2倍',
            type: 'line',
            yAxisIndex: 1,
            data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74],
            itemStyle:{color: '#FF00FF'}
          },
          {
            name: '平均值3倍',
            type: 'line',
            yAxisIndex: 1,
            data: [143, 135, 159, 143, 127, 144, 144, 123, 114, 117, 124, 129, 111],
            itemStyle:{color: '#999'}
          },
        ]
      };
      echart.setOption(option);
    } else { //未核查
      var options = {
        title: {
          text: this.echartsData.scheduledUpdatesName,
          top: -4,
          left: 'center',
          textStyle:{
            color:'#000',
            fontSize: 18,
          }
        },
        //提示框
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['未核查'],
          textStyle: { color: '#000' }
        },
        xAxis: [{
          axisLabel: {
            color: "#000", //刻度线标签颜色
            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;
              }
            } //function
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
          type: 'category',
          data: ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
          axisPointer: {type: 'shadow'}
        }],
        yAxis: [
          {
            //设置坐标轴字体颜色和宽度
            axisLine: {    
              lineStyle: {color: "#000"},
            },
            type: 'value',
            name: '个',
            axisLabel: {
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '未核查',
            type: 'bar',
            data: [48, 36, 49, 37, 33, 59, 58, 46, 39, 34, 39, 68, 45],
          },
        ]
      };
      echart.setOption(options);
    }
  }



}



//更多资讯组件
@Component({
  selector: 'app-moreTable',
  templateUrl: './moreTable.html',
  styleUrls: ['./scheduled-updates.component.scss']
})
export class moreTableComponent implements OnInit {

  constructor(private router: Router,public echartsData:EchartsDataService) { }

  ngOnInit(): void {

  }



}