Home Esplora Aiuto
Registrati Accedi
rui.jiang
/
performance-test
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

修改label 滑过展示

liujiejie 3 mesi fa
parent
57e957a081
commit
76664e51f3
20 ha cambiato i file con 511 aggiunte e 503 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 68 115
      aa.html
  2. 2 2
      src/components/map/index.vue
  3. 4 0
      src/views/performance/components/PlotlyCharts.vue
  4. 152 203
      src/views/performance/components/chartsCom/3DDrawingChart.vue
  5. 6 26
      src/views/performance/components/chartsCom/BarChart.vue
  6. 23 12
      src/views/performance/components/chartsCom/BoxLineCharts.vue
  7. 5 1
      src/views/performance/components/chartsCom/FaultAll.vue
  8. 3 1
      src/views/performance/components/chartsCom/FaultUnit.vue
  9. 6 1
      src/views/performance/components/chartsCom/GeneratorTemperature.vue
  10. 8 2
      src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue
  11. 141 91
      src/views/performance/components/chartsCom/Time3DChart.vue
  12. 7 1
      src/views/performance/components/chartsCom/TwoDMarkersChart.vue
  13. 5 0
      src/views/performance/components/chartsCom/WindRoseChart.vue
  14. 8 0
      src/views/performance/components/chartsCom/YewErrorBarChart.vue
  15. 5 0
      src/views/performance/components/chartsCom/lineAndChildLine.vue
  16. 6 1
      src/views/performance/components/chartsCom/lineChart.vue
  17. 52 44
      src/views/performance/components/chartsCom/lineChartsFen.vue
  18. 2 2
      src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
  19. 2 0
      src/views/performance/components/chartsCom/yawErrorBarSum.vue
  20. 6 1
      src/views/performance/components/chartsCom/yawErrorLine.vue

+ 68 - 115
aa.html
Vedi File 

@@ -1,132 +1,85 @@
 
 <!DOCTYPE html>
 
-<html>
 
+<html lang="en">
 
   <head>
 
-    <meta charset="utf-8" />
 
-    <title>3D Scatter Chart with ECharts-GL</title>
 
-    <!-- 引入 ECharts 和 ECharts-GL -->
 
-    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>3D Scatter Plot</title>
 
+    <!-- 使用备用 CDN 加载 Plotly.js -->
 
+    <script src="https://cdn.bootcdn.net/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
 
   </head>
 
   <body>
 
-    <!-- 准备一个具备宽高的 DOM 容器 -->
 
-    <div id="main" style="width: 600px; height: 600px"></div>
 
+    <div id="plotly-3d-chart" style="width: 100%; height: 600px"></div>
 
 
     <script>
 
-      // 初始化图表
 
-      const myChart = echarts.init(document.getElementById("main"));
 
+      // 原始数据
 
+      const xData = [5.1, 4.9, 4.7, 4.6, 5.0, 5.4, 4.6, 5.0, 4.4, 4.9]; // sepal_length
 
+      const yData = [3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1]; // sepal_width
 
+      const zData = [0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.2]; // petal_width
 
+      const species = [
 
+        "setosa",
 
+        "setosa",
 
+        "setosa",
 
+        "setosa",
 
+        "setosa",
 
+        "versicolor",
 
+        "versicolor",
 
+        "versicolor",
 
+        "virginica",
 
+        "virginica",
 
+      ];
 
 
-      // 生成随机测试数据（100个点）
 
-      function generateRandomData(count) {
 
-        let data = [];
 
-        for (let i = 0; i < count; i++) {
 
-          data.push([
 
-            Math.random() * 10, // x
 
-            Math.random() * 10, // y
 
-            Math.random() * 10, // z
 
-            Math.random(), // 用于颜色映射的第四个维度（可选）
 
-          ]);
 
-        }
 
-        return data;
 
-      }
 
-
 
-      // 配置项
 
-      const option = {
 
-        // 启用 3D 坐标系
 
-        globe: {
 
-          environment: "auto",
 
-          backgroundColor: "#FFFFFF", // 设置背景为白色
 
-          baseTexture: null, // 移除默认的球体纹理（不显示黑色球体）
 
-        },
 
-        // 3D 坐标轴配置
 
-        xAxis3D: {
 
-          type: "value",
 
-          name: "X Axis",
 
-        },
 
-        yAxis3D: {
 
-          type: "value",
 
-          name: "Y Axis",
 
-        },
 
-        zAxis3D: {
 
-          type: "value",
 
-          name: "Z Axis",
 
-        },
 
-        // 3D 网格配置
 
-        grid3D: {
 
-          viewControl: {
 
-            autoRotate: true, // 自动旋转
 
-            autoRotateSpeed: 10, // 旋转速度（1-10）
 
-          },
 
-          axisPointer: {
 
-            show: true,
 
-            color: "#fff",
 
+      // 创建 trace 数组
 
+      const data = [
 
+        {
 
+          type: "scatter3d",
 
+          mode: "markers",
 
+          x: xData.slice(0, 5), // Setosa
 
+          y: yData.slice(0, 5),
 
+          z: zData.slice(0, 5),
 
+          marker: {
 
+            color: ["red", "red", "red", "red", "red"], // 为 Setosa 设置颜色
 
+            size: 10,
 
           },
 
+          name: "Setosa", // 图例中的名称
 
         },
 
-        // 数据集（使用随机生成的数据）
 
-        dataset: {
 
-          source: generateRandomData(100),
 
-        },
 
-        // 系列配置
 
-        series: [
 
-          {
 
-            type: "scatter3D",
 
-            // 数据维度映射（x, y, z）
 
-            encode: {
 
-              x: 0,
 
-              y: 1,
 
-              z: 2,
 
-            },
 
-            // 点的大小
 
-            symbolSize: 8,
 
-            // 颜色配置（使用第四个维度）
 
-            itemStyle: {
 
-              color: function (params) {
 
-                // 使用第四个维度值映射到颜色
 
-                const value = params.value[3];
 
-                return echarts.color.modifyHSL(
 
-                  "#5A94DF",
 
-                  undefined,
 
-                  undefined,
 
-                  undefined,
 
-                  value * 0.5
 
-                );
 
-              },
 
-            },
 
+        {
 
+          type: "scatter3d",
 
+          mode: "markers",
 
+          x: xData.slice(5, 8), // Versicolor
 
+          y: yData.slice(5, 8),
 
+          z: zData.slice(5, 8),
 
+          marker: {
 
+            color: ["green", "green", "green"], // 为 Versicolor 设置颜色
 
+            size: 10,
 
           },
 
-        ],
 
-        // 工具栏
 
-        toolbox: {
 
-          show: true,
 
-          feature: {
 
-            saveAsImage: {
 
-              show: true,
 
-              type: "png",
 
-            },
 
-            myTool: {
 
-              show: true,
 
-              title: "切换视角",
 
-              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z",
 
-              onclick: function () {
 
-                myChart.setOption({
 
-                  grid3D: {
 
-                    viewControl: {
 
-                      alpha: 45,
 
-                      beta: 30,
 
-                    },
 
-                  },
 
-                });
 
-              },
 
-            },
 
+          name: "Versicolor", // 图例中的名称
 
+        },
 
+        {
 
+          type: "scatter3d",
 
+          mode: "markers",
 
+          x: xData.slice(8), // Virginica
 
+          y: yData.slice(8),
 
+          z: zData.slice(8),
 
+          marker: {
 
+            color: ["blue", "blue"], // 为 Virginica 设置颜色
 
+            size: 10,
 
           },
 
+          name: "Virginica", // 图例中的名称
 
         },
 
-      };
 
+      ];
 
 
-      // 应用配置
 
-      myChart.setOption(option);
 
+      const layout = {
 
+        title: "3D Scatter Plot of Iris Dataset",
 
+        scene: {
 
+          xaxis: { title: "Sepal Length" },
 
+          yaxis: { title: "Sepal Width" },
 
+          zaxis: { title: "Petal Width" },
 
+        },
 
+        showlegend: true, // 显示图例
 
+      };
 
 
-      // 窗口大小改变时自动调整图表
 
-      window.addEventListener("resize", function () {
 
-        myChart.resize();
 
-      });
 
+      // 使用 Plotly 绘制图表
 
+      Plotly.newPlot("plotly-3d-chart", data, layout);
 
     </script>
 
   </body>
 
 </html>

+ 2 - 2
src/components/map/index.vue
Vedi File 

@@ -240,8 +240,8 @@ export default {
 
         new TileLayer({
 
           source: new XYZ({
 
             // url: "http://127.0.0.1:8010/tiles/{z}/{x}/{y}.png", //本地
 
-            // url: "http://192.168.50.235/tiles/{z}/{x}/{y}.png", //内网
 
-            url: "http://106.120.102.238:18000/tiles/{z}/{x}/{y}.png", //外网
 
+            url: "http://192.168.50.235/tiles/{z}/{x}/{y}.png", //内网
 
+            // url: "http://106.120.102.238:18000/tiles/{z}/{x}/{y}.png", //外网
 
             // url: "http://10.96.137.5:9080/tiles/{z}/{x}/{y}.png", //大～#@唐
 
           }),
 
         }),

+ 4 - 0
src/views/performance/components/PlotlyCharts.vue
Vedi File 

@@ -155,6 +155,7 @@ export default {
 
                 ? this.color1[index % this.color1.length]
 
                 : this.config.colors[index % this.config.colors.length],
 
           },
 
+          hovertemplate: `风速: %{x} m/s<br>功率: %{y} kW<br><extra></extra>`, // 设置 hovertemplate
 
         });
 
       });
 
 
@@ -165,6 +166,7 @@ export default {
 
         name: this.config.powerConfig.name,
 
         line: this.config.powerConfig.line,
 
         marker: this.config.powerConfig.marker,
 
+        hovertemplate: `风速: %{x} m/s<br>合同功率: %{y} kW<br><extra></extra>`, // 设置 hovertemplate
 
       });
 
       // console.log(this.powerCurveData, "this.powerCurveData");
 
       const layout = {
 
@@ -212,6 +214,7 @@ export default {
 
             line: {
 
               color: isHighlighted ? "#1c77b3" : "#d3d3d3",
 
             },
 
+            hovertemplate: `风速: %{x} m/s<br>功率: %{y} kW<br><extra></extra>`, // 设置 hovertemplate
 
           };
 
 
           if (isHighlighted) {
 
@@ -233,6 +236,7 @@ export default {
 
             width: 1, // 设置线条的宽度为1
 
           },
 
           marker: { color: "red", size: 4 },
 
+          hovertemplate: `风速: %{x} m/s<br>合同功率: %{y} kW<br><extra></extra>`, // 设置 hovertemplate
 
         });
 
         Plotly.newPlot(`chart-${this.inds}`, data, layout);
 
       }

