图表

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

@@ -1,15 +1,199 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
-
+import { Router, NavigationExtras } from "@angular/router";
+declare var echarts: any;
 @Component({
-  selector: 'app-echarts',
+  selector: "app-echarts",
-  templateUrl: './echarts.component.html',
+  templateUrl: "./echarts.component.html",
-  styleUrls: ['./echarts.component.scss']
+  styleUrls: ["./echarts.component.scss"],
 })
 export class EchartsComponent implements OnInit {
-
+  constructor(public router: Router) {}
-  constructor() { }
 
   ngOnInit(): void {
+    window.setTimeout(() => {
+      this.initCharts();
+    }, 0);
   }
 
+  zhutu; //柱状图实例
+  zhiNameData = {
+    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]
+    
+  };
+  daNameData = {
+    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],
+  };
+  
+  jiuNameData = {
+    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";
+    }
+    this.initCharts();
+  }
+  //点击柱状图
+
+  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.zhiNameData.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,
+      },
+      series: [
+        {
+          data: this.examinationIndex?this.zhiNameData.number: this.zhiNameData.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);
+
+    if (e.name.indexOf("支队") != -1) {
+      this.zhiNameData = this.daNameData;
+      this.initCharts();
+    } else if (e.name.indexOf("大队") != -1) {
+      this.zhiNameData = this.jiuNameData;
+      this.initCharts();
+    } else {
+      this.router.navigate(["home/statistic-capacity"]);
+    }
+  }
 }