AcidificationModel/shoping/Soil Acid Reduction Iterative Evolution/Soil Acid Reduction Iterative Evolution.js

import * as echarts from '../../components/ec-canvas/echarts';

Page({
  data: {
    initScatterData : [],
    ecLine: {
      onInit: function (canvas, width, height, dpr) {
        const lineChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(lineChart);
        lineChart.setOption(getLineOption());

        return lineChart;
      }
    },
    ecInitScatter: {
      onInit: function (canvas, width, height, dpr) {
        const initScatter = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        canvas.setChart(initScatter);
        getInitScatterOption().then(option => {
          initScatter.setOption(option)
        });

        return initScatter;
      }
    },
  ecMidScatter: {
    onInit: function (canvas, width, height, dpr) {
      const midScatter = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(midScatter);
      getMidScatterOption().then(option => {
        midScatter.setOption(option)
      });

      return midScatter;
    }
  },
    ecFinalScatter: {
      onInit: function (canvas, width, height, dpr) {
        const finalScatter = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(finalScatter);
        getFinalScatterOption().then(option => {
          finalScatter.setOption(option)
        });

        return finalScatter;
      }
    },
  },

  onReady() {
    // You can add any additional logic here if needed
  }
});


function getInitScatterOption() {
  const fetchScatterData = () => {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'https://soilgd.com:5000/model-scatter-data/7',
        method: 'GET',
        timeout: 5000,
        success: (res) => {
          console.log('接口响应:', res);
          // 校验状态码
          if (res.statusCode !== 200) {
            reject(new Error(`请求失败，状态码: ${res.statusCode}`));
            return;
          }

          // 校验数据结构
          if (!res.data?.scatter_data || !Array.isArray(res.data.scatter_data)) {
            reject(new Error('接口数据格式错误'));
            return;
          }

          resolve(res.data.scatter_data);
        },
        fail: (err) => {
          reject(new Error(`网络错误: ${err.errMsg}`));
        }
      });
    });
  };
  
    // 核心计算逻辑
    const calculateChartOptions = (scatterData) => {
      const calculateDataRange = (data) => {
        const xValues = data.map(item => item[0]);
        const yValues = data.map(item => item[1]);
        
        return {
          xMin: Math.min(...xValues),
          xMax: Math.max(...xValues),
          yMin: Math.min(...yValues),
          yMax: Math.max(...yValues)
        };
      };
  
      const range = calculateDataRange(scatterData);
      console.log(scatterData)
      const padding = 0.1;
      const xMin = range.xMin - Math.abs(range.xMin * padding);
      const xMax = range.xMax + Math.abs(range.xMax * padding);
      const yMin = range.yMin - Math.abs(range.yMin * padding);
      const yMax = range.yMax + Math.abs(range.yMax * padding);
      const axisMin = Math.min(xMin, yMin);
      const axisMax = Math.max(xMax, yMax);
  
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        grid: {
          left: '3%',
          right: '22%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: 'True Values',
          type: 'value',
          min: axisMin,
          max: axisMax,
          axisLabel: {
            formatter: value => parseFloat(value).toFixed(2)
          }
        },
        yAxis: {
          name: 'Predicted Values',
          type: 'value',
          min: parseFloat(axisMin).toFixed(2),
          max: parseFloat(axisMax).toFixed(2)
        },
        series: [
          {
            name: 'True vs Predicted',
            type: 'scatter',
            data: scatterData,
            symbolSize: 10,
            itemStyle: {
              color: '#1f77b4',
              opacity: 0.7,
              borderColor: '#fff',
              borderWidth: 0.5
            },
          },
          {
            name: 'Trendline',
            type: 'line',
            data: [[axisMin, axisMin], [axisMax, axisMax]],
            lineStyle: {
              type: 'dashed',
              color: '#ff7f0e',
              width: 2
            }
          }
        ]
      };
    };
  
  return new Promise(async (resolve) => {
    let retryCount = 0;
    const maxRetries = 2;

    while (retryCount <= maxRetries) {
      try {
        const scatterData = await fetchScatterData();
        resolve(calculateChartOptions(scatterData));
        return;
      } catch (error) {
        console.error(`第 ${retryCount + 1} 次尝试失败:`, error);
        
        if (retryCount === maxRetries) {
          resolve({
            xAxis: { show: false },
            yAxis: { show: false },
            series: [{
              type: 'scatter',
              data: [],
              silent: true
            }],
            graphic: {
              type: 'text',
              text: '数据加载失败',
            }
          })
        }
        retryCount++;
        await new Promise(r => setTimeout(r, 1000)); // 1秒后重试
        }
      }
    });
  }
