store.load(function (records, operation, success) {
//正态分布图
var chart1Panel = Plantpanel.down('panel[name=NormalDistributionChart]');
var chart1Id = chart1Panel.getId();
var myChart1 = echarts.init(document.getElementById(chart1Id));
//XBAR图表
var chart2Panel = Plantpanel.down('panel[name=XBARChart]');
var chart2Id = chart2Panel.getId();
var myChart2 = echarts.init(document.getElementById(chart2Id));
//R图表
var chart3Panel = Plantpanel.down('panel[name=RChart]');
var chart3Id = chart3Panel.getId();
var myChart3 = echarts.init(document.getElementById(chart3Id));
myChart1.clear();
myChart2.clear();
myChart3.clear();
if (records.length==0) {
myChart1.setOption({
backgroundColor: 'white',
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: {
text: 'Normal distribution plot',
left: 'center'
},
xAxis: {
data: [],
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: [{
type: 'value',
splitLine: { show: false }
}, {
type: 'value',
splitLine: { show: false }
}],
series: [{
type: 'bar',
name: '频次',
xAxisIndex: 0,
yAxisIndex: 0,
data: []
}, {
type: 'line',
name: '频线',
xAxisIndex: 0,
yAxisIndex: 1,
data: []
}]
});
myChart2.setOption({
backgroundColor: 'white',
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: {
text: 'XBAR CHART',
left: 'center',
textStyle: {
fontSize: 14
}
},
legend: {
top: 'bottom',
orient: 'horizontal',
textStyle: {
fontSize: 10
},
data: ['值(X)', '上限(USL)', '上控制限(X-UCL)', 'B-UCL(2𝜎)', 'C-UCL(1𝜎)', '中线(X-CL)', 'C-LCL(1𝜎)', 'B-LCL(2𝜎)', '下控制限(X-LCL)', '下限(LSL)']
},
xAxis: {
data: [],
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: [{
type: 'value',
scale: true, //不从0开始
splitLine: { show: false }//,
//data: [LSL, XLCL, BLCL, CLCL, XCL, CUCL, BUCL, XUCL, USL]
}],
series: [{
type: 'line',
name: '值(X)',
data: [],
lineStyle: {
normal: { type: 'solid' }
}
},
{
type: 'line',
name: '上限(USL)',
data: [],
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: '上控制限(X-UCL)',
data: [],
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: 'B-UCL(2𝜎)',
data: [],
lineStyle: {
normal: { type: 'dashed' }
}
}, {
type: 'line',
name: 'C-UCL(1𝜎)',
data: [],
lineStyle: {
normal: { type: 'dotted' }
}
}, {
type: 'line',
name: '中线(X-CL)',
data: [],
lineStyle: {
normal: { type: 'dashed' }
}
}, {
type: 'line',
name: 'C-LCL(1𝜎)',
data: [],
lineStyle: {
normal: { type: 'dotted' }
}
}, {
type: 'line',
name: 'B-LCL(2𝜎)',
data: [],
lineStyle: {
normal: { type: 'dashed' }
}
}, {
type: 'line',
name: '下控制限(X-LCL)',
data: [],
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: '下限(LSL)',
data: [],
lineStyle: {
normal: { type: 'solid' }
}
}
]
});
myChart3.setOption({
backgroundColor: 'white',
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: {
text: 'R CHART',
left: 'center',
textStyle: {
fontSize: 14
}
},
legend: {
top: 'bottom',
orient: 'horizontal',
textStyle: {
fontSize: 10
},
data: ['范围(R)', '上控制限(R-UCL)', '中线(R-CL)', '下控制限(R-LCL)']
},
xAxis: {
data: [],
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: [{
type: 'value',
scale: true, //不从0开始
splitLine: { show: false }//,
//data: [LSL, XLCL, BLCL, CLCL, XCL, CUCL, BUCL, XUCL, USL]
}],
series: [{
type: 'line',
name: '范围(R)',
data: [],
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: '上控制限(R-UCL)',
data: [],
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: '中线(R-CL)',
data: [],
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: '下控制限(R-LCL)',
data: [],
lineStyle: {
normal: { type: 'solid' }
}
}
]
});
return;
}
//得到样本个数
let cCount = parseInt(records[0].data.COUNT);
//得到最大值
let cMax = parseFloat(records[0].data.MAX);
//得到最小值
let cMin = parseFloat(records[0].data.MIN);
//得到平均值
let cAvg = parseFloat(records[0].data.AVG).toFixed(3);
//得到标准偏差
let cAppk = parseFloat(records[0].data.APPK).toFixed(3);
//得到ACPK
let cAcpk = parseFloat(records[0].data.ACPK).toFixed(2);
//得到极差
let cRange = cMax - cMin;
//得到直方图个数
let cBarCount = Math.ceil(Math.sqrt(cCount));
//得到直方图组距
let cDis = parseFloat(cRange / (cBarCount - 1));
//初始化直方图分段
let cArr = new Array();
for (var no = 0; no < cBarCount; no++) {
cArr.push(parseFloat(cMin + no * cDis).toFixed(3));
}
//初始化频次数组
let cFrequency = new Array();
for (var no = 0; no < cBarCount; no++) {
cFrequency.push(0);
}
//初始化正态分布数组
let cDistribution = new Array();
//正在加载数据,动画显示
myChart1.showLoading();
myChart2.showLoading();
myChart3.showLoading();
//得到需要图表的数据
Ext.Ajax.request({
url: '/SPCRealTimeMonitoring/GetSPCRealTimeMonitoringList',
params: obj,
success: function (response) {
var o = Ext.decode(response.responseText.toString());
var data = o.data;
//初始化样本数组
let sample = new Array();
//得到要参与的数字
for (var num = 0; num < data.length; num++) {
sample.push(parseFloat(data[num].VALUE1).toFixed(3));
sample.push(parseFloat(data[num].VALUE2).toFixed(3));
sample.push(parseFloat(data[num].VALUE3).toFixed(3));
sample.push(parseFloat(data[num].VALUE4).toFixed(3));
sample.push(parseFloat(data[num].VALUE5).toFixed(3));
}
//查找样本所在的区间并把对应的数字加1
for (var no1 = 0; no1 < cBarCount; no1++) {
for (var s = 0; s < sample.length; s++) {
if (sample[s] == "no") {
continue;
}
if (sample[s] <= cArr[no1]) {
cFrequency[no1] = cFrequency[no1] + 1;
sample.splice(s, 1, "no");//如果这个样本值落在某分段内，将此样本在样本数组中标记为no
}
}
}
//计算正态分布
for (var no2 = 0; no2 < cBarCount; no2++) {
let calNo = me.std(cArr[no2], cAvg, cAppk);
cDistribution.push(parseFloat(calNo).toFixed(4));
}
var option1 = {
backgroundColor: 'white',
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: {
text: 'Normal distribution plot',
left: 'center'
},
xAxis: {
data: cArr,
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: [{
type: 'value',
splitLine: { show: false }
}, {
type: 'value',
splitLine: { show: false }
}],
series: [{
type: 'bar',
name: '频次',
xAxisIndex: 0,
yAxisIndex: 0,
data: cFrequency
}, {
type: 'line',
name: '频线',
xAxisIndex: 0,
yAxisIndex: 1,
data: cDistribution
}]
};
myChart1.setOption(option1);
myChart1.hideLoading();
//生成XBAR R图表
//得到USL LSL X_UCL X_CL X_LCL R_UCL R_CL R_LCL
let USL = parseFloat(data[0].USL).toFixed(2);//Master
let LSL = parseFloat(data[0].LSL).toFixed(2);//Master
let X_UCL = parseFloat(data[0].X_UCL).toFixed(2);//Master
let X_CL = parseFloat(data[0].X_CL).toFixed(2);//Master
let X_LCL = parseFloat(data[0].X_LCL).toFixed(2);//Master
let R_UCL = parseFloat(data[0].R_UCL).toFixed(2);//Master
let R_CL = parseFloat(data[0].R_CL).toFixed(2);//Master
let R_LCL = parseFloat(data[0].R_LCL).toFixed(2);//Master
//计算BUCL CUCL CLCL BLCL
let BUCL = parseFloat(X_CL) + parseFloat(2 * cAcpk);
let CUCL = parseFloat(X_CL) + parseFloat(1 * cAcpk);
let CLCL = parseFloat(X_CL) - parseFloat(1 * cAcpk);
let BLCL = parseFloat(X_CL) - parseFloat(2 * cAcpk);
//获取X轴时间数据 XBAR数据
let xbarX = new Array();
let xbarData = new Array();
let rData = new Array();
let xbarUSLData = new Array();
let xbarXUCLData = new Array();
let xbarXCLData = new Array();
let xbarXLCLData = new Array();
let xbarLSLData = new Array();
let xbarBUCLData = new Array();
let xbarCUCLData = new Array();
let xbarCLCLData = new Array();
let xbarBLCLData = new Array();
let xbarRUCLData = new Array();
let xbarRCLData = new Array();
let xbarRLCLData = new Array();
for (var num1 = 0; num1 < data.length; num1++) {
xbarX.push(ChangeDateFormatMD(data[num1].INSP_YMD));
xbarData.push(parseFloat(data[num1].XBAR));
rData.push(parseFloat(data[num1].R));
xbarUSLData.push(parseFloat(USL));
xbarLSLData.push(parseFloat(LSL));
xbarXUCLData.push(parseFloat(X_UCL));
xbarXCLData.push(parseFloat(X_CL));
xbarXLCLData.push(parseFloat(X_LCL));
xbarBUCLData.push(parseFloat(BUCL));
xbarCUCLData.push(parseFloat(CUCL));
xbarCLCLData.push(parseFloat(CLCL));
xbarBLCLData.push(parseFloat(BLCL));
xbarRUCLData.push(parseFloat(R_UCL));
xbarRCLData.push(parseFloat(R_CL));
xbarRLCLData.push(parseFloat(R_LCL));
}
var option2 = {
backgroundColor: 'white',
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: {
text: 'XBAR CHART',
left: 'center',
textStyle: {
fontSize: 14
}
},
legend: {
top: 'bottom',
orient: 'horizontal',
textStyle: {
fontSize:10
},
data: ['值(X)', '上限(USL)', '上控制限(X-UCL)', 'B-UCL(2𝜎)', 'C-UCL(1𝜎)', '中线(X-CL)', 'C-LCL(1𝜎)', 'B-LCL(2𝜎)', '下控制限(X-LCL)','下限(LSL)']
},
xAxis: {
data: xbarX,
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: [{
type: 'value',
scale: true, //不从0开始
splitLine: { show: false }//,
}],
series: [{
type: 'line',
name: '值(X)',
data: xbarData,
lineStyle: {
normal: { type: 'solid' }
}
},
{
type: 'line',
name: '上限(USL)',
data: xbarUSLData,
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: '上控制限(X-UCL)',
data: xbarXUCLData,
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: 'B-UCL(2𝜎)',
data: xbarBUCLData,
lineStyle: {
normal: { type: 'dashed' }
}
}, {
type: 'line',
name: 'C-UCL(1𝜎)',
data: xbarCUCLData,
lineStyle: {
normal: { type: 'dotted' }
}
}, {
type: 'line',
name: '中线(X-CL)',
data: xbarXCLData,
lineStyle: {
normal: { type: 'dashed' }
}
}, {
type: 'line',
name: 'C-LCL(1𝜎)',
data: xbarCLCLData,
lineStyle: {
normal: { type: 'dotted' }
}
}, {
type: 'line',
name: 'B-LCL(2𝜎)',
data: xbarBLCLData,
lineStyle: {
normal: { type: 'dashed' }
}
}, {
type: 'line',
name: '下控制限(X-LCL)',
data: xbarXLCLData,
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: '下限(LSL)',
data: xbarLSLData,
lineStyle: {
normal: { type: 'solid' }
}
}
]
};
myChart2.setOption(option2);
myChart2.hideLoading();
var option3 = {
backgroundColor: 'white',
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: {
text: 'R CHART',
left: 'center',
textStyle: {
fontSize: 14
}
},
legend: {
top: 'bottom',
orient: 'horizontal',
textStyle: {
fontSize: 10
},
data: ['范围(R)', '上控制限(R-UCL)', '中线(R-CL)', '下控制限(R-LCL)']
},
xAxis: {
data: xbarX,
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: [{
type: 'value',
scale: true, //不从0开始
splitLine: { show: false }//,
}],
series: [{
type: 'line',
name: '范围(R)',
data: rData,
lineStyle: {
normal: { type: 'solid' }
}
},{
type: 'line',
name: '上控制限(R-UCL)',
data: xbarRUCLData,
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: '中线(R-CL)',
data: xbarRCLData,
lineStyle: {
normal: { type: 'solid' }
}
}, {
type: 'line',
name: '下控制限(R-LCL)',
data: xbarRLCLData,
lineStyle: {
normal: { type: 'solid' }
}
}
]
};
myChart3.setOption(option3);
myChart3.hideLoading();
},
failure: function (response) {
Ext.Msg.alert(window.BAOLZ.COM.SystemError.split('|')[0], window.BAOLZ.COM.SystemError.split('|')[1]);
}
});
});
来源：oschina
链接：https://my.oschina.net/u/4300655/blog/4287041