perf：gauge图表排列算法优化

nezha-fronted/src/components/chart/chart/chartGauge.vue

@@ -78,10 +78,8 @@ export default {
       }
       this.timer = setTimeout(() => {
         this.initGaugeData(this.chartInfo, this.chartData).then(() => {
-          this.getLayout().then(layout => {
+          this.renderGauge().then(() => {
-            this.renderGauge(layout).then(() => {
+            this.gaugeChartInit()
-              this.gaugeChartInit()
-            })
           })
         })
       }, 200)
@@ -130,52 +128,53 @@ export default {
         resolve()
       })
     },
-    getLayout () {
+    calculateGridDimensions (parentWidth, parentHeight, numberOfChildren) {
-      this.boxWidth = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetWidth - 2 * this.boxPadding
+      const vertical = this.calculateSizeOfChild(parentWidth, parentHeight, numberOfChildren)
-      this.boxHeight = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetHeight - 2 * this.boxPadding
+      const horizontal = this.calculateSizeOfChild(parentHeight, parentWidth, numberOfChildren)
-      return new Promise(resolve => {
+      const square = Math.max(vertical, horizontal)
-        let rateMax = 0
+      let xCount = Math.floor(parentWidth / square)
-        let col = 0
+      const yCount = Math.ceil(numberOfChildren / xCount)
-        let row = 0
+
-        for (let i = 1; i <= this.gaugeData.length; i++) {
+      // after yCount update xCount to make split between rows more even
-          const cols = Math.ceil(this.gaugeData.length / i)
+      xCount = Math.ceil(numberOfChildren / yCount)
-          const w = this.boxWidth / i
+
-          const h = this.boxHeight / cols
+      const itemsOnLastRow = xCount - (xCount * yCount - numberOfChildren)
-          const rate = w > h ? h / w : w / h
+      const widthOnLastRow = parentWidth / itemsOnLastRow
-          if (rate > rateMax) {
+
-            rateMax = rate
+      return {
-            col = cols
+        width: parentWidth / xCount,
-            row = i
+        height: parentHeight / yCount,
-          }
+        widthOnLastRow,
-        }
+        xCount,
-        if (this.gaugeData.length) {
+        yCount
-          while (col * row >= this.gaugeData.length) { // 避免出现空白
+      }
-            row--
-          }
-        }
-        row++
-        if (col === 1 || row === 1) { // 行 或 列有一个为1时 需要调换位置 显示才会好看
-          const temp = col
-          col = row
-          row = temp
-        }
-        resolve({ col, row })
-      })
     },
-    renderGauge (layout) {
+    calculateSizeOfChild (parentWidth, parentHeight, numberOfChildren) {
+      const parts = Math.ceil(Math.sqrt((numberOfChildren * parentWidth) / parentHeight))
+      if (Math.floor((parts * parentHeight) / parentWidth) * parts < numberOfChildren) {
+        return parentHeight / Math.ceil((parts * parentHeight) / parentWidth)
+      }
+      return parentWidth / parts
+    },
+    renderGauge () {
       return new Promise(resolve => {
-        const width = this.boxWidth / layout.col
+        try {
-        const height = this.boxHeight / layout.row
+          this.boxWidth = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetWidth - 3 * this.boxPadding
-        const integer = Math.floor(this.gaugeData.length / layout.col)
+          this.boxHeight = this.$refs['chart-gauge-box' + this.chartInfo.id].offsetHeight - 3 * this.boxPadding
-        const remainder = this.gaugeData.length % layout.col
+        } catch (error) {}
-        const specialIndex = integer * layout.col
+
-        const specialWidth = this.boxWidth / remainder
+        const grid = this.calculateGridDimensions(this.boxWidth, this.boxHeight, this.gaugeData.length)
+        let xGrid = 0
+        let yGrid = 0
+
         this.gaugeData.forEach((item, index) => {
-          item.height = height
+          const isLastRow = yGrid === grid.yCount - 1
-          if (remainder && index >= specialIndex) {
+          item.width = isLastRow ? grid.widthOnLastRow : grid.width
-            item.width = specialWidth
+          item.height = grid.height
-          } else {
+          xGrid++
-            item.width = width
+          if (xGrid === grid.xCount) {
+            xGrid = 0
+            yGrid++
           }
         })
         resolve()
@@ -255,10 +254,8 @@ export default {
     },
     resize () {
       setTimeout(() => {
-        this.getLayout().then(layout => {
+        this.renderGauge().then(() => {
-          this.renderGauge(layout).then(() => {
+          this.gaugeChartResize()
-            this.gaugeChartResize()
-          })
         })
       })
     },