update tooltips

src/components/Graph.vue

@@ -121,9 +121,6 @@ function instanceEvent() {
           return;
         }
         visMenus.value = false;
-        instance.dispatchAction({
-          type: "hideTip",
-        });
         instance.dispatchAction({
           type: "updateAxisPointer",
           currTrigger: "leave",
@@ -137,6 +134,7 @@ function instanceEvent() {
 function associateMetrics() {
   emits("select", currentParams.value);
   visMenus.value = true;
+  updateOptions();
 }
 
 function updateOptions() {
@@ -153,7 +151,7 @@ function updateOptions() {
     setOptions(options || props.option);
   } else {
     instance.dispatchAction({
-      type: "showTip",
+      type: "updateAxisPointer",
       dataIndex: props.filters.dataIndex,
       seriesIndex: 0,
     });

src/locales/lang/en.ts

@@ -157,7 +157,7 @@ const msg = {
   postgreSQL: "PostgreSQL",
   endpointTips: "The table shows up to 20 pieces of endpoints.",
   apisix: "APISIX",
-  viewTrace: "View related trace",
+  viewTrace: "View Related Traces",
   relatedTraceOptions: "Related Trace Options",
   setLatencyDuration: "Set Latency Range",
   queryOrder: "Query Order",
@@ -356,6 +356,6 @@ const msg = {
     "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
   language: "Language",
   gateway: "Gateway",
-  virtualMQ: "Virtual MQ"
+  virtualMQ: "Virtual MQ",
 };
 export default msg;

src/views/dashboard/graphs/Line.vue

@@ -118,13 +118,17 @@ function getOption() {
       break;
   }
   const tooltip = {
-    trigger: "axis",
-    textStyle: {
-      fontSize: 12,
-      color: "#333",
+    trigger: "none",
+    axisPointer: {
+      type: "cross",
     },
-    enterable: true,
-    confine: true,
+    // trigger: "axis",
+    // textStyle: {
+    //   fontSize: 12,
+    //   color: "#333",
+    // },
+    // enterable: true,
+    // confine: true,
     extraCssText: "max-height: 300px; overflow: auto; border: none;",
   };
   const tips = {
@@ -154,6 +158,11 @@ function getOption() {
         color: props.theme === "dark" ? "#fff" : "#333",
       },
     },
+    axisPointer: {
+      label: {
+        backgroundColor: "#777",
+      },
+    },
     grid: {
       top: keys.length === 1 ? 15 : 55,
       left: 0,