Luck-Draw/src/app/home/home.component.ts

import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http'
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) { }

  visualizationData:any; //统计分析数据

  planQuantity:any = ['0','0']; //预案编制总量
  keyUnitQuantity:any; //单位总量
  dataQuantity:any; //重点关注单位预案数量

  threeDimensional:any; //三维预案总量
  twoDimensional:any; //三维预案总量
  cardDimensional:any; //卡片预案总量
  otherDimensional:any; //其他预案总量

  ngOnInit() {
    this.getVisualizationData()
  }

  ngAfterViewInit(): void {

  }

  //获取统计分析数据
  getVisualizationData () {
    this.http.get('/api/StatisticsAnalysis').subscribe((data:any)=>{
      this.visualizationData = data

      let numbers = (data.planStatistics.totalCount).toString();
      for (var i = 0; i < numbers.length; i++) {
        this.planQuantity.push(numbers[i]);
      }
      this.keyUnitQuantity = data.companyStatistics.totalCount
      this.dataQuantity = data.planStatistics.followedCount

      this.threeDimensional = data.planStatistics.planTypeStatistics.plan3DCount
      this.twoDimensional = data.planStatistics.planTypeStatistics.plan2DCount
      this.cardDimensional = data.planStatistics.planTypeStatistics.planCardCount
      this.otherDimensional = data.planStatistics.planTypeStatistics.planOtherCount

      this.unitType()
      this.unitData()
      this.teamData()
      this.keyUnit()

    })
  }

  //单位类型统计
  unitType () {
    let data = []
    let color = ['#BE1B94', '#E29217', '#2AFF71', '#BE1B4D', '#D1E217', '#65F5F3','#BE1B94', '#E29217', '#2AFF71', '#BE1B4D', '#D1E217', '#65F5F3'];
    //处理数据
    this.visualizationData.companyStatistics.buildingTypeStatistics.buildingTypes.forEach((element,index) => {
      let msg = {
        name: element.buildingTypeName,
        value: element.count,
        itemStyle: {
          color: color[index],
        }
      }
      data.push(msg)
    });
    //处理数据
    var chartHynyxf = echarts.init(document.getElementById('chartHynyxf'), 'skinUpp');

    var categoryData = [];
    for (var i = 0; i < data.length; i++) {
      categoryData.push(data[i].name);
    }
    var option = {
      // 标题
      title: {
        text: '采集单位类型统计',    
        top: 0
      },
      //图例
      legend: {
        data: ['单位类型统计'],
        show: false
      },
      grid: {
        left: 90, 
        top:40,
        // right:8,
        width: '70%' ,
        height: '70%' ,
      },
      //提示框
      tooltip: {
        trigger: 'item',
      },
      // x轴
      xAxis: {
        type: 'value'
      },
      // y轴
      yAxis: {
        type: 'category',
        data: categoryData,
        axisLabel: { margin: 3,fontSize:11},
      },
      // 数据
      series: [
        {
          name: '单位类型统计',
          type: 'bar',
          label: {
            show: true,
            position: 'right',
            color:'#fff'
          },
          data: data,
        },
      ],
    };
    chartHynyxf.setOption(option);
  }

  //单位数据统计
  unitData () {
    let data = []
    let unitData = []
    let planData = []
    //处理数据
    this.visualizationData.companyStatistics.organizationStatistics.organizations.forEach(element => {
      data.push(element.organizationName)
      unitData.push(element.count)
    });
    this.visualizationData.planStatistics.organizationStatistics.organizations.forEach(element => {
      planData.push(element.count)
    });
    //处理数据
    var chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'), 'skinUpp');
    var option = {
      color: ['#FB33C2', '#00CFF0', '#2C3DE0'],
      // 标题
      title: {
        text: '单位数据采集数量与单位预案数量统计',
        left: 0,
        top: 0,
      },
      grid: {
        left: 30,
        right: 0,
      },
      //图例
      legend: {
        top: 0,
        data: ['单位数据采集数量', '单位预案编制数量', ],
        icon: 'circle',
        itemGap: 20,
      },
      //提示框
      tooltip: {
        trigger: 'axis',
      },
      // x轴
      xAxis: {
        type: 'category',
        data: 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) { //如果类目项的文字大于1,
              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: unitData,
          label: {
            show: true,
            position: "top",
            formatter: '{c}',
            color: "#fff",
          },
          itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(254,51,194,1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(254,51,194,.5)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
          }
        }, {
          name: '单位预案编制数量',
          type: 'bar',
          data: planData,
          label: {
            show: true,
            position: "top",
            formatter: '{c}',
            color: "#fff",
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(0,220,254,1)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(1,104,191,1)' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
          }
        }
      ],
    };
    chartDwsjcj.setOption(option);
  }

  //全队数据采集和预案编制数量统计
  teamData () {
    let unitData = []
    let planData = []
    //处理数据
    this.visualizationData.companyStatistics.trendStatistics.added.forEach(element => {
      unitData.push(element.count)
    });
    this.visualizationData.planStatistics.trendStatistics.added.forEach(element => {
      planData.push(element.count)
    });
    //处理数据
    var chartQusj = echarts.init(document.getElementById('chartQusj'), 'skinUpp');
    var option = {
      grid: {
        top: 50,
        left: 30,
        right: 20,
        bottom: 20,
      },
      // 标题
      title: {
        text: '全队数据采集和预案编制数量统计',
        top: -4,
        left: 0
      },
      //图例
      legend: {
        top: 0,
        data: ['单位预案编制数量', '单位数据采集数量'],
      },
      //提示框
      tooltip: {
        trigger: 'axis',
      },
      // x轴
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        boundaryGap: false,
      },
      // y轴
      yAxis: {
        type: 'value',
        name: '个'
      },
      // 数据
      series: [{
          name: '单位预案编制数量',
          type: 'line',
          data: planData,
          // showSymbol: true,
          // symbolSize:6,
          // smooth: false,
          // label: {
          //   show: true,
          // },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(60,103,195,1)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(0,194,255,.2)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        {
          name: '单位数据采集数量',
          type: 'line',

          data: unitData,
        },
      ],
    };
    chartQusj.setOption(option);
  }

  //重点关注企业预案完成情况
  keyUnit () {
    let data = []
    var realEnd = [];
    var shouldEnd = [500,300,300,300,300,300,300,150];
    //处理数据
    this.visualizationData.planStatistics.buildingTypeStatistics.buildingTypes.forEach(element => {
      data.push(element.buildingTypeName)
      realEnd.push(element.count)
    });
    //处理数据
    var chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'skinUpp');
    var option = {
      color: ['#FB33C2', '#00CFF0', '#2C3DE0'],
      // 标题
      title: {
        text: '重点关注企业预案完成情况',
        left: 0,
        top: 0,
      },
      grid: {
        left: 30,
        bottom: 45
      },
      //图例
      legend: {
        top: 0,
        data: ['单位类型统计'],
        icon: 'circle',
        itemGap: 20,
        show: false
      },
      //提示框
      tooltip: {
        trigger: 'axis',
      },
      // x轴
      xAxis: {
        type: 'category',
        axisLine: false,
        data: data,
        axisLabel: {
          interval: 0,

          formatter:function(value){
            var ret = "";//拼接加\n返回的类目项 
            var maxLength = 3;//每项显示文字个数
            var valLength = value.length;//X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1) { //如果类目项的文字大于1,
              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',
          axisLine: false,
        }, {
          type: 'value',
          axisLine: false,
        }
      ],
      // 数据
      series: [
      //   {
      //   name: '单位类型统计',
      //   type: 'line',
      //   data: data,
      //   itemStyle: {
      //     color: '#fff'
      //   },
      //   label: {
      //     show: false,
      //     position: "top",
      //     formatter: '{c}',
      //     color: "#fff",
      //   },
      // },
      {
        name: '目标完成预案数量',
        type: 'bar',
        barWidth: '16px',
        barGap: '-100%',
        itemStyle: {
          color: '#025D7C'
        },
        label: {
          show: false,
        },
        data: shouldEnd,
      }, 
      {
        name: '完成预案数量',
        type: 'bar',
        barWidth: '16px',
        yAxisIndex: 1,
        itemStyle: {
          color: '#79CBE8'
        },
        label: {
          show: false,
          position: "insideTop",
          formatter: '{c}',
          color: "#fff",
        },
        data: realEnd,
      }
      ],
    };
    chartZdgzqy.setOption(option);
  }



}