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

2022-07-14 17:07:07 +08:00
parent eca3878819
commit c367966e04
9 changed files with 342 additions and 220 deletions
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/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 @@
      }
    }
  }
+}
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/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;
+        }
+      }
    }
  }
 }
--- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
+++ b/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 @@
      }
    }
  }
+
+}
--- a/src/views/charts/charts/chart-table-title.js
+++ b/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')
 }
--- a/src/views/charts2/Chart.vue
+++ b/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
--- a/src/views/charts2/charts/NetworkOverviewDdosDetection.vue
+++ b/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>
--- a/src/views/charts2/charts/NetworkOverviewLine.vue
+++ b/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.myChart.on('legendselectchanged', this.handleLegendClick)
+      this.chartOption.series = this.chartOption.series.map((t, i) => {
+        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
-      if (selectedNum === legendNum) { // 点击前：全部曲线高亮
-        for (const name in legendItem) {
-          if (name === params.name) {
-            legendItem[name] = true
+    dispatchLegendSelectAction (name) {
+      this.myChart.dispatchAction({
+        type: 'legendSelect',
+        name: name
+      })
+    },
+    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]) { // 点击前：多条曲线，且只有一条曲线高亮时
-        for (const name in legendItem) {
-          legendItem[name] = true
-        }
-      }
-      this.myChart.setOption({
-        legend: {
-          selected: legendItem
+          })
+        } else if (selectedNum === 1 && this.mpackets[index].active) { // 多条曲线，且只有一条曲线高亮, 且点击的曲线为高亮曲线时
+          this.mpackets.forEach((item) => {
+            item.active = true
+            this.dispatchLegendSelectAction(item.name)
+          })
+        } else {
+          this.mpackets[index].active = !this.mpackets[index].active
+          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>
--- a/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
+++ b/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>
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/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',
-    top: 10,
-    left: 20,
-    itemGap: 60,
-    itemWidth: 11,
-    itemHeight: 14
+    show: false
  },
  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]
 }