fixd:部门报告加筛选,下面的柱状图更改颜色及小数位显示

This commit is contained in:
shijing 2023-08-14 08:54:22 +08:00
parent 1682282e19
commit 175ece28a2
2 changed files with 81 additions and 48 deletions

View File

@ -304,7 +304,7 @@
lineChart3:null, lineChart3:null,
lineChart4:null, lineChart4:null,
barAnalyse:null, barAnalyse:null,
xAxisDatas:['重大事故','报告/证书合格率(%)','报告/证书及时率(%)','能力验证满意率(%)','客户投诉处理满意率(%)'], xAxisDatas:['报告/证书合格率(%)','报告/证书及时率(%)','能力验证满意率(%)','客户投诉处理满意率(%)'],
xAxisData:["1-2月","3-4月","5-6月","7-8月","9-10月","11-12月"], xAxisData:["1-2月","3-4月","5-6月","7-8月","9-10月","11-12月"],
bar1Data:[], bar1Data:[],
bar2Data:[], bar2Data:[],
@ -766,6 +766,33 @@
} }
}, },
getAnalyseData(){ getAnalyseData(){
function tofixed1(item){
let item0=item+'',item1;
if(item!==null){
if(item0.indexOf('.')>-1){
item1 = item.toFixed(1)
return item1
}else{
item1 = item+'.0'
return item1
}
}else{
return ''
}
}
function tofixed2(item){
let item0=item+'';
if(item!==null){
if(item0.indexOf('.')>-1){
let item1 = item.toFixed(2)
return item1
}else{
return item
}
}else{
return ''
}
}
let that = this; let that = this;
let form = {}; let form = {};
form.year = this.listQuery.task2__year; form.year = this.listQuery.task2__year;
@ -775,29 +802,29 @@
let data1 = [],data2 = [],data3=[]; let data1 = [],data2 = [],data3=[];
if(res.data.length>0){ if(res.data.length>0){
let data = res.data[0]; let data = res.data[0];
data1 = [data.重大事故数,data.报告证书合格率,data.报告证书及时率,data.能力验证满意率,data.客户投诉处理满意率]; data1 = [data.报告证书合格率,data.报告证书及时率,data.能力验证满意率,data.客户投诉处理满意率];
data2 = [data.重大事故数基础值,data.报告证书合格率基础值,data.报告证书及时率基础值,data.能力验证满意率基础值,data.客户投诉处理满意率基础值]; data2 = [data.报告证书合格率基础值,data.报告证书及时率基础值,data.能力验证满意率基础值,data.客户投诉处理满意率基础值];
data3 = [data.重大事故数设定值,data.报告证书合格率设定值,data.报告证书及时率设定值,data.能力验证满意率设定值,data.客户投诉处理满意率设定值]; data3 = [data.报告证书合格率设定值,data.报告证书及时率设定值,data.能力验证满意率设定值,data.客户投诉处理满意率设定值];
for(let i=1;i<data1.length;i++){ for(let i=0;i<data1.length;i++){
if(data1[i]!==null){ if(data1[i]!==null){
data1[i] = data1[i].toFixed(2); data1[i] = tofixed2(data1[i]);
} }
} }
for(let j=1;j<data2.length;j++){ for(let j=0;j<data2.length;j++){
if(data2[j]!==null){ if(data2[j]!==null){
data2[j] = data2[j].toFixed(2); data2[j] = tofixed1(data2[j])
} }
} }
for(let k=1;k<data3.length;k++){ for(let k=0;k<data3.length;k++){
if(data3[k]!==null){ if(data3[k]!==null){
data3[k] = data3[k].toFixed(2); data3[k] = tofixed1(data3[k]);
} }
} }
} }
let chartanalyse = document.getElementById('analyse'); let chartanalyse = document.getElementById('analyse');
that.barAnalyse = echarts.init(chartanalyse); that.barAnalyse = echarts.init(chartanalyse);
let option = { let option = {
color:['#91cc75','#438af4','#ffc040'], color:['#007dcd','#c9caca','#e8e8e8'],
title:{ title:{
text:'年度统计', text:'年度统计',
x:'center' x:'center'
@ -841,11 +868,14 @@
{ {
name: '单位完成值', name: '单位完成值',
type: 'bar', type: 'bar',
// label: labelOption,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
barWidth:20, label: {
show: true,
position: 'top'
},
barWidth:30,
data:data1 data:data1
}, },
{ {
@ -854,7 +884,11 @@
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
barWidth:20, label: {
show: true,
position: 'top'
},
barWidth:30,
data:data3 data:data3
}, },
{ {
@ -863,7 +897,11 @@
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
barWidth:20, label: {
show: true,
position: 'top'
},
barWidth:30,
data:data2 data:data2
}, },

View File

@ -32,7 +32,7 @@
<div ref="print" id="myReport" class="printContainers"> <div ref="print" id="myReport" class="printContainers">
<h3 style="text-align: center;">{{ fileName }}</h3> <h3 style="text-align: center;">{{ fileName }}</h3>
<p v-if="fileName!==''" style="text-align: center;">{{ listQuery.task2__year }} </p> <p v-if="fileName!==''" style="text-align: center;">{{ listQuery.task2__year }} </p>
<!-- 5目标 --> <!-- 5单位目标 -->
<el-row id="echartsContainer"> <el-row id="echartsContainer">
<el-col class="chartsWraps"> <el-col class="chartsWraps">
<div id="main" style="width:100%;height:700px;margin-left: 10px;" ref="chart"></div> <div id="main" style="width:100%;height:700px;margin-left: 10px;" ref="chart"></div>
@ -95,7 +95,7 @@
}, },
}, },
legend: { legend: {
data:['单位完成值','单位目标',{name:'集团目标',itemStyle:{opacity:0}}], data:['单位完成值','单位单位目标',{name:'集团单位目标',itemStyle:{opacity:0}}],
right:'10%', right:'10%',
top:'3%' top:'3%'
}, },
@ -137,7 +137,7 @@
axisLabel: { axisLabel: {
inside: true, inside: true,
textStyle: { textStyle: {
fontSize: '16', fontSize: '14',
}, },
interval: 0, interval: 0,
}, },
@ -163,7 +163,7 @@
axisLabel: { axisLabel: {
inside: true, inside: true,
textStyle: { textStyle: {
fontSize: '16', fontSize: '14',
}, },
interval: 0, interval: 0,
}, },
@ -189,7 +189,7 @@
axisLabel: { axisLabel: {
inside: true, inside: true,
textStyle: { textStyle: {
fontSize: '16', fontSize: '14',
}, },
interval: 0, interval: 0,
}, },
@ -215,7 +215,7 @@
axisLabel: { axisLabel: {
inside: true, inside: true,
textStyle: { textStyle: {
fontSize: '16', fontSize: '14',
}, },
interval: 0, interval: 0,
}, },
@ -259,7 +259,7 @@
position:'end', position:'end',
formatter:'{c}', formatter:'{c}',
color:"#000000", color:"#000000",
fontSize:'8' fontSize:'14'
}, },
name:'', name:'',
yAxis:99 // 警戒线的标注值可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}type值有 max min average分为最大最小平均值 yAxis:99 // 警戒线的标注值可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}type值有 max min average分为最大最小平均值
@ -268,7 +268,7 @@
} }
}, },
{ {
name: '单位目标', name: '单位单位目标',
type: 'bar', type: 'bar',
barWidth:10, barWidth:10,
label: { label: {
@ -278,7 +278,7 @@
data: [] data: []
}, },
{ {
name: '集团目标', name: '集团单位目标',
type: 'line', type: 'line',
data: [] data: []
} }
@ -304,7 +304,6 @@
return b[property]-a[property]; return b[property]-a[property];
} }
} }
taskAnalyse(that.listQuery).then(res=>{ taskAnalyse(that.listQuery).then(res=>{
console.log(res) console.log(res)
let data = res.data; let data = res.data;
@ -349,12 +348,8 @@
minNumber3 = Math.floor(minNumber3) minNumber3 = Math.floor(minNumber3)
minNumber4 =Math.min(...data4) minNumber4 =Math.min(...data4)
minNumber4 = Math.floor(minNumber4) minNumber4 = Math.floor(minNumber4)
debugger;
console.log(minNumber1)
console.log(minNumber2)
console.log(minNumber3)
console.log(minNumber4)
markLine4 = sortedArr4[0].客户投诉处理满意率基础值; markLine4 = sortedArr4[0].客户投诉处理满意率基础值;
function tofixed1(item){ function tofixed1(item){
if(item!==null){ if(item!==null){
let item1 = item.toFixed(1) let item1 = item.toFixed(1)
@ -378,7 +373,7 @@
} }
let arr1 = [''],arr2=[''],arr3=[''],arr4=[''], let arr1 = [''],arr2=[''],arr3=[''],arr4=[''],
arr12 = [''],arr22=[''],arr32=[''],arr42=[''], arr12 = [''],arr22=[''],arr32=[''],arr42=[''],
markarr1 = ['集团'],markarr2=['集团值'],markarr3=['集团值'],markarr4=['集团值']; markarr1 = ['集团目标'],markarr2=['集团目标'],markarr3=['集团目标'],markarr4=['集团目标'];
for(let i=0;i<data1.length;i++){ for(let i=0;i<data1.length;i++){
markarr1.push(markLine1.toFixed(1)) markarr1.push(markLine1.toFixed(1))
markarr2.push(markLine2.toFixed(1)) markarr2.push(markLine2.toFixed(1))
@ -397,17 +392,17 @@
let item2 = tofixed1(item) let item2 = tofixed1(item)
arr1.push(item2) arr1.push(item2)
}) })
let xAxis12 = arr1;xAxis12[0]='目标'; let xAxis12 = arr1;xAxis12[0]='单位目标';
let xAxis13 = arr12;xAxis13[0]='完成值'; let xAxis13 = arr12;xAxis13[0]='完成值';
option1.yAxis.min = minNumber1; option1.yAxis.min = minNumber1;
option1.xAxis[0].data = xaxis1; option1.xAxis[0].data = xaxis1;
option1.xAxis[1].data =markarr1;//集团目标 option1.xAxis[1].data =markarr1;//集团单位目标
option1.xAxis[2].data = xAxis12;//部门目标 option1.xAxis[2].data = xAxis12;//部门单位目标
option1.xAxis[3].data = xAxis13;//部门完成值 option1.xAxis[3].data = xAxis13;//部门完成值
option1.series[0].data = arr12;//部门完成值 option1.series[0].data = arr12;//部门完成值
option1.series[1].data = arr1;//单位目标 option1.series[1].data = arr1;//单位单位目标
option1.title.text = '报告/证书合格率'; option1.title.text = '报告/证书合格率';
option1.series[0].markLine.data[0].yAxis = markLine1; option1.series[0].markLine.data[0].yAxis = markLine1.toFixed(1);
that.barChart1.clear(); that.barChart1.clear();
that.barChart1.setOption(option1); that.barChart1.setOption(option1);
data2.forEach(item=>{ data2.forEach(item=>{
@ -418,17 +413,17 @@
let item2 = tofixed1(item) let item2 = tofixed1(item)
arr2.push(item2) arr2.push(item2)
}) })
let xAxis22 = arr2;xAxis22[0]='目标'; let xAxis22 = arr2;xAxis22[0]='单位目标';
let xAxis23 = arr22;xAxis23[0]='完成值'; let xAxis23 = arr22;xAxis23[0]='完成值';
option2.yAxis.min = minNumber2; option2.yAxis.min = minNumber2;
option2.xAxis[0].data = xaxis2; option2.xAxis[0].data = xaxis2;
option2.xAxis[1].data =markarr2;//集团目标 option2.xAxis[1].data =markarr2;//集团单位目标
option2.xAxis[2].data = xAxis22;//部门目标 option2.xAxis[2].data = xAxis22;//部门单位目标
option2.xAxis[3].data = xAxis23;//部门完成值 option2.xAxis[3].data = xAxis23;//部门完成值
option2.series[0].data = arr22; option2.series[0].data = arr22;
option2.series[1].data = arr2; option2.series[1].data = arr2;
option2.title.text = '报告/证书及时率'; option2.title.text = '报告/证书及时率';
option2.series[0].markLine.data[0].yAxis = markLine2; option2.series[0].markLine.data[0].yAxis = markLine2.toFixed(1);
that.barChart2.clear(); that.barChart2.clear();
that.barChart2.setOption(option2); that.barChart2.setOption(option2);
data3.forEach(item=>{ data3.forEach(item=>{
@ -439,17 +434,17 @@
let item2 = tofixed1(item) let item2 = tofixed1(item)
arr3.push(item2) arr3.push(item2)
}) })
let xAxis32 = arr3;xAxis32[0]='目标'; let xAxis32 = arr3;xAxis32[0]='单位目标';
let xAxis33 = arr32;xAxis33[0]='完成值'; let xAxis33 = arr32;xAxis33[0]='完成值';
option3.yAxis.min = minNumber3; option3.yAxis.min = minNumber3;
option3.xAxis[0].data = xaxis3; option3.xAxis[0].data = xaxis3;
option3.xAxis[1].data =markarr3;//集团目标 option3.xAxis[1].data =markarr3;//集团单位目标
option3.xAxis[2].data = xAxis32;//部门目标 option3.xAxis[2].data = xAxis32;//部门单位目标
option3.xAxis[3].data = xAxis33;//部门完成值 option3.xAxis[3].data = xAxis33;//部门完成值
option3.series[0].data = arr32; option3.series[0].data = arr32;
option3.series[1].data = arr3; option3.series[1].data = arr3;
option3.title.text = '能力验证满意率'; option3.title.text = '能力验证满意率';
option3.series[0].markLine.data[0].yAxis = markLine3; option3.series[0].markLine.data[0].yAxis = markLine3.toFixed(1);
that.barChart3.clear(); that.barChart3.clear();
that.barChart3.setOption(option3); that.barChart3.setOption(option3);
data4.forEach(item=>{ data4.forEach(item=>{
@ -460,17 +455,17 @@
let item2 = tofixed1(item) let item2 = tofixed1(item)
arr4.push(item2) arr4.push(item2)
}) })
let xAxis42 = arr4;xAxis42[0]='目标'; let xAxis42 = arr4;xAxis42[0]='单位目标';
let xAxis43 = arr42;xAxis43[0]='完成值'; let xAxis43 = arr42;xAxis43[0]='完成值';
option4.yAxis.min = minNumber4; option4.yAxis.min = minNumber4;
option4.xAxis[0].data = xaxis4; option4.xAxis[0].data = xaxis4;
option4.xAxis[1].data =markarr4;//集团目标 option4.xAxis[1].data =markarr4;//集团单位目标
option4.xAxis[2].data = xAxis42;//部门目标 option4.xAxis[2].data = xAxis42;//部门单位目标
option4.xAxis[3].data = xAxis43;//部门完成值 option4.xAxis[3].data = xAxis43;//部门完成值
option4.series[0].data = arr42; option4.series[0].data = arr42;
option4.series[1].data = arr4; option4.series[1].data = arr4;
option4.title.text = '客户投诉处理满意率'; option4.title.text = '客户投诉处理满意率';
option4.series[0].markLine.data[0].yAxis = markLine4; option4.series[0].markLine.data[0].yAxis = markLine4.toFixed(1);
that.barChart4.clear(); that.barChart4.clear();
that.barChart4.setOption(option4); that.barChart4.setOption(option4);
}) })