Merge pull request #7341 from dataease/pr@dev@perf_chart_render

Pr@dev@perf chart render
2023-12-25 20:17:20 +08:00 · 2023-12-25 20:17:20 +08:00 · 18e07517ef
commit 18e07517ef
parent 50add2ab51 c38724102c
6 changed files with 91 additions and 105 deletions
--- a/core/frontend/src/components/canvas/customComponent/UserView.vue
+++ b/core/frontend/src/components/canvas/customComponent/UserView.vue
@ -542,18 +542,17 @@ export default {
    },
    // 监听外部的样式变化 （非实时性要求）
    'hw': {
-      handler(newVal, oldVla) {
-        if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
+      handler(newVal, oldVal) {
+        if (!newVal) {
+          return
+        }
+        if (this.requestStatus === 'waiting') {
+          return
+        }
+        if (newVal !== oldVal && this.$refs[this.element.propValue.id]) {
          this.resizeChart()
        }
-      },
-      deep: true
-    },
-    // 监听外部的样式变化 （非实时性要求）
-    outStyle: {
-      handler(newVal, oldVla) {
-      },
-      deep: true
+      }
    },
    // 监听外部计时器变化
    searchCount: function(val1) {
@ -655,7 +654,7 @@ export default {
    equalsAny,
    tabSwitch(tabCanvasId) {
      if (this.charViewS2ShowFlag && tabCanvasId === this.canvasId && this.$refs[this.element.propValue.id]) {
-        this.$refs[this.element.propValue.id].chartResize()
+        // do nothing
      }
    },
    // 编辑状态下 不启动刷新
@ -786,9 +785,10 @@ export default {
      param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
    },
    clearPanelLinkage(param) {
+      console.log('clear linkage')
      if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
        try {
-          this.$refs[this.element.propValue.id]?.reDrawView?.()
+          // do nothing
        } catch (e) {
          console.error('reDrawView-error：', this.element.propValue.id)
        }
@ -842,9 +842,7 @@ export default {
          this.getDataLoading = false
          this.getData(id, cache, dataBroadcast)
          clearTimeout(this.cancelTime)
-          this.cancelTime = setTimeout(() => {
-            this.requestStatus = 'waiting'
-          }, 0)
+          this.requestStatus = 'waiting'
          return
        }
        this.requestStatus = 'waiting'
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@ -1595,7 +1595,7 @@ export default {
    word_size_range: 'Word Size Range',
    word_spacing: 'Word Spacing',
    axis_multi_select_tip: 'Hold down the Ctrl/Cmd or Shift key and click to select more than one',
-    needs_to_be_integer: 'Needs ti be an integer'
+    needs_to_be_integer: 'Needs to be an integer'
  },
  dataset: {
    scope_edit: 'Effective only when editing',
--- a/core/frontend/src/views/chart/components/ChartComponent.vue
+++ b/core/frontend/src/views/chart/components/ChartComponent.vue
@ -144,7 +144,8 @@ export default {
        'line',
        'line-stack',
        'scatter'
-      ]
+      ],
+      resizeTimer: null
    }
  },

@ -511,9 +512,16 @@ export default {
    },
    chartResize() {
      // 指定图表的配置项和数据
-      const chart = this.myChart
-      chart.resize()
-      this.reDrawMap()
+      this.resizeTimer && clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(() => {
+        const { offsetWidth, offsetHeight } = document.getElementById(this.chartId)
+        const chartWidth = this.myChart.getWidth()
+        const chartHeight = this.myChart.getHeight()
+        if (offsetWidth !== chartWidth || offsetHeight !== chartHeight) {
+          this.myChart.resize()
+          this.reDrawMap()
+        }
+      }, 100)
    },
    reDrawMap() {
      const chart = this.chart
--- a/core/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/core/frontend/src/views/chart/components/ChartComponentG2.vue
@ -127,8 +127,8 @@ export default {
      remarkCfg: {
        show: false,
        content: ''
-      }
-
+      },
+      resizeTimer: null
    }
  },

