diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue
index 0e472613b..ab7edb8b0 100644
--- a/frontend/src/components/v-charts/components/Line.vue
+++ b/frontend/src/components/v-charts/components/Line.vue
@@ -23,6 +23,10 @@ const props = defineProps({
         type: String,
         default: 'line',
     },
+    dataZoom: {
+        type: Boolean,
+        default: false,
+    },
     option: {
         type: Object,
         required: true,
@@ -37,13 +41,56 @@ function initChart() {
     }
 
     const theme = globalStore.$state.themeConfig.theme || 'light';
+
+    const series = [];
+    if (props.option?.yDatas?.length) {
+        series.push({
+            name: props.option?.yDatas[0]?.name,
+            type: 'line',
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgba(0, 94, 235, .5)',
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(0, 94, 235, 0)',
+                    },
+                ]),
+            },
+            data: props.option?.yDatas[0]?.data,
+            showSymbol: false,
+        });
+        if (props.option?.yDatas?.length > 1) {
+            series.push({
+                name: props.option?.yDatas[1]?.name,
+                type: 'line',
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(27, 143, 60, .5)',
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(27, 143, 60, 0)',
+                        },
+                    ]),
+                },
+                data: props.option?.yDatas[1]?.data,
+                showSymbol: false,
+            });
+        }
+    }
+
     // 把配置和数据放这里
     const option = {
         title: [
             {
                 left: 'center',
                 text: props.option.title,
-                show: false,
+                show: props.option.title,
             },
         ],
         zlevel: 1,
@@ -60,7 +107,6 @@ function initChart() {
         },
         grid: { left: '7%', right: '7%', bottom: '20%' },
         legend: {
-            data: [props.option?.yDatas[0]?.name, props.option?.yDatas[1]?.name],
             right: 10,
             itemWidth: 8,
             textStyle: {
@@ -79,45 +125,8 @@ function initChart() {
                 },
             },
         },
-        series: [
-            {
-                name: props.option?.yDatas[0]?.name,
-                type: 'line',
-                areaStyle: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        {
-                            offset: 0,
-                            color: 'rgba(0, 94, 235, .5)',
-                        },
-                        {
-                            offset: 1,
-                            color: 'rgba(0, 94, 235, 0)',
-                        },
-                    ]),
-                },
-                data: props.option?.yDatas[0]?.data,
-                showSymbol: false,
-            },
-            {
-                name: props.option?.yDatas[1]?.name,
-                type: 'line',
-                areaStyle: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        {
-                            offset: 0,
-                            color: 'rgba(27, 143, 60, .5)',
-                        },
-                        {
-                            offset: 1,
-                            color: 'rgba(27, 143, 60, 0)',
-                        },
-                    ]),
-                },
-                data: props.option?.yDatas[1]?.data,
-                showSymbol: false,
-            },
-        ],
-        dataZoom: [{ startValue: props?.option.xDatas[0] }],
+        series: series,
+        dataZoom: [{ startValue: props?.option.xDatas[0], show: props.dataZoom }],
     };
     // 渲染数据
     itemChart.setOption(option, true);
diff --git a/frontend/src/components/v-charts/index.vue b/frontend/src/components/v-charts/index.vue
index 49adefb54..59b2ad978 100644
--- a/frontend/src/components/v-charts/index.vue
+++ b/frontend/src/components/v-charts/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <component :is="typeComponentMap[type]" :height="height" :option="option" />
+    <component :is="typeComponentMap[type]" :height="height" :option="option" :dataZoom="dataZoom" />
 </template>
 <script lang="ts" setup>
 import line from './components/Line.vue';
