Halaman utama Jelajahi Bantuan
Daftar Masuk
rui.jiang
/
performance-test
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

华电部署修改2d图选中点色带展示bug

liujiejie 2 minggu lalu
induk
d613bba264
melakukan
61911e4ec0
14 mengubah file dengan 161 tambahan dan 120 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. TEMPAT SAMPAH
      downLoadServer/src/public/file/副本XXX风电场可靠性和能效双提升数据分析报告(模板).docx
  2. 1 3
      downLoadServer/src/server/utils/chartsCom/PlotlyChartsFen.js
  3. 34 15
      downLoadServer/src/server/utils/chartsCom/TwoDMarkersChart.js
  4. 14 8
      downLoadServer/src/server/utils/chartsCom/powerMarkers2DCharts.js
  5. 2 2
      src/components/map/index.vue
  6. 2 2
      src/router/index.js
  7. 3 3
      src/store/themes.js
  8. 2 2
      src/views/health/vibration.vue
  9. 1 1
      src/views/home/Index.vue
  10. 2 2
      src/views/home/components/MenuHD.vue
  11. 2 2
      src/views/login/Index.vue
  12. 60 39
      src/views/performance/components/chartsCom/TwoDMarkersChart.vue
  13. 7 19
      src/views/performance/components/chartsCom/TwoDMarkersChart1.vue
  14. 31 22
      src/views/performance/components/chartsCom/powerMarkers2DCharts.vue

TEMPAT SAMPAH
downLoadServer/src/public/file/副本XXX风电场可靠性和能效双提升数据分析报告(模板).docx
Tampilan Berkas


+ 1 - 3
downLoadServer/src/server/utils/chartsCom/PlotlyChartsFen.js
Tampilan Berkas 

