feat: 优化细节调整

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

@@ -215,10 +215,10 @@ const chartOption = computed(() => {
       }
     },
     grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      top: '10%',
+      left: '10%',
+      right: '5%',
+      bottom: '15%',
+      top: '15%',
       containLabel: true
     },
     ...props.options
@@ -244,7 +244,8 @@ const chartOption = computed(() => {
 
 // 图表生成方法
 const generateLineChart = (baseOption) => {
-  const xData = props.data.map(item => item[props.xAxisKey])
+  // 获取唯一的X轴数据（日期）
+  const xData = [...new Set(props.data.map(item => item[props.xAxisKey]))].sort()
   const series = extractSeries()
 
   return {
@@ -258,7 +259,11 @@ const generateLineChart = (baseOption) => {
         }
       },
       axisLabel: {
-        color: 'var(--sa-subfont)'
+        color: 'var(--sa-subfont)',
+        rotate: 45,
+        interval: 'auto',
+        fontSize: 12,
+        margin: 8
       }
     },
     yAxis: {
@@ -269,14 +274,18 @@ const generateLineChart = (baseOption) => {
         }
       },
       axisLabel: {
-        color: 'var(--sa-subfont)'
+        color: 'var(--sa-subfont)',
+        fontSize: 12,
+        margin: 12
       },
       splitLine: {
         lineStyle: {
           color: 'var(--sa-space)',
           type: 'dashed'
         }
-      }
+      },
+      // 优化Y轴刻度间隔
+      minInterval: 1
     },
     series: series.map(s => ({
       ...s,
@@ -295,7 +304,8 @@ const generateLineChart = (baseOption) => {
 }
 
 const generateBarChart = (baseOption) => {
-  const xData = props.data.map(item => item[props.xAxisKey])
+  // 获取唯一的X轴数据（日期）
+  const xData = [...new Set(props.data.map(item => item[props.xAxisKey]))].sort()
   const series = extractSeries()
 
   return {
@@ -309,7 +319,11 @@ const generateBarChart = (baseOption) => {
         }
       },
       axisLabel: {
-        color: 'var(--sa-subfont)'
+        color: 'var(--sa-subfont)',
+        rotate: 45,
+        interval: 'auto',
+        fontSize: 12,
+        margin: 8
       }
     },
     yAxis: {
@@ -320,14 +334,18 @@ const generateBarChart = (baseOption) => {
         }
       },
       axisLabel: {
-        color: 'var(--sa-subfont)'
+        color: 'var(--sa-subfont)',
+        fontSize: 12,
+        margin: 12
       },
       splitLine: {
         lineStyle: {
           color: 'var(--sa-space)',
           type: 'dashed'
         }
-      }
+      },
+      // 优化Y轴刻度间隔
+      minInterval: 1
     },
     series: series.map(s => ({
       ...s,
@@ -456,27 +474,38 @@ const generateFunnelChart = (baseOption) => {
 const extractSeries = () => {
   if (!props.data || props.data.length === 0) return []
 
+  // 获取唯一的X轴数据（日期）
+  const xData = [...new Set(props.data.map(item => item[props.xAxisKey]))].sort()
+
   // 如果数据中有series字段，按series分组
   if (props.data[0][props.seriesKey]) {
     const seriesMap = new Map()
 
+    // 初始化所有系列
     props.data.forEach(item => {
       const seriesName = item[props.seriesKey]
       if (!seriesMap.has(seriesName)) {
-        seriesMap.set(seriesName, [])
+        seriesMap.set(seriesName, new Map())
       }
-      seriesMap.get(seriesName).push(item[props.yAxisKey])
+      // 按X轴值存储Y轴值
+      seriesMap.get(seriesName).set(item[props.xAxisKey], item[props.yAxisKey])
     })
 
-    return Array.from(seriesMap.entries()).map(([name, data]) => ({
+    // 根据X轴顺序构建数据
+    return Array.from(seriesMap.entries()).map(([name, dataMap]) => ({
       name,
-      data
+      data: xData.map(xValue => dataMap.get(xValue) || 0)
     }))
   } else {
     // 单系列数据
+    const dataMap = new Map()
+    props.data.forEach(item => {
+      dataMap.set(item[props.xAxisKey], item[props.yAxisKey])
+    })
+
     return [{
       name: props.title,
-      data: props.data.map(item => item[props.yAxisKey])
+      data: xData.map(xValue => dataMap.get(xValue) || 0)
     }]
   }
 }

src/app/shop/admin/data/report/index.vue

@@ -113,7 +113,7 @@
             </div>
             <div class="chart-content">
               <reportChart :title="chart.name" :data="transformChartData(chart)" :type="chart.viewType || 'line'"
-                :height="350" :show-date-picker="false" :x-axis-key="'x'" :y-axis-key="'y'" :series-key="'series'"
+                :height="400" :show-date-picker="false" :x-axis-key="'x'" :y-axis-key="'y'" :series-key="'series'"
                 :colors="legendColors" @chart-click="handleChartClick" />
             </div>
             <div class="chart-footer">
@@ -287,7 +287,7 @@ function transformChartData(chart) {
 
   // 为每个section生成数据点
   chart.sections.forEach(section => {
-    if (section.statistics && section.name !== chart.name + '汇总') {
+    if (section.statistics) {
       section.statistics.forEach(stat => {
         result.push({
           x: stat.cutDay,
@@ -708,11 +708,12 @@ onMounted(() => {
   padding: 16px;
   border: 1px solid #e4e7ed;
   transition: all 0.3s;
-  width: 880px;
-  height: 430px;
+  min-width: 1000px;
+  min-height: 500px;
   margin: 10px;
   display: flex;
   flex-direction: column;
+  /* 移除固定宽高，改为最小尺寸以确保图表有足够显示空间 */
 }
 
 .chart-card:hover {