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

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

Page({
  data: {
    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 // new
        });
        canvas.setChart(initScatter);
        initScatter.setOption(getInitScatterOption());

        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);
      midScatter.setOption(getMidScatterOption());

      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);
        finalScatter.setOption(getFinalScatterOption());

        return finalScatter;
      }
    },
  },

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

// 降酸模型  初代  散点图
function getInitScatterOption() {
  const calculateDataRange = (data) => {
    let xValues = data.map(item => item[0]);
    let yValues = data.map(item => item[1]);
    
    return {
      xMin: Math.min(...xValues),
      xMax: Math.max(...xValues),
      yMin: Math.min(...yValues),
      yMax: Math.max(...yValues)
    };
  };

  const scatterData = [[0.12931, 0.10315928999999999], [0.066298, 0.10226514000000003], [0.057692, 0.10226514000000003], [0.072464, 0.10339078000000003], [0.146414, 0.10000317000000003], [0.087263, 0.09199080000000004], [0.096983, 0.09947644], [0.070505, 0.10142657000000004], [0.052497, 0.09956722000000007], [0.166515, 0.10179712], [0.063291, 0.10339078000000003]];

  const range = calculateDataRange(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 min = Math.min(xMin, yMin)
  const max = Math.max(xMax, yMax)
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['True vs Predicted']
    },
    grid: {
      left: '4%',
      right: '22%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      name: 'True Values',
      type: 'value',
      min: min,
      max: max
    },
    yAxis: {
      name: 'Predicted Values',
      type: 'value',
      min: parseFloat(min).toFixed(2),
      max: parseFloat(max).toFixed(2)
    },
    series: [
      {
        name: 'True vs Predicted',
        type: 'scatter',
        data: scatterData,
        symbolSize: 10,
        itemStyle: {
          color: '#1f77b4',
          opacity: 0.7
        }
      },
      {
        name: 'Trendline',
        type: 'line',
        data: [
          [min, min],
          [max, max]
        ],
        lineStyle: {
          type: 'dashed',
          color: '#ff7f0e',
          width: 2
        }
      }
    ]
  };
}

// 降酸模型  中间代  散点图
function getMidScatterOption() {
  const calculateDataRange = (data) => {
    let xValues = data.map(item => item[0]);
    let yValues = data.map(item => item[1]);
    
    return {
      xMin: Math.min(...xValues),
      xMax: Math.max(...xValues),
      yMin: Math.min(...yValues),
      yMax: Math.max(...yValues)
    };
  };

  const scatterData = [[0.12931, 0.09595878000000002], [0.066298, 0.10344700000000003], [0.057692, 0.10344700000000003], [0.072464, 0.09011803], [0.146414, 0.0853504500000001], [0.087263, 0.07407179000000012], [0.096983, 0.10581049999999995], [0.070505, 0.09876380000000004], [0.052497, 0.08568465000000008], [0.166515, 0.13348440999999997], [0.063291, 0.09011803]];

  const range = calculateDataRange(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 min = Math.min(xMin, yMin)
  const max = Math.max(xMax, yMax)
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['True vs Predicted']
    },
    grid: {
      left: '4%',
      right: '22%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      name: 'True Values',
      type: 'value',
      min: min,
      max: max
    },
    yAxis: {
      name: 'Predicted Values',
      type: 'value',
      min: parseFloat(min).toFixed(2),
      max: parseFloat(max).toFixed(2)
    },
    series: [
      {
        name: 'True vs Predicted',
        type: 'scatter',
        data: scatterData,
        symbolSize: 10,
        itemStyle: {
          color: '#1f77b4',
          opacity: 0.7
        }
      },
      {
        name: 'Trendline',
        type: 'line',
        data: [
          [min, min],
          [max, max]
        ],
        lineStyle: {
          type: 'dashed',
          color: '#ff7f0e',
          width: 2
        }
      }
    ]
  };
}

// 降酸模型散点图
function getFinalScatterOption() {
  const calculateDataRange = (data) => {
    let xValues = data.map(item => item[0]);
    let yValues = data.map(item => item[1]);
    
    return {
      xMin: Math.min(...xValues),
      xMax: Math.max(...xValues),
      yMin: Math.min(...yValues),
      yMax: Math.max(...yValues)
    };
  };

  const scatterData = [[0.12931, 0.1144982841836412], [0.066298, 0.07733075000000009], 
  [0.057692, 0.07784833000000009], [0.072464, 0.09429906104591025], 
  [0.146414, 0.11774272000000004], [0.087263, 0.07587641627546172], 
  [0.096983, 0.12344755999999983], [0.070505, 0.06424743000000006], 
  [0.052497, 0.07665224568865422], [0.166515, 0.15591779999999988], 
  [0.063291, 0.09275175104591024]];

  const range = calculateDataRange(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 min = Math.min(xMin, yMin)
  const max = Math.max(xMax, yMax)
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['True vs Predicted']
    },
    grid: {
      left: '4%',
      right: '22%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      name: 'True Values',
      type: 'value',
      min: min,
      max: max
    },
    yAxis: {
      name: 'Predicted Values',
      type: 'value',
      min: parseFloat(min).toFixed(2),
      max: parseFloat(max).toFixed(2)
    },
    series: [
      {
        name: 'True vs Predicted',
        type: 'scatter',
        data: scatterData,
        symbolSize: 10,
        itemStyle: {
          color: '#1f77b4',
          opacity: 0.7
        }
      },
      {
        name: 'Trendline',
        type: 'line',
        data: [
          [min, min],
          [max, max]
        ],
        lineStyle: {
          type: 'dashed',
          color: '#ff7f0e',
          width: 2
        }
      }
    ]
  };
}


// 降酸模型折线图
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.07014332070467688, 0.16174446067644666, 0.45539363923645115, 0.42496898634299696, 0.4538427686692541, 0.418902219699232, 0.3944331740214546, 0.5036773554206873, 0.6231911298905934, 0.7017514238881619]
      },
      {
        name: 'XGBoost',
        type: 'line',
        data: [-0.5854699949971149, 0.12632204933742897, 0.5552415957727412, 0.36024885147666674, 0.3983302490476677, 0.11693728875627551, 0.41317321044147026, 0.7833174829404705, 0.6626050730438451, 0.8168196535959388]
      },
      {
        name: 'Gradient Boosting',
        type: 'line',
        data: [-0.2099996080229254, 0.2604127444757308, 0.5544068626708099, 0.37487088504748367, 0.32309657868722486, 0.24740671740183884, 0.4949107161199925, 0.694806526591159, 0.6719430144475025, 0.7889677514137288]
      }
    ]
  };
}