@ -156,17 +156,9 @@ export default {
    chart: {
      handler(newVal, oldVla) {
        this.initTitle()
-        this.calcHeightDelay()
-        new Promise((resolve) => {
-          resolve()
-        }).then(() => {
-          this.drawView()
-        })
+        this.calcHeightRightNow(this.drawView)
      },
      deep: true
-    },
-    resize() {
-      this.drawEcharts()
    }
  },
  beforeDestroy() {
@ -192,7 +184,7 @@ export default {
    for (const key in this.pointParam) {
      this.$delete(this.pointParam, key)
    }
-    window.removeEventListener('resize', this.calcHeightDelay)
+    window.removeEventListener('resize', this.chartResize)
    this.myChart = null
  },
  mounted() {
@ -238,13 +230,8 @@ export default {
    },
    preDraw() {
      this.initTitle()
-      this.calcHeightDelay()
-      new Promise((resolve) => {
-        resolve()
-      }).then(() => {
-        this.drawView()
-      })
-      window.addEventListener('resize', this.calcHeightDelay)
+      this.calcHeightRightNow(this.drawView)
+      window.addEventListener('resize', this.chartResize)
    },
    async drawView() {
      const chart = JSON.parse(JSON.stringify(this.chart))
@ -380,7 +367,10 @@ export default {
      }
    },
    chartResize() {
-      this.calcHeightDelay()
+      this.resizeTimer && clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(() => {
+        this.calcHeightRightNow()
+      }, 100)
    },
    trackClick(trackAction) {
      const param = this.pointParam
@ -470,22 +460,19 @@ export default {
      this.initRemark()
    },

-    calcHeightRightNow() {
+    calcHeightRightNow(callback) {
      this.$nextTick(() => {
        if (this.$refs.chartContainer) {
-          const currentHeight = this.$refs.chartContainer.offsetHeight
+          const { offsetHeight } = this.$refs.chartContainer
+          let titleHeight = 0
          if (this.$refs.title) {
-            const titleHeight = this.$refs.title.offsetHeight
-            this.chartHeight = (currentHeight - titleHeight) + 'px'
+            titleHeight = this.$refs.title.offsetHeight
          }
+          this.chartHeight = (offsetHeight - titleHeight) + 'px'
+          this.$nextTick(() => callback?.())
        }
      })
    },
-    calcHeightDelay() {
-      setTimeout(() => {
-        this.calcHeightRightNow()
-      }, 100)
-    },
    initRemark() {
      this.remarkCfg = getRemark(this.chart)
    }
--- a/core/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/core/frontend/src/views/chart/components/ChartComponentS2.vue
@ -34,7 +34,7 @@
    <div
      ref="tableContainer"
      style="width: 100%;overflow: hidden;"
-      :style="{background:container_bg_class.background}"
+      :style="{background:container_bg_class.background, height: chartHeight}"
    >
      <div
        v-if="chart.type === 'table-normal'"
@ -180,7 +180,8 @@ export default {
      totalStyle: {
        color: '#606266'
      },
-      not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET
+      not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET,
+      resizeTimer: null
    }
  },

@ -225,17 +226,9 @@ export default {
      handler(newVal, oldVla) {
        this.initData()
        this.initTitle()
-        this.calcHeightDelay()
-        new Promise((resolve) => {
-          resolve()
-        }).then(() => {
-          this.drawView()
-        })
+        this.calcHeightRightNow(this.drawView)
      },
      deep: true
-    },
-    resize() {
-      this.drawEcharts()
    }
  },
  mounted() {
@ -243,7 +236,7 @@ export default {
  },
  beforeDestroy() {
    clearInterval(this.scrollTimer)
-    window.removeEventListener('resize', this.onResize)
+    window.removeEventListener('resize', this.chartResize)
    this.myChart?.destroy?.()
    this.myChart = null
  },
@ -282,18 +275,10 @@ export default {
      this.tableData = data
    },
    preDraw() {
-      this.onResize()
-      window.addEventListener('resize', this.onResize)
-    },
-    onResize() {
      this.initData()
      this.initTitle()
-      this.calcHeightDelay()
-      new Promise((resolve) => {
-        resolve()
-      }).then(() => {
-        this.drawView()
-      })
+      this.calcHeightRightNow(this.drawView)
+      window.addEventListener('resize', this.chartResize)
    },
    drawView() {
      const chart = this.chart
@ -403,14 +388,21 @@ export default {
      }
    },
    chartResize() {
-      this.initData()
-      this.initTitle()
-      this.calcHeightDelay()
-      new Promise((resolve) => {
-        resolve()
-      }).then(() => {
-        this.drawView()
-      })
+      this.resizeTimer && clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(() => {
+        this.initData()
+        this.initTitle()
+        this.calcHeightRightNow((width, height) => {
+          const { width: chartWidth, height: chartHeight } = this.myChart.options
+          if (width !== chartWidth || height !== chartHeight) {
+            this.myChart?.changeSheetSize(width, height)
+            if (chartWidth || chartHeight) {
+              this.myChart.render()
+            }
+            this.initScroll()
+          }
+        })
+      }, 100)
    },
    trackClick(trackAction) {
      const param = this.pointParam
@ -483,24 +475,19 @@ export default {
      this.initRemark()
    },

-    calcHeightRightNow() {
+    calcHeightRightNow(callback) {
      this.$nextTick(() => {
        if (this.$refs.chartContainer) {
-          const currentHeight = this.$refs.chartContainer.offsetHeight
+          const { offsetWidth, offsetHeight } = this.$refs.chartContainer
+          let titleHeight = 0
          if (this.$refs.title) {
-            const titleHeight = this.$refs.title.offsetHeight
-            this.chartHeight = (currentHeight - titleHeight) + 'px'
-            this.$refs.tableContainer.style.height = this.chartHeight
+            titleHeight = this.$refs.title.offsetHeight
          }
+          this.chartHeight = (offsetHeight - titleHeight) + 'px'
+          this.$nextTick(() => callback?.(offsetWidth, offsetHeight - titleHeight))
        }
      })
    },
-    calcHeightDelay() {
-      this.calcHeightRightNow()
-      setTimeout(() => {
-        this.calcHeightRightNow()
-      }, 100)
-    },
    pageChange(val) {
      this.currentPage.pageSize = val
      if (this.chart.datasetMode === 0 && !NOT_SUPPORT_PAGE_DATASET.includes(this.chart.datasourceType)) {
@ -536,23 +523,28 @@ export default {
      const senior = JSON.parse(this.chart.senior)

      this.scrollTop = 0
-      this.myChart.store.set('scrollY', this.scrollTop)
-      this.myChart.render()

      if (senior && senior.scrollCfg && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) {
        const rowHeight = customAttr.size.tableItemHeight
        const headerHeight = customAttr.size.tableTitleHeight

        this.scrollTimer = setInterval(() => {
+          const offsetHeight = document.getElementById(this.chartId).offsetHeight
          const top = rowHeight * senior.scrollCfg.row
-          const dom = document.getElementById(this.chartId)
-          if ((dom.offsetHeight - headerHeight + this.scrollTop) < rowHeight * this.chart.data.tableRow.length) {
+          if ((offsetHeight - headerHeight + this.scrollTop) < rowHeight * this.chart.data.tableRow.length) {
            this.scrollTop += top
          } else {
            this.scrollTop = 0
          }
-          this.myChart.store.set('scrollY', this.scrollTop)
-          this.myChart.render()
+          if (!offsetHeight) {
+            return
+          }
+          this.myChart.facet.scrollWithAnimation({
+            offsetY: {
+              value: this.scrollTop,
+              animate: false
+            }
+          })
        }, senior.scrollCfg.interval)
      }
    },
--- a/core/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/core/frontend/src/views/chart/components/table/TableNormal.vue
@ -214,7 +214,8 @@ export default {
        top: '0px'
      },
      pointParam: null,
-      showSummary: true
+      showSummary: true,
+      resizeTimer: null
    }
  },
  computed: {
@ -425,7 +426,8 @@ export default {
      })
    },
    calcHeightDelay() {
-      setTimeout(() => {
+      this.resizeTimer && clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(() => {
        this.calcHeightRightNow()
      }, 100)
    },
@ -597,12 +599,6 @@ export default {
      const scrollContainer = document.getElementsByClassName(this.chart.id)[0].getElementsByClassName('elx-table--body-wrapper')[0]

      this.scrollTop = 0
-      setTimeout(() => {
-        scrollContainer.scrollTo({
-          top: this.scrollTop,
-          behavior: this.scrollTop === 0 ? 'instant' : 'smooth'
-        })
-      }, 0)

      if (senior && senior.scrollCfg && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) {
        let rowHeight = customAttr.size.tableItemHeight
@ -621,11 +617,16 @@ export default {
            top = rowHeight * senior.scrollCfg.row
          }

-          if (scrollContainer.clientHeight + scrollContainer.scrollTop < scrollContainer.scrollHeight) {
+          const { clientHeight, scrollTop, scrollHeight } = scrollContainer
+
+          if (clientHeight + scrollTop < scrollHeight) {
            this.scrollTop += top
          } else {
            this.scrollTop = 0
          }
+          if (!clientHeight) {
+            return
+          }
          scrollContainer.scrollTo({
            top: this.scrollTop,
            behavior: this.scrollTop === 0 ? 'instant' : 'smooth'