refine: 优化G2图表视觉效果，增强低数据量场景下的显示

## 折线图优化
- 加粗线条：2px  3px，线条更明显
- 增大数据点：4px  6px，更清晰
- 改变数据点样式：实心蓝色 + 白色边框
- 增强面积填充：透明度 15%  20%
- 延长动画时间：800ms  1000ms
- 添加数据点缩放弹出动画

## 饼图优化
- 调整环形比例，更美观
- 简化标签：只显示百分比
- 加粗标签字体：14px + font-weight 600
- 添加白色扇区分隔线（3px）
- 优化悬停效果：蓝色边框高亮
- 增强Tooltip：显示数量 + 百分比

## 效果提升
- 即使只有2-3个数据点也清晰美观
- 统一蓝色主题，无渐变
- 流畅的动画过渡效果

Author: Layau-code

web/src/components/charts/G2LineChart.vue

@@ -59,12 +59,12 @@ function initChart() {
     .encode('y', props.yField)
     .encode('shape', props.smooth ? 'smooth' : 'line')
     .style('stroke', props.color)
-    .style('lineWidth', 2)
+    .style('lineWidth', 3)
     .tooltip({
       title: (d) => d[props.xField],
       items: [(d) => ({ name: '访问量', value: d[props.yField] })]
     })
-    .animate('enter', { type: 'pathIn', duration: 800 })
+    .animate('enter', { type: 'pathIn', duration: 1000 })
 
   // 面积填充
   chart
@@ -74,24 +74,25 @@ function initChart() {
     .encode('y', props.yField)
     .encode('shape', props.smooth ? 'smooth' : 'area')
     .style('fill', props.color)
-    .style('fillOpacity', 0.15)
+    .style('fillOpacity', 0.2)
     .tooltip(false)
-    .animate('enter', { type: 'fadeIn', duration: 800 })
+    .animate('enter', { type: 'fadeIn', duration: 1000 })
 
-  // 数据点
+  // 数据点 - 增大尺寸，更明显
   chart
     .point()
     .data(props.data)
     .encode('x', props.xField)
     .encode('y', props.yField)
-    .encode('size', 4)
+    .encode('size', 6)
     .encode('shape', 'point')
-    .style('fill', '#fff')
-    .style('stroke', props.color)
-    .style('lineWidth', 2)
+    .style('fill', props.color)
+    .style('stroke', '#fff')
+    .style('lineWidth', 3)
     .tooltip(false)
-    .state('active', { fill: props.color })
+    .state('active', { r: 8 })
     .interaction('elementHighlight', true)
+    .animate('enter', { type: 'scaleInY', duration: 800, delay: 500 })
 
   // 坐标轴配置
   chart.axis('y', {

web/src/components/charts/G2PieChart.vue

@@ -47,7 +47,7 @@ function initChart() {
     height: props.height,
   })
 
-  chart.coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.5 })
+  chart.coordinate({ type: 'theta', outerRadius: 0.75, innerRadius: 0.45 })
 
   chart
     .interval()
@@ -58,25 +58,41 @@ function initChart() {
     .scale('color', { range: props.colors })
     .legend('color', {
       position: 'right',
-      layout: { justifyContent: 'center' }
+      layout: { justifyContent: 'center' },
+      itemMarker: {
+        symbol: 'circle',
+        style: { r: 5 }
+      }
     })
     .label({
       text: (d) => {
         const total = props.data.reduce((sum, item) => sum + item[props.valueField], 0)
         const percent = ((d[props.valueField] / total) * 100).toFixed(1)
-        return `${d[props.labelField]}\n${percent}%`
+        return `${percent}%`
       },
       position: 'outside',
-      fontSize: 12,
-      fill: '#64748b'
+      fontSize: 14,
+      fontWeight: 600,
+      fill: '#334155',
+      connectorDistance: 8,
+      connectorStroke: '#cbd5e1',
+      connectorStrokeWidth: 1
     })
     .tooltip({
       items: [(d) => ({ 
         name: d[props.labelField], 
-        value: d[props.valueField] 
+        value: d[props.valueField] + ' (' + ((d[props.valueField] / props.data.reduce((sum, item) => sum + item[props.valueField], 0)) * 100).toFixed(1) + '%)'
       })]
     })
-    .animate('enter', { type: 'waveIn', duration: 800 })
+    .style('stroke', '#fff')
+    .style('lineWidth', 3)
+    .animate('enter', { type: 'waveIn', duration: 1000 })
+    .state('active', { 
+      style: { 
+        lineWidth: 4,
+        stroke: '#2563eb'
+      } 
+    })
     .interaction('elementHighlight', true)
 
   chart.render()