Luck-Draw/src/app/pages/home2/home2.component.ts

import { Component, OnInit ,ElementRef} from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { HighlightSpanKind } from 'typescript';

declare var echarts: any;
declare var westeros: any;
declare var AMap: any;
declare var Loca: any;
@Component({
  selector: 'app-home2',
  templateUrl: './home2.component.html',
  styleUrls: ['./home2.component.scss']
})
export class Home2Component implements OnInit {

  constructor(private http:HttpClient,public element: ElementRef) { }
  
  unitTypeStatistics:any //单位类型统计
  myUnitTypeChart:any //单位类型统计图表
  unitTypeOption:any = {
    title: {
        // text: '单位类型统计',
        // left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '占比： <br/>{b} : {c} ({d}%)'
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 0,
        left: 'center',
        data: []
    },
    series: [
        {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
  }; //单位类型数据

  planStateStatistics //预案状态统计
  myPlanStateChart:any //预案状态统计图表
  planStateOption:any = {
    title: {
        // text: '预案编制情况统计',
        // left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '占比： <br/>{b} : {c} ({d}%)'
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 0,
        left: 'center',
        data: ['审核通过','已提交','已公开']
    },
    series: [
        {
            type: 'pie',//类型为饼图
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
  }; //预案状态数据

  planTypeStatistics //各类型预案统计
  myPlanTypeChart:any //各类型预案图表
  planTypeOption:any = {
    title: {
        // text: '各类型预案情况统计',
        // left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '占比： <br/>{b} : {c} ({d}%)'
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 0,
        left: 'center',
        data: ['卡片预案','二维预案','三维预案','其他预案']
    },
    series: [
        {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
  }; //预案状态数据

  trendStatistics //趋势统计
  trendChart:any //趋势图表
  trendOption:any = {
    title: {
      // text: '预案趋势统计'
  },
  tooltip: {
      trigger: 'axis'
  },
  legend: {
      data: ['新增预案', '修改预案']
  },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  toolbox: {
      feature: {
          saveAsImage: {}
      }
  },
  xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月','十二月']
  },
  yAxis: {
      type: 'value'
  },
  series: [
      {
          name: '新增预案',
          type: 'line',
          stack: '总量',
          data: []
      },
      {
          name: '修改预案',
          type: 'line',
          stack: '总量',
          data: []
      }
  ]
  }; //预案状态数据

  xxxChart:any
  xxxOption:any = {
    title: {
      // text: '南丁格尔玫瑰图',
      // subtext: '纯属虚构',
      // left: 'center'
  },
  tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
      left: 'center',
      top: 'bottom',
      data: ['1', '2', '3', '4']
  },
  toolbox: {
      show: true,
      feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {
              show: true,
              type: ['pie', 'funnel']
          },
          restore: {show: true},
          saveAsImage: {show: true}
      }
  },
  series: [
      {
          name: '面积模式',
          type: 'pie',
          radius: [30, 110],
          // center: ['75%', '50%'],
          roseType: 'area',
          data: [
              {value: 10, name: '1'},
              {value: 5, name: '2'},
              {value: 15, name: '3'},
              {value: 25, name: '4'}
          ]
      }
  ]
  }

  yyyChart:any
  yyyOption:any = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
  };

  t:any
  time:any
  theme:any //主题风格
  ngOnInit(): void {
    // const map = new AMap.Map(this.element.nativeElement.querySelector('#map'), {
    //     mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
    //     // pitch: 0,
    //     features: ['bg', 'road'],//地图显示要素
    //     zoom: 6,
    //     center: [116.408075, 39.950187],
    //     // viewMode: '3D'
    // });
    // const layer = new Loca.DistrictLayer({
    //     map: map
    // });
    // layer.setMap(map);
    


    this.getTime()
    setTimeout(() => {
   
      this.myUnitTypeChart = echarts.init(this.element.nativeElement.querySelector('#unitType'),'westeros');
      this.myPlanStateChart = echarts.init(this.element.nativeElement.querySelector('#planStates') ,'westeros');
      this.myPlanTypeChart = echarts.init(this.element.nativeElement.querySelector('#planType'),'westeros');
      this.trendChart = echarts.init(this.element.nativeElement.querySelector('#trend'),'westeros');
      this.xxxChart = echarts.init(this.element.nativeElement.querySelector('#xxx'),'westeros');
      this.xxxChart.setOption(this.xxxOption);
      this.yyyChart = echarts.init(this.element.nativeElement.querySelector('#yyy'),'westeros');
      this.yyyChart.setOption(this.yyyOption);
    }, 0);

    
    this.chartsSetOption();
    }
    getTime():any{
    this.t =  setInterval(()=>{
        var dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        this.time =  "当前时间：" + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
      }, 1000); //開始运行
    }
    chartsSetOption(){
      this.http.get("/api/StatisticsAnalysis").subscribe((data:any)=>{
        //单位类型统计
        this.unitTypeStatistics = data.companyStatistics.buildingTypeStatistics.buildingTypes
        this.unitTypeStatistics.forEach(item => {
          item.name = item.buildingTypeName
          item.value = item.count
          // this.unitTypeOption.legend.data.push(item.buildingTypeName)
        });
        this.unitTypeOption.series[0].data = this.unitTypeStatistics
        this.myUnitTypeChart.setOption(this.unitTypeOption,true);
        //预案状态统计
        this.planStateStatistics = data.planStatistics.planningStatistics
        this.planStateOption.series[0].data.push({name:'审核通过',value:data.planStatistics.planningStatistics.approvedCount})
        this.planStateOption.series[0].data.push({name:'已提交',value:data.planStatistics.planningStatistics.committedCount})
        this.planStateOption.series[0].data.push({name:'已公开',value:data.planStatistics.planningStatistics.publicCount})
        this.myPlanStateChart.setOption(this.planStateOption,true);
        //各类型预案统计
        this.planTypeStatistics = data.planStatistics.planTypeStatistics
        this.planTypeOption.series[0].data.push({name:'卡片预案',value:data.planStatistics.planTypeStatistics.planCardCount})
        this.planTypeOption.series[0].data.push({name:'二维预案',value:data.planStatistics.planTypeStatistics.plan2DCount})
        this.planTypeOption.series[0].data.push({name:'三维预案',value:data.planStatistics.planTypeStatistics.plan3DCount})
        this.planTypeOption.series[0].data.push({name:'其他预案',value:data.planStatistics.planTypeStatistics.planOtherCount})
        this.myPlanTypeChart.setOption(this.planTypeOption,true);
        //预案趋势图统计
        this.trendStatistics = data.planStatistics.trendStatistics
        // this.trendOption.series = []
        this.trendStatistics.added.forEach(item=>{
          this.trendOption.series[0].data.push(item.count)
        })
        this.trendStatistics.modified.forEach(item=>{
          this.trendOption.series[1].data.push(item.count)
        })
        this.trendChart.setOption(this.trendOption,true);

      })
    }
    ngOnDestroy(){
      window.clearInterval(this.t) //清一遍定时器
    }
}