添加处理箱线图图表 条件过滤

src/assets/js/constants/color.js

@@ -0,0 +1,215 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-27 14:40:15
+ * @LastEditTime: 2024-11-27 15:12:50
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/color.js
+ */
+//蓝绿色
+// export const colorPalette = [
+//   "#0a74b7",
+//   "#1f7a57",
+//   "#0a6f6f",
+//   "#4e9f99",
+//   "#5d8d7e",
+//   "#008080",
+//   "#338f96",
+//   "#3b9b8e",
+//   "#4b8e8d",
+//   "#007f5f",
+//   "#2d5d74",
+//   "#396b86",
+//   "#005a66",
+//   "#3d7287",
+//   "#009977",
+//   "#107d67",
+//   "#71b7b1",
+//   "#238f8f",
+//   "#4d918e",
+//   "#8db38d",
+//   "#1e7f7f",
+//   "#45818e",
+//   "#6a7b8e",
+//   "#567f7f",
+//   "#487c68",
+//   "#3a9d9d",
+//   "#2e8c85",
+//   "#006d5b",
+//   "#61bfa5",
+//   "#4a8c7d",
+//   "#348d8d",
+//   "#5d9b91",
+//   "#005a5a",
+//   "#4a7377",
+//   "#288e8e",
+//   "#3c9b9b",
+//   "#009e7b",
+//   "#197b7b",
+//   "#2c6872",
+//   "#3b716b",
+//   "#6b8d7a",
+//   "#41766b",
+//   "#32775c",
+//   "#33805e",
+//   "#3d7b6f",
+//   "#0f3a4f",
+//   "#2a5377",
+//   "#557f7f",
+//   "#2f748c",
+//   "#458687",
+//   "#1c4f68",
+//   "#359b98",
+//   "#2b8d8d",
+//   "#4d91a4",
+//   "#3a6770",
+//   "#469f9b",
+//   "#54898f",
+//   "#5b928f",
+//   "#3a8186",
+//   "#337d80",
+//   "#486775",
+//   "#567b77",
+//   "#3f9d92",
+//   "#7e9e9e",
+//   "#3c8c8c",
+//   "#58998d",
+//   "#388f7f",
+//   "#458f85",
+//   "#4a837b",
+//   "#347e6e",
+//   "#4c6f7b",
+//   "#33657f",
+//   "#35879b",
+//   "#417e80",
+//   "#3d6575",
+//   "#47665b",
+//   "#2c6b7b",
+//   "#548a7d",
+//   "#2a6470",
+//   "#1d6c6c",
+//   "#397d6d",
+//   "#316c69",
+//   "#417d7e",
+//   "#328a8e",
+//   "#397a6d",
+//   "#366c8f",
+//   "#24675c",
+//   "#417e8f",
+//   "#276d72",
+//   "#3a7c8a",
+//   "#467f81",
+//   "#246775",
+//   "#356c6b",
+//   "#29867c",
+//   "#327b80",
+//   "#568f77",
+//   "#3a6f5e",
+//   "#4b756d",
+//   "#316f8e",
+//   "#557c8f",
+//   "#53847a",
+//   "#357479",
+//   "#3a6b6c",
+//   "#2f737d",
+//   "#397d6b",
+//   "#307e7b",
+//   "#447a7d",
+//   "#1b4f77",
+//   "#357f7f",
+//   "#3c7b77",
+//   "#5a9179",
+//   "#4b7a7b",
+//   "#347c78",
+//   "#358d6b",
+//   "#487d8f",
+//   "#397d8d",
+//   "#43757d",
+//   "#306b8e",
+//   "#2e6e8c",
+//   "#2f7c8d",
+//   "#437a7b",
+//   "#38767f",
+//   "#36767b",
+//   "#2f7f6e",
+//   "#468b8e",
+// ];
+//蓝紫色
+export const colorPalette = [
+  "#5167a2",
+  "#687db0",
+  "#8597c0",
+  "#ccd5e3", // 给定的基础颜色
+  "#3e4d76",
+  "#7f98b5",
+  "#9da9b8",
+  "#b3c1d1", // 更深、稍带灰色的蓝色系列
+  "#4f5f8d",
+  "#5c73a0",
+  "#728ab8",
+  "#92a9c7", // 增加深浅对比的蓝色系列
+  "#3c4f78",
+  "#556e96",
+  "#6b88b0",
+  "#7b9fc3", // 增加对比度的蓝色系列
+  "#2e3b5c",
+  "#3e5376",
+  "#4e6a90",
+  "#6e8bb1", // 深蓝色系列和淡蓝色过渡
+  "#1f2b47",
+  "#2f3c61",
+  "#406a8d",
+  "#5a84a8", // 更加深沉的蓝色系列
+  "#547d94",
+  "#6c96b1",
+  "#8fa7c2",
+  "#c0d0e0", // 从深到浅的渐变系列
+  "#4b5e7c",
+  "#6f8099",
+  "#8a9bb4",
+  "#b8c7d9", // 更加鲜明的蓝色系列
+  "#40618d",
+  "#537ba3",
+  "#6a92b9",
+  "#90adc7", // 饱和度提高的蓝色系列
+  "#305079",
+  "#417f98",
+  "#5b98b3",
+  "#76adc6", // 淡蓝色与深蓝色相结合
+  "#274c68",
+  "#3c6481",
+  "#558ea3",
+  "#6db4c7", // 更加突出的对比
+  "#3e4e7b",
+  "#547b98",
+  "#748da9",
+  "#a1bbd4", // 深蓝至淡蓝的渐变
+  "#2c3b5a",
+  "#3d4d73",
+  "#54798d",
+  "#7498b6", // 深浅变化的蓝色
+  "#2f3f65",
+  "#41597f",
+  "#5b799a",
+  "#7f9fc7", // 不同深度的蓝色
+  "#35476a",
+  "#487f9e",
+  "#5f9bb6",
+  "#84b7d2", // 蓝色渐变系列
+  "#1a2b43",
+  "#2b3f5a",
+  "#3e5779",
+  "#51768f", // 更加沉稳的蓝色系
+  "#263d56",
+  "#3b5079",
+  "#4c6c97",
+  "#6885b4", // 中性蓝系列
+  "#1e2e4b",
+  "#2f3f62",
+  "#41567b",
+  "#567b9e", // 清晰的蓝色渐变
+  "#283c54",
+  "#3a4f73",
+  "#4c698f",
+  "#6486b0", // 蓝色的温暖渐变
+];

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-19 16:22:48
- * @LastEditTime: 2024-11-22 14:43:53
+ * @LastEditTime: 2024-11-27 14:50:45
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/Cp.js
@@ -9,7 +9,10 @@
 // 风能利用系数图 散点折线图
 // 用途：分析风能利用系数（Cp）与风速或叶尖速比的关系。
 // 适用场景：风机效率优化。
