Kaynağa Gözat

feat:优化细节

叶静 3 hafta önce
ebeveyn
işleme
ca0bb39e53

+ 32 - 1
src/app/shop/admin/data/report/components/report-chart.vue

@@ -221,6 +221,10 @@ const chartOption = computed(() => {
       top: '15%',
       containLabel: true
     },
+    // 添加全局的鼠标交互配置
+    animation: true,
+    animationDuration: 300,
+    animationEasing: 'cubicOut',
     ...props.options
   }
 
@@ -292,12 +296,19 @@ const generateLineChart = (baseOption) => {
       type: 'line',
       smooth: true,
       symbol: 'circle',
-      symbolSize: 6,
+      symbolSize: 8, // 增大数据点基础大小
       lineStyle: {
         width: 3
       },
       areaStyle: {
         opacity: 0.1
+      },
+      // 鼠标悬停时的效果
+      emphasis: {
+        symbolSize: 14, // 悬停时数据点放大
+        lineStyle: {
+          width: 4 // 悬停时线条也稍微加粗
+        }
       }
     }))
   }
@@ -353,6 +364,14 @@ const generateBarChart = (baseOption) => {
       barWidth: '60%',
       itemStyle: {
         borderRadius: [4, 4, 0, 0]
+      },
+      // 鼠标悬停时的效果
+      emphasis: {
+        itemStyle: {
+          borderRadius: [4, 4, 0, 0],
+          shadowBlur: 6, // 悬停时添加阴影效果
+          shadowColor: 'rgba(0, 0, 0, 0.3)'
+        }
       }
     }))
   }
@@ -660,6 +679,18 @@ defineExpose({
 @import '../styles/report-common.scss';
 
 .chart-container {
+
+  /* 添加鼠标交互样式 */
+  .echarts {
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      transform: scale(1.002);
+      /* 轻微放大效果 */
+    }
+  }
+
   &.fullscreen {
     position: fixed;
     top: 0;