509可视化修改

src/views/echart/BarChart.vue

@@ -161,6 +161,17 @@ const setOptionfun = () => {
       type: "category",
       data: xdata.value
     },
+    dataZoom:[
+      {
+        type:'inside',
+        xAxisIndex:[0],
+      },
+      {
+        type:'silder',
+        xAxisIndex:[0],
+        show: false,
+      }
+    ],
     series: series.value
   }
 

src/views/echart/area.vue

@@ -159,6 +159,81 @@ const getsockechart = (data) => {
   });
 };
 
+const selectshuju = (listcbval,listcbval2,dataheader,data)=>{
+  curvedata.value = data;
+  series.value = [];
+  xdata.value = [];
+  const ydata = ref([]);
+
+  vars.value = dataheader;
+  vals.value = data;
+
+  const xColumns = listcbval;
+  const yColumns = listcbval2;
+
+  if(xColumns.length === 0 || yColumns.length === 0) {
+    console.error("请先选择 X 轴和 Y 轴的变量");
+    return;
+  }
+
+  for(let i =0; i<vals.value.length; i++){
+    let xValue = [];
+    let yValue = [];
+
+    for (let xCol of xColumns) {
+      xValue.push(vals.value[i][xCol]);
+    }
+    for (let yCol of yColumns) {
+      yValue.push(vals.value[i][yCol]);
+    }
+
+    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: "area",  
+      data: seriesData, 
+    });
+  }
+
+  // 处理 ECharts 图表配置
+  const myChart = echarts.init(chartContainer.value);
+
+  myChart.setOption({
+    legend: {
+      data: yColumns,  // 图例数据使用 Y 轴的列名
+    },
+    xAxis: {
+      type: "value",  // 设置为 "category" 表示 x 轴为分类数据
+      data: xdata.value, // x 轴数据为 X 轴数据
+      scale: true,  // 自动缩放
+    },
+    yAxis: {
+      type: "value",  // y 轴是数值型
+      // scale: true,
+    },
+    series: series.value,  // 使用生成的 series 数据
+  });
+}
+
 const setOptionfun = () => {
   option.value = {
     title: {
@@ -250,6 +325,17 @@ const setOptionfun = () => {
         },
       }
     ],
+    dataZoonm: [
+      {
+        typr:'inside',
+        xAxisIndex: [0],
+      },
+      {
+        type:'slider',
+        xAxisIndex: [0],
+        show: false,
+      }
+    ],
     series: series.value
   }
 

src/views/echart/bargraph.vue

@@ -197,6 +197,17 @@ const setOptionfun = () => {
     yAxis: {
       type: "value"
     },
+    dataZoom:[
+      {
+        type:"inside",
+        xAxisIndex:[0],
+      },
+      {
+        type:"slider",
+        xAxisIndex:[0],
+        show:false,
+      }
+    ],
     series: series.value
   }
 

src/views/echart/echartLine.vue

@@ -293,6 +293,7 @@ const selectshuju = (listcbval,listcbval2,dataheader, data) => {
       scale: true,
     },
     series: series.value,  // 使用生成的 series 数据
+    
   });
 
   console.log("初始化后的 series:", series.value);
@@ -392,6 +393,17 @@ const linechart = () => {
         }
       }
     },
+    dataZoom: [
+      {
+        type:"inside",
+        xAxisIndex: [0],
+      },
+      {
+        type:'slider',
+        xAxisIndex: [0],
+        show: false,
+      },
+    ],
     series: series.value
   }
   option.value && myChart.setOption(option.value)

src/views/echart/pareto.vue

@@ -237,6 +237,7 @@ const setOptionfunc = async () => {
       {
         type: "slider", // 滑动条缩放
         xAxisIndex: [0],
+        show: false,
       }
     ],
     series: series.value

src/views/echart/scatter.vue

@@ -33,17 +33,17 @@ let convergeDate = ref([])
 let curvedata = ref("")
 
 onMounted(() => {
-  nextTick(() => {
-    console.log("onMounted called")
-    const chartDom = document.getElementById("linesan")
-    console.log("chartDom:", chartDom) // 检查是否获取到 DOM 元素
-
-    if (chartDom) {
-      myChart = echarts.init(chartDom)
-      myChart.resize()
-      setOptionfunc()
-    }
-  })
+  // 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({
@@ -77,7 +77,7 @@ const echatinit = () => {
   xdata.value = []
 }
 
-// 数据 从接口处取
+// 数据 从接口处取(未使用)
 const getsockechart = (data) => {
   curvedata.value = data
   convergeDate.value = []
@@ -133,7 +133,7 @@ const getsockechart = (data) => {
 }
 
 
-// 绘制所有数据曲线，X轴为行索引
+// 绘制所有数据曲线，X轴为行索引（未使用）
 const getshuju = (dataheader, data) => {
   console.log("散点图曲线数据1：", data);
 
@@ -374,16 +374,18 @@ const setOptionfunc = async () => {
         }
       }
     },
-    // dataZoom: [
-    //   {
-    //     type: "inside", // 鼠标滚轮缩放
-    //     xAxisIndex: [0], // 针对 X 轴
-    //   },
-    //   {
-    //     type: "slider", // 滑动条缩放
-    //     xAxisIndex: [0],
-    //   }
-    // ],
+    dataZoom: [
+      {
+        type: "inside", // 鼠标滚轮缩放
+        xAxisIndex: [0], // 针对 X 轴
+      },
+      {
+        type: "slider", // 滑动条缩放
+        xAxisIndex: [0],
+        show: false,
+        
+      }
+    ],
     series: series.value
   }
   option.value && myChart.setOption(option.value)