界面设计

components/analytics/AnalyticsComboChart.uvue

@@ -26,9 +26,33 @@ export default {
   },
 
   watch: {
-    xLabels: { handler() { this.updateOption() }, deep: true },
-    gmv: { handler() { this.updateOption() }, deep: true },
-    orders: { handler() { this.updateOption() }, deep: true },
+    xLabels: { 
+      handler() { 
+        if (this.xLabels && this.xLabels.length > 0) {
+          this.updateOption()
+        }
+      }, 
+      deep: true,
+      immediate: false
+    },
+    gmv: { 
+      handler() { 
+        if (this.gmv && this.gmv.length > 0) {
+          this.updateOption()
+        }
+      }, 
+      deep: true,
+      immediate: false
+    },
+    orders: { 
+      handler() { 
+        if (this.orders && this.orders.length > 0) {
+          this.updateOption()
+        }
+      }, 
+      deep: true,
+      immediate: false
+    },
     height: { 
       handler() { 
         this.heightPx = `${this.height}px`
@@ -38,11 +62,53 @@ export default {
 
   mounted() {
     this.heightPx = `${this.height}px`
-    this.updateOption()
+    // 延迟初始化，确保 props 已传递
+    setTimeout(() => {
+      if (this.xLabels && this.xLabels.length > 0 && this.gmv && this.gmv.length > 0) {
+        this.updateOption()
+      }
+    }, 100)
   },
 
   methods: {
+    // 工具函数：将 UTS 对象转换为纯 JavaScript 对象
+    toPlainObject(obj: any): any {
+      if (obj == null) return null
+      if (typeof obj !== 'object') return obj
+      if (Array.isArray(obj)) {
+        return obj.map((item) => this.toPlainObject(item))
+      }
+      const plain: any = {}
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          const value = obj[key]
+          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
+            continue
+          }
+          if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+            let isSimple = true
+            for (const k in value) {
+              if (typeof value[k] === 'object' && value[k] !== null) {
+                isSimple = false
+                break
+              }
+            }
+            plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
+          } else {
+            plain[key] = value
+          }
+        }
+      }
+      return plain
+    },
+    
     updateOption() {
+      // 检查数据是否有效
+      if (!this.xLabels || !this.gmv || !this.orders || 
+          this.xLabels.length === 0 || this.gmv.length === 0 || this.orders.length === 0) {
+        return
+      }
+      
       const x = (this.xLabels as Array<any>).map((s) => String(s))
       const bar = (this.gmv as Array<any>).map((v) => {
         const n = Number(v)
@@ -53,7 +119,8 @@ export default {
         return isFinite(n) ? n : 0
       })
 
-      this.chartOption = {
+      // 构建图表配置并转换为纯 JS 对象
+      const option = {
         grid: { left: 60, right: 60, top: 70, bottom: 40 },
         tooltip: { 
           trigger: 'axis', 
@@ -154,6 +221,9 @@ export default {
           }
         ]
       }
+      
+      // 转换为纯 JS 对象确保 ECharts 能正确接收
+      this.chartOption = this.toPlainObject(option)
     }
   }
 }
@@ -162,9 +232,15 @@ export default {
 <style>
 .chart-wrap {
   width: 100%;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 .chart {
   width: 100%;
   height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 </style>