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

 

posted @ 2020-05-21 19:48  2eggs  Views(422)  Comments(0Edit  收藏  举报