fix 3D展示

src/views/performance/components/chartsCom/3DDrawingChart.vue

@@ -240,15 +240,38 @@ export default {
           },
           aspectratio: {
             x: 3,
-            y: 1,
+            y: 1.5,
             z: 1,
           },
-          // plot_bgcolor: "#e5ecf6",
-          // gridcolor: "#fff",
+          plot_bgcolor: "#e5ecf6",
+          gridcolor: "#fff",
+          bgcolor: "#e5ecf6", // 设置背景颜色
+          // camera: {
+          //   //原始1
+          //   center: { x: -0.233946, y: -0.319396, z: 0.483055 },
+          //   eye: { x: -1.729102, y: -3.506569, z: -1.296184 },
+          //   up: { x: 0.12359, y: 0.43886022, z: -0.89001518 },
+          //   projection: {
+          //     type: "perspective",
+          //   },
+          // },
           camera: {
-            center: { x: -0.233946, y: -0.319396, z: 0.483055 },
-            eye: { x: -1.729102, y: -3.506569, z: -1.296184 },
-            up: { x: 0.12359, y: 0.43886022, z: -0.89001518 },
+            //原始3
+            center: {
+              x: -0.375472972541404,
+              y: -0.5585992748989729,
+              z: -0.02739771471583052,
+            },
+            eye: {
+              x: -0.5046744702181177,
+              y: -3.1376489494672195,
+              z: 1.7379514809127419,
+            },
+            up: {
+              x: 0.036764743754523974,
+              y: 0.5632076795906327,
+              z: 0.8254971007016315,
+            },
             projection: {
               type: "perspective",
             },
@@ -322,13 +345,13 @@ export default {
 </script>
 
 <style scoped>
-#scene {
+/* #scene {
   background: #e5ecf6 !important;
 }
 .js-plotly-plot .plotly,
 .js-plotly-plot .plotly div {
   background: #e5ecf6 !important;
-}
+} */
 /* 样式可以根据需求自定义 */
 #plotly-3d-chart {
   width: 100%;

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

@@ -222,28 +222,42 @@ export default {
             backgroundcolor: "#e5ecf6",
             showbackground: true,
           },
-          // aspectratio: {
-          //   x: 1,
-          //   y: 3,
-          //   z: 1,
-          // },
+          bgcolor: "#e5ecf6", // 设置背景颜色
+
           aspectratio: {
             x: 3,
-            y: 1,
+            y: 1.5,
             z: 1,
           },
           plot_bgcolor: "#e5ecf6",
           gridcolor: "#fff",
           backgroundcolor: "#e5ecf6", // 设置背景颜色为白色
+
           // camera: {
-          //   center: { x: 0, y: 0, z: 0 },
-          //   eye: { x: 0, y: 0, z: 2.5 },
-          //   up: { x: 0, y: 0, z: 1 },
+          //   center: { x: -0.233946, y: -0.319396, z: 0.483055 },
+          //   eye: { x: -1.729102, y: -3.506569, z: -1.296184 },
+          //   up: { x: 0.12359, y: 0.43886022, z: -0.89001518 },
+          //   projection: {
+          //     type: "perspective",
+          //   },
           // },
           camera: {
-            center: { x: -0.233946, y: -0.319396, z: 0.483055 },
-            eye: { x: -1.729102, y: -3.506569, z: -1.296184 },
-            up: { x: 0.12359, y: 0.43886022, z: -0.89001518 },
+            //原始3
+            center: {
+              x: -0.375472972541404,
+              y: -0.5585992748989729,
+              z: -0.02739771471583052,
+            },
+            eye: {
+              x: -0.5046744702181177,
+              y: -3.1376489494672195,
+              z: 1.7379514809127419,
+            },
+            up: {
+              x: 0.036764743754523974,
+              y: 0.5632076795906327,
+              z: 0.8254971007016315,
+            },
             projection: {
               type: "perspective",
             },
@@ -278,9 +292,12 @@ export default {
         layout.scene.zaxis.dtick = zChartSetUp.dtick;
         layout.scene.zaxis.range = [zChartSetUp.min, zChartSetUp.max];
       }
-      console.log(zChartSetUp, yChartSetUp, xChartSetUp, "xChartSetUp");
       Plotly.newPlot(`plotly-3d-chart-` + this.index, traces, layout);
-      plotElement.on("plotly-3d-chart-", function (eventData) {
+      // 监听图表的 relayout 事件，获取并输出相机视角
+      const plotElement = document.getElementById(
+        `plotly-3d-chart-` + this.index
+      );
+      plotElement.on("plotly_relayout", function (eventData) {
         // 在每次布局变更时，打印当前相机视角
         if (eventData["scene.camera"]) {
           console.log(
@@ -322,11 +339,11 @@ export default {
 ::v-deep canvas {
   /* height: 400px !important; */
 }
-.js-plotly-plot .plotly,
+/* .js-plotly-plot .plotly,
 .js-plotly-plot .plotly div {
   background: #e5ecf6 !important;
 }
 #scene {
   background: #e5ecf6 !important;
-}
+} */
 </style>