Parcourir la source

feat(frontend): 优化每月规律交易趋势图悬停效果

cc il y a 2 jours
Parent
commit
f9e473f249
1 fichiers modifiés avec 22 ajouts et 0 suppressions
  1. 22 0
      ai-electron/frontend/src/trans/views/monthRegular/index.vue

+ 22 - 0
ai-electron/frontend/src/trans/views/monthRegular/index.vue

@@ -495,7 +495,21 @@
       tooltip: {
         trigger: 'axis',
         confine: true,
+        // 外层透明:只保留 formatter 里的白卡,避免默认灰边 + 10px 内边距形成双层框
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        borderColor: 'transparent',
+        padding: 0,
+        shadowBlur: 0,
+        shadowColor: 'transparent',
+        transitionDuration: 0.15,
         extraCssText: 'max-width: 320px; white-space: normal; word-break: break-word;',
+        axisPointer: {
+          type: 'shadow',
+          shadowStyle: { color: 'rgba(42, 80, 236, 0.06)' },
+          // 提示卡里已经有区间文字,不再显示坐标轴上的深色小标签
+          label: { show: false },
+        },
         formatter: (params: any) => {
           const index = params[0].dataIndex;
           const item = list[index];
@@ -535,7 +549,15 @@
           data: list.length ? list.map((item) => Number(item.pairTotalTrans || 0)) : [0],
           type: 'bar',
           barWidth: 18,
+          cursor: 'pointer',
           itemStyle: { color: '#2a50ec', borderRadius: [6, 6, 0, 0] },
+          emphasis: {
+            itemStyle: {
+              color: '#4b6bf0',
+              shadowBlur: 12,
+              shadowColor: 'rgba(42, 80, 236, 0.28)',
+            },
+          },
           label: {
             show: true,
             position: 'top',