From 60f0336a9dead3bfcdf270a6a9d7968697e57327 Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Wed, 2 Sep 2020 17:07:00 +0800 Subject: [PATCH 1/2] =?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 8aa551c0c4c10fec82fa2bef9bdeb02db3f63f56 Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Sat, 5 Sep 2020 08:59:19 +0800 Subject: [PATCH 2/2] =?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({