Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/ShangHai-YuAn

src/app/statistic-analysis/echarts-data.service.ts

@@ -9,7 +9,8 @@ export class EchartsDataService {
 
   //预案状态分析
   statefulInspectionName:string;
+  statefulInspectionToggle:boolean = true; // true=显示所有柱状图 flase=显示当前点击柱状图
+
 
 
-  
 }

src/app/statistic-analysis/state/page-one/page-one.component.ts

@@ -47,14 +47,14 @@ export class PageOneComponent implements OnInit {
       },
       tooltip: {
           trigger: 'item',
-           formatter:  (params)=>{
-             //console.log(params)
-              return this.biaogeTishi(params.name)
+          formatter:  (params)=>{
+            return this.biaogeTishi(params.name)
           } ,
           backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
           borderWidth:'1',
           borderRadius :'0'
-          
+
+
       },
       legend: {
           orient: 'vertical',
@@ -101,9 +101,7 @@ export class PageOneComponent implements OnInit {
       ]
     };
     indexBzt.on('click', (params) => {
-      console.log(999)
       this.router.navigateByUrl('/statisticanalysis/statePageTwo_time');
-      // this.router.navigate(["/statisticanalysis/statePageTwo_time"])
     });
   indexBzt.setOption(options);
   }
@@ -125,24 +123,24 @@ export class PageOneComponent implements OnInit {
     shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
     var jsonObj =  JSON.parse(shuju);
     var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
-               res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
-               res+='<thead><tr>';
-               res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
-               res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
-               res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
-               res+='</tr></thead>'
-               res+='<tbody>';
-               for(var i=0;i<jsonObj.length;i++){
-                 res+='<tr>'
-                 res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
-                 res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
-                 res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
-               }
-               
-               res+='</tbody>'
-               res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
-               res+='</table></div></div>'
-               return res
+        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+        res+='<thead><tr>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
+        res+='</tr></thead>'
+        res+='<tbody>';
+        for(var i=0;i<jsonObj.length;i++){
+          res+='<tr>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
+        }
+        
+        res+='</tbody>'
+        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+        res+='</table></div></div>'
+        return res
   }
 
 }

src/app/statistic-analysis/state/page-two-name/page-two-name.component.html

@@ -1,4 +1,4 @@
-<div class="echartsBox" [hidden]="!isTrue">
+<div class="echartsBox" [hidden]="!data.statefulInspectionToggle">
     <div id="pie">
 
     </div>
@@ -30,4 +30,4 @@
     </div>
     
 </div>
-<app-page-zhong-dui-details #zhongDuiChild *ngIf="!isTrue"></app-page-zhong-dui-details>    
+<app-page-zhong-dui-details #zhongDuiChild *ngIf="!data.statefulInspectionToggle"></app-page-zhong-dui-details>    

src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts

@@ -51,9 +51,20 @@ export class PageTwoNameComponent implements OnInit {
         }  
       }  
   }//echarts两个字换行
+  topTextlabel = {
+    show: true, // 开启显示
+    position: 'top', // 在上方显示
+    distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
+    verticalAlign: 'middle',
+    textStyle: { // 数值样式
+      color: 'black',
+      fontSize: 12
+    }
+  }//柱状图上方显示数值
+
   zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
   zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
-  isTrue = true
+
   //预案新增统计
   planAdd () {
     let _this = this
@@ -67,6 +78,7 @@ export class PageTwoNameComponent implements OnInit {
           fontSize: 23
         }
       },
