1

src/components/page/sindex.vue

@@ -119,8 +119,9 @@
                 </div>
                 <div class="right">
                     <div class="tt fontMF" style="margin-top: 0px;margin-left: 0 !important;">车辆入驻统计</div>
-                    <div >
-                        <Charts :eOption="vehicleStatsOption" v-if="vehicleStatsOption" style="height: 424px; width: 450px;" />
+                    <div>
+                        <Charts :eOption="vehicleStatsOption" v-if="vehicleStatsOption"
+                            style="height: 424px; width: 450px;" />
                     </div>
                     <div class="tt fontMF" style="margin-top: 30px;margin-left: 0 !important;">订单执行情况</div>
                     <div class="scroll_table">
@@ -622,109 +623,121 @@ function resumeScroll2() {
 // script setup 区域增加车辆统计图表配置
 // 重新配置车辆统计图表，为每个柱子组合添加背景
 const vehicleStatsOption = ref({
-  backgroundColor: 'transparent',
-  
-  title: {
-    text: '入驻数量',
-    left: '20px',
-    top: '20px',
-    textStyle: {
-      color: '#fff',
-      fontSize: 16,
-      fontWeight: 'normal'
-    }
-  },
-  legend: {
-    data: ['入驻司机', '登记车辆', '无人车辆'],
-    right: '20px',
-    top: '20px',
-    textStyle: {
-      color: '#fff',
-      fontSize: 12
-    },
-    itemWidth: 8,
-    itemHeight: 8,
-    icon: 'rect'
-  },
-  grid: {
-    left: '3%',
-    right: '5%',
-    bottom: '5%',
-    top: '20%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: ['2023/10/11', '2023/11/11', '2023/12/11', '2024/01/11', '2024/02/11'],
-    axisLine: {
-      lineStyle: {
-        color: '#2a4b7c'
-      }
-    },
-    axisLabel: {
-      color: '#8892b0',
-      fontSize: 10
-    },
-    axisTick: {
-      show: false
-    }
-  },
-  yAxis: {
-    type: 'value',
-    max: 800,
-    interval: 100,
-    axisLine: {
-      show: false
+    backgroundColor: 'transparent',
+
+    title: {
+        text: '入驻数量',
+        left: '20px',
+        top: '20px',
+        textStyle: {
+            color: '#fff',
+            fontSize: 16,
+            fontWeight: 'normal'
+        }
     },
-    axisTick: {
-      show: false
+    legend: {
+        data: ['入驻司机', '登记车辆', '无人车辆'],
+        right: '20px',
+        top: '20px',
+        textStyle: {
+            color: '#fff',
+            fontSize: 12
+        },
+        itemWidth: 8,
+        itemHeight: 8,
+        icon: 'rect'
     },
-    axisLabel: {
-      color: '#8892b0',
-      fontSize: 12
+    grid: {
+        left: '3%',
+        right: '5%',
+        bottom: '5%',
+        top: '20%',
+        containLabel: true
     },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: '#1e3a5f',
-        type: 'solid',
-        width: 1
-      }
-    }
-  },
-  series: [
-    {
-      name: '入驻司机',
-      type: 'bar',
-      data: [280, 640, 320, 560, 460],
-      barWidth: 15,
-      barGap: '10%',
-      itemStyle: {
-        color: '#1890ff',
-        borderRadius: [2, 2, 0, 0]
-      }
+    xAxis: {
+        type: 'category',
+        data: ['2023/10/11', '2023/11/11', '2023/12/11', '2024/01/11', '2024/02/11'],
+        axisLine: {
+            lineStyle: {
+                color: '#2a4b7c'
+            }
+        },
+        axisLabel: {
+            color: '#8892b0',
+            fontSize: 10
+        },
+        axisTick: {
+            show: false
+        }
     },
-    {
-      name: '登记车辆',
-      type: 'bar',
-      data: [160, 360, 180, 320, 260],
-      barWidth: 15,
-      itemStyle: {
-        color: '#52c41a',
-        borderRadius: [2, 2, 0, 0]
-      }
+    yAxis: {
+        type: 'value',
+        max: 800,
+        interval: 100,
+        axisLine: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#8892b0',
+            fontSize: 12
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: '#1e3a5f',
+                type: 'solid',
+                width: 1
+            }
+        }
     },
-    {
-      name: '无人车辆',
-      type: 'bar',
-      data: [40, 80, 40, 80, 60],
-      barWidth: 15,
-      itemStyle: {
-        color: '#13c2c2',
-        borderRadius: [2, 2, 0, 0]
-      }
-    }
-  ]
+    series: [
+        {
+            name: '入驻司机',
+            type: 'bar',
+            data: [280, 640, 320, 560, 460],
+            barWidth: 9,
+            barGap: '0%',
+            itemStyle: {
+                color: '#1890ff',
+                borderRadius: [0, 0, 0, 0]
+            },
+            showBackground: true,  // 开启背景
+            backgroundStyle: {
+                color: 'rgba(180, 180, 180, 0.2)',  // 背景颜色
+            },
+        },
+        {
+            name: '登记车辆',
+            type: 'bar',
+            data: [160, 360, 180, 320, 260],
+            barWidth: 9,
+            itemStyle: {
+                color: '#52c41a',
+                borderRadius: [0, 0, 0, 0]
+            },
+            showBackground: true,  // 开启背景
+            backgroundStyle: {
+                color: 'rgba(180, 180, 180, 0.2)',  // 背景颜色
+            },
+        },
+        {
+            name: '无人车辆',
+            type: 'bar',
+            data: [40, 80, 40, 80, 60],
+            barWidth: 9,
+            itemStyle: {
+                color: '#13c2c2',
+                borderRadius: [0, 0, 0, 0]
+            },
+            showBackground: true,  // 开启背景
+            backgroundStyle: {
+                color: 'rgba(180, 180, 180, 0.2)',  // 背景颜色
+            },
+        }
+    ]
 });
 
 onMounted(() => {