feat: update graph

src/components/Graph.vue

@@ -15,7 +15,14 @@ limitations under the License. -->
 <template>
   <div class="chart" ref="chartRef" :style="`height:${height};width:${width};`">
     <div v-if="!available" class="no-data">No Data</div>
-    <div class="menus" v-show="visMenus" ref="menus">
+    <div
+      class="menus"
+      v-show="visMenus"
+      :style="{
+        top: menuPos.y + 'px',
+        left: menuPos.x + 'px',
+      }"
+    >
       <div class="tools" @click="associateMetrics" v-if="associate.length">
         {{ t("associateMetrics") }}
       </div>
@@ -23,6 +30,16 @@ limitations under the License. -->
         {{ t("viewTrace") }}
       </div>
     </div>
+    <div
+      class="menus"
+      v-show="showTooltip"
+      :style="{
+        top: tooltipPos.y + 'px',
+        left: tooltipPos.x + 'px',
+      }"
+    >
+      <div v-for="(item, index) in tipValues" :key="index">{{ item.name }}: {{ item.value }}</div>
+    </div>
     <el-drawer
       v-model="showTrace"
       size="100%"
@@ -36,7 +53,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { watch, ref, onMounted, onBeforeUnmount, unref, computed } from "vue";
+  import { watch, ref, onMounted, onBeforeUnmount, unref, computed, reactive } from "vue";
   import type { PropType, Ref } from "vue";
   import { useI18n } from "vue-i18n";
   import type { EventParams } from "@/types/app";
@@ -50,7 +67,6 @@ limitations under the License. -->
   const emits = defineEmits(["select"]);
   const { t } = useI18n();
   const chartRef = ref<Nullable<HTMLDivElement>>(null);
-  const menus = ref<Nullable<HTMLDivElement>>(null);
   const visMenus = ref<boolean>(false);
   const { setOptions, resize, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
   const currentParams = ref<Nullable<EventParams>>(null);
@@ -58,6 +74,10 @@ limitations under the License. -->
   const traceOptions = ref<{ type: string; filters?: unknown }>({
     type: "Trace",
   });
+  const menuPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
+  const showTooltip = ref<boolean>(false);
+  const tooltipPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
+  const tipValues = ref<{ name: string; value: number }[]>([]);
   const props = defineProps({
     height: { type: String, default: "100%" },
     width: { type: String, default: "100%" },
@@ -100,26 +120,33 @@ limitations under the License. -->
           emits("select", currentParams.value);
           return;
         }
-        if (!menus.value || !chartRef.value) {
+        showTooltip.value = false;
+        if (!chartRef.value) {
           return;
         }
         visMenus.value = true;
         const w = chartRef.value.getBoundingClientRect().width || 0;
         const h = chartRef.value.getBoundingClientRect().height || 0;
         if (w - params.event.offsetX > 120) {
-          menus.value.style.left = params.event.offsetX + "px";
+          menuPos.x = params.event.offsetX;
         } else {
-          menus.value.style.left = params.event.offsetX - 120 + "px";
+          menuPos.x = params.event.offsetX - 120;
         }
         if (h - params.event.offsetY < 50) {
-          menus.value.style.top = params.event.offsetY - 40 + "px";
+          menuPos.y = params.event.offsetY - 40;
         } else {
-          menus.value.style.top = params.event.offsetY + 2 + "px";
+          menuPos.y = params.event.offsetY + 2;
         }
       });
       if (props.option.series.type === "sankey") {
         return;
       }
+      instance.on("mouseover", (params: EventParams) => {
+        setTooltips(params);
+      });
+      instance.on("mouseout", () => {
+        showTooltip.value = false;
+      });
       document.addEventListener(
         "click",
         () => {
@@ -127,6 +154,7 @@ limitations under the License. -->
             return;
           }
           visMenus.value = false;
+          showTooltip.value = false;
           instance.dispatchAction({
             type: "updateAxisPointer",
             currTrigger: "leave",
@@ -137,16 +165,39 @@ limitations under the License. -->
     }, 1000);
   }
 
-  function associateMetrics() {
-    emits("select", currentParams.value);
-    const { dataIndex, seriesIndex } = currentParams.value || {
-      dataIndex: 0,
-      seriesIndex: 0,
-    };
-    updateOptions({ dataIndex, seriesIndex });
+  function setTooltips(params: EventParams | undefined) {
+    if (!chartRef.value || !params) {
+      return;
+    }
+    tipValues.value = [];
+    showTooltip.value = true;
+    visMenus.value = false;
+    const w = chartRef.value.getBoundingClientRect().width || 0;
+    const h = chartRef.value.getBoundingClientRect().height || 0;
+    if (w - params.event.offsetX > 50) {
+      tooltipPos.x = params.event.offsetX;
+    } else {
+      tooltipPos.x = params.event.offsetX - 30;
+    }
+    if (h - params.event.offsetY < 50) {
+      tooltipPos.y = params.event.offsetY - 20;
+    } else {
+      tooltipPos.y = params.event.offsetY + 2;
+    }
+    for (const item of props.option.series) {
+      tipValues.value.push({
+        name: item.name,
+        value: item.data[params.dataIndex] ? item.data[params.dataIndex][1] : null,
+      });
+    }
   }
 
-  function updateOptions(params?: { dataIndex: number; seriesIndex: number }) {
+  function associateMetrics() {
+    emits("select", currentParams.value);
+    updateOptions(currentParams.value || undefined);
+  }
+
+  function updateOptions(params?: EventParams) {
     const instance = getInstance();
     if (!instance) {
       return;

src/views/dashboard/graphs/Line.vue

@@ -94,8 +94,6 @@ limitations under the License. -->
       trigger: "none",
       axisPointer: {
         type: "cross",
-        color: "#333",
-        backgroundColor: "rgba(255, 255, 255, 0.8)",
       },
       // trigger: "axis",
       // textStyle: {