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

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

@@ -13,7 +13,15 @@
     border: 1px solid #E2E5EC;
     border-radius: 4px;
     display: flex;
+    .npm-event-pies {
+      height: 100%;
+      width: 100%;
+      display: flex;
       align-items: center;
+      .chart-drawing {
+        height: 100%;
+        width: 50%;
+      }
       .npm-event-pie-legends {
         display: flex;
         width: 40%;
@@ -67,9 +75,6 @@
           }
         }
       }
-    .chart-drawing {
-      height: 100%;
-      width: 50%;
     }
   }
 }

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

@@ -2,6 +2,8 @@
   <div class="npm-event">
     <div class="npm-event-title">{{$t('network.eventByType')}}</div>
     <div class="npm-event-pie">
+      <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">
@@ -22,6 +24,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -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()
-    }, 100)
       this.eventsVyTypeData()
+    }, 100)
     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">
+    <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 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'