+
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风速与功率输出对比",
   },
@@ -83,7 +86,10 @@ export const option = {
         [0, 0],
         [30, 120], // 假设风速为30 m/s时功率输出为120 kW
       ],
-      lineStyle: { color: "#144464" }, // 折线颜色
+      itemStyle: {
+        color: colorPalette[0], // 为风机A的散点设置单独的颜色
+      },
+      // lineStyle: { color: "#144464" }, // 折线颜色
       renderMode: "webgl", // 启用 WebGL 渲染
     },
     {
@@ -93,13 +99,16 @@ export const option = {
         [0, 0],
         [30, 100], // 假设风速为30 m/s时功率输出为100 kW
       ],
-      lineStyle: { color: "#e4641c" }, // 折线颜色
+      itemStyle: {
+        color: colorPalette[1], // 为风机A的散点设置单独的颜色
+      },
+      // lineStyle: { color: "#e4641c" }, // 折线颜色
       renderMode: "webgl", // 启用 WebGL 渲染
     },
     {
       name: "风机A 散点",
       symbolSize: 8,
-      color: "#348ccc",
+      // color: "#348ccc",
       data: [
         [3, 2], // 风速为3 m/s时的功率输出为2 kW
         [6, 5], // 风速为6 m/s时的功率输出为5 kW
@@ -107,13 +116,16 @@ export const option = {
         [15, 35], // 风速为15 m/s时的功率输出为35 kW
         [18, 60], // 风速为18 m/s时的功率输出为60 kW
       ],
+      itemStyle: {
+        color: colorPalette[2], // 为风机A的散点设置单独的颜色
+      },
       type: "scatter",
       renderMode: "webgl", // 启用 WebGL 渲染
     },
     {
       name: "风机B 散点",
       symbolSize: 10,
-      color: "#e4bc2c",
+      // color: "#e4bc2c",
       data: [
         [4, 3], // 风速为4 m/s时的功率输出为3 kW
         [8, 8], // 风速为8 m/s时的功率输出为8 kW
@@ -121,6 +133,9 @@ export const option = {
         [16, 50], // 风速为16 m/s时的功率输出为50 kW
         [20, 80], // 风速为20 m/s时的功率输出为80 kW
       ],
+      itemStyle: {
+        color: colorPalette[3], // 为风机A的散点设置单独的颜色
+      },
       type: "scatter",
       renderMode: "webgl", // 启用 WebGL 渲染
     },

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

@@ -1,14 +1,16 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:13:21
- * @LastEditTime: 2024-11-25 09:43:16
+ * @LastEditTime: 2024-11-27 15:04:35
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/Heatmap.js
  */
 //Heatmap-热力图
 // 风速随时间和风向的分布
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风速随时间和风向的分布",
   },

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

@@ -1,4 +1,6 @@
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "额定风速间隔数据计数",
   },

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

@@ -1,6 +1,6 @@
-const colors = ["#5470C6", "#91CC75", "#EE6666"];
+import { colorPalette } from "../color";
 export const option = {
-  color: colors,
+  color: colorPalette,
   tooltip: {
     trigger: "axis",
     axisPointer: {

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

@@ -1,14 +1,16 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:14:10
- * @LastEditTime: 2024-11-25 09:49:28
+ * @LastEditTime: 2024-11-27 17:06:24
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/boxPlot.js
  */
 //箱线图-boxPlot
 //不同季节的风速分布
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "季节的风速分布",
   },
@@ -26,6 +28,22 @@ export const option = {
       saveAsImage: { show: true },
     },
   },
+  dataZoom: [
+    {
+      type: "inside",
+      xAxisIndex: [0, 1],
+      start: 0,
+      end: 100,
+    },
+    {
+      show: true,
+      xAxisIndex: [0, 1],
+      type: "slider",
+      bottom: 10,
+      start: 0,
+      end: 100,
+    },
+  ],
   xAxis: {
     type: "category",
     data: ["春季", "夏季", "秋季", "冬季"],

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

@@ -1,14 +1,16 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:17:31
- * @LastEditTime: 2024-11-25 09:43:28
+ * @LastEditTime: 2024-11-27 15:04:43
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/hexbin.js
  */
 // 蜂巢图-Hexbin
 // 风速和风向的联合分布
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风速和风向的联合分布",
   },

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-19 16:24:20
- * @LastEditTime: 2024-11-25 09:43:57
+ * @LastEditTime: 2024-11-27 15:04:49
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/histogram.js
@@ -11,7 +11,9 @@
 // 适用场景：风速频率统计、资源分布分析。
 // 实现建议：
 // 使用 ECharts 的直方图。
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风速分布直方图",
   },

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

