update

src/hooks/useLegendProcessor.ts

@@ -14,3 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { LegendOptions } from "@/types/dashboard";
+
+export default function useLegendProcess() {
+  function showEchartsLegend(keys: string[], legend?: LegendOptions) {
+    if (keys.length === 1) {
+      return false;
+    }
+    if (legend && legend.asTable) {
+      return false;
+    }
+    return true;
+  }
+  return { showEchartsLegend };
+}

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

@@ -14,14 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">{{ t("legendOptions") }}</span>
-    <span class="title mr-5">{{ t("asTable") }}</span>
+    <span class="label mr-5">{{ t("asTable") }}</span>
     <el-switch
       v-model="legend.asTable"
       active-text="Yes"
       inactive-text="No"
       @change="updateLegendConfig({ asTable: legend.asTable })"
     />
+  </div>
+  <div>
+    <span class="label">{{ t("legendOptions") }}</span>
     <span class="title ml-20 mr-5">{{ t("toTheRight") }}</span>
     <el-switch
       v-model="legend.toTheRight"

src/views/dashboard/graphs/Area.vue

@@ -44,7 +44,8 @@ defineProps({
       AreaConfig & {
         filters: Filters;
         relatedTrace: RelatedTrace;
-      } & { id: string }
+        id: string;
+      }
     >,
     default: () => ({}),
   },

src/views/dashboard/graphs/Bar.vue

@@ -27,6 +27,7 @@ import {
   RelatedTrace,
   Filters,
 } from "@/types/dashboard";
+import useLegendProcess from "@/hooks/useLegendProcessor";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -48,6 +49,7 @@ const props = defineProps({
     default: () => ({}),
   },
 });
+const { showEchartsLegend } = useLegendProcess();
 const option = computed(() => getOption());
 
 function getOption() {
@@ -118,7 +120,7 @@ function getOption() {
     },
     legend: {
       type: "scroll",
-      show: keys.length === 1 ? false : true,
+      show: showEchartsLegend(keys, props.config.legend),
       icon: "circle",
       top: 0,
       left: 0,

src/views/dashboard/graphs/Line.vue

@@ -33,6 +33,7 @@ import {
   Filters,
 } from "@/types/dashboard";
 import Legend from "./components/Legend.vue";
+import useLegendProcess from "@/hooks/useLegendProcessor";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -63,6 +64,7 @@ const props = defineProps({
     }),
   },
 });
+const { showEchartsLegend } = useLegendProcess();
 const option = computed(() => getOption());
 function getOption() {
   const keys = Object.keys(props.data || {}).filter(
@@ -156,7 +158,7 @@ function getOption() {
     tooltip: props.config.smallTips ? tips : tooltip,
     legend: {
       type: "scroll",
-      show: keys.length === 1 ? false : true,
+      show: showEchartsLegend(keys, props.config.legend),
       icon: "circle",
       top: 0,
       left: 0,