e chart
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]); } }); });