fix: 修复npm 堆叠折线图、dns堆叠折线图、npm events 饼图 ，选中数据为空的时间范围，tab选项切换后，切换为有数据的时间范围时图表渲染错误问题

src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue

@@ -242,14 +242,10 @@ export default {
                 mpackets[0].invertTab = false
                 this.lineTab = 'total'
                 this.legendSelectChange(mpackets[0], 0)
-                this.$nextTick(() => {
+                this.echartsInit(this.mpackets)
-                  this.echartsInit(this.mpackets)
-                })
               } else {
-                this.$nextTick(() => {
+                this.echartsInit(this.mpackets, show)
-                  this.echartsInit(this.mpackets, show)
+                if (!this.lineRefer) this.lineRefer = 'Average'
-                  if (!this.lineRefer) this.lineRefer = 'Average'
-                })
               }
             } else if (t.type === 'queries' && val === 'Queries/s') {
               const mpackets = _.cloneDeep(this.mpackets)
@@ -265,9 +261,7 @@ export default {
                 this.legendSelectChange(e, 0)
               })
               this.mpackets = mpackets
-              this.$nextTick(() => {
+              this.echartsInit(this.mpackets, true)
-                this.echartsInit(this.mpackets, true)
-              })
             }
           })
         } else {
@@ -292,105 +286,109 @@ export default {
         echartsData = echartsData.filter(t => t.show === true)
       }
       const _this = this
-      const dom = document.getElementById('dnsLineChart')
+      this.$nextTick(() => {
-      !this.myChart && (this.myChart = echarts.init(dom))
+        if (echartsData.length > 0) {
-      this.chartOption = stackedLineChartOption
+          const dom = document.getElementById('dnsLineChart')
-      const chartOption = this.chartOption.series[0]
+          !this.myChart && (this.myChart = echarts.init(dom))
-      this.chartOption.series = echartsData.map((t, i) => {
+          this.chartOption = stackedLineChartOption
-        return {
+          const chartOption = this.chartOption.series[0]
-          ...chartOption,
+          this.chartOption.series = echartsData.map((t, i) => {
-          name: t.name,
+            return {
-          lineStyle: {
+              ...chartOption,
-            color: chartColor3[t.positioning],
+              name: t.name,
-            width: 1
+              lineStyle: {
-          },
+                color: chartColor3[t.positioning],
-          stack: t.name !== 'network.total' ? 'network.total' : '',
+                width: 1
-          symbolSize: function (value) {
-            return _this.symbolSizeSortChange(i, value[0])
-          },
-          itemStyle: {
-            emphasis: {
-              borderColor: chartColor4[t.positioning],
-              borderWidth: 2,
-              shadowColor: chartColor4[t.positioning],
-              shadowBlur: this.sizes[t.positioning] + 2
-            }
-          },
-          areaStyle: {
-            opacity: 0.1,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: chartColor3[t.positioning]
               },
-              {
+              stack: t.name !== 'network.total' ? 'network.total' : '',
-                offset: 1,
+              symbolSize: function (value) {
-                color: chartColor3[t.positioning]
+                return _this.symbolSizeSortChange(i, value[0])
+              },
+              itemStyle: {
+                emphasis: {
+                  borderColor: chartColor4[t.positioning],
+                  borderWidth: 2,
+                  shadowColor: chartColor4[t.positioning],
+                  shadowBlur: this.sizes[t.positioning] + 2
+                }
+              },
+              areaStyle: {
+                opacity: 0.1,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: chartColor3[t.positioning]
+                  },
+                  {
+                    offset: 1,
+                    color: chartColor3[t.positioning]
+                  }
+                ])
+              },
+              data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
+              markLine: {
+                silent: true,
+                lineStyle: {
+                  color: '#B4B1A8'
+                },
+                symbol: 'none',
+                label: {
+                  formatter (params) {
+                    const arr = unitConvert(params.value, unitTypes.number).join('')
+                    return _this.lineRefer + '(' + arr + echartsData[0].unitType + ')'
+                  },
+                  position: 'insideStartTop',
+                  color: '#717171',
+                  fontFamily: 'NotoSansSChineseRegular'
+                }
               }
-            ])
-          },
-          data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
-          markLine: {
-            silent: true,
-            lineStyle: {
-              color: '#B4B1A8'
-            },
-            symbol: 'none',
-            label: {
-              formatter (params) {
-                const arr = unitConvert(params.value, unitTypes.number).join('')
-                return _this.lineRefer + '(' + arr + echartsData[0].unitType + ')'
-              },
-              position: 'insideStartTop',
-              color: '#717171',
-              fontFamily: 'NotoSansSChineseRegular'
-            }
-          }
-        }
-      })
-      if (!show) {
-        this.chartOption.series.forEach((t) => {
-          t.markLine.label.show = false
-          t.markLine = []
-        })
-      }
-      if (this.lineRefer === 'Average' && show) {
-        this.chartOption.series.forEach((t, i) => {
-          t.markLine.label.show = true
-          t.markLine.data = [
-            {
-              yAxis: echartsData[i].analysis.avg
-            }
-          ]
-        })
-      } else if (this.lineRefer === '95th Percentile' && show) {
-        this.chartOption.series.forEach((t, i) => {
-          t.markLine.label.show = true
-          t.markLine.data = [
-            { yAxis: echartsData[i].analysis.p95 }
-          ]
-        })
-      } else if (this.lineRefer === 'Maximum' && show) {
-        this.chartOption.series.forEach((t, i) => {
-          t.markLine.label.show = true
-          t.markLine.data = [
-            { yAxis: echartsData[i].analysis.max }
-          ]
-        })
-      }
-      this.chartOption.tooltip.formatter = (params) => {
-        params.forEach(t => {
-          t.seriesName = this.$t(t.seriesName)
-          this.mpackets.forEach(e => {
-            if (this.$t(e.name) === t.seriesName) {
-              t.borderColor = chartColor3[e.positioning]
             }
           })
-        })
+          if (!show) {
-        return stackedLineTooltipFormatter(params)
+            this.chartOption.series.forEach((t) => {
-      }
+              t.markLine.label.show = false
-      this.showMarkLine = true
+              t.markLine = []
-      this.myChart.setOption(this.chartOption)
+            })
+          }
+          if (this.lineRefer === 'Average' && show) {
+            this.chartOption.series.forEach((t, i) => {
+              t.markLine.label.show = true
+              t.markLine.data = [
+                {
+                  yAxis: echartsData[i].analysis.avg
+                }
+              ]
+            })
+          } else if (this.lineRefer === '95th Percentile' && show) {
+            this.chartOption.series.forEach((t, i) => {
+              t.markLine.label.show = true
+              t.markLine.data = [
+                { yAxis: echartsData[i].analysis.p95 }
+              ]
+            })
+          } else if (this.lineRefer === 'Maximum' && show) {
+            this.chartOption.series.forEach((t, i) => {
+              t.markLine.label.show = true
+              t.markLine.data = [
+                { yAxis: echartsData[i].analysis.max }
+              ]
+            })
+          }
+          this.chartOption.tooltip.formatter = (params) => {
+            params.forEach(t => {
+              t.seriesName = this.$t(t.seriesName)
+              this.mpackets.forEach(e => {
+                if (this.$t(e.name) === t.seriesName) {
+                  t.borderColor = chartColor3[e.positioning]
+                }
+              })
+            })
+            return stackedLineTooltipFormatter(params)
+          }
+          this.showMarkLine = true
+          this.myChart.setOption(this.chartOption)
+        }
+      })
     },
     activeChange (item, index) {
       if (this.isNoData) return

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

@@ -125,7 +125,9 @@ export default {
           })
           this.chartData = arrData.sort((a, b) => { return b.value - a.value })
           this.$nextTick(() => {
-            this.init()
+            if (this.chartData.length > 0) {
+              this.init()
+            }
           })
         } else {
           this.isNoData = false

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

@@ -3,7 +3,7 @@
     <div class="npm-tabs__active-bar"></div>
     <el-tabs v-model="currentTab" ref="elTabs" type="border-card" v-show="isCurTabReady"
              @tab-click="handleClick">
-      <el-tab-pane v-for="(tab,index) in tabs" :key="tab.i18n"  :name="index" :disabled="tab.disable" >
+      <el-tab-pane v-for="(tab,index) in tabs" :key="tab.i18n" :name="index" :disabled="tab.disable" >
         <template #label>
           <div class="npm-tab__label">
             <i :class="tab.icon"></i>

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

@@ -541,67 +541,71 @@ export default {
     },
     echartsInit (echartsData, legendUnit) {
       echartsData = echartsData.filter(t => t.show === true)
-      const dom = document.getElementById('chart')
+      this.$nextTick(() => {
-      !this.myChart && (this.myChart = echarts.init(dom))
+        if (echartsData.length > 0) {
-      this.chartOption = trafficLineChartOption
+          const dom = document.getElementById('chart')
-      const chartOption = this.chartOption.series[0]
+          !this.myChart && (this.myChart = echarts.init(dom))
-      this.chartOption.series = echartsData.map((t, i) => {
+          this.chartOption = trafficLineChartOption
-        this.chartOption.yAxis[0].axisLabel.formatter = (value) => {
+          const chartOption = this.chartOption.series[0]
-          if (t.unitType === 'percent') {
+          this.chartOption.series = echartsData.map((t, i) => {
-            return unitConvert(value, t.unitType)[0]
+            this.chartOption.yAxis[0].axisLabel.formatter = (value) => {
-          } else if (t.unitType === 'time') {
+              if (t.unitType === 'percent') {
-            return unitConvert(value, 'number').join('')
+                return unitConvert(value, t.unitType)[0]
-          } else {
+              } else if (t.unitType === 'time') {
-            return unitConvert(value, t.unitType).join('')
+                return unitConvert(value, 'number').join('')
-          }
+              } else {
-        }
+                return unitConvert(value, t.unitType).join('')
-        return {
-          ...chartOption,
-          name: this.$t(t.name) + (legendUnit || ''),
-          lineStyle: {
-            color: chartColor3[t.positioning],
-            width: 1
-          },
-          stack: t.name !== 'network.total' ? 'network.total' : '',
-          areaStyle: {
-            opacity: 0.1,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: chartColor3[t.positioning]
-              },
-              {
-                offset: 1,
-                color: chartColor3[t.positioning]
               }
-            ])
+            }
-          },
+            return {
-          data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), t.unitType])
+              ...chartOption,
+              name: this.$t(t.name) + (legendUnit || ''),
+              lineStyle: {
+                color: chartColor3[t.positioning],
+                width: 1
+              },
+              stack: t.name !== 'network.total' ? 'network.total' : '',
+              areaStyle: {
+                opacity: 0.1,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: chartColor3[t.positioning]
+                  },
+                  {
+                    offset: 1,
+                    color: chartColor3[t.positioning]
+                  }
+                ])
+              },
+              data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), t.unitType])
+            }
+          })
+          this.chartOption.tooltip.formatter = (params) => {
+            params.forEach(t => {
+              t.seriesName = this.$t(t.seriesName)
+              this.mpackets.forEach(e => {
+                if (this.$t(e.name) === t.seriesName) {
+                  t.borderColor = chartColor3[e.positioning]
+                }
+              })
+              this.npmQuantity.forEach(d => {
+                const nameMs = this.$t(d.name) + '(ms)'
+                const namePrent = this.$t(d.name) + '(%)'
+                if (nameMs === t.seriesName) {
+                  t.borderColor = chartColor3[d.positioning]
+                } else if (namePrent === t.seriesName) {
+                  t.borderColor = chartColor3[d.positioning]
+                }
+              })
+            })
+            const str = stackedLineTooltipFormatter(params)
+            return str
+          }
+          this.myChart.on('legendselectchanged', this.handleLegendClick)
+          this.myChart.setOption(this.chartOption, true)
         }
       })
-      this.chartOption.tooltip.formatter = (params) => {
-        params.forEach(t => {
-          t.seriesName = this.$t(t.seriesName)
-          this.mpackets.forEach(e => {
-            if (this.$t(e.name) === t.seriesName) {
-              t.borderColor = chartColor3[e.positioning]
-            }
-          })
-          this.npmQuantity.forEach(d => {
-            const nameMs = this.$t(d.name) + '(ms)'
-            const namePrent = this.$t(d.name) + '(%)'
-            if (nameMs === t.seriesName) {
-              t.borderColor = chartColor3[d.positioning]
-            } else if (namePrent === t.seriesName) {
-              t.borderColor = chartColor3[d.positioning]
-            }
-          })
-        })
-        const str = stackedLineTooltipFormatter(params)
-        return str
-      }
-      this.myChart.on('legendselectchanged', this.handleLegendClick)
-      this.myChart.setOption(this.chartOption, true)
     },
     // 点击前，高亮legend个数
     getSelectedNum (params) {