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

src/assets/js/constants/echarts-config/Cp.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-19 16:22:48
- * @LastEditTime: 2024-11-20 09:46:14
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-20 17:21:07
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/Cp.js
 //  */
@@ -18,13 +18,13 @@ export const option = {
     y: "8%",
   },
   xAxis: {
-    type: "value",
+    type: "category",
     scale: true,
     max: 30, // 风速最大值为30m/s，视具体数据调整
     axisLabel: {
       show: true,
       interval: "auto",
-      formatter: "{value} m/s", // 风速单位：m/s
+      // formatter: "{value} m/s", // 风速单位：m/s
     },
     show: true,
     name: "风速（m/s）",
@@ -56,7 +56,7 @@ export const option = {
     containLabel: true,
   },
   legend: {
-    top: "90%",
+    top: "bottom",
   },
   toolbox: {
     feature: {

src/assets/js/constants/echarts-config/Heatmap.js

@@ -12,6 +12,9 @@ export const option = {
   tooltip: {
     position: "top",
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },

src/assets/js/constants/echarts-config/barandline.js

@@ -33,7 +33,7 @@ export const option = {
     },
   },
   legend: {
-    data: ["Evaporation", "Precipitation", "Temperature"],
+    top: "bottom",
   },
   xAxis:
     // [

src/assets/js/constants/echarts-config/boxPlot.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:14:10
- * @LastEditTime: 2024-11-20 09:46:01
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-20 17:20:56
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/boxPlot.js
  */
@@ -12,6 +12,9 @@ export const option = {
   tooltip: {
     trigger: "item",
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },

src/assets/js/constants/echarts-config/hexbin.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:17:31
- * @LastEditTime: 2024-11-20 09:31:26
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-20 17:21:19
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/hexbin.js
  */
@@ -12,6 +12,9 @@ export const option = {
   tooltip: {
     trigger: "item",
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
@@ -21,7 +24,7 @@ export const option = {
     },
   },
   xAxis: {
-    type: "value",
+    type: "category",
     name: "风向 (°)",
   },
   yAxis: {

src/assets/js/constants/echarts-config/histogram.js

@@ -20,6 +20,9 @@ export const option = {
       saveAsImage: { show: true },
     },
   },
+  legend: {
+    top: "bottom",
+  },
   xAxis: {
     name: "风速范围 (m/s)",
     type: "category",

src/assets/js/constants/echarts-config/line.js

@@ -24,10 +24,10 @@ export const option = {
     },
   },
   xAxis: {
-    type: "value",
+    type: "category",
     name: "风速 (m/s)",
     // boundaryGap: false,
-    // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    data: [5, 20, 35, 25, 10, 5],
   },
   yAxis: {
     name: "功率 (kW)",
@@ -49,14 +49,7 @@ export const option = {
     {
       name: "功率曲线",
       type: "line",
-      data: [
-        [2, 0],
-        [4, 200],
-        [6, 400],
-        [8, 800],
-        [10, 1200],
-        [12, 1500],
-      ], // 风速与功率对应数据
+      data: [300, 22, 249, 345, 234, 56, 73], // 风速与功率对应数据
     },
   ],
 };

src/assets/js/constants/echarts-config/pareto.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:19:45
- * @LastEditTime: 2024-11-20 09:46:35
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-20 17:21:33
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/pareto.js
  */
@@ -16,6 +16,9 @@ export const option = {
       type: "shadow",
     },
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },

src/assets/js/constants/echarts-config/pie.js

@@ -18,7 +18,7 @@ export const option = {
     },
   },
   legend: {
-    orient: "vertical",
+    top: "bottom",
     left: "left",
     data: ["风速 1-5 m/s", "风速 5-10 m/s", "风速 10-15 m/s", "风速 15+ m/s"],
   },

src/assets/js/constants/echarts-config/radar.js

@@ -17,6 +17,9 @@ export const option = {
       { name: "利用系数", max: 1 },
     ],
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },

src/assets/js/constants/echarts-config/roseChart.js

@@ -18,6 +18,9 @@ export const option = {
     data: ["N", "NE", "E", "SE", "S", "SW", "W", "NW"], // 风向
     boundaryGap: false,
   },
+  legend: {
+    top: "bottom",
+  },
   radiusAxis: {},
   polar: {},
   toolbox: {

src/assets/js/constants/echarts-config/sankeyDiagram.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:20:45
- * @LastEditTime: 2024-11-20 10:18:54
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-20 17:22:11
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/sankeyDiagram.js
  */
@@ -13,6 +13,9 @@ export const option = {
   title: {
     text: "风能转化过程的能量流失情况",
   },
+  legend: {
+    top: "bottom",
+  },
   tooltip: {
     trigger: "item",
     formatter: "{b}: {c}",

src/assets/js/constants/echarts-config/scatter.js

@@ -1,14 +1,15 @@
 export const option = {
   xAxis: {
     name: "风向 (°)",
-    type: "value",
-    min: 0,
-    max: 360,
+    type: "category",
   },
   yAxis: {
     name: "风速 (m/s)",
     type: "value",
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
@@ -22,12 +23,12 @@ export const option = {
       name: "风速分布",
       type: "scatter",
       data: [
-        [45, 5, 10],
-        [90, 10, 20],
-        [180, 7, 15],
-        [270, 12, 25],
+        ["145", "5"],
+        ["90", "10"],
+        ["80", "7"],
+        ["270", "12"],
       ], // [风向, 风速, 数据点大小]
-      symbolSize: (data) => data[2], // 根据大小调整气泡尺寸
+      // symbolSize: (data) => data[2], // 根据大小调整气泡尺寸
       renderMode: "webgl", // 启用 WebGL 渲染
     },
   ],

src/assets/js/constants/echarts-config/stackedBar.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-19 16:25:10
- * @LastEditTime: 2024-11-19 16:32:28
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-20 17:22:20
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/stackedBar.js
  */
@@ -16,6 +16,9 @@ export const option = {
     type: "category",
     data: ["风机1", "风机2", "风机3", "风机4"], // 风机编号
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },

src/assets/js/constants/echarts-config/timeSeries.js

@@ -20,6 +20,9 @@ export const option = {
       saveAsImage: { show: true },
     },
   },
+  legend: {
+    top: "bottom",
+  },
   xAxis: {
     type: "category",
     data: ["00:00", "06:00", "12:00", "18:00", "24:00"],

src/assets/js/constants/echarts-config/waterfall.js

@@ -1,14 +1,17 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:15:50
- * @LastEditTime: 2024-11-20 09:16:16
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-20 17:22:28
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/waterfall.js
  */
 // 瀑布图-Waterfall
 // 示例：风速到发电量的损耗分析
 export const option = {
+  legend: {
+    top: "bottom",
+  },
   xAxis: {
     type: "category",
     data: ["风速", "风轮效率", "发电功率"],

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

@@ -0,0 +1,54 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 10:42:38
+ * @LastEditTime: 2024-11-20 10:44:20
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/utils/dargChartFIlter.js
+ */
+// 修改后的 calculate 方法
+const calculate = (operator, testValue, conditionValue) => {
+  switch (operator) {
+    case ">":
+      return Number(testValue) > Number(conditionValue);
+    case "<":
+      return Number(testValue) < Number(conditionValue);
+    case "=":
+      return Number(testValue) === Number(conditionValue);
+    default:
+      return false;
+  }
+};
+export const filterData = (filterData, dataList, label) => {
+  const filter = filterData; // 处理第一个条件组
+  const filteredData = dataList.map((item) => {
+    // 如果没有提供 number1 或 filterType1，则默认 condition1 满足
+    if (item !== null) {
+      const condition1 =
+        filter.filterType1 && filter.number1 !== null
+          ? calculate(filter.filterType1, item[label], filter.number1)
+          : true;
+      // 如果没有提供 number2 或 filterType2，则默认 condition2 满足
+      const condition2 =
+        filter.filterType2 && filter.number2 !== null
+          ? calculate(filter.filterType2, item[label], filter.number2)
+          : true;
+      // 根据逻辑关系 (或/且)
+      if (filter.radio === "1") {
+        return condition1 || condition2 ? item : null; // 满足任一条件
+      } else if (filter.radio === "2") {
+        return condition1 && condition2 ? item : null; // 同时满足两个条件
+      } else if (!condition2) {
+        return null;
+      } else if (!condition1) {
+        return null;
+      } else {
+        // 未指定逻辑关系时默认满足条件
+        return item;
+      }
+    } else {
+      return null;
+    }
+  });
+  return filteredData; // 返回包含 null 的数据
+};

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

@@ -0,0 +1,12 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 11:18:08
+ * @LastEditTime: 2024-11-20 14:43:14
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/utils/chartLogic/index.js
+ */
+
+import { handleBarChartLogic } from "./modules/barAndLine";
+import { handleScatterChartLogic } from "./modules/scatter";
+export { handleBarChartLogic, handleScatterChartLogic };

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

@@ -0,0 +1,97 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 11:18:35
+ * @LastEditTime: 2024-11-20 14:29:50
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/utils/chartLogic/modules/barAndLine.js
+ */
+//柱状图+折线图
+import { filterData } from "../dargChartFIlter";
+import { getFormattedLabels, getFormattedSeries } from "../../configFn";
+export function handleBarChartLogic(
+  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])
+          ? null
+          : val;
+      }),
+    }));
+    // 条件筛选逻辑
+    const filterList = filterResult.map((filteredItem, index) => {
+      const filter = formFilterAlign[index];
+      const { filterType1, filterType2, number1, number2 } = filter;
+      if (!filterType1 && !filterType2 && number1 == null && number2 == null) {
+        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.Xdata = formLabelAlign.Xdata;
+    item.Ydata = formLabelAlign.Ydata;
+  }
+
+  item.option.xAxis = {
+    ...item.option.xAxis,
+    name: formLabelAlign.Xlable,
+  };
+  item.option.yAxis = {
+    ...item.option.yAxis,
+    name: formLabelAlign.Ylable,
+  };
+
+  if (item.Ydata[0]?.data?.length > 0) {
+    item.option.series = getFormattedSeries(item.Ydata, type);
+  }
+  if (item.Xdata[0]?.data?.length > 0) {
+    item.option.xAxis = {
+      ...item.option.xAxis,
+      data: item.Xdata[0].data,
+      axisTick: { alignWithLabel: true },
+      axisLabel: {
+        formatter: (value, index) =>
+          value !== null ? getFormattedLabels(index, item.Xdata, value) : "",
+      },
+    };
+    item.option.tooltip = {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      formatter: (params) => {
+        const index = params[0]?.dataIndex; // 获取当前数据点索引
+        const content = params
+          .map((param) => `${param.marker}${param.seriesName}: ${param.value}`)
+          .join("<br/>");
+        const customLabels = getFormattedLabels(index, item.Xdata);
+        return `${customLabels}<br/>${content}`;
+      },
+    };
+  }
+}

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

@@ -0,0 +1,125 @@
+//散点图+散点折线图+雷达图
+import { filterData } from "../dargChartFIlter";
+export function handleScatterChartLogic(
+  item, //curEdit编辑项配置
+  formLabelAlign, //每一项label显示
+  formFilterAlign, //过滤数据 数据筛选from
+  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])
+          ? null
+          : val;
+      }),
+    }));
+    // 条件筛选逻辑
+    const filterList = filterResult.map((filteredItem, index) => {
+      const filter = formFilterAlign[index];
+      const { filterType1, filterType2, number1, number2 } = filter;
+      if (!filterType1 && !filterType2 && number1 == null && number2 == null) {
+        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.Xdata = formLabelAlign.Xdata;
+    item.Ydata = formLabelAlign.Ydata;
+  }
+  item.option.xAxis = {
+    ...item.option.xAxis,
+    type: "value",
+    name: formLabelAlign.Xlable,
+  };
+  item.option.yAxis = {
+    ...item.option.yAxis,
+
+    name: formLabelAlign.Ylable,
+  };
+
+  if (item.Ydata[0]?.data?.length > 0 || item.Xdata[0]?.data?.length > 0) {
+    console.log(item.Xdata, "item.Xdata", item.Ydata);
+    item.option.series = (
+      item.Xdata.length > item.Ydata.length ? item.Xdata : item.Ydata
+    ).map((val, ind) => {
+      const xData = item.Xdata[ind]?.data || [];
+      const yData = item.Ydata[ind]?.data || [];
+
+      const scatterData = xData
+        .map((xItem, idx) => {
+          const yItem = yData[idx];
+          if (!xItem || !yItem) return null; // 如果对应项不存在，则跳过
+          return [
+            Number(
+              xItem[item.Xdata[ind].label] === undefined
+                ? 0
+                : xItem[item.Xdata[ind].label]
+            ) || 0, // 取 X 值
+            Number(
+              yItem[item.Ydata[ind].label] === undefined
+                ? 0
+                : yItem[item.Ydata[ind].label]
+            ) || 0, // 取 Y 值
+          ];
+        })
+        .filter((point) => point !== null); // 过滤掉无效的点
+      console.log(scatterData, "scatterData");
+      return {
+        name: `${item.Xdata[ind]?.label || "X"} - ${
+          item.Ydata[ind]?.label || "Y"
+        }`,
+        type: type,
+        renderMode: "webgl", // 启用 WebGL 渲染
+        data: scatterData, // 生成的散点图数据
+
+        tooltip: {
+          trigger: "item", // 鼠标悬停触发
+          formatter: (params) => {
+            // params.dataIndex: 当前点的索引
+            const idx = params.dataIndex;
+            const xTooltipData = item.Xdata.map(
+              (xItem) =>
+                `${xItem.label}: ${
+                  xItem.data[idx]
+                    ? Number(xItem.data[idx][xItem.label] || 0)
+                    : "N/A"
+                }`
+            ).join("<br>");
+            const yTooltipData = item.Ydata.map(
+              (yItem) =>
+                `${yItem.label}: ${
+                  yItem.data[idx]
+                    ? Number(yItem.data[idx][yItem.label]) || 0
+                    : "N/A"
+                }`
+            ).join("<br>");
+            return `X轴数据:<br>${xTooltipData}<br>Y轴数据:<br>${yTooltipData}`;
+          },
+        },
+      };
+    });
+  }
+}

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

@@ -16,7 +16,11 @@
           "
         >
           <span>纬度标签</span>
-          <!-- <el-tooltip content="添加纬度" placement="bottom-start">
+          <el-tooltip
+            content="添加纬度"
+            placement="bottom-start"
+            v-if="curEdit.type === 'scatter' || curEdit.type === 'radar'"
+          >
             <i
               @click="
                 formLabelAlign.Xdata.push({ lable: '', data: [], id: '' })
@@ -24,24 +28,46 @@
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
-          </el-tooltip> -->
+          </el-tooltip>
         </div>
         <template v-for="(item, ind) in formLabelAlign.Xdata">
-          <el-select
-            style="margin: 5px 0"
-            :key="ind + 'select'"
-            v-model="formLabelAlign.Xdata[ind].id"
-            placeholder="请先进行数据配置"
-            :disabled="disabled"
-            @change="handleXdata"
-          >
-            <el-option
-              v-for="item in selectData"
-              :label="item.label"
-              :value="item.id"
-              :key="item.id"
-            ></el-option>
-          </el-select>
+          <div class="attributeItemData">
+            <el-select
+              style="margin: 5px 0"
+              :key="ind + 'select'"
+              v-model="formLabelAlign.Xdata[ind].id"
+              placeholder="请先进行数据配置"
+              :disabled="disabled"
+              @change="handleXdata"
+            >
+              <el-option
+                v-for="item in selectData"
+                :label="item.label"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            <el-tooltip
+              v-if="curEdit.type === 'scatter' || curEdit.type === 'radar'"
+              :content="
+                formLabelAlign.Xdata.length <= 1
+                  ? '该指标不可删除，最少存在一组指标'
+                  : '删除该指标'
+              "
+              placement="bottom-start"
+            >
+              <el-button
+                type="text"
+                :disabled="formLabelAlign.Xdata.length <= 1"
+                @click="removeXdata(ind)"
+              >
+                <i
+                  class="el-icon-delete"
+                  style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                ></i
+              ></el-button>
+            </el-tooltip>
+          </div>
         </template>
       </el-form-item>
       <el-form-item label="指标值">
@@ -204,8 +230,12 @@
 </template>
 <script>
 import { mapState, mapMutations } from "vuex";
-import { getFormattedLabels, getFormattedSeries } from "./configFn";
-
+// import { getFormattedLabels, getFormattedSeries } from "./configFn";
+// import { filterData } from "./chartLogic/dargChartFIlter";
+import {
+  handleBarChartLogic,
+  handleScatterChartLogic,
+} from "./chartLogic/index";
 export default {
   name: "title",
   props: {
@@ -223,7 +253,16 @@ export default {
   data() {
     return {
       value: "all",
-      formFilterAlign: [],
+      formFilterAlign: [
+        {
+          filters: [],
+          filterType1: "",
+          number1: null,
+          filterType2: "",
+          number2: null,
+          radio: null,
+        },
+      ],
       options: [
         {
           value: "<",
@@ -299,54 +338,6 @@ export default {
     this.changeData();
   },
   methods: {
-    // 修改后的 filterData 方法
-    filterData(filterData, dataList, label) {
-      const filter = filterData; // 处理第一个条件组
-      const filteredData = dataList.map((item) => {
-        // 如果没有提供 number1 或 filterType1，则默认 condition1 满足
-        if (item !== null) {
-          const condition1 =
-            filter.filterType1 && filter.number1 !== null
-              ? this.calculate(filter.filterType1, item[label], filter.number1)
-              : true;
-          // 如果没有提供 number2 或 filterType2，则默认 condition2 满足
-          const condition2 =
-            filter.filterType2 && filter.number2 !== null
-              ? this.calculate(filter.filterType2, item[label], filter.number2)
-              : true;
-          // 根据逻辑关系 (或/且)
-          if (filter.radio === "1") {
-            return condition1 || condition2 ? item : null; // 满足任一条件
-          } else if (filter.radio === "2") {
-            return condition1 && condition2 ? item : null; // 同时满足两个条件
-          } else if (!condition2) {
-            return null;
-          } else if (!condition1) {
-            return null;
-          } else {
-            // 未指定逻辑关系时默认满足条件
-            return item;
-          }
-        } else {
-          return null;
-        }
-      });
-      return filteredData; // 返回包含 null 的数据
-    },
-
-    // 修改后的 calculate 方法
-    calculate(operator, testValue, conditionValue) {
-      switch (operator) {
-        case ">":
-          return Number(testValue) > Number(conditionValue);
-        case "<":
-          return Number(testValue) < Number(conditionValue);
-        case "=":
-          return Number(testValue) === Number(conditionValue);
-        default:
-          return false;
-      }
-    },
     handleMetrics() {
       this.formLabelAlign.Ydata.push({ lable: "", data: [], id: "" });
       this.formFilterAlign.push({
@@ -363,12 +354,13 @@ export default {
       "setCurEdit",
       "setFormFilterAlignData",
     ]),
-    //纬度轴
+    //纬度轴 处理整合数据
     handleXdata() {
       this.formLabelAlign.Xdata = this.updateAxisData(
         this.formLabelAlign.Xdata
       );
     },
+    //指标值 处理整合数据
     handleYdata() {
       this.formLabelAlign.Ydata = this.updateAxisData(
         this.formLabelAlign.Ydata
@@ -393,7 +385,7 @@ export default {
       if (this.$refs.form) {
         this.$refs.form.resetFields();
       }
-
+      //图表内容回显图表配置赋值
       if (this.curEdit && this.curEdit.option) {
         this.formLabelAlign = {
           text: this.curEdit.option.title?.text || "",
@@ -420,6 +412,7 @@ export default {
                   },
                 ],
         };
+        //查找是否存在数据
         const index = this.formFilterAlignData.findIndex(
           (item) => item.id === this.curEdit.id
         );
@@ -445,117 +438,58 @@ export default {
     changeChart(isFilter) {
       if (!this.curEdit?.option) return; // 确保 curEdit 和 option 存在
       const item = JSON.parse(JSON.stringify(this.curEdit));
-      // 确保标题和坐标轴对象存在
-      item.option.title = item.option.title || {};
-      Object.assign(item.option.title, { text: this.formLabelAlign.text });
-      if (this.curEdit.type !== "pie" && this.curEdit.type !== "radar") {
-        if (isFilter === "filter") {
-          // 数据筛选逻辑
-          const filterResult = this.formLabelAlign.Ydata.map(
-            (yItem, index) => ({
-              label: yItem.label,
-              id: yItem.id,
-              data: yItem.data.map((val) => {
-                const filters = this.formFilterAlign[index]?.filters || [];
-                return filters.length > 0 && !filters.includes(val[yItem.label])
-                  ? null
-                  : val; // 如果不匹配，返回 null；否则返回原始项
-              }),
-            })
-          );
-          // 条件筛选逻辑
-          const filterList = filterResult.map((filteredItem, index) => {
-            const filter = this.formFilterAlign[index];
-            const { filterType1, filterType2, number1, number2 } = filter;
-            if (
-              !filterType1 &&
-              !filterType2 &&
-              number1 == null &&
-              number2 == null
-            ) {
-              // 如果所有条件为空，直接保留原始数据
-              return {
-                label: filteredItem.label,
-                id: filteredItem.id,
-                data: filteredItem.data,
-              };
-            } else {
-              // 执行条件筛选
-              const filterDatas = this.filterData(
-                filter, //条件项
-                filteredItem.data, //过滤数据其中包含null
-                filteredItem.label //过滤数据其中包含null
+      if (this.curEdit.type === "scatter") {
+        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])
               );
-              return {
-                label: filteredItem.label,
-                id: filteredItem.id,
-                data: [...filterDatas],
-              };
-            }
-          });
-
-          item.Xdata = this.formLabelAlign.Xdata;
-          item.Ydata = filterList;
-        } else {
-          // 未筛选，直接赋值
-          item.Xdata = this.formLabelAlign.Xdata;
-          item.Ydata = this.formLabelAlign.Ydata;
-        }
-        // 配置 xAxis 和 yAxis
-        item.option.xAxis = {
-          ...item.option.xAxis,
-          name: this.formLabelAlign.Xlable,
-        };
-        item.option.yAxis = {
-          ...item.option.yAxis,
-          name: this.formLabelAlign.Ylable,
-        };
-        if (item.Ydata[0]?.data?.length > 0) {
-          item.option.series = getFormattedSeries(
-            item.Ydata,
-            this.curEdit.type
+            })
           );
-        }
-        if (item.Xdata[0]?.data?.length > 0) {
-          item.option.xAxis = {
-            ...item.option.xAxis,
-            data: item.Xdata[0].data,
-            axisTick: { alignWithLabel: true },
-            axisLabel: {
-              formatter: (value, index) =>
-                value !== null
-                  ? getFormattedLabels(index, item.Xdata, value)
-                  : "",
-            },
-          };
-
-          item.option.tooltip = {
-            trigger: "axis",
-            axisPointer: { type: "shadow" },
-            formatter: (params) => {
-              const index = params[0]?.dataIndex; // 获取当前数据点索引
-              const content = params
-                .map(
-                  (param) =>
-                    `${param.marker}${param.seriesName}: ${param.value}`
-                )
-                .join("<br/>");
-              const customLabels = getFormattedLabels(index, item.Xdata);
-              return `${customLabels}<br/>${content}`;
-            },
-          };
+        // console.log(isAllNumbers(this.formLabelAlign.Xdata), "isAllNumbers");
+        const isAllNumbersXdata = isAllNumbers(this.formLabelAlign.Xdata);
+        const isAllNumbersYdata = isAllNumbers(this.formLabelAlign.Ydata);
+        if (!isAllNumbersXdata || !isAllNumbersYdata) {
+          this.$message.warning("请选择数值项进行散点图绘制");
+          return;
         }
       }
+      // 确保标题和坐标轴对象存在
+      item.option.title = item.option.title || {};
+      Object.assign(item.option.title, { text: this.formLabelAlign.text });
+      if (this.curEdit.type === "bar" || this.curEdit.type === "line") {
+        handleBarChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
+      } else if (this.curEdit.type === "scatter") {
+        handleScatterChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
+      }
+
+      //设置仓库
       this.setFormFilterAlignData({
         id: this.curEdit.id,
         data: JSON.parse(JSON.stringify(this.formFilterAlign)),
       });
-
       this.updateChart(item); // 更新图表
     },
     removeYdata(index) {
       this.formLabelAlign.Ydata.splice(index, 1); // 删除当前项
     },
+    removeXdata(index) {
+      this.formLabelAlign.Xdata.splice(index, 1); // 删除当前项
+    },
   },
 };
 </script>

src/views/performance/components/custonAsCom/dragChart/components/chartsAttributes.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-11-01 10:14:11
- * @LastEditTime: 2024-11-20 09:55:34
+ * @LastEditTime: 2024-11-20 10:21:34
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartsContent.vue
@@ -92,7 +92,6 @@ export default {
           type: "line",
           name: "折线图",
         },
-
         {
           type: "Cp",
           name: "散点折线图",