项目初始化

web-vue/packages/core/layouts/views/desktop/analysis/components/HostInfo.vue

@@ -16,7 +16,7 @@
 
         <div class="host-metrics">
           <div v-for="item in sideMetrics" :key="item.key" class="metric-item">
-            <div class="metric-item__value" :style="{ color: item.color }">{{ item.value }}%</div>
+            <div :ref="(el) => setMiniChartRef(el, item.key)" class="metric-item__chart"></div>
             <div class="metric-item__label">{{ item.label }}</div>
           </div>
         </div>
@@ -33,6 +33,7 @@
 
   const hostCardRef = ref<HTMLElement>();
   const chartRef = ref<HTMLElement>();
+  const miniChartRefs = new Map<string, HTMLDivElement>();
 
   const cpuData = ref<ChartInfo[]>([]);
   const loading = ref(false);
@@ -46,8 +47,17 @@
   });
 
   let chartInstance: echarts.ECharts | null = null;
+  const miniChartInstances = new Map<string, echarts.ECharts>();
   let resizeObserver: ResizeObserver | null = null;
 
+  function setMiniChartRef(el: Element | null, key: string) {
+    if (el instanceof HTMLDivElement) {
+      miniChartRefs.set(key, el);
+    } else {
+      miniChartRefs.delete(key);
+    }
+  }
+
   async function getList() {
     loading.value = true;
     try {
@@ -60,6 +70,7 @@
       loading.value = false;
       nextTick(() => {
         renderChart();
+        renderMiniCharts();
       });
     }
   }
@@ -173,6 +184,63 @@
 
   function resizeCharts() {
     chartInstance?.resize();
+    miniChartInstances.forEach((chart) => chart.resize());
+  }
+
+  function renderMiniCharts() {
+    sideMetrics.value.forEach((item) => {
+      const el = miniChartRefs.get(item.key);
+      if (!el) return;
+
+      let chart = miniChartInstances.get(item.key);
+      if (!chart) {
+        chart = echarts.init(el);
+        miniChartInstances.set(item.key, chart);
+      }
+
+      chart.setOption({
+        animation: true,
+        series: [
+          {
+            type: 'pie',
+            radius: ['66%', '82%'],
+            center: ['50%', '50%'],
+            silent: true,
+            label: { show: false },
+            labelLine: { show: false },
+            data: [
+              {
+                value: item.value,
+                itemStyle: {
+                  color: item.color,
+                  borderRadius: 10,
+                },
+              },
+              {
+                value: Math.max(100 - Number(item.value || 0), 0),
+                itemStyle: {
+                  color: 'rgba(148, 163, 184, 0.18)',
+                },
+              },
+            ],
+          },
+        ],
+        graphic: [
+          {
+            type: 'text',
+            left: 'center',
+            top: 'center',
+            style: {
+              text: `${item.value}%`,
+              textAlign: 'center',
+              fill: item.color,
+              fontSize: 12,
+              fontWeight: 700,
+            },
+          },
+        ],
+      });
+    });
   }
 
   onMounted(() => {
@@ -191,6 +259,8 @@
     resizeObserver?.disconnect();
     window.removeEventListener('resize', resizeCharts);
     chartInstance?.dispose();
+    miniChartInstances.forEach((chart) => chart.dispose());
+    miniChartInstances.clear();
     chartInstance = null;
   });
 </script>
@@ -302,7 +372,7 @@
         background 0.2s ease;
 
       &__label {
-        margin-top: 8px;
+        margin-top: 6px;
         color: rgb(71 85 105);
         font-size: 12px;
         line-height: 16px;
@@ -310,11 +380,10 @@
         word-break: break-word;
       }
 
-      &__value {
+      &__chart {
-        font-size: 20px;
+        width: 100%;
-        font-weight: 700;
+        height: 72px;
-        line-height: 1;
+        min-height: 72px;
-        white-space: nowrap;
       }
 
       &:hover {

web-vue/packages/core/layouts/views/desktop/analysis/index.vue

@@ -1,9 +1,5 @@
 <template>
-  <PageWrapper
+  <PageWrapper :contentFullHeight="true" :dense="true" title="false" contentClass="analysis-page-wrapper">
-    :contentFullHeight="true"
-    title="false"
-    contentClass="analysis-page-wrapper"
-  >
     <div class="analysis-page">
       <div class="mySpring-analysis">
         <div class="analysis-layout">
@@ -42,6 +38,9 @@
     height: 100%;
     min-height: 0;
     padding: 0 !important;
+    width: calc(100% + 10px);
+    margin-left: -5px !important;
+    margin-right: -5px !important;
     margin-bottom: 0 !important;
     overflow: hidden !important;
     background: transparent !important;
@@ -53,6 +52,8 @@
     width: 100%;
     height: 100%;
     min-height: 0;
+    padding: 0 !important;
+    padding-bottom: 2px !important;
     overflow: hidden;
     background: transparent;
   }
@@ -60,6 +61,7 @@
   .mySpring-analysis {
     flex: 1;
     min-height: 0;
+    padding: 0 !important;
     overflow: hidden;
   }
 
@@ -82,7 +84,7 @@
     max-height: 100%;
     min-height: 0;
     gap: 12px;
-    padding: 4px;
+    padding: 0;
     box-sizing: border-box;
     overflow: hidden;
     background: transparent;