热力图bug 修复图形组件

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:13:21
- * @LastEditTime: 2024-12-17 16:27:13
+ * @LastEditTime: 2025-08-18 10:19:17
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/Heatmap.js
@@ -20,6 +20,12 @@ export const option = {
   legend: {
     top: "bottom",
   },
+  grid: {
+    left: "15%",
+    right: "15%",
+    top: "20%",
+    bottom: "20%",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
@@ -40,7 +46,7 @@ export const option = {
     calculable: false,
     realtime: false,
     orient: "vertical",
-    right: 20,
+    right: 0,
     top: "center",
     color: ["#1A285E", "#379CC2", "#D7EFB7"],
   },
@@ -52,12 +58,19 @@ export const option = {
         [0, 0, 5],
         [1, 0, 100],
         [2, 0, 35],
+        [3, 0, 50],
         [0, 1, 70],
         [1, 1, 8],
         [2, 1, 12],
+        [3, 1, 90],
         [0, 2, 80],
         [1, 2, 58],
         [2, 2, 92],
+        [3, 2, 40],
+        [0, 3, 85],
+        [1, 3, 50],
+        [2, 3, 95],
+        [3, 3, 50],
       ], // [x, y, 风速值]
       emphasis: {
         itemStyle: {

src/views/overview/components/yaw_error3/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:12:55
- * @LastEditTime: 2025-08-01 09:24:56
+ * @LastEditTime: 2025-08-18 09:11:39
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error3/index.vue
@@ -40,7 +40,15 @@
           </div>
         </div>
       </el-alert>
-      <VirtualList
+      <LineAndScatter
+        :setUpImgData="[]"
+        key="item.batchCodeindex"
+        index="`${new Date().getTime()}`index"
+        ref="item.batchCode"
+        :fileAddr="''"
+      >
+      </LineAndScatter>
+      <!-- <VirtualList
         :list="[...generalFilesDatas, ...diagramRelationsDatas]"
         keyField="fileAddr"
         :itemSize="500"
@@ -57,22 +65,13 @@
         >
           分析总图 :
         </div>
-        <LineAndScatter
-          v-if="item.batchCode && !item.fieldEngineCode"
-          :setUpImgData="setUpImgData"
-          :key="item.batchCode + index"
-          :index="`${new Date().getTime()}` + index"
-          :ref="item.batchCode"
-          :fileAddr="item.fileAddr"
-        >
-        </LineAndScatter>
-      </VirtualList>
-      <el-empty
+      </VirtualList> -->
+      <!-- <el-empty
         description="暂无分析记录"
         v-if="
           generalFilesDatas.length === 0 && diagramRelationsDatas.length === 0
         "
-      ></el-empty>
+      ></el-empty> -->
       <el-dialog
         v-if="isShowDescription"
         title="添加评论"

src/views/performance/components/chartsCom/LineAndScatter.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:30:10
- * @LastEditTime: 2025-07-30 17:02:41
+ * @LastEditTime: 2025-08-18 09:42:29
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/LineAndScatter.vue
@@ -46,7 +46,7 @@
       v-loading="loading"
       :id="`bar-chart${index}`"
       :ref="`bar-chart${index}`"
-      style="width: 100%; height: 400px"
+      style="width: 100%; height: 500px"
     >
       <el-empty v-if="isError" description="请求失败"></el-empty>
     </div>
@@ -60,6 +60,8 @@ import axios from "axios";
 import { colorSchemes } from "@/views/overview/js/colors.js";
 import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin
 import { mapState } from "vuex";
+import yaw_error3 from "./json/yaw_error3.json";
+
 export default {
   props: {
     fileAddr: {
@@ -115,12 +117,13 @@ export default {
     },
   },
   mounted() {
-    if (this.fileAddr) {
-      this.$nextTick(() => {
-        this.color1 = this.colorSchemes[0].colors;
-        this.getData();
-      });
-    }
+    this.getData();
+    // if (this.fileAddr) {
+    //   this.$nextTick(() => {
+    //     this.color1 = this.colorSchemes[0].colors;
+    //     this.getData();
+    //   });
+    // }
   },
   methods: {
     // 获取数据
@@ -145,6 +148,14 @@ export default {
           this.isError = true;
           this.loading = false;
         }
+      } else {
+        this.chartData = yaw_error3;
+        // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
+        nextTick(() => {
+          this.drawChart();
+        });
+        this.isError = false;
+        this.loading = false;
       }
     },
     // 绘制图表
@@ -180,6 +191,7 @@ export default {
             // size: 12,
             symbol: index === 0 ? "circle" : index === 1 ? "x" : "etc.", // 也可以是 "circle", "diamond", "x", etc.
           },
+
           hovertemplate:
             `${this.chartData.xaixs}:` +
             ` %{x} <br> ` +
@@ -187,7 +199,7 @@ export default {
             "%{y} <br>",
         };
         // ✅ 设置 y2 绑定逻辑
-        if (index === 3) {
+        if (index === 1 || index === 2) {
           chartConfig.yaxis = "y2";
         }
         if (this.chartType === "line") {
@@ -209,6 +221,13 @@ export default {
             weight: "bold",
           },
         },
+        legend: {
+          orientation: "h",
+          x: 0.5,
+          y: -0.3,
+          xanchor: "center",
+          yanchor: "top",
+        },
         xaxis: {
           title: this.chartData.xaixs || "X轴", // 横坐标标题
           gridcolor: "rgb(255,255,255)",
@@ -248,13 +267,11 @@ export default {
           position: 1, // 调整右侧轴的位置
           showline: true,
           linecolor: "#1A295D", // 设置右侧轴线颜色
+          automargin: true,
         },
-        margin: {
-          l: 50,
-          r: 50,
-          t: 50,
-          b: 50,
-        },
+        // margin: {
+        //   r: 150,
+        // },
         plot_bgcolor: "#e5ecf6",
         gridcolor: "#fff",
         bgcolor: "#e5ecf6", // 设置背景颜色

src/views/performance/components/chartsCom/json/min_pitch3.json

@@ -3,7 +3,7 @@
   "typecode": "WEM00012",
   "engineCode": "WEM00012",
   "engineTypeName": "WT2000/93",
-  "title": "叶尖速比分布-WT2000/93",
+  "title": "变桨电机温升分析",
   "xaixs": "风速(m/s)",
   "yaixs": "变桨电机温度(°C)",
   "data": [

src/views/performance/components/chartsCom/json/yaw_error3.json

@@ -0,0 +1,96 @@
+{
+  "analysisTypeCode": "偏航异常分析",
+  "typecode": "WEM00041",
+  "engineCode": "WEM00041",
+  "engineTypeName": "SL1500/90",
+  "title": "偏航异常",
+  "xaixs": "时间(年月日 时分)",
+  "yaixs": "cable Angle",
+  "data": [
+    {
+      "engineName": "cable Angle",
+      "engineCode": "WOG01312",
+      "xData": [
+        "2025-08-18 12:00",
+        "2025-08-18 12:01",
+        "2025-08-18 12:02",
+        "2025-08-18 12:03",
+        "2025-08-18 12:04",
+        "2025-08-18 12:05",
+        "2025-08-18 12:06",
+        "2025-08-18 12:07",
+        "2025-08-18 12:08",
+        "2025-08-18 12:09",
+        "2025-08-18 12:10",
+        "2025-08-18 12:11",
+        "2025-08-18 12:12",
+        "2025-08-18 12:13",
+        "2025-08-18 12:14",
+        "2025-08-18 12:15",
+        "2025-08-18 12:16",
+        "2025-08-18 12:17",
+        "2025-08-18 12:18",
+        "2025-08-18 12:19"
+      ],
+      "yData": [
+        228.197, 228.172, 228.181, 228.12, 228.186, 228.179, 228.176, 228.185,
+        228.107, 228.101, 228.19, 228.196, 228.151, 228.152, 228.152, 228.135,
+        228.199, 228.198, 228.18, 228.179
+      ]
+    },
+    {
+      "engineName": "Yaw State",
+      "engineCode": "WOG01313",
+      "xData": [
+        "2025-08-18 12:00",
+        "2025-08-18 12:01",
+        "2025-08-18 12:02",
+        "2025-08-18 12:03",
+        "2025-08-18 12:04",
+        "2025-08-18 12:05",
+        "2025-08-18 12:06",
+        "2025-08-18 12:07",
+        "2025-08-18 12:08",
+        "2025-08-18 12:09",
+        "2025-08-18 12:10",
+        "2025-08-18 12:11",
+        "2025-08-18 12:12",
+        "2025-08-18 12:13",
+        "2025-08-18 12:14",
+        "2025-08-18 12:15",
+        "2025-08-18 12:16",
+        "2025-08-18 12:17",
+        "2025-08-18 12:18",
+        "2025-08-18 12:19"
+      ],
+      "yData": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      "engineName": "Unwinding State",
+      "engineCode": "WOG01314",
+      "xData": [
+        "2025-08-18 12:00",
+        "2025-08-18 12:01",
+        "2025-08-18 12:02",
+        "2025-08-18 12:03",
+        "2025-08-18 12:04",
+        "2025-08-18 12:05",
+        "2025-08-18 12:06",
+        "2025-08-18 12:07",
+        "2025-08-18 12:08",
+        "2025-08-18 12:09",
+        "2025-08-18 12:10",
+        "2025-08-18 12:11",
+        "2025-08-18 12:12",
+        "2025-08-18 12:13",
+        "2025-08-18 12:14",
+        "2025-08-18 12:15",
+        "2025-08-18 12:16",
+        "2025-08-18 12:17",
+        "2025-08-18 12:18",
+        "2025-08-18 12:19"
+      ],
+      "yData": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    }
+  ]
+}

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

@@ -65,6 +65,7 @@ export function handleHeatmapPlotChartLogic(
     item.Ydata = formLabelAlign.Ydata;
   }
   // 生成数据
+  console.log(item, "item heatmap");
   if (
     item.Xdata.length > 1 &&
     item.Xdata[1]?.data?.length > 0 &&
@@ -75,13 +76,13 @@ export function handleHeatmapPlotChartLogic(
     item.option.series = [];
 
     // 提取 X 和 Y 轴数据
-    // 提取 X轴 和 Y轴 数据
-    const xAxisData = item.Xdata[0].data.map(
-      (xItem) => xItem[item.Xdata[0].label]
-    );
-    const yAxisData = item.Xdata[1].data.map(
-      (yItem) => yItem[item.Xdata[1].label]
-    );
+    const xAxisData = item.Xdata[0].data
+      .map((xItem) => xItem[item.Xdata[0].label])
+      .filter((val) => val && val !== "");
+    const yAxisData = item.Xdata[1].data
+      .map((yItem) => yItem[item.Xdata[1].label])
+      .filter((val) => val && val !== "");
+
     // 设置 ECharts 的 x 和 y 轴
     item.option.xAxis = {
       ...item.option.xAxis,
@@ -96,34 +97,28 @@ export function handleHeatmapPlotChartLogic(
       name: formLabelAlign.Ylable,
       data: yAxisData,
     };
-    // 设置 x 和 y 轴标签
+
     // 准备热力图数据
     const heatmapData = [];
 
-    // 遍历每个 SalesID 和 PrdctID 的组合
     for (let i = 0; i < yAxisData.length; i++) {
       for (let j = 0; j < xAxisData.length; j++) {
-        // 找到对应的 Amount 值
-        const amountValue =
-          item.Ydata[0].data[j] && item.Ydata[0].data[i]
-            ? item.Ydata[0].data[j][item.Ydata[0].label]
-            : null;
-
-        // 如果找到有效值，则将其加入热力图数据中
-        if (amountValue !== null || amountValue !== undefined) {
-          heatmapData.push([i, j, amountValue]); // [yIndex, xIndex, value]
-        }
+        // 对应 Ydata 中每个风机的数据，i 对应时间索引
+        const valueStr = item.Ydata[j]?.data[i]?.[item.Ydata[j].label];
+        const value =
+          valueStr !== undefined && valueStr !== "" ? Number(valueStr) : 0;
+        heatmapData.push([i, j, value]); // [yIndex, xIndex, value]
       }
     }
 
-    // 生成热力图数据
+    // 生成热力图 series
     item.option.series = [
       {
         type: "heatmap",
         data: heatmapData,
         progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
-        progressive: true, // 启用渐进式渲染
-        renderMode: "webgl", // 启用 WebGL 渲染
+        progressive: true,
+        renderMode: "webgl",
         emphasis: {
           itemStyle: {
             shadowBlur: 10,

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

@@ -116,8 +116,7 @@
                 // curEdit.type !== 'roseChart' &&
                 curEdit.type !== 'pie' &&
                 curEdit.type !== 'doughnut' &&
-                curEdit.type !== 'sankeyDiagram' &&
-                curEdit.type !== 'Heatmap'
+                curEdit.type !== 'sankeyDiagram'
               "
             >
               <i
@@ -902,7 +901,6 @@ export default {
       }
     },
     handleMetrics(type) {
-      console.log(type, "type");
       switch (type) {
         case "init":
           if (
@@ -968,6 +966,7 @@ export default {
     handleXdata(type) {
       switch (type) {
         case "init":
+          console.log("handleXdata", this.formLabelAlign.Xdata);
           this.formLabelAlign.Xdata = this.updateAxisData(
             this.formLabelAlign.Xdata
           );
@@ -992,7 +991,6 @@ export default {
     },
     //指标值 处理整合数据
     handleYdata(ind, type) {
-      console.log(type, "type handleYdata");
       switch (type) {
         case "init":
           this.formLabelAlign.Ydata = this.updateAxisData(
@@ -1030,6 +1028,7 @@ export default {
       });
     },
     updateAxisData(axisData) {
+      console.log(" before update  axisData", axisData);
       axisData.forEach((item, index) => {
         let selected = this.selectData.find(
           (val) => (val && val.id) === (item && item.id)
@@ -1280,6 +1279,7 @@ export default {
     changeChart(isFilter) {
       if (!this.curEdit?.option) return; // 确保 curEdit 和 option 存在
       const item = JSON.parse(JSON.stringify(this.curEdit));
+      console.log(item, "item 全部数据渲染");
       if (this.curEdit.type === "scatter" || this.curEdit.type === "radar") {
         //判断散点选择的是否为number 或可转为number
         const isAllNumbers = (data) =>