@@ -4,7 +4,9 @@
 // 实现建议：
 // 使用 ECharts 的折线图。
 // xAxis 为风速，yAxis 为功率。
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风速-功率曲线图",
   },

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:19:45
- * @LastEditTime: 2024-11-25 09:44:44
+ * @LastEditTime: 2024-11-27 15:05:13
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/pareto.js
@@ -9,7 +9,32 @@
 // 帕累托图-pareto
 // 风电场设备故障类型及累积影响
 // 帕累托图通常用于显示数据的分类贡献和累积比例。
+
+import * as echarts from "echarts/core";
+import { BarChart, LineChart } from "echarts/charts";
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  ToolboxComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import { GraphicComponent } from "echarts/components"; // 引入 graphic 模块
+
+echarts.use([
+  BarChart,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  ToolboxComponent,
+  CanvasRenderer,
+  GraphicComponent,
+]);
+
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "设备故障类型及累积",
   },
@@ -53,8 +78,22 @@ export const option = {
       name: "故障频率",
       type: "bar",
       data: [50, 30, 10, 5, 5],
+      showBackground: true,
       itemStyle: {
-        color: "#5793f3",
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#83bff6" },
+          { offset: 0.5, color: "#188df0" },
+          { offset: 1, color: "#188df0" },
+        ]),
+      },
+      emphasis: {
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#2378f7" },
+            { offset: 0.7, color: "#2378f7" },
+            { offset: 1, color: "#83bff6" },
+          ]),
+        },
       },
     },
     {

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

@@ -1,6 +1,8 @@
 // 风电场发电量来源占比
 // 饼图用于显示不同类别占比，直观展现数据的构成情况。
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风电场发电量来源占比",
     left: "center",

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

@@ -8,7 +8,9 @@
  */
 // 雷达图-radar
 // 示例：不同风电场的性能评价
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风电场性能",
   },

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-26 17:34:51
+ * @LastEditTime: 2024-11-27 15:05:30
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/roseChart.js
@@ -12,7 +12,9 @@
 // 实现建议：
 // ECharts 的极坐标 + 柱状图。
 // 使用 polar 和 radiusAxis 配置。
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风速或风力分布",
   },

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

@@ -9,7 +9,9 @@
 // 流图-sankeyDiagram
 // 示例：风能转化过程的能量流 -流图用于分析风能利用效率及能量流失情况。
 // 流图用于显示能量或资源在不同阶段的流动和分配。
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风能转化过程的能量流失情况",
   },

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

@@ -1,4 +1,6 @@
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风速分布",
   },
@@ -33,6 +35,11 @@ export const option = {
       ], // [风向, 风速, 数据点大小]
       // symbolSize: (data) => data[2], // 根据大小调整气泡尺寸
       renderMode: "webgl", // 启用 WebGL 渲染
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: "rgba(25, 100, 150, 0.5)",
+        shadowOffsetY: 5,
+      },
     },
   ],
   tooltip: {

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

@@ -11,7 +11,9 @@
 // 适用场景：风机运行监控。
 // 实现建议：
 // 使用堆叠柱状图。
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风机状态",
   },

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

@@ -1,14 +1,16 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:16:47
- * @LastEditTime: 2024-11-25 09:46:47
+ * @LastEditTime: 2024-11-27 15:05:51
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/timeSeries.js
  */
 //时间序列图 timeSeries
 //风速变化趋势
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风速变化趋势",
   },

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

@@ -8,7 +8,9 @@
  */
 // 瀑布图-Waterfall
 // 示例：风速到发电量的损耗分析
