diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue
index 1b06c49632..974d57ff95 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue
@@ -19,7 +19,7 @@
     <div v-show="!msg">
       <div class="data-area" v-spin="isSpin" style="height: 430px;">
         <div class="col-md-7">
-          <div id="process-state-pie" style="height:260px;margin-top: 100px;"></div>
+          <div id="process-state-pie" style="width:100%;height:260px;margin-top: 100px;"></div>
         </div>
         <div class="col-md-5">
           <div class="table-small-model">
@@ -52,6 +52,8 @@
   import { mapActions } from 'vuex'
   import { pie } from './chartConfig'
   import Chart from '@/module/ana-charts'
+  import echarts from 'echarts'
+  import store from '@/conf/home/store'
   import mNoData from '@/module/components/noData/noData'
   import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
   export default {
@@ -87,7 +89,7 @@
             value: v.count
           }
         })
-        const myChart = Chart.pie('#process-state-pie', this.processStateList, { title: '' })
+        const myChart = Chart.pie('#process-state-pie', this.processStateList, { title: '' })  
         myChart.echart.setOption(pie)
         // 首页不允许跳转
         if (this.searchParams.projectId) {
@@ -112,6 +114,9 @@
             this.isSpin = false
           })
         }
+      },
+      '$store.state.projects.sideBar': function() {
+        echarts.init(document.getElementById('process-state-pie')).resize()
       }
     },
     beforeCreate () {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue
index 68aa997cc1..60e9413b2e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue
@@ -19,7 +19,7 @@
     <div v-show="!msg">
       <div class="data-area" v-spin="isSpin" style="height: 430px;">
         <div class="col-md-7">
-          <div id="task-status-pie" style="height:260px;margin-top: 100px;"></div>
+          <div id="task-status-pie" style="width:100%;height:260px;margin-top: 100px;"></div>
         </div>
         <div class="col-md-5">
           <div class="table-small-model">
@@ -54,6 +54,8 @@
   import { mapActions } from 'vuex'
   import { pie } from './chartConfig'
   import Chart from '@/module/ana-charts'
+  import echarts from 'echarts'
+  import store from '@/conf/home/store'
   import mNoData from '@/module/components/noData/noData'
   import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
 
@@ -117,6 +119,9 @@
             this.isSpin = false
           })
         }
+      },
+      '$store.state.projects.sideBar': function() {
+        echarts.init(document.getElementById('task-status-pie')).resize()
       }
     },
     beforeCreate () {
diff --git a/dolphinscheduler-ui/src/js/conf/home/store/projects/mutations.js b/dolphinscheduler-ui/src/js/conf/home/store/projects/mutations.js
index e84c864c3c..17e92fd258 100644
--- a/dolphinscheduler-ui/src/js/conf/home/store/projects/mutations.js
+++ b/dolphinscheduler-ui/src/js/conf/home/store/projects/mutations.js
@@ -16,4 +16,10 @@
  */
 
 export default {
+    /**
+   * set sideBar
+   * */
+  setSideBar (state, payload) {
+    state.sideBar = payload
+  },
 }
diff --git a/dolphinscheduler-ui/src/js/conf/home/store/projects/state.js b/dolphinscheduler-ui/src/js/conf/home/store/projects/state.js
index ddcb8e289d..40b7b38ddb 100644
--- a/dolphinscheduler-ui/src/js/conf/home/store/projects/state.js
+++ b/dolphinscheduler-ui/src/js/conf/home/store/projects/state.js
@@ -15,5 +15,5 @@
  * limitations under the License.
  */
 export default {
-
+    sideBar: 1
 }
diff --git a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
index 5336555c21..36050bb79d 100644
--- a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
+++ b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
@@ -55,7 +55,7 @@
 </template>
 <script>
   import menu from './_source/menu'
-
+  import store from '@/conf/home/store'
   export default {
     name: 'secondary-menu',
     data () {
@@ -85,8 +85,10 @@
         this.isTogHide = !this.isTogHide
         if(this.isTogHide) {
           sessionStorage.setItem('isLeft',0)
+          store.commit('projects/setSideBar',0)
         } else {
           sessionStorage.setItem('isLeft',1)
+          store.commit('projects/setSideBar',1)
         }
       }
     },