From 45c6453829eb659d2e218aabe6abf56f0c0a970e Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 2 Sep 2020 11:00:09 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E9=A2=84=E6=A1=88?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=BB=9F=E8=AE=A1=E7=AC=AC=E4=BA=8C=E4=B8=AA?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/home/home.component.ts | 97 +++--- .../page-two-name.component.html | 32 +- .../page-two-name.component.scss | 17 + .../page-two-name/page-two-name.component.ts | 302 +++++++++++++++++- .../page-zhong-dui-details.component.html | 5 + .../page-zhong-dui-details.component.scss | 15 + .../page-zhong-dui-details.component.spec.ts | 25 ++ .../page-zhong-dui-details.component.ts | 54 ++++ .../statistic-analysis-routing.module.ts | 4 +- .../statistic-analysis.module.ts | 3 +- src/index.html | 1 - 11 files changed, 501 insertions(+), 54 deletions(-) create mode 100644 src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.html create mode 100644 src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss create mode 100644 src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.spec.ts create mode 100644 src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index de4bf9a..635b463 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -228,13 +228,13 @@ export class HomeComponent implements OnInit { return name + ' ' + target; } }, - //提示框 - tooltip: { - trigger: 'item', - formatter: '{b}:{c}份
占比：{d}%' - }, - // 数据 - series: [{ + //提示框 + tooltip: { + trigger: 'item', + formatter: '{b}:{c}份
占比：{d}%' + }, + // 数据 + series: [{ type: 'pie', center: ['55%', '55%'], radius: ['25%', '60%'], @@ -290,47 +290,48 @@ export class HomeComponent implements OnInit { }, }, }, - data: [{ - value: 4128, - name: '高层建筑' - }, - { - value: 1566, - name: '地下建筑' - }, - - { - value:1895, - name: '地铁类' - }, - - { - value:2112, - name: '人员密集场所' - }, - { - value: 3008, - name: '石油化工类' - }, - - { - value: 2456, - name: '大型城市综合体' - }, - { - value: 3522, - name: '仓库、堆垛、厂房' - }, - { - value: 1421, - name: '隧道' - }, - { - value: 2622, - name: '其他' - } - ], - }], + data: [ + { + value: 4128, + name: '高层建筑' + }, + { + value: 1566, + name: '地下建筑' + }, + + { + value:1895, + name: '地铁类' + }, + + { + value:2112, + name: '人员密集场所' + }, + { + value: 3008, + name: '石油化工类' + }, + + { + value: 2456, + name: '大型城市综合体' + }, + { + value: 3522, + name: '仓库、堆垛、厂房' + }, + { + value: 1421, + name: '隧道' + }, + { + value: 2622, + name: '其他' + } + ], + }], }; data03:any = [ { diff --git a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.html b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.html index 1332578..ca6a914 100644 --- a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.html +++ b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.html @@ -1 +1,31 @@ -

page-two-name works!