+import { colorPalette } from "../color";
 export const option = {
+  color: colorPalette,
   title: {
     text: "风速到发电量的损耗分析",
   },

src/store/dragChart.js

@@ -79,7 +79,7 @@ export default {
     },
     // 更新图表
     updateChart(state, data) {
-      console.log("更改了图表组件", data.index, data);
+      // console.log("更改了图表组件", data.index, data);
       if (state.currentChartList[data.index]) {
         state.currentChartList[data.index] = Object.assign(
           state.currentChartList[data.index],

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-26 16:36:29
+ * @LastEditTime: 2024-11-27 15:23:51
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/utils/chartLogic/index.js
@@ -13,7 +13,9 @@ import { handleRadarChartLogic } from "./modules/radar";
 import { handleCpChartLogic } from "./modules/cp";
 import { handlePieChartLogic } from "./modules/pie";
 import { handleRoseChartChartLogic } from "./modules/roseChart";
-
+import { handlestackedBarChartLogic } from "./modules/stackedBar";
+import { handleParetoChartLogic } from "./modules/pareto";
+import { handleBoxPlotChartLogic } from "./modules/boxPlot";
 export {
   handleBarChartLogic,
   handleScatterChartLogic,
@@ -21,4 +23,7 @@ export {
   handleCpChartLogic,
   handlePieChartLogic,
   handleRoseChartChartLogic,
+  handlestackedBarChartLogic,
+  handleParetoChartLogic,
+  handleBoxPlotChartLogic,
 };

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-22 14:13:07
+ * @LastEditTime: 2024-11-27 15:03:25
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/utils/chartLogic/modules/barAndLine.js

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

@@ -0,0 +1,116 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-27 15:20:57
+ * @LastEditTime: 2024-11-27 17:09:21
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/boxPlot.js
+ */
+import { filterData } from "../dargChartFIlter";
+export function handleBoxPlotChartLogic(
+  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 || [];
+        // 排除 null 数据和不符合筛选条件的数据
+        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;
+  }
+
+  // 设置 X 轴
+  const xData = formLabelAlign.Xdata.flatMap((item) =>
+    item.data.map((val) => val[item.label])
+  ).filter((val) => val !== null && val !== undefined); // 排除 null 和 undefined
+  item.option.xAxis = {
+    ...item.option.xAxis,
+    // data: [...new Set(xData)],
+    data: xData,
+    name: formLabelAlign.Xlable,
+  };
+
+  // 设置 Y 轴
+  item.option.yAxis = {
+    ...item.option.yAxis,
+    name: formLabelAlign.Ylable,
+  };
+
+  // 生成 boxplot 数据
+  if (item.Ydata.length > 4 && item.Ydata[4]?.data?.length > 0) {
+    // 初始化 series 数据
+    item.option.series = [];
+    const boxplotData = [];
+    const dataLength = item.Ydata[0]?.data?.length || 0;
+
+    for (let i = 0; i < dataLength; i++) {
+      // 获取并解析值
+      const min = item.Ydata[0]?.data[i]?.[item.Ydata[0].label] ?? null;
+      const q1 = item.Ydata[1]?.data[i]?.[item.Ydata[1].label] ?? null;
+      const median = item.Ydata[2]?.data[i]?.[item.Ydata[2].label] ?? null;
+      const q3 = item.Ydata[3]?.data[i]?.[item.Ydata[3].label] ?? null;
+      const max = item.Ydata[4]?.data[i]?.[item.Ydata[4].label] ?? null;
+
+      // 解析为浮点数
+      const values = [min, q1, median, q3, max].map((val) =>
+        val !== null ? parseFloat(val) : null
+      );
+
+      // 检查所有值是否有效
+      if (values.every((v) => v !== null && !isNaN(v))) {
+        boxplotData.push(values);
+      }
+    }
+
+    // 添加到 series
+    item.option.series.push({
+      type: "boxplot",
+      data: boxplotData,
+    });
+  }
+}

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

@@ -1,4 +1,5 @@
 import { filterData } from "../dargChartFIlter";
+
 import { getFormattedLabels, getFormattedSeries } from "../../configFn";
 //赋值需要给所有的X和Y赋值，拿到过滤的数据是用来渲染图表的，不需要保存
 // 通用函数，生成折线图或散点图的 series 数据
@@ -8,6 +9,18 @@ function generateSeriesData(dataSource, xData, yData, labelKey) {
       name: item.label,
       type: labelKey, // 'line' 或 'scatter'
       renderMode: "webgl", // 启用 WebGL 渲染
+      showSymbol: labelKey === "line" ? true : undefined,
+      // itemStyle: {
+      //   color: colorPalette[ind], // 为风机A的散点设置单独的颜色
+      // },
+      // itemStyle:
+      //   labelKey === "scatter"
+      //     ? {
+      //         shadowBlur: 3,
+      //         shadowColor: "rgba(25, 100, 150, 0.3)",
+      //         shadowOffsetY: 1.5,
+      //       }
+      //     : {},
       data: item.data
         ?.map((val, valInd) => {
           if (val === null) {
@@ -118,7 +131,6 @@ export function handleCpChartLogic(
       item.ScatterYdata,
       "scatter"
     );
-
     // 合并折线图和散点图的数据
     item.option.series = [...lineSeries, ...scatterSeries];
   }

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

@@ -0,0 +1,246 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-27 09:59:10
+ * @LastEditTime: 2024-11-27 14:32:23
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/pareto.js
+ */
+//pareto 怕雷特图（折线柱状图）
+import { filterData } from "../dargChartFIlter";
+import * as echarts from "echarts/core";
+import { BarChart, LineChart } from "echarts/charts";
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  ToolboxComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import { GraphicComponent } from "echarts/components"; // 引入 graphic 模块
+
+echarts.use([
+  BarChart,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  ToolboxComponent,
+  CanvasRenderer,
+  GraphicComponent,
+]);
+
+//赋值需要给所有的X和Y赋值，拿到过滤的数据是用来渲染图表的，不需要保存
+function generateSeriesData(dataSource, xData, yData, labelKey) {
+  return dataSource?.map((item, ind) => {
+    return {
+      name: item.label,
+      type: labelKey, // 'line' 或 'bar'
+      renderMode: "webgl", // 启用 WebGL 渲染
+      showBackground: true,
+      smooth: labelKey === "line" ? true : undefined,
+      lineStyle:
+        labelKey === "line"
+          ? {
+              color: "#d14a61",
+            }
+          : undefined,
+      itemStyle:
+        labelKey === "bar"
+          ? {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#83bff6" },
+                { offset: 0.5, color: "#188df0" },
+                { offset: 1, color: "#188df0" },
+              ]),
+            }
+          : undefined,
+      emphasis: {
+        itemStyle:
+          labelKey === "bar"
+            ? {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#2378f7" },
+                  { offset: 0.7, color: "#2378f7" },
+                  { offset: 1, color: "#83bff6" },
+                ]),
+              }
+            : undefined,
+      },
+      data: item.data
+        ?.map((val, valInd) => {
+          if (val === null) {
+            // 如果 val 为 null，直接跳过当前的散点
+            return null;
+          }
+          // 返回有效的散点数据
+          return [
+            xData[ind]?.data[valInd][xData[ind].label], // x轴数据
+            val[item.label], // y轴数据
+          ];
+        })
+        .filter(Boolean), // 使用 filter 去除 null 值
+    };
+  });
+}
+
+export function handleParetoChartLogic(
+  item,
+  formLabelAlign,
+  formFilterAlign,
+  isFilter,
+  type
+) {
+  // 数据筛选逻辑
+  const filterResult = [
+    ...formLabelAlign.LineYdata,
+    ...formLabelAlign.BarYdata,
+  ].map((yItem, index) => {
+    if (formFilterAlign[index]?.filters.length > 0) {
+      return {
+        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])
+            ? val
+            : null;
+        }),
+      };
+    } else {
+      return yItem;
+    }
+  });
+
+  // 条件筛选逻辑
+  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.LineXdata = formLabelAlign.LineXdata;
+  item.LineYdata = formLabelAlign.LineYdata.map((filterItem) =>
+    filterList.find((findItem) => filterItem.id === findItem.id)
+  ).filter(Boolean);
+
+  item.BarXdata = formLabelAlign.BarXdata;
+  item.BarYdata = formLabelAlign.BarYdata.map((filterItem) =>
+    filterList.find((findItem) => filterItem.id === findItem.id)
+  ).filter(Boolean);
+  const xData = [
+    ...formLabelAlign.LineXdata.map((item) => {
+      return item.data.map((val) => val[item.label]);
+    }),
+    ...formLabelAlign.BarXdata.map((item) =>
+      item.data.map((val) => val[item.label])
+    ),
+  ].flat();
+
+  // 使用 Set 去除重复值
+  const uniqueXData = [...new Set(xData)];
+  item.option.xAxis = {
+    ...item.option.xAxis,
+    type: "category", // 确保 x 轴是分类轴
+    data: uniqueXData,
+    name: formLabelAlign.Xlable,
+    axisLabel: {
+      rotate: 45, // x轴标签旋转，避免重叠
+      //   interval: 0, // 确保所有标签都显示
+      formatter: (value) => value, // 确保标签文本正确显示
+      // 控制标签的间距，避免标签重叠
+      //   margin: 50, // 增加标签与轴线之间的间距
+    },
+    barCategoryGap: "10%", // 调整柱状图之间的间距
+  };
+
+  item.option.grid = {
+    left: "10%", // 左边留出更多空间
+    right: "10%", // 右边留出更多空间
+    bottom: "15%", // 底部留出空间
+    top: "15%", // 顶部留出空间
+  };
+
+  item.option.yAxis = [
+    {
+      type: "value", // 左侧 y 轴用于折状图
+      name: formLabelAlign.YRightLable,
+      position: "left",
+      axisLine: { show: true },
+      axisTick: { show: false },
+      splitLine: { show: true },
+      nameTextStyle: {
+        fontWeight: "bold",
+        fontSize: 12,
+      },
+    },
+    {
+      type: "value", // 右侧 y 轴用于柱线图（累计值或百分比）
+      name: formLabelAlign.YLeftLable,
+      position: "right",
+      axisLine: { show: true },
+      axisTick: { show: false },
+      splitLine: { show: false }, // 不显示分隔线
+      nameTextStyle: {
+        fontWeight: "bold",
+        fontSize: 12,
+      },
+    },
+  ];
+
+  // 如果 LineYdata 中有数据，生成折线图数据并添加到 series
+  if (item.LineYdata[0]?.data?.length > 0) {
+    const lineSeries = generateSeriesData(
+      item.LineYdata,
+      item.LineXdata,
+      item.LineYdata,
+      "line"
+    );
+    lineSeries.forEach((series) => {
+      series.yAxisIndex = 1; // 将折线图的数据绑定到右侧 y 轴
+    });
+
+    const scatterSeries = generateSeriesData(
+      item.BarYdata,
+      item.BarXdata,
+      item.BarYdata,
+      "bar"
+    );
+    scatterSeries.forEach((series) => {
+      series.yAxisIndex = 0; // 将柱状图的数据绑定到左侧 y 轴
+      series.stack = "stacked"; // 设置为堆叠模式
+    });
+    // item.option.visualMap = [
+    //   {
+    //     show: false,
+    //     type: "continuous",
+    //     seriesIndex: 0,
+    //   },
+    // ];
+    // 合并折线图和柱状图的数据
+    item.option.series = [...lineSeries, ...scatterSeries];
+  }
+}

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

