fix： 修改多次刷新图表 堆叠事件重复添加的问题

nezha-fronted/src/components/charts/chartPreview.vue

@@ -829,6 +829,7 @@ export default {
     // chartSite用于区分是全屏显示还是局部显示
     initChart (chartInfo, dataArg, ele, legend) {
       const self = this
+      self.isStackArea = false
       let minTime = null
       let maxTime = null
       if (dataArg.length > 0 && dataArg[0].data &&
@@ -936,31 +937,30 @@ export default {
                 str += '<br/>'
               }
               showFlag = showFlag || item.data[1]
-              if (isNaN(item.data[1] + '')) {
+              if (!isNaN(item.data[1] + '')) {
-                return
+                const val = formatScientificNotation(item.data[1], 2)
+                sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
+                str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+                str += '<div style="padding-left: 10px;">'
+                str += (function () {
+                  if (chartInfo.from == 'endpoint') {
+                    return val == 1 ? 'up' : 'down'
+                  }
+                  return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
+                }())
+                str += '</div>'
+                str += '</div>'
               }
-              const val = formatScientificNotation(item.data[1], 2)
-              sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
-              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-              str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-              str += '<div style="padding-left: 10px;">'
-              str += (function () {
-                if (chartInfo.from == 'endpoint') {
-                  return val == 1 ? 'up' : 'down'
-                }
-                return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
-              }())
-              str += '</div>'
-              str += '</div>'
             })
             if (chartInfo.type === 'stackArea' || self.isStackArea) {
-              sum = parseFloat(Number(sum).toFixed(2))
+              sum = parseFloat(Number(sum).toFixed(6))
               str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
               str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
               str += self.$t('dashboard.panel.chartTotal')
               str += '</div>'
               str += '<div style="padding-left: 10px;">'
-              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 6)
               str += '</div>'
               str += '</div>'
             }
@@ -1088,6 +1088,7 @@ export default {
 
         this.$refs.loadingPreview.endLoading()
       })
