From a2e63304fbcfd613b1b40c98723a781f1b719ebe Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 2 Sep 2020 15:16:51 +0800 Subject: [PATCH 1/4] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=E5=9B=BE=E9=A1=B6=E9=83=A8=E6=98=BE=E7=A4=BA=E6=95=B0=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../page-two-name/page-two-name.component.ts | 27 ++++++++++++++----- .../page-zhong-dui-details.component.scss | 2 -- 2 files changed, 21 insertions(+), 8 deletions(-) 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 bfebea3..7f1e369 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 @@ -51,6 +51,17 @@ export class PageTwoNameComponent implements OnInit { } } }//echarts两个字换行 + topTextlabel = { + show: true, // 开启显示 + position: 'top', // 在上方显示 + distance: 10, // 距离图形元素的距离。当 position 为字符描述值(如 'top'、'insideRight')时候有效。 + verticalAlign: 'middle', + textStyle: { // 数值样式 + color: 'black', + fontSize: 12 + } + }//柱状图上方显示数值 + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] isTrue = true @@ -82,8 +93,8 @@ export class PageTwoNameComponent implements OnInit { backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - barWidth :'28' - + barWidth :'28', + label: this.topTextlabel }] }; addEchart.setOption(option); @@ -120,7 +131,8 @@ export class PageTwoNameComponent implements OnInit { backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - barWidth :'28' + barWidth :'28', + label: this.topTextlabel }] }; passPlanEchart.setOption(option); @@ -158,7 +170,8 @@ export class PageTwoNameComponent implements OnInit { backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - barWidth :'28' + barWidth :'28', + label: this.topTextlabel }] }; passMakeEchart.setOption(option); @@ -196,7 +209,8 @@ export class PageTwoNameComponent implements OnInit { backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - barWidth :'28' + barWidth :'28', + label: this.topTextlabel }] }; passBackEchart.setOption(option); @@ -234,7 +248,8 @@ export class PageTwoNameComponent implements OnInit { backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - barWidth :'28' + barWidth :'28', + label: this.topTextlabel }] }; planAuditEchart.setOption(option); 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 index 52f7eb9..1e25505 100644 --- 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 @@ -10,6 +10,4 @@ top: 45%; transform: translate(-50%,-50%); } - - } \ No newline at end of file From d82433cadb626cb3d92fa0fcfde7d1ab18af31af Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Wed, 2 Sep 2020 15:29:17 +0800 Subject: [PATCH 2/4] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20echarts=E9=A2=84?= =?UTF-8?q?=E6=A1=88=E7=8A=B6=E6=80=81=E5=88=86=E6=9E=90=E5=9F=BA=E6=9C=AC?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../echarts-data.service.ts | 3 +- .../page-two-name.component.html | 4 +- .../page-two-name/page-two-name.component.ts | 12 ++--- .../state/page-two-time/echarts.html | 16 +++--- .../page-two-time.component.html | 8 +-- .../page-two-time/page-two-time.component.ts | 49 +++++++++++++++---- 6 files changed, 62 insertions(+), 30 deletions(-) diff --git a/src/app/statistic-analysis/echarts-data.service.ts b/src/app/statistic-analysis/echarts-data.service.ts index 829e562..b6a0ca3 100644 --- a/src/app/statistic-analysis/echarts-data.service.ts +++ b/src/app/statistic-analysis/echarts-data.service.ts @@ -9,7 +9,8 @@ export class EchartsDataService { //预案状态分析 statefulInspectionName:string; + statefulInspectionToggle:boolean = true; // true=显示所有柱状图 flase=显示当前点击柱状图 + - } 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 969dc20..34eb310 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,4 +1,4 @@ -
+
@@ -30,4 +30,4 @@
- + 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 bfebea3..c5e13a2 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 @@ -53,7 +53,7 @@ export class PageTwoNameComponent implements OnInit { }//echarts两个字换行 zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] - isTrue = true + //预案新增统计 planAdd () { let _this = this @@ -89,7 +89,7 @@ export class PageTwoNameComponent implements OnInit { addEchart.setOption(option); addEchart.on('click', function (params) { _this.data.statefulInspectionName = '预案新增' - _this.isTrue = !_this.isTrue + _this.data.statefulInspectionToggle = false }); } //预案审核通过 @@ -126,7 +126,7 @@ export class PageTwoNameComponent implements OnInit { passPlanEchart.setOption(option); passPlanEchart.on('click', function (params) { _this.data.statefulInspectionName = '预案审核通过' - _this.isTrue = !_this.isTrue + _this.data.statefulInspectionToggle = false }); } @@ -164,7 +164,7 @@ export class PageTwoNameComponent implements OnInit { passMakeEchart.setOption(option); passMakeEchart.on('click', function (params) { _this.data.statefulInspectionName = '预案编制' - _this.isTrue = !_this.isTrue + _this.data.statefulInspectionToggle = false }); } @@ -202,7 +202,7 @@ export class PageTwoNameComponent implements OnInit { passBackEchart.setOption(option); passBackEchart.on('click', function (params) { _this.data.statefulInspectionName = '预案审核退回' - _this.isTrue = !_this.isTrue + _this.data.statefulInspectionToggle = false }); } @@ -240,7 +240,7 @@ export class PageTwoNameComponent implements OnInit { planAuditEchart.setOption(option); planAuditEchart.on('click', function (params) { _this.data.statefulInspectionName = '预案审核中' - _this.isTrue = !_this.isTrue + _this.data.statefulInspectionToggle = false }); } //预案状态统计 diff --git a/src/app/statistic-analysis/state/page-two-time/echarts.html b/src/app/statistic-analysis/state/page-two-time/echarts.html index 9f63ef7..22d2c00 100644 --- a/src/app/statistic-analysis/state/page-two-time/echarts.html +++ b/src/app/statistic-analysis/state/page-two-time/echarts.html @@ -1,7 +1,9 @@ - -
-
-
-
-
-
\ No newline at end of file + +
+
+
+
+
+
+
+
diff --git a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html index b56df0a..885bdf7 100644 --- a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html +++ b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html @@ -8,14 +8,14 @@ - +
- +
@@ -32,8 +32,8 @@
- - + +
diff --git a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts index 63958b7..b26dd39 100644 --- a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts +++ b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts @@ -3,6 +3,8 @@ import { MatDatepickerInputEvent } from '@angular/material/datepicker'; import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; import { FormControl } from '@angular/forms'; import { DateAdapter } from '@angular/material/core'; +import { PageTwoNameComponent } from '../page-two-name/page-two-name.component'; +import {EchartsDataService} from '../../echarts-data.service' declare var echarts: any; @Component({ @@ -12,28 +14,34 @@ declare var echarts: any; }) export class PageTwoTimeComponent implements OnInit { - constructor(public snackBar: MatSnackBar,private adapter: DateAdapter,) { } + constructor(public snackBar: MatSnackBar,private adapter: DateAdapter,public echartsData:EchartsDataService) { } - @ViewChild('echarts') echarts:echartsComponent; //父组件中获得子组件的引用 + @ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用 + @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 ngOnInit(): void { - this.startTime = new FormControl( (new Date()).getFullYear()+ '-' + '01' + '-' + '01' ) - this.endTime = new FormControl( new Date() ) + this.startTime = new FormControl( (new Date()).getFullYear()-10 ) + this.endTime = new FormControl( (new Date()).getFullYear() ) this.adapter.setLocale('CH') } isQuery:boolean = true; //横纵向查询 + //查询 query () { - this.echarts.toggleEcharts() + } + //shao toggleTrue () { this.isQuery = true + this.echartsData.statefulInspectionToggle = true } + //chen toggleFalse () { this.isQuery = false + this.echartsData.statefulInspectionToggle = true } startTime:any; //查询开始时间 @@ -95,7 +103,7 @@ export class PageTwoTimeComponent implements OnInit { }) export class echartsComponent implements OnInit { - constructor(public snackBar: MatSnackBar,private adapter: DateAdapter,) { } + constructor(public snackBar: MatSnackBar,private adapter: DateAdapter,public echartsData:EchartsDataService) { } ngOnInit(): void { window.setTimeout(()=>{ @@ -108,11 +116,7 @@ export class echartsComponent implements OnInit { },0) } - toggle:boolean = true;//切换 - toggleEcharts () { - this.toggle = !this.toggle - } oneInit () { var chartQusj = echarts.init(document.getElementById('one'), 'skinUpp'); @@ -191,6 +195,7 @@ export class echartsComponent implements OnInit { } twoInit () { + let that = this var chartQusj = echarts.init(document.getElementById('two'), 'skinUpp'); var option = { grid: { @@ -257,9 +262,14 @@ export class echartsComponent implements OnInit { ], }; chartQusj.setOption(option); + chartQusj.on('click', function (params) { + that.echartsData.statefulInspectionName = '预案新增' + that.echartsData.statefulInspectionToggle = false + }); } threeInit () { + let that = this var chartQusj = echarts.init(document.getElementById('three'), 'skinUpp'); var option = { grid: { @@ -326,9 +336,14 @@ export class echartsComponent implements OnInit { ], }; chartQusj.setOption(option); + chartQusj.on('click', function (params) { + that.echartsData.statefulInspectionName = '预案审核通过' + that.echartsData.statefulInspectionToggle = false + }); } fourInit () { + let that = this var chartQusj = echarts.init(document.getElementById('four'), 'skinUpp'); var option = { grid: { @@ -395,9 +410,14 @@ export class echartsComponent implements OnInit { ], }; chartQusj.setOption(option); + chartQusj.on('click', function (params) { + that.echartsData.statefulInspectionName = '预案编制' + that.echartsData.statefulInspectionToggle = false + }); } fiveInit () { + let that = this var chartQusj = echarts.init(document.getElementById('five'), 'skinUpp'); var option = { grid: { @@ -464,9 +484,14 @@ export class echartsComponent implements OnInit { ], }; chartQusj.setOption(option); + chartQusj.on('click', function (params) { + that.echartsData.statefulInspectionName = '预案审核退回' + that.echartsData.statefulInspectionToggle = false + }); } sixInit () { + let that = this var chartQusj = echarts.init(document.getElementById('six'), 'skinUpp'); var option = { grid: { @@ -533,6 +558,10 @@ export class echartsComponent implements OnInit { ], }; chartQusj.setOption(option); + chartQusj.on('click', function (params) { + that.echartsData.statefulInspectionName = '预案审核中' + that.echartsData.statefulInspectionToggle = false + }); } From 8037d3ce184f2eb9424dece6fae0015044c1c80a Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 2 Sep 2020 15:30:40 +0800 Subject: [PATCH 3/4] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E9=A2=84=E6=A1=88?= =?UTF-8?q?=E7=8A=B6=E6=80=81name=E9=A1=B5=E9=9D=A2=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../state/page-one/page-one.component.ts | 46 +++++++-------- .../page-two-name/page-two-name.component.ts | 58 ++++++++++++------- 2 files changed, 58 insertions(+), 46 deletions(-) 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 5a5710b..d4936b2 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 @@ -47,14 +47,12 @@ export class PageOneComponent implements OnInit { }, tooltip: { trigger: 'item', - formatter: (params)=>{ - //console.log(params) + formatter: (params)=>{ return this.biaogeTishi(params.name) - } , + } , backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', - borderRadius :'0' - + borderRadius :'0' }, legend: { orient: 'vertical', @@ -101,9 +99,7 @@ export class PageOneComponent implements OnInit { ] }; indexBzt.on('click', (params) => { - console.log(999) this.router.navigateByUrl('/statisticanalysis/statePageTwo_time'); - // this.router.navigate(["/statisticanalysis/statePageTwo_time"]) }); indexBzt.setOption(options); } @@ -125,24 +121,24 @@ export class PageOneComponent implements OnInit { shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' var jsonObj = JSON.parse(shuju); var res = '
'+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 + 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-two-name/page-two-name.component.ts b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts index 7f1e369..f318b3e 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 @@ -274,27 +274,12 @@ export class PageTwoNameComponent implements OnInit { }, 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 - } - + formatter: (params)=>{ + return this.tableTooltip(params.name) + } , + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0' }, legend: { orient: 'vertical', @@ -335,4 +320,35 @@ export class PageTwoNameComponent implements OnInit { } passPlanEchart.setOption(option); } + + tableTooltip(biaotou:string){ + var shuju='[{"name":"浦东支队","number":"156","zhanbi":"3%"},{"name":"黄埔支队","number":"144","zhanbi":"2.8%"},' + shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' + shuju+='{"name":"静安支队","number":"120","zhanbi":"1.3%"},{"name":"普陀支队","number":"100","zhanbi":"1.1%"},' + shuju+='{"name":"虹口支队","number":"95","zhanbi":"1%"},{"name":"杨浦支队","number":"90","zhanbi":"0.9%"},' + shuju+='{"name":"闵行支队","number":"88","zhanbi":"0.8%"},{"name":"宝山支队","number":"83","zhanbi":"0.7%"},' + shuju+='{"name":"徐汇支队","number":"133","zhanbi":"2.1%"},{"name":"长宁支队","number":"122","zhanbi":"1.6%"},' + shuju+='{"name":"嘉定支队","number":"78","zhanbi":"0.6%"},{"name":"松江支队","number":"75","zhanbi":"0.5%"},' + shuju+='{"name":"金山支队","number":"65","zhanbi":"0.4%"},{"name":"崇明支队","number":"55","zhanbi":"0.3%"}]' + var jsonObj = JSON.parse(shuju); + var res = '
'+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 + } } From 771b3f34f4a7647e5c0b095929cd8fe99a0ecac5 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 2 Sep 2020 16:22:59 +0800 Subject: [PATCH 4/4] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E7=8A=B6=E6=80=81?= =?UTF-8?q?=E5=88=86=E6=9E=90name=E9=A1=B5=E9=9D=A2=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../state/page-one/page-one.component.ts | 10 +- .../page-two-name/page-two-name.component.ts | 120 +++++++++++++++++- .../page-zhong-dui-details.component.ts | 35 +++++ 3 files changed, 157 insertions(+), 8 deletions(-) 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 d4936b2..1563f44 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 @@ -47,12 +47,14 @@ export class PageOneComponent implements OnInit { }, tooltip: { trigger: 'item', - formatter: (params)=>{ - return this.biaogeTishi(params.name) - } , + formatter: (params)=>{ + return this.biaogeTishi(params.name) + } , backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', - borderRadius :'0' + borderRadius :'0' + + }, legend: { orient: 'vertical', 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 f568815..646b135 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 @@ -78,6 +78,7 @@ export class PageTwoNameComponent implements OnInit { fontSize: 23 } }, + xAxis: { type: 'category', data: this.zhiNameData, @@ -86,6 +87,15 @@ export class PageTwoNameComponent implements OnInit { yAxis: { type: 'value' }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.tableTooltip2(params.name) + }, + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0' + }, series: [{ data: this.zhiNumData, type: 'bar', @@ -124,6 +134,15 @@ export class PageTwoNameComponent implements OnInit { yAxis: { type: 'value' }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.tableTooltip2(params.name) + }, + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0' + }, series: [{ data: this.zhiNumData, type: 'bar', @@ -163,6 +182,15 @@ export class PageTwoNameComponent implements OnInit { yAxis: { type: 'value' }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.tableTooltip2(params.name) + }, + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0' + }, series: [{ data: this.zhiNumData, type: 'bar', @@ -202,6 +230,15 @@ export class PageTwoNameComponent implements OnInit { yAxis: { type: 'value' }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.tableTooltip2(params.name) + }, + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0' + }, series: [{ data: this.zhiNumData, type: 'bar', @@ -241,6 +278,15 @@ export class PageTwoNameComponent implements OnInit { yAxis: { type: 'value' }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + return this.tableTooltip2(params.name) + }, + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0' + }, series: [{ data: this.zhiNumData, type: 'bar', @@ -258,6 +304,7 @@ export class PageTwoNameComponent implements OnInit { _this.data.statefulInspectionToggle = false }); } + //预案状态统计 planState(){ var shuju='[{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"}]'; @@ -274,12 +321,46 @@ export class PageTwoNameComponent implements OnInit { }, tooltip: { trigger: 'item', - formatter: (params)=>{ - return this.tableTooltip(params.name) - } , + formatter: (params)=>{ + return this.tableTooltip(params.name) + }, backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', - borderRadius :'0' + borderRadius :'0', + position: function (point, params, dom, rect, size) { + // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下 + // 提示框位置 + var x = 0; // x坐标位置 + var y = 0; // y坐标位置 + + // 当前鼠标位置 + var pointX = point[0]; + var pointY = point[1]; + + // 外层div大小 + // var viewWidth = size.viewSize[0]; + // var viewHeight = size.viewSize[1]; + + // 提示框大小 + var boxWidth = size.contentSize[0]; + var boxHeight = size.contentSize[1]; + + // boxWidth > pointX 说明鼠标左边放不下提示框 + if (boxWidth > pointX) { + x = 35; + } else { // 左边放的下 + x = pointX + 80; + } + + // boxHeight > pointY 说明鼠标上边放不下提示框 + if (boxHeight > pointY) { + y = 65; + } else { // 上边放得下 + y = pointY - boxHeight; + } + + return [pointX, pointY]; + } }, legend: { orient: 'vertical', @@ -351,4 +432,35 @@ export class PageTwoNameComponent implements OnInit { res+='' return res } + + tableTooltip2(biaotou:string){ + var shuju='[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄埔中队","number":"144","zhanbi":"2.8%"},' + shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},' + shuju+='{"name":"静安中队","number":"120","zhanbi":"1.3%"},{"name":"普陀中队","number":"100","zhanbi":"1.1%"},' + shuju+='{"name":"虹口中队","number":"95","zhanbi":"1%"},{"name":"杨浦中队","number":"90","zhanbi":"0.9%"},' + shuju+='{"name":"闵行中队","number":"88","zhanbi":"0.8%"},{"name":"宝山中队","number":"83","zhanbi":"0.7%"},' + shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},' + shuju+='{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},' + shuju+='{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]' + var jsonObj = JSON.parse(shuju); + var res = '
'+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-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 ff89e8b..3c1a42c 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 @@ -38,6 +38,16 @@ export class PageZhongDuiDetailsComponent implements OnInit { yAxis: { type: 'value' }, + tooltip: { + trigger: 'item', + formatter: (params)=>{ + console.log(666,params) + return this.tableTooltip(params) + }, + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0' + }, series: [{ data: this.zhongNumData, type: 'bar', @@ -50,4 +60,29 @@ export class PageZhongDuiDetailsComponent implements OnInit { detailPlanEchart.setOption(option); } + + tableTooltip(params:any){ + var data = [ + {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} + ] + var res = '
'+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 + } }