+ 152 - 203
src/views/performance/components/chartsCom/3DDrawingChart.vue
Vedi File 

@@ -1,34 +1,63 @@
 
 <template>
 
-  <div style="height: 600px">
 
-    <div
 
-      :id="`plotly-3d-chart-` + index"
 
-      style="width: 100%; height: 600px"
 
-    ></div>
 
-    <div
 
-      v-loading="loading"
 
-      :id="`plotly-3d-chart-` + index"
 
-      ref="plotlyChart"
 
-      style="height: 600px"
 
-    >
 
-      <el-empty v-if="isError" description="请求失败"></el-empty>
 
+  <div>
 
+    <!-- 配色方案选择和图表类型切换 -->
 
+    <div style="display: flex; align-items: center; padding-top: 20px">
 
+      <div style="margin-right: 20px; display: flex; align-items: center">
 
+        <el-select
 
+          size="small"
 
+          v-model="color1"
 
+          @change="updateChartColor"
 
+          placeholder="选择配色方案"
 
+          style="width: 200px"
 
+        >
 
+          <el-option
 
+            v-for="(scheme, index) in colorSchemes"
 
+            :key="index"
 
+            :label="scheme.label"
 
+            :value="scheme.colors"
 
+            :style="getOptionStyle(scheme.colors)"
 
+          ></el-option>
 
+        </el-select>
 
+      </div>
 
     </div>
 
-  </div>
 
-  <!-- <div>
 
-    <div
 
-      v-loading="loading"
 
-      :id="`plotly-3d-chart-` + index"
 
-      ref="plotlyChart"
 
-      style="height: 600px"
 
-    >
 
-      <el-empty v-if="isError" description="请求失败"></el-empty>
 
+    <!-- 点大小控制 -->
 
+    <div style="display: flex; align-items: center">
 
+      <el-slider
 
+        v-model="pointSize"
 
+        :min="1"
 
+        :max="15"
 
+        :step="1"
 
+        label="点的大小"
 
+        show-stops
 
+        style="width: 150px"
 
+        @change="updateChartColor"
 
+      ></el-slider>
 
+    </div>
 
+
 
+    <!-- 图表展示区域 -->
 
+    <div style="height: 600px">
 
+      <div
 
+        :id="`plotly-3d-chart-` + index"
 
+        style="width: 100%; height: 600px"
 
+      ></div>
 
+      <div
 
+        v-loading="loading"
 
+        :id="`plotly-3d-chart-` + index"
 
+        ref="plotlyChart"
 
+        style="height: 600px"
 
+      >
 
+        <el-empty v-if="isError" description="请求失败"></el-empty>
 
+      </div>
 
     </div>
 
-  </div> -->
 
+  </div>
 
 </template>
 
 
 <script>
 
 import Plotly from "plotly.js-dist";
 
 import axios from "axios";
 
 import { myMixin } from "@/mixins/chartRequestMixin";
 
+import { colorSchemes } from "@/views/overview/js/colors";
 
