toolbox图形组件

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-27 15:03:25
+ * @LastEditTime: 2025-08-28 16:00:07
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/utils/chartLogic/modules/barAndLine.js
@@ -19,7 +19,7 @@ export function handleBarChartLogic(
   // 封装柱状图的具体逻辑
   if (isFilter === "filter") {
     // 数据筛选逻辑，
-    const filterResult = formLabelAlign.Ydata.map((yItem, index) => ({
+    const filterResult = formLabelAlign?.Ydata.map((yItem, index) => ({
       label: yItem.label,
       id: yItem.id,
       data: yItem.data.map((val) => {
@@ -58,22 +58,59 @@ export function handleBarChartLogic(
         };
       }
     });
-    item.Xdata = formLabelAlign.Xdata;
+    item.Xdata = formLabelAlign?.Xdata;
     item.Ydata = filterList;
   } else {
-    item.Xdata = formLabelAlign.Xdata;
-    item.Ydata = formLabelAlign.Ydata;
+    item.Xdata = formLabelAlign?.Xdata;
+    item.Ydata = formLabelAlign?.Ydata;
   }
 
   item.option.xAxis = {
     ...item.option.xAxis,
-    name: formLabelAlign.Xlable,
+    name: formLabelAlign?.Xlable,
   };
   item.option.yAxis = {
     ...item.option.yAxis,
-    name: formLabelAlign.Ylable,
+    name: formLabelAlign?.Ylable
+      ? formLabelAlign?.Ylable
+      : item.option.yAxis.name,
   };
+  item.option.title = {
+    text: formLabelAlign.text ?? item.option.title?.text ?? "",
+    textStyle: {
+      color:
+        formLabelAlign.titleColor ??
+        item.option.title?.textStyle?.color ??
+        "#464646",
+      fontSize: formLabelAlign.titleColor
+        ? formLabelAlign.size
+        : item.option.title?.textStyle?.fontSize ?? 18,
+    },
+  };
+
+  item.option.backgroundColor =
+    formLabelAlign.background || item.option.backgroundColor || "transparent";
 
+  // 定义一个位置映射
+  const legendMap = {
+    top: { top: "top", left: "center" },
+    bottom: { top: "bottom", left: "center" },
+    left: { top: "center", left: "left", type: "scroll", orient: "vertical" },
+    right: { top: "center", left: "right", type: "scroll", orient: "vertical" },
+  };
+  // 获取 legendPosition，没有就默认 right
+  const legendPosition = formLabelAlign.legendPosition
+    ? legendMap[formLabelAlign.legendPosition]
+    : item.option.legend || legendMap.bottom;
+
+  // 设置 legend 配置
+  item.option.legend = {
+    ...legendPosition,
+    show: formLabelAlign.enableLegend || item.option.legend.show,
+  };
+  item.option.color = item.option.color.map((colorItem, colorInd) => {
+    return formLabelAlign?.dataColor?.[colorInd] ?? colorItem;
+  });
   if (item.Ydata[0]?.data?.length > 0) {
     item.option.series = getFormattedSeries(item.Ydata, type);
   }
@@ -100,4 +137,5 @@ export function handleBarChartLogic(
       },
     };
   }
+  // console.log(item, "最终item");
 }

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

@@ -883,6 +883,10 @@ export default {
       deep: true, // 深度监听
     },
   },
+  mounted() {
+    console.log("chartTitle页面");
+    this.changeData();
+  },
   methods: {
     ...mapMutations("dragChart", [
       "updateChart",
@@ -1430,6 +1434,7 @@ export default {
         id: this.curEdit.id,
         data: JSON.parse(JSON.stringify(this.formFilterAlign)),
       });
+      // console.log(this.curEdit, "curEdit");
       this.updateChart({
         ...item,
         LineYdata: this.formLabelAlign.LineYdata,

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/configFn.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-12 09:27:50
- * @LastEditTime: 2025-08-15 11:32:23
+ * @LastEditTime: 2025-08-28 15:56:38
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/configFn.js
@@ -25,7 +25,7 @@ export const getFormattedLabels = (index, lableData) => {
 export const getFormattedSeries = (data, chartType) => {
   console.log(chartType, "chartType  Fn 文件");
   let series = [];
-  data.forEach((item) => {
+  data.forEach((item, ind) => {
     series.push({
       name: item.label,
       type: chartType === "lineHighlight" ? "line" : chartType,
@@ -41,6 +41,7 @@ export const getFormattedSeries = (data, chartType) => {
           { type: "min", name: "Min" },
         ],
       },
+
       markLine: {
         data: [{ type: "average", name: "Avg" }],
       },

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-08-14 11:28:28
- * @LastEditTime: 2025-08-27 15:32:46
+ * @LastEditTime: 2025-08-28 16:02:25
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/toolbox.vue
@@ -78,41 +78,12 @@
         >
           <span>标题颜色</span>
           <el-color-picker
+            show-alpha
             v-model="formLabelAlign.titleColor"
           ></el-color-picker>
         </div>
       </el-form-item>
-      <el-form-item label="背景">
-        <div
-          slot="label"
-          style="
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          "
-        >
-          <span>背景</span>
-          <el-switch v-model="formLabelAlign.enableBackground"></el-switch>
-        </div>
-      </el-form-item>
-      <el-form-item label="透明度">
-        <div
-          slot="label"
-          style="
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          "
-        >
-          <span>透明度</span>
-          <el-slider
-            style="width: 90px"
-            :min="14"
-            :max="40"
-            v-model="formLabelAlign.transparency"
-          ></el-slider>
-        </div>
-      </el-form-item>
+
       <el-form-item label="背景颜色">
         <div
           slot="label"
@@ -124,6 +95,7 @@
         >
           <span>背景颜色</span>
           <el-color-picker
+            show-alpha
             v-model="formLabelAlign.background"
           ></el-color-picker>
         </div>
@@ -135,10 +107,11 @@
         >
           <span>数据颜色</span>
         </div>
-        <template v-for="(item, ind) in formLabelAlign.Ydata">
+        <template v-for="(item, ind) in filteredYData">
           <div class="attributeItemData">
-            <span></span>
+            <span>{{ item.label }}</span>
             <el-color-picker
+              show-alpha
               v-model="formLabelAlign.dataColor[ind]"
             ></el-color-picker>
           </div>
@@ -186,15 +159,13 @@ export default {
       formLabelAlign: {
         enableLegend: null,
         legendPosition: "",
-        size: 14,
-        titleColor: "#000",
-        enableBackground: null,
-        background: "",
-        transparency: null, //透明度
+        size: 18,
+        titleColor: "#464646",
+        background: null,
         dataColor: [],
       },
       disabled: true,
-      selectData: [], //可选择的数据
+      selectColorData: [], //可选择的数据
     };
   },
   computed: {
@@ -202,6 +173,36 @@ export default {
       currentChartList: "currentChartList",
       dataBaseCheckList: "dataBaseCheckList",
     }),
+    filteredYData() {
+      const { type } = this.curEdit;
+      const { BarYdata, LineYdata, ScatterYdata, Ydata } = this.curEdit;
+      if (type === "pareto") {
+        return [...LineYdata, ...BarYdata];
+      } else if (type === "Cp") {
+        return [...LineYdata, ...ScatterYdata];
+      } else if (
+        [
+          "bar",
+          "line",
+          "radar",
+          "scatter",
+          "pie",
+          // "doughnut",
+          // "lineHighlight",
+          "horizontalStackedBar1",
+          "funnelPlot2",
+          "roseChart",
+          "stackedBar",
+          "boxPlot",
+          "sankeyDiagram",
+          "Heatmap",
+        ].includes(type)
+      ) {
+        console.log(Ydata, "filteredYData");
+        return Ydata;
+      }
+      return []; // 默认返回空数组
+    },
   },
   watch: {
     curEdit() {
@@ -209,18 +210,17 @@ export default {
     },
     formLabelAlign: {
       handler(nval) {
-        this.changeChart("filter");
+        this.changeChart("");
       },
       deep: true,
     },
   },
+  mounted() {
+    console.log("toolbox页面");
+    this.changeData();
+  },
   methods: {
-    ...mapMutations("dragChart", [
-      "updateChart",
-      "setCurEdit",
-      "setFormFilterAlignData",
-    ]),
-
+    ...mapMutations("dragChart", ["updateChart"]),
     changeData() {
       if (this.$refs.form) {
         this.$refs.form.resetFields();
@@ -229,22 +229,17 @@ export default {
       if (this.curEdit && this.curEdit.option) {
         // 使用 this.$set 替代直接赋值
         this.$set(this, "formLabelAlign", {
-          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
-              : "",
+          enableLegend: this.curEdit.option.legend?.show,
+          legendPosition: this.curEdit.option.legend?.top || "top",
+          size: this.curEdit.option.title?.textStyle?.fontSize || 18,
+          titleColor: this.curEdit.option.title?.textStyle?.color || "#000",
+          background: this.curEdit.option.backgroundColor
+            ? this.curEdit.option.backgroundColor
+            : "transparent",
+          dataColor: [],
         });
         // 查找是否存在数据
-        const index = this.currentChartList.findIndex(
-          (item) => item.id === this.curEdit.id
-        );
+        console.log(this.curEdit, "this.curEdit.option");
       } else {
         this.$message.warning("请选择一个图表进行编辑");
       }
@@ -253,150 +248,249 @@ export default {
     changeChart(isFilter) {
       if (!this.curEdit?.option) return; // 确保 curEdit 和 option 存在
       const item = JSON.parse(JSON.stringify(this.curEdit));
-      if (this.curEdit.type === "scatter" || this.curEdit.type === "radar") {
-        //判断散点选择的是否为number 或可转为number
-        const isAllNumbers = (data) =>
-          data.every((val) =>
-            val.data.every((vals) => {
-              return !isNaN(
-                Number(vals[val.label] == undefined ? 0 : vals[val.label])
-              );
-            })
-          );
-        const isAllNumbersXdata = isAllNumbers(this.formLabelAlign.Xdata);
-        const isAllNumbersYdata = isAllNumbers(this.formLabelAlign.Ydata);
-        if (
-          this.curEdit.type === "scatter" &&
-          (!isAllNumbersXdata || !isAllNumbersYdata)
-        ) {
-          this.$message.warning("请选择数值项进行散点图绘制");
-          return;
-        }
-        if (this.curEdit.type === "radar" && !isAllNumbersYdata) {
-          this.$message.warning("指标值请选择数值项进行散点图绘制");
-          return;
-        }
-      }
       // 确保标题和坐标轴对象存在
       item.option.title = item.option.title || {};
       Object.assign(item.option.title, { text: this.formLabelAlign.text });
+      const defalueFormLabelAlign = {
+        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
+            : [
+                {
+                  label: "",
+                  data: [],
+                  id: "",
+                },
+              ],
+        Ydata:
+          this.curEdit.Ydata.length > 0
+            ? this.curEdit.Ydata
+            : [
+                {
+                  label: "",
+                  data: [],
+                  id: "",
+                },
+              ],
+        BarXdata:
+          this.curEdit.BarXdata.length > 0
+            ? this.curEdit.BarXdata
+            : [
+                {
+                  label: "",
+                  data: [],
+                  id: "",
+                },
+              ],
+        BarYdata:
+          this.curEdit.BarYdata.length > 0
+            ? this.curEdit.BarYdata
+            : [
+                {
+                  label: "",
+                  data: [],
+                  id: "",
+                },
+              ],
+        LineXdata:
+          this.curEdit.LineXdata.length > 0
+            ? this.curEdit.LineXdata
+            : [
+                {
+                  label: "",
+                  data: [],
+                  id: "",
+                },
+              ],
+        LineYdata:
+          this.curEdit.LineYdata.length > 0
+            ? this.curEdit.LineYdata
+            : [
+                {
+                  label: "",
+                  data: [],
+                  id: "",
+                },
+              ],
+        ScatterXdata:
+          this.curEdit.ScatterXdata.length > 0
+            ? this.curEdit.ScatterXdata
+            : [
+                {
+                  label: "",
+                  data: [],
+                  id: "",
+                },
+              ],
+        ScatterYdata:
+          this.curEdit.ScatterYdata.length > 0
+            ? this.curEdit.ScatterYdata
+            : [
+                {
+                  label: "",
+                  data: [],
+                  id: "",
+                },
+              ],
+      };
       if (this.curEdit.type === "bar" || this.curEdit.type === "line") {
         handleBarChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "scatter") {
         handleScatterChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "radar") {
         handleRadarChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "Cp") {
         handleCpChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "roseChart") {
         handleRoseChartChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "pie") {
         handlePieChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "stackedBar") {
         handlestackedBarChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "pareto") {
         handleParetoChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "boxPlot") {
         handleBoxPlotChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "sankeyDiagram") {
         handleSankeyDiagramPlotChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "Heatmap") {
         handleHeatmapPlotChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "horizontalStackedBar1") {
         handlHorizontalStackedBar1ChartLogic(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       } else if (this.curEdit.type === "funnelPlot2") {
         handleFunnelPlot2Chart(
           item,
-          this.formLabelAlign,
-          this.formFilterAlign,
+          {
+            ...defalueFormLabelAlign,
+            ...this.formLabelAlign,
+          },
+          item.formFilterAlignData,
           isFilter,
           this.curEdit.type
         );
       }
-      //设置仓库
-      this.setFormFilterAlignData({
-        id: this.curEdit.id,
-        data: JSON.parse(JSON.stringify(this.formFilterAlign)),
-      });
+
       this.updateChart({
         ...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: 2025-08-25 14:27:43
+ * @LastEditTime: 2025-08-28 15:10:40
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartsContent.vue
@@ -30,7 +30,7 @@
       <el-divider></el-divider>
       <el-tabs v-model="activeName" @tab-click="handleChangeApi">
         <template v-for="item in configApi">
-          <el-tab-pane :name="item.name">
+          <el-tab-pane :lazy="false" :name="item.name">
             <template #label>
               <el-tooltip
                 class="item"
@@ -48,6 +48,7 @@
             </template>
             <div class="attributes">
               <component
+                v-show="activeName === item.name"
                 v-bind:is="currentView"
                 style="margin-top: 20px"
                 :curEdit="curEdit"
@@ -181,7 +182,6 @@ export default {
     handleChangeApi() {
       const item = this.configApi.find((item) => item.name === this.activeName);
       this.description = item && item.desc;
-      console.log("handleChangeApi 参数:", this.activeName, item);
       try {
         this.registerComponent(item.value).then((component) => {
           this.currentView = component;