+      
       xAxis: {
           type: 'category',
           data: this.zhiNameData,
@@ -75,6 +87,15 @@ export class PageTwoNameComponent implements OnInit {
       yAxis: {
           type: 'value'
       },
+      tooltip: {
+        trigger: 'item',
+        formatter:  (params)=>{
+          return this.tableTooltip2(params.name)
+        },
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0'
+      },
       series: [{
           data: this.zhiNumData,
           type: 'bar',
@@ -82,14 +103,14 @@ export class PageTwoNameComponent implements OnInit {
           backgroundStyle: {
               color: 'rgba(220, 220, 220, 0.8)'
           },
-          barWidth :'28'
-          
+          barWidth :'28',
+          label: this.topTextlabel
       }]
     };
     addEchart.setOption(option);
     addEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案新增'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
   //预案审核通过
@@ -113,6 +134,15 @@ export class PageTwoNameComponent implements OnInit {
       yAxis: {
           type: 'value'
       },
+      tooltip: {
+        trigger: 'item',
+        formatter:  (params)=>{
+          return this.tableTooltip2(params.name)
+        },
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0'
+      },
       series: [{
           data: this.zhiNumData,
           type: 'bar',
@@ -120,13 +150,14 @@ export class PageTwoNameComponent implements OnInit {
           backgroundStyle: {
               color: 'rgba(220, 220, 220, 0.8)'
           },
-          barWidth :'28'
+          barWidth :'28',
+          label: this.topTextlabel
       }]
     };
     passPlanEchart.setOption(option);
     passPlanEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案审核通过'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
 
@@ -151,6 +182,15 @@ export class PageTwoNameComponent implements OnInit {
       yAxis: {
           type: 'value'
       },
+      tooltip: {
+        trigger: 'item',
+        formatter:  (params)=>{
+          return this.tableTooltip2(params.name)
+        },
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0'
+      },
       series: [{
           data: this.zhiNumData,
           type: 'bar',
@@ -158,13 +198,14 @@ export class PageTwoNameComponent implements OnInit {
           backgroundStyle: {
               color: 'rgba(220, 220, 220, 0.8)'
           },
-          barWidth :'28'
+          barWidth :'28',
+          label: this.topTextlabel
       }]
     };
     passMakeEchart.setOption(option);
     passMakeEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案编制'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
 
@@ -189,6 +230,15 @@ export class PageTwoNameComponent implements OnInit {
       yAxis: {
           type: 'value'
       },
+      tooltip: {
+        trigger: 'item',
+        formatter:  (params)=>{
+          return this.tableTooltip2(params.name)
+        },
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0'
+      },
       series: [{
           data: this.zhiNumData,
           type: 'bar',
@@ -196,13 +246,14 @@ export class PageTwoNameComponent implements OnInit {
           backgroundStyle: {
               color: 'rgba(220, 220, 220, 0.8)'
           },
-          barWidth :'28'
+          barWidth :'28',
+          label: this.topTextlabel
       }]
     };
     passBackEchart.setOption(option);
     passBackEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案审核退回'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
 
@@ -227,6 +278,15 @@ export class PageTwoNameComponent implements OnInit {
       yAxis: {
           type: 'value'
       },
+      tooltip: {
+        trigger: 'item',
+        formatter:  (params)=>{
+          return this.tableTooltip2(params.name)
+        },
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0'
+      },
       series: [{
           data: this.zhiNumData,
           type: 'bar',
@@ -234,15 +294,17 @@ export class PageTwoNameComponent implements OnInit {
           backgroundStyle: {
               color: 'rgba(220, 220, 220, 0.8)'
           },
-          barWidth :'28'
+          barWidth :'28',
+          label: this.topTextlabel
       }]
     };
     planAuditEchart.setOption(option);
     planAuditEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案审核中'
-      _this.isTrue = !_this.isTrue
+      _this.data.statefulInspectionToggle = false
     });
   }
+  
   //预案状态统计
   planState(){
     var shuju='[{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"}]';
@@ -259,27 +321,46 @@ export class PageTwoNameComponent implements OnInit {
       },
       tooltip: {
         trigger: 'item',
-        formatter: function (params){
-             var res = '<div class="tishi" style="background:#FFFFFF"><span style="color:#000000;font-size:25px;padding:10px 10px">预案补充</span>'
-             res+='</br><table style="width:100% background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0" >';
-             res+='<thead><tr>';
-             res+='<td style="border:1px solid #000000">名称</td>';
-             res+='<td style="border:1px solid #000000">数量</td>'
-             res+='<td style="border:1px solid #000000">总占比</td>'
-             res+='</tr></thead>'
-             res+='<tbody>';
-            //  console.log(jsonObj)
-             for(var i=0;i<jsonObj.length;i++){
-               res+='<tr>'
-               res+='<td style="border:1px solid #000000">'+jsonObj[i].name+'</td>'
-               res+='<td style="border:1px solid #000000">'+jsonObj[i].number+'</td>'
-               res+='<td style="border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
-             }
-             res+='</tbody>'
-             res+='</table></div>'
-             return res
+        formatter:  (params)=>{
+          return this.tableTooltip(params.name)
+        },
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0',
+        position: function (point, params, dom, rect, size) {
+          // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
+          // 提示框位置
+          var x = 0; // x坐标位置
+          var y = 0; // y坐标位置
+         
+          // 当前鼠标位置
+          var pointX = point[0];
+          var pointY = point[1];
+         
+          // 外层div大小
+          // var viewWidth = size.viewSize[0];
+          // var viewHeight = size.viewSize[1];
+         
+          // 提示框大小
+          var boxWidth = size.contentSize[0];
+          var boxHeight = size.contentSize[1];
+         
+          // boxWidth > pointX 说明鼠标左边放不下提示框
+          if (boxWidth > pointX) {
+            x = 35;
+          } else { // 左边放的下
+            x = pointX + 80;
+          }
+         
+          // boxHeight > pointY 说明鼠标上边放不下提示框
+          if (boxHeight > pointY) {
+            y = 65;
+          } else { // 上边放得下
+            y = pointY - boxHeight;
+          }
+         
+          return [pointX, pointY];
         }
-
       },
       legend: {
           orient: 'vertical',
@@ -320,4 +401,66 @@ export class PageTwoNameComponent implements OnInit {
     }
     passPlanEchart.setOption(option);
   }
+
+  tableTooltip(biaotou:string){
+    var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},'
+    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},'
+    shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},'
+    shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},'
+    shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},'
+    shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]'
+    var jsonObj =  JSON.parse(shuju);
+    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
+        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+        res+='<thead><tr>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
+        res+='</tr></thead>'
+        res+='<tbody>';
+        for(var i=0;i<jsonObj.length;i++){
+          res+='<tr>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
+        }
+        
+        res+='</tbody>'
+        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+        res+='</table></div></div>'
+        return res
+  }
+
+  tableTooltip2(biaotou:string){
+    var shuju='[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄埔中队","number":"144","zhanbi":"2.8%"},'
+    shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"静安中队","number":"120","zhanbi":"1.3%"},{"name":"普陀中队","number":"100","zhanbi":"1.1%"},'
+    shuju+='{"name":"虹口中队","number":"95","zhanbi":"1%"},{"name":"杨浦中队","number":"90","zhanbi":"0.9%"},'
+    shuju+='{"name":"闵行中队","number":"88","zhanbi":"0.8%"},{"name":"宝山中队","number":"83","zhanbi":"0.7%"},'
+    shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'
+    shuju+='{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},'
+    shuju+='{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]'
+    var jsonObj =  JSON.parse(shuju);
+    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>'
+        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+        res+='<thead><tr>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
+        res+='</tr></thead>'
+        res+='<tbody>';
+        for(var i=0;i<jsonObj.length;i++){
+          res+='<tr>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
+        }
+        
+        res+='</tbody>'
+        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+        res+='</table></div></div>'
+        return res
+  }
 }

