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

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router'
import { PageZhongDuiDetailsComponent } from '../page-zhong-dui-details/page-zhong-dui-details.component';
import {EchartsDataService} from '../../echarts-data.service';
declare var echarts: any;
@Component({
  selector: 'app-page-two-name',
  templateUrl: './page-two-name.component.html',
  styleUrls: ['./page-two-name.component.scss']
})
export class PageTwoNameComponent implements OnInit {
  
  constructor(private router:Router,private route:ActivatedRoute,public data:EchartsDataService) { }

  @ViewChild('zhongDuiChild') zhongDuiChild:PageZhongDuiDetailsComponent; //父组件中获得子组件的引用

  ngOnInit(): void {
    setTimeout(() => {
      this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhiNumData,this.zhiNameData)
      this.planState()
      this.planAdd()
      this.passPlanEchart()
      this.planMake()
      this.planBack()
      this.planAudit()
    }, 0);
  }

  ngOnDestroy(): void {
    this.addEchart.clear()
    this.addEchart.dispose()

    this.passPlanEchartObj.clear()
    this.passPlanEchartObj.dispose()

    this.passMakeEchart.clear()
    this.passMakeEchart.dispose()

    this.passBackEchart.clear()
    this.passBackEchart.dispose()

    this.planAuditEchart.clear()
    this.planAuditEchart.dispose()

    this.topEchart.clear()
    this.topEchart.dispose()

  }
  axisLabel = {
    interval: 0,
    textStyle:{
      fontSize :16,
      color:'#000000'
    },  
    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;  
        }  
      }  
  }//echarts两个字换行
  topTextlabel = {
    show: true, // 开启显示
    position: 'top', // 在上方显示
    distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    verticalAlign: 'middle',
    textStyle: { // 数值样式
      color: 'black',
      fontSize: 12
    }
  }//柱状图上方显示数值

  zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
  zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
  tiaoshiPao:any
  //气泡提示数据获取
  bianli(){
    var arrshuzu='[';
    for(var i=0;i<this.zhiNumData.length;i++){
      arrshuzu+='{"value":'+this.zhiNumData[i]+',"coord":['+i+','+this.zhiNumData[i]+'],"name":'+'"'+this.zhiNameData[i]+'"'+'},'
    }
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'
    this.tiaoshiPao=JSON.parse(arrshuzu)
    //return tishiPao
  }
  addEchart
  //预案新增统计
  planAdd () {
    let _this = this
    this.addEchart = echarts.init(document.getElementById('addEchart'),'walden');
    var option = {
      title: {
        text: "预案新增：总数（1024）",
        left: "center",
        top: "0",
        bottom: '100%',
        textStyle: {
          fontSize: 23
        }
      },
      
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          axisLabel:this.axisLabel
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :16,
              color:'#000000'
            }
            
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.data.biaogeTishi(params.name)
        }/* ,
        position: this.data.tableTooltipNoShow2 */
      },
      series: [{
          data: this.zhiNumData,
          type: 'bar',
          markPoint: {
            data: this.tiaoshiPao
        },
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'28',
          //label: this.topTextlabel
      }]
    };
    this.addEchart.setOption(option);
    this.addEchart.getZr().on('click', (params) => {
      const pointInPixel= [params.offsetX, params.offsetY];
    if (this.addEchart.containPixel('grid',pointInPixel)) {
      let xIndex=this.addEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
    }
    
  });
  }
  passPlanEchartObj
  //预案审核通过
  passPlanEchart (){
    let _this = this
    this.passPlanEchartObj = echarts.init(document.getElementById('passPlanEchart'),'walden');  
    var option = {
      title: {
        text: "预案审核通过：总数（1024）",
        left: "center",
        top: "0",
        bottom: '100%',
        textStyle: {
          fontSize: 23
        }
      },
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          axisLabel: this.axisLabel
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :16,
              color:'#000000'
            }
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.data.biaogeTishi(params.name)
        }/* ,
        position: this.data.tableTooltipNoShow2 */
      },
      series: [{
          data: this.zhiNumData,
          type: 'bar',
          markPoint: {
            data: this.tiaoshiPao
        },
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'28',
          //label: this.topTextlabel
      }]
    };
    this.passPlanEchartObj.setOption(option);
    this.passPlanEchartObj.getZr().on('click', (params) => {
      const pointInPixel= [params.offsetX, params.offsetY];
    if (this.passPlanEchartObj.containPixel('grid',pointInPixel)) {
      let xIndex=this.passPlanEchartObj.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
    }
    
  });
  }
  passMakeEchart
  //预案编制
  planMake (){
    let _this = this
    this.passMakeEchart = echarts.init(document.getElementById('planMake'),'walden');  
    var option = {
      title: {
        text: "预案编制：总数（1024）",
        left: "center",
        top: "0",
        bottom: '100%',
        textStyle: {
          fontSize: 23
        }
      },
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          axisLabel: this.axisLabel
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :16,
              color:'#000000'
            }
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.data.biaogeTishi(params.name)
        }/* ,
        position: this.data.tableTooltipNoShow2 */
        
      },
      series: [{
          data: this.zhiNumData,
          type: 'bar',
          markPoint: {
            data: this.tiaoshiPao
        },
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'28',
          //label: this.topTextlabel
      }]
    };
    this.passMakeEchart.setOption(option);
    this.passMakeEchart.getZr().on('click', (params) => {
      const pointInPixel= [params.offsetX, params.offsetY];
    if (this.passMakeEchart.containPixel('grid',pointInPixel)) {
      let xIndex=this.passMakeEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
    }
    
  });
  }
  passBackEchart
  //预案审核退回
  planBack (){
    let _this = this
    this.passBackEchart = echarts.init(document.getElementById('planBack'),'walden');  
    var option = {
      title: {
        text: "预案审核退回：总数（1024）",
        left: "center",
        top: "0",
        bottom: '100%',
        textStyle: {
          fontSize: 23
        }
      },
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          axisLabel: this.axisLabel
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :16,
              color:'#000000'
            }
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.data.biaogeTishi(params.name)
        }/* ,
        position: this.data.tableTooltipNoShow2 */
        
      },
      series: [{
          data: this.zhiNumData,
          type: 'bar',
          markPoint: {
            data: this.tiaoshiPao
        },
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'28',
          //label: this.topTextlabel
      }]
    };
    this.passBackEchart.setOption(option);
    this.passBackEchart.getZr().on('click', (params) => {
      const pointInPixel= [params.offsetX, params.offsetY];
    if (this.passBackEchart.containPixel('grid',pointInPixel)) {
      let xIndex=this.passBackEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
    }
    
  });
  }
  planAuditEchart
  //预案审核中
  planAudit (){
    let _this = this
    this.planAuditEchart = echarts.init(document.getElementById('planAudit'),'walden');  
    var option = {
      title: {
        text: "预案审核中：总数（1024）",
        left: "center",
        top: "0",
        bottom: '100%',
        textStyle: {
          fontSize: 23
        }
      },
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          axisLabel: this.axisLabel
      },
      yAxis: {
          type: 'value',
          axisLabel:{
            //this.axisLabel,
            textStyle:{
              fontSize :16,
              color:'#000000'
            }
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.data.biaogeTishi(params.name)
        }/* ,
        position: this.data.tableTooltipNoShow2 */
        
      },
      series: [{
          data: this.zhiNumData,
          type: 'bar',
          markPoint: {
            data: this.tiaoshiPao
        },
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'28',
          //label: this.topTextlabel
      }]
    };
    this.planAuditEchart.setOption(option);
    this.planAuditEchart.getZr().on('click', (params) => {
      const pointInPixel= [params.offsetX, params.offsetY];
    if (this.planAuditEchart.containPixel('grid',pointInPixel)) {
      let xIndex=this.planAuditEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/
        this.router.navigate(['/statisticanalysis/PageZhongDuiDetails'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}});
    }
    
  });
  }
  topEchart
  //预案状态统计
  planState(){
    this.topEchart = echarts.init(document.getElementById('pie'),'walden');  
    var option = {
      title: {
          text: '预案状态统计（7005份）',
          left: 'center',
          top: "6%",
          textStyle: {
            fontSize: 30
          }
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.data.biaogeTishiZhi(params.name)
        },
        position: this.data.tableTooltipNoShow2
      },
      legend: {
          orient: 'vertical',
          right: '13%',
          top: "26%",
          textStyle:{
            fontSize:18,
            color:"#000000"
          }, 
          data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中']
      },
      series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '75%',
            center: ['50%', '60%'],
            data: [
                {value: 1585, name: '预案新增'},
                {value: 2000, name: '预案审核通过'},
                {value: 2600, name: '预案编制'},
                {value: 1500, name: '预案审核退回'},
                {value: 1800, name: '预案审核中'}
            ],
            label: {
              formatter: '{b}({c}份)\n{d|{d}%}',
              fontSize :18,
              rich: {
                d: {
                  align: 'center',
                  fontSize :18
                }
              },
          },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
          }
      ]
    }
    this.topEchart.setOption(option);
  }

  tableTooltip(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
  }

  tableTooltip2(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
  }
}