From 60f0336a9dead3bfcdf270a6a9d7968697e57327 Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Wed, 2 Sep 2020 17:07:00 +0800 Subject: [PATCH 1/4] =?UTF-8?q?[=E5=88=A0=E9=99=A4]=E7=AC=AC=E4=B8=80?= =?UTF-8?q?=E6=AC=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../delete-one/delete-one.component.ts | 132 ++++++++++++++++-- .../state/page-one/page-one.component.ts | 3 +- 2 files changed, 123 insertions(+), 12 deletions(-) diff --git a/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts b/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts index 3169f9b..afd66fa 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts @@ -1,12 +1,6 @@ -/* - * @Descripttion: - * @version: - * @Author: sueRimn - * @Date: 2020-09-02 16:15:53 - * @LastEditors: sueRimn - * @LastEditTime: 2020-09-02 16:44:32 - */ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +declare var echarts: any; @Component({ selector: 'app-delete-one', @@ -14,10 +8,128 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./delete-one.component.scss'] }) export class DeleteOneComponent implements OnInit { + options:any; - constructor() { } + constructor(private router: Router) { } - ngOnInit(): void { + ngOnInit() { + window.setTimeout(()=>{ + this.initCharts() + },0) + } + + /* 首页饼状图 */ + initCharts(){ + //console.log(document.getElementById('indexBzt')) + + var ec = echarts as any; + var indexBzt = ec.init(document.getElementById('indexBzt')); + var options={ + title: { + text: '预案状态统计（7005家）', + //subtext: '纯属虚构', + padding:[80,100], + left: 'center', + textStyle:{ + fontSize:38 + } + }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.biaogeTishi(params.name) + } , + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0' + + + }, + legend: { + orient: 'vertical', + right: 150, + top:80, + //padding:20, + itemWidth:60, + itemHeight:25, + textStyle:{ + fontSize:28 + }, + data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] + }, + series: [ + { + name: '访问来源', + type: 'pie', + radius: '65%', + center: ['50%', '60%'], + label:{ + normal:{ + show:true, + position: 'inner', + fontSize:18, + formatter:'{c} ({d}%)' + } + + }, + data: [ + {value: 1585, name: '预案新增'}, + {value: 2000, name: '预案审核通过',itemStyle:{color:'#02A7F0'}}, + {value: 2600, name: '预案编制'}, + {value: 1500, name: '预案审核退回'}, + {value: 1800, name: '预案审核中'} + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }; + indexBzt.on('click', (params) => { + this.router.navigateByUrl('/statisticanalysis/statePageTwo_time'); + }); + indexBzt.setOption(options); + } + /** + * @name: 表格提示框封装 + * @test: test font + * @msg: + * @param {string(表头)} + * @return {type} + */ + biaogeTishi(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 = '
'+biaotou+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + for(var i=0;i' + res+='' + res+='' + } + + res+='' + res+='' + res+='
名称数量总占比
'+jsonObj[i].number+''+jsonObj[i].zhanbi+'
总计135619%
' + return res } } diff --git a/src/app/statistic-analysis/state/page-one/page-one.component.ts b/src/app/statistic-analysis/state/page-one/page-one.component.ts index 1563f44..83df434 100644 --- a/src/app/statistic-analysis/state/page-one/page-one.component.ts +++ b/src/app/statistic-analysis/state/page-one/page-one.component.ts @@ -4,11 +4,10 @@ * @Author: sueRimn * @Date: 2020-09-01 15:24:39 * @LastEditors: sueRimn - * @LastEditTime: 2020-09-02 15:11:35 + * @LastEditTime: 2020-09-02 16:52:44 */ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; -//import * as echarts from ''; declare var echarts: any; @Component({ From 84b78879fee8d5276aeb137f1a89692bff0ff823 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Fri, 4 Sep 2020 17:22:22 +0800 Subject: [PATCH 2/4] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=8D=95=E4=BD=8D=E7=BB=9F=E8=AE=A1=E5=9F=BA=E6=9C=AC=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-unit-one/add-unit-one.component.ts | 8 +- .../add-unit-three-bar-details.component.html | 30 +++ .../add-unit-three-bar-details.component.scss | 76 +++++++ ...d-unit-three-bar-details.component.spec.ts | 25 +++ .../add-unit-three-bar-details.component.ts | 176 ++++++++++++++++ ...add-unit-three-line-details.component.html | 24 +++ ...add-unit-three-line-details.component.scss | 76 +++++++ ...-unit-three-line-details.component.spec.ts | 25 +++ .../add-unit-three-line-details.component.ts | 192 ++++++++++++++++++ .../add-unit-two-time.component.ts | 28 ++- .../add-unit-two-type-details.component.ts | 7 +- .../add-unit-two-type-statistics.component.ts | 7 +- .../echarts-data.service.ts | 40 +++- .../statistic-analysis-routing.module.ts | 4 + .../statistic-analysis.module.ts | 4 +- 15 files changed, 706 insertions(+), 16 deletions(-) create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.spec.ts create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.scss create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.spec.ts create mode 100644 src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts diff --git a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts index 34673d9..adcf012 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts @@ -10,8 +10,10 @@ export class AddUnitOneComponent implements OnInit { constructor(private router: Router) { } + setTimeoutObj//延时器需要清除 + ngOnInit(): void { - window.setTimeout(()=>{ + this.setTimeoutObj = window.setTimeout(()=>{ this.initCharts() },0) } @@ -121,4 +123,8 @@ export class AddUnitOneComponent implements OnInit { res+='' return res } + + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } } diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html new file mode 100644 index 0000000..1efb7b4 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.html @@ -0,0 +1,30 @@ +
+
+
+
+ 查询年份: + + + {{item}} + + + 查询月份: + + + {{item}} + + + +
+
+ +
+ +
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss new file mode 100644 index 0000000..ed72dc3 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss @@ -0,0 +1,76 @@ +.box{ + width: 100%; + height: 92%; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + .echartsbox{ + width: 100%; + height: 100%; + // overflow: auto; + } + #Line{ + width: 50%; + height: 420px; + margin: 50px auto; + } +} +.publicCss{ + height: 350px; + width: 50%; + display: inline-block; + box-sizing: border-box; + padding: 20px; +} + +//头部搜索栏 +.header { + border-bottom: 1px solid #999; + height: 80px; + min-height: 81px;; + box-sizing: border-box; + // padding: 0 15px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items:center; + justify-content:center; + .queryField { + margin: 0 10px; + font-size: 14px; + .mat-form-field { + width: 130px; + max-height: 50px;; + margin: 0 15px 0 10px; + } + } + .btnbox{ + height: 80px; + display: flex; + flex-direction:column; + justify-content: space-around; + position: fixed; + top: 64px; + right: 4%; + width: 88px; + button{ + width: 88px; + height: 36px; + } + + } + } + .echartsbox{ + width: 100%; + height: 100%; + overflow: auto; + #barEchart{ + width: 100%; + height: 350px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + } +} \ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.spec.ts b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.spec.ts new file mode 100644 index 0000000..8081b73 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddUnitThreeBarDetailsComponent } from './add-unit-three-bar-details.component'; + +describe('AddUnitThreeBarDetailsComponent', () => { + let component: AddUnitThreeBarDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddUnitThreeBarDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddUnitThreeBarDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts new file mode 100644 index 0000000..2f8bd1e --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts @@ -0,0 +1,176 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { ActivatedRoute } from '@angular/router'; +import { EchartsDataService } from '../../echarts-data.service'; +declare var echarts: any; +@Component({ + selector: 'app-add-unit-three-bar-details', + templateUrl: './add-unit-three-bar-details.component.html', + styleUrls: ['./add-unit-three-bar-details.component.scss'] +}) +export class AddUnitThreeBarDetailsComponent implements OnInit { + + constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } + time:String + buildingTypeName:String + level:String + + setTimeoutObj//延时器需要清除 + ngOnInit(): void { + this.dateInit () + this.route.queryParams.subscribe(params => { + this.time = params['time']; + this.buildingTypeName = params['buildingTpye']; + this.level = params['level']; + }); + this.setTimeoutObj = window.setTimeout(()=>{ + this.detailEcharts() + },0) + } + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } + + selectType:string = 'month'; //选择当前的 查询类型 按月/年 + + //查询数据 + years:any = [] + selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + + //日期初始化 + dateInit () { + let date = (new Date()).getFullYear() + for (let i=date; i>=date-10;i--) { + this.years.unshift(i) + } + } + selectOneYear:any = (new Date()).getFullYear() //开始年份 + selectStartMonth:any = 1 //开始月份 + Submit (e) { + + } + selectStartYear:any = (new Date()).getFullYear() //开始年份 + + + topTextlabel = { + show: true, // 开启显示 + position: 'top', // 在上方显示 + distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 + verticalAlign: 'middle', + textStyle: { // 数值样式 + color: 'black', + fontSize: 12 + } + }//柱状图数值顶部显示 + zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] + zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] + zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] + + + detailPlanEchart + option + detailEcharts(){ + this.detailPlanEchart = echarts.init(document.getElementById('barEchart')); + this.option = { + title: { + text: this.time + '(' +this.buildingTypeName + ')', + left: "center", + textStyle: { + fontSize: 28 + } + }, + xAxis: { + type: 'category', + data: this.zhiNameData, + // axisLabel: this.axisLabel + }, + yAxis: { + type: 'value' + }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.tableTooltip(params) + }, + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + position:this.serviceData.tableTooltipNoShow2 + }, + series: [{ + data: this.zhiNumData, + type: 'bar', + showBackground: true, + barWidth :'58', + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + label: this.topTextlabel + }] + + }; + this.detailPlanEchart.setOption(this.option); + this.detailPlanEchart.on("click",(params)=>{ + if(this.level == "zhidui"){//如果是支队则跳转 + // this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhongdui','time':params.name,'buildingTpye':this.buildingTypeName}}); + this.level = "zhongdui" + this.option.title.text = params.name + '(' +this.buildingTypeName + ')' + this.option.xAxis.data = this.zhongNameData + this.option.series[0].data = this.zhongNumData + this.detailPlanEchart.setOption(this.option) + }else{ + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('已到达最底层','确定',config); + } + }) + } + //返回按钮 + backBtn(){ + if(this.level == "zhongdui"){ + this.level = "zhidui" + this.option.title.text = this.time + '(' +this.buildingTypeName + ')' + this.option.xAxis.data = this.zhiNameData + this.option.series[0].data = this.zhiNumData + this.detailPlanEchart.setOption(this.option) + }else{ + window.history.go(-1) + } + } + + tableTooltip(params:any){ + var data + if(this.level == "zhidui"){ + data = this.serviceData.tableDataZhong + }else{ + data = [ + {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} + ] + } + var res = '
'+params.name+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + for(var i=0;i' + res+='' + res+='' + } + + res+='' + // res+='' + res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' + return res + } + +} diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html new file mode 100644 index 0000000..1ffb927 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.html @@ -0,0 +1,24 @@ +
+
+
+
+ 查询年份: + + + {{item}} + + + +
+
+ +
+ +
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.scss b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.scss new file mode 100644 index 0000000..febdae8 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.scss @@ -0,0 +1,76 @@ +.box{ + width: 100%; + height: 92%; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + .echartsbox{ + width: 100%; + height: 100%; + overflow: auto; + } + #Line{ + width: 50%; + height: 420px; + margin: 50px auto; + } +} +.publicCss{ + height: 350px; + width: 50%; + display: inline-block; + box-sizing: border-box; + padding: 20px; +} + +//头部搜索栏 +.header { + border-bottom: 1px solid #999; + height: 80px; + min-height: 81px;; + box-sizing: border-box; + // padding: 0 15px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items:center; + justify-content:center; + .queryField { + margin: 0 10px; + font-size: 14px; + .mat-form-field { + width: 130px; + max-height: 50px;; + margin: 0 15px 0 10px; + } + } + .btnbox{ + height: 80px; + display: flex; + flex-direction:column; + justify-content: space-around; + position: fixed; + top: 64px; + right: 4%; + width: 88px; + button{ + width: 88px; + height: 36px; + } + + } + } + .echartsbox{ + width: 100%; + height: 100%; + overflow: auto; + #barEchart{ + width: 60%; + height: 350px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + } +} \ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.spec.ts b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.spec.ts new file mode 100644 index 0000000..3b947b0 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddUnitThreeLineDetailsComponent } from './add-unit-three-line-details.component'; + +describe('AddUnitThreeLineDetailsComponent', () => { + let component: AddUnitThreeLineDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddUnitThreeLineDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddUnitThreeLineDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts new file mode 100644 index 0000000..3f27283 --- /dev/null +++ b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts @@ -0,0 +1,192 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { ActivatedRoute } from '@angular/router'; +import { EchartsDataService } from '../../echarts-data.service'; +declare var echarts: any; +@Component({ + selector: 'app-add-unit-three-line-details', + templateUrl: './add-unit-three-line-details.component.html', + styleUrls: ['./add-unit-three-line-details.component.scss'] +}) +export class AddUnitThreeLineDetailsComponent implements OnInit { + + constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { } + year:String + buildingTypeName:String + level:String + setTimeoutObj//延时器需要清除 + ngOnInit(): void { + this.dateInit () + this.route.queryParams.subscribe(params => { + this.year = params['year']; + this.buildingTypeName = params['buildingType']; + }); + this.setTimeoutObj = window.setTimeout(()=>{ + this.detailEcharts() + }) + } + + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } + + selectType:string = 'month'; //选择当前的 查询类型 按月/年 + + //查询数据 + years:any = [] + selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + + //日期初始化 + dateInit () { + let date = (new Date()).getFullYear() + for (let i=date; i>=date-10;i--) { + this.years.unshift(i) + } + } + selectOneYear:any = (new Date()).getFullYear() //开始年份 + selectStartMonth:any = 1 //开始月份 + Submit (e) { + + } + selectStartYear:any = (new Date()).getFullYear() //开始年份 + + + topTextlabel = { + show: true, // 开启显示 + position: 'top', // 在上方显示 + distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。 + verticalAlign: 'middle', + textStyle: { // 数值样式 + color: 'black', + fontSize: 12 + } + }//柱状图数值顶部显示 + zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] + zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] + zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] + + + detailPlanEchart + 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 = { + grid: { + top: 50, + left:40, + right: 20, + bottom: 20, + }, + // 标题 + title: { + text: this.buildingTypeName + '(' + this.year + ')', + top: -4, + left: 'center', + textStyle:{ + //文字颜色 + color:'#000', + } + }, + //提示框 + tooltip: { + trigger: 'axis', + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + if(params[0].seriesName == "year"){ + return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) + }else{ + return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) + } + }, + position:this.serviceData.tableTooltipNoShow2 + }, + // x轴 + xAxis: { + type: 'category', + data: this.date, + axisLabel: { + color: "#000", //刻度线标签颜色 + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", + }, + }, + splitLine: {//分割线配置 + show:true, + lineStyle: { + color: '#999', + } + } + }, + // y轴 + yAxis: { + type: 'value', + name: '个', + axisLabel: { + color: "#000" //刻度线标签颜色 + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", + } + } + }, + // 数据 + series: [{ + name: 'xxx', + type: 'line', + data: this.dateNum, + } + ], + }; + this.detailPlanEchart.setOption(this.option); + this.detailPlanEchart.getZr().on('click',params=>{ + const pointInPixel= [params.offsetX, params.offsetY]; + if (this.detailPlanEchart.containPixel('grid',pointInPixel)) { + let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; + /*事件处理代码书写位置*/ + this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}}); + } + }); + } + //返回按钮 + backBtn(){ + window.history.go(-1) + } + + tableTooltip(params:any){ + var data = [ + {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} + ] + var res = '
'+params.name+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + for(var i=0;i' + res+='' + res+='' + } + + res+='' + // res+='' + res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' + return res + } +} diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts index 8cb7df2..e4b0cfe 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts @@ -17,15 +17,17 @@ export class AddUnitTwoTimeComponent implements OnInit { this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) } constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService) { } - + setTimeoutObj//延时器需要清除 ngOnInit(): void { this.dateInit () - setTimeout(() => { + this.setTimeoutObj = setTimeout(() => { this.oneInit (this.date,this.dateNum) - this.twoInit (this.date,this.dateNum,'year') + this.twoInit (this.date,this.dateNum,'month') }, 0); } - + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } selectType:string = 'month'; //选择当前的 查询类型 按月/年 //查询数据 @@ -233,7 +235,11 @@ export class AddUnitTwoTimeComponent implements OnInit { borderWidth:'1', borderRadius :'0', formatter: (params)=>{ - return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) + if(params[0].seriesName == "year"){ + return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) + }else{ + return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) + } } }, // x轴 @@ -279,16 +285,18 @@ export class AddUnitTwoTimeComponent implements OnInit { ], }; item.echart.setOption(option,true); - // item.echart.on('click', (params) => { - // console.log(params) - // }); item.echart.getZr().on('click',params=>{ const pointInPixel= [params.offsetX, params.offsetY]; if (item.echart.containPixel('grid',pointInPixel)) { let xIndex=item.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; /*事件处理代码书写位置*/ - console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex]) - + // console.log(option.series[0].data[xIndex],option.xAxis.data[xIndex],option.title.text,option.series[0].name) + if(option.series[0].name == "year"){ + this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_lineDetails'],{queryParams:{'year':this.date2[xIndex],'buildingType':option.title.text}}); + }else{ + this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':option.xAxis.data[xIndex],'buildingTpye':option.title.text}}); + } + } }); }) diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts index 63ea6f2..a429a73 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts @@ -19,16 +19,19 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit { organizationName:String buildingTypeName:String - + setTimeoutObj//延时器需要清除 ngOnInit(): void { this.route.queryParams.subscribe(params => { this.organizationName = params['organizationName']; this.buildingTypeName = params['buildingTypeName']; }); - window.setTimeout(()=>{ + this.setTimeoutObj = window.setTimeout(()=>{ this.detailEcharts() }) } + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } topTextlabel = { show: true, // 开启显示 position: 'top', // 在上方显示 diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts index cd4ade9..d614f6e 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts @@ -16,12 +16,17 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { reverse(){ this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) } + + setTimeoutObj//延时器需要清除 ngOnInit(): void { - window.setTimeout(()=>{ + this.setTimeoutObj = window.setTimeout(()=>{ this.initCharts() this.barEcharts() },0) } + ngOnDestroy(){ + window.clearTimeout(this.setTimeoutObj); + } axisLabel = { interval: 0, diff --git a/src/app/statistic-analysis/echarts-data.service.ts b/src/app/statistic-analysis/echarts-data.service.ts index 7774f89..e2f8846 100644 --- a/src/app/statistic-analysis/echarts-data.service.ts +++ b/src/app/statistic-analysis/echarts-data.service.ts @@ -146,8 +146,46 @@ export class EchartsDataService { return [pointX, pointY]; } + + tableTooltipNoShow2(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; + } + // 说明鼠标右边放不下提示框 + if(viewWidth - 100 - pointX < boxWidth){ + x = pointX - boxWidth; + } + - + // boxHeight > pointY 说明鼠标上边放不下提示框 + if (boxHeight > pointY) { + y = 65; + } else { // 上边放得下 + y = pointY - boxHeight; + } + console.log(pointX,pointY) + return [x, y]; + } //用法： diff --git a/src/app/statistic-analysis/statistic-analysis-routing.module.ts b/src/app/statistic-analysis/statistic-analysis-routing.module.ts index 3a53d39..194a254 100644 --- a/src/app/statistic-analysis/statistic-analysis-routing.module.ts +++ b/src/app/statistic-analysis/statistic-analysis-routing.module.ts @@ -17,6 +17,8 @@ import { AddUnitTwoTypeStatisticsComponent } from './addUnit/add-unit-two-type-s import { AddUnitTwoTypeDetailsComponent } from './addUnit/add-unit-two-type-details/add-unit-two-type-details.component'; import { AddUnitTwoTimeComponent } from './addUnit/add-unit-two-time/add-unit-two-time.component'; import {ScheduledUpdatesComponent} from './scheduled-updates/scheduled-updates.component' +import { AddUnitThreeLineDetailsComponent } from './addUnit/add-unit-three-line-details/add-unit-three-line-details.component'; +import { AddUnitThreeBarDetailsComponent } from './addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component'; const routes: Routes = [ { path: 'statePageOne', component: PageOneComponent}, @@ -33,6 +35,8 @@ const routes: Routes = [ { path: 'addUnit_one/addUnit_two_type', component: AddUnitTwoTypeStatisticsComponent}, { path: 'addUnit_one/addUnit_two_typeDetails', component: AddUnitTwoTypeDetailsComponent}, { path: 'addUnit_one/addUnit_two_time', component: AddUnitTwoTimeComponent}, + { path: 'addUnit_one/addUnit_two_time/three_lineDetails', component: AddUnitThreeLineDetailsComponent}, + { path: 'addUnit_one/addUnit_two_time/three_barDetails', component: AddUnitThreeBarDetailsComponent}, { path: 'scheduledUpdates', component: ScheduledUpdatesComponent} ]; diff --git a/src/app/statistic-analysis/statistic-analysis.module.ts b/src/app/statistic-analysis/statistic-analysis.module.ts index aaa1b65..c8998ef 100644 --- a/src/app/statistic-analysis/statistic-analysis.module.ts +++ b/src/app/statistic-analysis/statistic-analysis.module.ts @@ -60,11 +60,13 @@ import { AddUnitTwoTypeStatisticsComponent } from './addUnit/add-unit-two-type-s import { AddUnitTwoTypeDetailsComponent } from './addUnit/add-unit-two-type-details/add-unit-two-type-details.component'; import { AddUnitTwoTimeComponent } from './addUnit/add-unit-two-time/add-unit-two-time.component'; import { ScheduledUpdatesComponent } from './scheduled-updates/scheduled-updates.component'; +import { AddUnitThreeLineDetailsComponent } from './addUnit/add-unit-three-line-details/add-unit-three-line-details.component'; +import { AddUnitThreeBarDetailsComponent } from './addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component'; @NgModule({ - declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,ScheduledUpdatesComponent], + declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent,echartsComponent, DeleteOneComponent, DeleteTwoComponent, DeleteThereComponent, DeleteFourComponent, BuildingTypeOneComponent, BuildingTypeTwoForwardComponent, BuildingTypeTwoReverseComponent, BuildingTypeThreeDetailsComponent, AddUnitOneComponent, AddUnitTwoTypeStatisticsComponent, AddUnitTwoTypeDetailsComponent, AddUnitTwoTimeComponent,ScheduledUpdatesComponent, AddUnitThreeLineDetailsComponent, AddUnitThreeBarDetailsComponent], imports: [ CommonModule, StatisticAnalysisRoutingModule, From 8aa551c0c4c10fec82fa2bef9bdeb02db3f63f56 Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Sat, 5 Sep 2020 08:59:19 +0800 Subject: [PATCH 3/4] =?UTF-8?q?[=E5=88=A0=E9=99=A4]=E7=AC=AC=E4=B8=80?= =?UTF-8?q?=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../delete-four/delete-four.component.html | 14 +- .../delete-four/delete-four.component.scss | 13 ++ .../delete-four/delete-four.component.ts | 76 +++++++- .../delete-one/delete-one.component.ts | 29 ++- .../delete-there/delete-there.component.html | 27 ++- .../delete-there/delete-there.component.scss | 22 +++ .../delete-there/delete-there.component.ts | 111 ++++++++++- .../delete-two/delete-two.component.html | 91 ++++++++- .../delete-two/delete-two.component.scss | 95 +++++++++ .../delete-two/delete-two.component.ts | 184 +++++++++++++++++- .../statistic-analysis-routing.module.ts | 16 +- 11 files changed, 660 insertions(+), 18 deletions(-) diff --git a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.html b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.html index 9799a59..6c4e2a5 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.html +++ b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.html @@ -1 +1,13 @@ -

delete-four works!

+ +
+
+ +
+
diff --git a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss index e69de29..1e25505 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss +++ b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss @@ -0,0 +1,13 @@ +.detailBox{ + width: 100%; + height: 100%; + position: relative; + #detailBox{ + width: 100%; + height: 350px; + position: absolute; + left: 50%; + top: 45%; + transform: translate(-50%,-50%); + } +} \ No newline at end of file diff --git a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts index 95cb56e..011e610 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts @@ -1,4 +1,7 @@ import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import {EchartsDataService} from '../../echarts-data.service' +declare var echarts: any; @Component({ selector: 'app-delete-four', @@ -7,9 +10,80 @@ import { Component, OnInit } from '@angular/core'; }) export class DeleteFourComponent implements OnInit { - constructor() { } + constructor(public route: ActivatedRoute,public data: EchartsDataService) { } + zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] + zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] ngOnInit(): void { + window.setTimeout(()=>{ + this.detailEcharts() + }) + } + + detailEcharts(){ + var detailPlanEchart = echarts.init(document.getElementById('detailBox')); + var option = { + title: { + text: this.data.statefulInspectionName, + left: "center", + textStyle: { + fontSize: 28 + } + }, + xAxis: { + type: 'category', + data: this.zhongNameData, + // axisLabel: this.axisLabel + }, + 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', + showBackground: true, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + } + }] + }; + detailPlanEchart.setOption(option); + } + + + tableTooltip(params:any){ + var data = [ + {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} + ] + var res = '
'+params.name+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + for(var i=0;i' + res+='' + res+='' + } + + res+='' + // res+='' + res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' + return res } } diff --git a/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts b/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts index afd66fa..8f1f8fa 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts @@ -26,9 +26,9 @@ export class DeleteOneComponent implements OnInit { var indexBzt = ec.init(document.getElementById('indexBzt')); var options={ title: { - text: '预案状态统计（7005家）', + text: '删除单位统计（8900家）', //subtext: '纯属虚构', - padding:[80,100], + padding:[120,100], left: 'center', textStyle:{ fontSize:38 @@ -55,7 +55,7 @@ export class DeleteOneComponent implements OnInit { textStyle:{ fontSize:28 }, - data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] + data: ['高层', '地下', '轨道交通', '化工生产', '储罐类', '厂房', '古建筑', '商市场', '医院', '学校', '宾馆', '娱乐场所', '餐饮业', '影剧院', '展览建筑', '隧道'] }, series: [ { @@ -73,11 +73,22 @@ export class DeleteOneComponent implements OnInit { }, data: [ - {value: 1585, name: '预案新增'}, - {value: 2000, name: '预案审核通过',itemStyle:{color:'#02A7F0'}}, - {value: 2600, name: '预案编制'}, - {value: 1500, name: '预案审核退回'}, - {value: 1800, name: '预案审核中'} + {value: 500, name: '高层'}, + {value: 1300, name: '地下',itemStyle:{color:'#02A7F0'}}, + {value: 1500, name: '轨道交通'}, + {value: 1500, name: '化工生产'}, + {value: 1700, name: '储罐类'}, + {value: 800, name: '厂房'}, + {value: 1500, name: '古建筑'}, + {value: 1500, name: '商市场'}, + {value: 1700, name: '医院'}, + {value: 1700, name: '学校'}, + {value: 1700, name: '宾馆'}, + {value: 1700, name: '娱乐场所'}, + {value: 1700, name: '餐饮业'}, + {value: 1700, name: '影剧院'}, + {value: 1700, name: '展览建筑'}, + {value: 1700, name: '隧道'} ], emphasis: { itemStyle: { @@ -90,7 +101,7 @@ export class DeleteOneComponent implements OnInit { ] }; indexBzt.on('click', (params) => { - this.router.navigateByUrl('/statisticanalysis/statePageTwo_time'); + this.router.navigateByUrl('/statisticanalysis/delete_one/delete_two'); }); indexBzt.setOption(options); } diff --git a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.html b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.html index 0c3246a..35c1ef9 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.html +++ b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.html @@ -1 +1,26 @@ -

delete-there works!

+ +
+ + + + +
+
diff --git a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss index e69de29..56b353c 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss +++ b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss @@ -0,0 +1,22 @@ +.head{ + //display: flex; + border-bottom:2px solid #d4dde4; + width: 100%; + height: 100px; + background-color:white ; +} +.chaxun{ + background-color: #008CBA; + color: white; + border-radius:5px; + font-size: 16px; + margin-left: 50px; + padding: 15px 32px; +} +.zhu{ + padding-top: 200px; + padding-left: 200px; + text-align: center; + height: 270px; + width: 880px; +} \ No newline at end of file diff --git a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts index d8963ed..0c88ffd 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts @@ -1,4 +1,15 @@ +/* + * @Descripttion: + * @version: + * @Author: sueRimn + * @Date: 2020-09-02 16:22:35 + * @LastEditors: sueRimn + * @LastEditTime: 2020-09-05 08:58:18 + */ import { Component, OnInit } from '@angular/core'; +import { Router,ActivatedRoute } from '@angular/router'; +import {EchartsDataService} from '../../echarts-data.service' +declare var echarts: any; @Component({ selector: 'app-delete-there', @@ -7,9 +18,107 @@ import { Component, OnInit } from '@angular/core'; }) export class DeleteThereComponent implements OnInit { - constructor() { } + constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService) { } ngOnInit(): void { + let headtext:string; + let datayuex:string; + let headName:string; + this.activatedRoute.params.subscribe(param=>{ + headtext=param.headtext + datayuex=param.datayuex + headName=headtext+''+datayuex; + //console.log(datayuex) + }); + window.setTimeout(()=>{ + this.zhuzhuangtu(headName) + },0) + } + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] + zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] + /* 柱状图 */ + zhuzhuangtu(headName:string){ + var ec = echarts as any; + var zhutu = ec.init(document.getElementById('zhidui')); + var option = { + title: { + text: `${headName}`, + left: "center", + top: "15", + textStyle: { + fontSize: 23 + } + }, + grid: { + left: '5%', + bottom:'35%' + }, + xAxis: { + type: 'category', + data: this.zhiNameData, + //axisLabel: this.axisLabel + }, + 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', + showBackground: true, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + barWidth :'28', + //label: this.topTextlabel + }] + }; + zhutu.on('click', (params) => { + console.log(params) + this.echartsData.statefulInspectionName =params.name; + this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_four`); + }); + zhutu.setOption(option); + } + + + 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 = '
'+biaotou+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + for(var i=0;i' + res+='' + res+='' + } + + res+='' + res+='' + res+='
名称数量总占比
'+jsonObj[i].number+''+jsonObj[i].zhanbi+'
总计135619%
' + return res } } diff --git a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html index de3a6f2..da06b47 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html +++ b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html @@ -1 +1,90 @@ -

delete-two works!

+ + + +
+ + + +
+ +
+ +
+ +
+ + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss index e69de29..92033cf 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss +++ b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss @@ -0,0 +1,95 @@ +body{ + overflow:auto; +} +.daohang{ + display: flex; + z-index: 5; + border-bottom:2px solid #d4dde4; + width: 100%; + height: 180px; + background-color:white ; +} + +.chaxun{ + background-color: #008CBA; + color: white; + border-radius:5px; + //font-size: 16px; + margin-left: 50px; +} +.head{ + text-align:center; + margin:0 auto; + width: 900px; + height: 400px; + padding-top: 250px; +} +.mainbox { + padding-bottom: 50px; + min-width: 1024px; + max-width: 1920px; + padding: 0.125rem 0.125rem 0; + display: flex; + .column { + flex: 2; + + } + } + .panel { + position: relative; + height: 400px; + border: 1px solid rgba(25, 186, 139, 0.17); + padding: 0 0.1875rem 0.5rem; + margin-bottom: 0.1875rem; + &::before { + position: absolute; + top: 0; + left: 0; + content: ""; + width: 10px; + height: 10px; + border-top: 2px ; + border-left: 2px ; + } + &::after { + position: absolute; + top: 0; + right: 0; + content: ""; + width: 10px; + height: 10px; + border-top: 2px ; + border-right: 2px ; + } + .panel-footer { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + &::before { + position: absolute; + bottom: 0; + left: 0; + content: ""; + width: 10px; + height: 10px; + border-bottom: 2px ; + border-left: 2px ; + } + &::after { + position: absolute; + bottom: 0; + right: 0; + content: ""; + width: 10px; + height: 10px; + border-bottom: 2px ; + border-right: 2px ; + } + } + + + .chart { + height: 3rem; + } + } \ No newline at end of file diff --git a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts index 52b6ee5..0d2386d 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts @@ -1,4 +1,16 @@ +/* + * @Descripttion: + * @version: + * @Author: sueRimn + * @Date: 2020-09-02 16:21:18 + * @LastEditors: sueRimn + * @LastEditTime: 2020-09-04 16:58:01 + */ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { MatDatepickerInputEvent } from '@angular/material/datepicker'; +import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; +declare var echarts: any; @Component({ selector: 'app-delete-two', @@ -6,10 +18,180 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./delete-two.component.scss'] }) export class DeleteTwoComponent implements OnInit { + options:any; + datayuex=['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月']; + datayuey=[210, 160, 150, 140, 130, 120, 110,120]; + datanianx=[2019,2020,2021]; + dataniany=[201,174] - constructor() { } + constructor(private router: Router,public snackBar: MatSnackBar) { } ngOnInit(): void { + window.setTimeout(()=>{ + this.headZhexian('head','删除数量总统计',this.datayuex,this.datayuey) + this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) + this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) + this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) + this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey) + this.headZhexian('rightOne','地下',this.datayuex,this.datayuey) + this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) + this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) + this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) + },0) + } + /* 按月点击事件 */ + anyue(){ + var anyue1 = document.getElementById('yue1'); + anyue1.style.display='block'; + var anyue2 = document.getElementById('yue2'); + anyue2.style.display='block'; + this.headZhexian('head','删除数量总统计',this.datayuex,this.datayuey) + this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) + this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) + this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) + this.headZhexian('leftFour','古建筑',this.datayuex,this.datayuey) + this.headZhexian('rightOne','地下',this.datayuex,this.datayuey) + this.headZhexian('rightTwo','化工生产',this.datayuex,this.datayuey) + this.headZhexian('rightThree','厂房',this.datayuex,this.datayuey) + this.headZhexian('rightFour','商市场',this.datayuex,this.datayuey) + } + /* 按年点击事件 */ + annian(){ + var anyue1 = document.getElementById('yue1'); + anyue1.style.display='none'; + var anyue2 = document.getElementById('yue2'); + anyue2.style.display='none'; + this.headZhexian('head','删除数量总统计',this.datanianx,this.dataniany) + this.headZhexian('leftOne','高层',this.datanianx,this.dataniany) + this.headZhexian('leftTwo','轨道交通',this.datanianx,this.dataniany) + this.headZhexian('leftThere','储罐类',this.datanianx,this.dataniany) + this.headZhexian('leftFour','古建筑',this.datanianx,this.dataniany) + this.headZhexian('rightOne','地下',this.datanianx,this.dataniany) + this.headZhexian('rightTwo','化工生产',this.datanianx,this.dataniany) + this.headZhexian('rightThree','厂房',this.datanianx,this.dataniany) + this.headZhexian('rightFour','商市场',this.datanianx,this.dataniany) } + /* 折线图 */ + headZhexian(divid:string,headtext:string,datayuex,datayuey){ + var ec = echarts as any; + var headZx = ec.init(document.getElementById(`${divid}`)); + var options = { + title: { + text: `${headtext}`, + left:350, + textStyle:{ + fontSize:28 + } + }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.biaogeTishi(`${headtext}`) + } , + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0' + }, + xAxis: { + type: 'category', + boundaryGap:false, + data: datayuex, + axisLabel: { + color: "#000", //刻度线标签颜色 + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", + }, + }, + splitLine: {//分割线配置 + show:true, + lineStyle: { + color: '#999', + } + } + }, + yAxis: { + type: 'value', + axisLabel: { + color: "#000" //刻度线标签颜色 + }, + //设置坐标轴字体颜色和宽度 + axisLine: { + lineStyle: { + color: "#000", + } + } + }, + series: [{ + data: datayuey, + type: 'line', + lineStyle:{ + color:'#1369bf' + }, + /* markLine: { + symbol: ['none', 'none'], + label: {show: false}, + lineStyle:{ + color:'#9A9A9A', + type:'solid', + }, + data: [ + {xAxis: 1}, + {xAxis: 2}, + {xAxis: 3}, + {xAxis: 4}, + {xAxis: 5}, + {xAxis: 6}, + {xAxis: 7} + ] + }, */ + }] + }; + headZx.on('click', (params) => { + console.log(params) + this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_there/${headtext}/${params.name}`); + }); + headZx.setOption(options); + } + /** + * @name: 表格提示框封装 + * @test: test font + * @msg: + * @param {string(表头)} + * @return {type} + */ + biaogeTishi(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 = '
'+biaotou+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + for(var i=0;i' + res+='' + res+='' + } + + res+='' + res+='' + res+='
名称数量总占比
'+jsonObj[i].number+''+jsonObj[i].zhanbi+'
总计135619%
' + return res + } + } diff --git a/src/app/statistic-analysis/statistic-analysis-routing.module.ts b/src/app/statistic-analysis/statistic-analysis-routing.module.ts index 1bbcbfb..2f69878 100644 --- a/src/app/statistic-analysis/statistic-analysis-routing.module.ts +++ b/src/app/statistic-analysis/statistic-analysis-routing.module.ts @@ -1,3 +1,11 @@ +/* + * @Descripttion: + * @version: + * @Author: sueRimn + * @Date: 2020-09-02 16:57:00 + * @LastEditors: sueRimn + * @LastEditTime: 2020-09-04 15:55:53 + */ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { PageOneComponent } from './state/page-one/page-one.component'; @@ -9,15 +17,17 @@ import { DeleteTwoComponent } from './deleteUnit/delete-two/delete-two.component import { DeleteThereComponent } from './deleteUnit/delete-there/delete-there.component'; import { DeleteFourComponent } from './deleteUnit/delete-four/delete-four.component'; import { BuildingTypeOneComponent } from './buildingType/building-type-one/building-type-one.component'; +import { from } from 'rxjs'; const routes: Routes = [ { path: 'statePageOne', component: PageOneComponent}, { path: 'statePageTwo_time', component: PageTwoTimeComponent}, { path: 'delete_one', component: DeleteOneComponent}, - { path: 'delete_two', component: DeleteTwoComponent}, - { path: 'delete_there', component: DeleteThereComponent}, - { path: 'delete_four', component: DeleteFourComponent}, + { path: 'delete_one/delete_two', component: DeleteTwoComponent}, + { path: 'delete_one/delete_there/:headtext/:datayuex', component: DeleteThereComponent}, + { path: 'delete_one/delete_four', component: DeleteFourComponent}, { path: 'buildingType_one', component: BuildingTypeOneComponent} + //{ path: 'delete_one/deleteUnit_two_type', component: DeleteTwoComponent} ]; @NgModule({ From fb6b9d8fd6963ca4815e948b5d9a58d2817daf5f Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Sat, 5 Sep 2020 11:37:06 +0800 Subject: [PATCH 4/4] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=97=B6=E9=94=80=E6=AF=81echarts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-unit-one/add-unit-one.component.ts | 19 ++++-- .../add-unit-three-bar-details.component.ts | 3 + .../add-unit-three-line-details.component.ts | 4 +- .../add-unit-two-time.component.html | 4 +- .../add-unit-two-time.component.scss | 6 +- .../add-unit-two-time.component.ts | 12 +++- .../add-unit-two-type-details.component.ts | 8 ++- ...dd-unit-two-type-statistics.component.html | 4 +- ...dd-unit-two-type-statistics.component.scss | 4 ++ .../add-unit-two-type-statistics.component.ts | 54 ++++++++------- .../building-type-one.component.ts | 11 ++- .../building-type-three-details.component.ts | 9 ++- .../building-type-two-forward.component.html | 2 +- .../building-type-two-forward.component.ts | 51 ++++++++------ .../building-type-two-reverse.component.html | 2 +- .../building-type-two-reverse.component.ts | 55 ++++++++------- .../state/page-one/page-one.component.ts | 11 ++- .../page-two-name/page-two-name.component.ts | 67 ++++++++++++------- .../page-zhong-dui-details.component.ts | 13 ++-- 19 files changed, 217 insertions(+), 122 deletions(-) diff --git a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts index adcf012..10fdafc 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts +++ b/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); - } + } diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts index 2f8bd1e..70f4843 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts +++ b/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'; //选择当前的 查询类型 按月/年 diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts index 3f27283..fd5110e 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-three-line-details/add-unit-three-line-details.component.ts +++ b/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 = { diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html index 9e608b0..91c0fd8 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html +++ b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html @@ -60,8 +60,8 @@ -->
- - + +
diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss index f17d954..a09ebfa 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss +++ b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss @@ -60,4 +60,8 @@ } } - } \ No newline at end of file + } +.selectedBtn{ + background-color: #2196f3; + color: white; +} \ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts index e4b0cfe..424f308 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts +++ b/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); } //剩余折线图 diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts index a429a73..b3cf3f9 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts +++ b/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); } diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html index f2ff2ed..af237b6 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html @@ -1,8 +1,8 @@
- - + +
diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss index b9e1ac0..52ab7a7 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss @@ -42,4 +42,8 @@ display: inline-block; box-sizing: border-box; padding: 20px; +} +.selectedBtn{ + background-color: #2196f3; + color: white; } \ No newline at end of file diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts index d614f6e..92e2b58 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts +++ b/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}}) }); }) diff --git a/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts b/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts index 867d366..15595a2 100644 --- a/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts +++ b/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%"},' diff --git a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts b/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts index e180a13..6a22850 100644 --- a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts +++ b/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); } diff --git a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html index ab41180..1d84921 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html +++ b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html @@ -1,7 +1,7 @@
- +
diff --git a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts index aaed0aa..c55884c 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts +++ b/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}}) }); }) diff --git a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html index bdb66e9..d8a4ac7 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html +++ b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.html @@ -2,7 +2,7 @@
- +
diff --git a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts index 22efeb3..15b3f06 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts +++ b/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){ diff --git a/src/app/statistic-analysis/state/page-one/page-one.component.ts b/src/app/statistic-analysis/state/page-one/page-one.component.ts index 04760c0..b78892d 100644 --- a/src/app/statistic-analysis/state/page-one/page-one.component.ts +++ b/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: 表格提示框封装 diff --git a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts index ac56a0b..12d64cd 100644 --- a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts +++ b/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,7 +23,27 @@ 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 = { interval: 0, @@ -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){ diff --git a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts index 11ad4ac..9ee875a 100644 --- a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts +++ b/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); }