@@ -1,7 +1,7 @@
 
 /*
 
  * @Author: your name
 
  * @Date: 2025-05-23 17:19:20
 
- * @LastEditTime: 2025-07-04 17:03:11
 
+ * @LastEditTime: 2025-07-07 16:17:59
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /downLoadServer/src/server/utils/chartsCom/PlotlyChartsFen.js
 
@@ -97,7 +97,6 @@ export const generatePlotlyChartsFen = async (
 
       const filterData = data.data.filter(
 
         (item) => item.enginName === "合同功率曲线"
 
       );
 
-      console.log(filterData, "合同功率曲线");
 
       // 添加合同功率曲线
 
       if (filterData && filterData[0].enginName === "合同功率曲线") {
 
         finalData.push({
 
@@ -153,7 +152,6 @@ export const generatePlotlyChartsFen = async (
 
           y: -0.2,
 
         },
 
       };
 
-
 
       // 创建HTML内容
 
       const htmlContent = `
 
         <!DOCTYPE html>

+ 34 - 15
downLoadServer/src/server/utils/chartsCom/TwoDMarkersChart.js
Tampilan Berkas 

@@ -1,7 +1,7 @@
 
 /*
 
  * @Author: your name
 
  * @Date: 2025-04-25 16:19:33
 
- * @LastEditTime: 2025-06-24 14:36:35
 
+ * @LastEditTime: 2025-07-08 14:40:29
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /downLoadServer/src/server/utils/chartsCom/TwoDMarkersChart.js
 
@@ -65,6 +65,25 @@ export const generateTwoDMarkersChart = async (
 
         return acc;
 
       }, {});
 
 
+      // 获取 colorbar 的最小值和最大值来计算比例值
 
+      const minValue = Math.min(...new Set(uniqueTimeLabels));
 
+      const maxValue = Math.max(...new Set(uniqueTimeLabels));
 
+      const colorStops = [
 
+        colorSchemes[0].colors[0],
 
+        colorSchemes[0].colors[4],
 
+        colorSchemes[0].colors[8],
 
+        colorSchemes[0].colors[12],
 
+      ];
 
+      // 计算渐变比例
 
+      const colors = colorStops.map((color, index) => {
 
+        const proportion = index / (colorStops.length - 1); // 计算比例值 (0, 1/3, 2/3, 1)
 
+        return [proportion, color]; // 创建比例-颜色映射
 
+      });
 
+      // 确保 colors 至少有 2 种颜色，否则使用默认颜色
 
+      if (colors.length < 2) {
 
+        colors.push([1, colorStops[colorStops.length - 1] || "#1B2973"]);
 
+      }
 
+
 
       // 计算颜色值映射
 
       let colorValues =
 
         chartDataset.colorbar &&
 
@@ -79,20 +98,20 @@ export const generateTwoDMarkersChart = async (
 
         mode: "markers",
 
         type: "scattergl", // 使用 scattergl 提高性能
 
         text: chartDataset.engineName, // 提示文本
 
-        // marker: {
 
-        //   color: colorValues,
 
-        //   colorscale: [
 
-        //     [0, "#F9FDD2"],
 
-        //     [0.15, "#E9F6BD"],
 
-        //     [0.3, "#C2E3B9"],
 
-        //     [0.45, "#8AC8BE"],
 
-        //     [0.6, "#5CA8BF"],
 
-        //     [0.75, "#407DB3"],
 
-        //     [0.9, "#2E4C9A"],
 
-        //     [1, "#1B2973"],
 
-        //   ],
 
-        //   size: new Array(chartDataset.xData.length).fill(6), // 点的大小
 
-        // },
 
+        marker: {
 
+          color: colorValues,
 
+          colorscale: [
 
+            [0, "#F9FDD2"],
 
+            [0.15, "#E9F6BD"],
 
+            [0.3, "#C2E3B9"],
 
+            [0.45, "#8AC8BE"],
 
+            [0.6, "#5CA8BF"],
 
+            [0.75, "#407DB3"],
 
+            [0.9, "#2E4C9A"],
 
+            [1, "#1B2973"],
 
+          ],
 
+          size: new Array(chartDataset.xData.length).fill(6), // 点的大小
 
+        },
 
       };
 
 
       // 图表布局

+ 14 - 8
downLoadServer/src/server/utils/chartsCom/powerMarkers2DCharts.js
Tampilan Berkas 

@@ -1,7 +1,7 @@
 
 /*
 
  * @Author: your name
 
  * @Date: 2025-04-28 14:15:23
 
- * @LastEditTime: 2025-06-20 16:49:39
 
+ * @LastEditTime: 2025-07-08 15:05:45
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /downLoadServer/src/server/utils/chartsCom/powerMarkers2DCharts.js
 
@@ -69,14 +69,20 @@ export const generatepowerMarkers2DCharts = async (
 
         scatterData.colorbar.length === scatterData.xData.length
 
           ? [...new Set(scatterData.colorbar)] // 从 colorbar 中提取唯一的标签
 
           : [...new Set(scatterData.color)]; // 如果没有 colorbar，使用 data.color
 
-
 
       const ticktext = uniqueTimeLabels.map((dateStr) => {
 
         const date = new Date(dateStr);
 
-        return date.toLocaleDateString("en-CA", {
 
-          year: "numeric",
 
-          month: "2-digit",
 
-        }); // 格式化为 'yyyy-MM'
 
-      }); // 使用格式化后的时间作为 ticktext
 
+        const year = date.getFullYear();
 
+        const month = String(date.getMonth() + 1).padStart(2, "0");
 
+        return `${year}-${month}`; // ✅ 保证格式为 yyyy-MM
 
+      });
 
+
 
+      // const ticktext = uniqueTimeLabels.map((dateStr) => {
 
+      //   const date = new Date(dateStr);
 
+      //   return date.toLocaleDateString("en-CA", {
 
+      //     year: "numeric",
 
+      //     month: "2-digit",
 
+      //   }); // 格式化为 'yyyy-MM'
 
+      // }); // 使用格式化后的时间作为 ticktext
 
       const tickvals = uniqueTimeLabels.map((label, index) => index + 1); // 设置 tick 值
 
       const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
 
         acc[curr] = index + 1;
 
@@ -136,7 +142,7 @@ export const generatepowerMarkers2DCharts = async (
 
                 [1, "#1B2973"],
 
               ], // 默认颜色渐变
 
           colorbar: {
 
-            title: { text: scatterData.colorbartitle || "" }, // 色标标题
 
+            title: { text: scatterData.colorbartitle || "月份" }, // 色标标题
 
             tickvals: tickvals, // 设置刻度值
 
             ticktext: ticktext, // 设置刻度文本
 
             tickmode: "array", // 使用数组模式

+ 2 - 2
src/components/map/index.vue
Tampilan Berkas 

@@ -259,9 +259,9 @@ export default {
 
           source: new XYZ({
 
             // url: "http://106.120.102.238:18000/tiles/{z}/{x}/{y}.png", //外网
 
             // 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://192.168.50.235/tiles/{z}/{x}/{y}.png", //内网
 
             // url: "http://10.96.137.5:9080/tiles/{z}/{x}/{y}.png", //大～#@唐
 
-            url: "http://192.168.0.1/tiles/{z}/{x}/{y}.png", //华电
 
+            // url: "http://192.168.0.1/tiles/{z}/{x}/{y}.png", //华电
 
             // url: "http://192.168.50.235/tiles/{z}/{x}/{y}.png", //中广核
 
           }),
 
         }),

+ 2 - 2
src/router/index.js
Tampilan Berkas 

@@ -28,8 +28,8 @@ const createRouter = () =>
 
             iconName: "gps",
 
             component: () =>
 
               import(
 
-                // /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/Index.vue"
 
-                /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/HD.vue" //华电选择这个
 
+                /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/Index.vue"
 
+                // /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/HD.vue" //华电选择这个
 
               ),
 
           },
 
           {

+ 3 - 3
src/store/themes.js
Tampilan Berkas 

@@ -3,7 +3,7 @@ import { theme } from "tailwindcss/stubs/defaultConfig.stub";
 
 /*
 
  * @Author: your name
 
  * @Date: 2024-05-27 15:09:27
 
- * @LastEditTime: 2025-07-07 10:49:54
 
+ * @LastEditTime: 2025-07-07 10:58:57
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/store/themes.js
 
@@ -12,8 +12,8 @@ import { colorSchemes } from "@/views/overview/js/colors";
 
 export default {
 
   namespaced: true,
 
   state: {
 
-    // theme: localStorage.getItem("theme") || "green",
 
-    theme: localStorage.getItem("theme") || "blue", //华电默认主题色
 
+    theme: localStorage.getItem("theme") || "green",
 
+    // theme: localStorage.getItem("theme") || "blue", //华电默认主题色
 
     themeColor: [...colorSchemes[0].colors],
 
   },
 
   mutations: {

+ 2 - 2
src/views/health/vibration.vue
Tampilan Berkas 

@@ -14,10 +14,10 @@
 
           <img src="@/assets/analyse/01.png" alt="" />
 
           <p>包络谱图</p>
 
         </div>
 
-        <!-- <div @click="tendency" class="picture">
 
+        <div @click="tendency" class="picture">
 
           <img src="@/assets/analyse/02.png" alt="" />
 
           <p>趋势图</p>
 
-        </div> -->
 
+        </div>
 
       </div>
 
       <div class="headright">
 
         <img src="@/assets/analyse/07.png" alt="全部缩小" @click="suoxiao" />

+ 1 - 1
src/views/home/Index.vue
Tampilan Berkas 

@@ -52,7 +52,7 @@ export default {
 
   data() {
 
     return {
 
       loading: false,
 
-      isShowHd: true, //true 则展示华电的菜单样式，false 则展示默认的左侧边栏菜单
 
+      isShowHd: false, //true 则展示华电的菜单样式，false 则展示默认的左侧边栏菜单
 
     };
 
   },
 
   methods: {

+ 2 - 2
src/views/home/components/MenuHD.vue
Tampilan Berkas 

@@ -377,7 +377,7 @@ export default {
 
 </style>
 
 
 <!-- /* 华电时的菜单打开这个 */ -->
 