@@ -122,6 +122,27 @@ export function handleScatterChartLogic(
           //   return `X轴数据:<br>${xTooltipData}<br>Y轴数据:<br>${yTooltipData}`;
           // },
         },
+        itemStyle: {
+          shadowBlur: 3,
+          shadowColor: "rgba(25, 100, 150, 0.3)",
+          shadowOffsetY: 1.5,
+          // color: {
+          //   type: "radial",
+          //   x: 0.4,
+          //   y: 0.3,
+          //   r: 1,
+          //   colorStops: [
+          //     {
+          //       offset: 0,
+          //       color: "#f90",
+          //     },
+          //     {
+          //       offset: 1,
+          //       color: "#F00",
+          //     },
+          //   ],
+          // },
+        },
       };
     });
   }

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

@@ -0,0 +1,114 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-27 09:36:28
+ * @LastEditTime: 2024-11-27 09:44:49
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/stackedBar.js
+ */
+//stackedBar 堆叠柱状图
+import { filterData } from "../dargChartFIlter";
+import { getFormattedLabels, getFormattedSeries } from "../../configFn";
+export function handlestackedBarChartLogic(
+  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;
+  }
+
+  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) {
+    let series = [];
+    item.Ydata.forEach((item) => {
+      series.push({
+        name: item.label,
+        type: "bar",
+        stack: "d",
+        data: item.data.map(
+          (data) => parseFloat(data !== null && data[item.label]) || 0
+        ), // 将数据转换为数值
+      });
+    });
+    item.option.series = series;
+  }
+  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/chartTitle.vue

