import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
import { EchartsDataService } from '../../echarts-data.service';
declare var echarts: any;
@Component({
selector: 'app-delete-there-line-details',
templateUrl: './delete-there-line-details.component.html',
styleUrls: ['./delete-there-line-details.component.scss']
})
export class DeleteThereLineDetailsComponent implements OnInit {
constructor(private router: Router,public dialog: MatDialog,public snackBar: MatSnackBar,private serviceData: EchartsDataService,public route: ActivatedRoute) { }
year:String
buildingTypeName:String
level:String
setTimeoutObj//延时器需要清除
ngOnInit(): void {
this.dateInit ()
this.bianli()
this.route.queryParams.subscribe(params => {
this.year = params['level'];
this.buildingTypeName = params['headtext'];
});
this.setTimeoutObj = window.setTimeout(()=>{
this.detailEcharts()
})
}
ngOnDestroy(){
window.clearTimeout(this.setTimeoutObj);
this.detailPlanEchart.clear()
this.detailPlanEchart.dispose()
}
selectType:string = 'month'; //选择当前的 查询类型 按月/年
//查询数据
years:any = []
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
//日期初始化
dateInit () {
let date = (new Date()).getFullYear()
for (let i=date; i>=date-10;i--) {
this.years.unshift(i)
}
}
selectOneYear:any = (new Date()).getFullYear() //开始年份
selectStartMonth:any = 1 //开始月份
Submit (e) {
}
selectStartYear:any = (new Date()).getFullYear() //开始年份
topTextlabel = {
show: true, // 开启显示
position: 'top', // 在上方显示
distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
verticalAlign: 'middle',
textStyle: { // 数值样式
color: 'black',
fontSize: 12
}
}//柱状图数值顶部显示
zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"]
zhongNumData = [200,190,180,170,160,150,140,130,120,110,100]
zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"]
zhiNumData = [300,290,280,270,260,250,240,230,220,210,200]
tiaoshiPao:any
//气泡提示数据获取
bianli(){
var arrshuzu='[';
for(var i=0;i<this.dateNum.length;i++){
arrshuzu+='{"value":'+this.dateNum[i]+',"coord":['+i+','+this.dateNum[i]+'],"name":'+'"'+this.date[i]+'"'+'},'
}
arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
arrshuzu+=']'
this.tiaoshiPao=JSON.parse(arrshuzu)
console.log(this.tiaoshiPao)
//return tishiPao
}
//返回
goBack () {
history.go(-1)
//this.echartsData.statefulInspectionToggle = true
}
detailPlanEchart
option
date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200]
detailEcharts(){
this.detailPlanEchart = echarts.init(document.getElementById('barEchart'), 'skinUpp');
this.option = {
grid: {
top: 50,
left:40,
right: 20,
//bottom: 20,
},
// 标题
title: {
text: this.buildingTypeName + '(' + this.year + ')',
top: -4,
left: 'center',
textStyle:{
//文字颜色
color:'#000',
fontSize: 30
}
},
//提示框
tooltip: {
trigger: 'axis',
formatter: (params)=>{
if(params[0].seriesName == "year"){
return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name)
}else{
return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name)
}
},
position:this.serviceData.tableTooltipNoShow2
},
// x轴
xAxis: {
type: 'category',
data: this.date,
axisLabel: {
color: "#000", //刻度线标签颜色
textStyle:{
fontSize :18,
color:'#000000'
}
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
},
},
splitLine: {//分割线配置
show:true,
lineStyle: {
color: '#999',
}
}
},
// y轴
yAxis: {
type: 'value',
name: '个',
axisLabel: {
//color: "#000", //刻度线标签颜色
textStyle:{
fontSize :18,
color:'#000000'
}
},
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#000",
}
}
},
// 数据
series: [{
name: 'xxx',
type: 'line',
markPoint: {
symbolSize:[65, 65],
data: this.tiaoshiPao
},
data: this.dateNum,
}
],
};
this.detailPlanEchart.setOption(this.option);
this.detailPlanEchart.getZr().on('click',params=>{
const pointInPixel= [params.offsetX, params.offsetY];
if (this.detailPlanEchart.containPixel('grid',pointInPixel)) {
let xIndex=this.detailPlanEchart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/
this.router.navigate(['/statisticanalysis/delete_one/delete_there'],{queryParams:{'level':this.option.xAxis.data[xIndex],'headtext':this.buildingTypeName}});
}
});
}
//返回按钮
backBtn(){
window.history.go(-1)
}
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
}
}