-<style lang="scss">
 
+<!-- <style lang="scss">
 
 .el-menu--popup {
 
   width: 100% !important;
 
   min-width: 120px !important;
 
@@ -388,4 +388,4 @@ export default {
 
     padding: 0 5px !important;
 
   }
 
 }
 
-</style>
 
+</style> -->

+ 2 - 2
src/views/login/Index.vue
Tampilan Berkas 

@@ -2,9 +2,9 @@
 
   <div class="background-image" v-loading="loadingView">
 
     <div class="border">
 
       <div class="leftLogin">
 
-        <!-- <h1>机组功率曲线异常检测数据分析系统</h1> -->
 
+        <h1>机组功率曲线异常检测数据分析系统</h1>
 
         <!-- 华电 -->
 
-        <h1>风电机组健康诊断平台</h1>
 
+        <!-- <h1>风电机组健康诊断平台</h1> -->
 
         <el-divider></el-divider>
 
         <div class="loginText">
 
           <el-form

+ 60 - 39
src/views/performance/components/chartsCom/TwoDMarkersChart.vue
Tampilan Berkas 

@@ -185,9 +185,6 @@ export default {
 
       }
 
       const data = this.chartData.data && this.chartData.data[0];
 
       let trace = {};
 
-      // 保存原始颜色和大小
 