src/app/statistic-analysis/state/page-two-time/echarts.html

@@ -1,7 +1,9 @@
-<app-page-zhong-dui-details *ngIf="!toggle"></app-page-zhong-dui-details>
-<div style="height: 450px;width: 50%;margin: 0 auto;" id="one" [hidden]="!toggle"></div>
-<div class="publicCss" id="two" [hidden]="!toggle"></div>
-<div class="publicCss" id="three" [hidden]="!toggle"></div>
-<div class="publicCss" id="four" [hidden]="!toggle"></div>
-<div class="publicCss" id="five" [hidden]="!toggle"></div>
-<div class="publicCss" id="six" [hidden]="!toggle"></div>
+<app-page-zhong-dui-details *ngIf="!echartsData.statefulInspectionToggle"></app-page-zhong-dui-details>
+<div [hidden]="!echartsData.statefulInspectionToggle">
+  <div style="height: 450px;width: 50%;margin: 0 auto;" id="one"></div>
+  <div class="publicCss" id="two"></div>
+  <div class="publicCss" id="three"></div>
+  <div class="publicCss" id="four"></div>
+  <div class="publicCss" id="five"></div>
+  <div class="publicCss" id="six"></div>
+</div>

src/app/statistic-analysis/state/page-two-time/page-two-time.component.html

@@ -8,14 +8,14 @@
           <label style="margin-right: 10px;">开始时间:</label>
           <input matInput [matDatepicker]="start" placeholder="请选择开始时间" readonly (dateChange)="startEvent($event)" [formControl]='startTime'>
           <mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
-          <mat-datepicker #start></mat-datepicker>
+          <mat-datepicker #start startView="multi-year"></mat-datepicker>
         </div>
   
         <div class="queryField">
           <label style="margin-right: 10px;">结束时间:</label>
           <input matInput [matDatepicker]="end" placeholder="请选择结束时间" readonly (dateChange)="endEvent($event)" [formControl]='endTime'>
           <mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle>
-          <mat-datepicker #end></mat-datepicker>
+          <mat-datepicker #end startView="multi-year"></mat-datepicker>
         </div>
 
         <div class="btnbox" style="margin-left: 30px;">
@@ -32,8 +32,8 @@
 
   <div class="echarts">
     <div class="center">
-      <app-echarts *ngIf="!isQuery" #echarts></app-echarts>
-      <app-page-two-name *ngIf="isQuery"></app-page-two-name>
+      <app-echarts *ngIf="!isQuery" #appEcharts></app-echarts>
+      <app-page-two-name *ngIf="isQuery" #pageTwoName></app-page-two-name>
     </div>
   </div>
 

