连线，曲线显示，模板创建bug修改

src/style/index.css

@@ -283,8 +283,9 @@ text-transform: none;
     text-align: left;
   }
   .echartitem{
+    display: flex;
     width: 100%;
-    height: auto;
+    height: 100%;
     background: #FFFFFF;
 border-radius: 0px 0px 0px 0px;
 border: 1px solid rgba(0,0,0,0.3);
@@ -446,12 +447,20 @@ margin-top: -6px;
   padding: 7px 9px 7px 9px !important;
 
 }
+
+.echartcont {
+  width: 100%;
+  height: 100%;
+}
+
 .femFooter {
-  position: absolute;
+  position: relative;
   /* position: fixed; */
   /* min-height: 230px; */
+  height: 230px;
   width: 100%;
   bottom: 0px;
+  overflow: auto;
 }
 .el-footer{
  --el-footer-padding: 0 0 0 0px;
@@ -477,8 +486,9 @@ margin-top: -6px;
   width: 100%;
 }
 .maxh221{
- height: calc(100vh - 361px);
+ /* height: calc(100vh - 361px); */
   flex: 1;
+  overflow: auto;
 }
 /* .main_container{
   display: flex;

src/style/style.css

@@ -444,12 +444,19 @@ margin-top: -6px;
   padding: .0365rem .0469rem .0365rem  .0469rem !important;
 
 }
+
+.echartcont {
+  height: 100%;
+  width: 100%;
+}
+
 .femFooter {
-  position: absolute;
+  position: relative;
   /* position: fixed; */
-  min-height: 300px;
+  height: 230px;
   width: 100%;
   bottom: 0px;
+  overflow: auto;
 }
 .el-footer{
  --el-footer-padding: 0 0 0 0px;

src/views/echart/BarChart.vue

@@ -1,43 +1,63 @@
 <template>
-    <div>
-
-        <div class="echartitem">
-            <div id="bargraphbar" style="width:1400px;height:500px;"></div>
-        </div>
+  <div style="width: 100%;height: 100%;">
+    <!-- 横条图 -->
+    <div class="echartitem" style="width: 100%;height: 100%;">
+      <div id="bargraphbar" ref="chartContainer" style="width: 100%;height: 100%;"></div>
     </div>
+  </div>
 </template>
 <script setup>
-import { ref, onMounted, reactive, } from "vue";
+import { ref, onMounted, reactive } from "vue"
 import { RouterView, RouterLink } from "vue-router"
-import { request, uploadFile } from "@/utils/request";
-import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-import * as echarts from 'echarts'
+import { request, uploadFile } from "@/utils/request"
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
+import * as echarts from "echarts"
 import { graphic } from "echarts/core"
-let myChart;
-let vars = ref([]);
-let vals = ref([]);
-let series = ref([]);
-let xdata = ref([]);
-let chartContainer = ref(null);
+let myChart
+let vars = ref([])
+let vals = ref([])
+let series = ref([])
+let xdata = ref([])
+let chartContainer = ref(null)
 let chartDom = ref()
-let option = ref(null);
-let convergeDate = ref([]);
-let curvedata = ref('')
+let option = ref(null)
+let convergeDate = ref([])
+let curvedata = ref("")
 let state = reactive({
-    instance: null,
+  instance: null
 })
-const getData = () => {
-};
+const getData = () => {}
 onMounted(() => {
-    var chartDom = document.getElementById('bargraphbar');
-    myChart = echarts.init(chartDom);
-    setOptionfun()
+  var chartDom = document.getElementById("bargraphbar")
+  myChart = echarts.init(chartDom)
+  setOptionfun()
 })
+
+const props = defineProps({
+  BarChartshow: {
+    type: Boolean,
+    default: false,
+  },
+});
+// 监听 BarChartshow 变化
+watch(() => props.BarChartshow, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      const chartDom = chartContainer.value;
+      if (chartDom) {
+        myChart = echarts.init(chartDom);
+        myChart.resize();  // 手动调整图表大小
+        setOptionfun();  // 设置图表配置
+      }
+    });
+  }
+}, { immediate: true });
+
 //初始化
 const echatinit = () => {
-    convergeDate.value = [];
-    series.value = [];
-    xdata.value = [];
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
 }
 // 从websocket取数据
 // const getsockechart = (data) => {
