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,public echartsData:EchartsDataService) { }

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

  ngOnDestroy () {
    this.example.clear()
    this.example.dispose()
  }

  example:any;
   /* 首页饼状图 */
   initCharts(){
   this.example= echarts.init(document.getElementById('center'));
    var options={
      title: {
        text: '计划更新统计（7100家）',
        padding:[80,100],
        left: 'center',
        textStyle:{
          fontSize:34
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
        borderWidth:'1',
        borderRadius :'0',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params.name)
        },
        position:this.echartsData.tableTooltipNoShow
      },
      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)'
          }
        }

      }]
    };
    this.example.setOption(options);
    this.example.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 {
    this.echartsData.scheduledUpdatesToggle = true
  }

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

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

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

  //返回
  goBack () {
    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.dispose()
    this.oneEcharts.clear()
    this.items.forEach((element,index) => {
      element.echart.dispose()
      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',
        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
        borderWidth:'1',
        borderRadius :'0',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name)
        },
        position:this.echartsData.tableTooltipNoShow
      },
      // 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',
        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',
            axisLabel: {
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          },
          // {
          //   //设置坐标轴字体颜色和宽度
          //   axisLine: {    
          //     lineStyle: {color: "#000"},
          //   },
          //   type: 'value',
          //   name: '个',
          //   axisLabel: {
          //     color: "#000", //刻度线标签颜色
          //     formatter: '{value}'
          //   }
          // }
        ],
        series: [
          {
            name: '已核查无需修改',
            type: 'bar',
            stack: '总数',
            data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
          },
          {
            name: '已核查修改中',
            type: 'bar',
            stack: '总数',
            data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54],
            itemStyle:{color: '#DC143C'}
          },
          {
            name: '已核查提交审核',
            type: 'bar',
            stack: '总数',
            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()
    },0)
  }

  ngOnDestroy () {
    this.oneEcharts.dispose()
    this.oneEcharts.clear()
  }

  oneEcharts:any;
  oneInit () {
    this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp');
    var option = {
      title: {
        text: '未核查',
        subtext: '总数剩余 5850',
        left: 'center',
        textStyle:{
          color:'#000',
          fontSize: 22,
        },
        subtextStyle: {color:'#999',} 
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
        borderWidth:'1',
        borderRadius :'0',
        formatter:  (params)=>{
          return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'未核查')
        },
        position:this.echartsData.tableTooltipNoShow
      },
      legend: {
        data: ['剩余未核查','总数'],
        textStyle: { color: '#000' }
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel: {
          color: "#000", //刻度线标签颜色
        },
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {color: "#000",}
        },
      },
      yAxis: {
        type: 'category',
        //设置坐标轴字体颜色和宽度
        axisLine: {    
          lineStyle: {color: "#000"},
        },
        axisLabel: {
          color: "#000", //刻度线标签颜色
          formatter: '{value}'
        },
        data:  ['浦东支队','黄浦支队','徐汇支队','长宁支队','静安支队','普陀支队','虹口支队','杨浦支队','闵行支队','宝山支队','嘉定支队','崇明支队','金山支队'],
      },
      series: [
        {
          name: '剩余未核查',
          type: 'bar',
          stack: '差值',
          data: [289, 307, 334, 356, 389, 413, 456, 477, 489, 503, 540, 570, 599],
          itemStyle:{color:'#C80000'},
          label: {
            show: true,
            position: 'insideRight',
            color: '#fff'
          },
        },
        {
          name: '总数',
          type: 'bar',
          stack: '差值',
          data: [1520, 1430, 1170, 1441, 1094, 1147, 1098, 1142, 1274, 1400, 1265, 1341, 1200],
          itemStyle:{color:'#999'},
          label: {
            show: true,
            position: 'insideRight',
            color: '#fff'
          },
        },
      ]
    };
    this.oneEcharts.setOption(option);
    this.oneEcharts.on('click', (params) => {
      this.echartsData.scheduledUpdatesType = 1
      this.echartsData.scheduledUpdatesName = params.name
      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)
  }

  ngOnDestroy () {
    this.example.dispose()
    this.example.clear()
  }

  example:any;
  oneInit () {
    this.example = 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',
            axisLabel: {
              color: "#000", //刻度线标签颜色
              formatter: '{value}'
            }
          },
        ],
        series: [
          {
            name: '已核查无需修改',
            type: 'bar',
            stack: '总数',
            data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45],
          },
          {
            name: '已核查修改中',
            type: 'bar',
            stack: '总数',
            data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54],
            itemStyle:{color: '#DC143C'}
          },
          {
            name: '已核查提交审核',
            type: 'bar',
            stack: '总数',
            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.example.setOption(option);
    } else { //未核查
      var options = {
        title: {
          text: this.echartsData.scheduledUpdatesName,
          left: 'center',
          textStyle:{
            color:'#000',
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
        },
        legend: {
          data: ['剩余未核查','总数'],
          textStyle: { color: '#000' }
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            color: "#000", //刻度线标签颜色
          },
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000",}
          },
        },
        yAxis: {
          type: 'category',
          //设置坐标轴字体颜色和宽度
          axisLine: {    
            lineStyle: {color: "#000"},
          },
          axisLabel: {
            color: "#000", //刻度线标签颜色
            formatter: '{value}'
          },
          data:  ['浦东中队','黄浦中队','徐汇中队','长宁中队','静安中队','普陀中队','虹口中队','杨浦中队','闵行中队','宝山中队','嘉定中队','崇明中队','金山中队'],
        },
        series: [
          {
            name: '剩余未核查',
            type: 'bar',
            stack: '差值',
            data: [13, 19, 21, 27, 35, 39, 41, 43, 47, 47, 49, 50, 51],
            itemStyle:{color:'#C80000'},
            label: {
              show: true,
              position: 'insideRight',
              color: '#fff'
            },
          },
          {
            name: '总数',
            type: 'bar',
            stack: '差值',
            data: [120, 130, 170, 141, 194, 147, 109, 142, 174, 100, 125, 131, 120],
            itemStyle:{color:'#999'},
            label: {
              show: true,
              position: 'insideRight',
              color: '#fff'
            },
          },
        ]
      };
      this.example.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 {

  }

  displayedColumns: string[]=['team','header','time'];
  dataSource:any = [
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'},
    {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'},
    {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'},
    {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'},
    {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'},
    {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '金山支队'},
  ]



}