// 反酸模型  中间代  散点图
function getMidScatterOption() {
  /**
   * 计算数据的最大最小值
   * @param {Array} data - 散点数据数组
   * @returns {Object} 包含 xMin, xMax, yMin, yMax 的对象
   */
  const fetchScatterData = () => {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'https://soilgd.com:5000/model-scatter-data/6',
        method: 'GET',
        timeout: 5000,
        success: (res) => {
          console.log('接口响应:', res);
          // 校验状态码
          if (res.statusCode !== 200) {
            reject(new Error(`请求失败，状态码: ${res.statusCode}`));
            return;
          }

          // 校验数据结构
          if (!res.data?.scatter_data || !Array.isArray(res.data.scatter_data)) {
            reject(new Error('接口数据格式错误'));
            return;
          }

          resolve(res.data.scatter_data);
        },
        fail: (err) => {
          reject(new Error(`网络错误: ${err.errMsg}`));
        }
      });
    });
  };
  
    // 核心计算逻辑
    const calculateChartOptions = (scatterData) => {
      const calculateDataRange = (data) => {
        const xValues = data.map(item => item[0]);
        const yValues = data.map(item => item[1]);
        
        return {
          xMin: Math.min(...xValues),
          xMax: Math.max(...xValues),
          yMin: Math.min(...yValues),
          yMax: Math.max(...yValues)
        };
      };
  
      const range = calculateDataRange(scatterData);
      console.log(scatterData)
      const padding = 0.1;
      const xMin = range.xMin - Math.abs(range.xMin * padding);
      const xMax = range.xMax + Math.abs(range.xMax * padding);
      const yMin = range.yMin - Math.abs(range.yMin * padding);
      const yMax = range.yMax + Math.abs(range.yMax * padding);
      const axisMin = Math.min(xMin, yMin);
      const axisMax = Math.max(xMax, yMax);
  
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        grid: {
          left: '3%',
          right: '22%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: 'True Values',
          type: 'value',
          min: axisMin,
          max: axisMax,
          axisLabel: {
            formatter: value => parseFloat(value).toFixed(2)
          }
        },
        yAxis: {
          name: 'Predicted Values',
          type: 'value',
          min: parseFloat(axisMin).toFixed(2),
          max: parseFloat(axisMax).toFixed(2)
        },
        series: [
          {
            name: 'True vs Predicted',
            type: 'scatter',
            data: scatterData,
            symbolSize: 10,
            itemStyle: {
              color: '#1f77b4',
              opacity: 0.7,
              borderColor: '#fff',
              borderWidth: 0.5
            },
          },
          {
            name: 'Trendline',
            type: 'line',
            data: [[axisMin, axisMin], [axisMax, axisMax]],
            lineStyle: {
              type: 'dashed',
              color: '#ff7f0e',
              width: 2
            }
          }
        ]
      };
    };
  
  return new Promise(async (resolve) => {
    let retryCount = 0;
    const maxRetries = 2;

    while (retryCount <= maxRetries) {
      try {
        const scatterData = await fetchScatterData();
        resolve(calculateChartOptions(scatterData));
        return;
      } catch (error) {
        console.error(`第 ${retryCount + 1} 次尝试失败:`, error);
        
        if (retryCount === maxRetries) {
          resolve({
            xAxis: { show: false },
            yAxis: { show: false },
            series: [{
              type: 'scatter',
              data: [],
              silent: true
            }],
            graphic: {
              type: 'text',
              text: '数据加载失败',
            }
          })
        }
        retryCount++;
        await new Promise(r => setTimeout(r, 1000)); // 1秒后重试
        }
      }
    });
  }
