diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 3c6f7bb9aa..5c4f8cc660 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -52,7 +52,7 @@
               <svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ $t('chart.export') }}Excel
             </el-button>
           </span>
-          <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :open-type="showChartInfoType" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+          <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :canvas-style-data="canvasStyleData" :open-type="showChartInfoType" :chart="showChartInfo" :chart-table="showChartTableInfo" />
         </el-dialog>
 
         <!--手机视图详情-->
@@ -62,7 +62,7 @@
           class="mobile-dialog-css"
           :destroy-on-close="true"
         >
-          <UserViewMobileDialog v-if="mobileChartDetailsVisible" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+          <UserViewMobileDialog v-if="mobileChartDetailsVisible" :canvas-style-data="canvasStyleData" :chart="showChartInfo" :chart-table="showChartTableInfo" />
         </el-dialog>
       </div>
     </div>
diff --git a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
index cbdab932ea..efed07fbad 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
@@ -18,6 +18,7 @@
           :key="index"
           :config="item"
           :search-count="searchCount"
+          :canvas-style-data="canvasStyleData"
           :in-screen="inScreen"
         />
         <!--视图详情-->
@@ -33,7 +34,7 @@
               {{ $t('chart.export_details') }}
             </el-button>
           </span>
-          <UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+          <UserViewDialog ref="userViewDialog" :canvas-style-data="canvasStyleData" :chart="showChartInfo" :chart-table="showChartTableInfo" />
         </el-dialog>
       </div>
     </div>
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index df535a5241..722b519b28 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -153,6 +153,7 @@
         ref="userViewDialog"
         :chart="showChartInfo"
         :chart-table="showChartTableInfo"
+        :canvas-style-data="canvasStyleData"
         :open-type="showChartInfoType"
       />
     </el-dialog>
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 4a857b0360..6b19314033 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -36,6 +36,7 @@
       :terminal-type="scaleCoefficientType"
       :scale="scale"
       :theme-style="element.commonBackground"
+      :canvas-style-data="canvasStyleData"
       class="chart-class"
       @onChartClick="chartClick"
       @onJumpClick="jumpClick"
diff --git a/frontend/src/components/canvas/custom-component/UserViewDialog.vue b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
index 4e23564411..7cd0701bb3 100644
--- a/frontend/src/components/canvas/custom-component/UserViewDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
@@ -9,6 +9,7 @@
             :obj="{chart: mapChart || chart}"
             :chart="mapChart || chart"
             :theme-style="element.commonBackground"
+            :canvas-style-data="canvasStyleData"
             class="chart-class"
           />
           <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || chart" />
@@ -60,6 +61,7 @@ export default {
       type: String,
       default: 'details'
     }
+    
   },
   data() {
     return {
diff --git a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
index 79c13760da..c5dd240530 100644
--- a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
@@ -8,6 +8,7 @@
           :obj="{chart: mapChart || chart}"
           :chart="mapChart || chart"
           :theme-style="element.commonBackground"
+          :canvas-style-data="canvasStyleData"
           class="chart-class"
         />
         <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || chart" />
@@ -49,6 +50,7 @@ export default {
       type: Object,
       default: null
     }
+    
   },
   data() {
     return {