-      this.originalColors = [...data.yData];
 
-      this.originalSizes = new Array(data.xData.length).fill(6); // 初始点大小
 
 
       if (this.chartType === "scatter") {
 
         // 如果有 colorbar 数据
 
@@ -227,6 +224,10 @@ export default {
 
         } else {
 
           colorValues = data.yData.map((date) => timeMapping[date]);
 
         }
 
+        // 保存原始颜色和大小
 
+        // this.originalColors = [...data.yData];
 
+        this.originalColors = [...colorValues];
 
+        this.originalSizes = new Array(data.xData.length).fill(6); // 初始点大小
 
 
         // 绘制 2D 散点图
 
         trace = {
 
@@ -235,27 +236,25 @@ export default {
 
           mode: "markers",
 
           type: "scattergl", // 使用 scattergl 提高性能
 
           text: data.engineName, // 提示文本
 
-          // marker: {
 
-          //   color: colorValues, // 使用时间数据来映射颜色
 
-          //   colorscale: this.color1
 
-          //     ? [...colors]
 
-          //     : [
 
-          //         [0, "#F9FDD2"],
 
-          //         [0.15, "#E9F6BD"],
 
-          //         [0.3, "#C2E3B9"],
 
-          //         [0.45, "#8AC8BE"],
 
-          //         [0.6, "#5CA8BF"],
 
-          //         [0.75, "#407DB3"],
 
-          //         [0.9, "#2E4C9A"],
 
-          //         [1, "#1B2973"],
 
-          //       ], // 默认颜色渐变
 
-          //   colorbar: {
 
-          //     // title: data.colorbartitle, // 色标标题
 
-          //     // tickvals: tickvals, // 设置刻度值
 
-          //     // ticktext: ticktext, // 设置刻度文本
 
-          //     tickmode: "array", // 使用数组模式、
 
-          //   },
 
-          // },
 
+          marker: {
 
+            color: colorValues, // 根据 colorbar 映射的数字设置颜色
 
+            colorscale: this.color1
 
+              ? colors // 如果有 color1 使用自定义颜色比例
 
+              : [
 
+                  [0, "#F9FDD2"],
 
+                  [0.15, "#E9F6BD"],
 
+                  [0.3, "#C2E3B9"],
 
+                  [0.45, "#8AC8BE"],
 
+                  [0.6, "#5CA8BF"],
 
+                  [0.75, "#407DB3"],
 
+                  [0.9, "#2E4C9A"],
 
+                  [1, "#1B2973"],
 
+                ], // 默认颜色渐变
 
+            // colorbar: data.colorbar
 
+            //   ? { title: data.colorbartitle || "Color Legend" }
 
+            //   : undefined, // 如果有 colorbar 显示，否则不显示
 
+            size: new Array(data.xData.length).fill(this.pointSize), // 点的大小
 
+          },
 
         };
 
         if (data.colorbartitle === "密度") {
 
           trace.marker.cmin = 0;
 
@@ -338,6 +337,7 @@ export default {
 
           backgroundcolor: "#e5ecf6",
 
           showbackground: true, // 显示背景
 
         },
 
+        showlegend: false,
 
         // showlegend: true,
 
         plot_bgcolor: "#e5ecf6",
 
         gridcolor: "#fff", // 设置网格线颜色
 
@@ -475,30 +475,41 @@ export default {
 
         });
 
 
         // 使用 Plotly.restyle 更新颜色和大小
 
-        Plotly.restyle(gd, {
 
-          "marker.color": [newColors],
 
-          "marker.size": [newSize],
 
-        });
 
+        // Plotly.restyle(gd, {
 
+        //   "marker.color": [newColors],
 
+        //   "marker.size": [newSize],
 
+        // });
 
 
         // 确保选中的点在最上面
 
-        const scatterTrace = gd.data[0]; // 原来的散点数据
 
-        const selectedTrace = {
 
+        // const scatterTrace = gd.data[0]; // 原来的散点数据
 
+        // const selectedTrace = {
 
+        //   x: this.selectedPoints.map((p) => p.x),
 
+        //   y: this.selectedPoints.map((p) => p.y),
 
+        //   mode: "markers",
 
+        //   type: "scattergl",
 
+        //   marker: {
 
+        //     color: "red", // 选中点颜色
 
+        //     size: 10,
 
+        //   },
 
+        // };
 
+
 
+        // // 合并数据，并保证选中点在最后
 
+        // const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后
 
+
 
+        // // 更新图表
 
+        // Plotly.react(gd, updatedTraces, gd.layout);
 
+        Plotly.addTraces(gd, {
 
           x: this.selectedPoints.map((p) => p.x),
 
           y: this.selectedPoints.map((p) => p.y),
 
           mode: "markers",
 
           type: "scattergl",
 
           marker: {
 
-            color: "red", // 选中点颜色
 
+            color: "red",
 
             size: 10,
 
           },
 
-        };
 
-
 
-        // 合并数据，并保证选中点在最后
 
-        const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后
 
-
 
-        // 更新图表
 
-        Plotly.react(gd, updatedTraces, gd.layout);
 
-
 
+          name: "选中点",
 
+          showlegend: false,
 
+        });
 
         // 处理选中的数据
 
         this.getSelectData(this.selectedPoints, gd.layout);
 
       });
 
