动态环图的字体大小和距离移动

陈鑫涛
1 parent 1ac15412
Showing 2 changed files with 32 additions and 2 deletions
src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-active-ring-chart.js
src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue
@@ -276,6 +276,22 @@ export const widgetActiveRingChart=  {
               ],
               value: 'normal'
             },
+            {
+              type: 'el-input-number',
+              label: '水平偏移',
+              name: 'digitalLeft',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '垂直偏移',
+              name: 'digitalTop',
+              required: false,
+              placeholder: '',
+              value: 0,
+            }
           ],
         },
         {
@@ -114,7 +114,6 @@ export default {
   },
   created() {
     this.optionsStyle = this.value.position;
-    console.log("🚀 ~ created ~ this.optionsStyle:", this.optionsStyle)
     this.optionsData = this.value.data;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
@@ -134,6 +133,8 @@ export default {
       this.setTitleConfig();
       //基础数据修改
       this.setOptionsConfig();
+      console.log(this.optionsSetup,'this.optionsSetup');
+      
     },
     //提示语设置
@@ -274,9 +275,21 @@ export default {
       this.isRouterAlive=false;
       this.$nextTick(function(){
         this.isRouterAlive=true;
+        this.$nextTick(() => this.moveDigitalFlop())
+      })
+    },
+    moveDigitalFlop() {
+      this.$nextTick(() => {
+        // 真实数字容器 class = active-ring-info
+        const box = this.$el.querySelector('.active-ring-info')
+        if (!box) return
+        const dx = this.optionsSetup.digitalLeft || 0
+        const dy = this.optionsSetup.digitalTop  || 0
+        // 直接 translate 即可
+        box.style.left = dx + 'px'
+        box.style.top = dy + 'px'
       })
     },
-
   }
 };
@@ -314,4 +327,5 @@ export default {
     font-size: 18px!important;
   }
 }
+
 </style>