@@ -84,7 +84,7 @@
             <el-tooltip
               content="添加指标值"
               placement="bottom-start"
-              v-if="curEdit.type !== 'roseChart'"
+              v-if="curEdit.type !== 'roseChart' && curEdit.type !== 'pie'"
             >
               <i
                 @click="handleMetrics('init')"
@@ -93,6 +93,16 @@
               ></i>
             </el-tooltip>
           </div>
+          <el-tooltip
+            content="按顺序添加指标值，不添加则不显示图表"
+            placement="bottom-start"
+            v-if="curEdit.type === 'boxPlot'"
+          >
+            <div style="color: red; font-size: 12px">
+              最小值-Q1-中位数-Q3-最大值
+            </div>
+          </el-tooltip>
+
           <template v-for="(item, ind) in formLabelAlign.Ydata">
             <div class="attributeItemData">
               <el-select
@@ -111,7 +121,7 @@
                 ></el-option>
               </el-select>
               <el-tooltip
-                v-if="curEdit.type !== 'roseChart'"
+                v-if="curEdit.type !== 'roseChart' && curEdit.type !== 'pie'"
                 :content="
                   formLabelAlign.Ydata.length <= 1
                     ? '该指标不可删除，最少存在一组指标'
@@ -134,7 +144,10 @@
           </template>
         </el-form-item>
       </template>
-      <el-form-item v-if="curEdit.type === 'pareto'" label="柱纬度标签">
+      <el-form-item
+        v-if="curEdit.type === 'pareto' || curEdit.type === 'Cp'"
+        label="线纬度标签"
+      >
         <div
           slot="label"
           style="
@@ -143,26 +156,26 @@
             justify-content: space-between;
           "
         >
-          <span>柱纬度标签</span>
-          <el-tooltip content="添加纬度" placement="bottom-start">
+          <span>线纬度标签</span>
+          <!-- <el-tooltip content="添加纬度" placement="bottom-start">
             <i
               @click="
-                formLabelAlign.BarXdata.push({ lable: '', data: [], id: '' })
+                formLabelAlign.LineXdata.push({ lable: '', data: [], id: '' })
               "
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
-          </el-tooltip>
+          </el-tooltip> -->
         </div>
-        <template v-for="(item, ind) in formLabelAlign.BarXdata">
+        <template v-for="(item, ind) in formLabelAlign.LineXdata">
           <div class="attributeItemData">
             <el-select
               style="margin: 5px 0"
               :key="ind + 'select'"
-              v-model="formLabelAlign.BarXdata[ind].id"
+              v-model="formLabelAlign.LineXdata[ind].id"
               placeholder="请先进行数据配置"
               :disabled="disabled"
-              @change="handleXdata('bar')"
+              @change="handleXdata('line')"
             >
               <el-option
                 v-for="item in selectData"
@@ -171,9 +184,9 @@
                 :key="item.id + ind"
               ></el-option>
             </el-select>
-            <el-tooltip
+            <!-- <el-tooltip
               :content="
-                formLabelAlign.BarXdata.length <= 1
+                formLabelAlign.LineXdata.length <= 1
                   ? '该指标不可删除，最少存在一组指标'
                   : '删除该指标'
               "
@@ -181,19 +194,22 @@
             >
               <el-button
                 type="text"
-                :disabled="formLabelAlign.BarXdata.length <= 1"
-                @click="removeXdata(ind, 'bar')"
+                :disabled="formLabelAlign.LineXdata.length <= 1"
+                @click="removeXdata(ind, 'line')"
               >
                 <i
                   class="el-icon-delete"
                   style="font-size: 16px; color: red; padding: 0 0 0 10px"
                 ></i
               ></el-button>
-            </el-tooltip>
+            </el-tooltip> -->
           </div>
         </template>
       </el-form-item>
-      <el-form-item v-if="curEdit.type === 'pareto'" label="柱指标值">
+      <el-form-item
+        v-if="curEdit.type === 'pareto' || curEdit.type === 'Cp'"
+        label="线指标值"
+      >
         <div
           slot="label"
           style="
@@ -202,24 +218,28 @@
             justify-content: space-between;
           "
         >
-          <span>柱指标值</span>
-          <el-tooltip content="添加柱指标值" placement="bottom-start">
+          <span>线指标值</span>
+          <el-tooltip
+            content="添加线指标值"
+            placement="bottom-start"
+            v-if="curEdit.type !== 'pareto'"
+          >
             <i
-              @click="handleMetrics('bar')"
+              @click="handleMetrics('line')"
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
           </el-tooltip>
         </div>
-        <template v-for="(item, ind) in formLabelAlign.BarYdata">
+        <template v-for="(item, ind) in formLabelAlign.LineYdata">
           <div class="attributeItemData">
             <el-select
               style="margin: 5px 0"
               :key="ind + 'select' + 'zhibiao'"
