let chart3Container = window.document.querySelector("#Chart3");
let chart3 = echarts.init(chart3Container);
chart3.clear();
let jsonarr = JSON.parse($parameters.JsonStr);
var origins = []
jsonarr.forEach(a=>{
origins.push(a.Chart3OriginRespData);
})
let xAxisData = [...new Set(origins.map(s => s.Title))];
xAxisData = xAxisData.sort();
let dispatchedData = new Array(xAxisData.length).fill(0);
let holdData = new Array(xAxisData.length).fill(0);
let inProcessData = new Array(xAxisData.length).fill(0);
let processData = new Array(xAxisData.length).fill(0);
let queuedData = new Array(xAxisData.length).fill(0);
xAxisData.forEach((item,index,arr) => {
origins.forEach(s => {
if(s.Title!= item){
return;
}
if(s.WIPStatus == 'Dispatched'){
dispatchedData[index] = s.Count;
}
if(s.WIPStatus == 'Hold'){
holdData[index] = s.Count;
}
if(s.WIPStatus == 'InProcess'){
inProcessData[index] = s.Count;
}
if(s.WIPStatus == 'Processed'){
processData[index] = s.Count;
}
if(s.WIPStatus == 'Queued'){
queuedData[index] = s.Count;
}
});
});
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top:2,
left:-5,
icon:"circle",
itemHeight:11,
itemGap:5,
textStyle:{
fontSize:11,
padding:[0,0,0,-8],
}
},
grid: {
left: '3%',
right: '4%',
bottom: 40,
containLabel: true
},
dataZoom:[{
type:'slider',
start:0,
end:20,
bottom:10
}],
xAxis: [
{
type: 'category',
data: xAxisData, //updated here
axisLabel: {
rotate: 0,
interval: 0
}
}
],
yAxis: [
{
name: 'WIP',
type: 'value',
nameRotate: 90,
nameLocation: "middle",
nameGap: 15,
}
],
color: ['#56a376','#00ff00','#0000ff','#fefe30','#ff0000'],
series: [
{
name: 'Processed',
type: 'bar',
stack: 'Title',
emphasis: {
focus: 'self'
},
data: processData //updated here
},
{
name: 'InProcess',
type: 'bar',
stack: 'Title',
emphasis: {
focus: 'self'
},
data: inProcessData //updated here
},
{
name: 'Dispatched',
type: 'bar',
stack: 'Title',
emphasis: {
focus: 'self'
},
data: dispatchedData //updated here
},
{
name: 'Queued',
type: 'bar',
stack: 'Title',
emphasis: {
focus: 'self'
},
data: queuedData //updated here
},
{
name: 'Hold',
type: 'bar',
stack: 'Title',
emphasis: {
focus: 'self'
},
data: holdData //updated here
},
]
};
chart3.setOption(option);