@@ -508,6 +519,16 @@ export default {
 
       Plotly.restyle(gd, {
 
         "marker.color": [this.originalColors],
 
         "marker.size": [this.originalSizes],
 
+        // "marker.colorscale": [
 
+        //   [0, "#F9FDD2"],
 
+        //   [0.15, "#E9F6BD"],
 
+        //   [0.3, "#C2E3B9"],
 
+        //   [0.45, "#8AC8BE"],
 
+        //   [0.6, "#5CA8BF"],
 
+        //   [0.75, "#407DB3"],
 
+        //   [0.9, "#2E4C9A"],
 
+        //   [1, "#1B2973"],
 
+        // ],
 
       });
 
     },
 
     getSelectData(selectedPoints, layout) {

+ 7 - 19
src/views/performance/components/chartsCom/TwoDMarkersChart1.vue
Tampilan Berkas 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2024-09-11 14:32:12
 
- * @LastEditTime: 2025-07-07 10:22:15
 
+ * @LastEditTime: 2025-07-08 10:13:08
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
 
@@ -433,36 +433,24 @@ export default {
 
           });
 
         }
 
 
-        // 更新选中点的颜色和大小
 
+        // // 更新选中点的颜色和大小
 
         this.selectedPoints.forEach((point) => {
 
           newColors[point.index] = "red";
 
           newSize[point.index] = 10;
 
         });
 
 
-        // 使用 Plotly.restyle 更新颜色和大小
 
-        Plotly.restyle(gd, {
 
-          "marker.color": [newColors],
 
-          "marker.size": [newSize],
 
-        });
 
-
 
-        // 确保选中的点在最上面
 
-        const scatterTrace = gd.data[0]; // 原来的散点数据
 
