diff --git a/.env.development b/.env.development
index c07c55a..fef6581 100644
--- a/.env.development
+++ b/.env.development
@@ -6,8 +6,8 @@ VITE_APP_ENV = 'development'
 
 # 开发环境
  #VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
-#  VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
-VITE_APP_BASE_API = 'http://192.168.110.56:8000'   
+ VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
+#VITE_APP_BASE_API = 'http://192.168.2.34:8000'   
 #代永飞接口
 # VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'   
 
diff --git a/src/views/homeIndex/components/DeviceUsage.vue b/src/views/homeIndex/components/DeviceUsage.vue
index cc153e1..35121e3 100644
--- a/src/views/homeIndex/components/DeviceUsage.vue
+++ b/src/views/homeIndex/components/DeviceUsage.vue
@@ -4,8 +4,9 @@
             <div class="btn_mounth" :class="{ cur: activeTab == 'month' }" @click="switchTab('month')">近一月</div>
             <div class="btn_mounth" :class="{ cur: activeTab === 'halfYear' }" @click="switchTab('halfYear')">近半年</div>
         </div>
-
-        <div ref="chartRef" class="chartRef"></div>
+        <div ref="chartContainerRef" class="chartContainer" :class="{ 'show-scroll': showScroll }">
+            <div ref="chartRef" class="chartRef"></div>
+        </div>
     </div>
 </template>
 
@@ -14,19 +15,46 @@ import * as echarts from 'echarts';
 import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
 
 const chartRef = ref<HTMLDivElement | null>(null);
+const chartContainerRef = ref<HTMLDivElement | null>(null);
 const activeTab = ref('month');
-let myChart: echarts.ECharts | null = null; // 保存图表实例
-let dataTimer: NodeJS.Timeout | null = null; // 数据更新定时器
+const showScroll = ref(false); // 控制是否显示滚动条
+let myChart: echarts.ECharts | null = null;
+let dataTimer: NodeJS.Timeout | null = null;
 
 // 根据天数获取数据并更新图表
 const fetchDataAndUpdate = (days: number) => {
     getDeviceUsageFrequency({ days }).then((res) => {
         if (res.code === 200 && res.data && myChart) {
-            //（转换为图表所需格式）
+            // 模拟数据（根据需求调整数量）
+            const dataCount = activeTab.value === 'month' ? 8 : 25; // 一月8条，半年25条
+            const mockData = Array.from({ length: dataCount }, (_, index) => ({
+                deviceName: `设备${index + 1}`,
+                frequency: Math.floor(Math.random() * 100)
+            }));
             const chartData = res.data.map(item => ({
                 name: item.deviceName,
                 value: item.frequency
             }));
+            const scrollThreshold = 20;
+            showScroll.value = chartData.length > scrollThreshold;
+
+            // 动态计算图表高度
+            const baseItemHeight = 20;
+            const minHeight = 200; 
+            const maxHeight = 600; 
+            
+            let chartHeight;
+            if (showScroll.value) {
+
+                chartHeight = Math.min(chartData.length * baseItemHeight, maxHeight);
+            } else {
+                chartHeight = Math.max(chartData.length * baseItemHeight, minHeight);
+            }
+
+            if (chartRef.value) {
+                chartRef.value.style.height = `${chartHeight}px`;
+            }
+
             // 更新图表
             myChart.setOption({
                 yAxis: {
@@ -36,21 +64,30 @@ const fetchDataAndUpdate = (days: number) => {
                     data: chartData.map(item => item.value)
                 }]
             });
+            
+            // 数据更新后，重新调整图表尺寸
+            setTimeout(() => {
+                if (myChart) {
+                    myChart.resize();
+                }
+            }, 0);
         }
     }).catch(err => {
-        console.error('获取数据失败', err);
+        console.error(err);
     });
 };
 
 // 切换标签逻辑
 const switchTab = (tab: string) => {
     activeTab.value = tab;
-    // 根据标签切换天数（近一月=30天，近半年=180天）
     const days = tab === 'month' ? 30 : 180;
     fetchDataAndUpdate(days);
-    
-    // 切换标签后重新启动定时器
     startDataTimer();
+
+    // 重置滚动位置
+    if (chartContainerRef.value) {
+        chartContainerRef.value.scrollTop = 10;
+    }
 };
 
 // 开始数据定时器
