UI add tooltip of label namens on the visualization page

mindinsight/ui/src/locales/zh-cn.json

@@ -434,7 +434,7 @@
     "countUnit": "次",
     "unit": "ms/次",
     "gpuunit": "us/次",
-    "chartTitle": "平均耗时排行"
+    "chartTitle": "平均耗时排名"
   },
   "components": {
     "summaryTitle": "训练选择",

mindinsight/ui/src/views/profiling-gpu/operator.vue

@@ -366,6 +366,15 @@ export default {
     // Remove the listener of window size change
     window.removeEventListener('resize', this.resizeCallback);
     this.$bus.$off('collapse');
+
+    if (this.operatorCharts.chartDom) {
+      this.operatorCharts.chartDom.off('mouseover');
+      this.operatorCharts.chartDom.off('mouseout');
+    }
+    if (this.coreCharts.chartDom) {
+      this.coreCharts.chartDom.off('mouseover');
+      this.coreCharts.chartDom.off('mouseout');
+    }
   },
   methods: {
     getHeaderField(key) {
@@ -1027,6 +1036,7 @@ export default {
             rotate: -30,
           },
           data: [],
+          triggerEvent: true,
         };
         option.grid = {
           left: 70,
@@ -1066,11 +1076,46 @@ export default {
           chart.chartDom = echarts.init(tmpDom, null);
         } else {
           if (chart.chartDom) {
+            chart.chartDom.off('mouseover');
+            chart.chartDom.off('mouseout');
             chart.chartDom.clear();
           }
           return;
         }
         chart.chartDom.setOption(option, true);
+        if (chart.type) {
+          chart.chartDom.off('mouseover');
+          chart.chartDom.off('mouseout');
+          chart.chartDom.on('mouseover', (params) => {
+            if (params.componentType === 'xAxis') {
+              const offsetX = params.event.offsetX + 10;
+              const offsetY = params.event.offsetY + 10;
+              chart.chartDom.setOption({
+                tooltip: {
+                  formatter: params.value,
+                  alwaysShowContent: true,
+                },
+              });
+              chart.chartDom.dispatchAction({
+                type: 'showTip',
+                seriesIndex: 0,
+                dataIndex: 0,
+                position: [offsetX, offsetY],
+              });
+            }
+          });
+
+          chart.chartDom.on('mouseout', (params) => {
+            if (params.componentType === 'xAxis') {
+              chart.chartDom.setOption({
+                tooltip: {
+                  formatter: '',
+                  alwaysShowContent: false,
+                },
+              });
+            }
+          });
+        }
         chart.chartDom.resize();
       }, 10);
     },

mindinsight/ui/src/views/profiling/operator.vue

@@ -465,6 +465,15 @@ export default {
     // Remove the listener of window size change
     window.removeEventListener('resize', this.resizeCallback);
     this.$bus.$off('collapse');
+
+    if (this.cpuCharts.chartDom) {
+      this.cpuCharts.chartDom.off('mouseover');
+      this.cpuCharts.chartDom.off('mouseout');
+    }
+    if (this.coreCharts.chartDom) {
+      this.coreCharts.chartDom.off('mouseover');
+      this.coreCharts.chartDom.off('mouseout');
+    }
   },
   methods: {
     getHeaderField(key) {
@@ -1279,6 +1288,7 @@ export default {
             rotate: -30,
           },
           data: [],
+          triggerEvent: true,
         };
         option.grid = {
           left: 50,
@@ -1300,11 +1310,46 @@ export default {
           chart.chartDom = echarts.init(cpuDom, null);
         } else {
           if (chart.chartDom) {
+            chart.chartDom.off('mouseover');
+            chart.chartDom.off('mouseout');
             chart.chartDom.clear();
           }
           return;
         }
         chart.chartDom.setOption(option, true);
+        if (chart.type) {
+          chart.chartDom.off('mouseover');
+          chart.chartDom.off('mouseout');
+          chart.chartDom.on('mouseover', (params) => {
+            if (params.componentType === 'xAxis') {
+              const offsetX = params.event.offsetX + 10;
+              const offsetY = params.event.offsetY + 10;
+              chart.chartDom.setOption({
+                tooltip: {
+                  formatter: params.value,
+                  alwaysShowContent: true,
+                },
+              });
+              chart.chartDom.dispatchAction({
+                type: 'showTip',
+                seriesIndex: 0,
+                dataIndex: 0,
+                position: [offsetX, offsetY],
+              });
+            }
+          });
+
+          chart.chartDom.on('mouseout', (params) => {
+            if (params.componentType === 'xAxis') {
+              chart.chartDom.setOption({
+                tooltip: {
+                  formatter: '',
+                  alwaysShowContent: false,
+                },
+              });
+            }
+          });
+        }
         chart.chartDom.resize();
       }, 10);
     },
@@ -1326,7 +1371,7 @@ export default {
      */
     showDialogData(val, column) {
       this.detailsDataList = [];
-      if (typeof val !== 'string' || val == '{}') {
+      if (typeof val !== 'string' || val === '{}') {
         return;
       } else {
         const isJson = this.isJSON(val);