10.18修改完

src/views/echart/optimize_monitor.vue

@@ -10,7 +10,7 @@
     </div>
   </template>
   <script setup>
-  import { ref, onMounted, reactive,markRaw, inject,watch} from "vue";
+  import { ref, onMounted, reactive,markRaw, inject,watch,nextTick} from "vue";
 import { RouterView, RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
@@ -20,11 +20,11 @@ let vals=ref([]);
 let series=ref([]);
 let xdata=ref([]);
 let chartContainer=ref(null);
-let myChart=ref(null)
-let chartDom=ref(null)
+let myChart;
+let chartDom=ref()
 let option=ref(null);
 let convergeDate=ref([]);
-let curvedata=ref('')
+let curvedata=ref('')  
 let state = reactive({
 instance: null,
 })
@@ -38,28 +38,14 @@ curvedata:{
 })
   let emit = defineEmits(['',])
 onMounted(() => {
-  //var chartDom = document.getElementById('line');
-  //chartContainer.value.style.width=window.innerWidth-220+'px';
- // console.log( chartContainer.value.style.width);
-    myChart.value = echarts.init(chartContainer.value);
-
+ chartContainer.value.style.width=window.innerWidth-220+'px';       
+    myChart = echarts.init(chartContainer.value);
     linechart();
-    setTimeout(function(){
       window.addEventListener("resize",function() {
-    // chartContainer.value.style.width='';
-      myChart.value.resize();
-    });
-    },1000)
-  
-    // window.onresize = function() {
-    //         // 让图表自适应大小
-    //         myChart.value.resize();
-    //     };
-  //  myChart.value = echarts.init(myChart.value);
-  //myChart.value= echarts.init(chartContainer.value as HTMLElement)
-
- 
-  })
+        chartContainer.value.style.width='';
+      myChart.resize();
+})
+     })
   //初始化
   const echatinit=()=>{
   convergeDate.value=[];
@@ -71,14 +57,12 @@ const getsockechart=(data)=>{
   curvedata.value=data;
   series.value=[];
   let rows=curvedata.value;
-  console.log(rows);
   for(let i=0;i<rows.length;i++){
     
        vars.value=(rows[i].vars).split(",");
        vals.value=(rows[i].vals).split(" ");
        let data= vals.value.map((str) => Number(str));
        convergeDate.value.push(data);
-
        xdata.value.push(rows[i].step);
     }
     for(let j=0;j<vars.value.length;j++){
@@ -91,7 +75,7 @@ const getsockechart=(data)=>{
     }
     series.value.push(item)
     }
-    myChart.value.setOption({
+    myChart.setOption({
       legend: {
             data:vars.value
         },
@@ -132,7 +116,7 @@ const getsockechart=(data)=>{
     }
     series.value.push(item)
     }
-    myChart.value.setOption({
+    myChart.setOption({
       legend: {
             data:vars.value
         },
@@ -200,13 +184,21 @@ option.value = {
         },
         series:series.value
         };
-        option.value && myChart.value.setOption(option.value);
+        option.value && myChart.setOption(option.value);
         window.onresize = function() {
             // 让图表自适应大小
-            myChart.value.resize();
+            myChart.resize();
         };
     }
     // 监听数据变化，重绘图表
+  //   watch( myChart.value, () => {
+  //     console.log(11111)
+  //     window.onresize = function() {
+  //           // 让图表自适应大小
+  //           myChart.value.resize();
+  //       };
+  // });
+  //window.addEventListener('resize', handleResize);
 // watch(series, () => {
 //   linechart();
 // }, { deep: true });