修改

src/views/home/components/pieChart.vue

@@ -17,21 +17,35 @@ export default {
       //   // 验证：ref 名不能为空，确保有效
       //   return value.trim() !== '';
       // }
-    }
+    },
+    pieData: {
+      type: Object,
+      default: () => { } // 默认空数组，避免报错
+    },
   },
-  components: {},
   data() {
     return {};
   },
   computed: {},
+  watch: {
+    // 监听 pieData 变化，只要数据变了，就更新图表
+    pieData: {
+      handler() {
+        this.initData(); // 直接调用更新，无需判断 myChart 是否存在
+      },
+      deep: true,
+      immediate: true // 初始化时立即执行
+    },
+  },
   mounted() {
     this.$nextTick(() => {
-      this.initData();
+      this.initChart(); // 只负责初始化图表实例
     });
   },
   methods: {
     initData() {
-      // 2. 动态获取 DOM：通过 props 中的 chartRef 拿到对应的 ref 元素
+      console.log(this.pieData,'this.pieData.value');
+
       const chartDom = this.$refs[this.chartRef];
       if (!chartDom) {
         console.error(`图表容器未找到！请确认父组件传递的 chartRef 为 "${this.chartRef}"`);
@@ -94,7 +108,7 @@ export default {
             labelLine: {
               show: true,
               length: 0,
-              length2: 30,
+              length2: 10,
               lineStyle: {
                 color: (params) => customColors[params.dataIndex]
               }
@@ -104,7 +118,7 @@ export default {
             },
             data: [
               {
-                value: 1048, name: '单镀面板',
+                value: this.pieData?.value || 0,  name: '单镀面板',
                 label: {
                   normal: {
                     align: 'left',
@@ -133,7 +147,9 @@ export default {
                   }
                 },
                 labelLine: {
-                  lineStyle: { color: 'rgba(39, 96, 255, 1)' }
+                  lineStyle: { color: 'rgba(39, 96, 255, 1)' },
+                  length: 10,
+                  length2: 20,
                 },
                 itemStyle: { color: 'rgba(39, 96, 255, 1)' }
               },
@@ -168,8 +184,8 @@ export default {
                 },
                 labelLine: {
                   length: 0,
-                  length2: 50,
-                  lineStyle: { color: 'rgba(40, 138, 255, 1)' }
+                  length2: 10,
+                  lineStyle: { color: 'rgba(40, 138, 255, 1)' },
                 },
                 itemStyle: { color: 'rgba(40, 138, 255, 1)' }
               },
@@ -203,7 +219,9 @@ export default {
                   }
                 },
                 labelLine: {
-                  lineStyle: { color: 'rgba(118, 218, 190, 1)' }
+                  lineStyle: { color: 'rgba(118, 218, 190, 1)' },
+                  length: 0,
+                  length2: 10,
                 },
                 itemStyle: { color: 'rgba(118, 218, 190, 1)' }
               },
@@ -237,7 +255,9 @@ export default {
                   }
                 },
                 labelLine: {
-                  lineStyle: { color: 'rgba(255, 206, 106, 1)' }
+                  lineStyle: { color: 'rgba(255, 206, 106, 1)' },
+                  length: 10,
+                  length2: 10,
                 },
                 itemStyle: { color: 'rgba(255, 206, 106, 1)' }
               }