|  | @@ -18,21 +18,12 @@ 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(['变量1','变量2'])
 | 
	
		
			
				|  |  | +let vars = ref([])
 | 
	
		
			
				|  |  |  let vals = ref([])
 | 
	
		
			
				|  |  |  let series = ref([
 | 
	
		
			
				|  |  | -  {
 | 
	
		
			
				|  |  | -    name: "变量1",
 | 
	
		
			
				|  |  | -    type: "line",
 | 
	
		
			
				|  |  | -    data: [10, 20, 30, 40] // y轴对应数据
 | 
	
		
			
				|  |  | -  },
 | 
	
		
			
				|  |  | -  {
 | 
	
		
			
				|  |  | -    name: "变量2",
 | 
	
		
			
				|  |  | -    type: "line",
 | 
	
		
			
				|  |  | -    data: [20, 10, 40, 30] // y轴对应数据
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | +  
 | 
	
		
			
				|  |  |  ])
 | 
	
		
			
				|  |  | -let xdata = ref(['-0.25','0.00','0.25','0.50','0.75','1.00'])
 | 
	
		
			
				|  |  | +let xdata = ref([])
 | 
	
		
			
				|  |  |  let chartContainer = ref()
 | 
	
		
			
				|  |  |  let myChart
 | 
	
		
			
				|  |  |  let chartDom = ref()
 | 
	
	
		
			
				|  | @@ -67,77 +58,175 @@ const echatinit = () => {
 | 
	
		
			
				|  |  |    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
 | 
	
		
			
				|  |  | +//   })
 | 
	
		
			
				|  |  | +//   // linechart();
 | 
	
		
			
				|  |  | +// }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  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],
 | 
	
		
			
				|  |  | +  console.log("曲线数据1:", data);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  curvedata.value = data;
 | 
	
		
			
				|  |  | +  
 | 
	
		
			
				|  |  | +  let rows = curvedata.value;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  vars = rows[0].vars.split(" ");
 | 
	
		
			
				|  |  | +  vals = rows[0].vals.split(" ");
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  console.log("vars:", vars);
 | 
	
		
			
				|  |  | +  console.log("vals:", vals);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  xdata.value.push(parseFloat(vals[0]));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  let existingSeries = series.value.find((s) => s.name === vars[1]);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  if (existingSeries) {
 | 
	
		
			
				|  |  | +    existingSeries.data.push([parseFloat(vals[0]), parseFloat(vals[1])]);
 | 
	
		
			
				|  |  | +  } else {
 | 
	
		
			
				|  |  | +    series.value.push({
 | 
	
		
			
				|  |  | +      name: vars[1],
 | 
	
		
			
				|  |  |        type: "line",
 | 
	
		
			
				|  |  | -      stack: "Total",
 | 
	
		
			
				|  |  | -      data: firstColumn
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    series.value.push(item)
 | 
	
		
			
				|  |  | +      showSymbol: false,
 | 
	
		
			
				|  |  | +      data: [[parseFloat(vals[0]), parseFloat(vals[1])]], 
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |    myChart.setOption({
 | 
	
		
			
				|  |  |      legend: {
 | 
	
		
			
				|  |  | -      data: vars.value
 | 
	
		
			
				|  |  | +      data: [vars[1]],  // 图例数据
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      xAxis: {
 | 
	
		
			
				|  |  | -      data: xdata.value
 | 
	
		
			
				|  |  | +      type: "value",  
 | 
	
		
			
				|  |  | +      min: 0,         
 | 
	
		
			
				|  |  | +      max: 1,       
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    series: series.value
 | 
	
		
			
				|  |  | -  })
 | 
	
		
			
				|  |  | -  // linechart();
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | +    yAxis: {
 | 
	
		
			
				|  |  | +      type: "value"  // Y 轴也是数值轴
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    series: series.value  
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  console.log("更新后的 xdata1:", xdata.value);
 | 
	
		
			
				|  |  | +  console.log("更新后的 series1:", series.value);
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  // 数据转化废弃
 | 
	
		
			
				|  |  | +// const getshuju = (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 getshuju = (data) => {
 | 
	
		
			
				|  |  | -  curvedata.value = data
 | 
	
		
			
				|  |  | -  convergeDate.value = []
 | 
	
		
			
				|  |  | -  series.value = []
 | 
	
		
			
				|  |  | -  xdata.value = []
 | 
	
		
			
				|  |  | -  let rows = JSON.parse(curvedata.value)
 | 
	
		
			
				|  |  | -  let num = 0
 | 
	
		
			
				|  |  | +  // console.log("曲线数据1:", data);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  curvedata.value = data;
 | 
	
		
			
				|  |  | +  convergeDate.value = [];
 | 
	
		
			
				|  |  | +  series.value = [];
 | 
	
		
			
				|  |  | +  xdata.value = [];
 | 
	
		
			
				|  |  | +  
 | 
	
		
			
				|  |  | +  // 解析传入的 JSON 数据
 | 
	
		
			
				|  |  | +  let rows = JSON.parse(curvedata.value);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  vars = rows[0].vars.split(" ");
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |    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
 | 
	
		
			
				|  |  | +    let vals = rows[i].vals.split(" ");
 | 
	
		
			
				|  |  | +    let existingSeries = series.value.find((s) => s.name === vars[1]);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    if (existingSeries) {
 | 
	
		
			
				|  |  | +      existingSeries.data.push([parseFloat(vals[0]), parseFloat(vals[1])]);
 | 
	
		
			
				|  |  | +    } else {
 | 
	
		
			
				|  |  | +      series.value.push({
 | 
	
		
			
				|  |  | +        name: vars[1],
 | 
	
		
			
				|  |  | +        type: "line",
 | 
	
		
			
				|  |  | +        showSymbol: false,
 | 
	
		
			
				|  |  | +        data: [[parseFloat(vals[0]), parseFloat(vals[1])]], 
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -    series.value.push(item)
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  console.log("vars:", vars);
 | 
	
		
			
				|  |  | +  console.log("vals:", vals);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |    myChart.setOption({
 | 
	
		
			
				|  |  |      legend: {
 | 
	
		
			
				|  |  | -      data: vars.value
 | 
	
		
			
				|  |  | +      data: [vars[1]],  // 图例数据
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      xAxis: {
 | 
	
		
			
				|  |  | -      data: xdata.value
 | 
	
		
			
				|  |  | +      type: "value",  
 | 
	
		
			
				|  |  | +      min: 0,         
 | 
	
		
			
				|  |  | +      max: 1,       
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    series: series.value
 | 
	
		
			
				|  |  | -  })
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | +    yAxis: {
 | 
	
		
			
				|  |  | +      type: "value"  // Y 轴也是数值轴
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    series: series.value  
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  console.log("初始化后的 xdata1:", xdata.value);
 | 
	
		
			
				|  |  | +  console.log("初始化后的 series1:", series.value);
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const linechart = () => {
 | 
	
		
			
				|  |  |    //  let chartDom = document.getElementById('line');
 | 
	
	
		
			
				|  | @@ -175,13 +264,13 @@ const linechart = () => {
 | 
	
		
			
				|  |  |        bottom: "10%",
 | 
	
		
			
				|  |  |        containLabel: true
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    toolbox: {
 | 
	
		
			
				|  |  | -      feature: {
 | 
	
		
			
				|  |  | -        saveAsImage: {}
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | +    // toolbox: {
 | 
	
		
			
				|  |  | +    //   feature: {
 | 
	
		
			
				|  |  | +    //     saveAsImage: {}
 | 
	
		
			
				|  |  | +    //   }
 | 
	
		
			
				|  |  | +    // },
 | 
	
		
			
				|  |  |      xAxis: {
 | 
	
		
			
				|  |  | -      type: "category",
 | 
	
		
			
				|  |  | +      type: "value",
 | 
	
		
			
				|  |  |        boundaryGap: false,
 | 
	
		
			
				|  |  |        name: "x/c",
 | 
	
		
			
				|  |  |        nameGap:40,
 | 
	
	
		
			
				|  | @@ -229,6 +318,17 @@ const linechart = () => {
 | 
	
		
			
				|  |  |          show:true,
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | +    dataZoom: [
 | 
	
		
			
				|  |  | +      {
 | 
	
		
			
				|  |  | +        type: "inside", // 鼠标滚轮缩放
 | 
	
		
			
				|  |  | +        xAxisIndex: [0], // 针对 X 轴
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      {
 | 
	
		
			
				|  |  | +        type: "slider", // 滑动条缩放
 | 
	
		
			
				|  |  | +        xAxisIndex: [0],
 | 
	
		
			
				|  |  | +        show: false,
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    ],
 | 
	
		
			
				|  |  |      series: series.value
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |    option.value && myChart.setOption(option.value)
 |