+
 
 export default {
 
   props: {
 
     fileAddr: {
 
@@ -42,8 +71,27 @@ export default {
 
   },
 
   data() {
 
     return {
 
-      color1: "",
 
+      color1: [
 
+        "#DBEEBC",
 
+        "#A8D7BE",
 
+        "#8ECAC1",
 
+        "#77BDC2",
 
+        "#64ADC2",
 
+        "#559ABE",
 
+        "#4884B7",
 
+        "#406DAB",
 
+        "#3856A0",
 
+        "#314291",
 
+        "#28357A",
 
+        "#1A285E",
 
+        "#FF7F50",
 
+        "#FFD700",
 
+        "#90EE90",
 
+      ], // 默认颜色
 
       chartData: {},
 
+      chartType: "scatter", // 当前图表类型（默认是散点图）
 
+      colorSchemes: [...colorSchemes],
 
+      pointSize: 2, // 默认点大小
 
     };
 
   },
 
   mixins: [myMixin],
 
@@ -61,13 +109,10 @@ export default {
 
           const resultChartsData = await axios.get(this.fileAddr, {
 
             cancelToken: this.cancelToken.token,
 
           });
 
-          console.log(this.fileAddr, "解析3D数据");
 
           if (typeof resultChartsData.data === "string") {
 
             let dataString = resultChartsData.data;
 
-            // 如果数据字符串的开头和结尾可能有多余的字符（比如非法字符），可以进行清理
 
             dataString = dataString.trim(); // 去除前后空格
 
-            // 如果数据包含了类似 "Infinity" 或其他无法解析的字符，替换它们
 
-            dataString = dataString.replace(/Infinity/g, '"Infinity"'); // 例如，将 "Infinity" 转换为字符串
 
+            dataString = dataString.replace(/Infinity/g, '"Infinity"'); // 替换 Infinity 为 "Infinity"
 
             try {
 
               const parsedData = JSON.parse(dataString);
 
               this.chartData = parsedData;
 
@@ -77,7 +122,6 @@ export default {
 
           } else {
 
             this.chartData = resultChartsData.data;
 
           }
 
-          // this.chartData = resultChartsData.data;
 
           this.renderChart();
 
           this.isError = false;
 
           this.loading = false;
 
@@ -87,206 +131,111 @@ export default {
 
         }
 
       }
 
     },
 
-    // renderChart() {
 
-    //   // 构造3D散点图数据
 
 
-    //   const trace = {
 
-    //     x: this.chartData.data[0].xData, // 发电机转速
 
-    //     y: this.chartData.data[0].yData, // 时间
 
-    //     z: this.chartData.data[0].zData, // 有功功率
 
-    //     mode: "markers", // 强制设置为markers，避免出现线条
 
-    //     type: "scatter3d", // 3D 散点图
 
-    //     marker: {
 
-    //       size: 2, // 点的大小
 
-    //       color: this.chartData.data[0].zData, // 根据 Z 数据设置颜色
 
-    //       colorscale: this.color1
 
-    //         ? [
 
-    //             [0, "#F9FDD2"], // 颜色从 this.color1 开始
 
-    //             [1, this.color1], // 结束颜色为其他颜色
 
-    //           ]
 
-    //         : [
 
-    //             [0, "#F9FDD2"],
 
-    //             [0.15, "#E9F6BD"],
 
-    //             [0.3, "#C2E3B9"],
 
-    //             [0.45, "#8AC8BE"],
 
-    //             [0.6, "#5CA8BF"],
 
-    //             [0.75, "#407DB3"],
 
-    //             [0.9, "#2E4C9A"],
 
-    //             [1, "#1B2973"],
 
-    //           ],
 
-    //     },
 
-    //     name: this.chartData.data[0].color, // 图例显示的名称，使用 color 数据
 
-    //     legendgroup: this.chartData.data[0].color, // 使用 color 数据作为图例组
 
-    //   };
 
-    //   const config = { scrollZoom: true };
 
+    // 更新配色方案
 
+    updateChartColor() {
 
+      this.renderChart(); // 当配色方案或点大小发生变化时重新渲染图表
 
+    },
 
 
-    //   const layout = {
 
-    //     title: this.chartData.data[0].title,
 
-    //     scene: {
 
-    //       xaxis: {
 
-    //         title: this.chartData.xaixs, // X 轴标题
 
-    //         gridcolor: "rgb(255,255,255)", // 网格线颜色
 
-    //         tickcolor: "rgb(255,255,255)",
 
-    //         backgroundcolor: "#e5ecf6",
 
-    //         showbackground: true, // 显示背景
 
-    //       },
 
-    //       yaxis: {
 
-    //         title: this.chartData.yaixs, // Y 轴标题
 
-    //         gridcolor: "rgb(255,255,255)", // 网格线颜色
 
-    //         tickcolor: "rgb(255,255,255)",
 
-    //         backgroundcolor: "#e5ecf6",
 
-    //         showbackground: true, // 显示背景
 
-    //       },
 
-    //       zaxis: {
 
-    //         title: this.chartData.zaixs, // Z 轴标题
 
-    //         gridcolor: "rgb(255,255,255)", // 网格线颜色
 
-    //         tickcolor: "rgb(255,255,255)",
 
-    //         backgroundcolor: "#e5ecf6",
 
-    //         showbackground: true, // 显示背景
 
-    //       },
 
-    //       aspectratio: {
 
-    //         x: 1, // X 轴比例
 
-    //         y: 3, // Y 轴比例
 
-    //         z: 1, // Z 轴比例（可根据需要调整）
 
-    //       },
 
-    //       plot_bgcolor: "#e5ecf6",
 
-    //       gridcolor: "#fff", // 设置网格线颜色
 
-    //       camera: {
 
-    //         center: {
 
-    //           x: 0, // 设置中心点
 
-    //           y: 0, // 设置中心点
 
-    //           z: 0, // 设置中心点
 
-    //         },
 
-    //         eye: {
 
-    //           x: 0, // 眼睛的位置
 
-    //           y: 0, // 眼睛的位置
 
-    //           z: 2.5, // 眼睛的位置
 
-    //         },
 
-    //         up: {
 
-    //           x: 0, // 设置上方向
 
-    //           y: 0, // 设置上方向
 
-    //           z: 1, // 设置上方向
 
-    //         },
 
-    //       },
 
-    //     },
 
-    //     margin: { t: 50, b: 50, l: 50, r: 50 }, // 图表边距
 
-    //     staticPlot: false,
 
-    //     legend: {
 
-    //       x: 0.8, // 图例的 X 位置
 
-    //       y: 0.9, // 图例的 Y 位置
 
-    //       title: {
 
-    //         text: this.chartData.yaixs, // 图例标题
 
-    //       },
 
-    //       bgcolor: "rgba(255, 255, 255, 0.7)", // 图例背景色
 
-    //       bordercolor: "black", // 图例边框颜色
 
-    //       borderwidth: 1, // 图例边框宽度
 
-    //     },
 
-    //   };
 
-    //   console.log(trace, "渲染图表3Ds");
 
-    //   Plotly.newPlot(`plotly-3d-chart-` + this.index, [trace], layout, config);
 
-    // },
 
-    renderChart() {
 
-      // 构造3D散点图数据
 
-      const trace = {
 
-        x: this.chartData.data[0].xData, // 发电机转速
 
-        y: this.chartData.data[0].yData, // 时间
 
-        z: this.chartData.data[0].zData, // 有功功率
 
-        mode: "markers", // 强制设置为markers，避免出现线条
 
-        type: "scatter3d", // 3D 散点图
 
-        marker: {
 
-          size: 2, // 点的大小
 
-          color: this.chartData.data[0].zData, // 这里的 zData 用于决定每个点的颜色
 
-          colorscale: this.color1
 
-            ? [
 
-                [0, "#F9FDD2"], // 颜色从 this.color1 开始
 
-                [1, this.color1], // 结束颜色为其他颜色
 
-              ]
 
-            : [
 
-                [0, "#F9FDD2"],
 
-                [0.15, "#E9F6BD"],
 
-                [0.3, "#C2E3B9"],
 
-                [0.45, "#8AC8BE"],
 
-                [0.6, "#5CA8BF"],
 
-                [0.75, "#407DB3"],
 
-                [0.9, "#2E4C9A"],
 
-                [1, "#1B2973"],
 
-              ], // 自定义颜色渐变
 
-          colorbar: {
 
-            title: this.chartData.yaixs, // 色带标题
 
-            // tickvals: [0, 0.5, 1], // 设置色带刻度值
 
-            // ticktext: ["低", "中", "高"], // 设置刻度文本
 
-            // tickmode: "array", // 使用数组模式
 
-            ticks: "outside", // 设置刻度显示方向
 
-            tickangle: 45, // 设置刻度文字角度
 
-          },
 
-        },
 
-        name: "数据系列", // 图例名称
 
-        // legendgroup: "group1", // 图例组
 
-        hovertemplate:
 
-          `${this.chartData.xaixs}:` +
 
-          ` %{x} <br> ` +
 
-          `${this.chartData.yaixs}:` +
 
-          "%{y} <br>" +
 
-          `${this.chartData.zaixs}:` +
 
-          "%{z} <br>",
 
+    // 切换图表类型
 
+    setChartType(type) {
 
+      this.chartType = type;
 
+      this.renderChart(); // 切换图表类型时重新渲染图表
 
+    },
 
+
 
+    // 获取配色选项样式
 
+    getOptionStyle(scheme) {
 
+      return {
 
+        background: `linear-gradient(to right, ${scheme.join(", ")})`,
 
+        color: "#fff",
 
+        height: "30px",
 
+        lineHeight: "30px",
 
+        borderRadius: "4px",
 
       };
 
+    },
 
+
 
+    renderChart() {
 
+      const uniqueColors = [...new Set(this.chartData.data[0].color)];
 
+      if (!this.color1) {
 
+        this.color1 = colorSchemes[0].colors;
 
+      }
 
+      const traces = uniqueColors.map((color, idx) => {
 
+        const colorData = this.chartData.data[0].color.map((c) =>
 
+          c === color ? 1 : 0
 
+        );
 
 
-      const config = { scrollZoom: true };
 
+        const trace = {
 
+          x: this.chartData.data[0].xData.filter((_, i) => colorData[i] === 1),
 
+          y: this.chartData.data[0].yData.filter((_, i) => colorData[i] === 1),
 
+          z: this.chartData.data[0].zData.filter((_, i) => colorData[i] === 1),
 
+          mode: this.chartType === "scatter" ? "markers" : "lines", // 根据选择的图表类型来设置模式
 
+          type: "scatter3d",
 
+          marker: {
 
+            size: this.pointSize, // 使用动态点大小
 
+            color: this.color1[idx], // 使用配色方案
 
+            colorscale: "YlGnBu",
 
+          },
 
+          name: ` ${color}`,
 
+          legendgroup: `group-${idx}`,
 
+          hovertemplate:
 
+            `${this.chartData.xaixs}:` +
 
+            ` %{x} <br> ` +
 
+            `${this.chartData.yaixs}:` +
 
+            "%{y} <br>" +
 
+            `${this.chartData.zaixs}:` +
 
+            "%{z} <br>",
 
+        };
 
+        return trace;
 
+      });
 
 
       const layout = {
 
         title: this.chartData.data[0].title,
 
         scene: {
 
           xaxis: {
 
-            title: this.chartData.xaixs, // X 轴标题
 
-            gridcolor: "rgb(255,255,255)", // 网格线颜色
 
+            title: this.chartData.xaixs,
 
+            gridcolor: "rgb(255,255,255)",
 
             tickcolor: "rgb(255,255,255)",
 
             backgroundcolor: "#e5ecf6",
 
-            showbackground: true, // 显示背景
 
+            showbackground: true,
 
           },
 
           yaxis: {
 
-            title: this.chartData.yaixs, // Y 轴标题
 
-            gridcolor: "rgb(255,255,255)", // 网格线颜色
 
+            title: this.chartData.yaixs,
 
+            gridcolor: "rgb(255,255,255)",
 
             tickcolor: "rgb(255,255,255)",
 
             backgroundcolor: "#e5ecf6",
 
-            showbackground: true, // 显示背景
 
+            showbackground: true,
 
           },
 
           zaxis: {
 
-            title: this.chartData.zaixs, // Z 轴标题
 
-            gridcolor: "rgb(255,255,255)", // 网格线颜色
 
+            title: this.chartData.zaixs,
 
+            gridcolor: "rgb(255,255,255)",
 
             tickcolor: "rgb(255,255,255)",
 
             backgroundcolor: "#e5ecf6",
 
-            showbackground: true, // 显示背景
 
-          },
 
-          aspectratio: {
 
-            x: 1, // X 轴比例
 
-            y: 3, // Y 轴比例
 
-            z: 1, // Z 轴比例
 
+            showbackground: true,
 
           },
 
+          // aspectratio: {
 
+          //   x: 1,
 
+          //   y: 3,
 
+          //   z: 1,
 
+          // },
 
           plot_bgcolor: "#e5ecf6",
 
-          gridcolor: "#fff", // 设置网格线颜色
 
-          camera: {
 
-            center: {
 
-              x: 0, // 设置中心点
 
-              y: 0, // 设置中心点
 
-              z: 0, // 设置中心点
 
-            },
 
-            eye: {
 
-              x: 0, // 眼睛的位置
 
-              y: 0, // 眼睛的位置
 
-              z: 2.5, // 眼睛的位置
 
-            },
 
-            up: {
 
-              x: 0, // 设置上方向
 
-              y: 0, // 设置上方向
 
-              z: 1, // 设置上方向
 
-            },
 
-          },
 
+          gridcolor: "#fff",
 
+          // camera: {
 
+          //   center: { x: 0, y: 0, z: 0 },
 
+          //   eye: { x: 0, y: 0, z: 2.5 },
 
+          //   up: { x: 0, y: 0, z: 1 },
 
+          // },
 
         },
 
-        margin: { t: 50, b: 50, l: 50, r: 50 }, // 图表边距
 
+        margin: { t: 50, b: 50, l: 50, r: 50 },
 
         staticPlot: false,
 
+        showlegend: true,
 
+        legend: {
 
+          marker: {
 
+            size: 10, // 图例中点的大小
 
+          },
 
+        },
 
       };
 
 
-      Plotly.newPlot(`plotly-3d-chart-` + this.index, [trace], layout, config);
 
+      Plotly.newPlot(`plotly-3d-chart-` + this.index, traces, layout);
 
     },
 
   },
 
 };

+ 6 - 26
src/views/performance/components/chartsCom/BarChart.vue
Vedi File 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2024-09-11 14:30:17
 
- * @LastEditTime: 2025-02-13 09:24:13
 
+ * @LastEditTime: 2025-02-21 15:18:51
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
 
@@ -121,31 +121,11 @@ export default {
 
           color: this.color1, // 折线图颜色
 
         },
 
         name: chartDataset.title || "数据", // 图例名称
 
-      };
 
-
 
-      // Normal Range Lines
 
-      const normalRangeLine = {
 
-        x: chartDataset.xData, // 横坐标数据
 
-        y: Array(chartDataset.xData.length).fill(this.normalRangeMin), // 最低值线
 
-        mode: "lines",
 
-        name: "LCL", // 图例名称（最低范围）
 
-        line: {
 
-          color: "red",
 
-          width: 2,
 
-          dash: "dash", // 虚线
 
-        },
 
-      };
 
-
 
-      const normalRangeMaxLine = {
 
-        x: chartDataset.xData, // 横坐标数据
 
-        y: Array(chartDataset.xData.length).fill(this.normalRangeMax), // 最高值线
 
-        mode: "lines",
 
-        name: "UCL", // 图例名称（最高范围）
 
-        line: {
 
-          color: "red",
 
-          width: 2,
 
-          dash: "dash", // 虚线
 
-        },
 
+        hovertemplate:
 
+          `${this.chartData.xaixs}:` +
 
+          ` %{x} <br> ` +
 
+          `${this.chartData.yaixs}:` +
 
+          "%{y} <br>",
 
       };
 
 
       const layout = {

+ 23 - 12
src/views/performance/components/chartsCom/BoxLineCharts.vue
Vedi File 

@@ -2,16 +2,18 @@
 
   <div style="width: 100%; height: 500px">
 
     <!-- 条件渲染日期范围选择器 -->
 
     <el-date-picker
 
-      v-if="isDateType(chartData.data[0]?.xData)"
 
-      <!--
 
-      只有xData是日期时才显示
 
-      --
 
-    >
 
-      v-model="dateRange" type="daterange" align="right" unlink-panels
 
-      range-separator="至" start-placeholder="开始日期"
 
-      end-placeholder="结束日期" @change="onDateRangeChange" size="mini"
 
-      style="margin: 20px 0 0 0" ></el-date-picker
 
-    >
 
+      v-if="chartData.xaixs === '时间'"
 
+      v-model="dateRange"
 
+      type="daterange"
 
+      align="right"
 
+      unlink-panels
 
+      range-separator="至"
 
+      start-placeholder="开始日期"
 
+      end-placeholder="结束日期"
 
+      @change="onDateRangeChange"
 
+      size="mini"
 
+      style="margin: 20px 0 0 0"
 
+    ></el-date-picker>
 
 
     <!-- boxLineCharts -->
 
     <div
 
@@ -89,8 +91,12 @@ export default {
 
     // 判断xData是否为日期格式
 
     isDateType(xData) {
 
       // 假设第一个元素如果是日期字符串或Date对象则为日期类型
 
-      const firstTimestamp = xData[0];
 
-      return !isNaN(Date.parse(firstTimestamp)); // 判断是否是有效日期
 
+      if (xData) {
 
+        const firstTimestamp = xData[0];
 
+        return !isNaN(Date.parse(firstTimestamp)); // 判断是否是有效日期
 
+      } else {
 
+        false;
 
+      }
 
     },
 
 
     // 过滤数据
 
@@ -151,6 +157,11 @@ export default {
 
         boxpoints: false, // 不显示散点
 
         boxmean: false, // 不显示均值
 
         name: filteredData.title,
 
+        hovertemplate:
 
+          `${this.chartData.xaixs}:` +
 
+          ` %{x} <br> ` +
 
+          `${this.chartData.yaixs}:` +
 
+          "%{y} <br>",
 
       };
 
 
       let trace2 = {}; // 初始化trace2为一个空对象

+ 5 - 1
src/views/performance/components/chartsCom/FaultAll.vue
Vedi File 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-15 14:24:59
 
- * @LastEditTime: 2025-01-15 15:55:10
 
+ * @LastEditTime: 2025-02-21 17:22:22
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultAll.vue
 
@@ -70,6 +70,8 @@ export default {
 
         type: "bar",
 
         marker: { color: "#64ADC2" }, // 蓝色柱状图
 
         name: "故障次数",
 
+        hovertemplate:
 
+          `故障类型:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟<br>",
 
       };
 
 
       // 故障时长的折线图数据（右侧 Y 轴）
 
@@ -81,6 +83,8 @@ export default {
 
         line: { color: "#1A295D" }, // 红色折线
 
         name: "故障时长",
 
         yaxis: "y2", // 使用第二个 Y 轴（右侧）
 
+        hovertemplate:
 
+          `故障类型:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟 <br>",
 
       };
 
 
       // 布局配置，设置双 Y 轴

+ 3 - 1
src/views/performance/components/chartsCom/FaultUnit.vue
Vedi File 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-15 15:49:57
 
- * @LastEditTime: 2025-01-23 09:56:11
 
+ * @LastEditTime: 2025-02-21 17:22:38
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultUntal.vue
 
@@ -56,6 +56,7 @@ export default {
 
         mode: "markers", // 散点图
 
         marker: { color: "#64ADC2", size: 10 }, // 蓝色散点
 
         name: "故障次数",
 
+        hovertemplate: `机组:` + ` %{x} <br> ` + `故障次数:` + "%{y} 分钟<br>",
 
       };
 
 
       // 故障时长的散点图数据（右侧 Y 轴）
 
@@ -66,6 +67,7 @@ export default {
 
         marker: { color: "#1A295D", size: 10 }, // 红色散点
 
         name: "故障时长",
 
         yaxis: "y2", // 使用第二个 Y 轴（右侧）
 
+        hovertemplate: `机组:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟<br>",
 
       };
 
 
       // 布局配置，设置双 Y 轴

+ 6 - 1
src/views/performance/components/chartsCom/GeneratorTemperature.vue
Vedi File 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-21 11:18:49
 
- * @LastEditTime: 2025-02-19 10:06:39
 
+ * @LastEditTime: 2025-02-21 17:24:54
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/GeneratorTemperature.vue
 
@@ -132,6 +132,11 @@ export default {
 
                 ? this.color1[index % this.color1.length]
 
                 : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
           },
 
+          hovertemplate:
 
+            `${this.chartData.xaixs}:` +
 
+            ` %{x} <br> ` +
 
+            `${this.chartData.yaixs}:` +
 
+            "%{y} <br>",
 
         };
 
 
         if (this.chartType === "line") {

+ 8 - 2
src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue
Vedi File 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-17 17:22:04
 
- * @LastEditTime: 2025-02-17 17:36:23
 
+ * @LastEditTime: 2025-02-24 09:19:53
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue
 
@@ -50,7 +50,7 @@
 
         <!-- <span style="margin-right: 10px">点大小</span> -->
 
         <el-slider
 
           v-model="pointSize"
 
-          :min="3"
 
+          :min="1"
 
           :max="15"
 
           :step="1"
 
           label="点的大小"
 
@@ -168,6 +168,12 @@ export default {
 
             // },
 
             size: new Array(data.xData.length).fill(this.pointSize), // 初始点大小
 
           },
 
+          hovertemplate:
 
+            `${this.chartData.xaixs}:` +
 
+            ` %{x} <br> ` +
 
+            `${this.chartData.yaixs}:` +
 
+            "%{y} <br> <extra></extra>", // 在 hover 中显示格式化后的时间
 
+          // customdata: data.colorbar || data.color, // 将格式化后的时间存入 customdata
 
         };
 
       } else if (this.chartType === "line") {
 
         // 折线图

+ 141 - 91
src/views/performance/components/chartsCom/Time3DChart.vue
Vedi File 

@@ -1,13 +1,38 @@
 
-<!--
 
- * @Author: your name
 
- * @Date: 2025-01-22 18:50:27
 
- * @LastEditTime: 2025-02-20 10:21:12
 
- * @LastEditors: bogon
 
- * @Description: In User Settings Edit
 
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/Time3DChart.vue
 
--->
 
 <template>
 
   <div>
 
+    <!-- 配色方案选择和图表类型切换 -->
 
+    <div style="display: flex; align-items: center; padding-top: 20px">
 
+      <div style="margin-right: 20px; display: flex; align-items: center">
 
+        <el-select
 
+          size="small"
 
+          v-model="color1"
 
+          @change="updateChartColor"
 
+          placeholder="选择配色方案"
 
+          style="width: 200px"
 
+        >
 
+          <el-option
 
+            v-for="(scheme, index) in colorSchemes"
 
+            :key="index"
 
+            :label="scheme.label"
 
+            :value="scheme.colors"
 
+            :style="getOptionStyle(scheme.colors)"
 
+          ></el-option>
 
+        </el-select>
 
+      </div>
 
+    </div>
 
+    <!-- 点大小控制 -->
 
+    <div style="display: flex; align-items: center">
 
+      <el-slider
 
+        v-model="pointSize"
 
+        :min="1"
 
+        :max="15"
 
+        :step="1"
 
+        label="点的大小"
 
+        show-stops
 
+        style="width: 150px"
 
+        @change="updateChartColor"
 
+      ></el-slider>
 
+    </div>
 
     <div
 
       v-loading="loading"
 
       :id="`plotly-3d-chart-` + index"
 
@@ -23,6 +48,8 @@
 
 import Plotly from "plotly.js-dist";
 
 import axios from "axios";
 
 import { myMixin } from "@/mixins/chartRequestMixin";
 
+import { colorSchemes } from "@/views/overview/js/colors";
 
+
 
 export default {
 
   props: {
 
     fileAddr: {
 
@@ -36,8 +63,27 @@ export default {
 
   },
 
   data() {
 
     return {
 
-      color1: "",
 
+      color1: [
 
+        "#DBEEBC",
 
+        "#A8D7BE",
 
+        "#8ECAC1",
 
+        "#77BDC2",
 
+        "#64ADC2",
 
+        "#559ABE",
 
+        "#4884B7",
 
+        "#406DAB",
 
+        "#3856A0",
 
+        "#314291",
 
+        "#28357A",
 
+        "#1A285E",
 
+        "#FF7F50",
 
+        "#FFD700",
 
+        "#90EE90",
 
+      ], // 默认颜色
 
       chartData: {},
 
+      chartType: "scatter", // 当前图表类型（默认是散点图）
 
+      colorSchemes: [...colorSchemes],
 
+      pointSize: 2, // 默认点大小
 
     };
 
   },
 
   mixins: [myMixin],
 
@@ -56,10 +102,8 @@ export default {
 
           });
 
           if (typeof resultChartsData.data === "string") {
 
             let dataString = resultChartsData.data;
 
-            // 如果数据字符串的开头和结尾可能有多余的字符（比如非法字符），可以进行清理
 
             dataString = dataString.trim(); // 去除前后空格
 
-            // 如果数据包含了类似 "Infinity" 或其他无法解析的字符，替换它们
 
-            dataString = dataString.replace(/Infinity/g, '"Infinity"'); // 例如，将 "Infinity" 转换为字符串
 
+            dataString = dataString.replace(/Infinity/g, '"Infinity"'); // 处理无效字符
 
             try {
 
               const parsedData = JSON.parse(dataString);
 
               this.chartData = parsedData;
 
@@ -78,116 +122,122 @@ export default {
 
         }
 
       }
 
     },
 
-    renderChart() {
 
-      // 提取 Y 轴数据中的月份
 
-      const months = this.chartData.data[0].yData.map((date) => {
 
-        const month = new Date(date).getMonth(); // 获取月份，0-11 (Jan - Dec)
 
-        return month;
 
-      });
 
 
+    // 格式化日期为 YY-MM 格式
 
+    formatDate(dateString) {
 
+      const date = new Date(dateString);
 
+      const year = date.getFullYear().toString().slice(2); // 获取年份后两位
 
+      const month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份并确保两位数
 
+      return `${year}-${month}`;
 
+    },
 
+
 
+    renderChart() {
 
+      // 提取 Y 轴数据中的月份，并去重
 
+      const uniqueMonths = Array.from(
 
+        new Set(
 
+          this.chartData.data[0].yData.map((date) => this.formatDate(date))
 
+        )
 
+      );
 
+      if (!this.color1) {
 
+        this.color1 = colorSchemes[0].colors;
 
+      }
 
       // 设置每个月份对应的颜色
 
-      const monthColors = [
 
-        "#DBEEBC",
 
-        "#A8D7BE",
 
-        "#8ECAC1",
 
-        "#77BDC2",
 
-        "#64ADC2",
 
-        "#559ABE",
 
-        "#4884B7",
 
-        "#406DAB",
 
-        "#3856A0",
 
-        "#314291",
 
-        "#28357A",
 
-        "#1A285E",
 
-        "#FF7F50",
 
-        "#FFD700",
 
-        "#90EE90",
 
-      ];
 
+      const monthColors = this.color1;
 
 
-      // 为每个点根据月份设置颜色
 
-      const pointColors = months.map((month) => monthColors[month]);
 
+      // 为每个月份生成独立的 trace，每个 trace 对应一个月份
 
+      const traces = uniqueMonths.map((month, monthIndex) => {
 
+        const monthData = this.chartData.data[0].yData
 
+          .map((date, index) => (this.formatDate(date) === month ? index : -1))
 
+          .filter((index) => index !== -1);
 
 
-      // 构造3D散点图数据
 
-      const trace = {
 
-        x: this.chartData.data[0].xData, // 发电机转速
 
-        y: this.chartData.data[0].yData, // 时间
 
-        z: this.chartData.data[0].zData, // 有功功率
 
-        mode: "markers", // 强制设置为markers，避免出现线条
 
-        type: "scatter3d", // 3D 散点图
 
-        marker: {
 
-          size: 2, // 点的大小
 
-          color: pointColors, // 设置每个点的颜色（根据月份）
 
-          colorscale: "YlGnBu", // 可以选择颜色比例，如 'YlGnBu'
 
-        },
 
-      };
 
+        const trace = {
 
+          x: monthData.map((index) => this.chartData.data[0].xData[index]), // 发电机转速
 
+          y: monthData.map((index) => this.chartData.data[0].yData[index]), // 时间
 
+          z: monthData.map((index) => this.chartData.data[0].zData[index]), // 有功功率
 
+          mode: "markers",
 
+          type: "scatter3d", // 3D 散点图
 
+          marker: {
 
+            size: this.pointSize,
 
+            color: monthColors[monthIndex],
 
+          },
 
+          name: month, // 图例项名称，格式为 YY-MM
 
+          legendgroup: `month-${monthIndex}`, // 图例分组
 
+          hovertemplate:
 
+            `${this.chartData.xaixs}:` +
 
+            ` %{x} <br> ` +
 
+            `${this.chartData.yaixs}:` +
 
+            "%{y} <br>" +
 
+            `${this.chartData.zaixs}:` +
 
+            "%{z} <br>",
 
+        };
 
 
-      const config = { scrollZoom: true };
 
+        return trace;
 
+      });
 
 
       const layout = {
 
         title: this.chartData.data[0].title,
 
         scene: {
 
           xaxis: {
 
             title: this.chartData.xaixs, // X 轴标题
 
-            gridcolor: "rgb(255,255,255)", // 网格线颜色
 
+            gridcolor: "rgb(255,255,255)",
 
             tickcolor: "rgb(255,255,255)",
 
             backgroundcolor: "#e5ecf6",
 
-            showbackground: true, // 显示背景
 
+            showbackground: true,
 
           },
 
           yaxis: {
 
             title: this.chartData.yaixs, // Y 轴标题
 
-            gridcolor: "rgb(255,255,255)", // 网格线颜色
 
+            tickformat: "%y-%m", // 设置 Y 轴的时间格式为 YY-MM
 
+            gridcolor: "rgb(255,255,255)",
 
             tickcolor: "rgb(255,255,255)",
 
             backgroundcolor: "#e5ecf6",
 
-            showbackground: true, // 显示背景
 
+            showbackground: true,
 
           },
 
           zaxis: {
 
             title: this.chartData.zaixs, // Z 轴标题
 
-            gridcolor: "rgb(255,255,255)", // 网格线颜色
 
+            gridcolor: "rgb(255,255,255)",
 
             tickcolor: "rgb(255,255,255)",
 
             backgroundcolor: "#e5ecf6",
 
-            showbackground: true, // 显示背景
 
-          },
 
-          aspectratio: {
 
-            x: 1, // X 轴比例
 
-            y: 3, // Y 轴比例
 
-            z: 1, // Z 轴比例（可根据需要调整）
 
+            showbackground: true,
 
           },
 
+          // aspectratio: {
 
+          //   x: 1,
 
+          //   y: 3,
 
+          //   z: 1,
 
+          // },
 
           plot_bgcolor: "#e5ecf6",
 
-          gridcolor: "#fff", // 设置网格线颜色
 
-          camera: {
 
-            center: {
 
-              x: 0, // 设置中心点
 
-              y: 0, // 设置中心点
 
-              z: 0, // 设置中心点
 
-            },
 
-            eye: {
 
-              x: 0, // 眼睛的位置
 
-              y: 0, // 眼睛的位置
 
-              z: 2.5, // 眼睛的位置
 
-            },
 
-            up: {
 
-              x: 0, // 设置上方向
 
-              y: 0, // 设置上方向
 
-              z: 1, // 设置上方向
 
-            },
 
-          },
 
+          gridcolor: "#fff",
 
+          // camera: {
 
+          //   center: { x: 0, y: 0, z: 0 },
 
+          //   eye: { x: 0, y: 0, z: 2.5 },
 
+          //   up: { x: 0, y: 0, z: 1 },
 
+          // },
 
         },
 
+        margin: { t: 50, b: 50, l: 50, r: 50 },
 
+        staticPlot: false,
 
+        showlegend: true,
 
         legend: {
 
-          // 图例设置
 
-          x: 0.8, // 图例的 X 位置（相对于图表的右边）
 
-          y: 0.8, // 图例的 Y 位置（相对于图表的顶部）
 
-          title: {
 
-            text: "Data Series", // 图例的标题
 
+          marker: {
 
+            size: 10, // 图例中点的大小
 
           },
 
-          bgcolor: "rgba(255, 255, 255, 0.7)", // 设置图例背景色
 
-          bordercolor: "black", // 设置图例的边框颜色
 
-          borderwidth: 1, // 设置图例的边框宽度
 
         },
 
-        margin: { t: 50, b: 50, l: 50, r: 50 }, // 图表边距
 
-        staticPlot: false,
 
       };
 
 
-      Plotly.newPlot(`plotly-3d-chart-` + this.index, [trace], layout, config);
 
+      Plotly.newPlot(`plotly-3d-chart-` + this.index, traces, layout);
 
+    },
 
+
 
+    updateChartColor() {
 
+      this.renderChart(); // 当配色方案或点大小发生变化时重新渲染图表
 
+    },
 
+
 
+    // 获取配色选项样式
 
+    getOptionStyle(scheme) {
 
+      return {
 
+        background: `linear-gradient(to right, ${scheme.join(", ")})`,
 
+        color: "#fff",
 
+        height: "30px",
 
+        lineHeight: "30px",
 
+        borderRadius: "4px",
 
+      };
 
     },
 
   },
 
 };

+ 7 - 1
src/views/performance/components/chartsCom/TwoDMarkersChart.vue
Vedi File 

@@ -33,7 +33,7 @@
 
       <!-- <span style="margin-right: 10px">点大小</span> -->
 
       <el-slider
 
         v-model="pointSize"
 
-        :min="3"
 
+        :min="1"
 
         :max="15"
 
         :step="1"
 
         label="点的大小"
 
@@ -173,6 +173,12 @@ export default {
 
             },
 
             size: new Array(data.xData.length).fill(this.pointSize), // 点的大小
 
           },
 
+          hovertemplate:
 
+            `${this.chartData.xaixs}:` +
 
+            ` %{x} <br> ` +
 
+            `${this.chartData.yaixs}:` +
 
+            "%{y} <br> <extra></extra>",
 
+          // customdata: data.colorbar || data.color, // 将格式化后的时间存入 customdata
 
         };
 
       } else if (this.chartType === "line") {
 
         // 折线图

+ 5 - 0
src/views/performance/components/chartsCom/WindRoseChart.vue
Vedi File 

@@ -130,6 +130,11 @@ export default {
 
               width: 1,
 
             },
 
           },
 
+          hovertemplate:
 
+            `${axes.radial}:` +
 
+            ` %{r} <br> ` +
 
+            `${axes.angular}:` +
 
+            "%{theta} <br> <extra></extra>",
 
         };
 
       });

+ 8 - 0
src/views/performance/components/chartsCom/YewErrorBarChart.vue
Vedi File 

@@ -103,6 +103,11 @@ export default {
 
           color: this.color1, // 折线图颜色
 
         },
 
         name: "偏航误差值", // 图例名称
 
+        hovertemplate:
 
+          `机组名称:` +
 
+          ` %{x} <br> ` +
 
+          `偏航误差值:` +
 
+          "%{y} <br> <extra></extra>",
 
       };
 
 
       // 创建虚拟的 trace 以便显示图例
 
@@ -132,6 +137,9 @@ export default {
 
         title: "机组静态偏航误差值", // 图表标题
 
         xaxis: {
 
           title: "机组编号", // 横坐标标题
 
+          tickmode: "array",
 
+          tickvals: xData, // 设置刻度值（机组编号）
 
+          ticktext: xData, // 设置刻度文本（机组编号）
 
         },
 
         yaxis: {
 
           title: "静态偏航误差值（度）", // 纵坐标标题

+ 5 - 0
src/views/performance/components/chartsCom/lineAndChildLine.vue
Vedi File 

@@ -122,6 +122,11 @@ export default {
 
                   ? this.color1[index % this.color1.length]
 
                   : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
             },
 
+            hovertemplate:
 
+              `${this.chartData.xaixs}:` +
 
+              ` %{x} <br> ` +
 
+              `${this.chartData.yaixs}:` +
 
+              "%{y} <br>",
 
           };
 
 
           if (this.chartType === "line") {

+ 6 - 1
src/views/performance/components/chartsCom/lineChart.vue
Vedi File 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2024-09-11 14:23:08
 
- * @LastEditTime: 2024-10-08 14:10:25
 
+ * @LastEditTime: 2025-02-21 17:27:46
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/lineChart.vue
 
@@ -98,6 +98,11 @@ export default {
 
           color: "#2f123a", //齿轮箱高速轴温度分布
 
           width: 2,
 
         },
 
+        hovertemplate:
 
+          `${this.chartData.xaixs}:` +
 
+          ` %{x} <br> ` +
 
+          `${this.chartData.yaixs}:` +
 
+          "%{y} <br>",
 
         type: "scatter", // 使用散点图的类型生成线
 
       };
 
       const layout = {

+ 52 - 44
src/views/performance/components/chartsCom/lineChartsFen.vue
Vedi File 

@@ -1,11 +1,3 @@
 
-<!--
 
- * @Author: your name
 
- * @Date: 2025-01-20 11:41:41
 
- * @LastEditTime: 2025-02-18 15:45:06
 
- * @LastEditors: bogon
 
- * @Description: In User Settings Edit
 
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/lineChartsFen.vue
 
--->
 
 <template>
 
   <div>
 
     <!-- 图表控制面板 分图-->
 
@@ -59,6 +51,7 @@ export default {
 
       color1: "#406DAB", // 默认颜色
 
       loading: false,
 
       isError: false,
 
+      cancelToken: null, // 用于存储取消请求的标识符
 
     };
 
   },
 
   mounted() {
 
@@ -66,17 +59,34 @@ export default {
 
       this.getData();
 
     }
 
   },
 
+  beforeDestroy() {
 
+    if (this.cancelToken) {
 
+      this.cancelToken.cancel(
 
+        "Component is being destroyed, request canceled."
 
+      );
 
+    }
 
+  },
 
   methods: {
 
     // 获取数据
 
     async getData() {
 
       if (this.fileAddr !== "") {
 
         try {
 
           this.loading = true;
 
+
 
+          // 如果已有取消请求的标识符，先取消前一个请求
 
+          if (this.cancelToken) {
 
+            this.cancelToken.cancel("Operation canceled due to new request.");
 
+          }
 
+
 
+          // 创建新的请求取消标识符
 
           this.cancelToken = axios.CancelToken.source();
 
+
 
           const resultChartsData = await axios.get(this.fileAddr, {
 
             cancelToken: this.cancelToken.token,
 
           });
 
+
 
           this.chartData = resultChartsData.data;
 
+
 
           // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
 
           nextTick(() => {
 
             this.drawChart();
 
@@ -84,62 +94,65 @@ export default {
 
             this.loading = false;
 
           });
 
         } catch (error) {
 
-          console.error("Error loading data:", error);
 
-          this.isError = true;
 
-          this.loading = false;
 
+          if (axios.isCancel(error)) {
 
+            console.log("Request was canceled");
 
+          } else {
 
+            console.error("Error loading data:", error);
 
+            this.isError = true;
 
+            this.loading = false;
 
+          }
 
         }
 
       }
 
     },
 
     // 绘制图表
 
     drawChart() {
 
-      // 先将数据按照条件进行排序
 
       const sortedData = this.chartData.data.sort((a, b) => {
 
-        // 符合条件的数据排在前面
 
         if (
 
           a.engineCode === this.fieldEngineCode &&
 
           b.engineCode !== this.fieldEngineCode
 
         ) {
 
-          return 1; // a 排在前面
 
+          return 1;
 
         }
 
         if (
 
           a.engineCode !== this.fieldEngineCode &&
 
           b.engineCode === this.fieldEngineCode
 
         ) {
 
-          return -1; // b 排在前面
 
+          return -1;
 
         }
 
-        return 0; // 如果两者都符合或都不符合，保持原顺序
 
+        return 0;
 
       });
 
 
       const data = [];
 
-      const lineData = []; // 用于存储所有线图数据
 
+      const lineData = [];
 
 
-      sortedData.forEach((turbine, index) => {
 
-        // 判断当前机组的 engineCode 是否与 fieldEngineCode 匹配
 
+      sortedData.forEach((turbine) => {
 
         const color =
 
-          turbine.engineCode === this.fieldEngineCode ? this.color1 : "#D3D3D3"; // #D3D3D3 为灰色
 
+          turbine.engineCode === this.fieldEngineCode ? this.color1 : "#D3D3D3";
 
 
         const chartConfig = {
 
-          x: turbine.xData, // X 数据
 
-          y: turbine.yData, // Y 数据
 
-          name: turbine.engineName, // 使用机组名称
 
-          line: { color }, // 设置线条颜色
 
-          marker: { color }, // 设置柱状图的颜色
 
+          x: turbine.xData,
 
+          y: turbine.yData,
 
+          name: turbine.engineName,
 
+          line: { color },
 
+          marker: { color },
 
+          hovertemplate: `
 
+            ${this.chartData.xaixs}: %{x} <br>
 
+            ${this.chartData.yaixs}: %{y} <br>
 
+          `,
 
         };
 
 
-        // 判断是否为线图
 
         if (this.chartType === "line") {
 
-          chartConfig.mode = "lines"; // 如果是折线图
 
+          chartConfig.mode = "lines";
 
           chartConfig.fill = "none";
 
-          lineData.push(chartConfig); // 将线图数据存储到 lineData 中
 
+          lineData.push(chartConfig);
 
         } else if (this.chartType === "bar") {
 
-          // chartConfig.type = "bar"; // 如果是柱状图
 
           chartConfig.fill = "tonexty";
 
-          data.push(chartConfig); // 将柱状图数据存储到 data 中
 
+          data.push(chartConfig);
 
         }
 
       });
 
 
-      // 将非线图的数据放到前面，线图的数据放到最后
 
-      const finalData = [...data, ...lineData]; // 先放柱状图，再放线图
 
+      const finalData = [...data, ...lineData];
 
+
 
       if (
 
         this.chartData.contract_Cp_curve_yData &&
 
         this.chartData.contract_Cp_curve_yData.length > 0
 
@@ -151,18 +164,19 @@ export default {
 
           name: "合同功率曲线",
 
           line: {
 
             color: "red",
 
-            width: 1, // 设置线条的宽度为1
 
+            width: 1,
 
           },
 
           marker: { color: "red", size: 4 },
 
         });
 
       }
 
+
 
       const layout = {
 
         title: this.chartData.title || "图表",
 
         xaxis: {
 
-          title: this.chartData.xaixs || "X轴", // 横坐标标题
 
+          title: this.chartData.xaixs || "X轴",
 
         },
 
         yaxis: {
 
-          title: this.chartData.yaixs || "Y轴", // 纵坐标标题
 
+          title: this.chartData.yaixs || "Y轴",
 
         },
 
         margin: {
 
           l: 50,
 
@@ -170,25 +184,19 @@ export default {
 
           t: 50,
 
           b: 50,
 
         },
 
-        autosize: true, // 开启自适应
 
-        barmode: this.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
 
+        autosize: true,
 
+        barmode: this.chartType === "bar" ? "stack" : "group",
 
       };
 
 
-      // 使用 Plotly.react 来更新图表
 
       Plotly.react(`line-chart-fen-${this.index}`, finalData, layout, {
 
         responsive: true,
 
       });
 
     },
 
     // 切换图表类型
 
     toggleChartType() {
 
-      this.chartType = this.chartType === "line" ? "bar" : "line"; // 切换图表类型
 
+      this.chartType = this.chartType === "line" ? "bar" : "line";
 
       this.drawChart(); // 重新绘制图表
 
     },
 
-
 
-    // 更新图表颜色
 
-    updateChartColor() {
 
-      this.drawChart(); // 更新颜色后重新绘制图表
 
-    },
 
   },
 
 };
 
 </script>

+ 2 - 2
src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
Vedi File 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2024-09-11 14:32:12
 
- * @LastEditTime: 2025-02-20 16:03:24
 
+ * @LastEditTime: 2025-02-21 09:46:55
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
 
@@ -39,7 +39,7 @@
 
         <!-- <span style="margin-right: 10px">点大小</span> -->
 
         <el-slider
 
           v-model="pointSize"
 
-          :min="3"
 
+          :min="1"
 
           :max="15"
 
           :step="1"
 
           label="点的大小"

+ 2 - 0
src/views/performance/components/chartsCom/yawErrorBarSum.vue
Vedi File 

@@ -117,6 +117,8 @@ export default {
 
         line: {
 
           color: this.color1, // 折线图颜色（如果切换到折线图）
 
         },
 
+        hovertemplate:
 
+          `偏航误差值:` + ` %{x} <br> ` + `台数:` + "%{y} <br> <extra></extra>",
 
       };
 
 
       const layout = {

+ 6 - 1
src/views/performance/components/chartsCom/yawErrorLine.vue
Vedi File 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-22 09:42:59
 
- * @LastEditTime: 2025-02-19 10:04:48
 
+ * @LastEditTime: 2025-02-24 09:45:46
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/yawErrorLine.vue
 
@@ -134,6 +134,11 @@ export default {
 
                   ? this.color1[index % this.color1.length]
 
                   : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
             },
 
+            hovertemplate:
 
+              `${this.chartData.xaixs}:` +
 
+              ` %{x} <br> ` +
 
+              `${this.chartData.yaixs}:` +
 
+              "%{y} <br> <extra></extra>",
 
           };
 
 
           if (this.chartType === "line") {