@@ -58,7 +95,6 @@ const startDataTimer = () => {
     if (dataTimer) {
         clearInterval(dataTimer);
     }
-    // 每300秒（5分钟）更新一次数据
     dataTimer = setInterval(() => {
         const days = activeTab.value === 'month' ? 30 : 180;
         fetchDataAndUpdate(days);
@@ -76,23 +112,24 @@ const clearDataTimer = () => {
 // 初始化图表
 const initChart = () => {
     if (!chartRef.value) return;
-    
+
     myChart = echarts.init(chartRef.value);
     const option = {
         tooltip: {
             trigger: 'axis',
-            axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
+            axisPointer: { type: 'shadow' }
         },
         grid: {
             left: '5%',
-            right: '10%',
-            bottom: '3%',
-            top: '20%',
+            right: '5%',
+            bottom: '2%',
+            top: '12%',
             containLabel: true
         },
         yAxis: {
             type: 'category',
-            data: [], // 初始空数据
+            inverse: true, 
+            data: [],
             axisLine: {
                 lineStyle: {
                     color: '#1e3a8a',
@@ -100,26 +137,37 @@ const initChart = () => {
                 }
             },
             axisLabel: {
-                color: '#DEEFFF'
+                color: '#DEEFFF',
+                fontSize: 12
+            },
+            axisTick: {
+                alignWithLabel: true
             }
         },
         xAxis: {
             type: 'value',
             axisLine: { show: false },
             axisLabel: { show: false },
-            splitLine: { show: false }
+            splitLine: { 
+                show: true,
+                lineStyle: {
+                    color: 'rgba(30, 58, 138, 0.3)',
+                    type: 'dashed'
+                }
+            }
         },
         series: [{
             name: '使用频次',
             type: 'bar',
-            data: [], // 初始空数据
-            barWidth: '9px',
+            data: [],
+            barWidth: '12px',
             stack: 'total',
             label: {
                 show: true,
                 position: 'right',
                 valueAnimation: true,
-                color: '#DEEFFF'
+                color: '#DEEFFF',
+                fontSize: 11
             },
             itemStyle: {
                 color: new echarts.graphic.LinearGradient(
@@ -130,15 +178,14 @@ const initChart = () => {
                     ]
                 ),
                 borderRadius: 4
-            }
+            },
+            barGap: '30%',
+            barCategoryGap: '40%'
         }]
     };
     myChart.setOption(option);
-    
-    // 初始化数据
+
     fetchDataAndUpdate(30);
-    
-    // 启动定时器
     startDataTimer();
 };
 
@@ -155,11 +202,8 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-    // 清除定时器
     clearDataTimer();
-    // 移除事件监听
     window.removeEventListener('resize', handleResize);
-    // 销毁图表实例
     if (myChart) {
         myChart.dispose();
         myChart = null;
@@ -170,7 +214,8 @@ onUnmounted(() => {
 <style scoped lang="scss">
 .vchartPage {
     margin-top: 4.9vh;
-    position: relative; // 确保按钮定位正确
+    position: relative;
+    height: 100%;
 }
 
 .btn_mounth_box {
@@ -182,8 +227,8 @@ onUnmounted(() => {
 }
 
 .btn_mounth {
-    width:4.5vw;
-    height:4.5vh;
+    width: 4.5vw;
+    height: 4.5vh;
     background: url(@/assets/homeIndex/btn.png) no-repeat;
     background-size: 100% 100%;
     text-align: center;
@@ -191,7 +236,7 @@ onUnmounted(() => {
     color: #fff;
     font-size: 0.8vw;
     cursor: pointer;
-    margin-left: 0.5vw; // 按钮间距
+    margin-left: 0.5vw;
 }
 
 .cur {
@@ -199,8 +244,49 @@ onUnmounted(() => {
     background-size: 100% 100%;
 }
 
+.chartContainer {
+    width: 100%;
+    height: auto;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    position: relative;
+    // margin-top: 2vh;
+    transition: all 0.3s ease;
+
+    // 当需要显示滚动条时的样式
+    &.show-scroll {
+        height: 24vh;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: rgba(7, 104, 212, 0.8);
+            border-radius: 4px;
+            border: 2px solid transparent;
+            background-clip: content-box;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: rgba(7, 104, 212, 1);
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color: rgba(30, 58, 138, 0.1);
+            border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-track:hover {
+            background-color: rgba(30, 58, 138, 0.2);
+        }
+    }
+}
+
 .chartRef {
     width: 100%;
-    height: 25vh;
+    min-height: 100px;
+    box-sizing: border-box;
 }
 </style>
\ No newline at end of file