examSystem-Anxin/src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.ts

import { Component, OnInit } from "@angular/core";
import { Router, NavigationExtras } from "@angular/router";
declare var echarts: any;
@Component({
  selector: "app-echarts",
  templateUrl: "./echarts.component.html",
  styleUrls: ["./echarts.component.scss"],
})
export class EchartsComponent implements OnInit {
  constructor(public router: Router) {}

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

  zhutu; //柱状图实例
  zhiData = {
    name: [
      "南宁支队",
      "柳州支队",
      "桂林支队",
      "梧州支队",
      "北海支队",
      "防尘岗支队",
      "钦州支队",
      "贵港支队",
      "玉林支队",
      "百色支队",
      "贺州支队",
      "河池支队",
      "来宾支队",
      "崇左支队",
    ],
    frequency: [18, 17, 14, 14, 12, 11, 15, 13, 12, 16, 16, 13, 18, 17, 12],
    number: [
      180, 170, 140, 140, 120, 110, 150, 130, 120, 160, 160, 130, 180, 170, 120,
    ],
  };
  zhiData2 = {
    name: [
      "南宁支队",
      "柳州支队",
      "桂林支队",
      "梧州支队",
      "北海支队",
      "防尘岗支队",
      "钦州支队",
      "贵港支队",
      "玉林支队",
      "百色支队",
      "贺州支队",
      "河池支队",
      "来宾支队",
      "崇左支队",
    ],
    frequency: [18, 17, 14, 14, 12, 11, 15, 13, 12, 16, 16, 13, 18, 17, 12],
    number: [
      180, 170, 140, 140, 120, 110, 150, 130, 120, 160, 160, 130, 180, 170, 120,
    ],
  };
  daData = {
    name: [
      "青秀大队",
      "特勤大队",
      "兴宁大队",
      "江南大队",
      "西乡塘大队",
      "良庆大队",
      "邕宁大队",
      "高新大队",
      "华侨大队",
      "经开大队",
      "武鸣大队",
      "隆安大队",
      "马山大队",
      "上林大队",
      "宾阳大队",
      "横县大队",
    ],
    frequency: [2, 3, 1, 1, 2, 1, 0, 1, 1, 0, 2, 0, 0, 1, 0],
    number: [30, 30, 10, 10, 20, 10, 0, 10, 10, 0, 20, 0, 0, 10, 0],
  };

  jiuData = {
    name: [
      "南宁市青秀区仙葫消防救援站",
      "南宁市青秀区凤岭消防救援站",
      "南宁市青秀区柳沙消防救援站",
    ],
    frequency: [1, 1, 1],
    number: [8, 11, 11],
  };

  staticExam = false; //考试统计
  upStatic = false; //发布考试统计
  //考试统计按钮
  staticecam() {
    this.staticExam = true;
    this.upStatic = false;
  }
  //发布考试按钮
  upexam() {
    this.staticExam = false;
    this.upStatic = true;
  }
  title = "考试频次(次)";
  examinationIndex = false;
  color = "#41CDFC";
  //切换
  switch(e) {
    if (e == "频次") {
      this.title = "考试频次(次)";
      this.examinationIndex = false;
      this.color = "#41CDFC";
    } else {
      this.title = "考试人数(个)";
      this.examinationIndex = true;
      this.color = "#FF8678";
    }
    let myChart = echarts.init(document.getElementById("zhidui"));
    myChart.dispose();
    this.initCharts();
  }
  //后退
  level = 0;
  back() {
    if (this.level != 0) {
      if (this.level == 1) {
        this.zhiData = this.zhiData2;
        let myChart = echarts.init(document.getElementById("zhidui"));
        myChart.clear();
      } else {
        this.zhiData = this.daData;
        let myChart = echarts.init(document.getElementById("zhidui"));
        myChart.clear();
      }
      this.initCharts();
      this.level = this.level - 1;
    }
  }
  initCharts() {
    var detailPlanEchart = echarts.init(document.getElementById("zhidui"));
    var option = {
      title: {
        text: this.title,
        left: "5%", // 位置
        textStyle: {
          color: "#A1A1A1",
          fontSize: "16px",
          textAlign: "left",
        },
      },
      xAxis: {
        type: "category",
        data: this.zhiData.name,
        axisLabel: {
          fontSize: 12,
          lineHeight: 31,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          fontSize: 18,
          lineHeight: 31,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            opacity: 0.6,
            type: "dashed",
          },
        },
        show: true,
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "1%",
        containLabel: true,
      },
      series: [
        {
          data: this.examinationIndex
            ? this.zhiData.number
            : this.zhiData.frequency,
          type: "bar",
          // showBackground: true,
          backgroundStyle: {
            color: "#F2F5F6",
          },
          barWidth: 40,
          color: this.color,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "black",
                  fontSize: 12,
                },
              },
            },
          },

          // barWidth:"24px"
        },
      ],
    };
    detailPlanEchart.on("click", (e) => {
      this.clickFunc(e);
    });
    detailPlanEchart.setOption(option);
  }
  clickFunc(e) {
    console.log(e);
    let myChart = echarts.init(document.getElementById("zhidui"));

    if (e.name.indexOf("支队") != -1) {
      this.zhiData = this.daData;
      this.level = 1;
      myChart.dispose();
      this.initCharts();
    } else if (e.name.indexOf("大队") != -1) {
      this.zhiData = this.jiuData;
      this.level = 2;
      myChart.dispose();
      this.initCharts();
    } else {
      window.open("home/statistic-examination/station-examinee");
    }
  }
}