+
+
+ +
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+
+
\ No newline at end of file diff --git a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss index e69de29..622e0a4 100644 --- a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss +++ b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss @@ -0,0 +1,17 @@ +.echartsBox{ + width: 100%; + height: 92%; + overflow-y: auto; + #pie{ + width: 100%; + height: 450px; + } + .histogramBox{ + width: 100%; + .echart-item{ + display: inline-block; + width: 50%; + height: 330px; + } + } +} \ No newline at end of file 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 ffb20d1..30706a1 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 @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; - +import { Router,ActivatedRoute } from '@angular/router' +declare var echarts: any; @Component({ selector: 'app-page-two-name', templateUrl: './page-two-name.component.html', @@ -7,9 +8,306 @@ import { Component, OnInit } from '@angular/core'; }) export class PageTwoNameComponent implements OnInit { - constructor() { } + constructor(private router:Router,private route:ActivatedRoute) { } ngOnInit(): void { + setTimeout(() => { + this.planState() + this.planAdd() + this.passPlanEchart() + this.planMake() + this.planBack() + this.planAudit() + }, 0); + + } + axisLabel = { + interval: 0, + formatter:function(value) + { + var ret = "";//拼接加\n返回的类目项 + var maxLength = 2;//每项显示文字个数 + var valLength = value.length;//X轴类目项的文字个数 + var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 + if (rowN > 1)//如果类目项的文字大于3, + { + for (var i = 0; i < rowN; i++) { + var temp = "";//每次截取的字符串 + var start = i * maxLength;//开始截取的位置 + var end = start + maxLength;//结束截取的位置 + //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 + temp = value.substring(start, end) + "\n"; + ret += temp; //凭借最终的字符串 + } + return ret; + } + else { + return value; + } + } + }//echarts两个字换行 + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] + zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] + //预案新增统计 + planAdd () { + let _this = this + var addEchart = echarts.init(document.getElementById('addEchart')); + var option = { + title: { + text: "预案新增", + left: "center", + top: "15", + textStyle: { + fontSize: 23 + } + }, + xAxis: { + type: 'category', + data: this.zhiNameData, + axisLabel: this.axisLabel + }, + yAxis: { + type: 'value' + }, + series: [{ + data: this.zhiNumData, + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + barWidth :'28' + + }] + }; + addEchart.setOption(option); + addEchart.on('click', function (params) { + _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案新增"}}) + }); + } + //审核通过 + passPlanEchart (){ + let _this = this + var passPlanEchart = echarts.init(document.getElementById('passPlanEchart')); + var option = { + title: { + text: "预案审核通过", + left: "center", + top: "15", + textStyle: { + fontSize: 23 + } + }, + xAxis: { + type: 'category', + data: this.zhiNameData, + axisLabel: this.axisLabel + }, + yAxis: { + type: 'value' + }, + series: [{ + data: this.zhiNumData, + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + barWidth :'28' + }] + }; + passPlanEchart.setOption(option); + passPlanEchart.on('click', function (params) { + _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案审核通过"}}) + }); + } + + //预案编制 + planMake (){ + let _this = this + var passMakeEchart = echarts.init(document.getElementById('planMake')); + var option = { + title: { + text: "预案编制", + left: "center", + top: "15", + textStyle: { + fontSize: 23 + } + }, + xAxis: { + type: 'category', + data: this.zhiNameData, + axisLabel: this.axisLabel + }, + yAxis: { + type: 'value' + }, + series: [{ + data: this.zhiNumData, + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + barWidth :'28' + }] + }; + passMakeEchart.setOption(option); + passMakeEchart.on('click', function (params) { + _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案编制"}}) + }); } + //预案退回 + planBack (){ + let _this = this + var passBackEchart = echarts.init(document.getElementById('planBack')); + var option = { + title: { + text: "预案审核退回", + left: "center", + top: "15", + textStyle: { + fontSize: 23 + } + }, + xAxis: { + type: 'category', + data: this.zhiNameData, + axisLabel: this.axisLabel + }, + yAxis: { + type: 'value' + }, + series: [{ + data: this.zhiNumData, + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + barWidth :'28' + }] + }; + passBackEchart.setOption(option); + passBackEchart.on('click', function (params) { + _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案审核退回"}}) + }); + } + + //预案审核中 + planAudit (){ + let _this = this + var planAuditEchart = echarts.init(document.getElementById('planAudit')); + var option = { + title: { + text: "预案审核中", + left: "center", + top: "15", + textStyle: { + fontSize: 23 + } + }, + xAxis: { + type: 'category', + data: this.zhiNameData, + axisLabel: this.axisLabel + }, + yAxis: { + type: 'value' + }, + series: [{ + data: this.zhiNumData, + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + }, + barWidth :'28' + }] + }; + planAuditEchart.setOption(option); + planAuditEchart.on('click', function (params) { + + _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案审核中"}}) + }); + } + //预案状态统计 + planState(){ + var shuju='[{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"}]'; + var jsonObj = JSON.parse(shuju); + var passPlanEchart = echarts.init(document.getElementById('pie')); + var option = { + title: { + text: '预案状态统计（7005份）', + left: 'center', + top: "11%", + textStyle: { + fontSize: 23 + } + }, + tooltip: { + trigger: 'item', + formatter: function (params){ + var res = '
预案补充' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + console.log(jsonObj) + for(var i=0;i' + res+='' + res+='' + } + res+='' + res+='
名称数量总占比
'+jsonObj[i].number+''+jsonObj[i].zhanbi+'
' + return res + } + + }, + legend: { + orient: 'vertical', + right: '23%', + top: "26%", + data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] + }, + series: [ + { + name: '访问来源', + type: 'pie', + radius: '60%', + center: ['50%', '60%'], + data: [ + {value: 1585, name: '预案新增'}, + {value: 2000, name: '预案审核通过'}, + {value: 2600, name: '预案编制'}, + {value: 1500, name: '预案审核退回'}, + {value: 1800, name: '预案审核中'} + ], + label: { + formatter: '{b}({c}份)\n{d|{d}%}', + rich: { + d: { + align: 'center', + } + }, + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + } + passPlanEchart.setOption(option); + } } diff --git a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.html b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.html new file mode 100644 index 0000000..01ac719 --- /dev/null +++ b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.html @@ -0,0 +1,5 @@ +
+
+ +
+
\ No newline at end of file diff --git a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss new file mode 100644 index 0000000..52f7eb9 --- /dev/null +++ b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss @@ -0,0 +1,15 @@ +.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/state/page-zhong-dui-details/page-zhong-dui-details.component.spec.ts b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.spec.ts new file mode 100644 index 0000000..febf5c9 --- /dev/null +++ b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageZhongDuiDetailsComponent } from './page-zhong-dui-details.component'; + +describe('PageZhongDuiDetailsComponent', () => { + let component: PageZhongDuiDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PageZhongDuiDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PageZhongDuiDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..de8733b --- /dev/null +++ b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts @@ -0,0 +1,54 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +declare var echarts: any; +@Component({ + selector: 'app-page-zhong-dui-details', + templateUrl: './page-zhong-dui-details.component.html', + styleUrls: ['./page-zhong-dui-details.component.scss'] +}) +export class PageZhongDuiDetailsComponent implements OnInit { + + constructor( public route: ActivatedRoute) { } + + title:String + zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] + zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + ngOnInit(): void { + this.route.queryParams.subscribe(params => { + this.title = params.name + }) + setTimeout(() => { + this.detailEcharts() + }, 0); + } + detailEcharts(){ + var detailPlanEchart = echarts.init(document.getElementById('detailBox')); + var option = { + title: { + text: this.title, + left: "center", + textStyle: { + fontSize: 28 + } + }, + xAxis: { + type: 'category', + data: this.zhongNameData, + // axisLabel: this.axisLabel + }, + yAxis: { + type: 'value' + }, + series: [{ + data: this.zhongNumData, + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + } + }] + }; + detailPlanEchart.setOption(option); + } + +} diff --git a/src/app/statistic-analysis/statistic-analysis-routing.module.ts b/src/app/statistic-analysis/statistic-analysis-routing.module.ts index c68d0cc..c4ce8e0 100644 --- a/src/app/statistic-analysis/statistic-analysis-routing.module.ts +++ b/src/app/statistic-analysis/statistic-analysis-routing.module.ts @@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router'; import { PageOneComponent } from './state/page-one/page-one.component'; import { PageTwoNameComponent } from './state/page-two-name/page-two-name.component'; import { PageTwoTimeComponent } from './state/page-two-time/page-two-time.component'; +import { PageZhongDuiDetailsComponent } from './state/page-zhong-dui-details/page-zhong-dui-details.component'; const routes: Routes = [ { path: 'statePageOne', component: PageOneComponent}, + { path: 'statePageTwo_time', component: PageTwoTimeComponent}, { path: 'statePageTwo_name', component: PageTwoNameComponent}, - { path: 'statePageTwo_time', component: PageTwoTimeComponent} + { path: 'statePageTwo_details', component: PageZhongDuiDetailsComponent} ]; @NgModule({ diff --git a/src/app/statistic-analysis/statistic-analysis.module.ts b/src/app/statistic-analysis/statistic-analysis.module.ts index ea82237..be0d67d 100644 --- a/src/app/statistic-analysis/statistic-analysis.module.ts +++ b/src/app/statistic-analysis/statistic-analysis.module.ts @@ -46,10 +46,11 @@ import {MatTabsModule} from '@angular/material/tabs'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatTreeModule} from '@angular/material/tree'; +import { PageZhongDuiDetailsComponent } from './state/page-zhong-dui-details/page-zhong-dui-details.component'; @NgModule({ - declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent], + declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent, PageZhongDuiDetailsComponent], imports: [ CommonModule, StatisticAnalysisRoutingModule, diff --git a/src/index.html b/src/index.html index 6def6ab..3a46dad 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,6 @@ - From afc92839c1e914d46e4c36863cce90e58cff5024 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 2 Sep 2020 11:00:44 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[=E4=BF=AE=E6=94=B9=E5=8E=BB=E9=99=A4?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../state/page-two-name/page-two-name.component.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss index 622e0a4..93b47ee 100644 --- a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss +++ b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss @@ -1,7 +1,6 @@ .echartsBox{ width: 100%; - height: 92%; - overflow-y: auto; + height: 100%; #pie{ width: 100%; height: 450px;