| | |
| | | :legend="legend2" |
| | | :lineColors="lineColors" |
| | | :series="echartsSeries2" |
| | | :tooltip="tooltip" |
| | | :tooltip="tooltip1" |
| | | :xAxis="xAxis" |
| | | :yAxis="yAxis2" |
| | | style="height: 40vh;"></Echarts> |
| | |
| | | |
| | | <script> |
| | | import Echarts from "./echarts.vue"; |
| | | import {getRawSupplierCompare} from "@/api/statisticalCharts/dataAnalysis"; |
| | | |
| | | export default { |
| | | name: "DataComparison", |
| | |
| | | type: 'shadow' |
| | | } |
| | | }, |
| | | tooltip1: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | formatter: (params) => { |
| | | // params 是一个数组,包含当前鼠标悬停的所有系列的数据 |
| | | return params.map(param => { |
| | | const value = param.value; // 获取当前数据点的值 |
| | | const name = param.seriesName; // 获取系列名称 |
| | | return `${name}: ${Math.round(value)}%`; // 格式化为百分比形式 |
| | | }).join('<br>'); // 每个系列占一行 |
| | | } |
| | | }, |
| | | xAxis: [{ |
| | | type: 'category', |
| | | data: ['1', '2', '3', '4', '5'] |
| | |
| | | yAxis2: [{ |
| | | type: 'value', |
| | | min: 0, |
| | | max: 1, |
| | | max: 100, |
| | | axisLabel: { |
| | | formatter: '{value}%' // 在每个刻度值后添加百分比符号 |
| | | } |
| | | }], |
| | | echartsSeries2: [ |
| | | { |
| | |
| | | label: { |
| | | show: true, |
| | | position: 'top', |
| | | formatter: (params) => Math.round(params.value * 1000) / 10 + '%' |
| | | formatter: (params) => params.value + '%' |
| | | }, |
| | | data: [], |
| | | }, |
| | |
| | | label: { |
| | | show: true, |
| | | position: 'top', |
| | | formatter: (params) => Math.round(params.value * 1000) / 10 + '%' |
| | | formatter: (params) => params.value + '%' |
| | | }, |
| | | data: [], |
| | | } |
| | |
| | | }, |
| | | // 方法集合 |
| | | methods: { |
| | | getInfo () { |
| | | this.localData = this.comparisonData.localData === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData.localData |
| | | this.localData = this.localData.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number) |
| | | this.echartsSeries3[0].data = this.localData.slice(0, 5) |
| | | this.localULC = this.comparisonData.localULC |
| | | this.localLCL = this.comparisonData.localLCL |
| | | this.localAverage = this.comparisonData.localAverage |
| | | this.localRange = this.comparisonData.localRange |
| | | getInfo() { |
| | | const { localData, localULC, localLCL, localAverage, localRange } = this.comparisonData; |
| | | // 初始化 localData,确保有默认值 |
| | | this.localData = localData === null |
| | | ? ['', '', '', '', '', '', '', '', ''] |
| | | : localData.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number); |
| | | // 更新图表数据 |
| | | this.echartsSeries3[0].data = this.localData.slice(0, 5); |
| | | this.localULC = localULC; |
| | | this.localLCL = localLCL; |
| | | this.localAverage = localAverage; |
| | | this.localRange = localRange; |
| | | }, |
| | | getInfo1 () { |
| | | this.echartsSeries1[0].data = [] |
| | | this.supplierData = this.comparisonData1.supplierData === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.supplierData |
| | | this.localData = this.comparisonData1.localData === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.localData |
| | | this.localData = this.localData.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number) |
| | | this.echartsSeries3[0].data = this.localData.slice(0, 5) |
| | | this.echartsSeries[0].data = this.supplierData |
| | | this.echartsSeries[1].data = this.localData |
| | | this.absoluteDeviation = this.comparisonData1.absoluteDeviation === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.absoluteDeviation |
| | | this.echartsSeries2[1].data = this.absoluteDeviation |
| | | this.absoluteDeviation = this.absoluteDeviation.map(number => `${Math.round(number * 100)}%`) // 绝对偏差百分比转换 |
| | | this.average = this.comparisonData1.average === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.average |
| | | this.echartsSeries2[0].data = this.average |
| | | this.average = this.average.map(number => `${Math.round(number * 100)}%`) // 平均值百分比转换 |
| | | this.supplierULC = this.comparisonData1.supplierULC === null ? ['', '', '', '', ''] : this.comparisonData1.supplierULC |
| | | this.echartsSeries1[0].data.push(this.supplierULC[0]) // 测量数据标准差对比柱状图数据 |
| | | this.supplierLCL = this.comparisonData1.supplierLCL === null ? ['', '', '', '', ''] : this.comparisonData1.supplierLCL |
| | | this.echartsSeries1[1].data.push(this.supplierLCL[0]) // 测量数据标准差对比柱状图数据 |
| | | this.supplierAverage = this.comparisonData1.supplierAverage === null ? ['', '', '', '', ''] : this.comparisonData1.supplierAverage |
| | | this.echartsSeries1[2].data.push(this.supplierAverage[0]) // 测量数据标准差对比柱状图数据 |
| | | this.supplierRange = this.comparisonData1.supplierRange === null ? ['', '', '', '', ''] : this.comparisonData1.supplierRange |
| | | this.localULC = this.comparisonData1.localULC |
| | | this.echartsSeries1[0].data.push(this.localULC[0]) // 测量数据标准差对比柱状图数据 |
| | | this.localLCL = this.comparisonData1.localLCL |
| | | this.echartsSeries1[1].data.push(this.localLCL[0]) // 测量数据标准差对比柱状图数据 |
| | | this.localAverage = this.comparisonData1.localAverage |
| | | this.echartsSeries1[2].data.push(this.localAverage[0]) // 测量数据标准差对比柱状图数据 |
| | | this.localRange = this.comparisonData1.localRange |
| | | getInfo1() { |
| | | const { |
| | | supplierData, |
| | | localData, |
| | | absoluteDeviation, |
| | | average, |
| | | supplierULC, |
| | | supplierLCL, |
| | | supplierAverage, |
| | | supplierRange, |
| | | localULC, |
| | | localLCL, |
| | | localAverage, |
| | | localRange, |
| | | } = this.comparisonData1; |
| | | // 辅助函数:处理空数据并转换百分比 |
| | | const processPercentageData = (data, defaultValue = ['', '', '', '', '', '', '', '', '']) => |
| | | data === null ? defaultValue : data.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number); |
| | | // 辅助函数:处理空数值型数据 |
| | | const processNumericData = (data, defaultValue = ['', '', '', '', '']) => |
| | | data === null ? defaultValue : data; |
| | | // 初始化数据 |
| | | this.supplierData = processPercentageData(supplierData); |
| | | this.localData = processPercentageData(localData); |
| | | this.absoluteDeviation = processPercentageData(absoluteDeviation).map(number => `${Math.round(number * 100)}%`); |
| | | this.average = processPercentageData(average).map(number => `${Math.round(number * 100)}%`); |
| | | // 更新图表数据 |
| | | this.echartsSeries1[0].data = []; |
| | | this.echartsSeries3[0].data = this.localData.slice(0, 5); |
| | | this.echartsSeries[0].data = this.supplierData; |
| | | this.echartsSeries[1].data = this.localData; |
| | | this.echartsSeries2[1].data = this.comparisonData1.absoluteDeviation.map(value => value * 100); |
| | | this.echartsSeries2[0].data = this.comparisonData1.average.map(value => value * 100); |
| | | // 处理供应商和本地的标准差对比数据 |
| | | this.supplierULC = processNumericData(supplierULC); |
| | | this.supplierLCL = processNumericData(supplierLCL); |
| | | this.supplierAverage = processNumericData(supplierAverage); |
| | | this.supplierRange = processNumericData(supplierRange); |
| | | this.localULC = processNumericData(localULC); |
| | | this.localLCL = processNumericData(localLCL); |
| | | this.localAverage = processNumericData(localAverage); |
| | | this.localRange = processNumericData(localRange); |
| | | // 更新测量数据标准差对比柱状图数据 |
| | | this.echartsSeries1[0].data.push(this.supplierULC[0], this.localULC[0]); |
| | | this.echartsSeries1[1].data.push(this.supplierLCL[0], this.localLCL[0]); |
| | | this.echartsSeries1[2].data.push(this.supplierAverage[0], this.localAverage[0]); |
| | | }, |
| | | submitForm () { |
| | | this.$refs['supplierForm'].validate((valid) => { |
| | |
| | | itemNames: this.selectRow.itemNames, |
| | | supplierDataList: Object.values(this.supplierForm) |
| | | } |
| | | this.$axios.post(this.$api.dataAnalysis.getRawSupplierCompare, params, { |
| | | headers: { |
| | | 'Content-Type': 'application/json' |
| | | }, |
| | | noQs: true |
| | | }).then(res => { |
| | | getRawSupplierCompare(params).then(res => { |
| | | this.comparisonData1 = res.data |
| | | this.getInfo1() |
| | | }) |
| | |
| | | |
| | | <style scoped> |
| | | .title { |
| | | height: 60px; |
| | | line-height: 60px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | } |
| | | .container { |
| | | width: calc(100% - 20px); |