@@ -13,6 +13,7 @@ defineProps({
         type: String,
         default: '200px',
     },
+    dataZoom: Boolean,
     option: {
         type: Object,
         required: true,
diff --git a/frontend/src/views/container/container/monitor/index.vue b/frontend/src/views/container/container/monitor/index.vue
index 0608590da..3e38b4a77 100644
--- a/frontend/src/views/container/container/monitor/index.vue
+++ b/frontend/src/views/container/container/monitor/index.vue
@@ -16,16 +16,44 @@
             </el-form-item>
         </el-form>
         <el-card>
-            <div id="cpuChart" style="width: 100%; height: 200px"></div>
+            <v-charts
+                height="200px"
+                id="cpuChart"
+                type="line"
+                :option="chartsOption['cpuChart']"
+                v-if="chartsOption['cpuChart']"
+            />
+            <!-- <div id="cpuChart" style="width: 100%; height: 200px"></div> -->
         </el-card>
         <el-card style="margin-top: 10px">
-            <div id="memoryChart" style="width: 100%; height: 200px"></div>
+            <v-charts
+                height="200px"
+                id="memoryChart"
+                type="line"
+                :option="chartsOption['memoryChart']"
+                v-if="chartsOption['memoryChart']"
+            />
+            <!-- <div id="memoryChart" style="width: 100%; height: 200px"></div> -->
         </el-card>
         <el-card style="margin-top: 10px">
-            <div id="ioChart" style="width: 100%; height: 200px"></div>
+            <v-charts
+                height="200px"
+                id="ioChart"
+                type="line"
+                :option="chartsOption['ioChart']"
+                v-if="chartsOption['ioChart']"
+            />
+            <!-- <div id="ioChart" style="width: 100%; height: 200px"></div> -->
         </el-card>
         <el-card style="margin-top: 10px">
-            <div id="networkChart" style="width: 100%; height: 200px"></div>
+            <v-charts
+                height="200px"
+                id="networkChart"
+                type="line"
+                :option="chartsOption['networkChart']"
+                v-if="chartsOption['networkChart']"
+            />
+            <!-- <div id="networkChart" style="width: 100%; height: 200px"></div> -->
         </el-card>
     </el-drawer>
 </template>
@@ -34,7 +62,8 @@
 import { ref } from 'vue';
 import { ContainerStats } from '@/api/modules/container';
 import { dateFormatForSecond } from '@/utils/util';
-import * as echarts from 'echarts';
+import VCharts from '@/components/v-charts/index.vue';
+// import * as echarts from 'echarts';
 import i18n from '@/lang';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 
@@ -49,12 +78,12 @@ const dialogData = ref<DialogProps>({
     containerID: '',
 });
 
-function changeChartSize() {
-    echarts.getInstanceByDom(document.getElementById('cpuChart') as HTMLElement)?.resize();
-    echarts.getInstanceByDom(document.getElementById('memoryChart') as HTMLElement)?.resize();
-    echarts.getInstanceByDom(document.getElementById('ioChart') as HTMLElement)?.resize();
-    echarts.getInstanceByDom(document.getElementById('networkChart') as HTMLElement)?.resize();
-}
+// function changeChartSize() {
+//     echarts.getInstanceByDom(document.getElementById('cpuChart') as HTMLElement)?.resize();
+//     echarts.getInstanceByDom(document.getElementById('memoryChart') as HTMLElement)?.resize();
+//     echarts.getInstanceByDom(document.getElementById('ioChart') as HTMLElement)?.resize();
+//     echarts.getInstanceByDom(document.getElementById('networkChart') as HTMLElement)?.resize();
+// }
 const acceptParams = async (params: DialogProps): Promise<void> => {
     monitorVisiable.value = true;
     dialogData.value.containerID = params.containerID;
@@ -69,7 +98,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
     timeInterval.value = 5;
     isInit.value = true;
     loadData();
-    window.addEventListener('resize', changeChartSize);
+    // window.addEventListener('resize', changeChartSize);
     timer = setInterval(async () => {
         if (monitorVisiable.value) {
             isInit.value = false;
@@ -86,6 +115,7 @@ const ioWriteDatas = ref<Array<string>>([]);
 const netTxDatas = ref<Array<string>>([]);
 const netRxDatas = ref<Array<string>>([]);
 const timeDatas = ref<Array<string>>([]);
+const chartsOption = ref({ cpuChart: null, memoryChart: null, ioChart: null, networkChart: null });
 
 const changeTimer = () => {
     clearInterval(Number(timer));
@@ -131,140 +161,199 @@ const loadData = async () => {
         timeDatas.value.splice(0, 1);
     }
 
-    let cpuYDatas = {
-        name: 'CPU',
-        type: 'line',
-        areaStyle: {
-            color: '#ebdee3',
-        },
-        data: cpuDatas.value,
-        showSymbol: false,
-    };
-    freshChart('cpuChart', ['CPU'], timeDatas.value, [cpuYDatas], 'CPU', '%');
-
-    let memoryYDatas = {
-        name: i18n.global.t('monitor.memory'),
-        type: 'line',
-        areaStyle: {
-            color: '#ebdee3',
-        },
-        data: memDatas.value,
-        showSymbol: false,
-    };
-    let cacheYDatas = {
-        name: i18n.global.t('container.cache'),
-        type: 'line',
-        areaStyle: {
-            color: '#ebdee3',
-        },
-        data: cacheDatas.value,
-        showSymbol: false,
-    };
-    freshChart(
-        'memoryChart',
-        [i18n.global.t('monitor.memory'), i18n.global.t('monitor.cache')],
-        timeDatas.value,
-        [memoryYDatas, cacheYDatas],
-        i18n.global.t('monitor.memory'),
-        ' MB',
-    );
-
-    let ioReadYDatas = {
-        name: i18n.global.t('monitor.read'),
-        type: 'line',
-        areaStyle: {
-            color: '#ebdee3',
-        },
-        data: ioReadDatas.value,
-        showSymbol: false,
-    };
-    let ioWriteYDatas = {
-        name: i18n.global.t('monitor.write'),
-        type: 'line',
-        areaStyle: {
-            color: '#ebdee3',
-        },
-        data: ioWriteDatas.value,
-        showSymbol: false,
-    };
-    freshChart(
-        'ioChart',
-        [i18n.global.t('monitor.read'), i18n.global.t('monitor.write')],
-        timeDatas.value,
-        [ioReadYDatas, ioWriteYDatas],
-        i18n.global.t('monitor.disk') + ' IO',
-        'MB',
-    );
-
-    let netTxYDatas = {
-        name: i18n.global.t('monitor.up'),
-        type: 'line',
-        areaStyle: {
-            color: '#ebdee3',
-        },
-        data: netTxDatas.value,
-        showSymbol: false,
-    };
-    let netRxYDatas = {
-        name: i18n.global.t('monitor.down'),
-        type: 'line',
-        areaStyle: {
-            color: '#ebdee3',
-        },
-        data: netRxDatas.value,
-        showSymbol: false,
-    };
-    freshChart(
-        'networkChart',
-        [i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
-        timeDatas.value,
-        [netTxYDatas, netRxYDatas],
-        i18n.global.t('monitor.network'),
-        'KB/s',
-    );
-};
-
-function freshChart(chartName: string, legendDatas: any, xDatas: any, yDatas: any, yTitle: string, formatStr: string) {
-    if (isInit.value) {
-        echarts.init(document.getElementById(chartName) as HTMLElement);
-    }
-    let itemChart = echarts.getInstanceByDom(document.getElementById(chartName) as HTMLElement);
-    const option = {
-        title: [
+    chartsOption.value['cpuChart'] = {
+        title: 'CPU',
+        xDatas: timeDatas.value,
+        yDatas: [
             {
-                left: 'center',
-                text: yTitle,
+                name: 'CPU',
+                data: cpuDatas.value,
             },
         ],
-        zlevel: 1,
-        z: 1,
-        tooltip: {
-            trigger: 'axis',
-            formatter: function (datas: any) {
-                let res = datas[0].name + '<br/>';
-                for (const item of datas) {
-                    res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
-                }
-                return res;
-            },
-        },
-        grid: { left: '7%', right: '7%', bottom: '20%' },
-        legend: {
-            data: legendDatas,
-            right: 10,
-        },
-        xAxis: { data: xDatas, boundaryGap: false },
-        yAxis: { name: '( ' + formatStr + ' )' },
-        series: yDatas,
+        formatStr: '%',
     };
-    itemChart?.setOption(option, true);
-}
+
+    chartsOption.value['memoryChart'] = {
+        title: i18n.global.t('monitor.memory'),
+        xDatas: timeDatas.value,
+        yDatas: [
+            {
+                name: i18n.global.t('monitor.memory'),
+                data: memDatas.value,
+            },
+            {
+                name: i18n.global.t('container.cache'),
+                data: cacheDatas.value,
+            },
+        ],
+        formatStr: 'MB',
+    };
+
+    chartsOption.value['ioChart'] = {
+        title: i18n.global.t('monitor.disk') + ' IO',
+        xDatas: timeDatas.value,
+        yDatas: [
+            {
+                name: i18n.global.t('monitor.read'),
+                data: ioReadDatas.value,
+            },
+            {
+                name: i18n.global.t('monitor.write'),
+                data: ioWriteDatas.value,
+            },
+        ],
+        formatStr: 'MB',
+    };
+
+    chartsOption.value['networkChart'] = {
+        title: i18n.global.t('monitor.network'),
+        xDatas: timeDatas.value,
+        yDatas: [
+            {
+                name: i18n.global.t('monitor.up'),
+                data: netTxDatas.value,
+            },
+            {
+                name: i18n.global.t('monitor.down'),
+                data: netRxDatas.value,
+            },
+        ],
+        formatStr: 'KB/s',
+    };
+    // let cpuYDatas = {
+    //     name: 'CPU',
+    //     type: 'line',
+    //     areaStyle: {
+    //         color: '#ebdee3',
+    //     },
+    //     data: cpuDatas.value,
+    //     showSymbol: false,
+    // };
+    // freshChart('cpuChart', ['CPU'], timeDatas.value, [cpuYDatas], 'CPU', '%');
+
+    // let memoryYDatas = {
+    //     name: i18n.global.t('monitor.memory'),
+    //     type: 'line',
+    //     areaStyle: {
+    //         color: '#ebdee3',
+    //     },
+    //     data: memDatas.value,
+    //     showSymbol: false,
+    // };
+    // let cacheYDatas = {
+    //     name: i18n.global.t('container.cache'),
+    //     type: 'line',
+    //     areaStyle: {
+    //         color: '#ebdee3',
+    //     },
+    //     data: cacheDatas.value,
+    //     showSymbol: false,
+    // };
+    // freshChart(
+    //     'memoryChart',
+    //     [i18n.global.t('monitor.memory'), i18n.global.t('monitor.cache')],
+    //     timeDatas.value,
+    //     [memoryYDatas, cacheYDatas],
+    //     i18n.global.t('monitor.memory'),
+    //     ' MB',
+    // );
+
+    // let ioReadYDatas = {
+    //     name: i18n.global.t('monitor.read'),
+    //     type: 'line',
+    //     areaStyle: {
+    //         color: '#ebdee3',
+    //     },
+    //     data: ioReadDatas.value,
+    //     showSymbol: false,
+    // };
+    // let ioWriteYDatas = {
+    //     name: i18n.global.t('monitor.write'),
+    //     type: 'line',
+    //     areaStyle: {
+    //         color: '#ebdee3',
+    //     },
+    //     data: ioWriteDatas.value,
+    //     showSymbol: false,
+    // };
+    // freshChart(
+    //     'ioChart',
+    //     [i18n.global.t('monitor.read'), i18n.global.t('monitor.write')],
+    //     timeDatas.value,
+    //     [ioReadYDatas, ioWriteYDatas],
+    //     i18n.global.t('monitor.disk') + ' IO',
+    //     'MB',
+    // );
+
+    // let netTxYDatas = {
+    //     name: i18n.global.t('monitor.up'),
+    //     type: 'line',
+    //     areaStyle: {
+    //         color: '#ebdee3',
+    //     },
+    //     data: netTxDatas.value,
+    //     showSymbol: false,
+    // };
+    // let netRxYDatas = {
+    //     name: i18n.global.t('monitor.down'),
+    //     type: 'line',
+    //     areaStyle: {
+    //         color: '#ebdee3',
+    //     },
+    //     data: netRxDatas.value,
+    //     showSymbol: false,
+    // };
+    // freshChart(
+    //     'networkChart',
+    //     [i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
+    //     timeDatas.value,
+    //     [netTxYDatas, netRxYDatas],
+    //     i18n.global.t('monitor.network'),
+    //     'KB/s',
+    // );
+};
+
+// function freshChart(chartName: string, legendDatas: any, xDatas: any, yDatas: any, yTitle: string, formatStr: string) {
+//     if (isInit.value) {
+//         echarts.init(document.getElementById(chartName) as HTMLElement);
+//     }
+//     let itemChart = echarts.getInstanceByDom(document.getElementById(chartName) as HTMLElement);
+//     const option = {
+//         title: [
+//             {
+//                 left: 'center',
+//                 text: yTitle,
+//             },
+//         ],
+//         zlevel: 1,
+//         z: 1,
+//         tooltip: {
+//             trigger: 'axis',
+//             formatter: function (datas: any) {
+//                 let res = datas[0].name + '<br/>';
+//                 for (const item of datas) {
+//                     res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
+//                 }
+//                 return res;
+//             },
+//         },
+//         grid: { left: '7%', right: '7%', bottom: '20%' },
+//         legend: {
+//             data: legendDatas,
+//             right: 10,
+//         },
+//         xAxis: { data: xDatas, boundaryGap: false },
+//         yAxis: { name: '( ' + formatStr + ' )' },
+//         series: yDatas,
+//     };
+//     itemChart?.setOption(option, true);
+// }
 
 const handleClose = async () => {
     monitorVisiable.value = false;
     clearInterval(Number(timer));
     timer = null;
-    window.removeEventListener('resize', changeChartSize);
+    // window.removeEventListener('resize', changeChartSize);
 };
 
 defineExpose({
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 4f6c5dfaa..7750214f2 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -111,16 +111,20 @@
                                 <v-charts
                                     height="300px"
                                     id="ioChart"
+                                    type="line"
                                     :option="chartsOption['ioChart']"
                                     v-if="chartsOption['ioChart']"
+                                    :dataZoom="true"
                                 />
                             </div>
                             <div v-if="chartOption === 'network'" style="margin-top: 40px">
                                 <v-charts
                                     height="300px"
                                     id="networkChart"
+                                    type="line"
                                     :option="chartsOption['networkChart']"
                                     v-if="chartsOption['networkChart']"
+                                    :dataZoom="true"
                                 />
                             </div>
                         </div>
@@ -446,20 +450,19 @@ function loadUpTime(uptime: number) {
 
 const loadData = async () => {
     if (chartOption.value === 'io') {
-        const yDatas = [
-            {
-                name: i18n.global.t('monitor.read'),
-                data: ioReadBytes.value,
-            },
-            {
-                name: i18n.global.t('monitor.write'),
-                data: ioWriteBytes.value,
-            },
-        ];
         chartsOption.value['ioChart'] = {
-            title: i18n.global.t('home.io'),
+            // title: i18n.global.t('home.io'),
             xDatas: timeIODatas.value,
-            yDatas: yDatas,
+            yDatas: [
+                {
+                    name: i18n.global.t('monitor.read'),
+                    data: ioReadBytes.value,
+                },
+                {
+                    name: i18n.global.t('monitor.write'),
+                    data: ioWriteBytes.value,
+                },
+            ],
             formatStr: 'MB',
         };
 
@@ -508,20 +511,19 @@ const loadData = async () => {
         //     'MB',
         // );
     } else {
-        const yDatas = [
-            {
-                name: i18n.global.t('monitor.up'),
-                data: netBytesRecvs.value,
-            },
-            {
-                name: i18n.global.t('monitor.down'),
-                data: netBytesSents.value,
-            },
-        ];
         chartsOption.value['networkChart'] = {
-            title: i18n.global.t('home.network'),
+            // title: i18n.global.t('home.network'),
             xDatas: timeNetDatas.value,
-            yDatas: yDatas,
+            yDatas: [
+                {
+                    name: i18n.global.t('monitor.up'),
+                    data: netBytesRecvs.value,
+                },
+                {
+                    name: i18n.global.t('monitor.down'),
+                    data: netBytesSents.value,
+                },
+            ],
             formatStr: 'KB/s',
         };
         // let netTxYDatas = {