diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index 3b12feef..8e2d59d4 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -43,7 +43,7 @@ const line = {
   grid: {
     left: 55,
     bottom: 30,
-    top: 40,
+    top: 100,
     right: 25
   },
   color: chartColor,
@@ -55,12 +55,13 @@ const line = {
     show: true,
     right: 23,
     top: 8,
+    padding: 2,
     orient: 'horizontal',
     icon: 'circle',
-    itemGap: 20,
+    itemGap: 10,
     itemWidth: 10,
     textStyle: {
-      padding: [0, 0, 0, 5],
+      padding: [0, 0, 0, 2],
       fontSize: 14
     },
     formatter: tooLongFormatter
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 182c37be..603bac31 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -568,6 +568,9 @@ export default {
               data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType])
             }
           })
+          const rows = (response.data.result.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
+          const gridTop = 10 + 27 * rows
+          this.chartOption.grid.top = gridTop
           if (chartParams.unitType === unitTypes.byte) {
             this.chartOption.yAxis.axisLabel.formatter = function (value, index, a, b) {
               return unitConvert(value, unitTypes.byte).join(' ')