[完善]组件切换时销毁echarts

src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts

@@ -17,9 +17,18 @@ export class AddUnitOneComponent implements OnInit {
       this.initCharts()
     },0)
   }
+
+  //组件销毁时
+  ngOnDestroy(){
+    window.clearTimeout(this.setTimeoutObj);
+    this.indexBzt.clear()
+    this.indexBzt.dispose()
+  }
+
+  indexBzt//首页饼状图实例
   /* 首页饼状图 */
   initCharts(){
-    let indexBzt = echarts.init(document.getElementById('indexBzt'));
+    this.indexBzt = echarts.init(document.getElementById('indexBzt'));
     let options={
       title: {
         text: '新增单位统计（8900家）',
@@ -88,10 +97,10 @@ export class AddUnitOneComponent implements OnInit {
         }
       ]
     };
-    indexBzt.on('click', (params) => {
+    this.indexBzt.on('click', (params) => {
       this.router.navigateByUrl('/statisticanalysis/addUnit_one/addUnit_two_type');
     });
-    indexBzt.setOption(options);
+    this.indexBzt.setOption(options);
   }
   biaogeTishi(biaotou:string){
     var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},'
@@ -124,7 +133,5 @@ export class AddUnitOneComponent implements OnInit {
         return res
   }
 
-  ngOnDestroy(){
-    window.clearTimeout(this.setTimeoutObj);
-  }
+  
 }

src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts

@@ -18,6 +18,7 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
   level:String
 
   setTimeoutObj//延时器需要清除
+
   ngOnInit(): void {
     this.dateInit ()
     this.route.queryParams.subscribe(params => {
@@ -31,6 +32,8 @@ export class AddUnitThreeBarDetailsComponent implements OnInit {
   }
   ngOnDestroy(){
     window.clearTimeout(this.setTimeoutObj);
+    this.detailPlanEchart.clear()
+    this.detailPlanEchart.dispose()
   }
 
   selectType:string = 'month'; //选择当前的 查询类型 按月/年

src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts

@@ -30,6 +30,8 @@ export class AddUnitThreeLineDetailsComponent implements OnInit {
 
   ngOnDestroy(){
     window.clearTimeout(this.setTimeoutObj);
+    this.detailPlanEchart.clear()
+    this.detailPlanEchart.dispose()
   }
 
   selectType:string = 'month'; //选择当前的 查询类型 按月/年
@@ -52,7 +54,6 @@ export class AddUnitThreeLineDetailsComponent implements OnInit {
   }
   selectStartYear:any = (new Date()).getFullYear() //开始年份
 
-
   topTextlabel = {
     show: true, // 开启显示
     position: 'top', // 在上方显示
@@ -74,6 +75,7 @@ export class AddUnitThreeLineDetailsComponent implements OnInit {
   option
   date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
   dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200]
+
   detailEcharts(){
     this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');  
     this.option = {

src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html

@@ -61,7 +61,7 @@
       </div> -->
       <div class="btnbox">
        <button mat-stroked-button (click)="forward()">类型统计</button>
-        <button mat-stroked-button (click)="reverse()">区间选择</button>
+            <button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': true}">区间选择</button>
       </div>
     </div>
     <div class="echartsbox">

src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss

@@ -61,3 +61,7 @@
 
     }
   }
+.selectedBtn{
+    background-color: #2196f3;
+    color: white;
+}

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

@@ -27,6 +27,13 @@ export class AddUnitTwoTimeComponent implements OnInit {
   }
   ngOnDestroy(){
     window.clearTimeout(this.setTimeoutObj);
+    this.chartQusj.clear()
+    this.chartQusj.dispose()
+    this.forArr.forEach(item => {
+      item.echart.clear()
+      item.echart.dispose()
+    })
+
   }
   selectType:string = 'month'; //选择当前的 查询类型 按月/年
 
@@ -105,6 +112,7 @@ export class AddUnitTwoTimeComponent implements OnInit {
   }
 
 
+  chartQusj//顶部大图实例
   forArr = [{id:'gaoceng',name:'高层',echart:null},
             {id:'dixia',name:'地下',echart:null},
             {id:'guidao',name:'轨道交通',echart:null},
@@ -131,7 +139,7 @@ export class AddUnitTwoTimeComponent implements OnInit {
 
   //新增数量统计
   oneInit (date,dateNum) {
-    var chartQusj = echarts.init(document.getElementById('Line'), 'skinUpp');
+    this.chartQusj = echarts.init(document.getElementById('Line'), 'skinUpp');
     var option = {
       grid: {
         top: 70,
@@ -203,7 +211,7 @@ export class AddUnitTwoTimeComponent implements OnInit {
         }
       ],
     }
-    chartQusj.setOption(option);
+    this.chartQusj.setOption(option);
   }
 
   //剩余折线图

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

@@ -31,6 +31,8 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
   }
   ngOnDestroy(){
     window.clearTimeout(this.setTimeoutObj);
+    this.detailPlanEchart.clear()
+    this.detailPlanEchart.dispose()
   }
   topTextlabel = {
     show: true, // 开启显示
@@ -44,8 +46,10 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
   }//柱状图数值顶部显示
   zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
   zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
+
+  detailPlanEchart//echarts实例
   detailEcharts(){
-    var detailPlanEchart = echarts.init(document.getElementById('barEchart'));  
+    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'));  
     var option = {
       title: {
         text: this.buildingTypeName + '(' +this.organizationName + ')',
@@ -82,7 +86,7 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit {
           label: this.topTextlabel
       }]
     };
-    detailPlanEchart.setOption(option);
+    this.detailPlanEchart.setOption(option);
   }
 
  

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

@@ -1,8 +1,8 @@
 <div class="box">
     <div class="topbox">
         <div class="btnbox">
-            <button mat-stroked-button (click)="forward()">类型统计</button>
-            <button mat-stroked-button (click)="reverse()">区间选择</button>
+            <button mat-stroked-button (click)="forward()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_type'}">类型统计</button>
+            <button mat-stroked-button (click)="reverse()" [ngClass]="{'selectedBtn': url == '/statisticanalysis/addUnit_one/addUnit_two_time'}">区间选择</button>
         </div>
     </div>
     <div class="echartsbox">

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

@@ -43,3 +43,7 @@
     box-sizing: border-box;
     padding: 20px;
 }
+.selectedBtn{
+    background-color: #2196f3;
+    color: white;
+}

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

@@ -16,7 +16,7 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
   reverse(){
     this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time'])
   }
-
+  url = "/statisticanalysis/addUnit_one/addUnit_two_type" //当前路由地址
   setTimeoutObj//延时器需要清除
   ngOnInit(): void {
     this.setTimeoutObj = window.setTimeout(()=>{
@@ -26,6 +26,12 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
   }
   ngOnDestroy(){
     window.clearTimeout(this.setTimeoutObj);
+    this.indexBzt.clear()
+    this.indexBzt.dispose()
+    this.forArr.forEach(item => {
+      item.echart.clear()
+      item.echart.dispose()
+    })
   }
   
   axisLabel = {
@@ -99,26 +105,26 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
                       {name:"崇明中队",number:"55",zhanbi:"0.3%"} ]
   zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
   zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
-  forArr = [{id:'gaoceng',name:'高层'},
-            {id:'dixia',name:'地下'},
-            {id:'guidao',name:'轨道交通'},
-            {id:'huagong',name:'化工生产'},
-            {id:'chuguan',name:'储罐类'},
-            {id:'changfang',name:'厂房'},
-            {id:'gujianzhu',name:'古建筑'},
-            {id:'shichang',name:'商市场'},
-            {id:'yiyuan',name:'医院'},
-            {id:'xuexiao',name:'学校'},
-            {id:'binguan',name:'宾馆'},
-            {id:'yule',name:'娱乐场所'},
-            {id:'canyin',name:'餐饮业'},
-            {id:'yingyuan',name:'影剧院'},
-            {id:'zhanlan',name:'展览建筑'},
-            {id:'suidao',name:'隧道'}]
-
+  forArr = [{id:'gaoceng',name:'高层',echart:null},
+            {id:'dixia',name:'地下',echart:null},
+            {id:'guidao',name:'轨道交通',echart:null},
+            {id:'huagong',name:'化工生产',echart:null},
+            {id:'chuguan',name:'储罐类',echart:null},
+            {id:'changfang',name:'厂房',echart:null},
+            {id:'gujianzhu',name:'古建筑',echart:null},
+            {id:'shichang',name:'商市场',echart:null},
+            {id:'yiyuan',name:'医院',echart:null},
+            {id:'xuexiao',name:'学校',echart:null},
+            {id:'binguan',name:'宾馆',echart:null},
+            {id:'yule',name:'娱乐场所',echart:null},
+            {id:'canyin',name:'餐饮业',echart:null},
+            {id:'yingyuan',name:'影剧院',echart:null},
+            {id:'zhanlan',name:'展览建筑',echart:null},
+            {id:'suidao',name:'隧道',echart:null}]
+  indexBzt //顶部饼状图
   /* 顶部饼状图 */
   initCharts(){
-    let indexBzt = echarts.init(document.getElementById('pie'));
+    this.indexBzt = echarts.init(document.getElementById('pie'));
     let options={
       title: {
         text: '新增单位统计（8900家）',
@@ -221,16 +227,16 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
         }
       ]
     };
-    indexBzt.on('click', (params) => {
+    this.indexBzt.on('click', (params) => {
       // this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
     });
-    indexBzt.setOption(options);
+    this.indexBzt.setOption(options);
   }
   //柱状图
   barEcharts(){
     this.forArr.forEach(item=>{
       let _this = this
-      let addEchart = echarts.init(document.getElementById(item.id));
+      item.echart = echarts.init(document.getElementById(item.id));
       let option = {
         title: {
           text: item.name,
@@ -268,8 +274,8 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit {
             label: this.topTextlabel
         }]
       };
-      addEchart.setOption(option);
-      addEchart.on('click',  (params) => {
+      item.echart.setOption(option);
+      item.echart.on('click',  (params) => {
         this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_typeDetails'],{queryParams:{'organizationName':params.name,'buildingTypeName':item.name}})
       });
     })

src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts

@@ -15,9 +15,14 @@ export class BuildingTypeOneComponent implements OnInit {
       this.initCharts()
     },0)
   }
+  ngOnDestroy(): void {
+    this.indexBzt.clear()
+    this.indexBzt.dispose()
+  }
   /* 首页饼状图 */
+  indexBzt
   initCharts(){
-    let indexBzt = echarts.init(document.getElementById('indexBzt'));
+    this.indexBzt = echarts.init(document.getElementById('indexBzt'));
     let options={
       title: {
         text: '建筑类型统计（8900家）',
@@ -86,10 +91,10 @@ export class BuildingTypeOneComponent implements OnInit {
         }
       ]
     };
-    indexBzt.on('click', (params) => {
+    this.indexBzt.on('click', (params) => {
       this.router.navigateByUrl('/statisticanalysis/buildingType_one/buildingType_two_forward');
     });
-    indexBzt.setOption(options);
+    this.indexBzt.setOption(options);
   }
   biaogeTishi(biaotou:string){
     var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},'

src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts

@@ -29,6 +29,10 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
       this.detailEcharts()
     })
   }
+  ngOnDestroy(): void {
+    this.detailPlanEchart.clear()
+    this.detailPlanEchart.dispose()
+  }
   topTextlabel = {
     show: true, // 开启显示
     position: 'top', // 在上方显示
@@ -41,8 +45,9 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
   }//柱状图数值顶部显示
   zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
   zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
+  detailPlanEchart
   detailEcharts(){
-    var detailPlanEchart = echarts.init(document.getElementById('barEchart'));  
+    this.detailPlanEchart = echarts.init(document.getElementById('barEchart'));  
     var option = {
       title: {
         text: this.buildingTypeName + '(' +this.organizationName + ')',
@@ -79,7 +84,7 @@ export class BuildingTypeThreeDetailsComponent implements OnInit {
           label: this.topTextlabel
       }]
     };
-    detailPlanEchart.setOption(option);
+    this.detailPlanEchart.setOption(option);
   }
 
  

src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html

@@ -1,7 +1,7 @@
 <div class="box">
     <div class="topbox">
         <div class="btnbox">
-            <button mat-stroked-button (click)="forward()">正向查询</button>
+            <button mat-stroked-button (click)="forward()" style="background-color: #2196f3;color: white;">正向查询</button>
             <button mat-stroked-button (click)="reverse()">反向查询</button>
         </div>
     </div>

src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts

@@ -21,6 +21,14 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
       this.barEcharts()
     },0)
   }
+  ngOnDestroy(): void {
+    this.indexBzt.clear()
+    this.indexBzt.dispose()
+    this.forArr.forEach(item => {
+      item.echart.clear()
+      item.echart.dispose()
+    })
+  }
   axisLabel = {
     interval: 0,  
     formatter:function(value)  
@@ -112,26 +120,27 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
   ]
   buildingTypeName = ['高层','地下','轨道交通','化工生产','储罐类','厂房','古建筑','商市场','医院','学校','宾馆','娱乐场所','餐饮业','影剧院','展览建筑','隧道']
   buildingTypeNum = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60,50]
-  forArr = [{id:'gaoceng',name:'浦东支队'},
-            {id:'dixia',name:'黄埔支队'},
-            {id:'guidao',name:'徐汇支队'},
-            {id:'huagong',name:'长宁支队'},
-            {id:'chuguan',name:'静安支队'},
-            {id:'changfang',name:'普陀支队'},
-            {id:'gujianzhu',name:'虹口支队'},
-            {id:'shichang',name:'杨浦支队'},
-            {id:'yiyuan',name:'闵行支队'},
-            {id:'xuexiao',name:'宝山支队'},
-            {id:'binguan',name:'嘉定支队'},
-            {id:'yule',name:'松江支队'},
-            {id:'canyin',name:'金山支队'},
-            {id:'yingyuan',name:'崇明支队'},
-            {id:'zhanlan',name:'青浦支队'},
+  forArr = [{id:'gaoceng',name:'浦东支队',echart:null},
+            {id:'dixia',name:'黄埔支队',echart:null},
+            {id:'guidao',name:'徐汇支队',echart:null},
+            {id:'huagong',name:'长宁支队',echart:null},
+            {id:'chuguan',name:'静安支队',echart:null},
+            {id:'changfang',name:'普陀支队',echart:null},
+            {id:'gujianzhu',name:'虹口支队',echart:null},
+            {id:'shichang',name:'杨浦支队',echart:null},
+            {id:'yiyuan',name:'闵行支队',echart:null},
+            {id:'xuexiao',name:'宝山支队',echart:null},
+            {id:'binguan',name:'嘉定支队',echart:null},
+            {id:'yule',name:'松江支队',echart:null},
+            {id:'canyin',name:'金山支队',echart:null},
+            {id:'yingyuan',name:'崇明支队',echart:null},
+            {id:'zhanlan',name:'青浦支队',echart:null},
             ]
 
   /* 顶部饼状图 */
+  indexBzt
   initCharts(){
-    let indexBzt = echarts.init(document.getElementById('pie'));
+    this.indexBzt = echarts.init(document.getElementById('pie'));
     let options={
       title: {
         text: '组织机构统计（5500家）',
@@ -217,16 +226,16 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
         }
       ]
     };
-    indexBzt.on('click', (params) => {
+    this.indexBzt.on('click', (params) => {
       // this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
     });
-    indexBzt.setOption(options);
+    this.indexBzt.setOption(options);
   }
   //柱状图
   barEcharts(){
     this.forArr.forEach(item=>{
       let _this = this
-      let Echart = echarts.init(document.getElementById(item.id));
+      item.echart = echarts.init(document.getElementById(item.id));
       let option = {
         color: ['#3398DB'],
         title: {
@@ -265,8 +274,8 @@ export class BuildingTypeTwoForwardComponent implements OnInit {
             label: this.topTextlabel
         }]
       };
-      Echart.setOption(option);
-      Echart.on('click', (params) => {
+      item.echart.setOption(option);
+      item.echart.on('click', (params) => {
         this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':item.name,'buildingTypeName':params.name}})
       });
     })

src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html

@@ -2,7 +2,7 @@
     <div class="topbox">
         <div class="btnbox">
             <button mat-stroked-button (click)="forward()">正向查询</button>
-            <button mat-stroked-button (click)="reverse()">反向查询</button>
+            <button mat-stroked-button (click)="reverse()" style="background-color:#2196f3;color: white;">反向查询</button>
         </div>
     </div>
     <div class="echartsbox">

src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts

@@ -22,7 +22,14 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
       this.barEcharts()
     },0)
   }
-  
+  ngOnDestroy(): void {
+    this.indexBzt.clear()
+    this.indexBzt.dispose()
+    this.forArr.forEach(item => {
+      item.echart.clear()
+      item.echart.dispose()
+    })
+  }
   axisLabel = {
     interval: 0,  
     formatter:function(value)  
@@ -94,26 +101,27 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
                       {name:"崇明中队",number:"55",zhanbi:"0.3%"} ]
   zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
   zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
-  forArr = [{id:'gaoceng',name:'高层'},
-            {id:'dixia',name:'地下'},
-            {id:'guidao',name:'轨道交通'},
-            {id:'huagong',name:'化工生产'},
-            {id:'chuguan',name:'储罐类'},
-            {id:'changfang',name:'厂房'},
-            {id:'gujianzhu',name:'古建筑'},
-            {id:'shichang',name:'商市场'},
-            {id:'yiyuan',name:'医院'},
-            {id:'xuexiao',name:'学校'},
-            {id:'binguan',name:'宾馆'},
-            {id:'yule',name:'娱乐场所'},
-            {id:'canyin',name:'餐饮业'},
-            {id:'yingyuan',name:'影剧院'},
-            {id:'zhanlan',name:'展览建筑'},
-            {id:'suidao',name:'隧道'}]
+  forArr = [{id:'gaoceng',name:'高层',echart:null},
+            {id:'dixia',name:'地下',echart:null},
+            {id:'guidao',name:'轨道交通',echart:null},
+            {id:'huagong',name:'化工生产',echart:null},
+            {id:'chuguan',name:'储罐类',echart:null},
+            {id:'changfang',name:'厂房',echart:null},
+            {id:'gujianzhu',name:'古建筑',echart:null},
+            {id:'shichang',name:'商市场',echart:null},
+            {id:'yiyuan',name:'医院',echart:null},
+            {id:'xuexiao',name:'学校',echart:null},
+            {id:'binguan',name:'宾馆',echart:null},
+            {id:'yule',name:'娱乐场所',echart:null},
+            {id:'canyin',name:'餐饮业',echart:null},
+            {id:'yingyuan',name:'影剧院',echart:null},
+            {id:'zhanlan',name:'展览建筑',echart:null},
+            {id:'suidao',name:'隧道',echart:null}]
 
   /* 顶部饼状图 */
+  indexBzt
   initCharts(){
-    let indexBzt = echarts.init(document.getElementById('pie'));
+    this.indexBzt = echarts.init(document.getElementById('pie'));
     let options={
       title: {
         text: '建筑类型统计（8900家）',
@@ -216,16 +224,16 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
         }
       ]
     };
-    indexBzt.on('click', (params) => {
+    this.indexBzt.on('click', (params) => {
       // this.router.navigateByUrl('/statisticanalysis/buildingType_two_forward');
     });
-    indexBzt.setOption(options);
+    this.indexBzt.setOption(options);
   }
   //柱状图
   barEcharts(){
     this.forArr.forEach(item=>{
       let _this = this
-      let addEchart = echarts.init(document.getElementById(item.id));
+      item.echart = echarts.init(document.getElementById(item.id));
       let option = {
         title: {
           text: item.name,
@@ -263,12 +271,11 @@ export class BuildingTypeTwoReverseComponent implements OnInit {
             label: this.topTextlabel
         }]
       };
-      addEchart.setOption(option);
-      addEchart.on('click',  (params) => {
+      item.echart.setOption(option);
+      item.echart.on('click',  (params) => {
         this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_three_details'],{queryParams:{'organizationName':params.name,'buildingTypeName':item.name}})
       });
     })
-    
   }
   //提示框表格
   tableTooltip(dataArr,title:string){

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

@@ -26,12 +26,17 @@ export class PageOneComponent implements OnInit {
       this.initCharts()
     },0)
   }
+  ngOnDestroy(): void {
+    this.indexBzt.clear()
+    this.indexBzt.dispose()
+  }
   /* 饼状图跳转 */
 
   /* 首页饼状图 */
+  indexBzt
   initCharts(){
     var ec = echarts as any;
-    var indexBzt = ec.init(document.getElementById('indexBzt'));
+    this.indexBzt = ec.init(document.getElementById('indexBzt'));
     var options={
       title: {
           text: '预案状态统计（7005家）',
@@ -97,10 +102,10 @@ export class PageOneComponent implements OnInit {
           }
       ]
     };
-    indexBzt.on('click', (params) => {
+    this.indexBzt.on('click', (params) => {
       this.router.navigateByUrl('/statisticanalysis/statePageTwo_time');
     });
-    indexBzt.setOption(options);
+    this.indexBzt.setOption(options);
   }
   /**
    * @name: 表格提示框封装

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

@@ -15,7 +15,6 @@ export class PageTwoNameComponent implements OnInit {
   @ViewChild('zhongDuiChild') zhongDuiChild:PageZhongDuiDetailsComponent; //父组件中获得子组件的引用
 
   ngOnInit(): void {
-
     setTimeout(() => {
       this.planState()
       this.planAdd()
@@ -24,6 +23,26 @@ export class PageTwoNameComponent implements OnInit {
       this.planBack()
       this.planAudit()
     }, 0);
+  }
+
+  ngOnDestroy(): void {
+    this.addEchart.clear()
+    this.addEchart.dispose()
+
+    this.passPlanEchartObj.clear()
+    this.passPlanEchartObj.dispose()
+
+    this.passMakeEchart.clear()
+    this.passMakeEchart.dispose()
+
+    this.passBackEchart.clear()
+    this.passBackEchart.dispose()
+
+    this.planAuditEchart.clear()
+    this.planAuditEchart.dispose()
+
+    this.topEchart.clear()
+    this.topEchart.dispose()
 
   }
   axisLabel = {
@@ -65,10 +84,11 @@ export class PageTwoNameComponent implements OnInit {
   zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
   zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
 
+  addEchart
   //预案新增统计
   planAdd () {
     let _this = this
-    var addEchart = echarts.init(document.getElementById('addEchart'));
+    this.addEchart = echarts.init(document.getElementById('addEchart'));
     var option = {
       title: {
         text: "预案新增",
@@ -107,16 +127,17 @@ export class PageTwoNameComponent implements OnInit {
           label: this.topTextlabel
       }]
     };
-    addEchart.setOption(option);
-    addEchart.on('click', function (params) {
+    this.addEchart.setOption(option);
+    this.addEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案新增'
       _this.data.statefulInspectionToggle = false
     });
   }
+  passPlanEchartObj
   //预案审核通过
   passPlanEchart (){
     let _this = this
-    var passPlanEchart = echarts.init(document.getElementById('passPlanEchart'));  
+    this.passPlanEchartObj = echarts.init(document.getElementById('passPlanEchart'));  
     var option = {
       title: {
         text: "预案审核通过",
@@ -154,17 +175,17 @@ export class PageTwoNameComponent implements OnInit {
           label: this.topTextlabel
       }]
     };
-    passPlanEchart.setOption(option);
-    passPlanEchart.on('click', function (params) {
+    this.passPlanEchartObj.setOption(option);
+    this.passPlanEchartObj.on('click', function (params) {
       _this.data.statefulInspectionName = '预案审核通过'
       _this.data.statefulInspectionToggle = false
     });
   }
-
+  passMakeEchart
   //预案编制
   planMake (){
     let _this = this
-    var passMakeEchart = echarts.init(document.getElementById('planMake'));  
+    this.passMakeEchart = echarts.init(document.getElementById('planMake'));  
     var option = {
       title: {
         text: "预案编制",
@@ -202,17 +223,17 @@ export class PageTwoNameComponent implements OnInit {
           label: this.topTextlabel
       }]
     };
-    passMakeEchart.setOption(option);
-    passMakeEchart.on('click', function (params) {
+    this.passMakeEchart.setOption(option);
+    this.passMakeEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案编制'
       _this.data.statefulInspectionToggle = false
     });
   }
-
+  passBackEchart
   //预案审核退回
   planBack (){
     let _this = this
-    var passBackEchart = echarts.init(document.getElementById('planBack'));  
+    this.passBackEchart = echarts.init(document.getElementById('planBack'));  
     var option = {
       title: {
         text: "预案审核退回",
@@ -250,17 +271,17 @@ export class PageTwoNameComponent implements OnInit {
           label: this.topTextlabel
       }]
     };
-    passBackEchart.setOption(option);
-    passBackEchart.on('click', function (params) {
+    this.passBackEchart.setOption(option);
+    this.passBackEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案审核退回'
       _this.data.statefulInspectionToggle = false
     });
   }
-
+  planAuditEchart
   //预案审核中
   planAudit (){
     let _this = this
-    var planAuditEchart = echarts.init(document.getElementById('planAudit'));  
+    this.planAuditEchart = echarts.init(document.getElementById('planAudit'));  
     var option = {
       title: {
         text: "预案审核中",
@@ -298,16 +319,16 @@ export class PageTwoNameComponent implements OnInit {
           label: this.topTextlabel
       }]
     };
-    planAuditEchart.setOption(option);
-    planAuditEchart.on('click', function (params) {
+    this.planAuditEchart.setOption(option);
+    this.planAuditEchart.on('click', function (params) {
       _this.data.statefulInspectionName = '预案审核中'
       _this.data.statefulInspectionToggle = false
     });
   }
-  
+  topEchart
   //预案状态统计
   planState(){
-    var passPlanEchart = echarts.init(document.getElementById('pie'));  
+    this.topEchart = echarts.init(document.getElementById('pie'));  
     var option = {
       title: {
           text: '预案状态统计（7005份）',
@@ -397,7 +418,7 @@ export class PageTwoNameComponent implements OnInit {
           }
       ]
     }
-    passPlanEchart.setOption(option);
+    this.topEchart.setOption(option);
   }
 
   tableTooltip(biaotou:string){

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

@@ -19,9 +19,13 @@ export class PageZhongDuiDetailsComponent implements OnInit {
       this.detailEcharts()
     })
   }
-
+  ngOnDestroy(): void {
+    this.detailPlanEchart.clear()
+    this.detailPlanEchart.dispose()
+  }
+  detailPlanEchart
   detailEcharts(){
-    var detailPlanEchart = echarts.init(document.getElementById('detailBox'));  
+    this.detailPlanEchart = echarts.init(document.getElementById('detailBox'));  
     var option = {
       title: {
         text: this.data.statefulInspectionName,
@@ -53,10 +57,11 @@ export class PageZhongDuiDetailsComponent implements OnInit {
           showBackground: true,
           backgroundStyle: {
               color: 'rgba(220, 220, 220, 0.8)'
-          }
+          },
+          barWidth :'58'
       }]
     };
-    detailPlanEchart.setOption(option);
+    this.detailPlanEchart.setOption(option);
   }