数据分析页面骨架

components/analytics/AnalyticsComboChart.uvue

@@ -54,39 +54,87 @@ export default {
       })
 
       this.chartOption = {
-        grid: { left: 44, right: 44, top: 24, bottom: 36 },
-        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
-        legend: { top: 0, left: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 12 } },
+        grid: { left: 60, right: 60, top: 70, bottom: 40 },
+        tooltip: { 
+          trigger: 'axis', 
+          axisPointer: { type: 'shadow' },
+          formatter: (params: any) => {
+            let result = params[0].name + '<br/>'
+            for (let i = 0; i < params.length; i++) {
+              const p = params[i]
+              if (p.seriesName === 'GMV') {
+                const val = Number(p.value)
+                const formatted = val >= 10000 ? (val / 10000).toFixed(1) + '万' : val.toFixed(0)
+                result += `${p.marker} ${p.seriesName}: ¥${formatted}<br/>`
+              } else {
+                result += `${p.marker} ${p.seriesName}: ${p.value}<br/>`
+              }
+            }
+            return result
+          }
+        },
+        legend: { 
+          top: 8, 
+          left: 8, 
+          itemWidth: 10, 
+          itemHeight: 10, 
+          textStyle: { fontSize: 12 },
+          data: ['GMV', '订单数'],
+          bottom: 'auto'
+        },
         xAxis: {
           type: 'category',
           data: x,
-          axisTick: { show: false },
+          axisTick: { alignWithLabel: true },
           axisLine: { lineStyle: { color: 'rgba(0,0,0,0.12)' } },
-          axisLabel: { color: 'rgba(0,0,0,0.55)' }
+          axisLabel: { 
+            color: 'rgba(0,0,0,0.55)',
+            rotate: x.length > 12 ? 45 : 0,
+            interval: 0
+          }
         },
         yAxis: [
           {
             type: 'value',
-            name: 'GMV',
+            name: 'GMV（元）',
+            position: 'left',
             axisLine: { show: false },
             splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } },
-            axisLabel: { color: 'rgba(0,0,0,0.55)' }
+            axisLabel: { 
+              color: 'rgba(0,0,0,0.55)',
+              formatter: (value: number) => {
+                if (value >= 10000) {
+                  return (value / 10000).toFixed(1) + '万'
+                }
+                return String(Math.round(value))
+              }
+            }
           },
           {
             type: 'value',
-            name: '订单',
+            name: '订单数',
+            position: 'right',
+            alignTicks: true,
             axisLine: { show: false },
             splitLine: { show: false },
-            axisLabel: { color: 'rgba(0,0,0,0.55)' }
+            axisLabel: { 
+              color: 'rgba(0,0,0,0.55)',
+              formatter: (value: number) => String(Math.round(value))
+            }
           }
         ],
         series: [
           {
             name: 'GMV',
             type: 'bar',
+            yAxisIndex: 0,
             data: bar,
-            barWidth: 14,
-            itemStyle: { borderRadius: [6, 6, 0, 0] }
+            barMaxWidth: 14,
+            barCategoryGap: '35%',
+            itemStyle: { 
+              borderRadius: [6, 6, 0, 0],
+              color: '#3b82f6'
+            }
           },
           {
             name: '订单数',
@@ -96,7 +144,13 @@ export default {
             smooth: true,
             symbol: 'circle',
             symbolSize: 6,
-            lineStyle: { width: 2 }
+            lineStyle: { 
+              width: 2,
+              color: '#10b981'
+            },
+            itemStyle: {
+              color: '#10b981'
+            }
           }
         ]
       }