fix: 修复部分 echart 图表bug，样式调整

src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss

@@ -1,14 +1,26 @@
 .ddos-detection {
-  display: flex;
   height: 100%;
-  padding: 0 20px;
   border: 1px solid #E2E5EC;
   border-radius: 4px;
+  .ddos-detection-title {
+    margin-top: 15px;
+    i {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      color: #38ACD2;
+      margin:0 8px 0 10px;
+    }
+  }
+  .ddos-detection-value {
+    height: calc(100% - 36px);
+    padding: 0 20px;
+    display: flex;
     flex-direction: column;
-  justify-content: space-evenly;
     .ddos-detection-type {
       display: flex;
       justify-content: space-between;
+      margin: 20px 0;
       .ddos-detection-type-value {
         display: flex;
         flex-direction: column;
@@ -28,6 +40,7 @@
       }
     }
     .el-button {
+      margin-right: 20px;
       width: 117px;
       min-height: 28px;
       background: #FBFBFB;
@@ -49,3 +62,4 @@
       }
     }
   }
+}

src/assets/css/components/views/charts2/networkOverviewLine.scss

@@ -5,6 +5,8 @@
   border: 1px solid #E2E5EC;
   border-radius: 4px;
   .chart-drawing {
+    height: 100%;
+    width: 100%;
     div:nth-of-type(2) {
       .cn-chart-tooltip {
         display: flex;
@@ -21,13 +23,9 @@
       }
     }
   }
-  #chart {
-    width: 1288px;
-    height: 340px;
-  }
   .line-select {
     line-height: 24px;
-    top: 10px;
+    top: 20px;
     right: 20px;
     display: flex;
     position: absolute;
@@ -89,16 +87,16 @@
   }
   .line-value {
     position: absolute;
-    top: 30px;
+    top: 20px;
     left: 27px;
-    height: 34px;
-    line-height: 34px;
     display: flex;
     .line-value-mpackets {
       margin-right: 30px;
+      display: flex;
+      flex-direction: column;
       span:nth-of-type(1) {
         font-family: 'Helvetica-Bold';
-        font-size: 20px;
+        font-size: 28px;
         color: #353636;
         margin-right: 4px;
       }
@@ -107,6 +105,43 @@
         color: #575757;
         font-weight: 400;
       }
+      .table-below-box--inactivated.line-value-mpackets-name {
+        color: #ccc;
+        div:nth-of-type(1) {
+          background-color: #ccc !important;
+        }
+      }
+      .line-value-mpackets-name {
+        position: relative;
+        display: flex;
+        .mpackets-name {
+          flex: 1;
+          padding-left: 17px;
+        }
+        .total,.inbound,.outbound,.internal,.other {
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+          position: absolute;
+          top: 50%;
+          margin-top: -7px;
+        }
+        .total {
+          background: #00A7AB;
+        }
+        .inbound {
+          background: #7FA054;
+        }
+        .outbound {
+          background: #35ADDA;
+        }
+        .internal {
+          background: #E48F3E;
+        }
+        .other {
+          background: #98709B;
+        }
+      }
     }
   }
 }

src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss

@@ -2,11 +2,25 @@
   height: 100%;
   border: 1px solid #E2E5EC;
   border-radius: 4px;
