github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 03:52:59 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor(图表): 表格渲染优化

Browse Source
This commit is contained in:
wisonic 2024-11-27 12:17:15 +08:00
parent cc160135fd
commit 699c371d42
1 changed files with 24 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
View File

@ -22,7 +22,7 @@ import { storeToRefs } from 'pinia'
import { S2ChartView } from '@/views/chart/components/js/panel/types/impl/s2' import { S2ChartView } from '@/views/chart/components/js/panel/types/impl/s2'
import { ElPagination } from 'element-plus-secondary' import { ElPagination } from 'element-plus-secondary'
import ChartError from '@/views/chart/components/views/components/ChartError.vue' import ChartError from '@/views/chart/components/views/components/ChartError.vue'
import { defaultsDeep, cloneDeep } from 'lodash-es' import { defaultsDeep, cloneDeep, debounce } from 'lodash-es'
import { BASE_VIEW_CONFIG } from '../../editor/util/chart' import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle' import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
import { deepCopy } from '@/utils/utils' import { deepCopy } from '@/utils/utils'
@ -193,29 +193,31 @@ const renderChart = (viewInfo: Chart, resetPageInfo: boolean) => {
recursionTransObj(customAttrTrans, actualChart.customAttr, scale.value, terminal.value) recursionTransObj(customAttrTrans, actualChart.customAttr, scale.value, terminal.value)
recursionTransObj(customStyleTrans, actualChart.customStyle, scale.value, terminal.value) recursionTransObj(customStyleTrans, actualChart.customStyle, scale.value, terminal.value)
setupPage(actualChart, resetPageInfo)
nextTick(() => debounceRender(resetPageInfo))
}
const debounceRender = debounce(resetPageInfo => {
myChart?.facet?.timer?.stop() myChart?.facet?.timer?.stop()
myChart?.facet?.cancelScrollFrame() myChart?.facet?.cancelScrollFrame()
myChart?.destroy() myChart?.destroy()
myChart = null myChart?.getCanvasElement()?.remove()
setupPage(actualChart, resetPageInfo)
const chartView = chartViewManager.getChartView( const chartView = chartViewManager.getChartView(
viewInfo.render, actualChart.render,
viewInfo.type actualChart.type
) as S2ChartView<any> ) as S2ChartView<any>
timer = setTimeout(() => { myChart = chartView.drawChart({
myChart = chartView.drawChart({ container: containerId,
container: containerId, chart: toRaw(actualChart),
chart: toRaw(actualChart), chartObj: myChart,
chartObj: myChart, pageInfo: state.pageInfo,
pageInfo: state.pageInfo, action,
action, resizeAction
resizeAction })
}) myChart?.render()
myChart?.render() dvMainStore.setViewInstanceInfo(actualChart.id, myChart)
dvMainStore.setViewInstanceInfo(viewInfo.id, myChart) initScroll()
initScroll() }, 500)
}, 500)
}
const setupPage = (chart: ChartObj, resetPageInfo?: boolean) => { const setupPage = (chart: ChartObj, resetPageInfo?: boolean) => {
const customAttr = chart.customAttr const customAttr = chart.customAttr
@ -581,24 +583,12 @@ const resize = (width, height) => {
} }
timer = setTimeout(() => { timer = setTimeout(() => {
if (!myChart?.facet) { if (!myChart?.facet) {
const chartView = chartViewManager.getChartView( debounceRender(false)
actualChart.render,
actualChart.type
) as S2ChartView<any>
myChart = chartView.drawChart({
container: containerId,
chart: toRaw(actualChart),
chartObj: myChart,
pageInfo: state.pageInfo,
action,
resizeAction
})
dvMainStore.setViewInstanceInfo(actualChart.id, myChart)
} else { } else {
myChart?.facet?.timer?.stop() myChart?.facet?.timer?.stop()
myChart?.changeSheetSize(width, height) myChart?.changeSheetSize(width, height)
myChart?.render()
} }
myChart?.render()
initScroll() initScroll()
}, 500) }, 500)
} }
@ -620,7 +610,7 @@ onMounted(() => {
} }
preSize[0] = size.inlineSize preSize[0] = size.inlineSize
preSize[1] = size.blockSize preSize[1] = size.blockSize
resize(size.inlineSize, Math.ceil(size.blockSize)) resize(size.inlineSize, Math.round(size.blockSize))
}) })
resizeObserver.observe(document.getElementById(containerId)) resizeObserver.observe(document.getElementById(containerId))