// 反酸模型  最终代  散点图
function getFinalScatterOption() {
  /**
   * 计算数据的最大最小值
   * @param {Array} data - 散点数据数组
   * @returns {Object} 包含 xMin, xMax, yMin, yMax 的对象
   */
  const fetchScatterData = () => {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'https://soilgd.com:5000/model-scatter-data/25',
        method: 'GET',
        timeout: 5000,
        success: (res) => {
          console.log('接口响应:', res);
          // 校验状态码
          if (res.statusCode !== 200) {
            reject(new Error(`请求失败，状态码: ${res.statusCode}`));
            return;
          }

          // 校验数据结构
          if (!res.data?.scatter_data || !Array.isArray(res.data.scatter_data)) {
            reject(new Error('接口数据格式错误'));
            return;
          }

          resolve(res.data.scatter_data);
        },
        fail: (err) => {
          reject(new Error(`网络错误: ${err.errMsg}`));
        }
      });
    });
  };
  
    // 核心计算逻辑
    const calculateChartOptions = (scatterData) => {
      const calculateDataRange = (data) => {
        const xValues = data.map(item => item[0]);
        const yValues = data.map(item => item[1]);
        
        return {
          xMin: Math.min(...xValues),
          xMax: Math.max(...xValues),
          yMin: Math.min(...yValues),
          yMax: Math.max(...yValues)
        };
      };
  
      const range = calculateDataRange(scatterData);
      console.log(scatterData)
      const padding = 0.1;
      const xMin = range.xMin - Math.abs(range.xMin * padding);
      const xMax = range.xMax + Math.abs(range.xMax * padding);
      const yMin = range.yMin - Math.abs(range.yMin * padding);
      const yMax = range.yMax + Math.abs(range.yMax * padding);
      const axisMin = Math.min(xMin, yMin);
      const axisMax = Math.max(xMax, yMax);
  
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        grid: {
          left: '3%',
          right: '22%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: 'True Values',
          type: 'value',
          min: axisMin,
          max: axisMax,
          axisLabel: {
            formatter: value => parseFloat(value).toFixed(2)
          }
        },
        yAxis: {
          name: 'Predicted Values',
          type: 'value',
          min: parseFloat(axisMin).toFixed(2),
          max: parseFloat(axisMax).toFixed(2)
        },
        series: [
          {
            name: 'True vs Predicted',
            type: 'scatter',
            data: scatterData,
            symbolSize: 10,
            itemStyle: {
              color: '#1f77b4',
              opacity: 0.7,
              borderColor: '#fff',
              borderWidth: 0.5
            },
          },
          {
            name: 'Trendline',
            type: 'line',
            data: [[axisMin, axisMin], [axisMax, axisMax]],
            lineStyle: {
              type: 'dashed',
              color: '#ff7f0e',
              width: 2
            }
          }
        ]
      };
    };
  
  return new Promise(async (resolve) => {
    let retryCount = 0;
    const maxRetries = 2;

    while (retryCount <= maxRetries) {
      try {
        const scatterData = await fetchScatterData();
        resolve(calculateChartOptions(scatterData));
        return;
      } catch (error) {
        console.error(`第 ${retryCount + 1} 次尝试失败:`, error);
        
        if (retryCount === maxRetries) {
          resolve({
            xAxis: { show: false },
            yAxis: { show: false },
            series: [{
              type: 'scatter',
              data: [],
              silent: true
            }],
            graphic: {
              type: 'text',
              text: '数据加载失败',
            }
          })
        }
        retryCount++;
        await new Promise(r => setTimeout(r, 1000)); // 1秒后重试
        }
      }
    });
  }

function getLineOption() {
  return {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Random Forest', 'XGBoost', 'Gradient Boosting']  // 模型名称
    },
    grid: {
      left: '3%',
      right: '17%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      name: '模型迭代',
      type: 'category',
      boundaryGap: false,
      data: ['1代','2代','3代','4代','5代','6代','7代','8代','9代']  // train_sizes按10%递增
    },
    yAxis: {
      name: 'Score (R^2)',
      type: 'value'
    },
    series: [
      {
        name: 'Random Forest',
        type: 'line',
        data: [-0.17101591951095463, -0.556719360354051, -0.04083550751401055, -0.20858221504075436, 0.07297292282221035, 0.19857845644421734, 0.28407131176770184, 0.27979356883596496, 0.36904808817286416, 0.4183018571701477]  // 使用您的实际R2分数数据
      },
      {
        name: 'XGBoost',
        type: 'line',
        data: [-1.1811781145886937, -1.5645641005612534, -0.12619079632263497, 0.03324096120721032, 0.06969290639267578, 0.12375262461601955, 0.5331670468884062, 0.49454793164801647, 0.31904329339597803, 0.2712670704381914]
      },
      {
        name: 'Gradient Boosting',
        type: 'line',
        data: [-0.8583039298789095, -1.073316171952042, 0.09659300885027666, 0.06097833957434784, 0.191975498544109, 0.3718334600546489, 0.3948098332187753, 0.4398778520728397, 0.452609022210963, 0.41484634172723023]
      }
    ]
  };
}