-        const selectedTrace = {
 
+        Plotly.addTraces(gd, {
 
           x: this.selectedPoints.map((p) => p.x),
 
           y: this.selectedPoints.map((p) => p.y),
 
           mode: "markers",
 
           type: "scattergl",
 
           marker: {
 
-            color: "red", // 选中点颜色
 
+            color: "red",
 
             size: 10,
 
           },
 
-        };
 
-
 
-        // 合并数据，并保证选中点在最后
 
-        const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后
 
-
 
-        // 更新图表
 
-        Plotly.react(gd, updatedTraces, gd.layout);
 
+          name: "选中点",
 
+          showlegend: false,
 
+        });
 
 
         // 处理选中的数据
 
         this.getSelectData(this.selectedPoints, gd.layout);

+ 31 - 22
src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
Tampilan Berkas 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2024-09-11 14:32:12
 
- * @LastEditTime: 2025-06-13 13:43:47
 
+ * @LastEditTime: 2025-07-08 16:42:29
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
 
@@ -233,7 +233,8 @@ export default {
 
       let lineTrace = {}; // 用于存放折线图的 trace
 
 
       // 保存原始颜色和大小
 
-      this.originalColors = [...data.yData];
 
+      // this.originalColors = [...data.yData];
 
+      this.originalColors = [...colorValues];
 
       this.originalSizes = new Array(data.xData.length).fill(6); // 初始点大小
 
 
       // 绘制散点图
 
@@ -449,30 +450,41 @@ export default {
 
         });
 
 
         // 使用 Plotly.restyle 更新颜色和大小
 
-        Plotly.restyle(gd, {
 
-          "marker.color": [newColors],
 
-          "marker.size": [newSize],
 
-        });
 
-
 
-        // 确保选中的点在最上面
 
-        const scatterTrace = gd.data[0]; // 原来的散点数据
 
-        const selectedTrace = {
 
+        // Plotly.restyle(gd, {
 
+        //   "marker.color": [newColors],
 
+        //   "marker.size": [newSize],
 
+        // });
 
+
 
+        // // 确保选中的点在最上面
 
+        // const scatterTrace = gd.data[0]; // 原来的散点数据
 
+        // const selectedTrace = {
 
+        //   x: this.selectedPoints.map((p) => p.x),
 
+        //   y: this.selectedPoints.map((p) => p.y),
 
+        //   mode: "markers",
 
+        //   type: "scattergl",
 
+        //   marker: {
 
+        //     color: "red", // 选中点颜色
 
+        //     size: 10,
 
+        //   },
 
+        // };
 
+
 
+        // // 合并数据，并保证选中点在最后
 
+        // const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后
 
+
 
+        // // 更新图表
 
+        // Plotly.react(gd, updatedTraces, gd.layout);
 
+        Plotly.addTraces(gd, {
 
           x: this.selectedPoints.map((p) => p.x),
 
           y: this.selectedPoints.map((p) => p.y),
 
           mode: "markers",
 
           type: "scattergl",
 
           marker: {
 
-            color: "red", // 选中点颜色
 
+            color: "red",
 
             size: 10,
 
           },
 
-        };
 
-
 
-        // 合并数据，并保证选中点在最后
 
-        const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后
 
-
 
-        // 更新图表
 
-        Plotly.react(gd, updatedTraces, gd.layout);
 
-
 
+          name: "选中点",
 
+          showlegend: false,
 
+        });
 
         // 处理选中的数据
 
         this.getSelectData(this.selectedPoints, gd.layout);
 
       });
 
@@ -496,7 +508,6 @@ export default {
 
       }
 
       this.downloadCSV();
 
     },
 
-
 
     downloadCSV() {
 
       const headers = [this.chartData.xaixs, this.chartData.yaixs];
 
       const csvRows = [headers]; // 保存标头
 
@@ -507,12 +518,10 @@ export default {
 
           uniquePoints.push(point);
 
         }
 
       });
 
-
 
       // 将去重后的点加入 CSV 数据
 
       uniquePoints.forEach((point) => {
 
         csvRows.push(`${point.x},${point.y}`);
 
       });
 
-
 
       const csvString = csvRows.join("\n");
 
       const blob = new Blob([csvString], { type: "text/csv; charset=utf-8" });
 
       const url = URL.createObjectURL(blob);