diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json index feba81ac..df7fcf8e 100644 --- a/mindinsight/ui/src/locales/zh-cn.json +++ b/mindinsight/ui/src/locales/zh-cn.json @@ -434,7 +434,7 @@ "countUnit": "次", "unit": "ms/次", "gpuunit": "us/次", - "chartTitle": "平均耗时排行" + "chartTitle": "平均耗时排名" }, "profilingGPU": { "minddata_device_queue": { diff --git a/mindinsight/ui/src/views/profiling-gpu/operator.vue b/mindinsight/ui/src/views/profiling-gpu/operator.vue index 803a72f7..21b0adc5 100644 --- a/mindinsight/ui/src/views/profiling-gpu/operator.vue +++ b/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); }, diff --git a/mindinsight/ui/src/views/profiling/operator.vue b/mindinsight/ui/src/views/profiling/operator.vue index 68d900bd..a1bf7488 100644 --- a/mindinsight/ui/src/views/profiling/operator.vue +++ b/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);