cp图表的封装\散点图处理+数据筛选过滤

src/assets/js/class/chart.js

@@ -17,6 +17,7 @@ export default class chartClass {
     height = 300,
     Xdata = [],
     Ydata = [],
+    formFilterAlignData = [], //条件过滤字段
   }) {
     this.id = Math.random();
     this.option = option;
@@ -27,5 +28,6 @@ export default class chartClass {
     this.type = type;
     this.Xdata = Xdata;
     this.Ydata = Ydata;
+    this.formFilterAlignData = formFilterAlignData;
   }
 }

src/store/dragChart.js

@@ -14,7 +14,7 @@ export default {
     originChartList: [], // 当前文件的原始数据
     fileList: [], // 文件列表
     dataBaseCheckList: {}, //选中数据更新
-    formFilterAlignData: [], //这个是所有图表数据筛选保存字段
+    // formFilterAlignData: [], //这个是所有图表数据筛选保存字段
   },
   mutations: {
     setUpdateTriggerGetData(state, value) {
@@ -52,18 +52,17 @@ export default {
     setFormFilterAlignData(state, data) {
       //将数据存储起来用于回显 数据
       // 检查是否已经存在相同的 id
-      const index = state.formFilterAlignData.findIndex(
+      const index = state.curEdit.formFilterAlignData.findIndex(
         (item) => item.id === data.id
       );
       if (index !== -1) {
         // 如果找到相同的 id，直接更新
-        state.formFilterAlignData[index] = {
+        state.curEdit.formFilterAlignData[index] = {
           ...data,
-          // data: [...state.formFilterAlignData[index].data, ...data.data],
         };
       } else {
         // 如果不存在，新增一条数据
-        state.formFilterAlignData.push({ ...data });
+        state.curEdit.formFilterAlignData.push({ ...data });
       }
     },
     // 设置当前编辑的图表

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 11:18:35
- * @LastEditTime: 2024-11-20 14:29:50
+ * @LastEditTime: 2024-11-22 11:17:57
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/utils/chartLogic/modules/barAndLine.js
@@ -16,19 +16,31 @@ export function handleBarChartLogic(
   isFilter,
   type
 ) {
+  console.log(
+    item,
+    formLabelAlign,
+    formFilterAlign,
+    isFilter,
+    type,
+    "过滤方法"
+  );
   // 封装柱状图的具体逻辑
   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 filters.length > 0 && !filters.includes(val[yItem.label])
+        console.log(filters, "filters 过滤自己点废话", val);
+        return val === null ||
+          (filters.length > 0 && !filters.includes(val[yItem.label]))
           ? null
           : val;
       }),
     }));
+    console.log(filterResult, "filterResult");
     // 条件筛选逻辑
     const filterList = filterResult.map((filteredItem, index) => {
       const filter = formFilterAlign[index];

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-21 15:40:30
- * @LastEditTime: 2024-11-21 15:40:49
+ * @LastEditTime: 2024-11-22 11:39:43
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/cp.js
@@ -24,7 +24,8 @@ export function handleCpChartLogic(
       id: yItem.id,
       data: yItem.data.map((val) => {
         const filters = formFilterAlign[index]?.filters || [];
-        return filters.length > 0 && !filters.includes(val[yItem.label])
+        return val === null ||
+          (filters.length > 0 && !filters.includes(val[yItem.label]))
           ? null
           : val;
       }),

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-21 09:40:55
- * @LastEditTime: 2024-11-21 14:15:21
+ * @LastEditTime: 2024-11-22 11:40:00
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/radar.js
@@ -32,7 +32,8 @@ export function handleRadarChartLogic(
         .map((val) => {
           const filters = formFilterAlign[index]?.filters || [];
           // 如果值不在过滤条件内，返回 null
-          return filters.length > 0 && !filters.includes(val[yItem.label])
+          return val === null ||
+            (filters.length > 0 && !filters.includes(val[yItem.label]))
             ? null
             : val;
         })

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

@@ -15,7 +15,8 @@ export function handleScatterChartLogic(
       id: yItem.id,
       data: yItem.data.map((val) => {
         const filters = formFilterAlign[index]?.filters || [];
-        return filters.length > 0 && !filters.includes(val[yItem.label])
+        return val === null ||
+          (filters.length > 0 && !filters.includes(val[yItem.label]))
           ? null
           : val;
       }),

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

@@ -305,7 +305,6 @@ export default {
     ...mapState("dragChart", {
       currentChartList: "currentChartList",
       dataBaseCheckList: "dataBaseCheckList",
-      formFilterAlignData: "formFilterAlignData",
     }),
   },
 
@@ -315,7 +314,7 @@ export default {
     },
     formLabelAlign: {
       handler(nval) {
-        this.changeChart("nofilter");
+        this.changeChart("filter");
       },
       deep: true,
     },
@@ -416,14 +415,14 @@ export default {
                 ],
         });
         // 查找是否存在数据
-        const index = this.formFilterAlignData.findIndex(
+        const index = this.curEdit.formFilterAlignData.findIndex(
           (item) => item.id === this.curEdit.id
         );
         if (index !== -1) {
           this.$set(
             this,
             "formFilterAlign",
-            this.formFilterAlignData[index]?.data
+            this.curEdit.formFilterAlignData[index]?.data
           );
         } else {
           this.$set(this, "formFilterAlign", [
@@ -452,7 +451,6 @@ export default {
         const isAllNumbers = (data) =>
           data.every((val) =>
             val.data.every((vals) => {
-              // console.log(vals[val.label], "vals[val.label]");
               return !isNaN(
                 Number(vals[val.label] == undefined ? 0 : vals[val.label])
               );
@@ -513,7 +511,11 @@ export default {
         id: this.curEdit.id,
         data: JSON.parse(JSON.stringify(this.formFilterAlign)),
       });
-      this.updateChart(item); // 更新图表
+      this.updateChart({
+        ...item,
+        Ydata: this.formLabelAlign.Ydata,
+        formFilterAlignData: this.formFilterAlign,
+      }); // 更新图表
     },
     removeYdata(index) {
       this.formLabelAlign.Ydata.splice(index, 1); // 删除当前项