fix: 柱状体3D效果优化调整

src/views/pageMonitor/bottomLeft/OpHistogram.vue

@@ -166,6 +166,7 @@ export default {
           height: "80%",
           top: "8%",
           right: 0,
+
           // bottom: "5%",
         },
         xAxis: {
@@ -270,6 +271,10 @@ export default {
                 that.colors[index]
               );
             },
+            shadowBlur: 8,
+            shadowColor: "rgba(255,255,255,.4)",
+            borderColor: "rgba(255,255,255,.6)",
+            borderWidth: 0.4,
           },
         });
       });

src/views/pageMonitor/bottomLeft/index.vue

@@ -47,11 +47,8 @@
 </template>
 
 <script>
-// import { GetMonitorOperationNumber } from "@/api/monitor";
 import { GetMonitorOperationDept } from "@/api/monitor";
 import dayjs from "dayjs";
-// import Histogram from "./OpHistogram.vue";
-// import Histogram from "@/views/pageMonitor/bottomLeft/OpHistogram.vue";
 import Histogram from "@/views/pageMonitor/bottomRight/DepHistogram.vue";
 export default {
   data() {

src/views/pageMonitor/bottomRight/DepHistogram.vue

@@ -273,6 +273,10 @@ export default {
                 that.colors[index]
               );
             },
+            shadowBlur: 8,
+            shadowColor: 'rgba(255,255,255,.4)',
+            borderColor: "rgba(255,255,255,.6)",
+            borderWidth: 0.4,
           },
         });
       });

src/views/pageMonitor/bottomRight/index.vue

@@ -9,18 +9,19 @@
       <img src="@/assets/svg/Monitor/Triangle.svg" />
       <span class="text-[2.03vh] youshe leading-none">手术量统计</span>
     </div>
-    <div class="w-[35.46vh] h-[28.05vh] ml-[2.4vh] my-[3.7vh]">
+    <div class="w-[35.46vh] h-[28.05vh] ml-[2.4vh] opBody">
-      <!-- <div ref="echartsContainer"></div> -->
+      <div class="h-[30vh] w-full">
-      <Histogram
+        <Histogram
-        v-if="getDataList.length"
+          v-if="getDataList.length"
-        :getDataList="getDataList"
+          :getDataList="getDataList"
-      ></Histogram>
+        ></Histogram>
-      <div
+        <div
-        v-else
+          v-else
-        class="flex flex-col w-[100%] h-[100%] items-center justify-center"
+          class="flex flex-col w-[100%] h-[100%] items-center justify-center"
-      >
+        >
-        <img src="@/assets/img/noData.png" class="w-[120px]" />
+          <img src="@/assets/img/noData.png" class="w-[120px]" />
-        <span>暂无数据</span>
+          <span>暂无数据</span>
+        </div>
       </div>
     </div>
     <div
@@ -46,8 +47,6 @@
 <script>
 import { GetMonitorOperationNumber } from "@/api/monitor";
 import dayjs from "dayjs";
-// import Histogram from "./DepHistogram.vue";
-// import Histogram from "@/views/pageMonitor/bottomRight/DepHistogram.vue"
 import Histogram from "@/views/pageMonitor/bottomLeft/OpHistogram.vue";
 
 export default {
@@ -126,4 +125,10 @@ export default {
 .bgMonthBox {
   background-image: url("@/assets/svg/Monitor/BottomLeft/MonthActive.svg");
 }
+.opBody{
+  height: calc(100% - 5.07vh);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>