diff --git a/src/app/statistic-analysis/echarts-data.service.ts b/src/app/statistic-analysis/echarts-data.service.ts index 3fe81f8..2627003 100644 --- a/src/app/statistic-analysis/echarts-data.service.ts +++ b/src/app/statistic-analysis/echarts-data.service.ts @@ -18,6 +18,7 @@ export class EchartsDataService { + //echarts 悬停 显示表格假数据 //支队提示框 tableDataZhi = [ {name:"浦东支队",number:"156",zhanbi:"3%"}, @@ -94,6 +95,16 @@ export class EchartsDataService { {name:"十二月",number:"122",zhanbi:"1.6%"}, {name:"总计",number:"984",zhanbi:"20%"} ] + //预案提示框 + planData = [ + {name:"预案新增",number:"156",zhanbi:"19%"}, + {name:"预案审核通过",number:"144",zhanbi:"21%"}, + {name:"预案编制",number:"133",zhanbi:"20%"}, + {name:"预案审核退回",number:"122",zhanbi:"17%"}, + {name:"预案审核中",number:"120",zhanbi:"23%"}, + {name:"总计",number:"561",zhanbi:"100%"}, + ] + //提示框表格 tableTooltip(dataArr,title:string){ let data = dataArr @@ -113,10 +124,10 @@ export class EchartsDataService { } res+='' - // res+='总计135619%' res+='' return res } + //如果提示框显示不开 tableTooltipNoShow(point, params, dom, rect, size) { // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下 @@ -153,10 +164,7 @@ export class EchartsDataService { return [pointX, pointY]; } - - //用法： - // tooltip: { // trigger: 'axis', // backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 @@ -167,4 +175,7 @@ export class EchartsDataService { // }, // position:this.serviceData.tableTooltipNoShow // } + + + } diff --git a/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts b/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts index a3d8ed9..c57aa84 100644 --- a/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts +++ b/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts @@ -11,7 +11,7 @@ declare var echarts: any; }) export class ScheduledUpdatesComponent implements OnInit { - constructor(private router: Router) { } + constructor(private router: Router,public echartsData:EchartsDataService) { } ngOnInit(): void { window.setTimeout(()=>{ @@ -19,9 +19,15 @@ export class ScheduledUpdatesComponent implements OnInit { }) } + ngOnDestroy () { + this.example.clear() + this.example.dispose() + } + + example:any; /* 首页饼状图 */ initCharts(){ - var indexBzt = echarts.init(document.getElementById('center')); + this.example= echarts.init(document.getElementById('center')); var options={ title: { text: '计划更新统计（7100家）', @@ -33,12 +39,13 @@ export class ScheduledUpdatesComponent implements OnInit { }, tooltip: { trigger: 'item', - formatter: (params)=>{ - // return this.biaogeTishi(params.name) - } , backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', - borderRadius :'0' + borderRadius :'0', + formatter: (params)=>{ + return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params.name) + }, + position:this.echartsData.tableTooltipNoShow }, legend: { orient: 'vertical', @@ -78,8 +85,8 @@ export class ScheduledUpdatesComponent implements OnInit { }] }; - indexBzt.setOption(options); - indexBzt.on('click', (params) => { + this.example.setOption(options); + this.example.on('click', (params) => { this.router.navigateByUrl('/statisticanalysis/scheduledUpdates/PublicEcharts'); }); } @@ -98,7 +105,7 @@ export class publicEchartsComponent implements OnInit { constructor(private router: Router,public echartsData:EchartsDataService,public dialog: MatDialog,) { } ngOnInit(): void { - + this.echartsData.scheduledUpdatesToggle = true } isToggle:boolean = true; // 已核查/未核查 @@ -149,8 +156,10 @@ export class verifiedComponent implements OnInit { } ngOnDestroy () { + this.oneEcharts.dispose() this.oneEcharts.clear() this.items.forEach((element,index) => { + element.echart.dispose() element.echart.clear() }); } @@ -179,6 +188,13 @@ export class verifiedComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name) + }, + position:this.echartsData.tableTooltipNoShow }, // x轴 xAxis: { @@ -363,6 +379,7 @@ export class notVerifiedComponent implements OnInit { } ngOnDestroy () { + this.oneEcharts.dispose() this.oneEcharts.clear() } @@ -382,9 +399,13 @@ export class notVerifiedComponent implements OnInit { }, tooltip: { trigger: 'axis', - axisPointer: { - type: 'shadow' - } + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'未核查') + }, + position:this.echartsData.tableTooltipNoShow }, legend: { data: ['剩余未核查','总数'], @@ -470,8 +491,14 @@ export class detailedInformationComponent implements OnInit { },0) } + ngOnDestroy () { + this.example.dispose() + this.example.clear() + } + + example:any; oneInit () { - let echart = echarts.init(document.getElementById('center'), 'skinUpp'); + this.example = echarts.init(document.getElementById('center'), 'skinUpp'); if (this.echartsData.scheduledUpdatesType ===0) { //已核查 var option = { title: { @@ -560,7 +587,7 @@ export class detailedInformationComponent implements OnInit { }, ] }; - echart.setOption(option); + this.example.setOption(option); } else { //未核查 var options = { title: { @@ -631,7 +658,7 @@ export class detailedInformationComponent implements OnInit { }, ] }; - echart.setOption(options); + this.example.setOption(options); } } 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 1f875e2..8426b44 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 @@ -20,6 +20,7 @@ export class PageTwoTimeComponent implements OnInit { @ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用 ngOnInit(): void { + this.echartsData.statefulInspectionToggle = true this.dateInit() } @@ -129,11 +130,25 @@ export class echartsComponent implements OnInit { this.sixInit() },0) } + + ngOnDestroy () { + this.oneExample.clear() + this.oneExample.dispose() + this.twoExample.clear() + this.twoExample.dispose() + this.threeExample.clear() + this.threeExample.dispose() + this.fourExample.clear() + this.fourExample.dispose() + this.fiveExample.clear() + this.fiveExample.dispose() + this.sixExample.clear() + this.sixExample.dispose() + } - - + oneExample:any; oneInit () { - var chartQusj = echarts.init(document.getElementById('one'), 'skinUpp'); + this.oneExample = echarts.init(document.getElementById('one'), 'skinUpp'); var option = { grid: { top: 50, @@ -141,6 +156,15 @@ export class echartsComponent implements OnInit { right: 20, bottom: 20, }, + tooltip: { + trigger: 'axis', + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + return this.echartsData.tableTooltip(this.echartsData.planData,params[0].name) + }, + }, // 标题 title: { text: '预案统计状态', @@ -158,10 +182,6 @@ export class echartsComponent implements OnInit { fontSize: 22, } }, - //提示框 - tooltip: { - trigger: 'axis', - }, // x轴 xAxis: { type: 'category', @@ -205,12 +225,13 @@ export class echartsComponent implements OnInit { } ], }; - chartQusj.setOption(option); + this.oneExample.setOption(option); } + twoExample:any; twoInit () { let that = this - var chartQusj = echarts.init(document.getElementById('two'), 'skinUpp'); + this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp'); var option = { grid: { top: 50, @@ -228,9 +249,14 @@ export class echartsComponent implements OnInit { color:'#000', } }, - //提示框 tooltip: { trigger: 'axis', + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增') + } }, // x轴 xAxis: { @@ -275,16 +301,17 @@ export class echartsComponent implements OnInit { } ], }; - chartQusj.setOption(option); - chartQusj.on('click', function (params) { + this.twoExample.setOption(option); + this.twoExample.on('click', function (params) { that.echartsData.statefulInspectionName = '预案新增' that.echartsData.statefulInspectionToggle = false }); } + threeExample:any; threeInit () { let that = this - var chartQusj = echarts.init(document.getElementById('three'), 'skinUpp'); + this.threeExample = echarts.init(document.getElementById('three'), 'skinUpp'); var option = { grid: { top: 50, @@ -305,6 +332,12 @@ export class echartsComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核通过') + } }, // x轴 xAxis: { @@ -349,16 +382,17 @@ export class echartsComponent implements OnInit { } ], }; - chartQusj.setOption(option); - chartQusj.on('click', function (params) { + this.threeExample.setOption(option); + this.threeExample.on('click', function (params) { that.echartsData.statefulInspectionName = '预案审核通过' that.echartsData.statefulInspectionToggle = false }); } + fourExample:any; fourInit () { let that = this - var chartQusj = echarts.init(document.getElementById('four'), 'skinUpp'); + this.fourExample = echarts.init(document.getElementById('four'), 'skinUpp'); var option = { grid: { top: 50, @@ -379,6 +413,12 @@ export class echartsComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案编制') + } }, // x轴 xAxis: { @@ -423,16 +463,17 @@ export class echartsComponent implements OnInit { } ], }; - chartQusj.setOption(option); - chartQusj.on('click', function (params) { + this.fourExample.setOption(option); + this.fourExample.on('click', function (params) { that.echartsData.statefulInspectionName = '预案编制' that.echartsData.statefulInspectionToggle = false }); } + fiveExample:any; fiveInit () { let that = this - var chartQusj = echarts.init(document.getElementById('five'), 'skinUpp'); + this.fiveExample = echarts.init(document.getElementById('five'), 'skinUpp'); var option = { grid: { top: 50, @@ -453,6 +494,12 @@ export class echartsComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核退回') + } }, // x轴 xAxis: { @@ -497,16 +544,17 @@ export class echartsComponent implements OnInit { } ], }; - chartQusj.setOption(option); - chartQusj.on('click', function (params) { + this.fiveExample.setOption(option); + this.fiveExample.on('click', function (params) { that.echartsData.statefulInspectionName = '预案审核退回' that.echartsData.statefulInspectionToggle = false }); } + sixExample:any; sixInit () { let that = this - var chartQusj = echarts.init(document.getElementById('six'), 'skinUpp'); + this.sixExample = echarts.init(document.getElementById('six'), 'skinUpp'); var option = { grid: { top: 50, @@ -527,6 +575,12 @@ export class echartsComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', + backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + borderWidth:'1', + borderRadius :'0', + formatter: (params)=>{ + return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核中') + } }, // x轴 xAxis: { @@ -571,8 +625,8 @@ export class echartsComponent implements OnInit { } ], }; - chartQusj.setOption(option); - chartQusj.on('click', function (params) { + this.sixExample.setOption(option); + this.sixExample.on('click', function (params) { that.echartsData.statefulInspectionName = '预案审核中' that.echartsData.statefulInspectionToggle = false });