From c18b0507af41ea53bf0924dccbf6c39e858fd33f Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 22 Mar 2022 10:37:40 +0800
Subject: [PATCH] set default length

---
 .../dashboard/configuration/widget/MetricOptions.vue   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/views/dashboard/configuration/widget/MetricOptions.vue b/src/views/dashboard/configuration/widget/MetricOptions.vue
index d41a402b..12d71203 100644
--- a/src/views/dashboard/configuration/widget/MetricOptions.vue
+++ b/src/views/dashboard/configuration/widget/MetricOptions.vue
@@ -53,8 +53,9 @@ limitations under the License. -->
     >
       <Icon
         class="cp mr-5"
-        v-show="
-          index === states.metrics.length - 1 && states.metrics.length < 5
+        v-if="
+          index === states.metrics.length - 1 &&
+          states.metrics.length < defaultLen
         "
         iconName="add_circle_outlinecontrol_point"
         size="middle"
@@ -84,7 +85,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import { Option } from "@/types/app";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import {
@@ -128,6 +129,7 @@ const states = reactive<{
 });
 
 states.isList = ListChartTypes.includes(graph.type);
+const defaultLen = ref<number>(states.isList ? 5 : 10);
 states.visTypes = setVisTypes();
 
 setDashboards();
@@ -241,10 +243,12 @@ function changeChartType(item: Option) {
     });
     states.metrics = [""];
     states.metricTypes = [""];
+    defaultLen.value = 5;
   }
   setMetricType();
   setDashboards();
   states.dashboardName = "";
+  defaultLen.value = 10;
 }
 
 function changeMetrics(