You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
485 lines
17 KiB
485 lines
17 KiB
import { Component, OnInit, ViewChild } from '@angular/core'; |
|
import { Router,ActivatedRoute } from '@angular/router' |
|
import { PageZhongDuiDetailsComponent } from '../page-zhong-dui-details/page-zhong-dui-details.component'; |
|
import {EchartsDataService} from '../../echarts-data.service' |
|
declare var echarts: any; |
|
@Component({ |
|
selector: 'app-page-two-name', |
|
templateUrl: './page-two-name.component.html', |
|
styleUrls: ['./page-two-name.component.scss'] |
|
}) |
|
export class PageTwoNameComponent implements OnInit { |
|
|
|
constructor(private router:Router,private route:ActivatedRoute,public data:EchartsDataService) { } |
|
|
|
@ViewChild('zhongDuiChild') zhongDuiChild:PageZhongDuiDetailsComponent; //父组件中获得子组件的引用 |
|
|
|
ngOnInit(): void { |
|
setTimeout(() => { |
|
this.planState() |
|
this.planAdd() |
|
this.passPlanEchart() |
|
this.planMake() |
|
this.planBack() |
|
this.planAudit() |
|
}, 0); |
|
} |
|
|
|
ngOnDestroy(): void { |
|
this.addEchart.clear() |
|
this.addEchart.dispose() |
|
|
|
this.passPlanEchartObj.clear() |
|
this.passPlanEchartObj.dispose() |
|
|
|
this.passMakeEchart.clear() |
|
this.passMakeEchart.dispose() |
|
|
|
this.passBackEchart.clear() |
|
this.passBackEchart.dispose() |
|
|
|
this.planAuditEchart.clear() |
|
this.planAuditEchart.dispose() |
|
|
|
this.topEchart.clear() |
|
this.topEchart.dispose() |
|
|
|
} |
|
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两个字换行 |
|
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] |
|
|
|
addEchart |
|
//预案新增统计 |
|
planAdd () { |
|
let _this = this |
|
this.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' |
|
}, |
|
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', |
|
showBackground: true, |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
barWidth :'28', |
|
label: this.topTextlabel |
|
}] |
|
}; |
|
this.addEchart.setOption(option); |
|
this.addEchart.on('click', function (params) { |
|
_this.data.statefulInspectionName = '预案新增' |
|
_this.data.statefulInspectionToggle = false |
|
}); |
|
} |
|
passPlanEchartObj |
|
//预案审核通过 |
|
passPlanEchart (){ |
|
let _this = this |
|
this.passPlanEchartObj = 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' |
|
}, |
|
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', |
|
showBackground: true, |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
barWidth :'28', |
|
label: this.topTextlabel |
|
}] |
|
}; |
|
this.passPlanEchartObj.setOption(option); |
|
this.passPlanEchartObj.on('click', function (params) { |
|
_this.data.statefulInspectionName = '预案审核通过' |
|
_this.data.statefulInspectionToggle = false |
|
}); |
|
} |
|
passMakeEchart |
|
//预案编制 |
|
planMake (){ |
|
let _this = this |
|
this.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' |
|
}, |
|
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', |
|
showBackground: true, |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
barWidth :'28', |
|
label: this.topTextlabel |
|
}] |
|
}; |
|
this.passMakeEchart.setOption(option); |
|
this.passMakeEchart.on('click', function (params) { |
|
_this.data.statefulInspectionName = '预案编制' |
|
_this.data.statefulInspectionToggle = false |
|
}); |
|
} |
|
passBackEchart |
|
//预案审核退回 |
|
planBack (){ |
|
let _this = this |
|
this.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' |
|
}, |
|
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', |
|
showBackground: true, |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
barWidth :'28', |
|
label: this.topTextlabel |
|
}] |
|
}; |
|
this.passBackEchart.setOption(option); |
|
this.passBackEchart.on('click', function (params) { |
|
_this.data.statefulInspectionName = '预案审核退回' |
|
_this.data.statefulInspectionToggle = false |
|
}); |
|
} |
|
planAuditEchart |
|
//预案审核中 |
|
planAudit (){ |
|
let _this = this |
|
this.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' |
|
}, |
|
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', |
|
showBackground: true, |
|
backgroundStyle: { |
|
color: 'rgba(220, 220, 220, 0.8)' |
|
}, |
|
barWidth :'28', |
|
label: this.topTextlabel |
|
}] |
|
}; |
|
this.planAuditEchart.setOption(option); |
|
this.planAuditEchart.on('click', function (params) { |
|
_this.data.statefulInspectionName = '预案审核中' |
|
_this.data.statefulInspectionToggle = false |
|
}); |
|
} |
|
topEchart |
|
//预案状态统计 |
|
planState(){ |
|
this.topEchart = echarts.init(document.getElementById('pie')); |
|
var option = { |
|
title: { |
|
text: '预案状态统计（7005份）', |
|
left: 'center', |
|
top: "11%", |
|
textStyle: { |
|
fontSize: 23 |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: (params)=>{ |
|
return this.tableTooltip(params.name) |
|
}, |
|
backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 |
|
borderWidth:'1', |
|
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', |
|
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)' |
|
} |
|
} |
|
} |
|
] |
|
} |
|
this.topEchart.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 = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>' |
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
|
res+='<thead><tr>'; |
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
|
res+='</tr></thead>' |
|
res+='<tbody>'; |
|
for(var i=0;i<jsonObj.length;i++){ |
|
res+='<tr>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[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 |
|
} |
|
|
|
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 = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#000000;font-size:30px;text-align: center;display:block;">'+biaotou+'</span></div>' |
|
res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >'; |
|
res+='<thead><tr>'; |
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>'; |
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>' |
|
res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>' |
|
res+='</tr></thead>' |
|
res+='<tbody>'; |
|
for(var i=0;i<jsonObj.length;i++){ |
|
res+='<tr>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>' |
|
res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[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 |
|
} |
|
}
|
|
|