CN-342 图表优化

1.type=11的折线图，Y轴最小间隔是1，需要将其放开为包含小数，使曲线可以充满图表 2.detection顶部柱状图优化调整： (1).不同严重程度的柱体展示从并排改为堆叠 (2).x轴时间格式精简为mm:ss，且数量过多导致x轴label重叠时，隐藏一部分label
2022-03-09 15:05:46 +08:00
parent 1fda36a1bd
commit 9aedf25dd2
5 changed files with 75 additions and 66 deletions
--- a/src/utils/date-util.js
+++ b/src/utils/date-util.js
@@ -42,5 +42,5 @@ export function getNowTime (interval) {
 }
 // 日期格式转换
 export function rTime (date) {
-  return window.$dayJs.tz(new Date(date)).format('YYYY-MM-DD HH:mm:ss')
+  return window.$dayJs.tz(new Date(date)).format('mm:ss')
 }
--- a/src/views/charts/charts/ChartEchart.vue
+++ b/src/views/charts/charts/ChartEchart.vue
@@ -100,6 +100,15 @@ export default {
              unitType: chartParams.unitType ? chartParams.unitType : 'number'
            }
          })
+        }else {
+          this.chartOption.series[0].data = this.chartData.map(d => {
+            return {
+              name: lineToSpace(d.name),
+              data: d,
+              value: parseInt(d.num),
+              unitType: chartParams.unitType ? chartParams.unitType : 'number'
+            }
+          })
        }
      } else {
        const seriesTemplate = this.chartOption.series[0]
--- a/src/views/charts/charts/options/line.js
+++ b/src/views/charts/charts/options/line.js
@@ -24,8 +24,7 @@ export const line = {
      formatter: function (value, index, a, b) {
        return unitConvert(value, unitTypes.number).join(' ')
      }
-    },
-    minInterval: 1
+    }
  },
  animation: false,
  grid: {
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -235,118 +235,99 @@ export default {
    initEventSeverityTrendData (params) {
      this.loading = true
      getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
-        /* data = [
+        /*data = [
          {
-            "stat_time": "2022-01-01T10:07:03.008Z",
-            "event_severity": "critical",
+            "statTime": "2022-01-01T10:07:03.008Z",
+            "eventSeverity": "critical",
            "count": 5
          },
          {
-            "stat_time": "2022-01-02T10:07:03.008Z",
-            "event_severity": "critical",
+            "statTime": "2022-01-02T10:07:03.008Z",
+            "eventSeverity": "critical",
            "count": 15
          },{
-            "stat_time": "2022-01-03T10:07:03.008Z",
-            "event_severity": "critical",
+            "statTime": "2022-01-03T10:07:03.008Z",
+            "eventSeverity": "critical",
            "count": 25
          },
          {
-            "stat_time": "2022-01-04T10:07:03.008Z",
-            "event_severity": "critical",
+            "statTime": "2022-01-04T10:07:03.008Z",
+            "eventSeverity": "critical",
            "count": 7
          },{
-            "stat_time": "2022-01-01T10:07:03.008Z",
-            "event_severity": "high",
+            "statTime": "2022-01-01T10:07:03.008Z",
+            "eventSeverity": "high",
            "count": 8
          },
          {
-            "stat_time": "2022-01-02T10:07:03.008Z",
-            "event_severity": "high",
+            "statTime": "2022-01-02T10:07:03.008Z",
+            "eventSeverity": "high",
            "count": 2
          },{
-            "stat_time": "2022-01-03T10:07:03.008Z",
-            "event_severity": "high",
+            "statTime": "2022-01-03T10:07:03.008Z",
+            "eventSeverity": "high",
            "count": 25
          },
          {
-            "stat_time": "2022-01-04T10:07:03.008Z",
-            "event_severity": "high",
+            "statTime": "2022-01-04T10:07:03.008Z",
+            "eventSeverity": "high",
            "count": 7
          },{
-            "stat_time": "2022-01-01T10:07:03.008Z",
-            "event_severity": "medium",
+            "statTime": "2022-01-01T10:07:03.008Z",
+            "eventSeverity": "medium",
            "count": 9
          },
          {
-            "stat_time": "2022-01-02T10:07:03.008Z",
-            "event_severity": "medium",
+            "statTime": "2022-01-02T10:07:03.008Z",
+            "eventSeverity": "medium",
            "count": 15
          },{
-            "stat_time": "2022-01-03T10:07:03.008Z",
-            "event_severity": "medium",
+            "statTime": "2022-01-03T10:07:03.008Z",
+            "eventSeverity": "medium",
            "count": 35
          },
          {
-            "stat_time": "2022-01-04T10:07:03.008Z",
-            "event_severity": "medium",
+            "statTime": "2022-01-04T10:07:03.008Z",
+            "eventSeverity": "medium",
            "count": 7
          },{
-            "stat_time": "2022-01-01T10:07:03.008Z",
-            "event_severity": "low",
+            "statTime": "2022-01-01T10:07:03.008Z",
+            "eventSeverity": "low",
            "count": 5
          },
          {
-            "stat_time": "2022-01-02T10:07:03.008Z",
-            "event_severity": "low",
+            "statTime": "2022-01-02T10:07:03.008Z",
+            "eventSeverity": "low",
            "count": 1
          },{
-            "stat_time": "2022-01-03T10:07:03.008Z",
-            "event_severity": "low",
+            "statTime": "2022-01-03T10:07:03.008Z",
+            "eventSeverity": "low",
            "count": 25
          },
          {
-            "stat_time": "2022-01-04T10:07:03.008Z",
-            "event_severity": "low",
+            "statTime": "2022-01-04T10:07:03.008Z",
+            "eventSeverity": "low",
            "count": 17
          },{
-            "stat_time": "2022-01-01T10:07:03.008Z",
-            "event_severity": "info",
+            "statTime": "2022-01-01T10:07:03.008Z",
+            "eventSeverity": "info",
            "count": 5
          },
          {
-            "stat_time": "2022-01-02T10:07:03.008Z",
-            "event_severity": "info",
+            "statTime": "2022-01-02T10:07:03.008Z",
+            "eventSeverity": "info",
            "count": 15
          },{
-            "stat_time": "2022-01-03T10:07:03.008Z",
-            "event_severity": "info",
+            "statTime": "2022-01-03T10:07:03.008Z",
+            "eventSeverity": "info",
            "count": 25
          },
          {
-            "stat_time": "2022-01-04T10:07:03.008Z",
-            "event_severity": "info",
+            "statTime": "2022-01-04T10:07:03.008Z",
+            "eventSeverity": "info",
            "count": 27
          },
-        ] */
-        /* data2 = [
-          {
-            legend: 'critical',
-            values: [[1435781430781, '999'], [1435781431781, '222'], [1435781432781, '11'], [1435781433781, '3']]
-          },
-          {
-            legend: 'high',
-            values: [[1435781430781, '2'], [1435781431781, '3'], [1435781432781, '6'], [1435781433781, '4']]
-          }, {
-            legend: 'medium',
-            values: [[1435781430781, '4'], [1435781431781, '1'], [1435781432781, '5'], [1435781433781, '3']]
-          }, {
-            legend: 'low',
-            values: [[1435781430781, '1'], [1435781431781, '4'], [1435781432781, '1'], [1435781433781, '3']]
-          }, {
-            legend: 'info',
-            values: [[1435781430781, '5'], [1435781431781, '7'], [1435781432781, '5'], [1435781433781, '8']]
-          }
-        ] */
+        ]*/
        this.eventSeverityData = data
        if (!this.$_.isEmpty(data)) {
          const dataMap = new Map()
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -52,7 +52,7 @@ export const multipleBarOption = {
  legend: {
    icon: 'circle',
    top: 10,
-    right: 10,
+    right: 30,
    itemWidth: 10, // 设置宽度
    itemHeight: 10 // 设置高度
  },
@@ -72,7 +72,7 @@ export const multipleBarOption = {
    },
    axisLabel: {
      color: '#737373',
-      interval: 0
+      interval: 'auto'
    },
    splitLine: {
      show: false
@@ -104,6 +104,10 @@ export const multipleBarOption = {
    {
      name: 'critical',
      type: 'bar',
+      stack:'eventSeverityTrend',
+      emphasis: {
+        focus: 'series'
+      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
@@ -113,6 +117,10 @@ export const multipleBarOption = {
    {
      name: 'high',
      type: 'bar',
+      stack:'eventSeverityTrend',
+      emphasis: {
+        focus: 'series'
+      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
@@ -122,6 +130,10 @@ export const multipleBarOption = {
    {
      name: 'medium',
      type: 'bar',
+      stack:'eventSeverityTrend',
+      emphasis: {
+        focus: 'series'
+      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
@@ -131,6 +143,10 @@ export const multipleBarOption = {
    {
      name: 'low',
      type: 'bar',
+      stack:'eventSeverityTrend',
+      emphasis: {
+        focus: 'series'
+      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {
@@ -140,6 +156,10 @@ export const multipleBarOption = {
    {
      name: 'info',
      type: 'bar',
+      stack:'eventSeverityTrend',
+      emphasis: {
+        focus: 'series'
+      },
      barWidth: 15,
      seriesLayoutBy: 'row',
      itemStyle: {