From a56c6c188d6bfd4a0bd767befaaae6faaa9106cf Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 7 Nov 2022 16:36:27 +0800
Subject: [PATCH] set position with configs

---
 src/hooks/useLegendProcessor.ts     | 12 +++++++++---
 src/views/dashboard/graphs/Bar.vue  |  4 ++--
 src/views/dashboard/graphs/Line.vue |  7 ++++---
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts
index 95688ec4..e2ee48ee 100644
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@@ -16,8 +16,8 @@
  */
 import { LegendOptions } from "@/types/dashboard";
 
-export default function useLegendProcess() {
-  function showEchartsLegend(keys: string[], legend?: LegendOptions) {
+export default function useLegendProcess(legend?: LegendOptions) {
+  function showEchartsLegend(keys: string[]) {
     if (legend && !legend.show === undefined) {
       return legend.show;
     }
@@ -29,5 +29,11 @@ export default function useLegendProcess() {
     }
     return true;
   }
-  return { showEchartsLegend };
+  function isRight() {
+    if (legend && legend.toTheRight) {
+      return true;
+    }
+    return false;
+  }
+  return { showEchartsLegend, isRight };
 }
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 2a120cc5..48efdf92 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -49,7 +49,7 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const { showEchartsLegend } = useLegendProcess();
+const { showEchartsLegend } = useLegendProcess(props.config.legend);
 const option = computed(() => getOption());
 
 function getOption() {
@@ -120,7 +120,7 @@ function getOption() {
     },
     legend: {
       type: "scroll",
-      show: showEchartsLegend(keys, props.config.legend),
+      show: showEchartsLegend(keys),
       icon: "circle",
       top: 0,
       left: 0,
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 77fbd0c4..f0e68237 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/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">
+  <div class="graph flex-v" :class="toTheRight ? 'flex-h' : 'flex-v'">
     <Graph
       :option="option"
       @select="clickEvent"
@@ -64,7 +64,8 @@ const props = defineProps({
     }),
   },
 });
-const { showEchartsLegend } = useLegendProcess();
+const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
+const toTheRight = computed(() => isRight());
 const option = computed(() => getOption());
 function getOption() {
   const keys = Object.keys(props.data || {}).filter(
@@ -158,7 +159,7 @@ function getOption() {
     tooltip: props.config.smallTips ? tips : tooltip,
     legend: {
       type: "scroll",
-      show: showEchartsLegend(keys, props.config.legend),
+      show: showEchartsLegend(keys),
       icon: "circle",
       top: 0,
       left: 0,