diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index f3fbff6d..45c2b100 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div
-    v-if="isRight"
+    v-if="available"
     ref="chartRef"
     :style="`height:${height};width:${width};`"
   ></div>
-  <div v-else>No Data</div>
+  <div v-else class="no-data">No Data</div>
 </template>
 <script lang="ts" setup>
 import {
@@ -48,12 +48,11 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const isRight = computed(
+const available = computed(
   () =>
     props.option.series && props.option.series[0] && props.option.series[0].data
 );
 onMounted(async () => {
-  console.log(props.option);
   await setOptions(props.option);
   chartRef.value && addResizeListener(unref(chartRef), resize);
   setTimeout(() => {
@@ -82,3 +81,14 @@ onBeforeUnmount(() => {
   removeResizeListener(unref(chartRef), resize);
 });
 </script>
+<style lang="scss" scoped>
+.no-data {
+  font-size: 12px;
+  height: 100%;
+  box-sizing: border-box;
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+}
+</style>
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index a3c2e802..2c33eaf0 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -25,7 +25,7 @@ limitations under the License. -->
       {{ metricConfig[0]?.unit }}
     </span>
   </div>
-  <div class="center chart-card" v-else>No Data</div>
+  <div class="center no-data" v-else>No Data</div>
 </template>
 <script lang="ts" setup>
 import { computed, PropType } from "vue";
@@ -64,4 +64,9 @@ const singleVal = computed(() => Number(props.data[key.value]));
   -webkit-box-pack: center;
   -webkit-box-align: center;
 }
+
+.no-data {
+  height: 100%;
+  color: #666;
+}
 </style>
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 0b2fc18e..1efebfc0 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="top-list">
+  <div class="top-list" v-if="available">
     <div class="chart-slow-i" v-for="(i, index) in data[key]" :key="index">
       <div class="ell tools flex-h">
         <div>
@@ -40,6 +40,7 @@ limitations under the License. -->
       />
     </div>
   </div>
+  <div class="center no-data" v-else>No Data</div>
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
@@ -61,6 +62,9 @@ const props = defineProps({
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
 const key = computed(() => Object.keys(props.data)[0] || "");
+const available = computed(
+  () => Array.isArray(props.data[key.value]) && props.data[key.value][0].value
+);
 const maxValue = computed(() => {
   if (!(props.data[key.value] && props.data[key.value].length)) {
     return 0;
@@ -114,4 +118,14 @@ function handleClick(i: string) {
   will-change: opacity, background-color;
   transition: opacity 0.3s, background-color 0.3s;
 }
+
+.no-data {
+  height: 100%;
+  color: #666;
+  box-sizing: border-box;
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+}
 </style>