ShangHaiYuan-AnXin/src/app/statistic-analysis/home/home.component.ts

import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router } from '@angular/router';
import { EchartsDataService } from '../echarts-data.service';
declare var echarts: any;
declare var AMap: any;
declare var AMapUI: any;
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router: Router,public emitService: EchartsDataService) { }

  map:any; //地图
  ngOnInit() {
    this.emitService.eventEmit.subscribe((value: any) => {
      if (value == 'echarts') {
        setTimeout(() => {
          this.updateEcharts()
        }, 500);
      }
    });
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.updateEcharts()
      }, 0);
    })

    window.setTimeout(()=>{
      this.unitType()
      this.unitData()
      this.keyUnit()
      this.mapInit() //初始化地图
    },0)
  }

  //更新echarts视图
  updateEcharts(){
    this.planState.resize()
    this.chartDwsjcj.resize()
    this.chartZdgzqy.resize()

  }

  threePlan(){
    // this.router.navigate(['/planManagement/entryPlan'])
  }
  twoPlan(){
    // this.router.navigate(['/planManagement/entryPlan'])
  }
  cardPlan(){
    // this.router.navigate(['/planManagement/entryPlan'])
  }
  otherPlan(){
    // this.router.navigate(['/planManagement/entryPlan'])
  } 
  
  //计划更新页面跳转
  scheduled(){
    this.router.navigate(['/statisticanalysis/scheduledUpdates'])
  }

  ngOnDestroy(): void {
    this.planState.clear()
    this.planState.dispose()
    this.chartDwsjcj.clear()
    this.chartDwsjcj.dispose()
    this.chartZdgzqy.clear()
    this.chartZdgzqy.dispose()
    
  }
  //初始化地图
  adcode:any  //行政编码 
  mapInit () {
    //创建地图
    this.map = new AMap.Map('chartMap', {
      cursor: 'default',
      zooms:[8,16],
      mapStyle:"amap://styles/grey", 
      // bubble: true
    });

    let colors = [
      "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
      "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
      "#651067", "#329262", "#5574a6", "#3b3eac"
    ];
    
    AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer)=> {

      //创建一个实例
      let districtExplorer = new DistrictExplorer({
        map: this.map,
        eventSupport: true, //打开事件支持
      });

      // let adcode = this.adcode; //行政编码 
      let adcode
      if(sessionStorage.getItem("realName") == "上海总队"){
        adcode = 310000
      }else{
        adcode = 310000
      }

      districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {

          //更新地图视野
          this.map.setBounds(areaNode.getBounds(), null, null, true);

          //设置定位节点，支持鼠标位置识别
          //注意节点的顺序，前面的高优先级
          districtExplorer.setAreaNodesForLocating(areaNode);

          //清除已有的绘制内容
          districtExplorer.clearFeaturePolygons();
  
          //绘制子区域
          districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{
            // console.log(123,feature,i)
  
            let fillColor = colors[i % colors.length];
            let strokeColor = colors[colors.length - 1 - i % colors.length];
  
            return {
                cursor: 'default',
                bubble: true,
                strokeColor: strokeColor, //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: fillColor, //填充色
                fillOpacity: 0.5, //填充透明度
            };
          });
  
          //绘制父区域
          districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: null, //填充色
            fillOpacity: 0.5, //填充透明度
          });

          // 更新地图视野以适合区划面
          this.map.setFitView(districtExplorer.getAllFeaturePolygons());
      });

      districtExplorer.on('featureClick', (e, feature) =>{
        
        let props = feature.properties;
        adcode = props.adcode
        let fillColor2
        if(props.level == 'city'){
            fillColor2 = null
        }else{
            fillColor2 = '#d0daee'
        }
        districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {
          //更新地图视野
          // this.map.setBounds(areaNode.getBounds(), null, null, true);

          //设置定位节点，支持鼠标位置识别
          //注意节点的顺序，前面的高优先级
          districtExplorer.setAreaNodesForLocating(areaNode);

          //清除已有的绘制内容
          districtExplorer.clearFeaturePolygons();
  
          //绘制子区域
          districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{
            let fillColor = colors[i % colors.length];
            // console.log(111,fillColor)
            let strokeColor = colors[colors.length - 1 - i % colors.length];
  
            return {
                cursor: 'default',
                bubble: true,
                strokeColor: strokeColor, //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: fillColor, //填充色
                fillOpacity: 0.5, //填充透明度
            };
          });
  
          //绘制父区域
          districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: fillColor2, //填充色
            fillOpacity: 0.5, //填充透明度
          });

          // 更新地图视野以适合区划面
          this.map.setFitView(districtExplorer.getAllFeaturePolygons());
        });
      
        this.planState.setOption(this.planStateOptionsZhong);
        this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhong);
        this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhong);
        this.planNum = ["0","0","3","1","6","5"]
        this.keyUnitNum = 666
        this.dataGetNum = 456

        this.threePlanNum = "867"
        this.twoPlanNum = "485"
        this.cardPlanNum = "756"
        this.otherPlanNum = "658"
      });

      districtExplorer.on('outsideClick', (e) => {
        // console.log('区域外点击');
        let adcode
        if(sessionStorage.getItem("realName") == "上海总队"){
          adcode = 310000
        }else{
          adcode = 310000
        }
        districtExplorer.loadAreaNode(adcode, (error, areaNode)=> {
          //更新地图视野
          // this.map.setBounds(areaNode.getBounds(), null, null, true);

          //设置定位节点，支持鼠标位置识别
          //注意节点的顺序，前面的高优先级
          districtExplorer.setAreaNodesForLocating(areaNode);

          //清除已有的绘制内容
          districtExplorer.clearFeaturePolygons();
  
          //绘制子区域
          districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{
            let fillColor = colors[i % colors.length];
            // console.log(111,fillColor)
            let strokeColor = colors[colors.length - 1 - i % colors.length];
  
            return {
                cursor: 'default',
                bubble: true,
                strokeColor: strokeColor, //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: fillColor, //填充色
                fillOpacity: 0.5, //填充透明度
            };
          });
  
          //绘制父区域
          districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: null, //填充色
            fillOpacity: 0.5, //填充透明度
          });

          // 更新地图视野以适合区划面
          this.map.setFitView(districtExplorer.getAllFeaturePolygons());
        });
        this.planState.setOption(this.planStateOptionsZhi);
        this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi);
        this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi);
        this.planNum = ["0","2","2","6","7","8"]
        this.keyUnitNum = 8036
        this.dataGetNum = 6578

        this.threePlanNum = "4374"
        this.twoPlanNum = "9693"
        this.cardPlanNum = "6403"
        this.otherPlanNum = "2208"
      })
      
    });


  }
  planNum = ["0","2","2","6","7","8"]
  keyUnitNum = 8036
  dataGetNum = 6578

  threePlanNum = "4374"
  twoPlanNum = "9693"
  cardPlanNum = "6403"
  otherPlanNum = "2208"


  aPlan = '328'
  bPlan = '219'
  cPlan = '168'
  dPlan = '254'
  ePlan = '116'
  ngAfterViewInit(): void {
  }

  planState
  planStateOptionsZhi = {
    title: {
        text: '预案状态统计（7005份）',
        left: 'left', 
        textStyle:{
          color:'#fff',
          fontWeight:'normal'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
    },
    series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '60%',
          center: ['50%', '58%'],
          label:{
            show:true,
            //fontSize:10,
            formatter:'{b}\n{d|{c}份}',
            rich: {
              d: {
                align: 'center',
              }
            },
            
          },
          data: [
              {value: 1585, name: '预案新增'},
              {value: 2000, name: '审核通过',itemStyle:{color:'#02A7F0'}},
              {value: 2600, name: '预案编制'},
              {value: 1500, name: '审核退回'},
              {value: 1800, name: '预案审核中'}
          ],
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
        }
    ]
  };
  planStateOptionsZhong = {
    title: {
        text: '预案状态统计（895份）',
        left: 'left', 
        textStyle:{
          color:'#fff',
          fontWeight:'normal'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
    },
    series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '60%',
          center: ['50%', '58%'],
          label:{
            show:true,
            formatter:'{b}\n{d|{c}份}',
            rich: {
              d: {
                align: 'center',
              }
            },
            
          },
          data: [
              {value: 200, name: '预案新增'},
              {value: 234, name: '审核通过',itemStyle:{color:'#02A7F0'}},
              {value: 165, name: '预案编制'},
              {value: 189, name: '审核退回'},
              {value: 211, name: '预案审核中'}
          ],
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
        }
    ]
  };
  //预案状态统计
  unitType () {
    this.planState = echarts.init(document.getElementById('chartHynyxf'), 'walden');
    this.planState.setOption(this.planStateOptionsZhi);
    this.planState.on("click",(params) => {
      this.router.navigate(['/statisticanalysis/statePageOne'])
    })
  }

  //新增、删除单位统计
  chartDwsjcj
  chartDwsjcjOptionsZhi =  {
    // 标题
    title: {
      text: '新增、删除单位统计',
      left: 0,
      top: 0,
      textStyle:{
        color:'#fff',
        fontWeight:'normal'
      },
    },
    grid: {
      left: 30,
      right: 0,
      bottom:20
    },
    //图例
    legend: {
      top: 0,
      data: ['新增单位', '删除单位', ],
      icon: 'circle',
      itemGap: 20,
    },
    //提示框
    tooltip: {
      trigger: 'axis',
    },
    // x轴
    xAxis: {
      type: 'category',
      data: ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"],
      axisLabel: {
        interval: 0,

        formatter:function(value){
          var ret = "";//拼接加\n返回的类目项 
          var maxLength = 5;//每项显示文字个数
          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

      }
    },
    // y轴
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.4)'
        }
      },
    },
    // 数据
    series: [
      {
        name: '新增单位',
        type: 'bar',
        data: [320, 302, 301, 234, 390, 330, 320, 390, 330, 320, 390, 301, 234, 390 ],
        label: {
          show: false,
          position: "top",
          formatter: '{c}',
          color: "#fff",
        }
      }, {
        name: '删除单位',
        type: 'bar',
        data: [300, 202, 101, 134, 290, 430, 220, 490, 430, 490, 430, 202, 101, 134 ],
        label: {
          show: false,
          position: "top",
          formatter: '{c}',
          color: "#fff",
        }
      }
    ],
  };
  chartDwsjcjOptionsZhong =  {
    // color: ['#FB33C2', '#00CFF0', '#2C3DE0'],
    // 标题
    title: {
      text: '新增、删除单位统计',
      left: 0,
      top: 0,
      textStyle:{
        color:'#fff',
        fontWeight:'normal'
      },
    },
    grid: {
      left: 30,
      right: 0,
    },
    //图例
    legend: {
      top: 0,
      data: ['新增单位', '删除单位', ],
      icon: 'circle',
      itemGap: 20,
    },
    //提示框
    tooltip: {
      trigger: 'axis',
    },
    // x轴
    xAxis: {
      type: 'category',
      data: ["浦东中队","黄浦中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队","松江中队","金山中队","崇明中队"],
      axisLabel: {
        interval: 0,

        formatter:function(value){
          var ret = "";//拼接加\n返回的类目项 
          var maxLength = 5;//每项显示文字个数
          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

      }
    },
    // y轴
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.4)'
        }
      },
    },
    // 数据
    series: [
      {
        name: '新增单位',
        type: 'bar',
        data: [88, 45, 95, 105, 75, 89, 69, 110, 96, 90, 80, 78, 94, 102],
        label: {
          show: false,
          position: "top",
          formatter: '{c}',
          color: "#fff",
        }
      }, {
        name: '删除单位',
        type: 'bar',
        data: [35, 33, 27, 30, 35, 36, 28, 32, 36, 22, 19, 28, 34, 36],
        label: {
          show: false,
          position: "top",
          formatter: '{c}',
          color: "#fff",
        }
      }
    ],
  };
  unitData () {
    this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'),'walden');
    this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi);
    this.chartDwsjcj.on("click",(params) => {
      if(params.seriesName == "新增单位"){
        this.router.navigate(['/statisticanalysis/addUnit_one'])
      }else{
        this.router.navigate(['/statisticanalysis/delete_one'])
      }
    })
  }

  chartZdgzqy
  chartZdgzqyOptionsZhi = {
    title: {
      text: '建筑类型统计（8900家）',
      top: -5,
      left: 'left', 
      textStyle:{
        color:'#fff',
        fontWeight:'normal'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}家 ({d}%)'
    },
    // legend: {
    //   orient: 'vertical',
    //   right: 150,
    //   top:80,
    //   data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
    // },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '70%',
        center: ['50%', '61%'],
        label:{
          show:true,
          // fontSize:13,
          formatter:'{b}{c}家',
          rich: {
            d: {
              align: 'center',
            }
          },
        },
        data: [
            {value: 500, name: '高层'},
            {value: 800, name: '地下'},
            {value: 900, name: '轨道交通'},
            {value: 800, name: '化工生产'},
            {value: 1200, name: '储罐类'},
            {value: 1500, name: '厂房'},
            {value: 1400, name: '古建筑'},
            {value: 600, name: '商市场'},
            {value: 568, name: '医院'},
            {value: 888, name: '学校'},
            {value: 485, name: '宾馆'},
            {value: 966, name: '娱乐场所'},
            {value: 789, name: '餐饮业'},
            {value: 500, name: '影剧院'},
            {value: 1025, name: '展览建筑'},
            {value: 600, name: '隧道'}
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  chartZdgzqyOptionsZhong = {
    title: {
      text: '建筑类型统计（1015家）',
      left: 'left', 
      textStyle:{
        color:'#fff',
        fontWeight:'normal'
      },
      top: -3,
        // textStyle: {
        //   fontSize:31
        // }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}家 ({d}%)'
    },
    // legend: {
    //   orient: 'vertical',
    //   right: 150,
    //   top:80,
    //   data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道']
    // },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '70%',
        center: ['50%', '60%'],
        label:{
          show:true,
          // fontSize:13,
          formatter:'{b}{c}家',
          rich: {
            d: {
              align: 'center',
            }
          },
        },
        data: [
            {value: 123, name: '高层'},
            {value: 105, name: '地下'},
            {value: 95, name: '轨道交通'},
            {value: 96, name: '化工生产'},
            {value: 89, name: '储罐类'},
            {value: 111, name: '厂房'},
            {value: 95, name: '古建筑'},
            {value: 94, name: '商市场'},
            {value: 85, name: '医院'},
            {value: 83, name: '学校'},
            {value: 81, name: '宾馆'},
            {value: 79, name: '娱乐场所'},
            {value: 82, name: '餐饮业'},
            {value: 97, name: '影剧院'},
            {value: 82, name: '展览建筑'},
            {value: 72, name: '隧道'}
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  //建筑类型统计
  keyUnit () {
    this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'walden');
    
    this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi);
    this.chartZdgzqy.on("click",(params) => {
      this.router.navigate(['/statisticanalysis/buildingType_one'])
    })
  }

  isNumList:boolean = true
  changeNumList(){
    this.isNumList = !this.isNumList
  }
}