CN-399 Detection--服务质量事件 指标变化曲线开发

src/views/detections/options/detectionOptions.js

@@ -289,16 +289,33 @@ export const activeAttackBar = {
 }
 export const metricOption = {
   tooltip: {
-    appendToBody: true,
+    show:true,
     trigger: 'axis',
+    formatter(params){
+      let str = '<div>'
+      let item = params[0]
+      const tData = item.data[0]
+      str += '<div style="margin-bottom: 5px">'
+      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
+      str += '</div>'
+      str += '<div class="cn-chart-tooltip-box">'
+      str += item.marker
+      str += `<span class="cn-chart-tooltip-content"> 
+      ${item.seriesName}
+      </span>`
+          str += `<span class="cn-chart-tooltip-value">
+          ${unitConvert(item.data[1], item.data[2]).join(' ')}
+      </span>`
+      str += '</div>'
+      return str
+    },
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important',
     textStyle: {
       width: '20px',
       overflow: 'truncate'
     },
-    //formatter: axisFormatter,
+    appendToBody: true
-    show: true,
-    className: 'nz-chart-tooltip',
-    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
   xAxis: {
     type: 'time',

src/views/detections/overview/DetectionPerformanceEventAppOverview.vue

@@ -67,6 +67,7 @@ import { unitTypes } from '@/utils/constants'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import * as echarts from 'echarts'
+import { markRaw } from 'vue'
 import { metricOption } from '@/views/detections/options/detectionOptions'
 import { sortBy,reverseSortBy } from '@/utils/tools'
 export default {
@@ -127,7 +128,7 @@ export default {
     },
 
     initChart(){
-      this.metricChart = echarts.init(document.getElementById('detectionMetricChartDomain'))
+      this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))
       this.chartOptionMetric = _.cloneDeep(this.chartOption)
 
       this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点

src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue

@@ -96,6 +96,7 @@ import { eventSeverityColor,unitTypes ,topDomain} from '@/utils/constants'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import * as echarts from 'echarts'
+import { markRaw } from 'vue'
 import { metricOption } from '@/views/detections/options/detectionOptions'
 import { sortBy,reverseSortBy } from '@/utils/tools'
 export default {
@@ -186,7 +187,7 @@ export default {
     },
 
     initChart(){
-      this.metricChart = echarts.init(document.getElementById('detectionMetricChartDomain'))
+      this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))//使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')
       this.chartOptionMetric = _.cloneDeep(this.chartOption)
 
       this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点

src/views/detections/overview/DetectionPerformanceEventIpOverview.vue

@@ -87,6 +87,7 @@ import { unitTypes } from '@/utils/constants'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import * as echarts from 'echarts'
+import { markRaw } from 'vue'
 import { metricOption } from '@/views/detections/options/detectionOptions'
 import { sortBy,reverseSortBy } from '@/utils/tools'
 export default {
@@ -149,7 +150,7 @@ export default {
     },
 
     initChart(){
-      this.metricChart = echarts.init(document.getElementById('detectionMetricChartIp'))
+      this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartIp')))
       this.chartOptionMetric = _.cloneDeep(this.chartOption)
 
       this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点