解决echart问题

src/components/echarts.vue

@@ -3,7 +3,11 @@
 -->
 <!-- https://blog.csdn.net/zyz13883658166/article/details/124430938 -->
 <template>
-  <div :id="uuid" class="echarts" :style="style"></div>
+  <div>
+    <!-- <div>{{mid}}</div> -->
+    <div :id="mid" class="echarts" :style="style"></div>
+  </div>
+  
 </template>
 <script>
 import * as echarts from "echarts";
@@ -25,6 +29,10 @@ export default {
       type: Object,
       default: null,
     },
+    mid: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
@@ -67,14 +75,20 @@ export default {
     },
   },
   methods: {
-    intChar(){
-      console.log('intChar');
+    intChar(charUuid){
+      console.log('intChar charUuid',charUuid);
+      // console.log('this.uuid 前',this.uuid);
+      // // this.uuid = idGen();
+      // console.log('this.uuid 后',this.uuid);
+      echarts.init(document.getElementById(charUuid)).clear();
+      this.myChart = echarts.init(document.getElementById(charUuid));
+      this.myChart.setOption(this.option);
     }
   },
   mounted() {
     console.log('echarts mounted');
     // echarts.init(document.getElementById('echarts')).dispose();//销毁前一个实例
-    this.myChart = echarts.init(document.getElementById(this.uuid));
+    this.myChart = echarts.init(document.getElementById(this.mid));
     this.myChart.setOption(this.option);
   },
 };

src/views/index.vue

@@ -16,13 +16,13 @@
 
     <section class="left-wrap " v-if="page==1">
       <Numerical class="blur-wrap" :data="page1numerical" />
-      <MyEcharts class="blur-wrap u-p-t" :option="page1Char1" height="30vh" />
-      <MyEcharts class="blur-wrap u-m-t u-p-t" :option="page1Char2" height="30vh" />
+      <MyEcharts class="blur-wrap u-p-t" mid="page1Char1" ref="page1Char1" :option="page1Char1" height="30vh" />
+      <MyEcharts class="blur-wrap u-m-t u-p-t" mid="page1Char2" ref="page1Char2" :option="page1Char2" height="30vh" />
     </section>
 
     <section class="left-wrap " v-if="page==2">
-      <MyEcharts class="blur-wrap u-p-t" :option="page2Char1" ref="page2Char1" height="30vh" />
-      <MyEcharts class="blur-wrap u-m-t u-p-t" :option="page2Char2" height="40vh" />
+      <MyEcharts class="blur-wrap u-p-t" mid="page2Char1" :option="page2Char1" ref="page2Char1" height="30vh" />
+      <MyEcharts class="blur-wrap u-m-t u-p-t" mid="page2Char2" :option="page2Char2" ref="page2Char2" height="40vh" />
     </section>
 
     <section class="left-wrap " v-if="page==5">
@@ -198,17 +198,21 @@
       getPage1echarts01(){
         page1echarts01().then(res=>{
           // console.log('res',res);
+          let charUuid = this.$refs.page1Char1.mid;
+          this.$refs.page1Char1.intChar(charUuid)
           this.page1Char1 = res.data;
         }).catch(err=>{
-          console.log('echarts01 err',err);
+          console.log('getPage1echarts01 err',err);
         })
       },
       getPage1echarts02(){
         page1echarts02().then(res=>{
           // console.log('res',res);
+          let charUuid = this.$refs.page1Char2.mid;
+          this.$refs.page1Char2.intChar(charUuid)
           this.page1Char2 = res.data;
         }).catch(err=>{
-          console.log('echarts01 err',err);
+          console.log('getPage1echarts02 err',err);
         })
       },
       getRightScrollData(){
@@ -232,18 +236,20 @@
         page2echarts01().then(res=>{
           // console.log('res',res);
           this.page2Char1 = res.data;
-          console.log('this.$refs.page2Char1',this.$refs.page2Char1);
-          this.$refs.page2Char1.intChar()
+          let charUuid = this.$refs.page2Char1.mid;
+          this.$refs.page2Char1.intChar(charUuid)
         }).catch(err=>{
-          console.log('echarts01 err',err);
+          console.log('getPage2echarts01 err',err);
         })
       },
       getPage2echarts02(){
         page2echarts02().then(res=>{
           // console.log('res',res);
           this.page2Char2 = res.data;
+          let charUuid = this.$refs.page2Char2.mid;
+          this.$refs.page2Char1.intChar(charUuid)
         }).catch(err=>{
-          console.log('echarts01 err',err);
+          console.log('getPage2echarts02 err',err);
         })
       },