CN-368 Detection--服务质量事件 活跃实体图表错乱

src/utils/tools.js

@@ -461,12 +461,71 @@ export function humpToLine (name) {
   }
   return name.replace(/([A-Z])/g, '_$1').toLowerCase()
 }
-//排序功能
-export function sortBy (i) {
+//排序功能:从大到小，降序排列
+export function reverseSortBy (i) {
   return function (a, b) {
     return b[i] - a[i]
   }
 }
+
+//排序功能:从小到大，升序排列
+export function sortBy (i) {
+  return function (a, b) {
+    return a[i] - b[i]
+  }
+}
+
+//echart图标，y轴鼠标悬浮时，显示标签所有内容
+export  function extensionEchartY(chart){
+  //判断是否创建过div框,如果创建过就不再创建了
+  //该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
+  let id = document.getElementById("extension")
+  if(!id) {
+    let div = "<div id = 'extension' style=\"display:block\"></div>"
+    let contentDiv = document.createElement("div")
+    contentDiv.setAttribute('id','extension')
+    contentDiv.setAttribute('style','display:block')
+    document.documentElement.append(contentDiv)
+  }
+  chart.on('mouseover', function(params) {
+    //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
+    if(params.componentType === "yAxis") {
+      //设置悬浮文本的位置以及样式
+      let extEle = document.getElementById("extension")
+      extEle.style.cssText = "display:inline;position:absolute;" +
+          "    padding: 12px;" +
+          "    max-width: 400px !important;" +
+          "    color: #666;" +
+          "    background-color: rgb(255, 255, 255);" +
+          "    font-size: 14px;" +
+          "    line-height: 20px;" +
+          "    font-weight:400; " +
+          "    font-family: \"Microsoft YaHei\"" +
+          "    border-style: solid;" +
+          "    border-width: 1px;" +
+          "    border-radius: 4px;" +
+          "    border-color: transparent !important;" +
+          "    box-shadow: rgb(0 0 0 / 30%) 0px 0px 3px;" +
+          "    white-space: nowrap;" +
+          "    z-index: 99999999;"
+
+      extEle.innerHTML = params.value;
+      document.documentElement.onmousemove = function(event) {
+        let extEle = document.getElementById("extension")
+        let xx = event.pageX - extEle.offsetWidth - 20
+        let yy = event.pageY + 20
+        extEle.style.cssText = extEle.style.cssText+"top:"+yy+"px;left:"+xx+"px;"
+      }
+    }
+  })
+  chart.on('mouseout', function(params) {
+    //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
+    if(params.componentType == "yAxis") {
+      let extEle = document.getElementById("extension")
+      extEle.style.cssText = "display:none;"
+    }
+  })
+}
 // 搜索功能：对象转字符串
 export function objToStr (obj) {
   return Object.keys(obj).map(k => {

src/views/charts/charts/ChartEchart.vue

@@ -5,7 +5,7 @@
 <script>
 import unitConvert from '@/utils/unit-convert'
 import * as echarts from 'echarts'
-import { lineToSpace, sortBy, humpToSpace } from '@/utils/tools'
+import { lineToSpace, reverseSortBy, humpToSpace } from '@/utils/tools'
 import { unitTypes } from '@/utils/constants'
 import chartEchartMixin from './chart-echart-mixin'
 import { isEchartsPie } from './tools'
@@ -68,7 +68,7 @@ export default {
           }
           let chartDataTmp = []
           let otherData = []
-          this.chartData.sort(sortBy('num'))
+          this.chartData.sort(reverseSortBy('num'))
 
           if(this.chartData.length>5){
             chartDataTmp = this.chartData.slice(0, 5)

src/views/detections/Index.vue

@@ -67,7 +67,7 @@
                 <div class="no-data chart-content" >No data</div>
               </template>
               <template v-if="!isStatisticsActiveAttackNoData">
-                <div class="chart-content" :id="`detectionActiveAttacker${pageType}`">
+                <div class="chart-content" style="padding-left: 5px;" :id="`detectionActiveAttacker${pageType}`">
                 </div>
               </template>
             </div>
@@ -112,6 +112,7 @@ import { ref } from 'vue'
 import * as echarts from 'echarts'
 import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions'
 import { api, getData } from '@/utils/api'
+import { reverseSortBy ,sortBy ,extensionEchartY} from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import DetectionNoData from '@/views/detections/DetectionNoData'
 
@@ -538,7 +539,7 @@ 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.sort(reverseSortBy('count'))
           data = data.slice(0, 5)
           offenderIpOption.series[0].data = data.map(d => {
             return [d.count, d.offenderIp]
@@ -550,11 +551,7 @@ export default {
 
       })
     },
-    sortBy (i) {
-      return function (a, b) {
-        return b[i] - a[i]
-      }
-    },
+
     initVictimIpData (params) {
       getData(api.detection[this.pageType].victimIp, params).then(data => {
         /* data = [
@@ -704,14 +701,19 @@ export default {
           const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
           const option = this.$_.cloneDeep(activeAttackBar)
+
+          data.sort(reverseSortBy('count'))
+          data = data.slice(0, 5)
           option.series[0].data = data.map(d => {
             return [d.count, d.name]
           }).reverse()
           detectionChart.setOption(option)
+          extensionEchartY(detectionChart)//y轴标签过长时，鼠标悬浮，显示所有内容
         }
       }).catch(error => {
       })
     },
+
     computeFilterPage (data) {
       return {
         showMore: data.length > 10,

src/views/detections/options/detectionOptions.js

@@ -229,7 +229,7 @@ export const activeAttackBar = {
     },
     show: true,
     className: 'nz-chart-tooltip',
-    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 400px !important'
   },
   xAxis: {
     axisTick: { show: false },
@@ -252,11 +252,15 @@ export const activeAttackBar = {
     axisTick: { show: false },
     axisLine: { show: false },
     axisLabel: {
-      show: true
+      show: true,
+      width:95,
+      overflow:'truncate',
+
     },
     splitLine: {
       show: false
-    }
+    },
+    triggerEvent: true,
   },
   series: [{
     barWidth: 5,