CN-325 detection--没有nodata提示等问题:

1.detection的echarts图表没有数据时，应显示no data;
    2.上方的柱状图数据多时，y轴太过密密麻麻
    3.右侧柱状图限制数量，只显示top5

src/views/detections/DetectionNoData.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="no-data">No data</div>
+</template>
+
+<script>
+export default {
+  name: 'DetectionNoData'
+}
+</script>

src/views/detections/Index.vue

@@ -14,7 +14,9 @@
     ></detection-search>
     <!-- 内容区 -->
     <div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column">
-      <div class="detection__event-severity-bar" :id="`eventSeverityTrendBar${pageType}`"></div>
+      <div class="detection__event-severity-bar" :id="`eventSeverityTrendBar${pageType}`">
+        <detection-no-data v-if="isEventSeverityNoData"></detection-no-data>
+      </div>
       <div style="display: flex; flex-grow: 1">
         <detection-filter
             :filter-data="filterData[pageType]"
@@ -30,6 +32,7 @@
                 <div class="chart-header__title">{{$t('detection.severity')}}</div>
               </div>
               <div class="chart-content" :id="`eventSeverityPie${pageType}`">
+                <detection-no-data v-if="isStatisticsSeverityNoData"></detection-no-data>
               </div>
             </div>
             <div class="statistics__category">
@@ -37,6 +40,7 @@
                 <div class="chart-header__title">{{$t('detection.categoryProportion')}}</div>
               </div>
               <div class="chart-content" :id="`detectionCategoryPer${pageType}`">
+                <detection-no-data v-if="isStatisticsCategoryNoData"></detection-no-data>
               </div>
             </div>
             <div class="statistics__active-attack">
@@ -44,6 +48,7 @@
                 <div class="chart-header__title">{{pageType === detectionPageType.securityEvent ? $t('detection.activeAttacker') : $t('detections.activeEntity')}}</div>
               </div>
               <div class="chart-content" style="" :id="`detectionActiveAttacker${pageType}`">
+                <detection-no-data v-if="isStatisticsActiveAttackNoData"></detection-no-data>
               </div>
             </div>
           </div>
@@ -88,6 +93,7 @@ import * as echarts from 'echarts'
 import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions'
 import { api, getData } from '@/utils/api'
 import { useRoute } from 'vue-router'
+import DetectionNoData from '@/views/detections/DetectionNoData'
 
 export default {
   name: 'Index',
@@ -97,7 +103,8 @@ export default {
     TimeRefresh,
     DetectionFilter,
     DetectionList,
-    Pagination
+    Pagination,
+    DetectionNoData
   },
   data () {
     return {
@@ -192,7 +199,11 @@ export default {
       categoryPerOption: null,
       categoryPerData: [],
       activeAttackOption: null,
-      activeAttackData: []
+      activeAttackData: [],
+      isEventSeverityNoData:true,
+      isStatisticsSeverityNoData:true,
+      isStatisticsCategoryNoData:true,
+      isStatisticsActiveAttackNoData:true
     }
   },
   methods: {
@@ -202,7 +213,7 @@ export default {
         /*data = [
           {
             legend: 'critical',
-            values: [[1435781430781, '5'], [1435781431781, '3'], [1435781432781, '5'], [1435781433781, '3']]
+            values: [[1435781430781, '999'], [1435781431781, '222'], [1435781432781, '11'], [1435781433781, '3']]
           },
           {
             legend: 'high',
@@ -218,6 +229,7 @@ export default {
             values: [[1435781430781, '5'], [1435781431781, '7'], [1435781432781, '5'], [1435781433781, '8']]
           }
         ]*/
+        if (!this.$_.isEmpty(data)) {
           const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
           const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
@@ -228,6 +240,8 @@ export default {
           this.$nextTick(() => {
             detectionChart.setOption(eventSeverityTrendOption)
           })
+          this.isEventSeverityNoData = false
+        }
       }).catch(error => {
 
       })
@@ -253,6 +267,7 @@ export default {
             count: 300
           }
         ]*/
+        if (!this.$_.isEmpty(data)) {
           this.filterData[this.pageType][0].data = data.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
           const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
           eventSeverityOption.series[0].data = data.map(d => {
@@ -261,6 +276,8 @@ export default {
           const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
           detectionChart.setOption(eventSeverityOption)
+          this.isStatisticsSeverityNoData = false
+        }
       }).catch(error => {
 
       })
@@ -288,7 +305,12 @@ export default {
             count: 50
           }
         ]*/
-        this.filterData[this.pageType][1].data = data.map(r => ({ label: r.attackType, value: r.attackType, count: r.count }))
+        if (!this.$_.isEmpty(data)) {
+          this.filterData[this.pageType][1].data = data.map(r => ({
+            label: r.attackType,
+            value: r.attackType,
+            count: r.count
+          }))
           const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
           const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
@@ -296,6 +318,8 @@ export default {
             return {value: d.count, name: d.attackType, itemStyle: {color: getAttackColor(d.attackType)}}
           })
           detectionChart.setOption(securityTypeOption)
+          this.isStatisticsCategoryNoData = false
+        }
       }).catch(error => {
 
       })
