From c86aae7b8b4728d73ccd98c1a368a18132baadf3 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 22 Dec 2021 09:53:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E9=A1=B5=E5=90=8C=E4=B8=80?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6=E5=BC=95=E5=85=A5=E5=A4=9A?=
 =?UTF-8?q?=E6=AC=A1=EF=BC=8C=E5=8F=AA=E6=98=BE=E7=A4=BA=E4=B8=80=E4=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReCharts/src/Bar.vue  | 18 +++++++++---------
 src/components/ReCharts/src/Line.vue | 18 +++++++++---------
 src/components/ReCharts/src/Pie.vue  | 18 +++++++++---------
 src/style/sidebar.scss               |  1 +
 4 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/components/ReCharts/src/Bar.vue b/src/components/ReCharts/src/Bar.vue
index b1fc75180..1a0869453 100644
--- a/src/components/ReCharts/src/Bar.vue
+++ b/src/components/ReCharts/src/Bar.vue
@@ -12,8 +12,15 @@ import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
 
 let echartInstance: ECharts;
 
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0
+  }
+});
+
 function initechartInstance() {
-  const echartDom = document.querySelector(".bar");
+  const echartDom = document.querySelector(".bar" + props.index);
   if (!echartDom) return;
   // @ts-ignore
   echartInstance = echarts.init(echartDom);
@@ -85,12 +92,5 @@ tryOnUnmounted(() => {
 </script>
 
 <template>
-  <div class="bar"></div>
+  <div :class="'bar' + props.index" style="width: 100%; height: 35vh"></div>
 </template>
-
-<style scoped>
-.bar {
-  width: 100%;
-  height: 35vh;
-}
-</style>
diff --git a/src/components/ReCharts/src/Line.vue b/src/components/ReCharts/src/Line.vue
index 1e510fb40..00662235d 100644
--- a/src/components/ReCharts/src/Line.vue
+++ b/src/components/ReCharts/src/Line.vue
@@ -12,8 +12,15 @@ import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
 
 let echartInstance: ECharts;
 
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0
+  }
+});
+
 function initechartInstance() {
-  const echartDom = document.querySelector(".line");
+  const echartDom = document.querySelector(".line" + props.index);
   if (!echartDom) return;
   // @ts-ignore
   echartInstance = echarts.init(echartDom);
@@ -73,12 +80,5 @@ tryOnUnmounted(() => {
 </script>
 
 <template>
-  <div class="line"></div>
+  <div :class="'line' + props.index" style="width: 100%; height: 35vh"></div>
 </template>
-
-<style scoped>
-.line {
-  width: 100%;
-  height: 35vh;
-}
-</style>
diff --git a/src/components/ReCharts/src/Pie.vue b/src/components/ReCharts/src/Pie.vue
index 0ae0ee8a9..cd802a617 100644
--- a/src/components/ReCharts/src/Pie.vue
+++ b/src/components/ReCharts/src/Pie.vue
@@ -12,8 +12,15 @@ import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
 
 let echartInstance: ECharts;
 
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0
+  }
+});
+
 function initechartInstance() {
-  const echartDom = document.querySelector(".pie");
+  const echartDom = document.querySelector(".pie" + props.index);
   if (!echartDom) return;
   // @ts-ignore
   echartInstance = echarts.init(echartDom);
@@ -76,12 +83,5 @@ tryOnUnmounted(() => {
 </script>
 
 <template>
-  <div class="pie"></div>
+  <div :class="'pie' + props.index" style="width: 100%; height: 35vh"></div>
 </template>
-
-<style scoped>
-.pie {
-  width: 100%;
-  height: 35vh;
-}
-</style>
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index da04ad711..691c73833 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -568,6 +568,7 @@
 body[layout="vertical"] {
   $sideBarWidth: 210px;
   @include merge-style($sideBarWidth);
+
   .el-menu--collapse {
     width: 54px;
   }