@@ -72,83 +92,81 @@ const echatinit = () => {
 //     });
 // }
 // 数据 从接口处取
-const getsockechart=(data)=>{
-  curvedata.value=data;
-  convergeDate.value=[];
-  series.value=[];
-  xdata.value=[];
-    let rows=JSON.parse(curvedata.value);
-  let num=0;
-    for(let i=0;i<rows.length;i++){
-      num+=1;
-       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(num);
+const getsockechart = (data) => {
+  curvedata.value = data
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
+  let rows = JSON.parse(curvedata.value)
+  let num = 0
+  for (let i = 0; i < rows.length; i++) {
+    num += 1
+    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(num)
+  }
+  console.log(convergeDate.value)
+  // console.log( convergeDate.value);
+  for (let j = 0; j < vars.value.length; j++) {
+    let firstColumn = convergeDate.value.map((row) => row[j])
+    let item = {
+      name: vars.value[j],
+      type: "bar",
+      data: firstColumn
     }
-    console.log(convergeDate.value);
-   // console.log( convergeDate.value);
-    for(let j=0;j<vars.value.length;j++){
-     let firstColumn=  convergeDate.value.map(row => row[j]);
-     let item = {
-              name: vars.value[j],
-            type: 'bar',
-            data: firstColumn
-        }
     series.value.push(item)
-    }
-    myChart.setOption({
-      legend: {
-            data:vars.value
-        },
-      xAxis:{
-        data:  xdata.value,
-      },
-      series: series.value
-    });
-
   }
+  myChart.setOption({
+    legend: {
+      data: vars.value
+    },
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+}
 const setOptionfun = () => {
-    option.value = {
-        title: {
-            text: '横条图'
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow'
-            }
-        },
-        grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-        },
-        legend: {
-            data: vars.value
-        },
-        toolbox: {
-            feature: {
-                saveAsImage: {}
-            }
-        },
-
-        xAxis: {
-            type: 'value',
-        },
-        yAxis: {
-            type: 'category',
-            data: xdata.value
+  option.value = {
+    title: {
+      text: "横条图"
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+    },
+    legend: {
+      data: vars.value
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
 
-        },
-        series: series.value
-    };
+    xAxis: {
+      type: "value"
+    },
+    yAxis: {
+      type: "category",
+      data: xdata.value
+    },
+    series: series.value
+  }
 
-    option.value && myChart.setOption(option.value);
+  option.value && myChart.setOption(option.value)
 }
-defineExpose({ getsockechart, echatinit });
+defineExpose({ getsockechart, echatinit })
 </script>
 <style lang="scss" scoped></style>
   

src/views/echart/area.vue

@@ -1,50 +1,81 @@
 <template>
-  <div>
+  <div style="width: 100%;height: 100%;">
     <!-- 面积图 -->
-  <div class="echartitem">
-    <div id="area"  style="width:1200px;height:500px;"></div>
-  </div>
+    <div class="echartitem" style="width: 100%;height: 100%;">
+      <div id="area" ref="chartContainer" style="width: 100%;height: 100%;"></div>
+    </div>
   </div>
 </template>
 <script setup>
-import { ref, onMounted, reactive,nextTick } from "vue";
+import { ref, onMounted, reactive, nextTick } from "vue"
 import { RouterView, RouterLink } from "vue-router"
-import { request, uploadFile } from "@/utils/request";
-import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-import * as echarts from 'echarts'
-import {graphic} from "echarts/core"
-let emit = defineEmits(['',])
-let myChart;
-let vars=ref([]);
-let vals=ref([]);
-let series=ref([]);
-let xdata=ref([]);
-let chartContainer=ref(null);
-let chartDom=ref()
-let option=ref(null);
-let convergeDate=ref([]);
-let curvedata=ref('')  
+import { request, uploadFile } from "@/utils/request"
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
+import * as echarts from "echarts"
+import { graphic } from "echarts/core"
+let emit = defineEmits([""])
+let myChart
+let vars = ref([])
+let vals = ref([])
+let series = ref([])
+let xdata = ref([])
+let chartContainer = ref(null)
+let chartDom = ref()
+let option = ref(null)
+let convergeDate = ref([])
+let curvedata = ref("")
 let state = reactive({
-instance: null,
+  instance: null
 })
-const getData = () => {
-};
+const getData = () => {}
 onMounted(() => {
+  nextTick(() => {
+    console.log("onMounted called");
+    const chartDom = document.getElementById('area');
+    console.log("chartDom:", chartDom);  // 检查是否获取到 DOM 元素
 
-var chartDom = document.getElementById('area');
- myChart = echarts.init(chartDom);
- setOptionfun()
-//  $nextTick(() => {
-//       // 假设你想定位到节点node1
-//       setOptionfun()
-//     });  
+    if (chartDom) {
+      myChart = echarts.init(chartDom);
+      myChart.resize();
+      setOptionfun();
+    }
+  });
+ 
+  //  $nextTick(() => {
+  //       // 假设你想定位到节点node1
+  //       setOptionfun()
+  //     });
+})
 
+const props = defineProps({
+  areashow: {
+    type: Boolean,
+    default: false
+  }
 })
-  //初始化
-  const echatinit=()=>{
-  convergeDate.value=[];
-  series.value=[];
-  xdata.value=[];
+// 监听 areashow 变化
+watch(
+  () => props.areashow,
+  (newValue) => {
+    if (newValue) {
+      nextTick(() => {
+        const chartDom = chartContainer.value
+        if (chartDom) {
+          myChart = echarts.init(chartDom)
+          myChart.resize() // 手动调整图表大小
+          setOptionfun() // 设置图表配置
+        }
+      })
+    }
+  },
+  { immediate: true }
+)
+
+//初始化
+const echatinit = () => {
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
 }
 // 从websocket取数据
 // const getsockechart=(data)=>{
@@ -52,7 +83,7 @@ var chartDom = document.getElementById('area');
 //   series.value=[];
 //   let rows=curvedata.value;
 //   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));
@@ -83,109 +114,110 @@ var chartDom = document.getElementById('area');
 //       series: series.value
 //     });
 // }
- // 数据转化废弃
- const getsockechart=(data)=>{
-  curvedata.value=data;
-  convergeDate.value=[];
-  series.value=[];
-  xdata.value=[];
-    let rows=JSON.parse(curvedata.value);
-  let num=0;
-    for(let i=0;i<rows.length;i++){
-      num+=1;
-       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(num);
-    }
-    console.log(convergeDate.value);
-   // console.log( convergeDate.value);
-    for(let j=0;j<vars.value.length;j++){
-     let firstColumn=  convergeDate.value.map(row => row[j]);
-    let item= {
-      name:vars.value[j] ,
-      type: 'line',
-      stack: 'Total',
+// 数据转化废弃
+const getsockechart = (data) => {
+  curvedata.value = data
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
+  let rows = JSON.parse(curvedata.value)
+  let num = 0
+  for (let i = 0; i < rows.length; i++) {
+    num += 1
+    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(num)
+  }
+  console.log(convergeDate.value)
+  // console.log( convergeDate.value);
+  for (let j = 0; j < vars.value.length; j++) {
+    let firstColumn = convergeDate.value.map((row) => row[j])
+    let item = {
+      name: vars.value[j],
+      type: "line",
+      stack: "Total",
       areaStyle: {},
       emphasis: {
-        focus: 'series'
+        focus: "series"
       },
-      data:firstColumn
+      data: firstColumn
     }
     series.value.push(item)
-    }
-    myChart.setOption({
-      legend: {
-            data:vars.value
-        },
-      xAxis:{
-        data:  xdata.value,
-      },
-      series: series.value
-    });
-
   }
-const setOptionfun=()=>{
-    option.value = {
-  title: {
-    text: '面积图'
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'cross',
-      label: {
-        backgroundColor: '#6a7985'
+  myChart.setOption({
+    legend: {
+      data: vars.value
+    },
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+}
+const setOptionfun = () => {
+  option.value = {
+    title: {
+      text: "面积图"
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        label: {
+          backgroundColor: "#6a7985"
+        }
       }
-    }
-  },
-  legend: {
-    data:vars.value
-  },
-  toolbox: {
-    feature: {
-      saveAsImage: {}
-    }
-  },
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: [
-    {
-      type: 'category',
-      boundaryGap: false,
-      data:  xdata.value,
-      axisLine: {//X轴线
-            show: true, 
-            lineStyle: {
-                color: '#000', // 线的颜色
-                width: 2, // 线宽
-                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
-            }
-            },
-    }
-  ],
-  yAxis: [
-    {
-      type: 'value',
-      axisLine: {//Y轴线
-            show: true, 
-            lineStyle: {
-                color: '#000', // 线的颜色
-                width: 2, // 线宽
-                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
-            }
-},
-    }
-  ],
-  series:series.value
-};
+    },
+    legend: {
+      data: vars.value
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: false,
+        data: xdata.value,
+        axisLine: {
+          //X轴线
+          show: true,
+          lineStyle: {
+            color: "#000", // 线的颜色
+            width: 2, // 线宽
+            type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: "value",
+        axisLine: {
+          //Y轴线
+          show: true,
+          lineStyle: {
+            color: "#000", // 线的颜色
+            width: 2, // 线宽
+            type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+          }
+        }
+      }
+    ],
+    series: series.value
+  }
 
-option.value && myChart.setOption(option.value);
+  option.value && myChart.setOption(option.value)
 }
 //   watch(() =>myChart, (newValue, oldValue) => {
 //         if (newValue) {
@@ -194,10 +226,8 @@ option.value && myChart.setOption(option.value);
 
 // });
 
-
-defineExpose({getsockechart,echatinit});
+defineExpose({ getsockechart, echatinit })
 </script>
 <style lang="scss" scoped>
-
 </style>
 

src/views/echart/bargraph.vue

@@ -1,43 +1,63 @@
 <template>
-    <div>
-
-        <div class="echartitem">
-            <div id="bargraph" style="width:1400px;height:500px;"></div>
-        </div>
+  <div style="width: 100%; height: 100%">
+    <!-- 柱状图 -->
+    <div class="echartitem" style="width: 100%; height: 100%">
+      <div id="bargraph" ref="chartContainer" style="width: 100%; height: 100%"></div>
     </div>
+  </div>
 </template>
 <script setup>
-import { ref, onMounted, reactive, } from "vue";
+import { ref, onMounted, reactive } from "vue"
 import { RouterView, RouterLink } from "vue-router"
-import { request, uploadFile } from "@/utils/request";
-import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-import * as echarts from 'echarts'
+import { request, uploadFile } from "@/utils/request"
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
+import * as echarts from "echarts"
 import { graphic } from "echarts/core"
-let myChart;
-let vars = ref([]);
-let vals = ref([]);
-let series = ref([]);
-let xdata = ref([]);
-let chartContainer = ref(null);
+let myChart
+let vars = ref([])
+let vals = ref([])
+let series = ref([])
+let xdata = ref([])
+let chartContainer = ref(null)
 let chartDom = ref()
-let option = ref(null);
-let convergeDate = ref([]);
-let curvedata = ref('')
+let option = ref(null)
+let convergeDate = ref([])
+let curvedata = ref("")
 let state = reactive({
-    instance: null,
+  instance: null
 })
-const getData = () => {
-};
+const getData = () => {}
 onMounted(() => {
-    var chartDom = document.getElementById('bargraph');
-    myChart = echarts.init(chartDom);
-    setOptionfun()
+  var chartDom = document.getElementById("bargraph")
+  myChart = echarts.init(chartDom)
+  setOptionfun()
 })
+
+const props = defineProps({
+  bargraphshow: {
+    type: Boolean,
+    default: false,
+  },
+});
+// 监听 bargraphshow 变化
+watch(() => props.bargraphshow, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      const chartDom = chartContainer.value;
+      if (chartDom) {
+        myChart = echarts.init(chartDom);
+        myChart.resize();  // 手动调整图表大小
+        setOptionfun();  // 设置图表配置
+      }
+    });
+  }
+}, { immediate: true });
+
 //初始化
 const echatinit = () => {
-    convergeDate.value = [];
-    series.value = [];
-    xdata.value = [];
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
 }
 // 从websocket取数据
 // const getsockechart = (data) => {
@@ -108,82 +128,81 @@ const echatinit = () => {
 //     });
 
 //   }
- const getsockechart=(data)=>{
-  curvedata.value=data;
-  convergeDate.value=[];
-  series.value=[];
-  xdata.value=[];
-    let rows=JSON.parse(curvedata.value);
-  let num=0;
-    for(let i=0;i<rows.length;i++){
-      num+=1;
-       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(num);
+const getsockechart = (data) => {
+  curvedata.value = data
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
+  let rows = JSON.parse(curvedata.value)
+  let num = 0
+  for (let i = 0; i < rows.length; i++) {
+    num += 1
+    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(num)
+  }
+  console.log(convergeDate.value)
+  // console.log( convergeDate.value);
+  for (let j = 0; j < vars.value.length; j++) {
+    let firstColumn = convergeDate.value.map((row) => row[j])
+    let item = {
+      name: vars.value[j],
+      type: "bar",
+      data: firstColumn
     }
-    console.log(convergeDate.value);
-   // console.log( convergeDate.value);
-    for(let j=0;j<vars.value.length;j++){
-     let firstColumn=  convergeDate.value.map(row => row[j]);
-     let item = {
-              name: vars.value[j],
-            type: 'bar',
-            data: firstColumn
-        }
     series.value.push(item)
-    }
-    myChart.setOption({
-      legend: {
-            data:vars.value
-        },
-      xAxis:{
-        data:  xdata.value,
-      },
-      series: series.value
-    });
-
   }
+  myChart.setOption({
+    legend: {
+      data: vars.value
+    },
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+}
 const setOptionfun = () => {
-    option.value = {
-        title: {
-            text: '柱状图'
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow'
-            }
-        },
-        grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-        },
-        legend: {
-            data: vars.value
-        },
-        toolbox: {
-            feature: {
-                saveAsImage: {}
-            }
-        },
+  option.value = {
+    title: {
+      text: "柱状图"
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+    },
+    legend: {
+      data: vars.value
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
 
-        xAxis: {
-            type: 'category',
-            data: xdata.value
-        },
-        yAxis: {
-            type: 'value'
-        },
-        series: series.value
-    };
+    xAxis: {
+      type: "category",
+      data: xdata.value
+    },
+    yAxis: {
+      type: "value"
+    },
+    series: series.value
+  }
 
-    option.value && myChart.setOption(option.value);
+  option.value && myChart.setOption(option.value)
 }
-defineExpose({ getsockechart, echatinit });
+defineExpose({ getsockechart, echatinit })
 </script>
 <style lang="scss" scoped></style>
   

src/views/echart/echartLine.vue

@@ -1,228 +1,250 @@
 <template>
-
-    <!-- 折线图 -->
-        <div>
-        <div class="echartitem">
-          <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
-            <div id="line2"  ref="chartContainer"  style="width:100%;height:500px;"></div>
-        </div>
-        </div>
-      </template>
+  <!-- 折线图 -->
+  <div style="width: 100%; height: 100%">
+    <div class="echartitem" style="width: 100%; height: 100%">
+      <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
+      <div
+        id="line2"
+        ref="chartContainer"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
       <script setup>
-      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'
-    import * as echarts from 'echarts'
-    let vars=ref([]);
-    let vals=ref([]);
-    let series=ref([]);
-    let xdata=ref([]);
-    let chartContainer=ref(null);
-    let myChart;
-    let chartDom=ref()
-    let option=ref(null);
-    let convergeDate=ref([]);
-    let curvedata=ref('')  
-    let state = reactive({
-    instance: null,
-    })
-    const props = defineProps({
-      echartdata: {
-      type: String,
-    },
-    curvedata:{
-      type: String,
-    },
-    })
-    onMounted(() => {
-     chartContainer.value.style.width=window.innerWidth-220+'px';       
-        myChart = echarts.init(chartContainer.value);
-        linechart();
-          window.addEventListener("resize",function() {
-            chartContainer.value.style.width='';
-          myChart.resize();
-    })
-         })
-      //初始化
-      const echatinit=()=>{
-      convergeDate.value=[];
-      series.value=[];
-      xdata.value=[];
-    }
-    // 从websocket取数据
-    // const getsockechart=(data)=>{
-    //   curvedata.value=data;
-    //   series.value=[];
-    //   let rows=curvedata.value;
-    //   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++){
-    //   let firstColumn=(convergeDate.value.map((row) => row[j]));
-    //          let item= {
-    //       name:vars.value[j] ,
-    //       type: 'line',
-    //       stack: 'Total',
-    //       data: firstColumn
-    //     }
-    //     series.value.push(item)
-    //     }
-    //     myChart.setOption({
-    //       legend: {
-    //             data:vars.value
-    //         },
-    //       xAxis:{
-    //         data:  xdata.value,
-    //       },
-    //       series: series.value
-    //     });
+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"
+import * as echarts from "echarts"
+let vars = ref([])
+let vals = ref([])
+let series = ref([])
+let xdata = ref([])
+let chartContainer = ref(null)
+let myChart
+let chartDom = ref()
+let option = ref(null)
+let convergeDate = ref([])
+let curvedata = ref("")
+let state = reactive({
+  instance: null
+})
+const props = defineProps({
+  echartdata: {
+    type: String
+  },
+  curvedata: {
+    type: String
+  },
+  echartLineshow: {
+    type: Boolean,
+    default: false
+  }
+})
+onMounted(() => {
+  chartContainer.value.style.width = window.innerWidth - 220 + "px"
+  myChart = echarts.init(chartContainer.value)
+  linechart()
+  myChart.resize();
+})
 
-     
-    // } 
-    
-    const getsockechart=(data)=>{
-  curvedata.value=data;
-  convergeDate.value=[];
-  series.value=[];
-  xdata.value=[];
-    let rows=JSON.parse(curvedata.value);
-  let num=0;
-    for(let i=0;i<rows.length;i++){
-      num+=1;
-       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(num);
+// 监听 scattershow 变化
+watch(
+  () => props.echartLineshow,
+  (newValue) => {
+    if (newValue) {
+      nextTick(() => {
+        const chartDom = chartContainer.value
+        if (chartDom) {
+          myChart = echarts.init(chartDom)
+          myChart.resize() // 手动调整图表大小
+          linechart()// 设置图表配置
+        }
+      })
     }
-    console.log(convergeDate.value);
-   // console.log( convergeDate.value);
-    for(let j=0;j<vars.value.length;j++){
-     let firstColumn=  convergeDate.value.map(row => row[j]);
-            let item= {
-      name:vars.value[j] ,
-      type: 'line',
-      stack: 'Total',
+  },
+  { immediate: true }
+)
+//初始化
+const echatinit = () => {
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
+}
+// 从websocket取数据
+// const getsockechart=(data)=>{
+//   curvedata.value=data;
+//   series.value=[];
+//   let rows=curvedata.value;
+//   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++){
+//   let firstColumn=(convergeDate.value.map((row) => row[j]));
+//          let item= {
+//       name:vars.value[j] ,
+//       type: 'line',
+//       stack: 'Total',
+//       data: firstColumn
+//     }
+//     series.value.push(item)
+//     }
+//     myChart.setOption({
+//       legend: {
+//             data:vars.value
+//         },
+//       xAxis:{
+//         data:  xdata.value,
+//       },
+//       series: series.value
+//     });
+
+// }
+
+const getsockechart = (data) => {
+  curvedata.value = data
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
+  let rows = JSON.parse(curvedata.value)
+  let num = 0
+  for (let i = 0; i < rows.length; i++) {
+    num += 1
+    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(num)
+  }
+  console.log(convergeDate.value)
+  // console.log( convergeDate.value);
+  for (let j = 0; j < vars.value.length; j++) {
+    let firstColumn = convergeDate.value.map((row) => row[j])
+    let item = {
+      name: vars.value[j],
+      type: "line",
+      stack: "Total",
       data: firstColumn
     }
     series.value.push(item)
-    }
-    myChart.setOption({
-      legend: {
-            data:vars.value
-        },
-      xAxis:{
-        data:  xdata.value,
-      },
-      series: series.value
-    });
-
   }
-      const linechart= ()=>{
-    option.value = {
-      title: {
-    text: '折线图'
-  },
-              tooltip: {
-              trigger: "axis",//item
-              backgroundColor: "rgba(0,0,0,.6)",
-              borderColor: "rgba(147, 235, 248, .8)",
-              textStyle: {
-                color: "#FFF",
-              },
-            },
-            legend: {
-                data:vars.value
-            },
-            grid: {
-                show: false,
-                left: '3%',
-                right: '4%',
-                bottom: '3%',
-                containLabel: true
-            },
-            toolbox: {
-                feature: {
-                saveAsImage: {}
-                }
-            },
-            xAxis: {
-                type: 'category',
-                boundaryGap: false,
-                data:  xdata.value,
-                axisLine: {//X轴线
-                show: true, 
-                lineStyle: {
-                    color: '#000', // 线的颜色
-                    width: 2, // 线宽
-                    type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
-                }
-                },
-                splitLine: {
-                show: true // 如果不需要网格线，可以设置为 false
-            }
-            },
-            yAxis: {
-                type: 'value',
-                axisLine: {//Y轴线
-                show: true, 
-                lineStyle: {
-                    color: '#000', // 线的颜色
-                    width: 2, // 线宽
-                    type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
-                }
+  myChart.setOption({
+    legend: {
+      data: vars.value
     },
-            },
-            series:series.value
-            };
-            option.value && myChart.setOption(option.value);
-            window.onresize = function() {
-                // 让图表自适应大小
-                myChart.resize();
-            };
+    xAxis: {
+      data: xdata.value
+    },
+    series: series.value
+  })
+}
+const linechart = () => {
+  option.value = {
+    title: {
+      text: "折线图"
+    },
+    tooltip: {
+      trigger: "axis", //item
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF"
+      }
+    },
+    legend: {
+      data: vars.value
+    },
+    grid: {
+      show: false,
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: xdata.value,
+      axisLine: {
+        //X轴线
+        show: true,
+        lineStyle: {
+          color: "#000", // 线的颜色
+          width: 2, // 线宽
+          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+        }
+      },
+      splitLine: {
+        show: true // 如果不需要网格线，可以设置为 false
+      }
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        //Y轴线
+        show: true,
+        lineStyle: {
+          color: "#000", // 线的颜色
+          width: 2, // 线宽
+          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
         }
-        // 监听数据变化，重绘图表
-      //   watch( myChart.value, () => {
-      //     console.log(11111)
-      //     window.onresize = function() {
-      //           // 让图表自适应大小
-      //           myChart.value.resize();
-      //       };
-      // });
-      //window.addEventListener('resize', handleResize);
-    // watch(series, () => {
-    //   linechart();
-    // }, { deep: true });
-        // watch(() =>props.echartdata, (newValue, oldValue) => {
-        //   // 这里处理 echartData 变化的逻辑
-        //   console.log(11111)
-        //   console.log('echartData changed:', newValue);
-        // //  console.log(optmonitor1.value);
-        // }, {deep: true ,immediate: true });
-        defineExpose({linechart,getsockechart,echatinit});
-      </script>
-      <style lang="scss" scoped>
-      .selcal{
-        position: absolute;
-        top: 37%;
-        width: 26px;
-        color: #000;
-        font-size: 14px;
-        font-weight: bold;
-        left: 5px
       }
-     .diedai{
-      color: #000;
-      font-size: 14px;
-      padding-bottom: 20px;
-      font-weight: bold;
-     }
-      </style>
+    },
+    series: series.value
+  }
+  option.value && myChart.setOption(option.value)
+  window.onresize = function () {
+    // 让图表自适应大小
+    myChart.resize()
+  }
+}
+// 监听数据变化，重绘图表
+//   watch( myChart.value, () => {
+//     console.log(11111)
+//     window.onresize = function() {
+//           // 让图表自适应大小
+//           myChart.value.resize();
+//       };
+// });
+//window.addEventListener('resize', handleResize);
+// watch(series, () => {
+//   linechart();
+// }, { deep: true });
+// watch(() =>props.echartdata, (newValue, oldValue) => {
+//   // 这里处理 echartData 变化的逻辑
+//   console.log(11111)
+//   console.log('echartData changed:', newValue);
+// //  console.log(optmonitor1.value);
+// }, {deep: true ,immediate: true });
+defineExpose({ linechart, getsockechart, echatinit })
+</script>
+      <style lang="scss" scoped>
+.selcal {
+  position: absolute;
+  top: 37%;
+  width: 26px;
+  color: #000;
+  font-size: 14px;
+  font-weight: bold;
+  left: 5px;
+}
+.diedai {
+  color: #000;
+  font-size: 14px;
+  padding-bottom: 20px;
+  font-weight: bold;
+}
+</style>
      
       

src/views/echart/optimize_monitor.vue

@@ -4,7 +4,7 @@
     <div>
     <div class="echartitem">
       <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
-        <div id="line"  ref="chartContainer"  style="width:100%;height:400px;"></div>
+        <div id="line"  ref="chartContainer"  style="width:100%;height:390px;"></div>
         <h3 class="diedai">迭代次数</h3>
     </div>
     </div>

src/views/echart/pie.vue

@@ -2,7 +2,7 @@
     <div>
 
         <div class="echartitem">
-            <div id="pie" style="width:1400px;height:500px;"></div>
+            <div id="pie" style="width:1400px;height:390px;"></div>
         </div>
     </div>
 </template>

src/views/echart/radar.vue

@@ -1,8 +1,8 @@
 <template>
-    <div>
-
-        <div class="echartitem">
-            <div id="radar" style="width:1400px;height:500px;"></div>
+    <div style="width: 100%;height: 100%;">
+      <!-- 雷达图 -->
+        <div class="echartitem" style="width: 100%;height: 100%;">
+            <div id="radar" ref="chartContainer" style="width: 100%;height: 100%;"></div>
         </div>
     </div>
 </template>
@@ -37,6 +37,27 @@ onMounted(() => {
     myChart = echarts.init(chartDom);
     setOptionfun()
 })
+
+const props = defineProps({
+  radarshow: {
+    type: Boolean,
+    default: false,
+  },
+});
+// 监听 radarshow 变化
+watch(() => props.radarshow, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      const chartDom = chartContainer.value;
+      if (chartDom) {
+        myChart = echarts.init(chartDom);
+        myChart.resize();  // 手动调整图表大小
+        setOptionfun();  // 设置图表配置
+      }
+    });
+  }
+}, { immediate: true });
+
 //初始化
 const echatinit = () => {
     convergeDate.value = [];

src/views/echart/scatter.vue

@@ -1,14 +1,14 @@
 <template>
     <!-- 优化监控 -->
-<!-- 折线图 -->
-  <div >
-  <div class="echartitem">
-    <div id="linesan" style="width: 1400px;height:500px"></div>
+<!-- 散点图 -->
+  <div style="width: 100%;height: 100%;">
+  <div class="echartitem" style="width: 100%;height: 100%;">
+    <div id="linesan" ref="chartContainer" style="width: 100%;height:100%"></div>
   </div>
   </div>
 </template>
 <script setup>
-import { ref, onMounted, reactive, } from "vue";
+import { ref, onMounted, reactive, nextTick} from "vue";
 import { RouterView, RouterLink } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
@@ -31,12 +31,42 @@ const getData = () => {
   setOption(dateList.value, numList.value, numList2.value);
 };
 onMounted(() => {
- var chartDom = document.getElementById('linesan');
- myChart = echarts.init(chartDom);
-  setOptionfunc()
-})
-  //初始化
-  const echatinit=()=>{
+  nextTick(() => {
+    console.log("onMounted called");
+    const chartDom = document.getElementById('linesan');
+    console.log("chartDom:", chartDom);  // 检查是否获取到 DOM 元素
+
+    if (chartDom) {
+      myChart = echarts.init(chartDom);
+      myChart.resize();
+      setOptionfunc();
+    }
+  });
+});
+
+
+const props = defineProps({
+  scattershow: {
+    type: Boolean,
+    default: false,
+  },
+});
+// 监听 scattershow 变化
+watch(() => props.scattershow, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      const chartDom = chartContainer.value;
+      if (chartDom) {
+        myChart = echarts.init(chartDom);
+        myChart.resize();  // 手动调整图表大小
+        setOptionfunc();  // 设置图表配置
+      }
+    });
+  }
+}, { immediate: true });
+
+//初始化
+const echatinit=()=>{
   convergeDate.value=[];
   series.value=[];
   xdata.value=[];

src/views/home.vue

@@ -1521,13 +1521,13 @@
               <div class="echart_right ech">right</div> -->
                   </div>
                   <!-- 可视化开始 -->
-                  <div class="conter_mian classtable" v-show="echartzongshow">
-                    <echartarea ref="arearef" v-show="areashow" />
-                    <bargraph ref="bargraphref" v-show="bargraphshow" />
-                    <echartLine ref="echartLineref" v-show="echartLineshow" />
-                    <BarChart ref="BarChartref" v-show="BarChartshow" />
-                    <scatter ref="scatterref" v-show="scattershow" />
-                    <radar ref="radarref" v-show="radarshow" />
+                  <div class="conter_mian classtable echartcont" v-show="echartzongshow">
+                    <echartarea ref="arearef" v-show="areashow" :areashow="areashow"/>
+                    <bargraph ref="bargraphref" v-show="bargraphshow" :bargraphshow="bargraphshow"/>
+                    <echartLine ref="echartLineref" v-show="echartLineshow" :echartLineshow="echartLineshow"/>
+                    <BarChart ref="BarChartref" v-show="BarChartshow" :BarChartshow="BarChartshow"/>
+                    <scatter ref="scatterref" v-show="scattershow" :scattershow="scattershow"/>
+                    <radar ref="radarref" v-show="radarshow" :radarshow="radarshow"/>
                   </div>
                   <!-- 可视化结束 -->
                   <!-- 右侧边栏开始 -->
@@ -2704,7 +2704,7 @@ const pythonSubmit = () => {
 // 模块选择
 const clickgeometry = (e, index, key, name) => {
   console.log(key);
-  console.log(name);
+  console.log('模块选择:',name);
   tabactive.value = name;
   dialogbolen();
 }
@@ -2953,6 +2953,7 @@ const curveLine = () => {
 
 //选择颜色改变线的颜色
 const colorpicker = (e) => {
+  console.log("color change:",vuefval.value);
   vuefval.value.changeAllEdgesColor(color1.value);
 
 }

src/views/home/newfile.vue

@@ -161,8 +161,8 @@ const saveclick=()=>{
     ElMessage.error('描述不能为空')
   }
   else{
-   
-  if(gcid.value=='2'){
+   console.log('gcid:',gcid.value)
+  if(gcid.value=='2'||gcid.value=='3'||gcid.value=='4'){
     
     modeladd();
   }else{

src/views/titlecomponent/ffds.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="XFpdding">
     <div>
-      <el-form-item label="FFD box：" >
+      <el-form-item label="FFD包围盒：" >
         <el-input
           v-model="ffdvalue.fname"
           :max="20"

src/views/vuetree/index.vue

@@ -332,24 +332,39 @@ function onNodeDoubleClick(e) {
 
 let onPythonlist=ref(['Python','Branin','Rosenbrock','Rastrigin','G9','Forrester']);
 
+
+let previousEdge = null;  // 用于保存上一个选中的边缘
 // 监听线
 function onEdgeClick(e) {
+  // 如果已经有选中的边缘
   if (seledge.value) {
-    seledge.value.style = {
-      ...seledge.value.style,
-      stroke:'#b1b1b7',
-      strokeWidth: 1,
+    // 恢复上一个选中边缘的样式
+    if (previousEdge) {
+      previousEdge.style = {
+        ...previousEdge.style,
+        stroke: previousEdge.originalColor,  // 恢复原始颜色
+        strokeWidth: 1,                      // 恢复原始宽度
+      };
     }
   }
+
+  // 保存当前点击的边缘为选中边缘
   Edgeid.value = e.edge.id;
-  seledge.value= e.edge;
+  seledge.value = e.edge;
+
+  // 暂时更改当前选中边缘的样式
+  seledge.value.originalColor = seledge.value.style.stroke;  // 保存当前边缘的原始颜色
   seledge.value.style = {
     ...seledge.value.style,
-    stroke:'#2267B1',
-    strokeWidth: 2,
-  }
-  
+    stroke: '#2267B1',       // 设置选中边缘的颜色
+    strokeWidth: 2,          // 设置选中边缘的宽度
+  };
+
+  // 保存当前选中的边缘作为上一个选中边缘
+  previousEdge = seledge.value;
 }
+
+
 function logEvent(name, event) {
   console.log(2222)
 }
@@ -573,20 +588,35 @@ console.log(num)
 
 }
 //改变线的颜色
-const changeAllEdgesColor=(color1)=>{
-  linecolor.value= color1;
-  if(  seledge.value){
-    console.log(11111)
-    seledge.value.style.stroke =  linecolor.value;
-  }
+const changeAllEdgesColor = (color1) => {
+  console.log('yanse:', color1);
+  linecolor.value = color1;
 
- 
-}
+  // 找到当前选中的边缘
+  if (seledge.value) {
+    // 更新该边缘的颜色，不修改宽度
+    const updatedEdge = { 
+      ...seledge.value, 
+      style: { 
+        ...seledge.value.style, 
+        stroke: linecolor.value, // 只修改颜色
+        strokeWidth: 1, // 保持选中样式的宽度（如果想要恢复原始宽度，设置为 1）
+      }
+    };
+
+    // 更新 edges 数组
+    const updatedEdges = edges.value.map(edge => 
+      edge.id === seledge.value.id ? updatedEdge : edge
+    );
+
+    edges.value = updatedEdges; // 持久化修改后的边缘
+  }
+};
 
 watch(() => seledge.value, (newItems, oldItems) => {
-  // if(seledge.value!=null){
-  //   //seledge.value.style.stroke =  linecolor.value;
-  // }
+  if(seledge.value!=null){
+    // seledge.value.style.stroke =  linecolor.value;
+  }
     });
 defineExpose({changeAllEdgesColor,linestrokeWidth,getroter,onSelection,bgcolorfunc});
 </script>