-              v-model="formLabelAlign.BarYdata[ind].id"
+              v-model="formLabelAlign.LineYdata[ind].id"
               placeholder="请先进行数据配置"
               :disabled="disabled"
-              @change="handleYdata(ind, 'bar')"
+              @change="handleYdata(ind, 'line')"
             >
               <el-option
                 v-for="item in selectData"
@@ -229,8 +249,9 @@
               ></el-option>
             </el-select>
             <el-tooltip
+              v-if="curEdit.type !== 'pareto'"
               :content="
-                formLabelAlign.BarYdata.length <= 1
+                formLabelAlign.LineYdata.length <= 1
                   ? '该指标不可删除，最少存在一组指标'
                   : '删除该指标'
               "
@@ -238,8 +259,8 @@
             >
               <el-button
                 type="text"
-                :disabled="formLabelAlign.BarYdata.length <= 1"
-                @click="removeYdata(ind, 'bar')"
+                :disabled="formLabelAlign.LineYdata.length <= 1"
+                @click="removeYdata(ind, 'line')"
               >
                 <i
                   class="el-icon-delete"
@@ -250,10 +271,7 @@
           </div>
         </template>
       </el-form-item>
-      <el-form-item
-        v-if="curEdit.type === 'pareto' || curEdit.type === 'Cp'"
-        label="线纬度标签"
-      >
+      <el-form-item v-if="curEdit.type === 'pareto'" label="柱纬度标签">
         <div
           slot="label"
           style="
@@ -262,26 +280,30 @@
             justify-content: space-between;
           "
         >
-          <span>线纬度标签</span>
-          <!-- <el-tooltip content="添加纬度" placement="bottom-start">
+          <span>柱纬度标签</span>
+          <el-tooltip
+            content="添加纬度"
+            placement="bottom-start"
+            v-if="curEdit.type !== 'pareto'"
+          >
             <i
               @click="
-                formLabelAlign.LineXdata.push({ lable: '', data: [], id: '' })
+                formLabelAlign.BarXdata.push({ lable: '', data: [], id: '' })
               "
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
-          </el-tooltip> -->
+          </el-tooltip>
         </div>
-        <template v-for="(item, ind) in formLabelAlign.LineXdata">
+        <template v-for="(item, ind) in formLabelAlign.BarXdata">
           <div class="attributeItemData">
             <el-select
               style="margin: 5px 0"
               :key="ind + 'select'"
-              v-model="formLabelAlign.LineXdata[ind].id"
+              v-model="formLabelAlign.BarXdata[ind].id"
               placeholder="请先进行数据配置"
               :disabled="disabled"
-              @change="handleXdata('line')"
+              @change="handleXdata('bar')"
             >
               <el-option
                 v-for="item in selectData"
@@ -290,9 +312,10 @@
                 :key="item.id + ind"
               ></el-option>
             </el-select>
-            <!-- <el-tooltip
+            <el-tooltip
+              v-if="curEdit.type !== 'pareto'"
               :content="
-                formLabelAlign.LineXdata.length <= 1
+                formLabelAlign.BarXdata.length <= 1
                   ? '该指标不可删除，最少存在一组指标'
                   : '删除该指标'
               "
@@ -300,22 +323,19 @@
             >
               <el-button
                 type="text"
-                :disabled="formLabelAlign.LineXdata.length <= 1"
-                @click="removeXdata(ind, 'line')"
+                :disabled="formLabelAlign.BarXdata.length <= 1"
+                @click="removeXdata(ind, 'bar')"
               >
                 <i
                   class="el-icon-delete"
                   style="font-size: 16px; color: red; padding: 0 0 0 10px"
                 ></i
               ></el-button>
-            </el-tooltip> -->
+            </el-tooltip>
           </div>
         </template>
       </el-form-item>
-      <el-form-item
-        v-if="curEdit.type === 'pareto' || curEdit.type === 'Cp'"
-        label="线指标值"
-      >
+      <el-form-item v-if="curEdit.type === 'pareto'" label="柱指标值">
         <div
           slot="label"
           style="
@@ -324,24 +344,28 @@
             justify-content: space-between;
           "
         >
-          <span>线指标值</span>
-          <el-tooltip content="添加线指标值" placement="bottom-start">
+          <span>柱指标值</span>
+          <el-tooltip
+            v-if="curEdit.type !== 'pareto'"
+            content="添加柱指标值"
+            placement="bottom-start"
+          >
             <i
-              @click="handleMetrics('line')"
+              @click="handleMetrics('bar')"
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
           </el-tooltip>
         </div>
-        <template v-for="(item, ind) in formLabelAlign.LineYdata">
+        <template v-for="(item, ind) in formLabelAlign.BarYdata">
           <div class="attributeItemData">
             <el-select
               style="margin: 5px 0"
               :key="ind + 'select' + 'zhibiao'"
-              v-model="formLabelAlign.LineYdata[ind].id"
+              v-model="formLabelAlign.BarYdata[ind].id"
               placeholder="请先进行数据配置"
               :disabled="disabled"
-              @change="handleYdata(ind, 'line')"
+              @change="handleYdata(ind, 'bar')"
             >
               <el-option
                 v-for="item in selectData"
@@ -351,8 +375,9 @@
               ></el-option>
             </el-select>
             <el-tooltip
+              v-if="curEdit.type !== 'pareto'"
               :content="
-                formLabelAlign.LineYdata.length <= 1
+                formLabelAlign.BarYdata.length <= 1
                   ? '该指标不可删除，最少存在一组指标'
                   : '删除该指标'
               "
