数据仓库模块

src/views/component/DataWarehouse.vue

@@ -24,15 +24,15 @@
           <div class="layer-stats">
             <div class="stat-item">
               <span class="stat-label">全量同步累积次数</span>
-              <span class="stat-value">1,284</span>
+              <span class="stat-value">1284</span>
             </div>
             <div class="stat-item">
               <span class="stat-label">API类数据源同步次数</span>
-              <span class="stat-value">3,721</span>
+              <span class="stat-value">3721</span>
             </div>
             <div class="stat-item">
               <span class="stat-label">增量同步累积次数</span>
-              <span class="stat-value">8,547</span>
+              <span class="stat-value">8547</span>
             </div>
             <div class="stat-item">
               <span class="stat-label">视图类数据源同步次数</span>
@@ -82,14 +82,14 @@ export default {
       const xData = top20Apis.map((item) => item.abbr);
       const yData = top20Apis.map((item) => item.count);
 
-      // 配置项 - 修复悬停提示显示问题
+      // 配置项 - 优化样式
       const option = {
-        // backgroundColor: "#061326",
+        // 移除背景色设置，继承父容器背景
         grid: {
           top: "15%",
-          left: "-5%",
+          left: "0%",
-          bottom: "10%",
+          bottom: "5%", // 增加底部距离，让缩写名称离图表更远
-          right: "5%",
+          right: "0%",
           containLabel: true,
         },
         tooltip: {
@@ -102,10 +102,6 @@ export default {
             fontSize: 13,
           },
           formatter: function (params) {
-            // 根据您提供的打印信息，params是单个对象而不是数组
-            // 增加调试信息，帮助确认参数结构
-            console.log("Tooltip params:", params);
-
             // 检查参数是否有效
             if (
               !params ||
@@ -154,7 +150,7 @@ export default {
                 fontSize: 13,
                 fontWeight: "bold",
               },
-              margin: 15,
+              margin: 25, // 增加与图表的距离
               rotate: 0,
             },
           },
@@ -195,7 +191,7 @@ export default {
                 color: "#34DCFF",
               },
             },
-            color: "#2DB1EF",
+            color: "#36BFFA", // 优化上部椭圆颜色
             data: yData,
           },
           {
@@ -204,7 +200,7 @@ export default {
             symbolSize: [40, 10],
             symbolOffset: [0, 7],
             z: 12,
-            color: "#2DB1EF",
+            color: "#36BFFA", // 优化下部椭圆颜色
             data: yData,
           },
           {
@@ -218,7 +214,7 @@ export default {
             itemStyle: {
               normal: {
                 color: "transparent",
-                borderColor: "#2EA9E5",
+                borderColor: "#36BFFA", // 优化内环颜色
                 borderType: "solid",
                 borderWidth: 1,
               },
@@ -234,7 +230,7 @@ export default {
             itemStyle: {
               normal: {
                 color: "transparent",
-                borderColor: "#19465D",
+                borderColor: "#1990CC", // 优化外环颜色
                 borderType: "solid",
                 borderWidth: 2,
               },
@@ -251,14 +247,14 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                   {
                     offset: 0,
-                    color: "#38B2E6",
+                    color: "#36BFFA", // 优化柱状图顶部颜色
                   },
                   {
                     offset: 1,
-                    color: "#0B3147",
+                    color: "#0A4C6D", // 优化柱状图底部颜色
                   },
                 ]),
-                opacity: 0.8,
+                opacity: 0.9, // 稍微提高不透明度
               },
             },
             data: yData,
@@ -273,7 +269,7 @@ export default {
     // 挂载时初始化图表
     onMounted(() => {
       if (dwdChartRef.value) {
-        dwdChartRef.value.style.height = "calc(100% - 20px)";
+        dwdChartRef.value.style.height = "calc(100% - 20px)"; // 适当减小高度
         initChart();
 
         const handleResize = () => {
@@ -306,7 +302,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/* 样式保持不变 */
 .data-warehouse {
   height: 100%;
   box-sizing: border-box;
@@ -390,7 +385,7 @@ export default {
   box-sizing: border-box;
 
   .layer-title {
-    font-size: 16px;
+    font-size: 18px;
     color: #fff;
     margin-bottom: 12px;
     text-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
@@ -410,16 +405,17 @@ export default {
       transition: all 0.3s ease;
 
       .stat-label {
-        font-size: 13px;
+        font-size: 16px;
-        color: rgba(255, 255, 255, 0.7);
+        color: rgba(255, 255, 255, 0.9);
         display: block;
         margin-bottom: 6px;
       }
 
       .stat-value {
-        font-size: 16px;
+        font-size: 32px;
         font-weight: bold;
-        background: linear-gradient(to top, #4a90e2, #fff);
+        background: #17f5f8;
+        font-style: italic;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
@@ -429,7 +425,7 @@ export default {
   .layer-chart {
     flex: 1;
     width: 100%;
-    min-height: 400px;
+    min-height: 200px; // 适当减小最小高度
   }
 }
 
@@ -469,7 +465,7 @@ export default {
   }
 
   .layer-chart {
-    min-height: 300px;
+    min-height: 180px; // 响应式下适当减小高度
   }
 }
 </style>