-  .performance-event-pie {
+  .performance-event-title {
+    margin-top: 15px;
+    i {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      color: #38ACD2;
+      margin:0 8px 0 10px;
+    }
+  }
+  .performance-event-value {
+    width: 100%;
+    height: calc(100% - 36px);
+    .performance-event-pie {
+      height: calc(100% - 47px);
+      width: 100%;
+      .chart-drawing {
+        height: 50%;
         width: 100%;
-    div {
-      height: 165px;
-      width: 324px;
       }
       .performance-event-pie-hr {
         height: 1px;
@@ -41,3 +55,5 @@
       }
     }
   }
+
+}

src/views/charts/charts/chart-table-title.js

@@ -78,6 +78,10 @@ export const legendMapping = {
   clientIpCount: i18n.global.t('entity.ip.clientIpCount'),
   serverIpCount: i18n.global.t('entity.ip.serverIpCount'),
   appCount: i18n.global.t('entity.ip.appCount'),
-  domainCount: i18n.global.t('entity.ip.domainCount')
+  domainCount: i18n.global.t('entity.ip.domainCount'),
-
+  network_total: i18n.global.t('network.total'),
+  network_inbound: i18n.global.t('network.inbound'),
+  network_outbound: i18n.global.t('network.outbound'),
+  network_internal: i18n.global.t('network.internal'),
+  network_other: i18n.global.t('network.other')
 }

src/views/charts2/Chart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cn-chart" style="height: 100%;">
+  <div class="cn-chart" style="height: 100%; width: 100%;">
     <loading :loading="loading"></loading>
     <chart-no-data v-if="isNoData"></chart-no-data>
     <network-overview-line

src/views/charts2/charts/NetworkOverviewDdosDetection.vue

@@ -1,5 +1,7 @@
 <template>
  <div class="ddos-detection">
+   <div class="ddos-detection-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div>
+   <div class="ddos-detection-value">
      <div class="ddos-detection-type">
        <div class="ddos-detection-type-value">
          <div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
@@ -16,6 +18,7 @@
      </div>
      <el-button size="small">{{$t('network.ddosDetection')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
    </div>
+ </div>
 </template>
 
 <script>
@@ -23,7 +26,3 @@ export default {
   name: 'NetworkOverviewDdosDetection'
 }
 </script>
-
-<style scoped>
-
-</style>

src/views/charts2/charts/NetworkOverviewLine.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="line">
     <div class="chart-drawing" id="chart"></div>
+    <div class="line-value">
+      <div class="line-value-mpackets" v-for="(item, index) in mpackets" :key="item">
+        <div class="line-value-mpackets-name" :class="{'table-below-box--inactivated': !item.active}" @click="legendSelectChange(index)">
+          <div :class="item.class"></div>
+          <div class="mpackets-name">{{$t(item.name)}}</div>
+        </div>
+        <div><span>{{unitConvert(item.number, unitTypes.number)[0]}}</span>{{unitConvert(item.number, unitTypes.number)[1]}}<span>packets/s</span></div>
+      </div>
+    </div>
     <div class="line-select">
       <div class="line-select-metric">
         <span>{{$t('network.metric')}}:</span>
@@ -31,17 +40,12 @@
         </div>
       </div>
     </div>
-    <div class="line-value">
-      <div class="line-value-mpackets" v-for="item in mpackets" :key="item">
-        <span>{{unitConvert(item, unitTypes.number)[0]}}</span>{{unitConvert(item, unitTypes.number)[1]}}<span>packets/s</span>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
-import { stackedLineChartOption } from '@/views/charts2/charts/options/pie'
+import { stackedLineChartOption } from '@/views/charts2/charts/options/echartOption'
 import unitConvert from '@/utils/unit-convert'
 import { unitTypes } from '@/utils/constants.js'
 import { shallowRef } from 'vue'
@@ -88,10 +92,17 @@ export default {
         }
       ],
       value2: '',
-      mpackets: [4212211, 111, 112, 111, 1211],
+      mpackets: [
+        { number: 4212211, name: 'network.total', class: 'total', active: true },
+        { number: 111, name: 'network.inbound', class: 'inbound', active: true },
+        { number: 112, name: 'network.outbound' , class: 'outbound', active: true },
+        { number: 111, name: 'network.internal', class: 'internal', active: true },
+        { number: 1211, name: 'network.other', class: 'other', active: true }
+      ],
       unitConvert,
       unitTypes,
-      chartDateObject: []
+      chartDateObject: [],
+      timer: null
     }
   },
   methods: {
@@ -104,139 +115,139 @@ export default {
           dateArr: [
             {
               stat_time: 1652544000000,
-              rate: 10000000
+              rate: 11000000
             },
             {
               stat_time: 1652544300000,
-              rate: 20000000
+              rate: 97705191
             },
             {
               stat_time: 1652544600000,
-              rate: 30000000
+              rate: 54907153
             },
             {
               stat_time: 1652544900000,
-              rate: 53932331
+              rate: 23932331
             },
             {
               stat_time: 1652545200000,
-              rate: 40000000
+              rate: 70820084
             },
             {
               stat_time: 1652545500000,
-              rate: 11111111
+              rate: 48744453
             },
             {
               stat_time: 1652545800000,
-              rate: 11111111
+              rate: 46345590
             },
             {
               stat_time: 1652546100000,
-              rate: 11111111
+              rate: 55092019
             },
             {
               stat_time: 1652546400000,
-              rate: 11111111
+              rate: 43861024
             },
             {
               stat_time: 1652546700000,
-              rate: 8000000
+              rate: 42635307
             },
             {
               stat_time: 1652547000000,
-              rate: 11111111
+              rate: 39513137
             },
             {
               stat_time: 1652547300000,
-              rate: 11111111
+              rate: 37251858
             },
             {
               stat_time: 1652547600000,
-              rate: 11111111
+              rate: 35641395
             },
             {
               stat_time: 1652547900000,
-              rate: 11111111
+              rate: 42593269
             },
             {
               stat_time: 1652548200000,
-              rate: 9000000
+              rate: 29854584
             },
             {
               stat_time: 1652548500000,
-              rate: 11111111
+              rate: 26270305
             },
             {
               stat_time: 1652548800000,
-              rate: 11111111
+              rate: 24115244
             },
             {
               stat_time: 1652549100000,
-              rate: 11111111
+              rate: 22159263
             },
             {
               stat_time: 1652549400000,
-              rate: 11111111
+              rate: 20260208
             },
             {
               stat_time: 1652549700000,
-              rate: 11111111
+              rate: 19824773
             },
             {
               stat_time: 1652550000000,
-              rate: 11111111
+              rate: 19364713
             },
             {
               stat_time: 1652550300000,
-              rate: 11111111
+              rate: 18511395
             },
             {
               stat_time: 1652550600000,
-              rate: 11111111
+              rate: 16811691
             },
             {
               stat_time: 1652550900000,
-              rate: 11111111
+              rate: 14849281
             },
             {
               stat_time: 1652551200000,
-              rate: 11111111
+              rate: 14545834
             },
             {
               stat_time: 1652551500000,
-              rate: 11111111
+              rate: 12822215
             },
             {
               stat_time: 1652551800000,
-              rate: 11111111
+              rate: 12061919
             },
             {
               stat_time: 1652552100000,
-              rate: 11111111
+              rate: 11483505
             },
             {
               stat_time: 1652552400000,
-              rate: 11111111
+              rate: 8830222
             },
             {
               stat_time: 1652552700000,
-              rate: 11111111
+              rate: 8316519
             },
             {
               stat_time: 1652553000000,
-              rate: 11111111
+              rate: 8039651
             },
             {
               stat_time: 1652553300000,
-              rate: 11111111
+              rate: 7780729
             },
             {
               stat_time: 1652553600000,
-              rate: 11111111
+              rate: 6873645
             },
             {
               stat_time: 1652553900000,
-              rate: 11111111
+              rate: 6960513
             },
             {
               stat_time: 1652554200000,
@@ -244,7 +255,7 @@ export default {
             },
             {
               stat_time: 1652554500000,
-              rate: 11111111
+              rate: 6319387
             },
             {
               stat_time: 1652554800000,
@@ -452,7 +463,7 @@ export default {
             },
             {
               stat_time: 1652570100000,
-              rate: 11730266
+              rate: 41730266
             },
             {
               stat_time: 1652570400000,
@@ -472,11 +483,11 @@ export default {
             },
             {
               stat_time: 1652571600000,
-              rate: 33441235
+              rate: 23441235
             },
             {
               stat_time: 1652571900000,
-              rate: 33409372
+              rate: 23409372
             },
             {
               stat_time: 1652572200000,
@@ -5881,64 +5892,77 @@ export default {
           ]
         }
       ]
-      if (this.chartDateObject.length > 1) { // 有多条曲线
+      this.chartOption.series = this.chartOption.series.map((t, i) => {
-        this.myChart.on('legendselectchanged', this.handleLegendClick)
+        return {
+          ...t,
+          name: this.mpackets[i].name,
+          data: this.chartDateObject[i].dateArr.map(t => [t.stat_time, t.rate])
         }
-      this.chartOption.series.forEach((t, i) => {
-        t.data = this.chartDateObject[i].dateArr.map(t => [t.stat_time, t.rate])
       })
       this.chartOption.tooltip.formatter = (params) => {
+        params.forEach(t => {
+          t.seriesName = this.$t(t.seriesName)
+        })
         const str = stackedLineTooltipFormatter(params)
         return str
       }
       this.myChart.setOption(this.chartOption)
+      this.myChart.resize()
     },
-    // 点击前，高亮legend个数
-    getSelectedNum (params) {
-      let selectedNum = 0
-      const legendItem = params.selected
-      for (const name in legendItem) {
-        if (name === params.name) {
-          if (!legendItem[name]) {
-            selectedNum = selectedNum + 1
-          }
-        } else {
-          if (legendItem[name]) {
-            selectedNum = selectedNum + 1
-          }
-        }
-      }
-      return selectedNum
-    },
-    // 自定义legend的点击事件:此方法只处理多条曲线的情况（单条曲线正常切换legend和曲线）
-    handleLegendClick (params) {
-      // legend点击事件
-      const legendNum = Object.keys(params.selected).length
-      const selectedNum = this.getSelectedNum(params)
 
-      const legendItem = params.selected
+    dispatchLegendSelectAction (name) {
-      if (selectedNum === legendNum) { // 点击前：全部曲线高亮
+      this.myChart.dispatchAction({
-        for (const name in legendItem) {
+        type: 'legendSelect',
-          if (name === params.name) {
+        name: name
-            legendItem[name] = true
+      })
+    },
+    dispatchLegendUnSelectAction (name) {
+      this.myChart.dispatchAction({
+        type: 'legendUnSelect',
+        name: name
+      })
+    },
+    legendSelectChange (index) {
+      const legendNum = this.mpackets.length
+      if (legendNum > 1) {
+        const selectedNum = this.mpackets.filter(item => {
+          return item.active === true
+        }).length // 点击前，高亮legend个数
+        if (selectedNum === legendNum) { // 全部曲线高亮时
+          this.mpackets.forEach((item, indexTmp) => {
+            if (indexTmp === index) {
+              item.active = true
+              this.dispatchLegendSelectAction(item.name)
             } else {
-            legendItem[name] = false
+              item.active = false
+              this.dispatchLegendUnSelectAction(item.name)
             }
-        }
+          })
-      } else if (selectedNum === 1 && !params.selected[params.name]) { // 点击前：多条曲线，且只有一条曲线高亮时
+        } else if (selectedNum === 1 && this.mpackets[index].active) { // 多条曲线，且只有一条曲线高亮, 且点击的曲线为高亮曲线时
-        for (const name in legendItem) {
+          this.mpackets.forEach((item) => {
-          legendItem[name] = true
+            item.active = true
-        }
+            this.dispatchLegendSelectAction(item.name)
-      }
+          })
-      this.myChart.setOption({
+        } else {
-        legend: {
+          this.mpackets[index].active = !this.mpackets[index].active
-          selected: legendItem
+          this.mpackets.forEach((item, i) => {
+            if (item.active) {
+              this.dispatchLegendSelectAction(item.name)
+            } else {
+              this.dispatchLegendUnSelectAction(item.name)
             }
           })
         }
+      }
+    }
   },
   mounted () {
+    this.timer = setTimeout(() => {
       this.init()
+    }, 100)
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
   }
 }
 </script>

src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="performance-event">
+    <div class="performance-event-title"><i class="cn-icon cn-icon-a-NetworkPerformanceEvent"></i>{{$t('network.networkPerEvent')}}</div>
+    <div class="performance-event-value">
       <div class="performance-event-pie">
         <div class="chart-drawing" id="chart1"></div>
         <div class="performance-event-pie-hr"></div>
@@ -7,10 +9,11 @@
       </div>
       <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
     </div>
+  </div>
 </template>
 
 <script>
-import { pieChartOption1, pieChartOption2 } from '@/views/charts2/charts/options/pie.js'
+import { pieChartOption1, pieChartOption2 } from '@/views/charts2/charts/options/echartOption.js'
 import * as echarts from 'echarts'
 import { shallowRef } from 'vue'
 export default {
@@ -38,7 +41,8 @@ export default {
         { value: 580, name: '333', describe: 'name3' },
         { value: 484, name: '444', describe: 'name4' },
         { value: 300, name: '555', describe: 'name5' }
-      ]
+      ],
+      timer: null
     }
   },
   methods: {
@@ -60,7 +64,12 @@ export default {
     }
   },
   mounted () {
+    this.timer = setTimeout(() => {
       this.init()
+    }, 100)
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
   }
 }
 </script>

src/views/charts2/charts/options/echartOption.js

@@ -108,18 +108,14 @@ export const pieChartOption2 = {
     }
   ]
 }
+const sizes = [3, 6, 8, 9, 10]
 export const stackedLineChartOption = {
   color: chartColor3,
   tooltip: {
     trigger: 'axis'
   },
   legend: {
-    type: 'scroll',
+    show: false
-    top: 10,
-    left: 20,
-    itemGap: 60,
-    itemWidth: 11,
-    itemHeight: 14
   },
   grid: {
     top: '30%',
@@ -154,10 +150,8 @@ export const stackedLineChartOption = {
   ],
   series: [
     {
-      name: 'Total',
       type: 'line',
       symbol: 'circle',
-      hoverAnimation: false,
       smooth: true,
       symbolSize: function (value, params) {
         return symbolSizeSortChange(0, value[0])
@@ -170,6 +164,14 @@ export const stackedLineChartOption = {
         color: chartColor3[0],
         width: 1
       },
+      itemStyle: {
+        emphasis: {
+          borderColor: chartColor4[0],
+          borderWidth: 2,
+          shadowColor: chartColor4[0],
+          shadowBlur: sizes[0] + 2
+        }
+      },
       areaStyle: {
         opacity: 0.1,
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -186,7 +188,6 @@ export const stackedLineChartOption = {
       data: []
     },
     {
-      name: 'Inbound',
       type: 'line',
       symbol: 'circle',
       smooth: true,
@@ -201,6 +202,14 @@ export const stackedLineChartOption = {
         color: chartColor3[1],
         width: 1
       },
+      itemStyle: {
+        emphasis: {
+          borderColor: chartColor4[1],
+          borderWidth: 2,
+          shadowColor: chartColor4[1],
+          shadowBlur: sizes[1] + 2
+        }
+      },
       areaStyle: {
         opacity: 0.1,
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -217,7 +226,6 @@ export const stackedLineChartOption = {
       data: []
     },
     {
-      name: 'Outbound',
       type: 'line',
       symbol: 'circle',
       smooth: true,
@@ -232,6 +240,14 @@ export const stackedLineChartOption = {
         color: chartColor3[2],
         width: 1
       },
+      itemStyle: {
+        emphasis: {
+          borderColor: chartColor4[2],
+          borderWidth: 2,
+          shadowColor: chartColor4[2],
+          shadowBlur: sizes[2] + 2
+        }
+      },
       areaStyle: {
         opacity: 0.1,
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -248,7 +264,6 @@ export const stackedLineChartOption = {
       data: []
     },
     {
-      name: 'Internal',
       type: 'line',
       symbol: 'circle',
       smooth: true,
@@ -263,6 +278,14 @@ export const stackedLineChartOption = {
         color: chartColor3[3],
         width: 1
       },
+      itemStyle: {
+        emphasis: {
+          borderColor: chartColor4[3],
+          borderWidth: 2,
+          shadowColor: chartColor4[3],
+          shadowBlur: sizes[3] + 2
+        }
+      },
       areaStyle: {
         opacity: 0.1,
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -279,7 +302,6 @@ export const stackedLineChartOption = {
       data: []
     },
     {
-      name: 'Other',
       type: 'line',
       symbol: 'circle',
       smooth: true,
@@ -294,6 +316,14 @@ export const stackedLineChartOption = {
         color: chartColor3[4],
         width: 1
       },
+      itemStyle: {
+        emphasis: {
+          borderColor: chartColor4[4],
+          borderWidth: 2,
+          shadowColor: chartColor4[4],
+          shadowBlur: sizes[4] + 2
+        }
+      },
       areaStyle: {
         opacity: 0.1,
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -311,7 +341,6 @@ export const stackedLineChartOption = {
     }
   ]
 }
-const sizes = [3, 6, 8, 9, 10]
 function symbolSizeSortChange (index, time) {
   const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
   const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)
@@ -326,13 +355,5 @@ function symbolSizeSortChange (index, time) {
   const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, otherData]
   dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
   const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
-  // stackedLineChartOption.series[sortIndex].itemStyle = {
-  //   emphasis: {
-  //     borderColor: chartColor4[sortIndex],
-  //     borderWidth: 2,
-  //     shadowColor: chartColor4[sortIndex],
-  //     shadowBlur: sizes[sortIndex] + 2
-  //   }
-  // }
   return sizes[sortIndex]
 }