fix: 修复 事件类型 图表不展示问题

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

@@ -13,63 +13,68 @@
     border: 1px solid #E2E5EC;
     border-radius: 4px;
     display: flex;
-    align-items: center;
-    .npm-event-pie-legends {
+    .npm-event-pies {
+      height: 100%;
+      width: 100%;
       display: flex;
-      width: 40%;
-      justify-content: space-around;
-      .npm-event-pie-legend {
-        .npm-event-pie-legend-title {
-          font-size: 12px;
-          color: #575757;
-          line-height: 12px;
-          font-weight: 400;
-          margin-bottom: 15px;
-        }
-        .npm-event-pie-legend-type {
-          font-size: 12px;
-          color: #353636;
-          line-height: 12px;
-          font-weight: 500;
-          display: flex;
-          align-items: center;
-          margin-bottom: 11px;
-          .npm-event-pie-legend-type-icon {
-            width: 8px;
-            height: 8px;
-            margin-right: 5px;
+      align-items: center;
+      .chart-drawing {
+        height: 100%;
+        width: 50%;
+      }
+      .npm-event-pie-legends {
+        display: flex;
+        width: 40%;
+        justify-content: space-around;
+        .npm-event-pie-legend {
+          .npm-event-pie-legend-title {
+            font-size: 12px;
+            color: #575757;
+            line-height: 12px;
+            font-weight: 400;
+            margin-bottom: 15px;
           }
-          .npm-event-pie-legend-type-severity {
-            text-transform: capitalize;
+          .npm-event-pie-legend-type {
+            font-size: 12px;
+            color: #353636;
+            line-height: 12px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            margin-bottom: 11px;
+            .npm-event-pie-legend-type-icon {
+              width: 8px;
+              height: 8px;
+              margin-right: 5px;
+            }
+            .npm-event-pie-legend-type-severity {
+              text-transform: capitalize;
+            }
+            .critical {
+              background: rgb(226,97,84);
+            }
+            .high {
+              background: rgb(228,142,77);
+            }
+            .info {
+              background: rgb(136,175,101);
+            }
+            .medium {
+              background: rgb(231,179,78);
+            }
+            .low {
+              background: rgb(218,199,75);
+            }
           }
-          .critical {
-            background: rgb(226,97,84);
+          .npm-event-pie-legend-total {
+            font-size: 12px;
+            color: #353636;
+            line-height: 12px;
+            font-weight: 600;
+            margin-bottom: 11px;
           }
-          .high {
-            background: rgb(228,142,77);
-          }
-          .info {
-            background: rgb(136,175,101);
-          }
-          .medium {
-            background: rgb(231,179,78);
-          }
-          .low {
-            background: rgb(218,199,75);
-          }
-        }
-        .npm-event-pie-legend-total {
-          font-size: 12px;
-          color: #353636;
-          line-height: 12px;
-          font-weight: 600;
-          margin-bottom: 11px;
         }
       }
     }
-    .chart-drawing {
-      height: 100%;
-      width: 50%;
-    }
   }
 }

src/views/charts2/charts/npm/NpmEventsByType.vue

@@ -2,22 +2,25 @@
   <div class="npm-event">
     <div class="npm-event-title">{{$t('network.eventByType')}}</div>
     <div class="npm-event-pie">
-      <div class="chart-drawing" id="chart"></div>
-      <div class="npm-event-pie-legends">
-        <div class="npm-event-pie-legend">
-          <div class="npm-event-pie-legend-title">{{ $t('overall.type') }}</div>
-          <template v-for="(legend, index) in chartData" :key="index">
-            <div class="npm-event-pie-legend-type">
-              <div class="npm-event-pie-legend-type-icon" :class="legend.eventSeverity"></div>
-              <div class="npm-event-pie-legend-type-severity">{{legend.eventSeverity}}</div>
-            </div>
-          </template>
-        </div>
-        <div class="npm-event-pie-legend">
-          <div class="npm-event-pie-legend-title">{{ $t('network.total') }}</div>
-          <template v-for="(legend, index) in chartData" :key="index">
-            <div class="npm-event-pie-legend-total">{{legend.count}}</div>
-          </template>
+      <chart-no-data v-if="isNoData"></chart-no-data>
+      <div class="npm-event-pies" v-else>
+        <div class="chart-drawing" id="chart"></div>
+        <div class="npm-event-pie-legends">
+          <div class="npm-event-pie-legend">
+            <div class="npm-event-pie-legend-title">{{ $t('overall.type') }}</div>
+            <template v-for="(legend, index) in chartData" :key="index">
+              <div class="npm-event-pie-legend-type">
+                <div class="npm-event-pie-legend-type-icon" :class="legend.eventSeverity"></div>
+                <div class="npm-event-pie-legend-type-severity">{{legend.eventSeverity}}</div>
+              </div>
+            </template>
+          </div>
+          <div class="npm-event-pie-legend">
+            <div class="npm-event-pie-legend-title">{{ $t('network.total') }}</div>
+            <template v-for="(legend, index) in chartData" :key="index">
+              <div class="npm-event-pie-legend-total">{{legend.count}}</div>
+            </template>
+          </div>
         </div>
       </div>
     </div>
@@ -31,6 +34,7 @@ import { api } from '@/utils/api'
 import * as echarts from 'echarts'
 import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
 import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 
 export default {
   name: 'NpmEventsByType',
@@ -39,6 +43,9 @@ export default {
     timeFilter: Object,
     type: String
   },
+  components: {
+    ChartNoData
+  },
   setup () {
     return {
       myChart: shallowRef(null)
@@ -47,7 +54,8 @@ export default {
   data () {
     return {
       chartData: [],
-      timer: null
+      timer: null,
+      isNoData: false
     }
   },
   methods: {
@@ -89,6 +97,9 @@ export default {
       }
       get(api.npm.events.list, params).then(res => {
         if (res.code === 200) {
+          if (res.data.result.length <= 0) {
+            this.isNoData = true
+          }
           res.data.result.forEach(t => {
             if (t.eventSeverity === 'critical') {
               t.index = 0
@@ -109,6 +120,9 @@ export default {
               value: t.count
             }
           })
+          this.init()
+        } else {
+          this.isNoData = true
         }
       })
     },
@@ -118,9 +132,8 @@ export default {
   },
   mounted () {
     this.timer = setTimeout(() => {
-      this.init()
+      this.eventsVyTypeData()
     }, 100)
-    this.eventsVyTypeData()
     window.addEventListener('resize', this.resize)
   },
   beforeUnmount () {

src/views/charts2/charts/npm/NpmLine.vue

@@ -1,12 +1,37 @@
 <template>
   <div class="npm-line">
-    <div class="npm-line-header" v-if="chartData.params && chartData.params.showLegend">
-      <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
-        <div class="npm-line-header-icon" :class="'icon' + index"></div>
-        <div class="npm-line-header-value">{{$t(item.legend)}}</div>
+    <template v-if="chartData.id === 11">
+      <div class="npm-line-header">
+        <div class="npm-line-header-title">{{chartData.name}}</div>
+        <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend">
+          <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
+            <div class="npm-line-header-icon" :class="'icon' + index"></div>
+            <div class="npm-line-header-value">{{$t(item.legend)}}</div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    </template>
+    <template v-if="chartData.id === 12">
+      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    </template>
+    <template v-if="chartData.id === 13">
+      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    </template>
+    <template v-if="chartData.id === 14">
+      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    </template>
+    <template v-if="chartData.id === 15">
+      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    </template>
+    <template v-if="chartData.id === 16">
+      <div class="npm-line-title">{{chartData.name}}</div>
+      <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+    </template>
   </div>
 </template>
 
@@ -16,11 +41,18 @@ import { npmLineChartOption } from '@/views/charts2/charts/options/echartOption.
 import { shallowRef } from 'vue'
 import _ from 'lodash'
 import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
 
 export default {
   name: 'NpmLine',
   props: {
-    chart: Object
+    chart: Object,
+    timeFilter: Object,
+    // side: String,
+    // country: String,
+    // province: String
   },
   setup () {
     return {
@@ -36,32 +68,49 @@ export default {
         { legend: 'network.outbound', index: 2, invertTab: true }
       ],
       timer: null,
-      myChartArray: []
+      myChartArray: [],
+      side: 'server',
+      country: '北京',
+      province: '北京'
     }
   },
   methods: {
     init () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        side: this.side,
+        country: this.country,
+        province: this.province
+      }
+      console.log(this.chartData)
+      if (this.chartData.id === 11) {
+        get(api.npm.location.thoughput, params).then(res => {
+          if (res.code === 200) {
+            console.log(res)
+          }
+        })
+      }
+      this.echartsInit()
+    },
+    echartsInit () {
       const dom = document.getElementById(`chart${this.chartData.name}`)
       this.myChart = echarts.init(dom)
       this.chartOption = npmLineChartOption
       const seriesTemplate = this.chartOption.series[0]
-      this.chartOption.title.text = this.chartData.i18n ? this.chartData.i18n : this.chartData.name
       this.chartOption.color = this.chartData.params.color
       let result = [
         {
-          values: [[1435781430781, '1'], [1435781431781, '2']],
-          legend: 'network.total',
-          color: '#749F4D'
+          type: 'inboundBytesRate',
+          values: [[1435781430781, '3'], [1435781431781, '4']]
         },
         {
-          values: [[1435781430781, '1'], [1435781431781, '2']],
-          legend: 'network.inbound',
-          color: '#98709B'
+          type: 'totalBytesRate',
+          values: [[1435781430781, '5'], [1435781431781, '6']]
         },
         {
-          values: [[1435781430781, '1'], [1435781431781, '2']],
-          legend: 'network.outbound',
-          color: '#E5A219'
+          type: 'outboundBytesRate',
+          values: [[1435781430781, '2'], [1435781431781, '9']]
         }
       ]
       result = result.filter(item => this.chartData.params.color.indexOf(item.color) > -1)

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

@@ -256,16 +256,6 @@ export const appListChartOption = {
 }
 
 export const npmLineChartOption = {
-  title: {
-    text: '',
-    top: 14.5,
-    left: 20,
-    textStyle: {
-      fontSize: 14,
-      color: '#353636',
-      fontWeight: 500
-    }
-  },
   tooltip: {
     trigger: 'axis',
     className: 'echarts-tooltip echarts-tooltip-dark'