src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

@@ -3,6 +3,8 @@ import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
 import { FormControl } from '@angular/forms';
 import { DateAdapter } from '@angular/material/core';
+import { PageTwoNameComponent } from '../page-two-name/page-two-name.component';
+import {EchartsDataService} from '../../echarts-data.service'
 declare var echarts: any;
 
 @Component({
@@ -12,28 +14,34 @@ declare var echarts: any;
 })
 export class PageTwoTimeComponent implements OnInit {
 
-  constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,) { }
+  constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
   
-  @ViewChild('echarts') echarts:echartsComponent; //父组件中获得子组件的引用
+  @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用
+  @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用
 
   ngOnInit(): void {
-    this.startTime = new FormControl( (new Date()).getFullYear()+ '-' + '01' + '-' + '01' )
-    this.endTime = new FormControl( new Date() )
+    this.startTime = new FormControl( (new Date()).getFullYear()-10 )
+    this.endTime = new FormControl( (new Date()).getFullYear() )
     this.adapter.setLocale('CH')
   }
 
   isQuery:boolean = true; //横纵向查询
 
+  //查询
   query () {
-    this.echarts.toggleEcharts()
+
   }
 
+  //shao
   toggleTrue () { 
     this.isQuery = true
+    this.echartsData.statefulInspectionToggle = true
   }
 
+  //chen
   toggleFalse () { 
     this.isQuery = false
+    this.echartsData.statefulInspectionToggle = true
   }
 
   startTime:any; //查询开始时间
@@ -95,7 +103,7 @@ export class PageTwoTimeComponent implements OnInit {
 })
 export class echartsComponent implements OnInit {
 
-  constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,) { }
+  constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
 
   ngOnInit(): void {
     window.setTimeout(()=>{
@@ -108,11 +116,7 @@ export class echartsComponent implements OnInit {
     },0)
   }
 
-  toggle:boolean = true;//切换
 
-  toggleEcharts () {
-    this.toggle = !this.toggle
-  }
 
   oneInit () {
     var chartQusj = echarts.init(document.getElementById('one'), 'skinUpp');
@@ -191,6 +195,7 @@ export class echartsComponent implements OnInit {
   }
 
   twoInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('two'), 'skinUpp');
     var option = {
       grid: {
@@ -257,9 +262,14 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案新增'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }
 
   threeInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('three'), 'skinUpp');
     var option = {
       grid: {
@@ -326,9 +336,14 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案审核通过'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }
 
   fourInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('four'), 'skinUpp');
     var option = {
       grid: {
@@ -395,9 +410,14 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案编制'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }
 
   fiveInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('five'), 'skinUpp');
     var option = {
       grid: {
@@ -464,9 +484,14 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案审核退回'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }
 
   sixInit () {
+    let that = this
     var chartQusj = echarts.init(document.getElementById('six'), 'skinUpp');
     var option = {
       grid: {
@@ -533,6 +558,10 @@ export class echartsComponent implements OnInit {
       ],
     };
     chartQusj.setOption(option);
+    chartQusj.on('click', function (params) {
+      that.echartsData.statefulInspectionName = '预案审核中'
+      that.echartsData.statefulInspectionToggle = false
+    });
   }
 
 

src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss

@@ -10,6 +10,4 @@
         top: 45%;
         transform: translate(-50%,-50%);
     }
-    
-    
 }

src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts

@@ -38,6 +38,16 @@ export class PageZhongDuiDetailsComponent implements OnInit {
       yAxis: {
           type: 'value'
       },
+      tooltip: {
+        trigger: 'item',
+        formatter:  (params)=>{
+          console.log(666,params)
+          return this.tableTooltip(params)
+        },
+        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
+        borderWidth:'1',
+        borderRadius :'0'
+      },
       series: [{
           data: this.zhongNumData,
           type: 'bar',
@@ -50,4 +60,29 @@ export class PageZhongDuiDetailsComponent implements OnInit {
     detailPlanEchart.setOption(option);
   }
 
+ 
+  tableTooltip(params:any){
+    var data = [
+      {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"}
+    ]
+    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+params.name+'</span></div>'
+        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
+        res+='<thead><tr>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
+        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
+        res+='</tr></thead>'
+        res+='<tbody>';
+        for(var i=0;i<data.length;i++){
+          res+='<tr>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].name+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].number+'</td>'
+          res+='<td style="text-align:center;border:1px solid #000000">'+data[i].zhanbi+'</td></tr>'
+        }
+        
+        res+='</tbody>'
+        // res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
+        res+='</table></div></div>'
+        return res
+  }
 }