添加处理Cp图表

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/cp.js

@@ -1,14 +1,22 @@
-/*
- * @Author: your name
- * @Date: 2024-11-21 15:40:30
- * @LastEditTime: 2024-11-25 15:18:08
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/cp.js
- */
-//散点折线图
 import { filterData } from "../dargChartFIlter";
 import { getFormattedLabels, getFormattedSeries } from "../../configFn";
+
+// 通用函数，生成折线图或散点图的 series 数据
+function generateSeriesData(dataSource, xData, yData, labelKey) {
+  return dataSource?.map((item, ind) => {
+    return {
+      name: item.label,
+      type: labelKey, // 'line' 或 'scatter'
+      renderMode: "webgl", // 启用 WebGL 渲染
+      data: item.data?.map((val, valInd) => [
+        xData[ind]?.data[valInd][xData[ind].label], // x轴数据
+        val[item.label], // y轴数据
+      ]),
+      symbolSize: labelKey === "scatter" ? 8 : undefined, // 仅对散点图设置 symbolSize
+    };
+  });
+}
+
 export function handleCpChartLogic(
   item,
   formLabelAlign,
@@ -16,60 +24,13 @@ export function handleCpChartLogic(
   isFilter,
   type
 ) {
-  // console.log(item, formLabelAlign, formFilterAlign, "cp");
-  // 封装柱状图的具体逻辑
-  if (isFilter === "filter") {
-    // 数据筛选逻辑
-    const filterResult = formLabelAlign.Ydata.map((yItem, index) => ({
-      label: yItem.label,
-      id: yItem.id,
-      data: yItem.data.map((val) => {
-        const filters = formFilterAlign[index]?.filters || [];
-        return val === null ||
-          (filters.length > 0 && !filters.includes(val[yItem.label]))
-          ? null
-          : val;
-      }),
-    }));
-    // 条件筛选逻辑
-    const filterList = filterResult.map((filteredItem, index) => {
-      const filter = formFilterAlign[index];
-      const { filterType1, filterType2, number1, number2 } = filter;
-      if (
-        (number1 === null || number1 === "") &&
-        (number2 === null || number2 === "")
-      ) {
-        return {
-          label: filteredItem.label,
-          id: filteredItem.id,
-          data: filteredItem.data,
-        };
-      } else {
-        const filterDatas = filterData(
-          filter,
-          filteredItem.data,
-          filteredItem.label
-        );
-        return {
-          label: filteredItem.label,
-          id: filteredItem.id,
-          data: [...filterDatas],
-        };
-      }
-    });
-    item.Xdata = formLabelAlign.Xdata;
-    item.Ydata = filterList;
-  } else {
-    item.LineXdata = formLabelAlign.LineXdata;
-    item.LineYdata = formLabelAlign.LineYdata;
-    item.ScatterXdata = formLabelAlign.ScatterXdata;
-    item.ScatterYdata = formLabelAlign.ScatterYdata;
-  }
-  //默认数据
+  // 默认数据
   item.LineXdata = formLabelAlign.LineXdata;
   item.LineYdata = formLabelAlign.LineYdata;
   item.ScatterXdata = formLabelAlign.ScatterXdata;
   item.ScatterYdata = formLabelAlign.ScatterYdata;
+
+  // 设置 x 和 y 轴标签
   item.option.xAxis = {
     ...item.option.xAxis,
     name: formLabelAlign.Xlable,
@@ -79,28 +40,32 @@ export function handleCpChartLogic(
     name: formLabelAlign.Ylable,
   };
 
+  // 生成折线图数据
   if (item.LineYdata[0]?.data?.length > 0) {
-    const res = item.LineYdata?.map((lineItem, ind) => {
-      return {
-        name: lineItem.label,
-        type: "line",
-        renderMode: "webgl", // 启用 WebGL 渲染
-        data: [
-          ...lineItem.data?.map((val, valInd) => {
-            return [
-              item.LineXdata[ind]?.data[valInd][item.LineXdata[ind].label],
-              val[lineItem.label],
-            ];
-          }),
-        ],
-      };
-    });
-    item.option.series = [...res];
+    const lineSeries = generateSeriesData(
+      item.LineYdata,
+      item.LineXdata,
+      item.LineYdata,
+      "line"
+    );
+    const scatterSeries = generateSeriesData(
+      item.ScatterYdata,
+      item.ScatterXdata,
+      item.ScatterYdata,
+      "scatter"
+    );
+
+    // 合并折线图和散点图的数据
+    item.option.series = [...lineSeries, ...scatterSeries];
   }
+
+  // // x轴轴标对齐
   // item.option.xAxis = {
   //   ...item.option.xAxis,
   //   axisTick: { alignWithLabel: true },
   // };
+
+  // // 配置提示框
   // item.option.tooltip = {
   //   trigger: "axis",
   //   axisPointer: { type: "shadow" },

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartTitle.vue

@@ -259,7 +259,7 @@
           "
         >
           <span>线纬度标签</span>
-          <el-tooltip content="添加纬度" placement="bottom-start">
+          <!-- <el-tooltip content="添加纬度" placement="bottom-start">
             <i
               @click="
                 formLabelAlign.LineXdata.push({ lable: '', data: [], id: '' })
@@ -267,7 +267,7 @@
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
-          </el-tooltip>
+          </el-tooltip> -->
         </div>
         <template v-for="(item, ind) in formLabelAlign.LineXdata">
           <div class="attributeItemData">
@@ -286,7 +286,7 @@
                 :key="item.id"
               ></el-option>
             </el-select>
-            <el-tooltip
+            <!-- <el-tooltip
               :content="
                 formLabelAlign.LineXdata.length <= 1
                   ? '该指标不可删除，最少存在一组指标'
@@ -304,7 +304,7 @@
                   style="font-size: 16px; color: red; padding: 0 0 0 10px"
                 ></i
               ></el-button>
-            </el-tooltip>
+            </el-tooltip> -->
           </div>
         </template>
       </el-form-item>
@@ -737,7 +737,7 @@ export default {
     },
   },
   mounted() {
-    this.changeData();
+    // this.changeData();
   },
   methods: {
     ...mapMutations("dragChart", [
@@ -998,7 +998,6 @@ export default {
     changeChart(isFilter) {
       if (!this.curEdit?.option) return; // 确保 curEdit 和 option 存在
       const item = JSON.parse(JSON.stringify(this.curEdit));
-
       if (this.curEdit.type === "scatter" || this.curEdit.type === "radar") {
         //判断散点选择的是否为number 或可转为number
         const isAllNumbers = (data) =>
@@ -1060,14 +1059,23 @@ export default {
         );
       }
       //设置仓库
+      console.log(
+        JSON.parse(
+          JSON.stringify(this.formFilterAlign.filter((item) => !item.id))
+        ),
+        "this.formFilterAlign"
+      );
+
       this.setFormFilterAlignData({
         id: this.curEdit.id,
-        data: JSON.parse(JSON.stringify(this.formFilterAlign)),
+        data: JSON.parse(
+          JSON.stringify(this.formFilterAlign.filter((item) => !item.id))
+        ),
       });
       this.updateChart({
         ...item,
         Ydata: this.formLabelAlign.Ydata,
-        formFilterAlignData: this.formFilterAlign,
+        formFilterAlignData: this.formFilterAlign.filter((item) => !item.id),
       }); // 更新图表
     },
     removeYdata(index, type) {