optimize monitor overview charts and the display of key indicators

packages/web/package.json

@@ -46,6 +46,7 @@
     "vue": "^3.2.13",
     "vue-clipboard3": "2.0.0",
     "vue-count-to": "1.0.13",
+    "vue-echarts": "^6.7.3",
     "vue-i18n": "9",
     "vue-native-websocket-vue3": "^3.1.7",
     "vue-router": "^4.0.3",

packages/web/projects/vgpu/components/TabTop.vue

@@ -192,7 +192,8 @@ watch(
   transition: background-color 0.15s ease;
 
   &:hover {
-    background-color: #f3f4f6;
+    background-color: transparent;
+    box-shadow: none;
   }
 }
 

packages/web/projects/vgpu/components/config.js

@@ -219,28 +219,51 @@ export const getTopOptions = ({ core, memory }) => {
   };
 };
 
-export const getLineOptions = ({ data = [], unit = '%' }) => {
+export const getLineOptions = ({ data = [], unit = '%', seriesName, animation = true }) => {
   return {
+    animation,
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'cross',
+        type: 'line',
+        lineStyle: {
+          type: 'dashed',
+          color: '#8A8A8A',
+        },
       },
       formatter: function (params) {
-        var res = params[0].name + '<br/>';
-        for (var i = 0; i < params.length; i++) {
-          res +=
-            params[i].marker + (+params[i].value).toFixed(0) + ` ${unit}<br/>`;
+        if (!Array.isArray(params) || params.length === 0) return '';
+
+        let result = `<div style="margin-bottom:5px;">${params[0]?.name ?? ''}</div>`;
+        for (let i = 0; i < params.length; i++) {
+          const item = params[i];
+          const raw = Array.isArray(item?.value) ? item.value[item.value.length - 1] : item?.value;
+          const num = Number(raw);
+          const value = Number.isFinite(num) ? `${num.toFixed(1)} ${unit}` : '-';
+          result += `
+            <div style="display:flex;align-items:center;font-size:14px;line-height:22px;">
+              <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${item?.color || '#5B8FF9'};margin-right:5px;"></span>
+              <span>${item?.seriesName || '-'}:&nbsp;</span>
+              <span style="font-weight:bold;">${value}</span>
+            </div>
+          `;
         }
-        return res;
+        return result;
       },
     },
     grid: {
-      top: 7, // 上边距
-      bottom: 20, // 下边距
-      left: '7%', // 左边距
-      right: 10, // 右边距
+      top: 20, // 上边距
+      bottom: 30, // 下边距
+      left: 30, // 左边距
+      right: 30, // 右边距
     },
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        filterMode: 'none',
+      },
+    ],
     xAxis: {
       type: 'category',
       data: data.map((item) => timeParse(+item.timestamp)),
@@ -255,10 +278,19 @@ export const getLineOptions = ({ data = [], unit = '%' }) => {
     },
     series: [
       {
+        name: seriesName || '',
         data: data.map((item) => {
           return item.value.toFixed(1);
         }),
         type: 'line',
+        lineStyle: {
+          width: 3,
+          color: '#5B8FF9',
+        },
+        itemStyle: {
+          color: '#5B8FF9',
+          borderColor: '#5B8FF9',
+        },
       },
     ],
   };

packages/web/projects/vgpu/components/gauge.vue

@@ -18,7 +18,7 @@
       <span>{{ title.includes('使用') || title.includes('Usage') ? $t('dashboard.usage') : $t('dashboard.allocation') }}</span>
       <span v-if="unit && !title.includes('算力') && !title.includes('Compute')"> ({{ unit }})</span>
       <span> : </span>
-      <b>{{ used.toFixed(1) }} / {{ total.toFixed() }}</b>
+      <b>{{ displayUsed.toFixed(1) }} / {{ displayTotal.toFixed() }}</b>
     </div>
   </div>
 </template>
@@ -38,6 +38,10 @@ const props = defineProps([
 ]);
 
 const showProgress = computed(() => props.showProgress !== false);
+const isComputeTitle = computed(() => props.title?.includes('算力') || props.title?.includes('Compute'));
+const displayDivisor = computed(() => (isComputeTitle.value ? 100 : 1));
+const displayUsed = computed(() => Number(props.used || 0) / displayDivisor.value);
+const displayTotal = computed(() => Number(props.total || 0) / displayDivisor.value);
 
 const progressColor = computed(() => {
   const value = Number(props.percent);

packages/web/projects/vgpu/components/previewBar.vue

@@ -197,7 +197,7 @@ onMounted(async () => {
     query: thisPieConfig.query,
   });
 
-  const colors = ['#5470c6', '#91cc75', '#2563EB', '#16A34A', '#7dd3fc', '#86efac'];
+  const colors = ['#76B900', '#9FCB98', '#F59E0B', '#4F8F87', '#14B8A6', '#6B7280'];
   pieData.value = data.map((item, index) => {
     return {
       name: item.metric[thisPieConfig.key],