diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue
index 15cc343295bf8a6b109e341fd9a6f8cbb885236b..857b26ae9c710c85ed1caa0787c7eb8ae380c196 100644
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -56,6 +56,10 @@ export default {
       this.chart.setOption(
         {
           backgroundColor: '#08263a',
+          grid: {
+            left: '5%',
+            right: '5%'
+          },
           xAxis: [{
             show: false,
             data: xAxisData
diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue
index 9f56e613a5eddc55774b6061179bf1ef58777340..5d41b0220344127de2d34a13e84fdb9ef9d46ef9 100644
--- a/src/components/Charts/lineMarker.vue
+++ b/src/components/Charts/lineMarker.vue
@@ -80,8 +80,8 @@ export default {
         },
         grid: {
           top: 100,
-          left: '3%',
-          right: '4%',
+          left: '2%',
+          right: '2%',
           bottom: '2%',
           containLabel: true
         },
diff --git a/src/components/Charts/mixChart.vue b/src/components/Charts/mixChart.vue
index 40aee7a0874136221021b057dbd804d63b1e6ed1..a8e271ca62d2bad6c037623986802e619e5a9cf0 100644
--- a/src/components/Charts/mixChart.vue
+++ b/src/components/Charts/mixChart.vue
@@ -75,8 +75,10 @@ export default {
           }
         },
         grid: {
+          left: '5%',
+          right: '5%',
           borderWidth: 0,
-          top: 110,
+          top: 150,
           bottom: 95,
           textStyle: {
             color: '#fff'
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index 98087ab0f05763bea3f401d4bf039e47ed0c7bde..3ea21397c21fe631b88b3e8ea82508a6b4ba08dc 100644
--- a/src/views/charts/keyboard.vue
+++ b/src/views/charts/keyboard.vue
@@ -16,9 +16,8 @@ export default {
 <style scoped>
 .chart-container{
   position: relative;
-  padding: 20px;
   width: 100%;
-  height: 85vh;
+  height: calc(100vh - 84px);
 }
 </style>
 
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
index da0b5bbac01d92ac7337019906031ed17adc1b9d..2034d4c7c73260a0fe7b5bc303839dc837bf810c 100644
--- a/src/views/charts/line.vue
+++ b/src/views/charts/line.vue
@@ -16,9 +16,8 @@ export default {
 <style scoped>
 .chart-container{
   position: relative;
-  padding:20px;
   width: 100%;
-  height:85vh;
+  height: calc(100vh - 84px);
 }
 </style>
 
diff --git a/src/views/charts/mixChart.vue b/src/views/charts/mixChart.vue
index 568bae7b801d316d11c720fc10bf02bc118dcbf3..7ccc7fa07d96193c0835ffc283d86816d4a90250 100644
--- a/src/views/charts/mixChart.vue
+++ b/src/views/charts/mixChart.vue
@@ -16,9 +16,8 @@ export default {
 <style scoped>
 .chart-container{
   position: relative;
-  padding: 20px;
   width: 100%;
-  height:85vh;
+  height: calc(100vh - 84px);
 }
 </style>