[完善]首页echarts数据显示

src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts

@@ -527,10 +527,20 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
           params.offsetY,
         ])[0];
         if (this.zhiorbuild == "zhi") {
+
           if (
             (this.data.level == "0" || this.data.level == "1") &&
             this.tabledata[0].buildingTypes[xIndex].organizations.length >= 1
           ) {
+            this.router.navigate(["/statisticanalysis/CompangInfo"], {
+              queryParams: {
+                name: option.xAxis.data[xIndex],
+                type: 1,
+                jsid: this.lastId,
+                buildid: option.xAxis.id[xIndex],
+              },
+            });
+            return;
             // 总队，支队跳转
             this.router.navigate(
               ["/statisticanalysis/addUnit_one/addUnit_two_typeDetails"],
@@ -555,21 +565,19 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
             });
           }
         } else {
-          // console.log(this.data.level)
-          // console.log(this.tabledata[0].organizations[xIndex].subOrganizations)
-          this.router.navigate(["/statisticanalysis/CompangInfo"], {
-            queryParams: {
-              name: option.xAxis.data[xIndex],
-              type: 1,
-              jsid: option.xAxis.id[xIndex],
-              buildid: this.lastId,
-            },
-          });
-          return
           if (
             (this.data.level == "0" || this.data.level == "1") &&
             this.tabledata[0].organizations[xIndex].subOrganizations.length >= 1
           ) {
+            this.router.navigate(["/statisticanalysis/CompangInfo"], {
+              queryParams: {
+                name: option.xAxis.data[xIndex],
+                type: 1,
+                jsid: option.xAxis.id[xIndex],
+                buildid: this.lastId,
+              },
+            });
+            return;
             //总队，支队跳转
             this.router.navigate(
               ["/statisticanalysis/addUnit_one/addUnit_two_typeDetails"],

src/app/statistic-analysis/home/home.component.html

@@ -15,7 +15,27 @@
       <div id="tooltip" [hidden]="!isTooltip" [style.left]="mouseX" [style.top]="mouseY">
         <!-- 这里是浮窗的内容 -->
         <div class="content">
-          <span (click)="close()">x</span>
+          <div class="countbox">
+            <div>
+              <span>区域名称:</span>
+              <span>
+                {{itemData.name}}
+              </span>
+            </div>
+            <div>
+              <span>单位数量:</span>
+              <span>
+                {{itemData.companyCount}}
+              </span>
+            </div>
+            <div>
+              <span>预案数量:</span>
+              <span>
+                {{itemData.planCount}}
+              </span>
+            </div>
+          </div>
+          <span class="close" (click)="close()">x</span>
         </div>
       </div>
       <div class="number-area" id="number-area" style="z-index: 100;height: 125px;width: 185px;">

src/app/statistic-analysis/home/home.component.scss

@@ -28,19 +28,29 @@
 }
 
 #tooltip {
-  width: 200px;
-  height: 100px;
+  width: 170px;
+  height: 90px;
   position: fixed;
-  padding: 10px;
-  background-color: pink;
-  border: 1px solid #ccc;
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 8px;
   z-index: 999;
   .content {
+    width: 100%;
+    height: 100%;
     position: relative;
-    span {
+    color: #fff;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    box-sizing: border-box;
+    padding-left: 12px;
+    .close {
       position: absolute;
-      right: 0;
-      top: 0;
+      right: 8px;
+      top: 3px;
+
+      cursor: pointer;
     }
   }
 }

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

@@ -36,6 +36,7 @@ export class HomeComponent implements OnInit {
   ngOnInit() {
     this.getechartsdata();
     // this.getYearlyCompleteProgress();
+    this.getEchartsItemData();
   }
   ngAfterViewInit() {
     setTimeout(() => {
@@ -46,11 +47,27 @@ export class HomeComponent implements OnInit {
     }, 0);
   }
 
+  etEchartsItemData = [];
+  getEchartsItemData() {
+    this.http
+      .get("/api/StatisticsAnalysis/GetCountByOrg")
+      .subscribe((data: any) => {
+        console.log("统计数据", data);
+        this.etEchartsItemData = data;
+      });
+  }
+
   myChart: any;
   isTooltip = false;
 
   mouseX;
   mouseY;
+
+  itemData = {
+    name: "",
+    companyCount: 0,
+    planCount: 0,
+  };
   echartsMap() {
     this.myChart = echarts.init(document.getElementById("chartMap"));
     let option: any = {
@@ -89,10 +106,21 @@ export class HomeComponent implements OnInit {
       series: [],
     };
     this.myChart.on("click", (params) => {
+      if (this.etEchartsItemData.length === 0) {
+        alert("请数据加载完成后重试!");
+        return;
+      }
       console.log("点击区域", params);
       this.isTooltip = true;
       this.mouseX = params.event.event.clientX + "px";
       this.mouseY = params.event.event.clientY + "px";
+      let name = params.name.substring(0, 2);
+      console.log("点击区域name", name);
+      let item = this.etEchartsItemData.find(
+        (v) => v.name.indexOf(name) !== -1
+      );
+      item ? (this.itemData = item) : null;
+      this.itemData.name = params.name;
     });
     echarts.registerMap("tianjin", this.mapData);
     this.myChart.setOption(option);