diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts
index 95cfd436..9acdd5c8 100644
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { LegendOptions } from "@/types/dashboard";
-import { isUnDef } from "@/utils/is";
+import { isDef } from "@/utils/is";
 
 export default function useLegendProcess(legend?: LegendOptions) {
   let isRight = false;
@@ -23,7 +23,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
     isRight = true;
   }
   function showEchartsLegend(keys: string[]) {
-    if (legend && isUnDef(legend.show)) {
+    if (legend && isDef(legend.show)) {
       if (legend.asTable && legend.show) {
         return false;
       }
diff --git a/src/utils/is.ts b/src/utils/is.ts
index 09528f8e..5f1be52f 100644
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@@ -21,7 +21,7 @@ export function is(val: unknown, type: string): boolean {
 }
 
 export function isDef<T = unknown>(val?: T): val is T {
-  return typeof val === "undefined";
+  return typeof val !== "undefined";
 }
 
 export function isUnDef<T = unknown>(val?: T): val is T {
diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
index 3cfc68da..9efea04c 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
@@ -23,15 +23,17 @@ limitations under the License. -->
     />
   </div>
   <div>
-    <span class="label">{{ t("legendOptions") }}</span>
-    <span class="title mr-5">{{ t("asTable") }}</span>
+    <span class="label">{{ t("asTable") }}</span>
     <el-switch
       v-model="legend.asTable"
       active-text="Yes"
       inactive-text="No"
       @change="updateLegendConfig({ asTable: legend.asTable })"
     />
-    <span class="title ml-20 mr-5">{{ t("toTheRight") }}</span>
+  </div>
+  <div v-show="legend.asTable">
+    <span class="label">{{ t("legendOptions") }}</span>
+    <span class="title mr-5">{{ t("toTheRight") }}</span>
     <el-switch
       v-model="legend.toTheRight"
       active-text="Yes"
@@ -47,7 +49,7 @@ limitations under the License. -->
       @change="updateLegendConfig({ width: legend.width })"
     />
   </div>
-  <div>
+  <div v-show="legend.asTable">
     <span class="label">{{ t("legendValues") }}</span>
     <span class="title mr-5">{{ t("min") }}</span>
     <el-switch