327可视化修改

src/views/echart/echartLine.vue

@@ -207,10 +207,99 @@ const getshuju = (dataheader, data) => {
   console.log("初始化后的 series:", series.value);
 };
 
+
+const selectshuju = (listcbval,listcbval2,dataheader, data) => {
+  console.log("图曲线数据1：", data);
+
+  curvedata.value = data;
+  series.value = [];
+  xdata.value = [];
+  const ydata = ref([]);
+
+  vars.value = dataheader;  // dataheader 是包含 label 和 prop 的数组
+  vals.value = data; // vals 是表格数据
+
+  console.log('listcbval',listcbval)
+  console.log('listcbval2',listcbval2)
+  // 生成 X 轴数据和 Y 轴数据
+  const xColumns = listcbval;  // 获取 listcbval 中选择的列，作为 X 轴
+  const yColumns = listcbval2;  // 获取 listcbval2 中选择的列，作为 Y 轴
+  console.log('xColumns',xColumns)
+  console.log('yColumns',yColumns)
+
+  if (xColumns.length === 0 || yColumns.length === 0) {
+    console.error('请先选择 X 轴和 Y 轴的变量');
+    return;
+  }
+
+  // 遍历每一行数据，为每对 X 和 Y 轴选择的列生成数据
+  for (let i = 0; i < vals.value.length; i++) {
+    let xValue = [];
+    let yValue = [];
+
+    // 对于每个 X 轴选择的列，提取该列数据
+    for (let xCol of xColumns) {
+      let xColumnData = vals.value[i][xCol];  // 获取当前行的 X 列数据
+      xValue.push(xColumnData);
+    }
+
+    // 对于每个 Y 轴选择的列，提取该列数据
+    for (let yCol of yColumns) {
+      let yColumnData = vals.value[i][yCol];  // 获取当前行的 Y 列数据
+      yValue.push(yColumnData);
+    }
+
+    xdata.value.push(xValue);
+    ydata.value.push(yValue);
+  }
+
+  // 为每个 Y 轴数据列生成一条曲线
+  for (let yColIndex = 0; yColIndex < yColumns.length; yColIndex++) {
+    const label = yColumns[yColIndex];  // 使用 Y 轴列名作为曲线的标签
+    let seriesData = [];
+
+    for (let rowIndex = 0; rowIndex < vals.value.length; rowIndex++) {
+      let xValues = xdata.value[rowIndex]; // 获取当前行的 X 轴数据
+      let yValue = ydata.value[rowIndex][yColIndex]; // 获取当前行的 Y 轴数据
+
+      // 将 X 和 Y 的数据组成成对的数据，传给 seriesData
+      for (let xVal of xValues) {
+        seriesData.push([xVal, yValue]);  // 每对 (X, Y) 数据
+      }
+    }
+
+    // 生成曲线的数据
+    series.value.push({
+      name: label,  // 使用列名作为曲线名
+      type: "line",  // 散点图类型
+      data: seriesData, 
+    });
+  }
+
+  // 处理 ECharts 图表配置
+  const myChart = echarts.init(chartContainer.value);
+
+  myChart.setOption({
+    legend: {
+      data: yColumns,  // 图例数据使用 Y 轴的列名
+    },
+    xAxis: {
+      type: "category",  // 设置为 "category" 表示 x 轴为分类数据
+      data: xdata.value, // x 轴数据为 X 轴数据
+    },
+    yAxis: {
+      type: "value",  // y 轴是数值型
+    },
+    series: series.value,  // 使用生成的 series 数据
+  });
+
+  console.log("初始化后的 series:", series.value);
+};
+
 const linechart = () => {
   option.value = {
     title: {
-      text: "压力分布",
+      text: " ",
       left: "7%",
       top: "5%",
       textStyle: {
@@ -253,7 +342,7 @@ const linechart = () => {
     xAxis: {
       type: "category",
       boundaryGap: false,
-      name: "cd",
+      name: "",
         nameGap:30,
         nameTextStyle:{
           fontSize: 16,
@@ -277,7 +366,7 @@ const linechart = () => {
     },
     yAxis: {
       type: "value",
-      name:"-cl",
+      name:"",
       nameGap:30,
       nameTextStyle:{
         fontsize:16,
@@ -327,7 +416,7 @@ const linechart = () => {
 //   console.log('echartData changed:', newValue);
 // //  console.log(optmonitor1.value);
 // }, {deep: true ,immediate: true });
-defineExpose({ linechart, getsockechart, echatinit ,getshuju})
+defineExpose({ linechart, getsockechart, echatinit ,getshuju,selectshuju})
 </script>
       <style lang="scss" scoped>
 .selcal {

src/views/echart/scatter.vue

@@ -202,9 +202,13 @@ const selectshuju = (listcbval,listcbval2,dataheader, data) => {
   vars.value = dataheader;  // dataheader 是包含 label 和 prop 的数组
   vals.value = data; // vals 是表格数据
 
+  console.log('listcbval',listcbval)
+  console.log('listcbval2',listcbval2)
   // 生成 X 轴数据和 Y 轴数据
-  const xColumns = listcbval.value;  // 获取 listcbval 中选择的列，作为 X 轴
-  const yColumns = listcbval2.value;  // 获取 listcbval2 中选择的列，作为 Y 轴
+  const xColumns = listcbval;  // 获取 listcbval 中选择的列，作为 X 轴
+  const yColumns = listcbval2;  // 获取 listcbval2 中选择的列，作为 Y 轴
+  console.log('xColumns',xColumns)
+  console.log('yColumns',yColumns)
 
   if (xColumns.length === 0 || yColumns.length === 0) {
     console.error('请先选择 X 轴和 Y 轴的变量');

src/views/home.vue

@@ -797,7 +797,7 @@
               <div class="dialog-footer">
                 
                 <el-button @click="dialog.scatterdialog = false">取消</el-button>
-                <el-button type="primary" @click="selectshujuto;dialog.scatterdialog = false">
+                <el-button type="primary" @click="selectshujuto();dialog.scatterdialog = false">
                   确定
                 </el-button>
               </div>
@@ -820,7 +820,7 @@
               <div class="dialog-footer">
                 
                 <el-button @click="dialog.echartLinedialog = false">取消</el-button>
-                <el-button type="primary" @click="dialog.echartLinedialog = false">
+                <el-button type="primary" @click="selectshujuto2();dialog.echartLinedialog = false">
                   确定
                 </el-button>
               </div>
@@ -3068,8 +3068,8 @@ const curveLine4 = () => {
       console.log("表头数据:", datatotableheader.value);
       emitter.emit('update:datatotableheader', datatotableheader.value);
       emitter.emit('update:datatotabledata', datatotabledata.value);
-      scatterref.value.getshuju(datatotableheader.value,datatotabledata.value);
-      echartLineref.value.getshuju(datatotableheader.value,datatotabledata.value);
+      // scatterref.value.getshuju(datatotableheader.value,datatotabledata.value);
+      // echartLineref.value.getshuju(datatotableheader.value,datatotabledata.value);
     })
     .catch((err) => {
       ElMessage.error(err.returnMsg)
@@ -3158,6 +3158,11 @@ const selectshujuto = () => {
   scatterref.value.selectshuju(listcbval.value,listcbval2.value,datatotableheader.value,datatotabledata.value);
 }
 
+const selectshujuto2 = () => {
+  console.log("选择数据");
+  echartLineref.value.selectshuju(listcbval.value,listcbval2.value,datatotableheader.value,datatotabledata.value);
+}
+
 
 //选择颜色改变线的颜色
 const colorpicker = (e) => {