添加处理pie \rose图表 条件过滤

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

@@ -7,12 +7,10 @@ export const option = {
   },
   tooltip: {
     trigger: "item",
-    formatter: "{b}: {c} MWh ({d}%)",
   },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
-      // magicType: { show: true, type: ["line", "bar"] },
       restore: { show: true },
       saveAsImage: { show: true },
     },

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-19 16:18:07
- * @LastEditTime: 2024-11-25 09:45:34
+ * @LastEditTime: 2024-11-26 17:34:51
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/roseChart.js
@@ -37,6 +37,8 @@ export const option = {
   series: [
     {
       type: "bar",
+      radius: [50, 250],
+      center: ["50%", "50%"],
       data: [15, 25, 30, 20, 10, 5, 8, 12], // 风速数据
       coordinateSystem: "polar",
       name: "风速",

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 11:18:08
- * @LastEditTime: 2024-11-21 15:41:37
+ * @LastEditTime: 2024-11-26 16:36:29
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/utils/chartLogic/index.js
@@ -11,10 +11,14 @@ import { handleBarChartLogic } from "./modules/barAndLine";
 import { handleScatterChartLogic } from "./modules/scatter";
 import { handleRadarChartLogic } from "./modules/radar";
 import { handleCpChartLogic } from "./modules/cp";
+import { handlePieChartLogic } from "./modules/pie";
+import { handleRoseChartChartLogic } from "./modules/roseChart";
 
 export {
   handleBarChartLogic,
   handleScatterChartLogic,
   handleRadarChartLogic,
   handleCpChartLogic,
+  handlePieChartLogic,
+  handleRoseChartChartLogic,
 };

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

@@ -0,0 +1,89 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-26 16:33:45
+ * @LastEditTime: 2024-11-26 17:31:22
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/pie.js
+ */
+import { filterData } from "../dargChartFIlter";
+export function handlePieChartLogic(
+  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 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.Xdata = formLabelAlign.Xdata;
+    item.Ydata = formLabelAlign.Ydata;
+  }
+  const res = item.Ydata.map((yItem, yIndex) => {
+    return {
+      name: yItem.label,
+      type,
+      radius: "60%",
+      data:
+        yItem.data &&
+        yItem.data.map((val, valIndex) => {
+          // 获取对应的 Xdata 数据
+          const xVal =
+            item.Xdata[yIndex]?.data?.[valIndex]?.[item.Xdata[yIndex].label] ||
+            "";
+
+          return {
+            value: (val && val[yItem.label]) || null, // 从 Ydata 获取 value
+            name: xVal, // 从 Xdata 获取 name
+          };
+        }),
+    };
+  });
+
+  if (item.Ydata[0]?.data?.length > 0) {
+    item.option.series = res;
+  }
+}

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

@@ -0,0 +1,97 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-26 16:33:38
+ * @LastEditTime: 2024-11-26 17:21:35
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/roseChart.js
+ */
+//玫瑰图
+import { filterData } from "../dargChartFIlter";
+export function handleRoseChartChartLogic(
+  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 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.Xdata = formLabelAlign.Xdata;
+    item.Ydata = formLabelAlign.Ydata;
+  }
+  const xres = item.Xdata?.map((xitem) => {
+    return {
+      boundaryGap: false,
+      type: "category",
+      data:
+        xitem.data &&
+        xitem.data.map((val) => xitem.label + val[xitem.label] || null),
+    };
+  }).filter((items) => items !== null || items !== undefined);
+  const yres = item.Ydata?.map((yitem) => {
+    return {
+      name: yitem.label,
+      type: "bar",
+      coordinateSystem: "polar",
+      data:
+        yitem.data &&
+        yitem.data.map((val) => {
+          return (val && val[yitem.label]) || null;
+        }),
+    };
+  }).filter((items) => items !== null || items !== undefined);
+  if (item.Ydata[0]?.data?.length > 0) {
+    item.option.series = yres;
+    item.option.angleAxis = xres;
+  }
+  if (item.Xdata[0]?.data?.length > 0) {
+    item.option.tooltip = {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+    };
+  }
+}

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

@@ -81,7 +81,11 @@
             "
           >
             <span>指标值</span>
-            <el-tooltip content="添加指标值" placement="bottom-start">
+            <el-tooltip
+              content="添加指标值"
+              placement="bottom-start"
+              v-if="curEdit.type !== 'roseChart'"
+            >
               <i
                 @click="handleMetrics('init')"
                 class="el-icon-circle-plus-outline"
@@ -107,6 +111,7 @@
                 ></el-option>
               </el-select>
               <el-tooltip
+                v-if="curEdit.type !== 'roseChart'"
                 :content="
                   formLabelAlign.Ydata.length <= 1
                     ? '该指标不可删除，最少存在一组指标'
@@ -492,13 +497,21 @@
       </el-form-item>
       <el-form-item
         label="X轴名称"
-        v-if="curEdit.type !== 'pie' && curEdit.type !== 'radar'"
+        v-if="
+          curEdit.type !== 'pie' &&
+          curEdit.type !== 'radar' &&
+          curEdit.type !== 'roseChart'
+        "
       >
         <el-input v-model="formLabelAlign.Xlable"></el-input>
       </el-form-item>
       <el-form-item
         label="Y轴名称"
-        v-if="curEdit.type !== 'pie' && curEdit.type !== 'radar'"
+        v-if="
+          curEdit.type !== 'pie' &&
+          curEdit.type !== 'radar' &&
+          curEdit.type !== 'roseChart'
+        "
       >
         <el-input v-model="formLabelAlign.Ylable"></el-input>
       </el-form-item>
@@ -605,6 +618,8 @@ import {
   handleScatterChartLogic,
   handleRadarChartLogic,
   handleCpChartLogic,
+  handleRoseChartChartLogic,
+  handlePieChartLogic,
 } from "./chartLogic/index";
 import Vue from "vue";
 export default {
@@ -726,8 +741,9 @@ export default {
         return [...BarYdata, ...LineYdata];
       } else if (type === "Cp") {
         return [...LineYdata, ...ScatterYdata];
-      } else if (["bar", "line", "radar", "scatter"].includes(type)) {
-        console.log(Ydata, "Ydata");
+      } else if (
+        ["bar", "line", "radar", "scatter", "pie", "roseChart"].includes(type)
+      ) {
         return Ydata;
       }
       return []; // 默认返回空数组
@@ -1174,6 +1190,22 @@ export default {
           isFilter,
           this.curEdit.type
         );
+      } else if (this.curEdit.type === "roseChart") {
+        handleRoseChartChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
+      } else if (this.curEdit.type === "pie") {
+        handlePieChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
       }
       //设置仓库
       this.setFormFilterAlignData({