fixd:echarts图表中添加数据表格
This commit is contained in:
parent
fe4bcbf607
commit
89900dcf2e
|
|
@ -35,7 +35,7 @@
|
|||
<!-- 5个目标值 -->
|
||||
<el-row id="echartsContainer">
|
||||
<el-col class="chartsWraps">
|
||||
<div id="main" style="width:100%;height:500px;margin-left: 10px;" ref="chart"></div>
|
||||
<div id="main" style="width:100%;height:700px;margin-left: 10px;" ref="chart"></div>
|
||||
</el-col>
|
||||
<el-col class="chartsWraps">
|
||||
<div id="main2" style="width:100%;height:500px;margin-left: 10px;" ref="chart2"></div>
|
||||
|
|
@ -102,18 +102,126 @@
|
|||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '5%',
|
||||
top: '20%',
|
||||
bottom: '25%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
rotate: 80 //设置倾斜角度，数值 可设置 正负 两种，
|
||||
xAxis: [
|
||||
{
|
||||
axisLabel: {
|
||||
interval: 'auto',
|
||||
color:'#000000',
|
||||
rotate: 45 //设置倾斜角度，数值 可设置 正负 两种，
|
||||
},
|
||||
type: 'category',
|
||||
data: [],
|
||||
},
|
||||
type: 'category',
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
position: 'bottom',
|
||||
offset: 180,
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
length: 35,
|
||||
inside: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
textStyle: {
|
||||
fontSize: '16',
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
position: 'bottom',
|
||||
offset: 145,
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
length: 35,
|
||||
inside: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
textStyle: {
|
||||
fontSize: '16',
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
position: 'bottom',
|
||||
offset: 110,
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
length: 35,
|
||||
inside: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
textStyle: {
|
||||
fontSize: '16',
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
position: 'bottom',
|
||||
offset: 75,
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
length: 35,
|
||||
inside: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
textStyle: {
|
||||
fontSize: '16',
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
data: [],
|
||||
}
|
||||
],
|
||||
color:['#c9caca','#007dcd','#000000'],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
|
@ -204,14 +312,16 @@
|
|||
xaxis3 = [],data3 = [],data32=[],
|
||||
xaxis4 = [],data4 = [],data42=[];
|
||||
let markLine1 = 0,markLine2=0,markLine3=0,markLine4=0;
|
||||
let sortedArr1 = data.sort(compare("报告/证书合格率"));
|
||||
let sortedArr1 = data.sort(compare("报告证书合格率"));
|
||||
debugger;
|
||||
console.log(data,sortedArr1)
|
||||
sortedArr1.forEach(item1=>{
|
||||
xaxis1.push(item1.单位)
|
||||
data1.push(item1.报告证书合格率)
|
||||
data12.push(item1.报告证书合格率设定值)
|
||||
})
|
||||
markLine1 = sortedArr1[0].报告证书合格率基础值;
|
||||
let sortedArr2 = data.sort(compare("报告/证书及时率"));
|
||||
let sortedArr2 = data.sort(compare("报告证书及时率"));
|
||||
sortedArr2.forEach(item2=>{
|
||||
xaxis2.push(item2.单位)
|
||||
data2.push(item2.报告证书及时率)
|
||||
|
|
@ -232,74 +342,107 @@
|
|||
data42.push(item4.客户投诉处理满意率设定值)
|
||||
})
|
||||
markLine4 = sortedArr4[0].客户投诉处理满意率基础值;
|
||||
|
||||
console.log(data1,data2,data3)
|
||||
function tofixed1(item){
|
||||
if(item!==null){
|
||||
let item1 = item.toFixed(1)
|
||||
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 arr1 = [],arr2=[],arr3=[],arr4=[],arr12 = [],arr22=[],arr32=[],arr42=[],
|
||||
markarr1 = [],markarr2=[],markarr3=[],markarr4=[];
|
||||
for(let i=0;i<data1.length;i++){
|
||||
markarr1.push(markLine1.toFixed(1))
|
||||
markarr2.push(markLine2.toFixed(1))
|
||||
markarr3.push(markLine3.toFixed(1))
|
||||
markarr4.push(markLine4.toFixed(1))
|
||||
}
|
||||
let option1 =that.option;
|
||||
let option2 =that.option;
|
||||
let option3=that.option;
|
||||
let option4= that.option;
|
||||
|
||||
option1.xAxis.data = xaxis1;
|
||||
|
||||
let arr1 = [],arr2=[],arr3=[],arr4=[];
|
||||
data1.forEach(item=>{
|
||||
if(item!==null){
|
||||
let item1 = item.toFixed(2)
|
||||
arr1.push(item1)
|
||||
}else{
|
||||
arr2.push(item)
|
||||
}
|
||||
let item1 = tofixed2(item)
|
||||
arr12.push(item1)
|
||||
})
|
||||
option1.series[0].data = arr1;
|
||||
option1.series[1].data = data12;
|
||||
data12.forEach(item=>{
|
||||
let item2 = tofixed1(item)
|
||||
arr1.push(item2)
|
||||
})
|
||||
option1.xAxis[0].data = xaxis1;
|
||||
option1.xAxis[1].data =markarr1;//集团目标值
|
||||
option1.xAxis[2].data = arr1;//部门目标值
|
||||
option1.xAxis[3].data = arr12;//部门完成值
|
||||
option1.series[0].data = arr12;//部门完成值
|
||||
option1.series[1].data = arr1;//单位目标值
|
||||
option1.title.text = '报告/证书合格率';
|
||||
option1.series[0].markLine.data[0].yAxis = markLine1;
|
||||
that.barChart1.clear();
|
||||
that.barChart1.setOption(option1);
|
||||
|
||||
option2.xAxis.data = xaxis2;
|
||||
data2.forEach(item=>{
|
||||
if(item!==null){
|
||||
let item2 = item.toFixed(2)
|
||||
arr2.push(item2)
|
||||
}else{
|
||||
arr2.push(item)
|
||||
}
|
||||
let item1 = tofixed2(item)
|
||||
arr22.push(item1)
|
||||
})
|
||||
option2.series[0].data = arr2;
|
||||
option2.series[1].data = data22;
|
||||
data22.forEach(item=>{
|
||||
let item2 = tofixed1(item)
|
||||
arr2.push(item2)
|
||||
})
|
||||
option2.xAxis[0].data = xaxis2;
|
||||
option2.xAxis[1].data =markarr2;//集团目标值
|
||||
option2.xAxis[2].data = arr2;//部门目标值
|
||||
option2.xAxis[3].data = arr22;//部门完成值
|
||||
option2.series[0].data = arr22;
|
||||
option2.series[1].data = arr2;
|
||||
option2.title.text = '报告/证书及时率';
|
||||
option2.series[0].markLine.data[0].yAxis = markLine2;
|
||||
that.barChart2.clear();
|
||||
that.barChart2.setOption(option2);
|
||||
|
||||
option3.xAxis.data = xaxis3;
|
||||
data3.forEach(item=>{
|
||||
if(item!==null){
|
||||
let item3 = item.toFixed(2)
|
||||
arr3.push(item3)
|
||||
}else{
|
||||
arr2.push(item)
|
||||
}
|
||||
let item1 = tofixed2(item)
|
||||
arr32.push(item1)
|
||||
})
|
||||
option3.series[0].data = arr3;
|
||||
option3.series[1].data = data32;
|
||||
data32.forEach(item=>{
|
||||
let item2 = tofixed1(item)
|
||||
arr3.push(item2)
|
||||
})
|
||||
option3.xAxis[0].data = xaxis3;
|
||||
option3.xAxis[1].data =markarr3;//集团目标值
|
||||
option3.xAxis[2].data = arr3;//部门目标值
|
||||
option3.xAxis[3].data = arr32;//部门完成值
|
||||
option3.series[0].data = arr32;
|
||||
option3.series[1].data = arr3;
|
||||
option3.title.text = '能力验证满意率';
|
||||
option3.series[0].markLine.data[0].yAxis = markLine3;
|
||||
that.barChart3.clear();
|
||||
that.barChart3.setOption(option3);
|
||||
|
||||
option4.xAxis.data = xaxis4;
|
||||
data4.forEach(item=>{
|
||||
if(item!==null){
|
||||
let item4 = item.toFixed(2)
|
||||
arr4.push(item4)
|
||||
}else{
|
||||
arr4.push(item)
|
||||
}
|
||||
let item1 = tofixed2(item)
|
||||
arr42.push(item1)
|
||||
})
|
||||
option4.series[0].data = arr4;
|
||||
option4.series[1].data = data42;
|
||||
data42.forEach(item=>{
|
||||
let item2 = tofixed1(item)
|
||||
arr4.push(item2)
|
||||
})
|
||||
option4.xAxis[0].data = xaxis4;
|
||||
option4.xAxis[1].data =markarr4;//集团目标值
|
||||
option4.xAxis[2].data = arr4;//部门目标值
|
||||
option4.xAxis[3].data = arr42;//部门完成值
|
||||
option4.series[0].data = arr42;
|
||||
option4.series[1].data = arr4;
|
||||
option4.title.text = '客户投诉处理满意率';
|
||||
option4.series[0].markLine.data[0].yAxis = markLine4;
|
||||
that.barChart4.clear();
|
||||
|
|
|
|||
Loading…
Reference in New Issue