+      this.echartModalStore.off('magictypechanged')
       this.echartModalStore.on('magictypechanged', function (params) {
         self.isStackArea = !self.isStackArea
         if (self.isStackArea) {

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -647,6 +647,7 @@ export default {
       this.legendMagicType = legend
       this.chartInfo = chartInfo
       const self = this
+      self.isStackArea = false
       this.chartType = '' // 图表类型
       if (chartInfo.type === 4) { // line,bar
         this.chartType = 'line'
@@ -837,49 +838,48 @@ export default {
                 minusFlag = false
               }
               showFlag = showFlag || item.data[1]
-              if (isNaN(item.data[1] + '')) {
+              if (!isNaN(item.data[1] + '')) {
-                return
+                const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
-              }
+                let paramsDot = bus.countDecimals(item.data[1])
-              const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
+                if (paramsDot < self.chartDot) {
-              let paramsDot = bus.countDecimals(item.data[1])
+                  paramsDot = self.chartDot
-              if (paramsDot < self.chartDot) {
+                } else if (paramsDot > 6) {
-                paramsDot = self.chartDot
+                  paramsDot = 6
-              } else if (paramsDot > 6) {
-                paramsDot = 6
-              }
-              const val = formatScientificNotation(item.data[1], paramsDot)
-              sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
-
-              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-              str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-              str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">'
-              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, paramsDot)
-              if (previousItem) {
-                str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right;box-sizing: border-box;padding-right: 10px">'
-                const previousval = formatScientificNotation(previousItem.data[1], paramsDot)
-                let minusVal = 0
-                if (previousval <= val) {
-                  minusVal = val - previousval
-                  str += '+'
-                } else {
-                  minusVal = previousval - val
-                  str += '-'
                 }
+                const val = formatScientificNotation(item.data[1], paramsDot)
+                sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
 
-                str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, -1, paramsDot)
+                str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                str += '</span>'
+                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-              } else if (tip.alias.indexOf('Previous ') !== -1) {
+                str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">'
-                str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
+                str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, paramsDot)
-                str += '</span>'
+                if (previousItem) {
+                  str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right;box-sizing: border-box;padding-right: 10px">'
+                  const previousval = formatScientificNotation(previousItem.data[1], paramsDot)
+                  let minusVal = 0
+                  if (previousval <= val) {
+                    minusVal = val - previousval
+                    str += '+'
+                  } else {
+                    minusVal = previousval - val
+                    str += '-'
+                  }
+
+                  str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, -1, paramsDot)
+                  str += '</span>'
+                } else if (tip.alias.indexOf('Previous ') !== -1) {
+                  str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
+                  str += '</span>'
+                }
+                str += '</div>'
+                str += '</div>'
               }
-              str += '</div>'
-              str += '</div>'
             })
             if (self.data.type === 'stackArea' || self.isStackArea) {
               if (!self.stackTotalColor || self.stackTotalColor == '') {
                 self.stackTotalColor = randomcolor()
               }
-              sum = parseFloat(Number(sum).toFixed(2))
+              sum = parseFloat(Number(sum).toFixed(6))
               str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
               str += '<div style="line-height: 18px; font-size: 12px;padding-left:0px;">'
               str += `<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${self.stackTotalColor};}'></span>`
@@ -1101,6 +1101,7 @@ export default {
           }, 800)
 
           window.addEventListener('resize', this.chartResize)
+          getChart(this.chartIndex).off('magictypechanged')
           getChart(this.chartIndex).on('magictypechanged', function (params) {
             self.isStackArea = !self.isStackArea
             if (self.isStackArea) {
@@ -1152,26 +1153,25 @@ export default {
                         str += '</div>'
                       }
                       showFlag = showFlag || item.data[1]
-                      if (isNaN(item.data[1] + '')) {
+                      if (!isNaN(item.data[1] + '')) {
-                        return
+                        const val = formatScientificNotation(item.data[1], 2)
+                        sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
+                        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+                        str += '<div style="padding-left: 10px;">'
+                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, paramsDot)
+                        str += '</div>'
+                        str += '</div>'
                       }
-                      const val = formatScientificNotation(item.data[1], 2)
-                      sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
-                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                      str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                      str += '<div style="padding-left: 10px;">'
-                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, paramsDot)
-                      str += '</div>'
-                      str += '</div>'
                     })
                     if (self.data.type === 'stackArea' || self.isStackArea) {
-                      sum = parseFloat(Number(sum).toFixed(2))
+                      sum = parseFloat(Number(sum).toFixed(6))
                       str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
                       str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
                       str += self.$t('dashboard.panel.chartTotal')
                       str += '</div>'
                       str += '<div style="padding-left: 10px;">'
-                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, self.chartDot)
                       str += '</div>'
                       str += '</div>'
                     }
@@ -1276,7 +1276,7 @@ export default {
               self.echartModalStore.off('finished')
             })
           }, 100)
-
+          this.echartModalStore.off('magictypechanged')
           this.echartModalStore.on('magictypechanged', function (params) {
             self.isStackArea = !self.isStackArea
             if (self.isStackArea) {
@@ -1337,54 +1337,53 @@ export default {
                         minusFlag = false
                       }
                       showFlag = showFlag || item.data[1]
-                      if (isNaN(item.data[1] + '')) {
+                      if (!isNaN(item.data[1] + '')) {
-                        return
+                        const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
-                      }
+                        const val = formatScientificNotation(item.data[1], 2)
-                      const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
+                        sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
-                      const val = formatScientificNotation(item.data[1], 2)
+                        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                      sum += isNaN(self.numberWithEConvent(val)) ? 0 : Number(self.numberWithEConvent(val))
+                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                        str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">'
-                      str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, self.chartDot)
-                      str += '<div style="padding-left: 10px;min-width: 75px;text-align: right">'
+                        if (previousItem) {
-                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, self.chartDot)
+                          str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right;box-sizing: border-box;padding-right: 10px">'
-                      if (previousItem) {
+                          const previousval = formatScientificNotation(previousItem.data[1], 2)
-                        str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right;box-sizing: border-box;padding-right: 10px">'
+                          let minusVal = 0
-                        const previousval = formatScientificNotation(previousItem.data[1], 2)
+                          if (previousval <= val) {
-                        let minusVal = 0
+                            minusVal = val - previousval
-                        if (previousval <= val) {
+                            str += '+'
-                          minusVal = val - previousval
+                          } else {
-                          str += '+'
+                            minusVal = previousval - val
-                        } else {
+                            str += '-'
-                          minusVal = previousval - val
+                          }
-                          str += '-'
-                        }
 
-                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, self.chartDot)
+                          str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, self.chartDot)
-                        str += '</span>'
+                          str += '</span>'
-                      } else if (tip.alias.indexOf('Previous ') !== -1) {
+                        } else if (tip.alias.indexOf('Previous ') !== -1) {
-                        str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
+                          str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right">'
-                        str += '</span>'
+                          str += '</span>'
-                      }
-                      str += '</div>'
-                      if (previousItem) {
-                        str += '<div style="padding-left: 10px;">'
-                        const previousval = formatScientificNotation(previousItem.data[1], 2)
-                        let minusVal = 0
-                        if (previousval <= val) {
-                          minusVal = val - previousval
-                          str += '+'
-                        } else {
-                          minusVal = previousval - val
-                          str += '-'
                         }
+                        str += '</div>'
+                        if (previousItem) {
+                          str += '<div style="padding-left: 10px;">'
+                          const previousval = formatScientificNotation(previousItem.data[1], 2)
+                          let minusVal = 0
+                          if (previousval <= val) {
+                            minusVal = val - previousval
+                            str += '+'
+                          } else {
+                            minusVal = previousval - val
+                            str += '-'
+                          }
 
-                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, self.chartDot)
+                          str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, self.chartDot)
+                          str += '</div>'
+                        }
                         str += '</div>'
                       }
