128 lines
4.3 KiB
128 lines
4.3 KiB
/* |
|
* @Descripttion: |
|
* @version: |
|
* @Author: sueRimn |
|
* @Date: 2020-09-02 16:22:58 |
|
* @LastEditors: sueRimn |
|
* @LastEditTime: 2020-09-10 14:23:36 |
|
*/ |
|
import { Component, OnInit } from '@angular/core'; |
|
import { ActivatedRoute } from '@angular/router'; |
|
import {EchartsDataService} from '../../echarts-data.service'; |
|
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
|
import { DateAdapter } from '@angular/material/core'; |
|
declare var echarts: any; |
|
|
|
@Component({ |
|
selector: 'app-delete-four', |
|
templateUrl: './delete-four.component.html', |
|
styleUrls: ['./delete-four.component.scss'] |
|
}) |
|
export class DeleteFourComponent implements OnInit { |
|
|
|
constructor(public route: ActivatedRoute,public data: EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter<any>) { } |
|
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] |
|
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] |
|
tiaoshiPao:any//气泡传入数据 |
|
level:string; |
|
ngOnInit(): void { |
|
this.tiaoshiPao=this.data.qipao(this.tiaoshiPao,this.zhongNumData,this.zhongNameData) |
|
this.route.queryParams.subscribe(param=>{ |
|
this.level=param.level |
|
//console.log(this.level) |
|
}); |
|
window.setTimeout(()=>{ |
|
this.detailEcharts(this.level) |
|
}) |
|
} |
|
//返回 |
|
goBack () { |
|
history.go(-1) |
|
this.data.statefulInspectionToggle = true |
|
} |
|
|
|
detailEcharts(level){ |
|
var detailPlanEchart = echarts.init(document.getElementById('detailBox'),'walden'); |
|
var option = { |
|
title: { |
|
text: level+'：总数(666)', |
|
left: "center", |
|
top:"0", |
|
textStyle: { |
|
fontSize: 30 |
|
} |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
data: this.zhongNameData, |
|
axisLabel:{ |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
} |
|
|
|
} |
|
// axisLabel: this.axisLabel |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
axisLabel:{ |
|
textStyle:{ |
|
fontSize :18, |
|
color:'#000000' |
|
} |
|
|
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
// console.log(666,params) |
|
return this.tableTooltip(params) |
|
}, |
|
position: this.data.tableTooltipNoShow2 |
|
}, |
|
series: [{ |
|
data: this.zhongNumData, |
|
type: 'bar', |
|
//showBackground: true, |
|
markPoint: { |
|
symbolSize:[65, 65], |
|
data: this.tiaoshiPao |
|
}, |
|
barWidth :'38', |
|
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 = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+params.name+'</span></div>' |
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px; color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >'; |
|
res+='<thead style="font-size:18px;"><tr>'; |
|
res+='<td style="text-align:center;width:30%;">名称</td>'; |
|
res+='<td style="text-align:center;width:30%;">数量</td>' |
|
res+='<td style="text-align:center;width:30%;">总占比</td>' |
|
res+='</tr></thead>' |
|
res+='<tbody>'; |
|
for(var i=0;i<data.length;i++){ |
|
res+='<tr>' |
|
res+='<td style="text-align:center;">'+data[i].name+'</td>' |
|
res+='<td style="text-align:center;">'+data[i].number+'</td>' |
|
res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>' |
|
} |
|
|
|
res+='</tbody>' |
|
// res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>' |
|
res+='</table></div></div>' |
|
return res |
|
} |
|
|
|
}
|
|
|