@@ -307,20 +331,57 @@ export default {
             offenderIp: '192.168.12.21',
             count: 99999
           }, {
-            offenderIp: '192.168.22.21',
+            offenderIp: '193.168.22.21',
             count: 88888
           }, {
-            offenderIp: '192.168.32.21',
+            offenderIp: '194.168.32.21',
             count: 77777
           }, {
-            offenderIp: '192.168.42.21',
+            offenderIp: '195.168.42.21',
             count: 66666
+          }, {
+            offenderIp: '196.168.52.21',
+            count: 55555
+          },
+          {
+            offenderIp: '192.168.12.21',
+            count: 44444
+          }, {
+            offenderIp: '192.168.22.21',
+            count: 98888
+          }, {
+            offenderIp: '192.168.32.21',
+            count: 97777
+          }, {
+            offenderIp: '192.168.42.21',
+            count: 96666
           }, {
             offenderIp: '192.168.52.21',
             count: 55555
+          },
+          {
+            offenderIp: '193.168.12.21',
+            count: 91999
+          }, {
+            offenderIp: '193.168.22.21',
+            count: 88688
+          }, {
+            offenderIp: '193.168.32.21',
+            count: 77747
+          }, {
+            offenderIp: '193.168.42.21',
+            count: 66666
+          }, {
+            offenderIp: '193.168.52.21',
+            count: 55355
           }
         ]*/
-        this.filterData[this.pageType][4].data = data.map(r => ({ label: r.offenderIp, value: r.offenderIp, count: r.count }))
+        if (!this.$_.isEmpty(data)) {
+          this.filterData[this.pageType][4].data = data.map(r => ({
+            label: r.offenderIp,
+            value: r.offenderIp,
+            count: r.count
+          }))
           const {showMore, showIndex} = this.computeFilterPage(this.filterData[this.pageType][4].data)
           this.filterData[this.pageType][4].showMore = showMore
           this.filterData[this.pageType][4].showIndex = showIndex
@@ -328,14 +389,23 @@ export default {
           const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
           const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
+          data.sort(this.sortBy('count'));
+          data = data.slice(0,5)
           offenderIpOption.series[0].data = data.map(d => {
             return [d.count, d.offenderIp]
           }).reverse()
           detectionChart.setOption(offenderIpOption)
+          this.isStatisticsActiveAttackNoData = false
+        }
       }).catch(error => {
 
       })
     },
+    sortBy(i) {
+      return function(a,b) {
+        return b[i] - a[i]
+      }
+    },
     initVictimIpData (params) {
       getData(api.detection[this.pageType].victimIp, params).then(data => {
         /*data = [

src/views/detections/options/detectionOptions.js

@@ -88,8 +88,7 @@ export const multipleBarOption = {
     },
     splitLine: {
       show: false
-    },
+    }
-    interval: 10
   },
   grid: {
     top: 40,