-                      str += '</div>'
                     })
                     if (self.data.type === 'stackArea' || self.isStackArea) {
-                      sum = parseFloat(Number(sum).toFixed(2))
+                      sum = parseFloat(Number(sum).toFixed(6))
                       str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
                       str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
                       str += self.$t('dashboard.panel.chartTotal')

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -438,43 +438,42 @@ export default {
           minusFlag = false
         }
         showFlag = showFlag || item.data[1]
-        if (isNaN(item.data[1] + '')) {
+        if (!isNaN(item.data[1] + '')) {
-          return
+          const val = Number(item.data[1])
-        }
+          str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-        const val = Number(item.data[1])
+          str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}:  </div>`
-        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+          str += '<div style="padding-left: 10px;">'
-        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}:  </div>`
+          let dot = bus.countDecimals(val)
-        str += '<div style="padding-left: 10px;">'
+          // console.log(dot,val)
-        let dot = bus.countDecimals(val)
+          if (dot < this.chartDot) {
-        // console.log(dot,val)
+            dot = this.chartDot
-        if (dot < this.chartDot) {
+          } else if (dot > 6) {
-          dot = this.chartDot
+            dot = 6
-        } else if (dot > 6) {
-          dot = 6
-        }
-        str += chartDataFormat.getUnit(this.unit).compute(val, null, -1, dot)
-        const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
-        if (previousItem) {
-          str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right;box-sizing: border-box;padding-right: 10px">'
-          const previousval = formatScientificNotation(previousItem.data[1], dot)
-          let minusVal = 0
-          if (previousval <= val) {
-            minusVal = val - previousval
-            str += '+'
-          } else {
-            minusVal = previousval - val
-            str += '-'
           }
+          str += chartDataFormat.getUnit(this.unit).compute(val, null, -1, dot)
+          const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
+          if (previousItem) {
+            str += '<span style="padding-left: 10px; display: inline-block;width: 65px;text-align: right;box-sizing: border-box;padding-right: 10px">'
+            const previousval = formatScientificNotation(previousItem.data[1], dot)
+            let minusVal = 0
+            if (previousval <= val) {
+              minusVal = val - previousval
+              str += '+'
+            } else {
+              minusVal = previousval - val
+              str += '-'
+            }
 
-          str += chartDataFormat.getUnit(this.unit).compute(minusVal, null, -1, dot)
+            str += chartDataFormat.getUnit(this.unit).compute(minusVal, null, -1, dot)
-          str += '</span>'
+            str += '</span>'
-        } else if (alias.indexOf('Previous ') !== -1) {
+          } else if (alias.indexOf('Previous ') !== -1) {
-          str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
+            str += '<span style="padding-left: 10px; display: inline-block;width: 100px;text-align: right">'
-          str += '</span>'
+            str += '</span>'
+          }
+          str += '</div>'
+
+          str += '</div>'
         }
-        str += '</div>'
-
-        str += '</div>'
       })
       str += '</div>'
       if (!showFlag) {