fix: 修复G2图表初始化错误和数据验证问题

## 问题修复
-  解决 'ownerDocument' is null 错误
-  解决 'f.split is not a function' 错误
-  添加 DOM 元素存在性检查
-  添加数据格式验证

## 优化措施
1. **延迟初始化**
   - 添加 100ms 延迟确保 DOM 已挂载
   - 数据更新时延迟 50ms 避免频繁重渲染

2. **数据验证**
   - 过滤无效数据对象
   - 检查必需字段存在性
   - 验证数字类型字段

3. **错误处理**
   - 添加 console.warn 提示
   - 容器不存在时优雅退出
   - 无效数据时避免崩溃

## 影响组件
- G2LineChart.vue
- G2PieChart.vue
- G2HBarChart.vue

Author: Layau-code

web/src/components/charts/G2HBarChart.vue

@@ -37,6 +37,27 @@ function initChart() {
     return
   }
 
+  // 确保 DOM 元素存在
+  const container = document.getElementById(chartId.value)
+  if (!container) {
+    console.warn('Chart container not found:', chartId.value)
+    return
+  }
+
+  // 数据验证
+  const validData = props.data.filter(d => 
+    d && 
+    typeof d === 'object' && 
+    d[props.xField] !== undefined && 
+    d[props.yField] !== undefined &&
+    typeof d[props.xField] === 'number'
+  )
+
+  if (validData.length === 0) {
+    console.warn('No valid data for bar chart')
+    return
+  }
+
   chart = new Chart({
     container: chartId.value,
     autoFit: true,
@@ -47,7 +68,7 @@ function initChart() {
 
   chart
     .interval()
-    .data(props.data)
+    .data(validData)
     .encode('x', props.yField)
     .encode('y', props.xField)
     .encode('color', (d, idx) => {
@@ -87,11 +108,15 @@ function initChart() {
 }
 
 onMounted(() => {
-  initChart()
+  setTimeout(() => {
+    initChart()
+  }, 100)
 })
 
 watch(() => props.data, () => {
-  initChart()
+  setTimeout(() => {
+    initChart()
+  }, 50)
 }, { deep: true })
 
 onBeforeUnmount(() => {

web/src/components/charts/G2LineChart.vue

@@ -34,6 +34,7 @@ const props = defineProps({
 })
 
 const chartId = ref(`g2-line-${Math.random().toString(36).substr(2, 9)}`)
+const chartRef = ref(null)
 let chart = null
 
 function initChart() {
@@ -45,6 +46,26 @@ function initChart() {
     return
   }
 
+  // 确保 DOM 元素存在
+  const container = document.getElementById(chartId.value)
+  if (!container) {
+    console.warn('Chart container not found:', chartId.value)
+    return
+  }
+
+  // 数据验证
+  const validData = props.data.filter(d => 
+    d && 
+    typeof d === 'object' && 
+    d[props.xField] !== undefined && 
+    d[props.yField] !== undefined
+  )
+
+  if (validData.length === 0) {
+    console.warn('No valid data for chart')
+    return
+  }
+
   chart = new Chart({
     container: chartId.value,
     autoFit: true,
@@ -54,7 +75,7 @@ function initChart() {
   // 折线
   chart
     .line()
-    .data(props.data)
+    .data(validData)
     .encode('x', props.xField)
     .encode('y', props.yField)
     .encode('shape', props.smooth ? 'smooth' : 'line')
@@ -69,7 +90,7 @@ function initChart() {
   // 面积填充
   chart
     .area()
-    .data(props.data)
+    .data(validData)
     .encode('x', props.xField)
     .encode('y', props.yField)
     .encode('shape', props.smooth ? 'smooth' : 'area')
@@ -81,7 +102,7 @@ function initChart() {
   // 数据点 - 增大尺寸，更明显
   chart
     .point()
-    .data(props.data)
+    .data(validData)
     .encode('x', props.xField)
     .encode('y', props.yField)
     .encode('size', 6)
@@ -106,11 +127,17 @@ function initChart() {
 }
 
 onMounted(() => {
-  initChart()
+  // 延迟初始化，确保 DOM 已挂载
+  setTimeout(() => {
+    initChart()
+  }, 100)
 })
 
 watch(() => props.data, () => {
-  initChart()
+  // 延迟更新，避免频繁重渲染
+  setTimeout(() => {
+    initChart()
+  }, 50)
 }, { deep: true })
 
 onBeforeUnmount(() => {

web/src/components/charts/G2PieChart.vue

@@ -41,6 +41,27 @@ function initChart() {
     return
   }
 
+  // 确保 DOM 元素存在
+  const container = document.getElementById(chartId.value)
+  if (!container) {
+    console.warn('Chart container not found:', chartId.value)
+    return
+  }
+
+  // 数据验证
+  const validData = props.data.filter(d => 
+    d && 
+    typeof d === 'object' && 
+    d[props.valueField] !== undefined && 
+    d[props.labelField] !== undefined &&
+    typeof d[props.valueField] === 'number'
+  )
+
+  if (validData.length === 0) {
+    console.warn('No valid data for pie chart')
+    return
+  }
+
   chart = new Chart({
     container: chartId.value,
     autoFit: true,
@@ -51,7 +72,7 @@ function initChart() {
 
   chart
     .interval()
-    .data(props.data)
+    .data(validData)
     .transform({ type: 'stackY' })
     .encode('y', props.valueField)
     .encode('color', props.labelField)
@@ -66,7 +87,7 @@ function initChart() {
     })
     .label({
       text: (d) => {
-        const total = props.data.reduce((sum, item) => sum + item[props.valueField], 0)
+        const total = validData.reduce((sum, item) => sum + item[props.valueField], 0)
         const percent = ((d[props.valueField] / total) * 100).toFixed(1)
         return `${percent}%`
       },
@@ -81,7 +102,7 @@ function initChart() {
     .tooltip({
       items: [(d) => ({ 
         name: d[props.labelField], 
-        value: d[props.valueField] + ' (' + ((d[props.valueField] / props.data.reduce((sum, item) => sum + item[props.valueField], 0)) * 100).toFixed(1) + '%)'
+        value: d[props.valueField] + ' (' + ((d[props.valueField] / validData.reduce((sum, item) => sum + item[props.valueField], 0)) * 100).toFixed(1) + '%)'
       })]
     })
     .style('stroke', '#fff')
@@ -99,11 +120,15 @@ function initChart() {
 }
 
 onMounted(() => {
-  initChart()
+  setTimeout(() => {
+    initChart()
+  }, 100)
 })
 
 watch(() => props.data, () => {
-  initChart()
+  setTimeout(() => {
+    initChart()
+  }, 50)
 }, { deep: true })
 
 onBeforeUnmount(() => {