fix

src/hooks/useLegendProcessor.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import { LegendOptions } from "@/types/dashboard";
+import { isUnDef } from "@/utils/is";
 
 export default function useLegendProcess(legend?: LegendOptions) {
   let isRight = false;
@@ -22,7 +23,10 @@ export default function useLegendProcess(legend?: LegendOptions) {
     isRight = true;
   }
   function showEchartsLegend(keys: string[]) {
-    if (legend && !legend.show === undefined) {
+    if (legend && isUnDef(legend.show)) {
+      if (legend.asTable && legend.show) {
+        return false;
+      }
       return legend.show;
     }
     if (keys.length === 1) {

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 {

src/views/dashboard/configuration/Widget.vue

@@ -32,6 +32,7 @@ limitations under the License. -->
           :data="states.source"
           :config="{
             ...graph,
+            legend: (dashboardStore.selectedGrid.graph || {}).legend,
             i: dashboardStore.selectedGrid.i,
             metrics: dashboardStore.selectedGrid.metrics,
             metricTypes: dashboardStore.selectedGrid.metricTypes,

src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue

@@ -24,7 +24,7 @@ limitations under the License. -->
   </div>
   <div>
     <span class="label">{{ t("legendOptions") }}</span>
-    <span class="label mr-5">{{ t("asTable") }}</span>
+    <span class="title mr-5">{{ t("asTable") }}</span>
     <el-switch
       v-model="legend.asTable"
       active-text="Yes"
@@ -108,7 +108,10 @@ function updateLegendConfig(param: { [key: string]: unknown }) {
       ...param,
     },
   };
-  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, g });
+  dashboardStore.selectWidget({
+    ...dashboardStore.selectedGrid,
+    graph: g,
+  });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/graphs/Line.vue

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="graph flex-v" :class="isRight ? 'flex-h' : 'flex-v'">
+  <div class="graph flex-v" :class="setRight ? 'flex-h' : 'flex-v'">
     <Graph
       :option="option"
       @select="clickEvent"
@@ -24,7 +24,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import type { PropType } from "vue";
 import {
   LineConfig,
@@ -64,11 +64,13 @@ const props = defineProps({
     }),
   },
 });
-const { showEchartsLegend, isRight, chartColors } = useLegendProcess(
-  props.config.legend
-);
+const setRight = ref<boolean>(false);
 const option = computed(() => getOption());
 function getOption() {
+  const { showEchartsLegend, isRight, chartColors } = useLegendProcess(
+    props.config.legend
+  );
+  setRight.value = isRight;
   const keys = Object.keys(props.data || {}).filter(
     (i: any) => Array.isArray(props.data[i]) && props.data[i].length
   );