|  |  | 
 |  |  |                      :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); |