Crunchy
2025-04-29 e5454b769d44a34af423bf87ac8a740bf8c20341
src/components/echarts/DataComparison.vue
@@ -163,7 +163,7 @@
                     :legend="legend2"
                     :lineColors="lineColors"
                     :series="echartsSeries2"
                     :tooltip="tooltip"
                     :tooltip="tooltip1"
                     :xAxis="xAxis"
                     :yAxis="yAxis2"
                     style="height: 40vh;"></Echarts>
@@ -190,6 +190,7 @@
<script>
import Echarts from "./echarts.vue";
import {getRawSupplierCompare} from "@/api/statisticalCharts/dataAnalysis";
export default {
  name: "DataComparison",
@@ -277,6 +278,20 @@
          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']
@@ -351,7 +366,10 @@
      yAxis2: [{
        type: 'value',
        min: 0,
        max: 1,
        max: 100,
        axisLabel: {
          formatter: '{value}%' // 在每个刻度值后添加百分比符号
        }
      }],
      echartsSeries2: [
        {
@@ -360,7 +378,7 @@
          label: {
            show: true,
            position: 'top',
            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
            formatter: (params) => params.value + '%'
          },
          data: [],
        },
@@ -370,7 +388,7 @@
          label: {
            show: true,
            position: 'top',
            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
            formatter: (params) => params.value + '%'
          },
          data: [],
        }
@@ -389,43 +407,65 @@
  },
  // 方法集合
  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) => {
@@ -435,12 +475,7 @@
            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()
          })
@@ -459,8 +494,8 @@
<style scoped>
.title {
  height: 60px;
  line-height: 60px;
  height: 40px;
  line-height: 40px;
}
.container {
  width: calc(100% - 20px);