diff --git a/core/core-frontend/src/components/common/DeEmpty.vue b/core/core-frontend/src/components/common/DeEmpty.vue
new file mode 100644
index 0000000000..88999adb33
--- /dev/null
+++ b/core/core-frontend/src/components/common/DeEmpty.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index a0e0ecd2a5..3212b5fcd3 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -18,6 +18,7 @@ import CanvasFilterBtn from '@/custom-component/canvas-filter-btn/Component.vue'
import { useEmitt } from '@/hooks/web/useEmitt'
import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
+import EmptyBackground from '../../empty-background/src/EmptyBackground.vue'
const dvMainStore = dvMainStoreWithOut()
const { pcMatrixCount, curComponent, mobileInPc, canvasState } = storeToRefs(dvMainStore)
const openHandler = ref(null)
@@ -450,6 +451,7 @@ defineExpose({
+
diff --git a/core/core-frontend/src/pages/panel/DashboardPreview.vue b/core/core-frontend/src/pages/panel/DashboardPreview.vue
index 8411f11390..23030fe6a0 100644
--- a/core/core-frontend/src/pages/panel/DashboardPreview.vue
+++ b/core/core-frontend/src/pages/panel/DashboardPreview.vue
@@ -14,6 +14,7 @@ import { useI18n } from '@/hooks/web/useI18n'
import request from '@/config/axios'
import 'vant/es/nav-bar/style'
import 'vant/es/sticky/style'
+import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
const { wsCache } = useCache()
const interactiveStore = interactiveStoreWithOut()
const embeddedStore = useEmbedded()
@@ -128,6 +129,7 @@ onBeforeMount(async () => {
show-position="preview"
>
+