@@ -360,8 +385,8 @@
             >
               <el-button
                 type="text"
-                :disabled="formLabelAlign.LineYdata.length <= 1"
-                @click="removeYdata(ind, 'line')"
+                :disabled="formLabelAlign.BarYdata.length <= 1"
+                @click="removeYdata(ind, 'bar')"
               >
                 <i
                   class="el-icon-delete"
@@ -510,23 +535,22 @@
         v-if="
           curEdit.type !== 'pie' &&
           curEdit.type !== 'radar' &&
-          curEdit.type !== 'roseChart'
+          curEdit.type !== 'roseChart' &&
+          curEdit.type !== 'pareto'
         "
       >
         <el-input v-model="formLabelAlign.Ylable"></el-input>
       </el-form-item>
+      <el-form-item label="柱Y轴名称" v-if="curEdit.type === 'pareto'">
+        <el-input v-model="formLabelAlign.YRightLable"></el-input>
+      </el-form-item>
+      <el-form-item label="线Y轴名称" v-if="curEdit.type === 'pareto'">
+        <el-input v-model="formLabelAlign.YLeftLable"></el-input>
+      </el-form-item>
     </el-form>
     <div style="margin: 20px 0">
       <el-divider style="height: 2px"></el-divider>
     </div>
-    <!--     
-      <el-collapse v-if="formLabelAlign.Ydata[0].data.length > 0">
-      <el-collapse v-if="filteredYData.length > 0 && filteredYData[0].data.length > 0">
- -->
-    <!-- 
-      v-for="(itemFilter, filterInd) in formLabelAlign.Ydata" 
-      v-for="(itemFilter, filterInd) in filteredYData"
-      -->
     <el-collapse
       v-if="filteredYData.length > 0 && filteredYData[0].data.length > 0"
     >
@@ -620,6 +644,9 @@ import {
   handleCpChartLogic,
   handleRoseChartChartLogic,
   handlePieChartLogic,
+  handlestackedBarChartLogic,
+  handleParetoChartLogic,
+  handleBoxPlotChartLogic,
 } from "./chartLogic/index";
 import Vue from "vue";
 export default {
@@ -723,6 +750,8 @@ export default {
         text: "",
         Xlable: "",
         Ylable: "",
+        YRightLable: "",
+        YLeftLable: "",
       },
       disabled: true,
       selectData: [], //可选择的数据
@@ -738,11 +767,20 @@ export default {
       const { BarYdata, LineYdata, ScatterYdata, Ydata } = this.formLabelAlign;
       if (type === "pareto") {
         console.log([...BarYdata, ...LineYdata], "[...BarYdata, ...LineYdata]");
-        return [...BarYdata, ...LineYdata];
+        return [...LineYdata, ...BarYdata];
       } else if (type === "Cp") {
         return [...LineYdata, ...ScatterYdata];
       } else if (
-        ["bar", "line", "radar", "scatter", "pie", "roseChart"].includes(type)
+        [
+          "bar",
+          "line",
+          "radar",
+          "scatter",
+          "pie",
+          "roseChart",
+          "stackedBar",
+          "boxPlot",
+        ].includes(type)
       ) {
         return Ydata;
       }
@@ -784,6 +822,15 @@ export default {
       console.log(type, "tianjia yige");
       switch (type) {
         case "init":
+          if (
+            this.curEdit.type === "boxPlot" &&
+            this.formLabelAlign.Ydata.length >= 5
+          ) {
+            this.$message.warning(
+              "箱线图指标只允许添加最小值, Q1, 中位数, Q3, 最大值几位"
+            );
+            return;
+          }
           this.formLabelAlign.Ydata.push({ lable: "", data: [], id: "" });
           this.formFilterAlign.push({
             filters: [],
@@ -967,6 +1014,14 @@ export default {
           text: this.curEdit.option.title?.text || "",
           Xlable: this.curEdit.option.xAxis?.name || "",
           Ylable: this.curEdit.option.yAxis?.name || "",
+          YRightLable:
+            this.curEdit.type === "pareto"
+              ? this.curEdit.option.yAxis[1].name
+              : "",
+          YLeftLable:
+            this.curEdit.type === "pareto"
+              ? this.curEdit.option.yAxis[0].name
+              : "",
           Xdata:
             this.curEdit.Xdata.length > 0
               ? this.curEdit.Xdata
@@ -1206,6 +1261,30 @@ export default {
           isFilter,
           this.curEdit.type
         );
+      } else if (this.curEdit.type === "stackedBar") {
+        handlestackedBarChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
+      } else if (this.curEdit.type === "pareto") {
+        handleParetoChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
+      } else if (this.curEdit.type === "boxPlot") {
+        handleBoxPlotChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
       }
       //设置仓库
       this.setFormFilterAlignData({
@@ -1216,6 +1295,7 @@ export default {
         ...item,
         LineYdata: this.formLabelAlign.LineYdata,
         ScatterYdata: this.formLabelAlign.ScatterYdata,
+        BarYdata: this.formLabelAlign.BarYdata,
         Ydata: this.formLabelAlign.Ydata, //还是给所有的数据保存起来了，并不是过滤后的数据
         formFilterAlignData: this.formFilterAlign,
       }); // 更新图表

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-26 14:16:44
+ * @LastEditTime: 2024-11-27 15:39:28
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartsContent.vue
@@ -193,7 +193,7 @@ export default {
 <style scoped lang="scss">
 .chartContiner {
   background-color: pink;
-  width: 200px;
+  width: 210px;
   height: 100%;
 
   ::v-deep .card {