diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
index d0c81edb3e..855df7707b 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
@@ -530,8 +530,12 @@ onMounted(() => {
   resizeObserver.observe(containerDom)
 })
 onBeforeUnmount(() => {
-  myChart?.destroy()
-  resizeObserver?.disconnect()
+  try {
+    myChart?.destroy()
+    resizeObserver?.disconnect()
+  } catch (e) {
+    console.log(e)
+  }
 })
 </script>
 
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index 512deeccfc..3bb7de47d3 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -561,10 +561,14 @@ onMounted(() => {
   resizeObserver.observe(document.getElementById(containerId))
 })
 onBeforeUnmount(() => {
-  myChart?.facet.timer?.stop()
-  myChart?.destroy()
-  myChart = null
-  resizeObserver?.disconnect()
+  try {
+    myChart?.facet.timer?.stop()
+    myChart?.destroy()
+    myChart = null
+    resizeObserver?.disconnect()
+  } catch (e) {
+    console.log(e)
+  }
 })
 
 const autoStyle = computed(() => {
diff --git a/core/core-frontend/src/views/data-visualization/DvPreview.vue b/core/core-frontend/src/views/data-visualization/DvPreview.vue
index fd15220189..4b1f5573bd 100644
--- a/core/core-frontend/src/views/data-visualization/DvPreview.vue
+++ b/core/core-frontend/src/views/data-visualization/DvPreview.vue
@@ -3,6 +3,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { computed, ref } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { storeToRefs } from 'pinia'
+import { ElScrollbar } from 'element-plus-secondary'
 
 const dvMainStore = dvMainStoreWithOut()
 const { fullscreenFlag } = storeToRefs(dvMainStore)
@@ -57,13 +58,24 @@ const contentInnerClass = computed(() => {
   }
 })
 
+const outerStyle = computed(() => {
+  return {
+    flexDirection: props.canvasStylePreview.screenAdaptor === 'heightFirst' ? 'row' : 'column'
+  }
+})
+
 defineExpose({
   restore
 })
 </script>
 
 <template>
-  <div id="de-preview-content" :class="{ 'de-screen-full': fullscreenFlag }" class="content-outer">
+  <div
+    id="de-preview-content"
+    :class="{ 'de-screen-full': fullscreenFlag }"
+    :style="outerStyle"
+    class="content-outer"
+  >
     <div class="content-inner" :class="contentInnerClass">
       <de-preview
         ref="dePreviewRef"