|
|
|
|
@ -15,19 +15,23 @@ declare var echarts: any;
|
|
|
|
|
}) |
|
|
|
|
export class PageTwoTimeComponent implements OnInit { |
|
|
|
|
|
|
|
|
|
constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { } |
|
|
|
|
constructor(private router: Router,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService,private activatedRoute: ActivatedRoute) { } |
|
|
|
|
|
|
|
|
|
@ViewChild('appEcharts')appEcharts :echartsComponent; //父组件中获得子组件的引用
|
|
|
|
|
@ViewChild('pageTwoName')pageTwoName :PageTwoNameComponent; //父组件中获得子组件的引用
|
|
|
|
|
@ViewChild('echartsComponent')echartsComponent :echartsComponent; //父组件中获得子组件的引用
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
this.activatedRoute.queryParams.subscribe(param=>{ |
|
|
|
|
this.type=param.type |
|
|
|
|
}); |
|
|
|
|
this.echartsData.statefulInspectionToggle = true |
|
|
|
|
this.dateInit() |
|
|
|
|
this.bianli() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
isQuery:boolean = true; //横纵向查询
|
|
|
|
|
|
|
|
|
|
type |
|
|
|
|
//shao
|
|
|
|
|
toggleTrue () {
|
|
|
|
|
this.isQuery = true |
|
|
|
|
@ -52,10 +56,16 @@ export class PageTwoTimeComponent implements OnInit {
|
|
|
|
|
changeTime (e) { |
|
|
|
|
let data = e.value |
|
|
|
|
this.appEcharts.changeTime(data) |
|
|
|
|
if(e.value=='month'){ |
|
|
|
|
this.echartsData.selectType=0 |
|
|
|
|
} |
|
|
|
|
else if(e.value=='year'){ |
|
|
|
|
this.echartsData.selectType=2 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//查询数据
|
|
|
|
|
years:any = [] |
|
|
|
|
years:any = [2020,2021] |
|
|
|
|
selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] |
|
|
|
|
tiaoshiPao:any |
|
|
|
|
datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200] |
|
|
|
|
@ -76,34 +86,23 @@ export class PageTwoTimeComponent implements OnInit {
|
|
|
|
|
dateInit () { |
|
|
|
|
let date = (new Date()).getFullYear() |
|
|
|
|
for (let i=date; i>=date-10;i--) { |
|
|
|
|
this.years.unshift(i) |
|
|
|
|
//this.years.unshift(i)
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
selectOneYear:any = (new Date()).getFullYear() //开始年份
|
|
|
|
|
selectTwoYear:any = (new Date()).getFullYear() //结束年份
|
|
|
|
|
selectStartMonth:any = 1 //开始月份
|
|
|
|
|
selectEndMonth:any = (new Date()).getMonth()+1 //结束月份
|
|
|
|
|
selectEndMonth:any = 12 //结束月份
|
|
|
|
|
//按月查询
|
|
|
|
|
monthSubmit (e) { |
|
|
|
|
if (e.selectTwoYear > e.selectOneYear) { |
|
|
|
|
if(e.selectEndMonth >= e.selectStartMonth) { |
|
|
|
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
|
|
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
|
|
|
//console.log(startTime)
|
|
|
|
|
//console.log(endTime)
|
|
|
|
|
} else if (e.selectTwoYear === e.selectOneYear) { |
|
|
|
|
if(e.selectEndMonth >= e.selectStartMonth) { |
|
|
|
|
let startTime = e.selectOneYear + '-' + e.selectStartMonth + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
|
|
|
let endTime = e.selectTwoYear + '-' + e.selectEndMonth + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
|
|
|
//console.log(startTime)
|
|
|
|
|
//console.log(endTime)
|
|
|
|
|
} else { |
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
config.duration = 3000 |
|
|
|
|
this.snackBar.open('请选择正确时间区段','确定',config); |
|
|
|
|
} |
|
|
|
|
}else { |
|
|
|
|
this.echartsData.selectStartMonth=e.selectStartMonth |
|
|
|
|
this.echartsData.selectEndMonth=e.selectEndMonth |
|
|
|
|
this.appEcharts.findYue() |
|
|
|
|
} else { |
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
config.duration = 3000 |
|
|
|
|
@ -113,15 +112,15 @@ export class PageTwoTimeComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
selectStartYear:any = (new Date()).getFullYear() //开始年份
|
|
|
|
|
selectStartYear:any = (new Date()).getFullYear()-1 //开始年份
|
|
|
|
|
selectEndYear:any = (new Date()).getFullYear() //结束年份
|
|
|
|
|
//按年查询
|
|
|
|
|
yearSubmit (e) { |
|
|
|
|
if (e.selectEndYear >= e.selectStartYear) { |
|
|
|
|
let startTime = e.selectStartYear + '-' + 1 + '-' + 1 + ' ' + 0 + ':' + 0 +':'+ 0 |
|
|
|
|
let endTime = e.selectEndYear + '-' + 12 + '-' + 31 + ' ' + 23 + ':' + 59 +':'+ 59 |
|
|
|
|
//console.log(startTime)
|
|
|
|
|
//console.log(endTime)
|
|
|
|
|
this.echartsData.selectOneYear=e.selectStartYear |
|
|
|
|
this.echartsData.selectTwoYear=e.selectEndYear |
|
|
|
|
} else { |
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
@ -143,11 +142,12 @@ export class echartsComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
constructor(private router: Router,private activatedRoute: ActivatedRoute,public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { } |
|
|
|
|
|
|
|
|
|
type |
|
|
|
|
tiaoshiPao:any |
|
|
|
|
datayuey=[270, 253, 244, 199, 189, 173, 160, 198, 200] |
|
|
|
|
datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] |
|
|
|
|
dataYearX = ['2019','2020'] |
|
|
|
|
dataYearY = [1078, 936] |
|
|
|
|
datayuey=[] |
|
|
|
|
datayuex=[] |
|
|
|
|
dataYearX = ['2020','2021'] |
|
|
|
|
dataYearY = ['0'] |
|
|
|
|
//气泡提示数据获取
|
|
|
|
|
bianli(){ |
|
|
|
|
var arrshuzu='['; |
|
|
|
|
@ -159,18 +159,30 @@ export class echartsComponent implements OnInit {
|
|
|
|
|
this.tiaoshiPao=JSON.parse(arrshuzu) |
|
|
|
|
} |
|
|
|
|
ngOnInit(): void { |
|
|
|
|
this.activatedRoute.queryParams.subscribe(param=>{ |
|
|
|
|
this.headtext=param.level |
|
|
|
|
this.type=param.type |
|
|
|
|
}); |
|
|
|
|
let paramdata={ |
|
|
|
|
//planStatus:this.type,
|
|
|
|
|
TrendType:this.echartsData.selectType |
|
|
|
|
} |
|
|
|
|
this.echartsData.getData(paramdata,`/api/StatisticsAnalysis`) |
|
|
|
|
window.setTimeout(()=>{ |
|
|
|
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) |
|
|
|
|
this.activatedRoute.queryParams.subscribe(param=>{ |
|
|
|
|
this.headtext=param.level |
|
|
|
|
});
|
|
|
|
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
|
|
|
//console.log(this.tabledata[0].companyStatistics.trendStatistics.added)
|
|
|
|
|
for(var i=0;i<this.tabledata[0].companyStatistics.trendStatistics.added.length;i++){ |
|
|
|
|
if(this.tabledata[0].companyStatistics.trendStatistics.added[i].month>=this.echartsData.selectStartMonth||this.tabledata[0].companyStatistics.trendStatistics.added[i].month<=this.echartsData.selectEndMonth){ |
|
|
|
|
this.datayuex.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].month) |
|
|
|
|
this.datayuey.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].count) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
|
|
|
|
|
//this.oneInit()
|
|
|
|
|
this.twoInit() |
|
|
|
|
/* this.threeInit() |
|
|
|
|
this.fourInit() |
|
|
|
|
this.fiveInit() |
|
|
|
|
this.sixInit() */ |
|
|
|
|
},0) |
|
|
|
|
},1000) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ngOnDestroy () { |
|
|
|
|
@ -185,110 +197,60 @@ export class echartsComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (e=='year') { |
|
|
|
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX) |
|
|
|
|
|
|
|
|
|
//this.oneInit(this.dataYearX,this.dataYearY)
|
|
|
|
|
this.twoInit(this.dataYearX,this.dataYearY) |
|
|
|
|
this.echartsData.selectType=2 |
|
|
|
|
let paramdata={ |
|
|
|
|
//planStatus:this.type,
|
|
|
|
|
TrendType:this.echartsData.selectType |
|
|
|
|
} |
|
|
|
|
this.echartsData.getData(paramdata,`/api/StatisticsAnalysis`) |
|
|
|
|
window.setTimeout(()=>{ |
|
|
|
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
|
|
|
console.log(this.tabledata[0].companyStatistics.trendStatistics.added) |
|
|
|
|
this.dataYearY.push(this.tabledata[0].companyStatistics.trendStatistics.added[0].count) |
|
|
|
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
|
|
|
|
|
//this.oneInit()
|
|
|
|
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX) |
|
|
|
|
this.twoInit(this.dataYearX,this.dataYearY) |
|
|
|
|
},1000) |
|
|
|
|
//this.twoInit(this.dataYearX,this.dataYearY)
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex) |
|
|
|
|
//this.oneInit()
|
|
|
|
|
this.echartsData.selectType=0 |
|
|
|
|
this.twoInit() |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
oneExample:any; |
|
|
|
|
oneInit (X=this.datayuex, Y=this.datayuey) { |
|
|
|
|
this.oneExample = echarts.init(document.getElementById('one'),'walden'); |
|
|
|
|
var option = { |
|
|
|
|
grid: { |
|
|
|
|
top: 50, |
|
|
|
|
left:50, |
|
|
|
|
right: 20, |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.echartsData.tableTooltip(this.echartsData.planData,params[0].name) |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
// 标题
|
|
|
|
|
title: { |
|
|
|
|
text: '预案统计状态'+'：总数（102）', |
|
|
|
|
top: -4, |
|
|
|
|
left: 'center', |
|
|
|
|
subtext:'今年', |
|
|
|
|
//副标题文本样式
|
|
|
|
|
subtextStyle:{ |
|
|
|
|
color:'#999', |
|
|
|
|
fontWeight:'bold', |
|
|
|
|
}, |
|
|
|
|
textStyle:{ |
|
|
|
|
//文字颜色
|
|
|
|
|
color:'#000', |
|
|
|
|
fontSize: 22, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// x轴
|
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: X, |
|
|
|
|
boundaryGap: true, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: "#000", //刻度线标签颜色
|
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
splitLine: {//分割线配置
|
|
|
|
|
show:true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#999', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// y轴
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name: '个', |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
color: "#000" //刻度线标签颜色
|
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
//按月查询
|
|
|
|
|
findYue(){ |
|
|
|
|
this.twoExample.clear() |
|
|
|
|
this.datayuex=[] |
|
|
|
|
this.datayuey=[] |
|
|
|
|
let paramdata={ |
|
|
|
|
planStatus:this.type, |
|
|
|
|
TrendType:this.echartsData.selectType |
|
|
|
|
} |
|
|
|
|
this.echartsData.getData(paramdata,`/api/StatisticsAnalysis`) |
|
|
|
|
window.setTimeout(()=>{ |
|
|
|
|
this.tabledata=JSON.parse(JSON.stringify(this.echartsData.allDate)) |
|
|
|
|
//console.log(this.tabledata[0].companyStatistics.trendStatistics.added)
|
|
|
|
|
for(var i=0;i<this.tabledata[0].companyStatistics.trendStatistics.added.length;i++){ |
|
|
|
|
if(this.tabledata[0].companyStatistics.trendStatistics.added[i].month>=this.echartsData.selectStartMonth&&this.tabledata[0].companyStatistics.trendStatistics.added[i].month<=this.echartsData.selectEndMonth){ |
|
|
|
|
this.datayuex.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].month) |
|
|
|
|
this.datayuey.push(this.tabledata[0].companyStatistics.trendStatistics.added[i].count) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 数据
|
|
|
|
|
series: [{ |
|
|
|
|
name: '单位预案编制数量', |
|
|
|
|
type: 'line', |
|
|
|
|
markPoint: { |
|
|
|
|
symbolSize:[65, 65], |
|
|
|
|
data: this.tiaoshiPao |
|
|
|
|
}, |
|
|
|
|
data: Y, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
this.oneExample.setOption(option); |
|
|
|
|
this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
|
|
|
|
|
this.twoInit(this.datayuex,this.datayuey) |
|
|
|
|
},1000) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
headtext |
|
|
|
|
twoExample:any; |
|
|
|
|
tabledata |
|
|
|
|
twoInit (X=this.datayuex, Y=this.datayuey) { |
|
|
|
|
let that = this |
|
|
|
|
this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp'); |
|
|
|
|
@ -377,112 +339,17 @@ export class echartsComponent implements OnInit {
|
|
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
|
|
if (this.twoExample.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.twoExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
if(this.echartsData.selectType==2){ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text,'type':this.type}}); |
|
|
|
|
}else{ |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
threeExample:any; |
|
|
|
|
threeInit (X=this.datayuex, Y=this.datayuey) { |
|
|
|
|
let that = this |
|
|
|
|
this.threeExample = echarts.init(document.getElementById('three'), 'skinUpp'); |
|
|
|
|
var option = { |
|
|
|
|
grid: { |
|
|
|
|
top: 50, |
|
|
|
|
left:50, |
|
|
|
|
right: 20, |
|
|
|
|
}, |
|
|
|
|
// 标题
|
|
|
|
|
title: { |
|
|
|
|
text: '预案审核通过'+'：总数（1024）', |
|
|
|
|
top: -4, |
|
|
|
|
left: 'center', |
|
|
|
|
bottom: 100, |
|
|
|
|
textStyle:{ |
|
|
|
|
//文字颜色
|
|
|
|
|
color:'#000', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//提示框
|
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核通过') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// x轴
|
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: X, |
|
|
|
|
boundaryGap: true, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
color: "#000", //刻度线标签颜色
|
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
splitLine: {//分割线配置
|
|
|
|
|
show:true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#999', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// y轴
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name: '个', |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
color: "#000" //刻度线标签颜色
|
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
if(this.echartsData.level=='0'||this.echartsData.level=='1'||this.echartsData.level=='2'){ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':this.headtext,'type':this.type}}); |
|
|
|
|
} else if(this.echartsData.level=='3'){ |
|
|
|
|
//中队跳转
|
|
|
|
|
this.router.navigate(['/statisticanalysis/CompangInfo'],{queryParams:{'name':params.name,'type':1}}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 数据
|
|
|
|
|
series: [{ |
|
|
|
|
name: '单位预案编制数量', |
|
|
|
|
type: 'line', |
|
|
|
|
markPoint: { |
|
|
|
|
|
|
|
|
|
symbolSize:[65, 65], |
|
|
|
|
data: this.tiaoshiPao |
|
|
|
|
}, |
|
|
|
|
data: Y, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
this.threeExample.setOption(option); |
|
|
|
|
this.threeExample.getZr().on('click', (params) => { |
|
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
|
|
if (this.threeExample.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.threeExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
}else{ |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
@ -490,312 +357,8 @@ export class echartsComponent implements OnInit {
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
fourExample:any; |
|
|
|
|
fourInit (X=this.datayuex, Y=this.datayuey) { |
|
|
|
|
let that = this |
|
|
|
|
this.fourExample = echarts.init(document.getElementById('four'), 'skinUpp'); |
|
|
|
|
var option = { |
|
|
|
|
grid: { |
|
|
|
|
top: 50, |
|
|
|
|
left:50, |
|
|
|
|
right: 20, |
|
|
|
|
}, |
|
|
|
|
// 标题
|
|
|
|
|
title: { |
|
|
|
|
text: '预案编制'+'：总数（1024）', |
|
|
|
|
top: -4, |
|
|
|
|
left: 'center', |
|
|
|
|
bottom: 100, |
|
|
|
|
textStyle:{ |
|
|
|
|
//文字颜色
|
|
|
|
|
color:'#000', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//提示框
|
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
|
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案编制') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// x轴
|
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: X, |
|
|
|
|
boundaryGap: true, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
color: "#000", //刻度线标签颜色
|
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
splitLine: {//分割线配置
|
|
|
|
|
show:true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#999', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// y轴
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name: '个', |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
color: "#000" //刻度线标签颜色
|
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 数据
|
|
|
|
|
series: [{ |
|
|
|
|
name: '单位预案编制数量', |
|
|
|
|
type: 'line', |
|
|
|
|
markPoint: { |
|
|
|
|
|
|
|
|
|
symbolSize:[65, 65], |
|
|
|
|
data: this.tiaoshiPao |
|
|
|
|
}, |
|
|
|
|
data: Y, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
this.fourExample.setOption(option); |
|
|
|
|
this.fourExample.getZr().on('click', (params) => { |
|
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
|
|
if (this.fourExample.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.fourExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
}else{ |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
fiveExample:any; |
|
|
|
|
fiveInit (X=this.datayuex, Y=this.datayuey) { |
|
|
|
|
let that = this |
|
|
|
|
this.fiveExample = echarts.init(document.getElementById('five'), 'skinUpp'); |
|
|
|
|
var option = { |
|
|
|
|
grid: { |
|
|
|
|
top: 50, |
|
|
|
|
left:50, |
|
|
|
|
right: 20, |
|
|
|
|
bottom: 20, |
|
|
|
|
}, |
|
|
|
|
// 标题
|
|
|
|
|
title: { |
|
|
|
|
text: '预案审核退回'+'：总数（1024）', |
|
|
|
|
top: -4, |
|
|
|
|
left: 'center', |
|
|
|
|
bottom: 100, |
|
|
|
|
textStyle:{ |
|
|
|
|
//文字颜色
|
|
|
|
|
color:'#000', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//提示框
|
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
|
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核退回') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// x轴
|
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: X, |
|
|
|
|
boundaryGap: true, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
color: "#000", //刻度线标签颜色
|
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
splitLine: {//分割线配置
|
|
|
|
|
show:true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#999', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// y轴
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name: '个', |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
color: "#000" //刻度线标签颜色
|
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 数据
|
|
|
|
|
series: [{ |
|
|
|
|
name: '单位预案编制数量', |
|
|
|
|
type: 'line', |
|
|
|
|
markPoint: { |
|
|
|
|
|
|
|
|
|
symbolSize:[65, 65], |
|
|
|
|
data: this.tiaoshiPao |
|
|
|
|
}, |
|
|
|
|
data: Y, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
this.fiveExample.setOption(option); |
|
|
|
|
this.fiveExample.getZr().on('click', (params) => { |
|
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
|
|
if (this.fiveExample.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.fiveExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
}else{ |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
sixExample:any; |
|
|
|
|
sixInit (X=this.datayuex, Y=this.datayuey) { |
|
|
|
|
let that = this |
|
|
|
|
this.sixExample = echarts.init(document.getElementById('six'), 'skinUpp'); |
|
|
|
|
var option = { |
|
|
|
|
grid: { |
|
|
|
|
top: 50, |
|
|
|
|
left:50, |
|
|
|
|
right: 20, |
|
|
|
|
bottom: 20, |
|
|
|
|
}, |
|
|
|
|
// 标题
|
|
|
|
|
title: { |
|
|
|
|
text: '预案审核中'+'：总数（1024）', |
|
|
|
|
top: -4, |
|
|
|
|
left: 'center', |
|
|
|
|
textStyle:{ |
|
|
|
|
//文字颜色
|
|
|
|
|
color:'#000', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//提示框
|
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
|
|
|
|
|
formatter: (params)=>{ |
|
|
|
|
return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核中') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// x轴
|
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: X, |
|
|
|
|
boundaryGap: true, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
color: "#000", //刻度线标签颜色
|
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
splitLine: {//分割线配置
|
|
|
|
|
show:true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#999', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// y轴
|
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name: '个', |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle:{ |
|
|
|
|
fontSize :15, |
|
|
|
|
color:'#000000' |
|
|
|
|
}, |
|
|
|
|
color: "#000" //刻度线标签颜色
|
|
|
|
|
}, |
|
|
|
|
//设置坐标轴字体颜色和宽度
|
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#000", |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 数据
|
|
|
|
|
series: [{ |
|
|
|
|
name: '单位预案编制数量', |
|
|
|
|
type: 'line', |
|
|
|
|
markPoint: { |
|
|
|
|
|
|
|
|
|
symbolSize:[65, 65], |
|
|
|
|
data: this.tiaoshiPao |
|
|
|
|
}, |
|
|
|
|
data: Y, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
this.sixExample.setOption(option); |
|
|
|
|
this.sixExample.getZr().on('click', (params) => { |
|
|
|
|
const pointInPixel= [params.offsetX, params.offsetY]; |
|
|
|
|
if (this.sixExample.containPixel('grid',pointInPixel)) { |
|
|
|
|
let xIndex=this.sixExample.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; |
|
|
|
|
if(option.xAxis.data[xIndex]=='2019'||option.xAxis.data[xIndex]=='2020'){ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThereYearComponent'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
}else{ |
|
|
|
|
/*事件处理代码书写位置*/ |
|
|
|
|
this.router.navigate(['/statisticanalysis/stataPageThere'],{queryParams:{'level':option.xAxis.data[xIndex],'headtext':option.title.text}}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
threeExample:any; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
