柱状覆盖图echarts 柱状配置项内容和展示
楼层多个工单完成情况
配置项如下
const arr = [{
"product_code": "HW1624",
"line_name": "1F02",
"wancheng": 1050,
"jihua": 2800,
"bili": 0.38,
},
{
"product_code": "HW1626",
"line_name": "1F02",
"wancheng": 2473,
"jihua": 25000,
"bili": 0.1,
},
{
"product_code": "HW5626",
"line_name": "1F02",
"wancheng": 2473,
"jihua": 25000,
"bili": 0.1,
},
{
"product_code": "HW1524",
"line_name": "1F023",
"wancheng": 2473,
"jihua": 25000,
"bili": 0.1,
},
{
"product_code": "HW3524",
"line_name": "1F023",
"wancheng": 2473,
"jihua": 25000,
"bili": 0.1,
},
]
const ds = dailyoutQueue(arr); //首先队列组合相同的数据
const maxLength = Math.max.apply(null, ds.map(item => item.ids.length));
let titlearr=[];
var datass=[];
for(var i=0;i<maxLength;i++){
titlearr.push('计划',"产出");
}
let bs=[];
for (var j =0; j<titlearr.length; j++) {
let c=[];
ds.forEach((item, ins) => {
let name="";
let val="";
let lx="";
item.ids.forEach((ite,index)=>{
if(titlearr[j]=='计划' && ite.line_name==item.line_name){
name=ite.product_code;
val=300;
lx=item.line_name
}else if(titlearr[j]=='产出'&& ite.line_name==item.line_name){
name=ite.product_code
val=100;
lx=item.line_name
}else{
name=ite.product_code;
val=0
}
})
c.push({
name:name,
lx:lx,
title:titlearr[j],
value:val
})
});
bs.push(c)
}
alert(JSON.stringify(bs));
var datass=[
[{"name":"HW1624","lx":"1F02","title":"计划","value":300},{"name":"HW3524","lx":"1F023","title":"计划","value":300}],
[{"name":"HW1624","lx":"1F02","title":"产出","value":100},{"name":"HW3524","lx":"1F023","title":"产出","value":100}],
[{"name":"HW1626","lx":"1F02","title":"计划","value":300},{"name":"HW3524","lx":"1F023","title":"计划","value":0}],
[{"name":"HW1626","lx":"1F02","title":"产出","value":100},{"name":"HW3524","lx":"1F023","title":"产出","value":0}],
[{"name":"HW5626","lx":"1F02","title":"计划","value":300},{"name":"HW3524","lx":"1F023","title":"计划","value":0}],
[{"name":"HW5626","lx":"1F02","title":"产出","value":100},{"name":"HW3524","lx":"1F023","title":"产出","value":0}]
]
// var datass=[
// [{name:'t1',title:"计划",value:100},{name:'t2',title:"计划",value:100},{name:'t3',title:"计划",value:100}],
// [{name:'t1',title:"产出",value:10}, {name:'t2',title:"产出",value:30},{name:'t3',title:"产出",value:50}],
// [{name:'t4',title:"计划",value:70}, {name:'t5',title:"计划",value:90},{name:'t6',title:"计划",value:80}],
// [{name:'t4',title:"产出",value:60}, {name:'t5',title:"产出",value:60},{name:'t6',title:"产出",value:60}],
// [{name:'t7',title:"计划",value:70}, {name:'t8',title:"计划",value:90},{name:'t9',title:"计划",value:80}],
// [{name:'t7',title:"产出",value:60}, {name:'t8',title:"产出",value:60},{name:'t9',title:"产出",value:60}],
// ];
var objs=[];
for(var i=0;i<titlearr.length;i++){
objs.push({
name: titlearr[i],
type: 'bar',
xAxisIndex: titlearr[i]=='计划' ? 1:0,
itemStyle: {
normal: {
color: titlearr[i]=='计划'?'#b25d25':"#000",
},
formatter(paream) {
return '实际产出' + paream.value
}
},
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#000'
},
formatter(v) {
return titlearr[i] + v.value
}
}
},
barGap: '100%',
data:datass[i]
})
}
console.log(objs)
var option = {
color: ["red", "#4CCEFE"],
title: {
text: "统计总量",
textStyle: {
fontSize: 16,
padding: "10px"
}
},
legend: {
data: ["计划", "产出"],
},
tooltip: {},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#000',
}
},
splitLine: {
show: true,
lineStyle: {
color: '#aaa',
}
},
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#000',
}
},
data: ['1F02', '1F023']
}, {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ['会', '不会', '看情况']
}
],
series:objs
// [
// {
// name: '计划',
// type: 'bar',
// xAxisIndex: 1,
// itemStyle: {
// normal: {
// color: '#b25d25',
// },
// formatter(paream) {
// return '实际产出' + paream.value
// }
// },
// label: {
// normal: {
// show: true,
// position: 'top',
// textStyle: {
// color: '#000'
// },
// formatter(v) {
// return '计划' + v.value
// }
// }
// },
// barGap: '100%',
// data: [{name:'t1',value:90}, {name:'t2',value:90},{name:'t3',value:90}]
// },
// {
// name: '计划',
// type: 'bar',
// xAxisIndex: 1,
// itemStyle: {
// normal: {
// color: '#b25d25',
// }
// },
// label: {
// normal: {
// show: true,
// position: 'top',
// textStyle: {
// color: '#fff'
// },
// formatter(v) {
// if (v.value == 60) {
// return ''
// } else {
// return '计划' + v.value
// }
// },
// }
// },
// barWidth: '20%',
// barGap: '100%',
// data: [{name:'t4',value:60}, {name:'t5',value:60},{name:'t6',value:60}]
// },
// {
// name: '实际产出',
// type: 'bar',
// xAxisIndex: 0,
// barWidth: '20%',
// itemStyle: {
// normal: {
// color: "#003472",
// }
// },
// label: {
// normal: {
// show: true,
// position: 'top',
// textStyle: {
// color: '#fff'
// },
// formatter(v) {
// return '产出' + v.value
// }
// }
// },
// barGap: '100%',
// data: [{name:'t1',value:10}, {name:'t2',value:30},{name:'t3',value:50}]
// },
// {
// name: '实际产出',
// type: 'bar',
// xAxisIndex: 0,
// barWidth: '20%',
// itemStyle: {
// normal: {
// // color:"#003472",
// color: function(v) {
// debugger
// if (v.data == 60) {
// return "green"
// } else {
// return "#003472"
// }
// }
// }
// },
// label: {
// normal: {
// show: true,
// position: 'top',
// textStyle: {
// color: '#fff'
// },
// formatter(v) {
// if (v.value == 60) {
// return '{a|完成}'
// } else {
// return '产出' + v.value
// }
// },
// rich: {
// a: {
// color: '#000',
// },
// },
// }
// },
// barGap: '100%',
// data: [{name:'t4',value:10}, {name:'t5',value:30},{name:'t6',value:50}]
// }
// ]
};
function dailyoutQueue(objs) {
var map = {},
destArray = [];
for (var v = 0; v < objs.length; v++) {
var line_name = objs[v].line_name;
var product_code = objs[v].product_code;
if (!map[line_name]) {
destArray.push({
line_name: line_name,
product_code: product_code,
ids: [objs[v]],
});
map[line_name] = [objs[v]];
} else {
for (var j = 0; j < destArray.length; j++) {
var dj = destArray[j];
if (dj.line_name == line_name) {
dj.ids.push(objs[v]);
break;
}
}
}
}
return destArray;
}
截图如下
