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;
   }